:root{--bg:#080d20;--surface:#111a33;--panel:#182342;--fg:#f6f6fa;--dim:#c2d1e5;--cyan:#50e7e5;--violet:#b99eff;--warm:#f3cf96;--paper:var(--surface);--radius:12px;--gap:1rem;--font:system-ui, -apple-system, "Segoe UI", sans-serif;--font-display:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{overflow-x:clip}body{background:var(--bg);color:var(--fg);font-family:var(--font);margin:0;line-height:1.5}.app{flex-direction:column;min-height:100vh;display:flex;position:relative}main{flex:1;width:100%}.top,.foot{width:100%}.starfield{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.top,main{z-index:1;max-width:68rem;padding:0 var(--gap);margin:0 auto;position:relative}.top{flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;padding-top:.75rem;display:flex}.brand{font-family:var(--font-display);color:var(--warm);margin:0;font-size:1.15rem}.steps{color:var(--dim);flex-wrap:wrap;flex:1;gap:.25rem 1rem;margin:0;padding:0;font-size:.875rem;list-style:none;display:flex}.steps [aria-current]{color:var(--fg);text-underline-offset:.3em;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}main{padding-bottom:2rem}.foot{z-index:1;max-width:68rem;padding:0 var(--gap) 2rem;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 auto;display:flex;position:relative}.foot .fine{margin:0}h1{font-family:var(--font-display);overflow-wrap:break-word;text-wrap:balance;min-width:0;margin:1rem 0;font-size:1.9rem;font-weight:500}h1:focus{outline:none}h2{color:var(--dim);margin:0 0 .5rem;font-size:.9rem;font-weight:600}p{margin:0 0 .75rem}.fine{color:var(--dim);font-size:.875rem}.prompt{font-family:var(--font-display);text-wrap:balance;margin-bottom:.75rem;font-size:1.5rem;font-weight:500;line-height:1.25;display:block}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}button,input,textarea{font:inherit;color:inherit}button:not(.slot){cursor:pointer;background:var(--panel);border:1.5px solid var(--dim);border-radius:999px;min-height:2.75rem;padding:.5rem 1rem}button:not(.slot):hover:not(:disabled){border-color:var(--fg)}button.primary{background:var(--cyan);border-color:var(--cyan);color:var(--bg);font-weight:700}button.quiet{background:var(--bg);padding:.25rem .9rem;font-size:.875rem}button.quiet[aria-pressed=true]{border-style:double;border-width:4px}button:not(.slot):disabled{color:var(--dim);border-style:dashed;border-color:color-mix(in srgb, var(--dim) 55%, transparent);cursor:default;background:0 0}button:not(.slot):active:not(:disabled){transform:translateY(1px)}.slot:active svg{transform:scale(.97)}:focus-visible{outline:3px solid var(--warm);outline-offset:3px}input[type=text],textarea{background:var(--bg);border:1.5px solid var(--dim);border-radius:var(--radius);width:100%;margin-bottom:.75rem;padding:.75rem 1rem}.row{flex-wrap:wrap;gap:.5rem;margin:.5rem 0;display:flex}details summary{cursor:pointer;min-height:2.75rem;color:var(--dim);align-items:center;display:flex}.card{background:color-mix(in srgb, var(--surface) 95%, transparent);border:1px solid var(--panel);border-radius:var(--radius);max-width:38rem;padding:1.5rem;animation:.28s ease-out both rise}.card.solo{margin:12vh auto 0;padding:2rem}.card.solo .prompt{font-size:2rem}.card.compass,.card.finish{grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:2rem;max-width:none;display:grid}.axis{border:0;min-width:0;margin:1.1rem 0 0;padding:0}.axis legend{margin-bottom:.35rem;padding:0;font-weight:600}.axis .fine{margin:.35rem 0 0}.segments{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;display:grid}.seg{position:relative}.seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.seg span{border:1.5px solid var(--dim);text-align:center;border-radius:999px;justify-content:center;align-items:center;min-height:2.75rem;padding:0 .5rem;display:flex}.seg input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:700}.seg input:checked+span:before{content:"✓ "}.seg input:focus-visible+span{outline:3px solid var(--warm);outline-offset:3px}.glyph{color:var(--fg);margin:0 0 .75rem}.glyph svg{width:100%;max-width:15rem;margin:0 auto;display:block}.glyph-deco{color:var(--cyan)}.glyph-spin{transform-origin:120px 120px}.glyph-spin.m1{animation:80s linear infinite spin}.glyph-spin.m0{animation:240s linear infinite spin}.glyph ul{margin:.5rem 0;padding-left:1.2rem}.key-strip{gap:.4rem;margin:0;padding:0;list-style:none;display:none}.key-strip li{background:var(--surface);border-radius:999px;flex:1 1 0;max-width:6rem;padding:0 .35rem}.key-strip svg{width:100%;display:block}.hidden-glyph{border:2px dashed var(--dim);border-radius:var(--radius);padding:1rem}.mk{--paper:transparent;white-space:nowrap}.mk svg{vertical-align:-.28em;width:1.25em;height:1.25em;margin-right:.1em;display:inline-block}.how{margin:0 0 .75rem;padding-left:1.3rem}.how li{margin-bottom:.35rem}@media (hover:none) and (pointer:coarse){.keys-help{display:none}}.intention-line{overflow-wrap:anywhere}.intention-line .fine{display:block}.puzzle{grid-template-columns:minmax(11rem,14rem) minmax(0,30rem) minmax(13rem,1fr);grid-template-areas:"coach coach coach""key board side";align-items:start;gap:1.25rem;display:grid}.coach{background:var(--surface);border:1px solid color-mix(in srgb, var(--warm) 60%, transparent);border-radius:var(--radius);grid-area:coach;padding:1rem 1.25rem}.coach p{max-width:62rem}.key-panel{grid-area:key}.board-panel{grid-area:board}.side{grid-area:side;gap:1rem;min-width:0;display:grid}.board-wrap{position:relative}.board{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;display:grid}.joins{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.join{stroke:var(--cyan);stroke-width:7px;stroke-linecap:round}.join.fresh{animation:1.4s ease-in-out 3 pulse}.wall{stroke:var(--warm);stroke-width:5px;stroke-linecap:round}.tray{grid-template-columns:repeat(auto-fill,minmax(4.75rem,1fr));gap:.6rem;min-height:4.75rem;display:grid}.slot{aspect-ratio:1;color:var(--fg);cursor:pointer;background:0 0;border:0;width:100%;padding:0;display:block;position:relative}.slot svg{width:100%;height:100%;display:block}.board .slot:not(.fixed):not(.empty) svg{animation:.18s ease-out settle}.slot.fixed{--paper:var(--panel);cursor:default}.slot.empty{border:1.5px dashed color-mix(in srgb, var(--dim) 60%, transparent)}.slot[aria-pressed=true]{color:var(--cyan)}.slot.target{outline:4px dashed var(--warm);outline-offset:-5px;z-index:1}.slot.fits{border:3px dotted var(--cyan)}.slot.fits span{color:var(--cyan);font-size:.875rem}.slot.target span{color:var(--warm);font-weight:700}.slot:focus-visible{z-index:2}.count{color:var(--dim);margin:0;font-size:.875rem}.notice{min-height:1.5em;margin:.25rem 0 0;font-weight:600}.controls{flex-wrap:wrap;gap:.5rem;display:flex}.hint:not(:empty){background:var(--surface);border-radius:var(--radius);margin-top:.5rem;padding:.75rem 1rem}.hint p:last-child{margin:0}@media (width<=56rem){.puzzle{grid-template-columns:minmax(0,1fr);grid-template-areas:"key""coach""board""side";gap:.75rem}.key-panel{z-index:3;background:var(--bg);color:var(--fg);padding:.4rem 0;position:sticky;top:0}.key-panel .glyph,.key-panel .intention-line{display:none}.key-strip{display:flex}.coach{min-height:8.5rem;padding:.75rem 1rem}.coach p{margin-bottom:.5rem}.board-panel{width:100%;max-width:min(30rem,38vh);margin:0 auto}.tray{grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem}h1.compact{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.top{gap:.25rem .75rem}.steps li:not([aria-current]){display:none}.card.solo{margin-top:6vh;padding:1.5rem}.seg span{padding:0 .2rem;font-size:.875rem}.card.solo .prompt{font-size:1.6rem}}.constellation{width:100%;max-width:26rem;margin:0 auto;display:block}.trace{stroke:var(--cyan);stroke-width:3px;stroke-linecap:round;animation:.6s ease-out both appear}.trace.static{animation:none}.node{fill:var(--fg)}.legend{color:var(--dim);margin:1rem 0 0;padding:0;font-size:.9rem;list-style:none}.legend svg{vertical-align:middle;width:2.5rem;height:.5rem;margin-right:.5rem}.reflection{border-top:1px solid var(--panel);margin-top:1rem;padding-top:1rem}.question{font-family:var(--font-display);font-size:1.3rem;line-height:1.3}.reflection label{margin:.75rem 0 .35rem;font-weight:600;display:block}.star.twinkle{animation:5s ease-in-out infinite twinkle}@keyframes spin{to{transform:rotate(360deg)}}@keyframes twinkle{0%,to{opacity:.3}50%{opacity:1}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}@keyframes appear{0%{opacity:0}}@keyframes pulse{50%{opacity:.3}}@keyframes settle{0%{opacity:.5;transform:scale(1.08)}}.calm *,.calm :before{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (forced-colors:active){.seg input:checked+span{border-width:4px}.slot.target{outline-color:highlight}}