:root{--ink: #18181b;--muted: #6d6d78;--line: #d9d9e0;--accent: #5b5bd6;--accent-soft: rgba(91, 91, 214, .12);--accent-opposite: #b3577e;--progress: #2ea35f;--select: #2ea35f;--select-soft: rgba(46, 163, 95, .14);--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.55;color:var(--ink);background:#fcfcfd;-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:clamp(3rem,11vh,7rem) 1.5rem 4rem}.topbar{position:fixed;top:0;right:0;z-index:10;display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem}.identity{font-size:.8125rem;color:var(--muted)}.export{font:inherit;font-size:.8125rem;padding:.3rem .7rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);cursor:pointer}.export:hover{color:var(--ink);border-color:#b9b9c4}.export:disabled{opacity:.6;cursor:default}.gate-mark{width:46px;height:46px;margin:0 auto 1rem;display:grid;place-items:center;border-radius:50%;background:var(--wash, #f1f1f5);color:var(--muted)}.gate-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:1.5rem;background:#16161a52;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal{position:relative;width:min(460px,100%);padding:1.5rem 1.5rem 1.375rem;border-radius:16px;background:#fff;box-shadow:0 1px 2px #16161a0f,0 24px 60px -24px #16161a59}.modal h2{margin:0 0 .35rem;font-size:1.125rem;font-weight:600;letter-spacing:-.01em}.modal .muted{margin:0 0 1rem;font-size:.9375rem}.share-row{display:flex;gap:.5rem}.share-link{flex:1;min-width:0;font:inherit;font-size:.875rem;padding:.6rem .75rem;border:1px solid var(--line);border-radius:10px;background:#fafafb;color:var(--ink);font-variant-ligatures:none}.share-link:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.share-copy{margin:0;min-width:5.25rem;justify-content:center}.modal-close{position:absolute;top:.6rem;right:.75rem;width:32px;height:32px;font:inherit;font-size:1.375rem;line-height:1;border:none;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.modal-close:hover{background:#f1f1f5;color:var(--ink)}.card{width:100%;max-width:612px}.head{margin-bottom:2.25rem;text-align:center}.progress-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;margin-bottom:1.75rem}.progress-row .progress{grid-column:2}.progress-row .step{grid-column:3;justify-self:start}.progress-row .you{grid-column:1;justify-self:end}.progress{width:200px;height:5px;border-radius:999px;background:var(--line);overflow:hidden}.progress-fill{display:block;height:100%;border-radius:999px;background:var(--progress)}.progress{overflow:visible}.step.you{transition:color .3s ease}.step.you.lit{color:var(--progress);font-weight:600}.progress-row .total{position:relative}.plus-one{position:absolute;left:100%;top:-.05em;margin-left:.4rem;font-size:.8125rem;font-weight:600;color:var(--progress);pointer-events:none}.roll{display:inline-block;position:relative;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:top;font-variant-numeric:tabular-nums}.roll-item{display:inline-block;left:0;top:0}.progress-row .step{line-height:1.2em}.step{margin:0;font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums;color:#4b4b55}h1{margin:0;font-size:1.5rem;font-weight:650;line-height:1.3;letter-spacing:-.01em}h1 .q-main{display:block}h1 .q-anchor{display:block;margin-top:.3rem;font-size:.9rem;font-weight:500;color:var(--muted)}h1 .q-anchor .pole-opposite{font-weight:600}h1 .pole{font-style:normal;color:var(--accent)}h1 .pole-anchor{font-size:.78em;font-weight:500;color:var(--muted)}h1 .pole-opposite{font-style:normal;font-weight:600;color:var(--accent-opposite)}.instructions{display:flex;flex-direction:column;gap:.5rem;max-width:100%;margin:1.125rem auto 0;font-size:.9375rem;line-height:1.6;text-align:center;color:#4b4b55}.instructions .hint{font-size:.85rem;color:var(--muted);white-space:nowrap}@media(max-width:640px){.instructions .hint{white-space:normal;font-size:.75rem}}.instructions strong{font-weight:600;color:var(--ink)}.options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem}.option{position:relative;padding:0;border:none;background:none;cursor:pointer;min-width:0}.frame{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;padding:1rem;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line),0 4px 14px -8px #16161a40;transition:box-shadow .25s var(--ease)}.frame img{display:block;width:100%;height:100%;object-fit:contain}.frame-text{display:flex;align-items:flex-start;justify-content:center;aspect-ratio:auto;min-height:200px;height:100%;min-width:0;padding:1.5rem}.candidate-text{max-height:100%;width:100%;min-width:0;overflow:auto;font-size:.9375rem;line-height:1.6;text-align:left;color:var(--ink);overflow-wrap:anywhere;word-break:break-word}.candidate-text mark.diff,.rv-text mark.diff{background:#ffd6666b;color:inherit;border-radius:3px;padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}.option.selected .frame,.option:focus-visible .frame{box-shadow:inset 0 0 0 2px var(--select),0 0 0 4px var(--select-soft),0 4px 14px -8px #16161a40}.option:focus-visible{outline:none}.tie{display:block;margin:2.25rem auto 0;padding:.55rem 1.5rem;font:inherit;font-size:.9375rem;font-weight:500;color:var(--ink);border:1px solid #cfcfd8;border-radius:999px;background:#fff;cursor:pointer;transition:color .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}.tie:hover{border-color:#a9a9b6;box-shadow:0 1px 6px -2px #16161a2e}.tie.selected{color:var(--select);border-color:var(--select);background:var(--select-soft)}.back{display:block;margin:1.5rem auto 0;padding:.25rem .5rem;font:inherit;font-size:.8125rem;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .18s ease}.back:hover{color:var(--ink)}.caption{display:block;margin-top:.75rem;font-size:.9375rem;font-weight:600;color:#3f3f46;transition:color .2s ease}.option.selected .caption{color:var(--select)}.frame{position:relative}.check-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#ffffff61;pointer-events:none}.check{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#2ea35feb;color:#fff;box-shadow:0 4px 16px -4px #2ea35f73}.check svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}.next{display:flex;align-items:center;gap:.5rem;margin-top:1rem;margin-left:auto;padding:.625rem 1.125rem;font:inherit;font-weight:500;border:none;border-radius:10px;color:#fff;background:var(--accent);cursor:pointer;transition:background .2s ease,color .2s ease}.next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}.next:hover:not(:disabled) svg{transform:translate(2px)}.next:disabled{background:#f1f1f3;color:#b4b4bc;cursor:not-allowed}.done{text-align:center;padding:3rem 0}.done h1{font-size:1.75rem;margin-top:.25rem}.done-stats{display:flex;justify-content:center;gap:2.5rem;margin:1.75rem 0 .5rem}.done-stat{display:flex;flex-direction:column;gap:.2rem}.done-stat b{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.done-stat span{font-size:.75rem;color:var(--muted)}.done .progress{width:240px;margin:1.5rem auto 0}.check-large{width:46px;height:46px;margin:0 auto 1rem;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--accent)}.check-large svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.muted{margin:.375rem 0 0;font-size:.9375rem;color:var(--muted)}.stats{display:flex;justify-content:center;gap:3rem;margin-top:1.75rem}.stat{display:flex;flex-direction:column;gap:.25rem}.stat-num{font-size:1.75rem;font-weight:600;letter-spacing:-.02em}.stat-label{font-size:.75rem;color:var(--muted)}.restart{margin:2rem auto 0}@media(max-width:768px){.app{padding:4rem 1rem 3rem}.options{grid-template-columns:1fr;gap:1rem}.option{display:flex;flex-direction:column}.frame-text{height:auto;min-height:0}.topbar{padding:.625rem .875rem;gap:.5rem}.identity{display:none}.progress{width:120px}h1{font-size:1.25rem}.instructions{max-width:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.review-modal{width:min(880px,100%);max-height:88vh;display:flex;flex-direction:column}.review-filters{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;flex-wrap:wrap}.review-filters select{font:inherit;font-size:.8125rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}.review-count{margin-left:auto;font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}.review-list{overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;padding-right:.25rem}.review-card{border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem .8rem}.review-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.55rem;font-size:.8125rem;color:var(--muted)}.review-head b{color:var(--accent)}.review-badge{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.12rem .5rem;border-radius:999px;white-space:nowrap}.review-badge.ok{background:var(--select-soft);color:var(--progress)}.review-badge.bad{background:#d64f4f1f;color:#c04545}.review-frames{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.rv-frame{margin:0;min-width:0}.rv-frame figcaption{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}.rv-frame img{display:block;width:100%;height:190px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:#fafafb}.rv-text{font-size:.8125rem;line-height:1.5;border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem;height:190px;overflow-y:auto;background:#fafafb;overflow-wrap:anywhere;word-break:break-word}.review-verdicts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}.review-verdicts{flex-direction:column;align-items:flex-start}.review-verdicts .verdict{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.4em;font-size:.8125rem;line-height:1.35;padding:.3rem .65rem;border-radius:10px;background:#f1f1f5;color:var(--ink)}.review-verdicts .verdict b{font-weight:650}.review-verdicts .verdict.judge{border:1px dashed var(--accent)}.review-verdicts .verdict.judge b{color:var(--accent)}.review-verdicts .verdict-asked{color:var(--muted)}.review-verdicts .verdict-said{font-weight:550}.review-verdicts .verdict.v-correct{background:var(--select-soft)}.review-verdicts .verdict.v-correct .verdict-said{color:#1d7a46}.review-verdicts .verdict.v-incorrect{background:#d64f4f1f}.review-verdicts .verdict.v-incorrect .verdict-said{color:#c04545}@media(max-width:640px){.review-frames{grid-template-columns:1fr}.rv-frame img,.rv-text{height:150px}}.judge-reason{width:100%;order:99;font-size:.78rem;color:var(--muted)}.judge-reason summary{cursor:pointer;color:var(--accent)}.judge-reason p{margin:.35rem 0 0;line-height:1.5;white-space:pre-wrap;border-left:2px solid var(--line);padding-left:.6rem}.tut-doc{width:min(760px,100%);max-height:88vh;overflow-y:auto}.tut-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.2rem}.tut-title{font-size:1.55rem!important;font-weight:700!important;letter-spacing:-.02em;margin:0 0 .9rem!important}.tut-intro{font-size:.92rem;line-height:1.6;color:var(--muted);margin:.2rem 0 1.4rem}.tut-intro strong{color:var(--ink)}.tut-intro p{margin:0 0 .5rem}.tut-rules{margin:0 0 .6rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.3rem}.tut-rules li{line-height:1.5}.tut-rules li::marker{color:var(--accent-ink, var(--accent));font-weight:600}.tut-ex{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem 1.1rem;margin-bottom:1.1rem}.tut-ex-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem;flex-wrap:wrap}.tut-ex-q{font-size:.98rem;font-weight:600}.tut-chip{margin:0;flex:0 0 auto;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.16rem .5rem;border-radius:999px;white-space:nowrap}.tut-chip.tk-clear{background:var(--select-soft);color:var(--progress)}.tut-chip.tk-subtle{background:var(--accent-soft);color:var(--accent)}.tut-chip.tk-tie{background:#f1f1f5;color:var(--muted)}.tut-chip.tk-over{background:#f7f0dd;color:#8a6410}.tut-ex-cards{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.tut-img{display:block;width:100%;border-radius:8px;margin-top:.1rem}.tut-ex-card{border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;background:#fff}.tut-ex-card.right{border-color:var(--select);background:var(--select-soft)}.tut-ex-card .label{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}.tut-ex-card.right .label{color:var(--progress)}.tut-ex .tut-text{font-size:.82rem;line-height:1.55}.tut-ex .tut-text mark.diff{background:#ffd6666b;color:inherit;border-radius:3px;padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}.tut-ans{font-size:.86rem;line-height:1.55;margin:.85rem 0 0;color:var(--ink)}.tut-doc-foot{display:flex;justify-content:flex-end;position:sticky;bottom:-1.375rem;margin:.6rem -1.5rem -1.375rem;padding:.85rem 1.5rem;background:#fff;border-top:1px solid var(--line)}.tut-next{font:inherit;font-size:.85rem;font-weight:600;padding:.45rem 1.2rem;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}.tut-next:hover{filter:brightness(1.06)}@media(max-width:640px){.tut-ex-cards{grid-template-columns:1fr}}.exemplar-banner{max-width:612px;margin:4.75rem auto -2.5rem;padding:.5rem 1rem;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:.8125rem;font-weight:600;text-align:center}@media(max-width:768px){.exemplar-banner{margin-top:7rem}}