:root { --font-display: var(--font-voice); }
html, body { margin: 0; }
body { background: var(--desk); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }

.desk { position: relative; background: var(--desk); isolation: isolate; overflow: hidden; box-sizing: border-box; }
.desk > * { position: relative; z-index: 1; }

.glass { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--lens); border-radius: var(--r-sheet); }
.glass.strong { background: var(--glass-strong); }
.sheet { position: relative; }
.sheet .rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  --cc: rgba(61,90,254,.45); --cy: 50%; --cr: 24%;
  box-shadow: inset -3px 0 0 var(--cc), inset -26px 0 34px -24px var(--cc);
  -webkit-mask: linear-gradient(to bottom, transparent calc(var(--cy) - var(--cr)), #000 var(--cy), transparent calc(var(--cy) + var(--cr)));
  mask: linear-gradient(to bottom, transparent calc(var(--cy) - var(--cr)), #000 var(--cy), transparent calc(var(--cy) + var(--cr))); }
.sheet .rim.left { box-shadow: inset 3px 0 0 var(--cc), inset 26px 0 34px -24px var(--cc); }
.sheet .rim.top { box-shadow: inset 0 3px 0 var(--cc), inset 0 26px 34px -24px var(--cc);
  -webkit-mask: linear-gradient(to right, transparent calc(var(--cy) - var(--cr)), #000 var(--cy), transparent calc(var(--cy) + var(--cr)));
  mask: linear-gradient(to right, transparent calc(var(--cy) - var(--cr)), #000 var(--cy), transparent calc(var(--cy) + var(--cr))); }

.piece, .key { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: 0; cursor: pointer; user-select: none; font: 600 17px/1 var(--font-ui);
  border-radius: var(--r-piece); padding: 0 1.3em; min-height: var(--check-height); transition: transform var(--t-spring) var(--ease-spring), box-shadow var(--t-spring) var(--ease-spring); }
.piece { background: var(--piece); color: var(--on-piece); box-shadow: var(--piece-shadow); }
.piece:active, .piece[data-pressed] { transform: translateY(5px); box-shadow: var(--piece-pressed); transition-duration: var(--t-press); }
.piece.small { min-height: 36px; font-size: 14px; padding: 0 1em; box-shadow: var(--piece-small); }
.piece.small:active { transform: translateY(3px); }
.key { background: var(--key); color: var(--on-key); box-shadow: var(--key-shadow); min-height: var(--key-height); font-size: 20px; padding: 0 .9em; }
.key:active, .key[data-pressed] { transform: translateY(3px); box-shadow: var(--key-pressed); transition-duration: var(--t-press); }
.key.op { color: var(--learner); }
.key.small { min-height: 32px; font-size: 14px; box-shadow: var(--key-small); }
.piece:focus-visible, .key:focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }
.piece[disabled], .key[disabled] { color: var(--ink-3); cursor: default; }
.piece.go { background: var(--go); color: var(--on-go); box-shadow: var(--go-shadow); }

.rail { display: flex; flex-direction: column; gap: 4px; padding: 8px; width: var(--rail); box-sizing: border-box; }
.rail a, .rail button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-item); color: var(--ink-2); text-decoration: none; border: 0; background: none; font: 600 14px/1 var(--font-ui); cursor: pointer; }
.rail svg { width: var(--icon); height: var(--icon); flex: none; }
.rail a:hover, .rail button:hover { background: var(--act-soft); color: var(--ink); }
.rail .on { color: var(--on-piece); background: var(--piece); box-shadow: var(--piece-small); }
.rail .on:hover { background: var(--piece); color: var(--on-piece); }
.rail hr { border: 0; height: 1px; background: var(--rule); margin: 6px 10px; }

.navdock { display: flex; align-items: stretch; padding: 6px; border-radius: var(--r-dock); background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--dock-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--dock-blur)) saturate(var(--glass-saturate)); box-shadow: var(--lens-dock); height: var(--nav-dock); box-sizing: border-box; }
.navdock a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-dock); color: var(--ink-2); text-decoration: none; font: 600 11px/1 var(--font-ui); }
.navdock svg { width: var(--icon); height: var(--icon); }
.navdock .on { color: var(--on-piece); background: var(--piece); box-shadow: var(--piece-small); }

.keydock { display: grid; grid-template-columns: repeat(3, 1fr) 1fr; gap: 8px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: var(--r-keydock) var(--r-keydock) 0 0;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--dock-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--dock-blur)) saturate(var(--glass-saturate)); box-shadow: var(--lens-flat); }
.keydock .key { padding: 0; width: 100%; }
.keydock .key.fn { font-size: 16px; color: var(--ink-2); }
.keydock .key.fn svg { width: 22px; height: 22px; }
.keydock .piece { grid-column: 1 / -1; }

.math { font-family: var(--font-math); font-variant-numeric: tabular-nums; color: var(--ink); }
.given { font-size: 44px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.line { display: flex; align-items: baseline; gap: 18px; font-size: 30px; font-weight: 500; line-height: 1.2; padding: 10px 0; border-top: 1px solid var(--rule); }
.line .n { font: 500 14px/1 var(--font-ui); color: var(--ink-2); width: 1.4em; flex: none; }
.line.active { color: var(--learner); }
.line.look .u { text-decoration: underline; text-decoration-color: var(--look-mark); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.line.done { color: var(--go); }
.caret { display: inline-block; width: 2px; height: .95em; background: var(--learner); vertical-align: -0.12em; margin-left: 3px; animation: blink var(--t-blink) steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cmp1 { background: var(--e1-soft); color: var(--e1-ink); border-radius: 6px; padding: 0 .12em; }
.cmp2 { background: var(--e2-soft); color: var(--e2-ink); border-radius: 6px; padding: 0 .12em; }
.cancel { position: relative; }
.cancel::after { content: ""; position: absolute; left: -2%; right: -2%; top: 50%; height: 3px; background: var(--e1); transform: rotate(-18deg); border-radius: 2px; }

.hop-words { font: 700 22px/1.25 var(--font-voice); letter-spacing: -.005em; color: var(--words-1);
  background-image: linear-gradient(100deg, var(--words-1) 0%, var(--words-2) 40%, var(--words-3) 60%, var(--words-4) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.stones { display: inline-grid; grid-template-columns: repeat(3, 18px); grid-auto-rows: 12px; gap: 2px; }
.stones i { display: block; border-radius: var(--r-stone); background: var(--rule-strong); }
.stones i.on { background: var(--piece); }
.stones i.look { background: var(--look-mark); }
.stones i.go { background: var(--go-mark); }

.icon { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-transparency: reduce) {
  .glass, .navdock, .keydock { background: var(--sheet-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .navdock, .keydock { background: var(--sheet-solid); }
}
@media (prefers-reduced-motion: reduce) {
  .piece, .key { transition-duration: var(--t-instant); }
  .caret { animation: none; }
}
@media (forced-colors: active) {
  .glass, .navdock, .keydock { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  .piece, .key { border: 1px solid ButtonText; }
  .hop-words { background-image: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
}