:root,[data-theme=light]{--background: oklch(.948 .01 85);--foreground: oklch(.22 .015 60);--card: oklch(.995 .003 90);--surface: oklch(.915 .012 85);--surface-2: oklch(.885 .014 85);--muted-fg: oklch(.46 .02 70);--primary: oklch(.52 .1 150);--primary-fg: oklch(.985 0 0);--primary-weak: oklch(.52 .1 150 / .13);--accent: oklch(.48 .06 60);--success: oklch(.54 .13 160);--success-weak: oklch(.54 .13 160 / .15);--warning: oklch(.66 .14 80);--destructive: oklch(.57 .21 27);--destructive-weak: oklch(.57 .21 27 / .13);--border: oklch(.855 .016 80);--border-strong: oklch(.78 .02 75);--ring: oklch(.52 .1 150);--shadow: 0 1px 2px oklch(.25 .02 60 / .07), 0 10px 26px -14px oklch(.25 .02 60 / .18);--radius: .625rem;--font-sans: "Inter", system-ui, sans-serif;--font-mono: "Geist Mono", ui-monospace, monospace;color-scheme:light}[data-theme=dark]{--background: oklch(.15 .012 70);--foreground: oklch(.975 .005 90);--card: oklch(.19 .015 70);--surface: oklch(.27 .018 70);--surface-2: oklch(.23 .016 70);--muted-fg: oklch(.72 .02 80);--primary: oklch(.72 .11 150);--primary-fg: oklch(.17 .03 150);--primary-weak: oklch(.72 .11 150 / .14);--accent: oklch(.68 .07 60);--success: oklch(.74 .14 160);--success-weak: oklch(.74 .14 160 / .15);--warning: oklch(.8 .13 80);--destructive: oklch(.7 .19 22);--destructive-weak: oklch(.7 .19 22 / .16);--border: oklch(1 0 0 / .11);--border-strong: oklch(1 0 0 / .18);--ring: oklch(.72 .11 150);--shadow: 0 1px 2px oklch(0 0 0 / .3), 0 12px 30px -14px oklch(0 0 0 / .6);color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--background);color:var(--foreground);font-family:var(--font-sans)}::selection{background:var(--primary);color:var(--primary-fg)}:focus-visible{outline:2px solid var(--ring);outline-offset:2px}@keyframes cardIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes popIn{0%{opacity:0}to{opacity:1}}.scroll::-webkit-scrollbar{width:9px;height:9px}.scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius)}.scroll::-webkit-scrollbar-track{background:transparent}.wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,3vw,40px)}.col{width:100%;max-width:760px;display:flex;flex-direction:column;gap:18px}.header{display:flex;flex-direction:column;align-items:stretch;gap:14px}.titleblock{display:flex;flex-direction:column;gap:6px}.title{font-size:clamp(1.6rem,7vw,2.15rem);font-weight:700;letter-spacing:-.02em;line-height:1.05}.subtitle{display:flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-fg)}.dot{width:7px;height:7px;border-radius:50%;background:var(--primary);flex:0 0 auto}.controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}@media (min-width: 640px){.header{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px}}.icon{flex:0 0 auto;display:inline-block;vertical-align:-.15em}.seg{display:inline-flex;align-items:stretch;height:46px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:3px;gap:2px}.seg button{display:inline-flex;align-items:center;justify-content:center;height:100%;border:none;background:none;color:var(--muted-fg);font-family:var(--font-mono);font-size:.78rem;padding:0 .85rem;border-radius:calc(var(--radius) - 2px);cursor:pointer;transition:color .15s,background .15s}.seg button:hover{color:var(--foreground)}.seg button.active{background:var(--primary);color:var(--primary-fg);font-weight:600}.seg.theme button{min-width:38px;padding:0 .55rem}.picker{position:relative;flex:1 1 auto;min-width:0}.picker-trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:.6rem .9rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);color:var(--foreground);cursor:pointer;font-family:var(--font-sans);font-size:.95rem;transition:border-color .15s}.picker-trigger:hover{border-color:var(--border-strong)}.picker-caption{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-fg)}.picker-label{display:inline-flex;align-items:center;gap:6px;font-weight:600}.picker-optlabel{display:inline-flex;align-items:center;gap:8px}.picker-count{margin-left:auto;font-family:var(--font-mono);font-size:.75rem;color:var(--primary);background:var(--primary-weak);border-radius:var(--radius);padding:.1rem .55rem}.picker-menu{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;max-height:62vh;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.35rem}.picker-group{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-fg);padding:.5rem .6rem .25rem}.picker-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;text-align:left;padding:.6rem .7rem;border:none;background:none;color:var(--foreground);border-radius:var(--radius);cursor:pointer;font-family:var(--font-sans);font-size:.95rem}.picker-opt:hover{background:var(--surface)}.picker-opt.active{background:var(--primary-weak);color:var(--primary);font-weight:600}.picker-optcount{margin-left:auto;font-family:var(--font-mono);font-size:.75rem;color:var(--muted-fg)}.picker-caret{display:inline-flex;align-items:center;color:var(--muted-fg);transition:transform .15s}.picker-caret.up{transform:rotate(180deg)}@media (min-width: 640px){.picker{flex:0 0 auto}.picker-trigger{width:auto;min-width:16rem}.picker-menu{min-width:18rem;left:auto;right:0}}.progress{display:flex;align-items:center;gap:12px}.progress-track{flex:1;height:6px;background:var(--surface);border-radius:var(--radius);overflow:hidden}.progress-fill{height:100%;background:var(--primary);border-radius:var(--radius);transition:width .35s ease}.progress-label{font-family:var(--font-mono);font-size:12px;color:var(--muted-fg);white-space:nowrap;font-variant-numeric:tabular-nums}.card{border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);padding:clamp(20px,3.5vw,32px);display:flex;flex-direction:column;gap:16px;animation:cardIn .25s ease}.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius);background:var(--surface);color:var(--muted-fg);border:1px solid var(--border)}.tag.ok{color:var(--success);border-color:color-mix(in oklch,var(--success),transparent 60%);background:var(--success-weak)}.tag.bad{color:var(--destructive);border-color:color-mix(in oklch,var(--destructive),transparent 60%);background:var(--destructive-weak)}.fav{min-width:44px;min-height:44px;display:inline-grid;place-items:center;background:none;border:none;cursor:pointer;font-size:20px;line-height:1;color:var(--border-strong);transition:color .15s}.fav:hover,.fav.on{color:var(--warning)}.figure-block{display:flex;flex-direction:column;gap:6px}.figure-viewport{position:relative;width:100%;height:min(64vh,620px);min-height:340px;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);background:#fff;touch-action:none;overscroll-behavior:contain}.figure-viewport img{position:absolute;top:0;left:0;max-width:100%;max-height:100%;width:auto;height:auto;display:block;transform-origin:0 0;will-change:transform;cursor:zoom-in;-webkit-user-select:none;user-select:none}.figure-viewport img.zoomed{cursor:grab}.figure-viewport img.zoomed:active{cursor:grabbing}.figure-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.figure-note{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-fg)}.figure-ctrls{display:flex;align-items:center;gap:4px}.figure-ctrls button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:34px;border:1px solid var(--border);background:var(--card);color:var(--muted-fg);font-family:var(--font-mono);font-size:.78rem;padding:.25rem .6rem;border-radius:var(--radius);cursor:pointer;transition:all .14s}.figure-ctrls button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.figure-ctrls button:disabled{opacity:.35;cursor:default}.figure-z{font-family:var(--font-mono);font-size:11px;color:var(--muted-fg);min-width:38px;text-align:center}.figure-hint{font-family:var(--font-mono);font-size:10px;color:var(--muted-fg);opacity:.7;text-align:center}.question{font-size:clamp(17px,2.7vw,21px);font-weight:600;line-height:1.4;letter-spacing:-.01em;text-wrap:pretty}.choices{display:flex;flex-direction:column;gap:9px}.choice{display:flex;align-items:flex-start;gap:12px;text-align:left;width:100%;padding:13px 15px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);color:var(--foreground);font-family:var(--font-sans);font-size:15px;line-height:1.45;cursor:pointer;transition:all .14s}.choice:hover:not(.locked){border-color:var(--primary);background:var(--primary-weak)}.choice.locked{cursor:default}.choice-key{flex:0 0 auto;width:23px;height:23px;border-radius:var(--radius);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:600;background:var(--surface);color:var(--muted-fg);border:1px solid var(--border)}.choice.selected{border-color:var(--primary);background:var(--primary-weak)}.choice.selected .choice-key{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}.choice.correct{border-color:color-mix(in oklch,var(--success),transparent 45%);background:var(--success-weak);color:var(--foreground)}.choice.correct .choice-key{background:var(--success);color:var(--primary-fg);border-color:var(--success)}.choice.wrong{border-color:color-mix(in oklch,var(--destructive),transparent 45%);background:var(--destructive-weak)}.choice.wrong .choice-key{background:var(--destructive);color:var(--primary-fg);border-color:var(--destructive)}.why{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--muted-fg);text-wrap:pretty;border-left:2px solid color-mix(in oklch,var(--success),transparent 50%);padding:3px 0 3px 13px;animation:popIn .2s ease}.why b{color:var(--foreground)}.why .icon{margin-top:2px}.ok-why .icon,.ok-why b{color:var(--success)}.feedback{display:flex;flex-direction:column;gap:8px}.wrong-why{border-left-color:color-mix(in oklch,var(--destructive),transparent 50%)}.wrong-why .icon,.wrong-why b{color:var(--destructive)}.guide{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}.guide>summary{cursor:pointer;list-style:none;padding:12px 14px;-webkit-user-select:none;user-select:none;font-family:var(--font-mono);font-size:12.5px;color:var(--accent);display:flex;align-items:center;gap:8px}[data-theme=dark] .guide>summary{color:var(--primary)}.guide>summary::-webkit-details-marker{display:none}.guide>summary:after{content:"▸";margin-left:auto;transition:transform .15s;color:var(--muted-fg)}.guide[open]>summary:after{transform:rotate(90deg)}.guide-steps{margin:0;padding:2px 18px 14px 34px;display:flex;flex-direction:column;gap:8px}.guide-steps li{font-size:14px;line-height:1.5;color:var(--foreground);text-wrap:pretty}.guide-steps li::marker{color:var(--primary);font-family:var(--font-mono);font-size:12px}.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:.55rem .95rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);color:var(--foreground);font-family:var(--font-mono);font-size:.8rem;white-space:nowrap;cursor:pointer;transition:all .15s}.btn:hover:not(:disabled){border-color:var(--border-strong)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}.btn-primary:hover:not(:disabled){filter:brightness(1.05);border-color:var(--primary)}.btn-red:hover:not(:disabled){border-color:var(--destructive);color:var(--destructive)}.nav-mid{display:flex;gap:8px;flex-wrap:nowrap;justify-content:center}@media (max-width: 480px){.nav,.nav-mid{gap:5px}.btn{padding:.5rem .6rem;font-size:.72rem;gap:4px}}@media (max-width: 360px){.nav-mid .btn-label{display:none}.nav-mid .btn{padding:.5rem .55rem}}.footer{display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;padding-top:2px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted-fg)}.footer .item{display:inline-flex;align-items:center;gap:5px}.footer b{color:var(--foreground);font-variant-numeric:tabular-nums}.footer .ok{color:var(--success)}.footer .bad{color:var(--destructive)}.footer .streak .icon{color:var(--warning)}.footer .accuracy .icon{color:var(--primary)}.footer .star-item .icon{color:var(--warning)}.result{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}.result .score{font-size:clamp(40px,9vw,68px);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.result .pass{color:var(--success)}.result .fail{color:var(--destructive)}.result .sub{color:var(--muted-fg);font-size:15px}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#0e0a06e6;z-index:50;cursor:zoom-out;display:grid;place-items:center;padding:20px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.lightbox-inner{max-width:96vw;max-height:92vh;overflow:auto;border-radius:var(--radius);cursor:default}.lightbox-inner img{display:block;width:auto;max-width:none;background:#fff}.lightbox-close{position:fixed;top:16px;right:18px;border:1px solid var(--border-strong);background:var(--card);color:var(--foreground);font-family:var(--font-mono);font-size:13px;padding:8px 14px;border-radius:var(--radius);cursor:pointer}.lightbox-close:hover{border-color:var(--primary);color:var(--primary)}