:root{color-scheme:light;--color-paper: oklch(96% .004 85);--color-surface: oklch(100% 0 0);--color-surface-sunken: oklch(98.2% .003 85);--color-ink: oklch(24% .008 275);--color-ink-soft: oklch(48% .008 275);--color-ink-faint: oklch(62% .008 275);--color-rule: oklch(89% .004 85);--color-rule-strong: oklch(80% .005 85);--color-accent: oklch(42% .13 262);--color-accent-strong: oklch(35% .13 262);--color-accent-soft: oklch(94.5% .022 262);--color-danger: oklch(52% .16 30);--color-danger-soft: oklch(95.5% .028 30);--color-success: oklch(50% .11 158);--color-success-soft: oklch(95.5% .03 158);--color-star: oklch(62% .13 75);--color-focus: oklch(42% .13 262);--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-math: Georgia, "Times New Roman", "DejaVu Serif", serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--space-2xs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 5px;--radius-lg: 10px;--rule-hair: 1px;--dur-fast: .12s;--dur-base: .18s;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--panel-width: 21rem}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-ui);font-size:var(--text-base);line-height:1.5;-webkit-text-size-adjust:100%}#app{height:100dvh}h1,h2{font-style:normal;letter-spacing:-.01em}button{font:inherit;cursor:pointer;border-radius:var(--radius-sm);border:var(--rule-hair) solid var(--color-rule-strong);background:var(--color-surface);color:var(--color-ink);padding:.45rem .85rem;white-space:nowrap;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}button:hover:not(:disabled){border-color:var(--color-accent);background:var(--color-accent-soft)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;color:var(--color-ink-faint);background:var(--color-surface-sunken);border-color:var(--color-rule)}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.primary-btn{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-surface);font-weight:600}.primary-btn:hover:not(:disabled){background:var(--color-accent-strong);border-color:var(--color-accent-strong)}.ghost-btn{background:transparent;border-color:transparent;color:var(--color-ink-soft)}.ghost-btn:hover:not(:disabled){color:var(--color-accent-strong);border-color:var(--color-rule-strong)}.teoria-btn{display:inline-flex;align-items:center;gap:.5rem;border-color:var(--color-accent);color:var(--color-accent-strong);font-weight:600;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow .4s var(--ease-out)}.teoria-btn.pulso{box-shadow:0 0 0 5px var(--color-accent-soft)}.teoria-icon{display:inline-flex}.badge{display:inline-block;padding:.1rem .4rem;border-radius:var(--radius-sm);background:var(--color-accent-soft);color:var(--color-accent-strong);font-size:var(--text-xs);font-weight:600;letter-spacing:.01em;white-space:nowrap}.select{max-width:64rem;margin:0 auto;padding:var(--space-xl) var(--space-md) var(--space-2xl)}.select-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;padding-bottom:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule-strong)}.brand{margin:0;font-family:var(--font-math);font-size:var(--text-2xl);font-weight:400}.tagline{margin:var(--space-2xs) 0 0;color:var(--color-ink-soft)}.course{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap;margin:var(--space-sm) 0 0;color:var(--color-ink-faint);font-size:var(--text-sm)}.select-header-right{display:flex;align-items:center;gap:var(--space-sm)}.lang-switch{display:inline-flex;border:var(--rule-hair) solid var(--color-rule-strong);border-radius:var(--radius-sm);background:var(--color-surface)}.lang-option{border:0;border-radius:0;padding:.32rem .55rem;font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;color:var(--color-ink-faint);background:transparent}.lang-option+.lang-option{border-left:var(--rule-hair) solid var(--color-rule)}.lang-option:not(.on):hover{background:var(--color-surface-sunken);color:var(--color-accent-strong);border-color:var(--color-rule)}.lang-option:first-child{border-radius:calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px)}.lang-option:last-child{border-radius:0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0}.lang-option.on{background:var(--color-accent-soft);color:var(--color-accent-strong);cursor:default}.lang-option.on:active{transform:none}.star-count{display:flex;align-items:baseline;gap:.3rem;margin:0;color:var(--color-ink-soft);font-variant-numeric:tabular-nums}.star-count strong{font-family:var(--font-math);font-size:var(--text-xl);font-weight:400;color:var(--color-star)}.world{margin-top:var(--space-xl)}.world-head{display:flex;align-items:center;gap:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:var(--rule-hair) solid var(--color-rule);margin-bottom:var(--space-sm)}.world-number{font-family:var(--font-math);font-size:var(--text-xl);color:var(--color-ink-faint);font-variant-numeric:tabular-nums;min-width:1.2em}.world-head h2{margin:0;font-size:var(--text-md);font-weight:600}.world-subtitle{margin:0;color:var(--color-ink-soft);font-size:var(--text-sm)}.world-head .badge{margin-left:auto}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--space-xs)}.level-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-sm);text-align:left;white-space:normal;padding:var(--space-sm);border-color:var(--color-rule);border-radius:var(--radius-lg)}.level-ordinal{font-family:var(--font-math);font-size:var(--text-lg);color:var(--color-ink-faint);font-variant-numeric:tabular-nums}.level-body{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}.level-title{font-weight:500;overflow-wrap:anywhere}.level-foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-xs)}.level-note{color:var(--color-ink-faint);font-size:var(--text-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-stars{color:var(--color-star);font-size:var(--text-sm);letter-spacing:.08em;white-space:nowrap}.level-card.solved{border-color:var(--color-rule-strong)}.level-card.solved .level-ordinal{color:var(--color-success)}.level-card.solved .level-note{font-family:var(--font-math);color:var(--color-ink-soft)}.game{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--color-surface)}.toolbar{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-xs) var(--space-sm);border-bottom:var(--rule-hair) solid var(--color-rule-strong);min-height:3.25rem}.toolbar-title{flex:1;min-width:0}.toolbar-title h1{margin:0;font-size:var(--text-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-meta{display:flex;align-items:center;gap:var(--space-xs);margin:0;color:var(--color-ink-faint);font-size:var(--text-xs)}.toolbar-right{display:flex;align-items:center;gap:var(--space-xs)}.attempts{color:var(--color-ink-soft);font-size:var(--text-sm);font-variant-numeric:tabular-nums;white-space:nowrap}.workspace{display:grid;grid-template-columns:var(--panel-width) minmax(0,1fr);min-height:0}.panel{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);border-right:var(--rule-hair) solid var(--color-rule-strong);overflow-y:auto;background:var(--color-surface)}.goal{margin:0;color:var(--color-ink);font-size:var(--text-md)}.entry{display:flex;align-items:stretch;border:var(--rule-hair) solid var(--color-rule-strong);border-radius:var(--radius-sm);background:var(--color-surface);transition:border-color var(--dur-fast) var(--ease-out)}.entry:focus-within{border-color:var(--color-accent);outline:2px solid var(--color-focus);outline-offset:1px}.entry-prefix{display:flex;align-items:center;padding:0 .4rem 0 .6rem;font-family:var(--font-math);font-style:italic;font-size:var(--text-md);color:var(--color-ink-soft);border-right:var(--rule-hair) solid var(--color-rule);background:var(--color-surface-sunken);border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.entry-input{flex:1;min-width:0;font-family:var(--font-math);font-size:var(--text-lg);padding:.5rem .6rem;border:0;background:transparent;color:var(--color-ink);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.entry-input:focus{outline:none}.entry-input::placeholder{color:var(--color-ink-faint);font-style:italic}.entry:has(.entry-input.invalid){border-color:var(--color-danger)}.reading{display:flex;align-items:baseline;gap:var(--space-xs);margin:var(--space-2xs) 0 0;font-size:var(--text-sm);min-height:1.4em}.reading-label{color:var(--color-ink-faint);font-size:var(--text-xs)}.formula-text{font-family:var(--font-math);font-size:var(--text-md);color:var(--color-accent-strong);overflow-wrap:anywhere}.formula-text.unset{color:var(--color-ink-faint);font-style:italic;font-size:var(--text-sm)}.keypad{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-xs)}.key{min-width:2.1rem;padding:.3rem .35rem;font-family:var(--font-math);font-size:var(--text-md);line-height:1.2;color:var(--color-ink);border-color:var(--color-rule);text-align:center}.key-wide{min-width:2.9rem;font-size:var(--text-sm)}.rule{margin:var(--space-xs) 0 0;padding:var(--space-2xs) var(--space-xs);border-left:2px solid var(--color-accent);background:var(--color-accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--color-accent-strong);font-size:var(--text-sm)}.feedback:empty{display:none}.feedback{display:flex;flex-direction:column;gap:var(--space-2xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);border-left:3px solid var(--color-rule-strong);background:var(--color-surface-sunken);font-size:var(--text-sm)}.feedback strong{font-weight:600}.feedback span{color:var(--color-ink-soft)}.feedback.win{border-left-color:var(--color-success);background:var(--color-success-soft)}.feedback.miss{border-left-color:var(--color-star);background:var(--color-surface-sunken)}.feedback.error{border-left-color:var(--color-danger);background:var(--color-danger-soft)}.hint-list{margin:0;padding-left:1.3rem;color:var(--color-ink-soft);font-size:var(--text-sm)}.hint-list:empty{display:none}.hint-list li+li{margin-top:var(--space-2xs)}.actions{margin-top:auto;padding-top:var(--space-sm);border-top:var(--rule-hair) solid var(--color-rule);display:flex;flex-direction:column;gap:var(--space-xs)}.toggle{display:flex;align-items:center;gap:var(--space-xs);color:var(--color-ink-soft);font-size:var(--text-sm);cursor:pointer}.toggle input{accent-color:var(--color-accent)}.action-buttons{display:flex;gap:var(--space-xs)}.action-buttons .primary-btn{flex:1}.action-buttons .ghost-btn{border-color:var(--color-rule-strong)}.stage{position:relative;min-height:0;background:var(--color-paper)}.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.banner{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-md);background:#f3f2efc7}.banner.hidden{display:none}.banner-card,.modal{background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule-strong);border-radius:var(--radius-lg);padding:var(--space-lg);max-width:26rem;text-align:center;box-shadow:0 12px 32px #1e1f2324}.banner-card h2{margin:0;font-family:var(--font-math);font-size:var(--text-xl);font-weight:400}.banner-formula{margin:var(--space-2xs) 0 0;font-family:var(--font-math);color:var(--color-accent-strong);overflow-wrap:anywhere}.banner-stars{margin:var(--space-xs) 0 var(--space-sm);font-size:var(--text-xl);color:var(--color-star);letter-spacing:.12em}.criteria{list-style:none;margin:0 0 var(--space-md);padding:0;text-align:left;font-size:var(--text-sm);color:var(--color-ink-faint)}.criteria li{display:flex;gap:var(--space-xs);padding:.1rem 0}.criteria li.earned{color:var(--color-ink)}.criteria li.earned span:first-child{color:var(--color-star)}.banner-actions{display:flex;gap:var(--space-xs);justify-content:center;flex-wrap:wrap}.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:var(--space-md);background:#1e1f236b;z-index:10;transition:background-color .26s var(--ease-out)}.modal{text-align:left}.modal-kicker{display:flex;align-items:center;gap:var(--space-xs);margin:0;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-faint)}.modal h2{margin:var(--space-xs) 0 var(--space-sm);font-family:var(--font-math);font-size:var(--text-xl);font-weight:400}.modal p{margin:0 0 var(--space-sm);color:var(--color-ink-soft)}.modal-goal{color:var(--color-ink)!important;font-weight:500}.modal .primary-btn{width:100%;margin-top:var(--space-xs)}.lesson{max-width:30rem}.lesson-plot{height:11rem;margin:var(--space-sm) 0 var(--space-xs);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-sm);overflow:hidden}.lesson-plot canvas{display:block;width:100%;height:100%}.lesson-readout{margin:0;font-family:var(--font-math);font-size:var(--text-sm);color:var(--color-accent-strong);white-space:pre-wrap;min-height:1.4em}.lesson-text{margin:var(--space-xs) 0 var(--space-md);color:var(--color-ink)!important}.lesson-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.lesson-dots{display:flex;gap:.35rem}.lesson-dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--color-rule-strong)}.lesson-dot.on{background:var(--color-accent)}.lesson .primary-btn{width:auto;min-width:7rem;margin-top:0}@media (max-width: 900px){.workspace{grid-template-columns:1fr;grid-template-rows:minmax(14rem,42dvh) minmax(0,1fr)}.stage{order:-1;border-bottom:var(--rule-hair) solid var(--color-rule-strong)}.panel{border-right:0}.actions{margin-top:var(--space-xs)}}@media (max-width: 560px){.select{padding:var(--space-lg) var(--space-sm) var(--space-xl)}.toolbar{gap:var(--space-xs);padding:var(--space-2xs) var(--space-2xs)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:1ms!important;animation-duration:1ms!important}}.hidden{display:none}