:root{--accent: #4f46e5;--accent-ink: #ffffff;--bg: #f7f7fb;--surface: #ffffff;--ink: #17172b;--ink-quiet: #5a5a72;--line: #dcdce8;--warn-bg: #fff6e5;--warn-ink: #7a4a00;--radius: 14px;--tap: 48px}@media(prefers-color-scheme:dark){:root{--accent: #8b83ff;--accent-ink: #16162a;--bg: #121221;--surface: #1c1c30;--ink: #f2f2f7;--ink-quiet: #a9a9c2;--line: #32324c;--warn-bg: #3a2f14;--warn-ink: #ffd79a}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%}#app{max-width:34rem;margin:0 auto;padding:1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom))}h1{margin:0 0 .5rem;font-size:1.6rem;line-height:1.2}h1:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.lead{margin:0 0 1.25rem;color:var(--ink-quiet)}.screen{display:flex;flex-direction:column}.page-frame{aspect-ratio:8.5 / 11;width:100%;max-width:20rem;margin:0 auto 1.25rem;border:3px dashed var(--line);border-radius:var(--radius);background:var(--surface);display:grid;place-items:center;overflow:hidden;position:relative}.page-frame:has(.preview){border-style:solid;padding:0}.page-frame__hint{padding:1.25rem;text-align:center;color:var(--ink-quiet)}.page-frame__hint p{margin:.5rem 0 0;font-size:.95rem}.page-frame__icon{font-size:2.5rem;color:var(--line)}.preview{width:100%;height:100%;object-fit:contain;display:block}.figure__wrap.is-loading .page-frame{background:linear-gradient(90deg,transparent,rgb(0 0 0 / 6%),transparent) 0 0 / 200% 100% no-repeat,var(--surface);animation:shimmer 1.2s infinite linear}@keyframes shimmer{to{background-position:200% 0}}.camera{position:relative;width:100%;max-width:24rem;margin:0 auto .75rem;aspect-ratio:3 / 4;background:#000;border-radius:var(--radius);overflow:hidden}.camera__video{display:block;width:100%;height:100%;object-fit:cover}.camera__guide{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:86%;aspect-ratio:8.5 / 11;border:3px solid rgb(255 255 255 / 90%);border-radius:8px;box-shadow:0 0 0 9999px #00000073;pointer-events:none}.camera__starting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;background:#0000008c;color:#fff;font-size:.95rem}.camera__starting[hidden],.hint-pill[hidden],.btn[hidden]{display:none}.hint-pill{max-width:24rem;margin:0 auto 1rem;padding:.6rem .9rem;border-radius:999px;background:var(--warn-bg);color:var(--warn-ink);font-size:.95rem;text-align:center}.actions--shutter{align-items:center;margin-bottom:.5rem}.shutter{position:relative;width:72px;height:72px;padding:0;border:4px solid var(--accent);border-radius:50%;background:var(--surface);cursor:pointer;-webkit-tap-highlight-color:transparent}.shutter:after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--accent)}.shutter:disabled{opacity:.5;cursor:default}.shutter:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.tips{margin:0 0 1.5rem;padding-left:1.25rem;color:var(--ink-quiet);font-size:.95rem}.tips li+li{margin-top:.25rem}.notice{margin:0 0 .75rem;padding:.75rem .9rem;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:.95rem}.notice--warn{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}.notice[hidden]{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:.75rem 1.4rem;border:1px solid transparent;border-radius:var(--radius);font:inherit;font-weight:600;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.btn--primary{background:var(--accent);color:var(--accent-ink)}.btn--quiet{background:transparent;color:var(--ink);border-color:var(--line)}.btn:disabled{opacity:.55;cursor:default}.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.actions{display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem}.status{display:flex;align-items:center;gap:.5rem;margin:0 0 1.5rem;color:var(--ink-quiet)}.spinner{flex:none;width:1.1rem;height:1.1rem;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:3s}.figure__wrap.is-loading .page-frame{animation:none}}.nickname__form{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.label{font-weight:600}.hint{margin:0;color:var(--ink-quiet);font-size:.9rem}.input{min-height:var(--tap);padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}.input:focus-visible{outline:3px solid var(--accent);outline-offset:1px}.nickname__done{margin:0 0 1rem;font-weight:600}.tick{color:var(--accent)}.score{text-align:center;padding:1.25rem;margin-bottom:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.score__label{margin:0;color:var(--ink-quiet);font-size:.95rem}.score__value{margin:.25rem 0 0;font-size:3.5rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.board__heading{font-size:1.15rem;margin:1.5rem 0 .75rem}.board__list{margin:0 0 1.5rem;padding:0;list-style:none;counter-reset:rank;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}.board__row{counter-increment:rank;display:grid;grid-template-columns:2rem 1fr auto auto;align-items:center;gap:.6rem;padding:.7rem .9rem}.board__row+.board__row{border-top:1px solid var(--line)}.board__row:before{content:counter(rank);color:var(--ink-quiet);font-variant-numeric:tabular-nums}.board__row--me{background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:700}.board__you{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .45rem;border-radius:999px;background:var(--accent);color:var(--accent-ink)}.board__score{font-variant-numeric:tabular-nums;font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}