:root{color-scheme:light;--paper:#f4f3ed;--card:#fffef9;--ink:#203b43;--muted:#5c6d70;--line:#d9dfd7;--green:#dce9d7;--accent:#da713e;--orange:#ffe3ca;--focus:#215965}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 system-ui,sans-serif}button,textarea,input{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer;min-height:42px;border:1px solid #b7c5c0;background:var(--card);color:var(--ink);border-radius:7px;padding:9px 13px;font-weight:600}button:hover:not(:disabled){background:#eaf0e6}button:disabled{opacity:.48;cursor:default}.primary{color:#fff;background:var(--ink);border-color:var(--ink)}.primary:hover:not(:disabled){background:#31545c}.quiet{background:transparent;border-color:transparent}a{color:inherit;text-underline-offset:3px}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}[hidden]{display:none!important}main{max-width:1180px;margin:auto;padding:28px 28px 0}header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:22px}.wordmark{font-weight:750;letter-spacing:-.6px;text-decoration:none;font-size:21px}.wordmark span{color:var(--accent);font-size:26px}.badge,.smallcaps{font-size:10px;letter-spacing:1.5px;font-weight:700;color:var(--muted)}.intro{display:grid;grid-template-columns:1fr .85fr;gap:60px;align-items:center;padding:34px 0}h1{font:500 clamp(30px,4vw,49px)/1.12 Georgia,serif;letter-spacing:-1.4px;margin:0 0 12px}.intro>div>p{margin:0;max-width:430px;color:var(--muted)}.rule{border-left:3px solid var(--accent);padding:12px 0 12px 22px}.rule strong{display:block;font-size:clamp(14px,1.7vw,18px);margin:9px 0;white-space:nowrap}.rule strong span{color:var(--accent);margin:0 5px}.rule p{font-size:13px;color:var(--muted);margin:0;max-width:350px}.input-card,.tree-card,.result-card{border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:18px;overflow:hidden}.input-card,.result-card{padding:20px 24px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}h2{margin:0;font-size:16px;font-weight:700}h2>span{color:#73847f;font:12px ui-monospace,monospace;margin-right:10px}.section-head>span,.section-head>p{font-size:12px;color:var(--muted);margin:0}textarea{display:block;width:100%;resize:vertical;min-height:90px;border:1px solid #bdc9c3;border-radius:7px;background:#fafbf7;color:var(--ink);padding:12px 14px;font:17px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4}#input{min-height:100px}.input-bottom,.result-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:12px}.input-bottom p,.result-bottom p{font-size:12px;color:var(--muted);margin:0}.actions{display:flex;gap:8px;flex-shrink:0}#error{color:#9e3324;margin-bottom:0}.tree-head{padding:18px 24px 0}.toolbar{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:0 20px 15px;flex-wrap:wrap}.walk-controls,.zoom-controls{display:flex;gap:6px;align-items:center}.zoom-controls{font-size:12px;color:var(--muted)}#zoom{width:105px;accent-color:var(--ink);min-height:32px}#zoom-value{width:36px;text-align:right;font-variant-numeric:tabular-nums}#viewport{height:390px;overflow:auto;position:relative;background-color:#f7f9f3;background-image:radial-gradient(#ced8ce .8px,transparent .8px);background-size:19px 19px;border-block:1px solid var(--line);display:grid;place-items:start center}#tree{display:block;flex-shrink:0;max-width:none;overflow:visible}#empty{align-self:center;justify-self:center;font-size:14px;padding:20px;color:var(--muted)}.edge{stroke:#a4b5ad;stroke-width:1.6;fill:none}.branch{fill:#637770;font:10px ui-monospace,monospace;paint-order:stroke;stroke:#f7f9f3;stroke-width:4px}.node circle{fill:#fffef9;stroke:#687e74;stroke-width:1.5}.node text{font:600 16px system-ui,sans-serif;fill:var(--ink);text-anchor:middle;dominant-baseline:central}.node .order{font:9px ui-monospace,monospace;fill:#667b71}.node.visited circle{fill:var(--green);stroke:#678364}.node.current circle{fill:var(--orange);stroke:#b14f23;stroke-width:2.5}.legend{display:flex;gap:20px;flex-wrap:wrap;padding:12px 24px;color:var(--muted);font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:50%;display:inline-block}.legend-current{background:var(--accent)}.legend-visited{background:#89a37d}details{border-top:1px solid var(--line);padding:0 24px;font-size:13px}summary{cursor:pointer;min-height:43px;padding:12px 0;font-weight:600}#node-list{max-height:250px;overflow:auto;font-family:ui-monospace,monospace;font-size:12px;padding-left:26px}#node-list li{margin:5px 0;overflow-wrap:anywhere}#walk-status{font-size:13px;color:var(--muted);margin:0 0 10px}#tokens{min-height:46px;display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:14px}#tokens>span{display:grid;place-items:center;min-width:26px;height:30px;padding:2px 4px;background:var(--green);border:1px solid #c6d4be;border-radius:4px;font:14px ui-monospace,monospace}#tokens>span:last-child{background:var(--orange);border-color:#dfad8c}.result-card label{display:block;font-size:12px;font-weight:650;margin:0 0 6px}#decoded{min-height:70px;font-size:15px}#match{font-size:12px;font-weight:650;color:#3d673f}#match.dirty{color:#8c5c20}.how{border:0;padding:0 2px;margin:2px 0 24px}.how>div{max-width:760px;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:18px 0 26px;font-size:11px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:800px){.intro{gap:24px;grid-template-columns:1fr 1fr}.input-bottom{align-items:start;flex-direction:column;gap:10px}.input-bottom .actions{align-self:flex-end}}@media(max-width:560px){main{padding:18px 15px 0}.badge{font-size:8px;letter-spacing:.7px}.wordmark{font-size:18px}.intro{grid-template-columns:1fr;padding:24px 0;gap:18px}h1{font-size:34px}.intro>div>p{font-size:13px}.rule{padding:6px 0 6px 14px}.rule strong{font-size:14px}.rule p{font-size:12px}.input-card,.result-card{padding:16px}.section-head{align-items:baseline}h2{font-size:14px}h2>span{margin-right:6px}.section-head>span,.section-head>p{font-size:10px}.actions{flex-wrap:wrap;justify-content:flex-end}.actions button{font-size:12px}.tree-head{padding:16px 16px 0}.toolbar{padding:0 12px 12px}.walk-controls{width:100%;justify-content:space-between;gap:2px}.walk-controls button{font-size:11px;padding:8px}.zoom-controls{margin-left:auto}#viewport{height:330px}.legend{padding:10px 16px;gap:8px 14px}.result-bottom{gap:10px}.result-bottom p{font-size:11px}details{padding-inline:16px}footer{flex-direction:column;gap:6px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}