:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#343149;background:#f8f6f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 5% 40%,#e9e6fa 0,transparent 48%),radial-gradient(ellipse at 95% 90%,#e5eddf 0,transparent 50%)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;transition:transform .15s,background .15s}button:active{transform:scale(.97)}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #8060bf;outline-offset:4px}[hidden]{display:none!important}.app{max-width:850px;margin:auto;padding:26px 30px 12px;position:relative}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:800;font-size:18px}.brand small{display:block;font-size:8px;letter-spacing:1.7px;margin-top:5px;color:#81778d}.brand-icon{background:#e6dcf3;color:#765399;border-radius:16px;display:grid;place-items:center;width:45px;height:45px;font-size:33px}.round{width:42px;height:42px;border-radius:50%;background:#ffffffa8;color:#6d607c;font-size:23px}.screen{position:relative}.intro{padding-top:18px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#857399}h1{font-size:clamp(32px,5vw,48px);line-height:1.08;letter-spacing:-1.6px;margin:15px 0}h1 em{font-style:normal;color:#8763a6}p{line-height:1.5;color:#797184}.intro p{max-width:370px;font-size:14px}.garden{position:absolute;right:15px;top:25px;display:flex;align-items:center;gap:13px;color:#b49bc5;font-size:36px}.flower{font-size:100px;background:#eee7dc;border-radius:48% 48% 42% 42%;padding:15px 20px;transform:rotate(9deg);box-shadow:0 14px 40px #a9a28613}.path-head{display:flex;align-items:center;justify-content:space-between;margin-top:25px}h2{font-size:19px;margin:14px 0}.path-head span{font-size:12px;color:#897b91}.tables{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.table{border-radius:20px;min-height:86px;background:#ffffffb8;box-shadow:0 3px 0 #e7e1ec;color:#6e5885;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #fff}.table strong{font-size:25px}.table small{font-size:10px}.table.current{background:#e8def5;border:2px solid #b395d0;box-shadow:0 3px 0 #b395d0}.table.done{background:#e8efdf;color:#60764a}.table:disabled{background:#f0edf1;color:#938b9b;box-shadow:none;opacity:.75}.bottom{text-align:center;margin-top:26px}.primary{background:#8764aa;color:white;padding:16px 24px;border-radius:18px;font-weight:700;box-shadow:0 4px 0 #6e508d;min-height:52px}.bottom .primary{min-width:290px}.muted{font-size:11px;color:#8f8599}.game-top,.mode-row,.progress-label{display:flex;align-items:center;justify-content:space-between;gap:10px}.quiet{background:transparent;color:#7c668f;padding:12px;font-size:13px}.pill{background:#e7deef;padding:10px 15px;border-radius:20px;color:#77578f;font-weight:700;font-size:13px}.mode-row{margin:20px 0;font-size:13px}.mode-row select{border:1px solid #ded5e4;border-radius:12px;padding:10px;background:#fff;color:#675574;max-width:68%}.progress-label{font-size:12px;color:#8a7e96;margin-bottom:8px}.progress{height:8px;background:#e7e0ed;border-radius:20px;overflow:hidden}.progress div{height:100%;width:0;background:#a08abb;transition:width .3s}.question-card{margin:20px 0;background:#ffffffbc;border:1px solid white;border-radius:28px;text-align:center;padding:27px 15px 20px;box-shadow:0 15px 50px #7f65940b}.equation{font-size:clamp(48px,9vw,76px);font-weight:800;letter-spacing:-3px;margin:22px 0;color:#4c3e60}.equation span{display:inline-block;min-width:64px;border-radius:17px;background:#ece4f6;color:#a284bd;padding:0 10px}.question-card p{font-size:15px;min-height:23px;margin:8px 0}.question-card #heard{min-height:19px;font-size:12px;color:#90849a}.answer-area{text-align:center}.mic{min-width:290px}.answer-area>.quiet{display:block;margin:5px auto}form{display:flex;gap:10px;justify-content:center;margin:10px auto;max-width:360px}input{width:50%;border:1px solid #cfbfdc;border-radius:16px;padding:12px;min-width:0}form button{padding:12px!important}.win{text-align:center;padding:30px 0}.win .primary{display:block;margin:30px auto 12px}.trophy{font-size:85px;margin-bottom:20px}footer{text-align:center;font-size:10px;color:#a296ab;padding:18px}footer span{color:#a68db8;margin-left:5px}dialog{width:min(94%,520px);max-height:88dvh;border:0;border-radius:25px;padding:23px;color:#493953;background:#faf7fc;box-shadow:0 25px 100px #42324e40}dialog::backdrop{background:#3b30485c;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}dialog p,details{font-size:13px}.audio-field{background:white;border-radius:14px;padding:12px;margin:10px 0}.audio-field label{font-size:13px;font-weight:bold;display:block;margin-bottom:8px}.audio-field input{width:100%;font-size:11px;border:0;padding:5px}.audio-field small{display:block;color:#8e8296;font-size:10px}.audio-field button{font-size:12px;background:#ece3f5;border-radius:9px;padding:8px;margin-top:6px}.danger{background:#f1e3e8;color:#90546a;border-radius:12px;padding:12px;margin-top:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:600px){.app{padding:18px 20px 4px}header{margin-bottom:12px}.brand{font-size:16px}.brand small{font-size:7px}.intro{padding-top:8px}.intro h1{max-width:240px}.intro p{max-width:220px;font-size:12px}.garden{right:-4px;top:46px;gap:0;font-size:18px}.flower{font-size:55px;padding:12px 6px}.path-head{margin-top:16px}.tables{gap:9px}.table{min-height:76px;border-radius:15px}.table strong{font-size:23px}.table small{font-size:8px}.bottom{margin-top:22px}.bottom .primary,.mic{width:100%;min-width:0}.question-card{padding:24px 10px 18px}.mode-row{margin:17px 0}footer{padding:13px}.win{padding-top:35px}}@media(max-height:700px){.intro h1{font-size:32px}.table{min-height:63px}.intro p{margin:6px 0}.question-card{margin:12px 0;padding:16px 10px}.equation{margin:16px 0}.bottom{margin-top:15px}header{margin-bottom:10px}footer{padding:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.app{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:max(10px,env(safe-area-inset-bottom))}main{flex:1}.app-nav{display:flex;justify-content:space-around;background:#ffffffc9;border:1px solid white;border-radius:23px;margin-top:20px;box-shadow:0 8px 24px #7862860a;padding:7px}.app-nav button{display:flex;flex-direction:column;gap:3px;align-items:center;background:transparent;color:#8a729e;font-size:10px;min-width:75px;padding:4px}.app-nav span{font-size:22px}.app-nav button:first-child{color:#785292;background:#eee5f7;border-radius:15px}@media(min-width:650px){.app{max-width:780px}.app-nav{max-width:430px;width:100%;align-self:center}}@media(max-height:740px){.app-nav{margin-top:10px}.intro{padding-top:0}.intro h1{margin:10px 0}.bottom .muted{margin-bottom:0}.path-head{margin-top:10px}}
/* Instalación y jardín de flores */
.install-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#e9e1f4;border-radius:15px;padding:9px 12px;margin-bottom:12px;font-size:11px;color:#6b527e}.install-banner button{border-radius:10px;padding:10px;background:#8764aa;color:white;font-weight:bold;white-space:nowrap}.install-dialog{text-align:center}.install-dialog img{border-radius:20px;margin-top:12px}.close-install{position:absolute;top:12px;right:12px}.install-dialog h2{font-size:25px}.install-dialog ol{text-align:left;padding-left:23px;font-size:14px;line-height:1.7}.install-dialog .primary{width:100%;margin-top:10px}.install-dialog .quiet{display:block;margin:auto}.install-dialog #installStatus:empty{display:none}details{margin-top:22px}details summary{cursor:pointer}.table{position:relative}.table.done strong{font-size:17px}.table-flower{position:absolute;width:32px;left:3px;bottom:9px;transform:rotate(-10deg);opacity:.85}.table-flower svg{display:block;width:100%;height:100%}.table.done{padding-left:15px}.reward-flower{width:185px;height:206px;margin:0 auto 12px;position:relative}.growing-flower{width:160px;height:206px;margin:auto}.growing-flower svg{width:100%;height:100%;overflow:visible}.growing-flower .stem{transform-origin:60px 145px;animation:stemGrow .85s cubic-bezier(.2,.8,.3,1) both}.growing-flower .blossom{transform-origin:60px 48px;animation:flowerBloom 1.1s .45s cubic-bezier(.2,.8,.3,1.25) both}.sparkles{position:absolute;left:50%;top:32%;pointer-events:none}.sparkles span{position:absolute;color:#c29bcd;font-size:22px;animation:petalSpark 1.5s var(--delay) ease-out both}.win{padding-top:8px}.win h1{font-size:37px}.win .primary{margin-top:20px}.collection h1{font-size:36px}.collection>p{font-size:13px}.flower-collection{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0 25px}.collected-flower{border-radius:18px;background:#fff9;padding:8px 2px;color:#7e638f;min-height:125px}.collected-flower svg{width:100%;max-height:98px;display:block}.collected-flower small{font-size:10px;display:block}.collected-flower.seed{background:#e7ebdf80;opacity:.65}.collected-flower.seed>span{display:grid;place-items:center;font-size:28px;min-height:98px}.collection>.primary{display:block;margin:auto}.audio-notice{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);width:min(94%,460px);background:#fff7e4;border:1px solid #edd598;border-radius:15px;box-shadow:0 4px 20px #0002;padding:12px;font-size:12px;z-index:5}.audio-notice button{background:#eddfbc;border-radius:9px;padding:9px;margin-left:8px}@keyframes stemGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes flowerBloom{0%{transform:scale(0) rotate(-55deg)}70%{transform:scale(1.12) rotate(6deg)}100%{transform:scale(1) rotate(0)}}@keyframes petalSpark{0%{opacity:0;transform:rotate(var(--angle)) translateY(5px) scale(.2)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-115px) scale(1.2)}}@media(max-height:740px){.reward-flower{width:130px;height:151px;margin-bottom:8px}.growing-flower{width:117px;height:151px}.win h1{font-size:29px}.win p{font-size:13px;margin:8px 0}.win .primary{margin-top:15px}.collected-flower{min-height:100px}.collected-flower svg,.collected-flower.seed>span{max-height:75px;min-height:75px}.flower-collection{margin:12px 0 18px}.collection h1{font-size:30px}.install-banner{margin-bottom:6px;padding:6px 10px}}@media(prefers-reduced-motion:reduce){.growing-flower .stem,.growing-flower .blossom{animation:none}.sparkles{display:none}}
@media(max-width:600px) and (max-height:740px){.app{padding-top:12px}.intro h1{font-size:28px;margin:8px 0}.intro p{font-size:11px}.intro .eyebrow{font-size:8px}.garden{top:26px}.flower{font-size:45px}.path-head h2{font-size:16px;margin:10px 0}.table{min-height:58px}.bottom{margin-top:12px}.bottom>.muted{display:none}.app-nav{padding:5px}.app-nav button{padding:2px}.brand-icon{width:38px;height:38px}.brand small{letter-spacing:1px}}