:root{--bg: #f4f2ee;--card: #ffffff;--line: #dcd8d0;--text: #1c1d20;--dim: #6b6f78;--accent: #2f6fd6;--accent-text: #ffffff;--ok: #1f8a4c;--ok-bg: #e3f4ea;--no: #c23b3b;--no-bg: #fbe6e6;--frame: #e9e6e0;--gray: #e2dfd9;--gray-hover: #d6d2cb;--finder: color-mix(in srgb, var(--dim), var(--bg));color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #14161a;--card: #1c1f25;--line: #333944;--text: #e7eaf0;--dim: #949cab;--accent: #6ea8fe;--accent-text: #0d1117;--ok: #45c17a;--ok-bg: #173324;--no: #e8706f;--no-bg: #3a1c1e;--frame: #23272f;--gray: #2c313a;--gray-hover: #363c47;--finder: color-mix(in srgb, color-mix(in srgb, var(--dim), var(--bg)), #fff);color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:clip}#quiz{touch-action:pan-y}body{background:var(--bg);color:var(--text);font:16px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif}main{max-width:720px;margin:0 auto;padding:24px 16px 48px}h1{font-size:30px;line-height:1.15;margin:0 0 8px;letter-spacing:-.01em}h2{font-size:15px;margin:24px 0 8px;color:var(--dim);font-weight:600}code,pre{font-family:ui-monospace,Consolas,monospace;font-size:13px}pre{white-space:pre-wrap;color:var(--dim)}.note{color:var(--dim);font-size:13px}.lede{color:var(--dim);margin:0 0 20px}.spacer{flex:1}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}button{font:inherit;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 16px;cursor:pointer}button:hover:not(:disabled){border-color:var(--dim)}button:disabled{cursor:default}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600;padding:11px 22px}button.primary:hover{filter:brightness(1.08)}button.primary.go{background:var(--ok);border-color:var(--ok)}button.secondary{background:var(--gray);border-color:var(--gray);font-weight:600;padding:11px 18px}button.secondary:hover:not(:disabled){background:var(--gray-hover);border-color:var(--gray-hover)}button .icon{display:inline-block;vertical-align:-2px;margin-left:10px}.icon.play{width:13px;height:15px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}.icon.gear{width:17px;height:17px;vertical-align:-3px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.48.48 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6a3.6 3.6 0 1 1 0-7.2 3.6 3.6 0 0 1 0 7.2z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.48.48 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6a3.6 3.6 0 1 1 0-7.2 3.6 3.6 0 0 1 0 7.2z'/%3E%3C/svg%3E") center / contain no-repeat}.end-actions{justify-content:space-between}.setting{display:flex;align-items:center;gap:12px;margin:0 0 12px;flex-wrap:wrap}.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{border:0;border-radius:0;padding:9px 16px;font-size:17px;font-weight:600}.seg .signs{font-size:1.2em;line-height:1;font-weight:700}.seg button+button{border-left:1px solid var(--line)}.seg button.active{background:var(--accent);color:var(--accent-text);font-weight:600}.start .primary{margin-top:12px}#timeline{max-width:720px;margin:0 auto;padding:20px 16px 0}#timeline:not([hidden])+main{padding-top:12px}.film{position:relative;padding:4px 2px;overflow:hidden}#timeline{cursor:pointer;-webkit-tap-highlight-color:transparent}.strip{display:flex;gap:1px;height:6px}.strip .cell{flex:1;background:var(--line);transition:background-color .2s}.strip .cell.ok{background:var(--ok)}.strip .cell.no{background:var(--no)}.strip{position:relative;z-index:1}.finder{--pitch: calc((100% - 4px + 1px) / var(--n));position:absolute;top:0;bottom:0;left:calc(2px + var(--pitch) * var(--pos) - 1px);width:calc(var(--pitch) - 1px + 2px);border:1px solid var(--finder);border-radius:3px}.finder[hidden]{display:none}@media(prefers-reduced-motion:reduce){.strip .cell{transition:none}}.face-frame{height:min(52vh,460px);border-radius:12px;background:var(--frame);display:flex;align-items:center;justify-content:center;overflow:hidden}.face-frame{position:relative}.face-frame .loader{position:absolute}.face-frame:not(.loading) .loader{display:none}.face{display:block;width:100%;height:100%;transition:opacity .15s ease-out}.face.pending{opacity:0}@media(prefers-reduced-motion:reduce){.face{transition:none}}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 12px}.choice{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;font-size:17px;min-height:56px}.choices.pulse .choice{animation:pulse .6s ease-in-out}@keyframes pulse{40%{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}}.choice .key{flex:none;width:24px;height:24px;border-radius:6px;border:1px solid var(--line);color:var(--dim);font-size:12px;display:inline-flex;align-items:center;justify-content:center}.choice:disabled:not(.right):not(.wrong){opacity:.55}.choice.right{border-color:var(--ok);background:var(--ok-bg)}.choice.right .key{border-color:var(--ok);color:var(--ok)}.choice.wrong{border-color:var(--no);background:var(--no-bg)}.choice.wrong .key{border-color:var(--no);color:var(--no)}.caption{margin:6px 0 0;min-height:1.5em;font-size:14px;color:var(--dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-row{display:flex;align-items:center;min-height:48px}.result-row .next{width:calc(50% - 5px)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.next:not([hidden]){display:block;margin-left:auto}.review-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:8px 0 24px}.review-col h2{margin-top:0}.review-col.ok h2{color:var(--ok)}.review-col.no h2{color:var(--no)}.review{list-style:none;padding:0;margin:0;display:grid;gap:10px}.review li{display:flex;align-items:center;gap:12px;min-width:0}.review li[role=button]{cursor:pointer;border-radius:10px;margin:-4px;padding:4px;-webkit-tap-highlight-color:transparent}.review li[role=button]:hover,.review li[role=button]:active{background:var(--frame)}.review li[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:0}.review li>div:last-child{min-width:0;overflow-wrap:anywhere}.thumb{width:64px;height:84px;flex:none;border-radius:8px;background:var(--frame);overflow:hidden}.actions{display:flex;gap:10px;flex-wrap:wrap}@media(max-width:480px){main{padding:0 12px 24px}.card{padding:10px 0 0;border:0;border-radius:0;background:transparent}#timeline{padding:8px 12px 0}#timeline:not([hidden])+main{padding-top:0}.card.play{padding-top:6px}.choices{gap:8px;margin:6px 0}.caption{margin-top:4px}.choices{grid-template-columns:minmax(0,1fr)}.review-cols{gap:0}.review-col{padding:0 10px}.review-col:first-child{padding-left:0}.review-col+.review-col{border-left:1px solid var(--line);padding-right:0}.review-col h2{font-size:17px}.review{gap:14px}.review li{gap:8px;font-size:14px;line-height:1.3}.review .thumb{width:48px;height:63px}.face-frame{height:46vh}}