:root{--navy:#0b3b8f;--blue:#155eef;--soft:#eef6ff;--orange:#f97316;--ink:#101b3d;--body:#334155;--muted:#536378;--bg:#f8fafc;--surface:#fff;--border:#d8e1ed;--radius:12px;--font:Inter,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--body);font:16px/1.6 var(--font)}::selection{background:#cfe1ff;color:var(--ink)}a{color:var(--navy);text-underline-offset:3px}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}input{caret-color:var(--blue)}:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:focus-visible{position:relative;z-index:1}h1,h2,h3,p{margin:0}h1,h2,h3{color:var(--ink);line-height:1.2}h1{font-size:clamp(2.2rem,5vw,3.25rem);letter-spacing:-.035em}h2{font-size:1.45rem;letter-spacing:-.02em}h3{font-size:1.05rem}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}.wrap{max-width:1200px;padding:0 28px;margin:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}[hidden]{display:none!important}.skip{position:absolute;top:-80px;left:20px;background:white;padding:12px;z-index:5}.skip:focus{top:10px}
header{background:var(--navy);color:white}.header-inner{height:78px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;gap:12px;align-items:center;font-weight:800;line-height:1.35;text-decoration:none;color:white}.brand svg{width:37px;height:37px}.brand-sub{display:block;color:#dce9ff;font-size:12px;font-weight:400;margin-top:3px}.back{color:white;text-decoration:none;font-size:14px}.back span{margin-left:8px}header :focus-visible{outline-color:white}.intro{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:48px 0 32px}.intro p{margin-top:16px;font-size:17px;line-height:1.6}.intro .privacy{display:flex;align-items:center;gap:12px;margin:0;font-size:14px;color:var(--navy)}.privacy small{color:var(--muted);font-size:12px}.privacy svg{width:29px;height:29px}.toolbar{display:flex;align-items:center;gap:20px;margin:0 0 18px}.toolbar>p{font-size:13px;flex:1;color:var(--muted)}.mode{border:0;margin:0;padding:4px;background:#e7edf5;display:flex;border-radius:8px}.mode label{position:relative;cursor:pointer}.mode input{position:absolute;opacity:0;width:1px;height:1px}.mode span{display:block;padding:7px 17px;border-radius:5px;font-weight:650;font-size:14px}.mode input:checked+span{background:white;color:var(--navy);box-shadow:0 2px 4px #10254812}.mode input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}.quiet{border:0;background:transparent;color:var(--navy);padding:8px 0;text-decoration:underline;text-underline-offset:4px;font-size:14px}
.comparison{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.password-grid{display:grid;grid-template-columns:1fr 1fr}.password-pane{padding:28px 30px;min-width:0}.password-pane+.password-pane{border-left:1px solid var(--border)}.input-label{display:flex;gap:10px;align-items:center;font-size:18px;font-weight:750;color:var(--ink);margin-bottom:14px}.letter{background:var(--navy);color:white;font-size:14px;display:inline-grid;place-items:center;width:29px;height:29px;border-radius:6px}.pane-b .letter{background:#b34406}.password-input{display:flex;border:1px solid #a7b6c9;border-radius:8px;overflow:hidden}.password-input:focus-within{outline:3px solid var(--blue);outline-offset:3px}.password-input input{width:100%;min-width:0;border:0;outline:none;padding:13px 14px;background:white;color:var(--ink);font-size:18px}.password-input button{border:0;border-left:1px solid var(--border);background:#f3f6fa;color:var(--navy);padding:0 14px;font-size:13px;font-weight:650}.password-input button:hover{background:var(--soft)}input::placeholder{color:#65758a;opacity:1}.meta{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin:12px 0 20px;font-size:12px;color:var(--muted)}.classes{display:flex;gap:8px;flex-wrap:wrap}.class-flag{color:var(--muted)}.class-flag.active{color:var(--navy);font-weight:750;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.time-label{font-size:13px;color:var(--muted)}.time{color:var(--navy);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:760;line-height:1.16;letter-spacing:-.035em;margin:10px 0 9px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.pane-b .time{color:#a84008}.result-note{font-size:13px;min-height:42px}.technical-stats{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}dl{margin:0}dl>div{display:flex;justify-content:space-between;gap:20px;margin-bottom:7px;font-size:13px}dt{color:var(--muted)}dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}.exact{display:block!important}.exact dd{max-height:100px;overflow:auto;text-align:left;font:12px/1.5 ui-monospace,monospace;word-break:break-all;margin-top:8px;padding:9px;background:var(--bg);scrollbar-color:#a3b8d7 var(--bg)}
.scenario{background:#f4f7fb;padding:20px 30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;border-top:1px solid var(--border)}.scenario label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}.scenario select,.scenario input{border:1px solid #a7b6c9;background:white;border-radius:6px;padding:9px;color:var(--ink);font-size:14px;max-width:100%}.scenario select{width:330px}.custom-rate{max-width:230px}.custom-rate input{width:100%}.scenario-note{font-size:12px;max-width:42ch;flex:1;min-width:220px}.error{font-size:12px;color:#a32222;margin-top:6px}.verdict{padding:24px 30px;background:var(--soft);border-top:1px solid var(--border)}.verdict h2{font-size:14px;color:var(--navy);margin-bottom:8px}.verdict>p:not(.fine){font-size:19px;font-weight:650;line-height:1.5;color:var(--ink);max-width:78ch}.fine{font-size:12px;color:var(--muted);line-height:1.6}.verdict .fine{margin-top:8px}
.examples{padding:24px 0 34px}.examples h2{font-size:14px;margin-bottom:12px}.example-buttons{display:flex;gap:10px;flex-wrap:wrap}.example-buttons button{border:1px solid var(--border);border-radius:7px;background:white;color:var(--navy);font-size:13px;padding:9px 13px;text-align:left}.example-buttons button:hover{border-color:var(--blue);background:var(--soft)}.example-buttons span{margin-left:14px}.examples>.fine{margin-top:10px}.patterns{border-top:1px solid var(--border);padding-top:30px}.section-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}.tag{color:var(--muted);font-size:12px;border:1px solid var(--border);padding:3px 9px;border-radius:5px}.patterns>p:not(.notice){max-width:80ch;font-size:14px}.pattern-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:22px 0}.pattern-grid>div{min-width:0}.pattern-grid h3{font-size:13px;color:var(--muted);margin-bottom:7px}.pattern-result{font-size:16px;color:var(--ink);font-weight:600}.pattern-grid .fine{margin-top:5px}.notice{background:#fff5e9;color:#743706;padding:16px 20px;font-size:13px;border-radius:8px}.learn{margin-top:48px}.lessons{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;margin-top:24px}.lessons p{font-size:14px;margin-top:9px;max-width:70ch}.method{margin-top:36px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0}.method summary{cursor:pointer;color:var(--navy);font-weight:650;font-size:14px}.method>div{padding-top:14px;max-width:80ch}.method p{font-size:13px;margin-bottom:12px}code{font-family:ui-monospace,monospace}footer{display:flex;justify-content:space-between;gap:20px;margin-top:28px!important;margin-bottom:30px!important;font-size:12px;color:var(--muted)}
@media(max-width:780px){.wrap{padding:0 20px}.intro{display:block;padding-top:30px}.intro .privacy{margin-top:20px}.intro p{font-size:15px}.toolbar{flex-wrap:wrap;gap:12px}.toolbar>p{order:3;flex-basis:100%}.toolbar>.quiet{margin-left:auto}.password-pane{padding:22px 20px}.password-grid{grid-template-columns:1fr}.password-pane+.password-pane{border-left:0;border-top:1px solid var(--border)}.meta{margin-bottom:16px}.time{font-size:32px}.result-note{min-height:0}.scenario{padding:20px}.scenario>div,.scenario select{width:100%}.custom-rate{max-width:none}.verdict{padding:22px 20px}.verdict>p:not(.fine){font-size:17px}.pattern-grid,.lessons{grid-template-columns:1fr;gap:24px}.section-heading{gap:10px}.learn{margin-top:36px}.brand-sub{font-size:11px}.header-inner{height:70px}.back{font-size:12px}.brand{font-size:14px;gap:8px}.brand svg{width:28px}.example-buttons{flex-direction:column}.example-buttons button{display:flex;justify-content:space-between}.intro br{display:none}.privacy br{display:block}footer{flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}