:root{--bg:#ffffff;--ink:#1a1a1a;--muted:#494949;--panel:#f3f5f8;--border:#6b7280;--accent:#0b5cad;--on-accent:#ffffff;--danger:#a31515;--callout:#fff3cd;--callout-border:#8a6d00;--focus:#0b5cad;--sym-0:#0072b2;--sym-1:#e69f00;--sym-2:#009e73;--sym-3:#f0e442;--sym-4:#cc79a7;--chart-band:#cfe0f4;--chart-band-edge:#50739c;--chart-bar:#0b5cad;--chart-funnel:#dbe4ef;--chart-line:#0b5cad;--chart-grid:#c3c9d2}@media(prefers-color-scheme:dark){:root{--bg:#121417;--ink:#eceff3;--muted:#bcc3cc;--panel:#1c2026;--border:#8d95a0;--accent:#7db8ff;--on-accent:#08121f;--danger:#ff9b9b;--callout:#3a3114;--callout-border:#d4b000;--focus:#7db8ff;--chart-band:#24405f;--chart-band-edge:#6f9bcc;--chart-bar:#7db8ff;--chart-funnel:#2b3441;--chart-line:#7db8ff;--chart-grid:#3b434e}}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,segoe ui,Roboto,sans-serif;font-size:1rem;line-height:1.55;overflow-wrap:break-word}.wrap{max-inline-size:42rem;margin-inline:auto;padding-inline:.75rem}h1{font-size:1.75rem;line-height:1.2;margin-block:1.25rem .75rem}h2{font-size:1.35rem;line-height:1.25;margin-block:0 .75rem}h3{font-size:1.1rem;line-height:1.3;margin-block:1.5rem .5rem}p{margin-block:0 .9rem}a{color:var(--accent);text-underline-offset:.15em}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}[tabindex="-1"]:focus{outline:none}[tabindex="-1"]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:absolute;inset-inline-start:.5rem;inset-block-start:-4rem;z-index:10;padding:.6rem .9rem;background:var(--bg);border:2px solid var(--focus);border-radius:.4rem}.skip-link:focus{inset-block-start:.5rem}.site-header{border-block-end:1px solid var(--border)}.site-header .bar{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem;padding-block:.5rem}.brand{font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none;padding-block:.6rem}nav ul{display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin:0;padding:0;list-style:none}nav a{display:inline-flex;align-items:center;min-block-size:48px;padding-inline:.5rem;color:var(--ink)}nav a[aria-current=page]{font-weight:700;text-decoration-thickness:3px;text-decoration-color:var(--accent)}.site-footer{margin-block-start:3rem;padding-block:1.5rem;border-block-start:1px solid var(--border);color:var(--muted)}.site-footer p{margin:0}main{padding-block-end:1rem}main:focus{outline:none}.prose{max-inline-size:38rem}.prose h2{margin-block-start:1.75rem}.prose ul,.prose ol{padding-inline-start:1.25rem}.prose li{margin-block-end:.35rem}.btn{display:inline-flex;align-items:center;justify-content:center;min-block-size:48px;min-inline-size:48px;padding:.5rem 1.1rem;font:inherit;font-weight:600;color:var(--ink);background:var(--bg);border:2px solid var(--border);border-radius:.5rem;text-decoration:none;cursor:pointer}.btn:hover{border-color:var(--ink)}.btn.primary{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}.btn.danger{color:var(--danger);border-color:var(--danger)}.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-block:1rem}.panel{padding:1rem .5rem;margin-block:1rem;background:var(--panel);border-radius:.6rem}.practice-notice{padding:.6rem .75rem;font-weight:600;background:var(--callout);border:2px solid var(--callout-border);border-radius:.5rem}.callout{padding:.75rem;background:var(--callout);border:2px solid var(--callout-border);border-radius:.5rem}.callout p{margin:.25rem 0 0}.note{color:var(--muted);font-size:.95rem}.note.code code{font-size:.95em}.score{font-size:1.25rem;font-weight:700}.countdown{font-size:1.25rem;font-weight:700}.empty{color:var(--muted)}.progress-text{font-weight:600;margin-block-end:.4rem}.progress{display:block;inline-size:100%;block-size:.75rem;margin-block-end:1rem;accent-color:var(--accent)}.symbol-grid{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:.4rem;margin-block-end:1rem}.symbol-btn{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-block-size:48px;padding:.4rem;background:var(--bg);border:2px solid var(--border);border-radius:.6rem;cursor:pointer}.symbol-btn:hover{border-color:var(--ink)}.symbol-btn:active{background:var(--panel)}.symbol-btn .symbol{inline-size:100%;block-size:100%}.symbol-btn .key{position:absolute;inset-block-start:1px;inset-inline-start:4px;font-size:.75rem;font-weight:700;color:var(--muted)}.symbol{display:block}.symbol *{stroke:var(--ink);stroke-width:4;stroke-linejoin:round}.sym-0 *{fill:var(--sym-0)}.sym-1 *{fill:var(--sym-1)}.sym-2 *{fill:var(--sym-2)}.sym-3 *{fill:var(--sym-3)}.sym-4 *{fill:var(--sym-4)}.result-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;margin:0 0 1rem;padding:0;list-style:none}.cell{min-inline-size:0}.cell-visual{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.25rem .1rem;background:var(--bg);border-radius:.4rem;font-size:.75rem;line-height:1.2;text-align:center;overflow-wrap:anywhere}.cell-visual .symbol{inline-size:1.75rem;block-size:1.75rem}.cell-index{color:var(--muted)}.is-hit .cell-visual{border:3px solid var(--ink)}.is-hit .cell-mark{font-weight:800}.is-miss .cell-visual{border:1px dashed var(--border)}.is-miss .cell-mark{color:var(--muted)}details{margin-block:.75rem}summary{display:list-item;padding-block:.7rem;min-block-size:48px;cursor:pointer;font-weight:600}.tech dl{display:grid;gap:.15rem 1rem;margin:0}.tech dt{font-weight:600;margin-block-start:.5rem}.tech dd{margin:0;overflow-wrap:anywhere}.data-table{inline-size:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}.data-table caption{text-align:start;font-weight:600;padding-block-end:.4rem}.data-table th,.data-table td{padding:.35rem .5rem;text-align:start;border-block-end:1px solid var(--border)}.data-table thead th{border-block-end-width:2px}.chart-wrap{max-inline-size:28rem;margin-block:.5rem .75rem}.chart{display:block;inline-size:100%;block-size:auto;background:var(--bg);border-radius:.4rem}.chart text{fill:var(--ink);font-size:12px}.chart .chart-tick{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.chart .chart-label{paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}.chart-band{fill:var(--chart-band);stroke:var(--chart-band-edge);stroke-width:1}.chart-funnel{fill:var(--chart-funnel);stroke:var(--border);stroke-width:1}.chart-grid{stroke:var(--chart-grid);stroke-width:1}.chart-axis{stroke:var(--ink);stroke-width:1.5}.chart-bar{fill:var(--chart-bar);stroke:var(--ink);stroke-width:1}.chart-expected{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:5 4}.chart-line{fill:none;stroke:var(--chart-line);stroke-width:2.5;stroke-linejoin:round}.chart-dot{fill:var(--chart-line);stroke:var(--ink);stroke-width:1.5}.clear-control{margin-block-start:1.5rem}@media(min-width:30rem){.wrap{padding-inline:1.25rem}.panel{padding:1.25rem}.symbol-grid{gap:.6rem}.result-grid{gap:.5rem}.cell-visual{font-size:.8rem}.cell-visual .symbol{inline-size:2.25rem;block-size:2.25rem}h1{font-size:2.1rem}}@media(min-width:48rem){.result-grid{grid-template-columns:repeat(5,1fr);max-inline-size:30rem}}@media(prefers-reduced-motion:no-preference){.progress{transition:all .2s ease}.symbol-btn{transition:border-color .1s ease,background-color .1s ease}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}