:root{--bg:oklch(96% .012 86);--paper:oklch(98% .009 86);--surface:oklch(92.5% .014 86);--surface-2:oklch(88.5% .017 86);--ink:oklch(18% .006 86);--muted:oklch(43% .011 86);--line:oklch(18% .006 86);--soft-line:oklch(80% .018 86);--accent:oklch(58% .2 31);--good:oklch(48% .12 151);--mid:oklch(67% .14 86);--bad:oklch(53% .17 28);--locked:oklch(82% .012 86);--radius:4px;--safe-bottom:env(safe-area-inset-bottom, 0px);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow-x:hidden;overflow-y:auto;background:var(--bg);color:var(--ink)}body{overscroll-behavior:none}button,select{font:inherit;color:inherit}button{cursor:pointer;border:0;-webkit-tap-highlight-color:transparent}h1,h2,p{margin:0}.shell{width:100%;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:10px;background:linear-gradient(90deg,color-mix(in oklch,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(180deg,color-mix(in oklch,var(--ink) 5%,transparent) 1px,transparent 1px),var(--bg);background-size:42px 42px}.topbar{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);z-index:12}.brand{min-width:0;display:flex;flex-direction:column;gap:4px;line-height:1}.brand-row{display:flex;align-items:baseline;gap:10px;min-width:0}.back-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);background:var(--paper);text-decoration:none;font-size:13px;font-weight:900;white-space:nowrap}.back-link:hover{background:var(--ink);color:var(--paper)}h1{font-size:30px;font-weight:950;letter-spacing:0;line-height:.92;white-space:nowrap}.subtitle{max-width:52rem;color:var(--muted);font-size:12px;font-weight:850;line-height:1.2;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-controls{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.btn,.select{min-height:38px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:8px 11px;color:var(--ink);font-size:13px;font-weight:900;line-height:1}.select{max-width:188px;appearance:none}.btn:hover,.choice-btn:hover{background:var(--ink);color:var(--paper)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.48;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--ink);color:var(--paper)}.btn.danger{background:color-mix(in oklch,var(--bad) 14%,var(--paper))}.stage{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,390px);gap:10px}.wheel-card{position:relative;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.hud{display:none;margin:8px 8px 0;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);z-index:3}.hud-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.hud-meta{margin-bottom:3px;color:var(--muted);font-size:12px;font-weight:800;line-height:1.2}.hud-actions{display:flex;gap:6px;align-items:center}.prompt-word{font-size:42px;font-weight:950;letter-spacing:0;line-height:.95;overflow-wrap:anywhere}.dot-progress{display:flex;gap:3px;align-items:center;margin-top:8px}.dot{flex:1;height:5px;border:1px solid color-mix(in oklch,var(--ink) 14%,transparent);border-radius:var(--radius);background:var(--surface-2)}.dot.done{background:var(--ink)}.dot.active{background:var(--accent)}.wheel-area{position:relative;min-height:0;display:grid;place-items:center;padding:8px}.wheel-wrap{width:min(100%,86vh);height:min(100%,86vw);max-width:820px;max-height:820px;aspect-ratio:1/1;position:relative;user-select:none;touch-action:manipulation}svg{display:block;width:100%;height:100%;overflow:visible}.cell{stroke:color-mix(in oklch,var(--ink) 58%,transparent);stroke-width:1.08;transition:filter .16s ease,opacity .16s ease,stroke-width .16s ease,fill .16s ease}.cell.pickable{cursor:pointer;stroke:color-mix(in oklch,var(--paper) 64%,var(--ink))}.cell.pickable:hover{filter:brightness(1.12) saturate(1.08);stroke:var(--paper);stroke-width:3.1}.cell.locked{fill:var(--locked);opacity:.62}.cell.future{opacity:.32}.cell.placed{filter:saturate(1.03) brightness(1.01)}.cell.focused,.cell.selected{stroke:var(--paper);stroke-width:4.2;filter:brightness(1.12)}.cell.candidate{opacity:.94;filter:brightness(1.04);stroke:color-mix(in oklch,var(--paper) 56%,var(--ink))}.cell.correct{stroke:var(--good);stroke-width:5;filter:brightness(1.16) saturate(1.08)}.cell.wrong{stroke:var(--bad);stroke-width:4.6}.slot-mark{pointer-events:none;fill:color-mix(in oklch,var(--ink) 56%,transparent);font-size:14px;font-weight:900;text-anchor:middle;dominant-baseline:middle}.label{pointer-events:none;fill:var(--ink);font-size:12px;font-weight:850;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:color-mix(in oklch,var(--paper) 76%,transparent);stroke-width:3.2px;stroke-linejoin:round;letter-spacing:0}.label.r1{font-size:15px;font-weight:920}.label.r2{font-size:11.2px;font-weight:860}.label.r3{font-size:9.4px;font-weight:800}.side{min-height:0;display:grid;grid-template-rows:auto auto auto;align-content:start;gap:10px;overflow:auto}.side-card{min-width:0;overflow:hidden;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}.side-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.small-title{margin-bottom:8px;color:var(--muted);font-size:11px;font-weight:900;line-height:1;text-transform:uppercase}.ring-title{margin-bottom:4px;color:var(--muted);font-size:13px;font-weight:800}.direction-summary{flex:0 0 auto;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink);color:var(--paper);font-size:12px;font-weight:930;line-height:1;white-space:nowrap}.side .prompt-word{margin-bottom:9px}.instruction{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.35}.meaning-preview{display:grid;gap:6px;margin:0 0 12px;padding:10px;border:1px solid var(--soft-line);border-radius:var(--radius);background:var(--surface)}.meaning-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:baseline;font-size:12px;line-height:1.25}.meaning-row span{color:var(--muted);font-weight:830}.meaning-row strong{min-width:0;color:var(--ink);font-weight:900;overflow-wrap:anywhere}.status-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mini-stat{min-width:0;padding:9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.mini-stat .n{font-size:20px;font-weight:930;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-stat .t{margin-top:4px;color:var(--muted);font-size:11px;font-weight:760}.ring-progress{display:grid;gap:8px}.ring-row{display:grid;grid-template-columns:70px 1fr 44px;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:760}.bar{height:8px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.bar>span{display:block;height:100%;width:0%;border-radius:inherit;background:var(--accent)}.recent-scroll{min-height:0;max-height:240px;overflow:auto}.learned-list{display:flex;flex-wrap:wrap;gap:6px;align-content:start}.pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line);border-radius:var(--radius);padding:6px 8px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:760}.pill.done{background:var(--ink);color:var(--paper)}.drawer{position:absolute;top:8px;right:8px;bottom:auto;z-index:5;width:min(410px,44vw);min-width:290px;max-height:min(74vh,560px);padding:14px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transform:translate(calc(100% + 24px));transition:transform .18s ease}.drawer.show{transform:translate(0)}.drawer.good{border-color:var(--good)}.drawer.mid{border-color:var(--mid)}.drawer.bad{border-color:var(--bad)}.drawer-title{margin-bottom:8px;font-size:20px;font-weight:930;line-height:1}.drawer .sub{margin-bottom:12px;color:var(--muted);font-size:13px;line-height:1.35}.muted-inline{color:var(--muted);font-weight:800}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.choice-btn{width:100%;min-height:40px;justify-content:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:10px 11px;background:var(--surface);color:var(--ink);text-align:left;font-weight:850;overflow-wrap:anywhere}.choice-btn.wrong{border-color:var(--bad);background:color-mix(in oklch,var(--bad) 14%,var(--paper))}.kv{display:grid;grid-template-columns:74px 1fr;gap:5px 9px;font-size:13px;line-height:1.32}.k{color:var(--muted)}.v{color:var(--ink)}.drawer-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px}.completion{display:none;position:absolute;inset:8px;z-index:6;place-items:center;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in oklch,var(--paper) 96%,transparent);text-align:center}.completion.show{display:grid}.completion h2{margin:0 0 8px;font-size:46px;font-weight:950;letter-spacing:0;line-height:.9}.completion p{max-width:540px;margin:0 auto 18px;color:var(--muted);line-height:1.43}.seo-content{background:var(--paper);color:var(--ink);border-top:1px solid var(--line);padding:clamp(48px,8vw,96px) clamp(18px,4vw,56px) clamp(64px,9vw,120px)}.seo-shell{max-width:1180px;margin:0 auto}.seo-kicker{max-width:760px;color:var(--muted);font-size:13px;font-weight:900;letter-spacing:0;text-transform:uppercase}.seo-content h2{max-width:940px;margin-top:48px;font-size:clamp(30px,6vw,72px);font-weight:950;line-height:.9;letter-spacing:0}.seo-content h3{margin:28px 0 0;font-size:clamp(21px,3vw,34px);font-weight:920;line-height:1}.seo-content p,.seo-content li{max-width:76ch;color:var(--muted);font-size:clamp(16px,1.7vw,20px);line-height:1.55}.seo-content p{margin-top:16px}.seo-content a{color:var(--ink);font-weight:850;text-decoration-thickness:2px;text-underline-offset:3px}.seo-summary{display:grid;gap:14px;margin-top:28px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.seo-summary strong{font-size:15px;font-weight:950;text-transform:uppercase}.seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}.seo-card{min-width:0;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.seo-card strong{display:block;font-size:28px;font-weight:950;line-height:1}.seo-card span{display:block;margin-top:8px;color:var(--muted);font-size:13px;font-weight:800;line-height:1.35}.seo-table-wrap{max-width:100%;overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:var(--radius)}.seo-content table{width:100%;min-width:760px;border-collapse:collapse;background:var(--paper)}.seo-content th,.seo-content td{padding:14px;border-bottom:1px solid var(--soft-line);text-align:left;vertical-align:top;font-size:15px;line-height:1.4}.seo-content th{color:var(--ink);background:var(--surface);font-weight:950}.seo-content td{color:var(--muted);font-weight:650}.seo-content ol,.seo-content ul{display:grid;gap:10px;margin:18px 0 0;padding-left:22px}.seo-note{margin-top:28px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink);color:var(--paper)}.seo-note p{margin:0;color:var(--paper)}noscript{position:fixed;inset:10px;z-index:100;display:grid;place-items:center;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-weight:850}@media (min-width:1180px){.prompt-word{font-size:50px}}@media (max-width:980px){.shell{grid-template-rows:auto minmax(0,1fr)}.stage{grid-template-columns:1fr}.side{display:none}.hud{display:block}.wheel-wrap{width:min(100%,calc(100dvh - 164px));height:min(100%,calc(100dvh - 164px));max-width:100%;max-height:100%}.drawer{width:min(88vw,340px);min-width:0}.seo-grid{grid-template-columns:1fr}}@media (max-width:720px){.topbar{align-items:flex-start;flex-direction:column;min-height:0}.brand-row,.top-controls{width:100%}.top-controls{justify-content:flex-start}.subtitle{white-space:normal}h1{font-size:24px}}@media (max-width:520px){.shell{padding:8px;gap:8px}.back-link,.btn,.select{min-height:34px;padding:7px 9px;font-size:12px}.top-controls .danger{display:none}.prompt-word{font-size:31px}.hud-main{grid-template-columns:1fr}.hud-actions{justify-content:flex-start}.label{font-size:9px;stroke-width:2.45px}.label.r1{font-size:11px}.label.r2{font-size:8.8px}.label.r3{font-size:7.2px}.drawer{top:6px;right:6px;bottom:auto;width:min(90vw,326px);max-height:min(78vh,520px);padding:12px}.choice-grid{grid-template-columns:1fr}.completion h2{font-size:34px}}@media (max-height:690px) and (max-width:980px){.topbar{display:none}.shell{grid-template-rows:minmax(0,1fr)}.wheel-wrap{width:min(100%,calc(100dvh - 110px));height:min(100%,calc(100dvh - 110px))}.prompt-word{font-size:30px}}