:root{--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--bg: #0d1014;--bg2: #111620;--surface: #171d27;--surface2: #1c2330;--line: #26303d;--text: #e9eef6;--dim: #95a3b4;--faint: #5d6b7c;--a1: #ff6b4a;--a2: #4fb6e0;--a3: #f2c14e;--a4: #6fbf8b;--a5: #a78be0;--ok: var(--a4);--bad: var(--a1);--key: var(--a3);--shadow: 0 10px 30px rgba(0, 0, 0, .45);--radius: 16px;--radius-sm: 12px;--font-scale: 1;--sp: 8px;--t-micro: .12s;--t-base: .24s;--t-emph: .4s;--t-story: .6s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-std: cubic-bezier(.4, 0, .2, 1);--grain: .05}html[data-theme=paper]{--bg: #f7f4ed;--bg2: #fffdf8;--surface: #fffefb;--surface2: #fbf7ef;--line: #e6ddcc;--text: #1c2028;--dim: #5f6470;--faint: #948b7d;--a1: #b83f26;--a2: #1a607c;--a3: #96700f;--a4: #3c6849;--a5: #5b4787;--shadow: 0 10px 26px rgba(60, 48, 30, .14);--grain: .035}html[data-profile=kids]{--font-scale: 1.15;--radius: 22px;--radius-sm: 18px}html[data-profile=senior]{--font-scale: 1.25;--radius: 18px;--grain: 0}html[data-profile=senior] .grain{display:none}html[data-reduced="1"] *{animation:none!important;transition:none!important}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:linear-gradient(180deg,var(--bg),var(--bg2) 40%,var(--bg));color:var(--text);font:400 calc(15px * var(--font-scale)) / 1.65 "PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100dvh;-webkit-tap-highlight-color:transparent}.grain{position:fixed;inset:0;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay}.wrap{max-width:980px;margin:0 auto;padding:28px calc(20px + var(--safe-r)) calc(72px + var(--safe-b)) calc(20px + var(--safe-l))}header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.brand{display:flex;align-items:baseline;gap:10px}.brand h1{font-size:calc(21px * var(--font-scale));margin:0;font-weight:600;letter-spacing:.02em}.brand span{color:var(--faint);font-size:calc(12px * var(--font-scale));letter-spacing:.16em;text-transform:uppercase}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font:inherit;font-size:calc(13px * var(--font-scale));cursor:pointer;transition:transform var(--t-micro) var(--ease-out),border-color var(--t-micro),background var(--t-micro)}.btn:hover{transform:translateY(-1px);border-color:var(--a2)}.btn:active{transform:translateY(0)}.btn.primary{background:var(--a2);border-color:var(--a2);color:#08131a;font-weight:600}html[data-theme=paper] .btn.primary{color:#fdfcf8}.btn.ghost{background:transparent}.btn:disabled{opacity:.45;cursor:default;transform:none}.btn:focus-visible,.tile:focus-visible,.cell:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--a2);outline-offset:2px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.card+.card{margin-top:14px}.card h2{margin:0 0 4px;font-size:calc(16px * var(--font-scale));font-weight:600}.card p.hint{margin:0 0 14px;color:var(--dim);font-size:calc(13px * var(--font-scale))}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.tile{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;cursor:pointer;color:var(--text);font:inherit;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base),box-shadow var(--t-base)}.tile:hover{transform:translateY(-3px);border-color:var(--a2);box-shadow:var(--shadow)}.tile .glyph{width:54px;height:54px;color:var(--a2);margin-bottom:8px}.tile b{display:block;font-size:calc(15px * var(--font-scale))}.tile em{font-style:normal;color:var(--dim);font-size:calc(12.5px * var(--font-scale))}.tile .tag{display:inline-block;margin-top:8px;font-size:calc(11px * var(--font-scale));color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:1px 8px}.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px;gap:18px;padding:10px 0}.prompt,.progress-label{color:var(--dim);font-size:calc(14px * var(--font-scale));text-align:center}.stimulus{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}.digits{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-end;justify-content:center}.numeral{color:var(--text);filter:drop-shadow(0 4px 14px rgba(0,0,0,.18))}.numeral .stroke{fill:none;stroke:currentColor;stroke-width:7.4;stroke-linecap:round;stroke-linejoin:round}.numeral .nodes circle{fill:currentColor;opacity:.85}.numeral.draw .stroke path{stroke-dasharray:420;animation:draw var(--t-story) var(--ease-out) both}.numeral.draw .nodes circle{animation:pop var(--t-emph) var(--ease-out) both;animation-delay:.38s}.numeral.blank{opacity:.16}@keyframes draw{0%{stroke-dashoffset:420}to{stroke-dashoffset:0}}@keyframes pop{0%{opacity:0;transform:scale(.35)}to{opacity:.85;transform:scale(1)}}.shape{display:block}.shape.small{width:52px;height:52px}.shape.mid{width:74px;height:74px}.shape.big{width:100px;height:100px}.shape.filled{color:var(--a2)}.tone1{color:var(--a1)}.tone2{color:var(--a2)}.tone3{color:var(--a3)}.tone4{color:var(--a4)}.tone5{color:var(--a5)}.slot{display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px;transition:border-color var(--t-base),transform var(--t-base) var(--ease-out)}.slot.pick{cursor:pointer}.slot.pick:hover{transform:translateY(-3px);border-color:var(--a2)}.slot.cursor{border-color:var(--a2);box-shadow:0 0 0 3px color-mix(in srgb,var(--a2) 30%,transparent)}.slot.ok{border-color:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}.slot.bad{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 22%,transparent)}.gridline{display:grid;gap:10px}.keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:420px;width:100%}.keypad button{font:inherit;font-size:calc(20px * var(--font-scale));font-variant-numeric:tabular-nums;padding:14px 0;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;transition:transform var(--t-micro) var(--ease-out)}.keypad button:hover{transform:translateY(-2px);border-color:var(--a2)}.answer{min-height:44px;font-size:calc(22px * var(--font-scale));letter-spacing:.24em;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}.answer i{font-style:normal;opacity:.35}.starmap{color:var(--a2);border-radius:var(--radius-sm);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--a2) 14%,transparent),transparent 68%)}.starmap .dot{fill:currentColor;opacity:.18}.starmap .node,.starmap .edge,.starmap .picked,.starmap .veil,.starmap .dot{pointer-events:none}.starmap .hit{fill:transparent;touch-action:manipulation}.starmap .node{fill:currentColor}.starmap .picked{fill:none;stroke:var(--a3);stroke-width:1.8}.starmap .veil{fill:var(--bg)}.starmap .node.lit{animation:light var(--t-emph) var(--ease-out) both}.starmap .edge{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}@keyframes light{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.feedback{text-align:center;font-size:calc(15px * var(--font-scale))}.feedback.ok{color:var(--ok)}.feedback.bad{color:var(--bad)}.feedback .detail{color:var(--dim);font-size:calc(12.5px * var(--font-scale));margin-top:6px}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.stat{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px}.stat b{display:block;font-size:calc(22px * var(--font-scale));font-variant-numeric:tabular-nums}.stat em{font-style:normal;color:var(--dim);font-size:calc(12px * var(--font-scale))}.bar{height:8px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--a4);transition:width var(--t-base) var(--ease-std)}.spark{width:100%;height:90px;color:var(--a3)}.spark polyline{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.spark circle{fill:currentColor}.codex{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}.codex .cell{margin:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base)}.codex .cell:hover{transform:translateY(-3px);border-color:currentColor}.codex figcaption{font-size:calc(11.5px * var(--font-scale));color:var(--dim)}.codex .locked{opacity:.3}.list{display:grid;gap:8px}.list .item{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:calc(13px * var(--font-scale))}.list .item span:last-child{color:var(--dim);font-variant-numeric:tabular-nums}.sr{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.mask{position:absolute;inset:0;background:var(--bg);display:grid;place-items:center;color:var(--faint);border-radius:var(--radius)}.relative{position:relative}footer.foot .swstate:after{content:" · 正在准备离线缓存…"}html[data-sw=active] footer.foot .swstate:after{content:" · 离线就绪"}html[data-sw=failed] footer.foot .swstate:after{content:" · 离线缓存不可用（不影响本次使用）"}html[data-sw=unsupported] footer.foot .swstate:after{content:""}footer.foot{color:var(--faint);font-size:calc(12px * var(--font-scale));border-top:1px solid var(--line);padding-top:16px;margin-top:26px}@media (max-width: 620px){.wrap{padding:20px 14px 60px}.keypad{grid-template-columns:repeat(5,1fr);gap:8px}header.top{flex-wrap:wrap}.brand h1{font-size:calc(19px * var(--font-scale))}.tiles{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}.choices,.dotpair{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:520px;width:100%}.choice{border-radius:var(--radius-sm);padding:14px 12px;font-size:calc(15px * var(--font-scale))}.timeline{color:var(--a2)}.timeline .tline{stroke:currentColor;stroke-width:.6;opacity:.45}.timeline .ttick{stroke:currentColor;stroke-width:.6;opacity:.5}.timeline .tlabel{fill:var(--dim);font-size:4.4px;text-anchor:middle}.timeline .tdose{fill:var(--a3)}.mandala{display:grid;gap:8px;width:100%;max-width:320px}.mcell{aspect-ratio:1;border-radius:10px;border:1px solid var(--line);background:var(--surface2);cursor:default;transition:background var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}.mcell.on{background:var(--a2);border-color:var(--a2)}.mcell.target{outline:2px solid var(--a4);outline-offset:2px}.mcell.cursor{box-shadow:0 0 0 3px color-mix(in srgb,var(--a2) 30%,transparent)}.dotpair{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:540px}.dotbox{width:100%;height:auto;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm)}.dotbg{fill:transparent}.dotmark{fill:var(--a3)}.pairgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px}.pick-shape{padding:8px}.empty{display:block;width:52px;height:52px}.pathcard{display:grid;gap:8px}.pathcard .steps{display:flex;flex-wrap:wrap;gap:6px}.pathcard .step{font-size:calc(12px * var(--font-scale));border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--dim)}.tip{border-left:3px solid var(--a3);padding:8px 12px;background:var(--surface2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text);font-size:calc(13.5px * var(--font-scale))}.due{color:var(--a3);font-variant-numeric:tabular-nums}@media (max-width: 560px){header.top{flex-direction:column;align-items:stretch}header.top .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}header.top .row>*{width:100%;min-width:0}}.digits .numeral{width:clamp(38px,12.5vw,74px);height:auto}@media (hover: none){.tile:hover,.btn:hover,.cell:hover,.slot.pick:hover,.keypad button:hover{transform:none}.tile:hover,.cell:hover{border-color:var(--line)}}@media (max-width: 560px){.wrap{padding-top:16px}.card{padding:14px}.card h2{font-size:calc(15px * var(--font-scale))}.stage{min-height:190px;gap:14px;padding:4px 0}.stimulus{gap:10px}.keypad{gap:6px;max-width:100%}.keypad button{padding:16px 0;font-size:calc(22px * var(--font-scale))}.choice{padding:16px 12px}.mandala,.pairgrid{max-width:100%}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.codex{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.tiles{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}}@media (max-width: 380px){.tiles{grid-template-columns:1fr}.digits .numeral{width:clamp(34px,13vw,56px)}}.matrix{display:grid;gap:10px;width:100%;max-width:300px}.mcell2{aspect-ratio:1;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm)}.mcell2.ok{border-color:var(--ok)}.mcell2.blank{border-style:dashed;border-color:var(--a2);color:var(--a2);font-size:calc(22px * var(--font-scale))}@media (max-width: 560px){.matrix{max-width:260px;gap:8px}}
