:root{
  color-scheme:dark;
  --ink:#f7f0df;--muted:#aeb9b4;--base:#0e141d;--panel:#18222d;--panel-2:#202d39;--line:rgba(215,225,215,.17);
  --warm:#f0c86f;--warm-2:#d9a847;--sage:#9fbeaa;--danger:#ef9b86;--focus:#ffe09a;--shadow:0 24px 70px rgba(0,0,0,.38);
  --safe-pad:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
  font-family:"Segoe UI",ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{min-height:100dvh;color:var(--ink);background:radial-gradient(circle at 18% 0,rgba(240,200,111,.11),transparent 29%),radial-gradient(circle at 88% 100%,rgba(159,190,170,.09),transparent 30%),linear-gradient(145deg,#111925,var(--base));}
button,select,input{font:inherit}button{color:inherit;touch-action:manipulation}button,select{border:1px solid var(--line);background:var(--panel-2);border-radius:12px}button{cursor:pointer}button:hover{border-color:rgba(240,200,111,.44)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}[hidden]{display:none!important}
.app{width:100%;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;padding:var(--safe-pad);overflow:hidden;position:relative;isolation:isolate}.app::before{content:"";position:absolute;inset:10% 18% auto;z-index:-1;height:1px;background:linear-gradient(90deg,transparent,rgba(240,200,111,.11),transparent);box-shadow:0 42px rgba(240,200,111,.04),0 84px rgba(159,190,170,.035)}
.topbar{width:min(100%,940px);min-width:0;max-width:100%;margin:0 auto;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:8px}.brand{display:flex;align-items:center;gap:8px;min-width:0}.brand>div{display:grid;gap:0}.brand-kicker{font-size:8px;line-height:1.1;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-weight:800;white-space:nowrap}.brand strong{font-size:clamp(19px,4vw,27px);line-height:1;letter-spacing:-.045em;white-space:nowrap}.brand em{font-style:normal;color:var(--warm)}.brand-mark{width:38px;height:38px;border:1px solid rgba(240,200,111,.28);border-radius:13px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:7px;background:linear-gradient(145deg,rgba(240,200,111,.08),rgba(159,190,170,.05))}.brand-mark i{border-radius:4px 9px 4px 9px;border:1px solid rgba(240,200,111,.4);background:rgba(240,200,111,.08)}
.header-actions{display:flex;gap:5px}.icon-button{min-width:44px;height:44px;padding:0 10px;display:grid;place-items:center;font-weight:800}.help-button{grid-auto-flow:column;gap:5px}.help-button strong{font-size:11px}
.play-shell{width:min(100%,760px);min-width:0;max-width:100%;height:100%;min-height:0;margin:0 auto;padding:7px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(155deg,rgba(27,38,49,.96),rgba(18,26,35,.96));box-shadow:var(--shadow);display:grid;grid-template-rows:auto auto minmax(128px,1fr) auto auto auto minmax(0,auto);gap:6px;overflow:hidden}
.mode-strip{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mode-strip button{min-height:44px;padding:5px 10px;display:flex;align-items:center;justify-content:center;gap:7px}.mode-strip button strong{font-size:13px}.mode-strip button small{font-size:10px;color:var(--muted)}.mode-strip button[aria-pressed="true"]{border-color:var(--warm);box-shadow:inset 0 0 0 1px rgba(240,200,111,.18);background:#2a3034}
.context-bar{min-height:34px;display:flex;align-items:center;gap:8px;padding:0 3px}.context-copy{display:flex;align-items:baseline;gap:6px;min-width:0}.context-copy span,.practice-band span,.streak-chip span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:800}.context-copy strong{font-size:12px;white-space:nowrap}.daily-progress{display:flex;gap:4px;margin-left:auto}.daily-progress i{width:10px;height:10px;border:1px solid #718078;border-radius:50%;background:transparent}.daily-progress i.is-complete{background:var(--sage);border-color:var(--sage)}.daily-progress i.is-current{border-color:var(--warm);box-shadow:0 0 0 2px rgba(240,200,111,.16)}.streak-chip{display:flex;align-items:baseline;gap:4px;padding:3px 7px;border:1px solid var(--line);border-radius:999px}.streak-chip strong{font-size:12px;color:var(--warm)}.practice-band{margin-left:auto;display:flex;align-items:center;gap:5px}.practice-band select{min-height:34px;padding:2px 26px 2px 8px;color:var(--ink)}
.fold-stage{position:relative;min-height:128px;display:grid;place-items:center;padding:46px 0 2px}.target-halo{position:absolute;top:0;left:50%;transform:translateX(-50%);width:58px;height:58px;border:1px solid rgba(240,200,111,.56);border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,rgba(240,200,111,.16),rgba(240,200,111,.035) 68%,transparent 70%);box-shadow:0 0 28px rgba(240,200,111,.08)}.target-halo span{font-size:8px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.target-halo strong{font-size:25px;line-height:.9;color:var(--warm)}
.value-board{width:100%;min-height:76px;display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vw,10px)}.value-tile{position:relative;flex:0 1 112px;min-width:58px;max-width:112px;height:clamp(68px,10dvh,88px);padding:7px 5px 17px;border-color:rgba(215,225,215,.25);border-radius:12px 25px 12px 25px;background:linear-gradient(145deg,#263746,#1c2935);display:grid;place-items:center;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.value-tile[aria-pressed="true"]{transform:translateY(-4px);border-color:var(--warm);box-shadow:0 8px 22px rgba(0,0,0,.25),inset 0 0 0 1px rgba(240,200,111,.18)}.value-tile.is-hinted{border-style:dashed;border-color:var(--sage)}.value-tile.is-hinted::after{content:"Hint";position:absolute;top:3px;right:6px;font-size:8px;color:var(--sage);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.value-integer{font-size:clamp(25px,6vw,38px);font-weight:850;letter-spacing:-.04em}.fraction-value{display:flex;align-items:center;gap:3px;font-size:clamp(18px,4.5vw,28px);font-weight:850}.fraction-stack{display:grid;grid-template-rows:1fr 1px 1fr;min-width:1.6em;line-height:.95}.fraction-stack b,.fraction-stack span{display:block;text-align:center}.fraction-stack i{display:block;height:1px;background:currentColor;margin:2px 0}.fraction-sign{align-self:center}.provenance-mark{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);display:flex;gap:3px}.provenance-mark i{width:6px;height:3px;border-radius:4px;background:#53616a}.provenance-mark i.is-used{background:var(--warm-2)}
.operator-dock{display:grid;grid-template-columns:repeat(4,minmax(44px,64px));justify-content:center;gap:7px}.operator-dock button{min-width:44px;min-height:44px;padding:0;font-size:24px;font-weight:800}.operator-dock button[aria-pressed="true"]{border-color:var(--warm);background:#3a3429;box-shadow:inset 0 0 0 1px rgba(240,200,111,.18)}
.equation-zone{min-height:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:7px;align-items:stretch}.selection-preview{margin:0;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);font-size:12px;line-height:1.35;display:flex;align-items:center}.equation-history{margin:0;padding:5px 7px 5px 27px;border:1px solid var(--line);border-radius:10px;min-height:42px;max-height:65px;overflow:auto;color:var(--muted);font-size:11px;line-height:1.45}.equation-history:empty::before{content:"Accepted equations appear here.";display:list-item;color:#7f8d87}.equation-history li::marker{color:var(--warm)}
.utility-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.utility-row button{min-height:44px;padding:5px 8px;display:flex;align-items:center;justify-content:center;gap:5px}.utility-row strong{font-size:12px}.utility-row button:disabled{opacity:.43;cursor:not-allowed}
.hint-panel{padding:6px;border:1px solid rgba(159,190,170,.28);border-radius:12px;background:rgba(159,190,170,.055)}.hint-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.hint-choices button{min-height:44px;padding:4px;display:grid;place-items:center}.hint-choices strong{font-size:11px}.hint-choices small{font-size:8px;color:var(--muted)}#hintOutput{margin:5px 2px 0;font-size:10px;color:var(--muted);line-height:1.3}.hint-solution-list{margin:4px 0 0;padding-left:18px}
.feedback-zone{min-height:42px;display:grid;gap:3px;align-content:end}.first-use-cue{margin:0;text-align:center;font-size:10px;color:var(--warm);font-weight:800;letter-spacing:.02em}.status-message{margin:0;padding:6px 8px;border-top:1px solid var(--line);color:#d8e0dc;font-size:11px;line-height:1.35;min-height:27px}.status-message.error{color:#ffc0af}.status-message.success{color:#bfe0c7}.result-region{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border:1px solid rgba(240,200,111,.28);border-radius:12px;background:rgba(240,200,111,.045)}.result-region>div:first-child{min-width:0}.result-region span{font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.result-region strong{display:block;font-size:20px;line-height:1}.result-region p{margin:2px 0 0;color:var(--muted);font-size:10px}.result-actions{display:flex;gap:5px}.result-actions button{min-height:44px;padding:5px 9px;font-size:11px}.result-actions .primary{border-color:var(--warm);background:#3a3429}
.game-tip{position:fixed;z-index:25;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translate(-50%,10px);max-width:min(88vw,430px);padding:10px 13px;border:1px solid rgba(240,200,111,.36);border-radius:999px;background:#252e34;box-shadow:0 12px 36px rgba(0,0,0,.4);font-size:11px;color:var(--ink);opacity:0;transition:opacity .18s ease,transform .18s ease}.game-tip.is-visible{opacity:1;transform:translate(-50%,0)}.game-tip.is-fading{opacity:0;transform:translate(-50%,5px)}
.app-dialog{width:min(92vw,560px);max-height:min(88dvh,720px);padding:0;border:1px solid rgba(240,200,111,.25);border-radius:18px;background:#17212b;color:var(--ink);box-shadow:0 28px 90px rgba(0,0,0,.55)}.app-dialog::backdrop{background:rgba(5,9,13,.7);backdrop-filter:blur(3px)}.dialog-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:min(88dvh,720px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line)}.dialog-header span{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:var(--warm)}.dialog-header h2{margin:2px 0 0;font-size:20px}.dialog-header button{width:44px;height:44px;padding:0;font-size:20px}.dialog-content{padding:14px;overflow:auto;line-height:1.48;font-size:13px}.dialog-content p:first-child{margin-top:0}.dialog-actions{display:flex;justify-content:flex-end;gap:6px;padding:10px 14px;border-top:1px solid var(--line)}.dialog-actions button{min-height:44px;padding:7px 12px}.dialog-actions .primary{border-color:var(--warm);background:#3a3429}.setting-list{display:grid;gap:10px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-row>span{display:grid;gap:2px}.setting-row strong{font-size:13px}.setting-row small{font-size:10px;color:var(--muted)}.setting-row select{min-height:44px;color:var(--ink);padding:5px 30px 5px 8px}.setting-row input[type="checkbox"]{width:22px;height:22px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.stat-card{padding:9px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}.stat-card strong{display:block;font-size:18px;color:var(--warm)}.stat-card span{font-size:10px;color:var(--muted)}.help-steps{display:grid;gap:7px}.help-step{padding:8px;border:1px solid var(--line);border-radius:10px}.help-step strong{display:block;margin-bottom:2px}.tutorial-presentation-mount{margin:12px 0;min-height:214px}.fourfold-presentation-preview{color:var(--ink)}.fourfold-presentation-demo{width:min(100%,560px);padding:14px;border:1px solid rgba(240,200,111,.32);border-radius:18px;background:linear-gradient(155deg,rgba(31,43,55,.98),rgba(16,24,33,.98));box-shadow:0 20px 58px rgba(0,0,0,.34);display:grid;gap:10px;overflow:hidden}.fourfold-presentation-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.fourfold-presentation-heading{display:grid;gap:2px}.fourfold-presentation-heading span{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:850}.fourfold-presentation-heading strong{font-size:20px;letter-spacing:-.035em}.fourfold-presentation-target{width:62px;height:62px;flex:0 0 62px;border:1px solid rgba(240,200,111,.5);border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,rgba(240,200,111,.18),rgba(240,200,111,.04) 67%,transparent 69%)}.fourfold-presentation-target span{font-size:8px;text-transform:uppercase;color:var(--muted);letter-spacing:.1em}.fourfold-presentation-target strong{font-size:26px;line-height:.9;color:var(--warm)}.fourfold-presentation-values{min-height:82px;display:flex;align-items:center;justify-content:center;gap:8px}.fourfold-presentation-tile{position:relative;flex:0 1 96px;min-width:58px;height:76px;padding:7px 5px 18px;border:1px solid rgba(215,225,215,.25);border-radius:12px 24px 12px 24px;background:linear-gradient(145deg,#2a3d4e,#1c2935);display:grid;place-items:center;font-size:30px;font-weight:900;box-shadow:0 7px 18px rgba(0,0,0,.22);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.fourfold-presentation-provenance{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);font-size:7px;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;color:var(--warm-2)}.fourfold-presentation-equation{min-height:46px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);display:grid;place-items:center;padding:8px;font-size:17px;font-weight:850;color:var(--warm);text-align:center}.fourfold-presentation-status{margin:0;text-align:center;font-size:11px;color:#d8e0dc;font-weight:750}.fourfold-presentation-rule{text-align:center;font-size:8px;color:var(--muted);letter-spacing:.035em}.fourfold-presentation-demo[data-phase="combine"] .fourfold-presentation-tile{transform:translateY(-2px)}.fourfold-presentation-demo[data-phase="solved"]{border-color:rgba(159,190,170,.55);box-shadow:0 20px 58px rgba(0,0,0,.34),0 0 36px rgba(159,190,170,.1)}.fourfold-presentation-demo[data-phase="solved"] .fourfold-presentation-tile{border-color:var(--sage);box-shadow:0 0 0 2px rgba(159,190,170,.14),0 9px 24px rgba(0,0,0,.26);transform:scale(1.06)}.fourfold-presentation-demo[data-phase="solved"] .fourfold-presentation-equation{color:#bfe0c7;border-color:rgba(159,190,170,.42)}.share-preview{white-space:pre-wrap;padding:9px;border:1px solid var(--line);border-radius:10px;background:#101820;color:#d8e0dc}
:root[data-motion-profile="instant"] .value-tile,:root[data-motion-profile="instant"] .game-tip{transition:none!important}:root[data-motion-profile="instant"] *,:root[data-motion-profile="instant"] *::before,:root[data-motion-profile="instant"] *::after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
@media(max-width:520px){.play-shell{border-radius:14px;padding:5px}.brand-kicker{display:none}.help-button strong{display:none}.mode-strip button small{display:none}.context-bar{gap:5px}.context-copy span{display:none}.streak-chip span{display:none}.practice-band span{display:none}.equation-zone{grid-template-columns:1fr}.equation-history{max-height:46px}.value-tile{flex-basis:76px;max-width:76px}.result-region{padding:6px}.result-region p{max-width:24ch}.dialog-actions{flex-wrap:wrap}}
@media(max-width:360px){.streak-chip{display:none}.app{gap:4px}.topbar{min-height:44px}.brand{gap:4px}.brand-mark{display:none}.header-actions{gap:3px}.icon-button{min-width:44px;width:44px;height:44px;padding:0}.play-shell{gap:4px}.mode-strip button{min-height:44px}.context-bar{min-height:28px}.fold-stage{min-height:112px;padding-top:42px}.target-halo{width:52px;height:52px}.target-halo strong{font-size:22px}.value-board{min-height:66px;gap:4px}.value-tile{min-width:54px;max-width:68px;height:66px;padding:5px 3px 15px}.operator-dock{gap:5px}.operator-dock button{min-height:44px}.utility-row button{min-height:44px}.selection-preview{padding:5px 7px}.equation-history{padding-top:3px;padding-bottom:3px}.status-message{padding:4px 6px}.first-use-cue{font-size:9px}}
@media(max-height:620px){.topbar{min-height:40px}.brand-mark{width:34px;height:34px}.play-shell{gap:4px}.mode-strip button{min-height:44px}.context-bar{min-height:27px}.fold-stage{min-height:105px;padding-top:39px}.target-halo{width:48px;height:48px}.value-tile{height:62px}.equation-history{max-height:42px}.operator-dock button,.utility-row button{min-height:44px}.feedback-zone{min-height:34px}}
@media(max-width:240px){html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}.app{height:auto;min-height:100dvh;padding:3px;overflow:visible}.topbar{flex-wrap:wrap;justify-content:center}.brand{width:100%;justify-content:center}.brand-mark{display:none}.header-actions{width:100%;justify-content:center;gap:1px}.play-shell{height:auto;min-height:100dvh;overflow:visible;padding:3px}.context-copy strong{font-size:10px}.fold-stage{min-height:188px;padding-top:42px}.value-board{flex-wrap:wrap;max-width:150px;margin:0 auto}.value-tile{flex-basis:64px;min-width:54px;max-width:64px}.operator-dock{grid-template-columns:repeat(2,minmax(44px,64px));gap:4px}.utility-row{grid-template-columns:1fr}.equation-zone{grid-template-columns:1fr}.feedback-zone{padding-bottom:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}