:root{--strike:#ff2e88;--chassis:#0a0a0b;--bone:#f2f0eb;--live:#00e58a;--caution:#ffb300;--blueprint:#2e9dff;--rail:#8c8c93;--print:#b9b6b1;--carbon:#5a5a5f;--seam:#2a2a2e;--plate:#141416;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--display:"Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;--kana:var(--font-klee), "Klee One", serif;--background:var(--chassis);--foreground:var(--bone);--muted:var(--rail);--surface:var(--plate);--line:var(--seam);--shadow:#232327;--stroke:var(--bone)}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;height:100%}html,body{max-width:100vw;overflow-x:hidden}body{min-height:100%;color:var(--bone);background:var(--chassis);font-family:var(--display);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;display:flex}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}button:disabled{opacity:.35;cursor:default}button:not(:disabled):active{transform:translateY(1px)}.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;font-size:10px;line-height:1.4}.chamfer{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}.btnStrike{background:var(--strike);color:#000;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);padding:20px;font-size:14px;font-weight:700}.btnSeam{border:1px solid var(--seam);color:var(--rail);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;background:0 0;padding:15px;font-size:11px}.btnLive{border-color:var(--live);color:var(--live);background:color-mix(in srgb, var(--live) 14%, transparent);padding:19px;font-weight:700}.btnCaution{border-color:var(--caution);color:var(--caution);background:color-mix(in srgb, var(--caution) 14%, transparent);padding:19px;font-weight:700}.led{background:var(--live);width:8px;height:8px;box-shadow:0 0 9px var(--live);display:inline-block}.reg{font-family:var(--mono);color:var(--carbon);pointer-events:none;font-size:11px;line-height:1;position:absolute}.frame{flex-direction:column;flex:1;width:100%;max-width:430px;min-height:100dvh;margin:0 auto;display:flex;position:relative}.hazard{background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--strike) 7%, transparent) 0 10px, transparent 10px 20px);border-bottom:1px solid var(--seam);pointer-events:none;height:52px;position:absolute;top:0;left:0;right:0}.appHead{padding:calc(18px + env(safe-area-inset-top)) 20px 18px;justify-content:space-between;align-items:center;display:flex;position:relative}.brand{font-family:var(--mono);text-transform:uppercase;color:var(--bone);letter-spacing:.16em;font-size:10px;font-weight:700}.onDevice{font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--live);align-items:center;gap:8px;font-size:10px;display:flex}.homeCenter{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex;position:relative}.ghostKana{color:#0000;-webkit-text-stroke:1px #1d1d21;font-size:300px;font-weight:900;line-height:.8;font-family:var(--kana);pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;top:-8px;right:-38px}.hero{letter-spacing:-.05em;font-variant-numeric:tabular-nums;min-height:.85em;font-size:clamp(120px,48vw,186px);font-weight:900;line-height:.85;position:relative}.chipStrike{font-family:var(--mono);text-transform:uppercase;background:var(--strike);color:#000;letter-spacing:.13em;margin-top:14px;padding:6px 10px;font-size:10px;position:relative}.chipLive{font-family:var(--mono);text-transform:uppercase;border:1px solid var(--live);color:var(--live);background:color-mix(in srgb, var(--live) 14%, transparent);letter-spacing:.13em;margin-top:20px;padding:8px 12px;font-size:12px}.chipRail{font-family:var(--mono);text-transform:uppercase;border:1px solid var(--seam);color:var(--rail);letter-spacing:.13em;margin-top:20px;padding:8px 12px;font-size:12px}.homeBottom{padding:0 20px calc(18px + env(safe-area-inset-bottom));flex-direction:column;gap:14px;display:flex}.segmented{border:1px solid var(--seam);display:flex}.segment{text-align:center;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rail);flex:1;padding:11px;font-size:10px}.segmentOn{border:1px solid var(--blueprint);color:var(--blueprint);background:color-mix(in srgb, var(--blueprint) 14%, transparent);z-index:1;margin:-1px;position:relative}.attribution{font-family:var(--mono);text-transform:uppercase;color:var(--rail);letter-spacing:.08em;text-align:center;font-size:8.5px;line-height:1.7;text-decoration:none}.session{flex-direction:column;flex:1;width:100%;max-width:430px;min-height:100dvh;margin:0 auto;display:flex}.sessionHead{padding:calc(18px + env(safe-area-inset-top)) 20px 18px;justify-content:space-between;align-items:center;display:flex}.sessionLeft{font-family:var(--mono);text-transform:uppercase;color:var(--bone);letter-spacing:.12em;font-variant-numeric:tabular-nums;font-size:12px}.sessionSet{font-family:var(--mono);text-transform:uppercase;color:var(--rail);letter-spacing:.09em;font-size:10px}.card{background:var(--plate);border:1px solid var(--seam);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:148px;margin:0 20px;padding:26px 20px 22px;transition:border-color .15s;display:flex;position:relative}.cardFlipped{border-color:var(--strike);flex-direction:row;gap:22px;padding:18px 20px}.cardRomaji{letter-spacing:-.03em;font-size:76px;font-weight:900;line-height:.9}.cardHint{font-family:var(--mono);text-transform:uppercase;color:var(--rail);letter-spacing:.09em;font-size:10px}.cardKana{font-family:var(--kana);color:var(--bone);font-size:84px;font-weight:600;line-height:1}.cardRevealCol{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.cardRomajiSmall{letter-spacing:-.02em;font-size:30px;font-weight:900}.chipSeam{font-family:var(--mono);text-transform:uppercase;border:1px solid var(--seam);color:var(--rail);letter-spacing:.09em;padding:5px 8px;font-size:10px}.canvasWrap{flex:1;align-items:flex-end;padding:16px 20px 0;display:flex}.canvasBox{aspect-ratio:1;background:var(--bone);width:100%;position:relative}.canvasBox:before,.canvasBox:after{content:"";pointer-events:none;position:absolute}.canvasBox:before{border-left:1px dashed #dad7d0;width:0;top:6%;bottom:6%;left:50%}.canvasBox:after{border-top:1px dashed #dad7d0;height:0;top:50%;left:6%;right:6%}.ink{touch-action:none;z-index:1;width:100%;height:100%;position:absolute;inset:0}.inkFrozen{opacity:.3;pointer-events:none}.canvasOverlay{pointer-events:none;z-index:2;--shadow:transparent;--stroke:var(--strike);position:absolute;inset:0}.canvasOverlay svg{width:100%;height:100%;display:block}.strokeCounter{font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--carbon);z-index:3;font-variant-numeric:tabular-nums;font-size:11px;position:absolute;bottom:9px;right:26px}.sessionActions{padding:16px 20px calc(18px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;display:flex}.row{gap:12px;display:flex}.row>*{flex:1}.verify{width:100%;max-width:64rem;margin:0 auto;padding:2rem 1rem 3rem}.verifyHeader h1{font-size:1.1rem;font-weight:600}.verifyHeader p{color:var(--muted);max-width:40rem;margin-top:.35rem;font-size:.85rem}.verifyReplay{background:var(--surface);border:1px solid var(--line);border-radius:.5rem;margin-top:.85rem;padding:.5rem 1rem}.verifyGrid{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.6rem;margin-top:1.5rem;display:grid}.strokeChar{background:var(--surface);border:1px solid var(--line);text-align:left;border-radius:.6rem;flex-direction:column;gap:.3rem;padding:.5rem .5rem .4rem;display:flex}.strokeCharSvg{aspect-ratio:1;width:100%}.strokeCharSvg svg{display:block}.strokeCharLabel{color:var(--muted);justify-content:space-between;font-size:.75rem;display:flex}.strokeCharCount{font-variant-numeric:tabular-nums}.strokeCharError{color:#e05d5d}.verifyFooter{color:var(--muted);margin-top:2rem;font-size:.72rem}.verifyFooter a{text-decoration:underline}
