.tn{--panel:var(--bg-raised);--dim:var(--ink-soft);--off:color-mix(in srgb, var(--ink-soft) 16%, var(--bg));--lamp:var(--accent);--lamp-ink:var(--bg);--lamp-glow:color-mix(in srgb, var(--accent) 55%, transparent);--eps:var(--ink);--ok:light-dark(#1a7f37,#3fb950);--bad:light-dark(#cf222e,#f85149);--paper:#ece1c2;--paper-edge:#d9cba3;--paper-ink:#3a3326;--hole:light-dark(#2a3239,var(--bg));max-width:70rem;margin:0 auto;padding:0 1.5rem 4rem}.tn code,.tn kbd{font-family:var(--font-mono);font-size:.88em}.tn button,.tn input{font:inherit;color:inherit}.tn-intro{max-width:var(--measure);padding:3rem 0 1.5rem}.tn-intro h1{margin:.3rem 0 .8rem;font-size:2rem}.tn-lede{color:var(--ink-soft);margin:0}.tn-machine{background:var(--panel);border:1px solid var(--line);border-radius:6px;grid-template-columns:minmax(0,1fr);gap:16px;padding:18px;scroll-margin-top:1rem;display:grid}.tn .fields{grid-template-columns:1.35fr 1fr;gap:14px;display:grid}.tn .field label{font:500 .78rem/1 var(--font-mono);color:var(--dim);margin-bottom:8px;display:block}.tn .field .box{background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius);align-items:center;padding:0 12px;display:flex}.tn .field .box:focus-within{border-color:var(--lamp)}.tn .field .box span{font:500 20px var(--font-mono);color:var(--dim)}.tn .field input{min-width:0;font:500 19px/1 var(--font-mono);background:0 0;border:0;outline:none;flex:1;padding:12px 4px}.tn .field input[aria-invalid=true]{color:var(--bad)}.tn .error{font:13px/1.5 var(--font-mono);color:var(--bad);white-space:pre;margin-top:8px;overflow-x:auto}.tn .error:empty{display:none}.tn .presets{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.tn .presets>span{font:13px var(--font-mono);color:var(--dim);margin-right:4px}.tn .preset{border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;text-align:left;background:0 0;padding:5px 10px;line-height:1.3}.tn .preset:hover{border-color:var(--accent)}.tn .preset code{font-size:13px}.tn .preset small{color:var(--dim);font:12px var(--font-mono);display:block}.tn .graph{background-color:var(--bg);background-image:radial-gradient(var(--line) 1px, transparent 1.2px);background-size:18px 18px;border-radius:6px;align-items:center;min-height:180px;display:flex;position:relative;overflow:auto}.tn .graph svg{flex:none;margin:0 auto;display:block}.tn .graph.stale svg{opacity:.3}.tn .edge{fill:none;stroke:var(--dim);stroke-width:1.4px}.tn .edge.eps{stroke-dasharray:4 4;stroke-width:1.15px}.tn .edge.hot{stroke:var(--lamp);stroke-width:2.6px;stroke-dasharray:none}.tn .edge.flow{stroke:var(--eps);stroke-width:1.8px}.tn .arrowhead{fill:var(--dim)}.tn .arrowhead.hot{fill:var(--lamp)}.tn .arrowhead.flow{fill:var(--eps)}.tn .elabel rect{fill:var(--panel);stroke:var(--line)}.tn .elabel text{font:500 12px var(--font-mono);fill:var(--ink);text-anchor:middle;dominant-baseline:central}.tn .elabel.hot rect{stroke:var(--lamp);fill:var(--lamp)}.tn .elabel.hot text{fill:var(--lamp-ink)}.tn .state .body{fill:var(--off);stroke:var(--dim);stroke-width:1.4px;transition:fill .15s,stroke .15s}.tn .state .ring{fill:none;stroke:var(--dim);stroke-width:1.2px}.tn .state text{font:500 11px var(--font-mono);fill:var(--dim);text-anchor:middle;dominant-baseline:central;pointer-events:none}.tn .state.junction text{font-size:9px}.tn .state .halo{fill:var(--lamp-glow);opacity:0;transition:opacity .2s}.tn .state.was .body{fill:color-mix(in srgb, var(--lamp) 30%, var(--off));stroke:color-mix(in srgb, var(--lamp) 60%, var(--dim))}.tn .state.on .body{fill:var(--lamp);stroke:var(--lamp)}.tn .state.on text{fill:var(--lamp-ink);font-weight:600}.tn .state.on .ring{stroke:var(--lamp-ink)}.tn .state.on .halo{opacity:1}.tn .state.win .body{fill:var(--ok);stroke:var(--ok)}.tn .state.win .halo{fill:color-mix(in srgb, var(--ok) 55%, transparent)}.tn .start-arrow{stroke:var(--ink);stroke-width:1.6px}.tn .pulse{fill:var(--lamp)}.tn .pulse.flow{fill:var(--eps)}.tn .mini .state text{display:none}.tn .tape-window{background:var(--bg);border-radius:6px;height:128px;position:relative;overflow:hidden;mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000)}.tn .tape{background:var(--paper);border-top:1px solid var(--paper-edge);border-bottom:1px solid var(--paper-edge);height:100px;transition:transform .32s cubic-bezier(.3,.7,.3,1);display:flex;position:absolute;top:14px;left:0}.tn .frame{cursor:pointer;flex-direction:column;flex:none;align-items:center;gap:2px;width:38px;padding-top:7px;display:flex;position:relative}.tn .frame.leader{cursor:default}.tn .hole{border-radius:50%;width:7px;height:7px}.tn .hole.punched{background:var(--hole)}.tn .hole.feed{background:var(--hole);width:4px;height:4px;margin:1.5px 0}.tn .glyph{font:600 15px/1 var(--font-mono);color:var(--paper-ink);opacity:.35;height:16px;margin-top:6px}.tn .frame.read .glyph{opacity:.9}.tn .frame.read{background:#0000000d}.tn .frame.current .glyph{opacity:1}.tn .frame.skipped .glyph{opacity:.3;text-decoration:line-through}.tn .head{border:2px solid var(--lamp);pointer-events:none;border-radius:5px;width:46px;margin-left:-23px;position:absolute;top:6px;bottom:6px;left:50%}.tn .controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tn .btn{cursor:pointer;font:500 .8rem/1 var(--font-mono);border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--bg);align-items:center;gap:7px;padding:9px 12px;display:inline-flex}.tn .btn:hover:not(:disabled){border-color:var(--accent)}.tn .btn:disabled{opacity:.4;cursor:default}.tn .btn svg{fill:currentColor;width:12px;height:12px}.tn .btn.primary{background:var(--lamp);border-color:var(--lamp);color:var(--lamp-ink);min-width:92px;font-weight:600}.tn .btn.primary:hover:not(:disabled){filter:brightness(1.12)}.tn .speed{font:.8rem var(--font-mono);color:var(--dim);align-items:center;gap:8px;margin-left:6px;display:inline-flex}.tn .speed input{width:96px;accent-color:var(--lamp)}.tn .verdict{font:600 .85rem var(--font-mono);align-items:center;gap:9px;margin-left:auto;display:inline-flex}.tn .verdict i{background:var(--off);border:1px solid var(--line);border-radius:50%;width:14px;height:14px;display:inline-block}.tn .verdict.match i{background:var(--ok);border-color:var(--ok);box-shadow:0 0 10px var(--ok)}.tn .verdict.nomatch i{background:var(--bad);border-color:var(--bad);box-shadow:0 0 10px var(--bad)}.tn .verdict.match{color:var(--ok)}.tn .verdict.nomatch{color:var(--bad)}.tn .verdict.idle{color:var(--dim);font-weight:500}.tn .readout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:18px;display:grid}.tn .narration{max-width:60ch;min-height:5.5em;margin:0;font-size:1rem;line-height:1.65}.tn .narration code{background:var(--bg);border-radius:var(--radius);padding:1px 5px}.tn .log-title{font:500 .78rem var(--font-mono);color:var(--dim);margin:0 0 8px}.tn .log{max-height:250px;position:relative;overflow:auto}.tn .log-grid{font:10px/12px var(--font-mono);gap:2px;width:max-content;display:grid;position:relative}.tn .log-grid .lbl{color:var(--dim);text-align:right;padding-right:6px}.tn .log-grid .lbl.cons{color:var(--ink)}.tn .log-grid .hd{text-align:center;color:var(--dim)}.tn .log-grid .c{background:var(--off);cursor:pointer;border-radius:2px;width:12px;height:12px}.tn .log-grid .c.on{background:var(--lamp)}.tn .log-grid .c.acc.on{background:var(--ok)}.tn .log-cursor{border:1px solid var(--ink);pointer-events:none;border-radius:3px;width:14px;margin-left:-1px;position:absolute;top:0;bottom:0}.tn .log-future{background:var(--panel);opacity:.82;pointer-events:none;position:absolute;top:0;bottom:0;right:0}.tn .legend{font:.75rem var(--font-mono);color:var(--dim);flex-wrap:wrap;gap:18px;display:flex}.tn .legend span{align-items:center;gap:7px;display:inline-flex}.tn .legend svg{overflow:visible}.tn-article{max-width:var(--measure);margin-top:3.5rem}.tn-article h2{margin:2.4em 0 .7em;font-size:1.4rem}.tn-article h2:first-child{margin-top:0}.tn-article p{margin:0 0 1.2em}.tn-article p code{background:var(--bg-raised);border-radius:var(--radius);padding:.15em .4em}.tn-article pre{background:var(--bg-raised);border:1px solid var(--line);tab-size:4;border-radius:6px;margin:0 0 1.2em;padding:1rem 1.1rem;font-size:.85rem;line-height:1.55;overflow-x:auto}.tn .figs{width:min(var(--measure-wide), calc(100vw - 3rem));grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;margin:1.5rem 0 2rem;display:grid}.tn .figs figure{margin:0}.tn .figs .graph{background-size:14px 14px;min-height:110px}.tn .figs figcaption{color:var(--dim);margin-top:8px;font-size:.9rem;line-height:1.5}.tn .figs figcaption code{color:var(--ink)}.tn .inline-btn{font:500 .85rem var(--font-mono);border:1px solid var(--lamp);color:var(--ink);border-radius:var(--radius);cursor:pointer;background:0 0;padding:6px 12px}.tn .inline-btn:hover{background:var(--accent-bg)}.tn-engine{border-top:1px solid var(--line);font:.78rem/1.6 var(--font-mono);color:var(--ink-faint);margin:3rem 0 0;padding-top:1rem}@media (width<=760px){.tn{padding:0 1rem 3rem}.tn-intro{padding-top:2rem}.tn .fields,.tn .readout{grid-template-columns:1fr}.tn .figs{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.tn-machine{padding:14px}.tn .presets{flex-wrap:nowrap;padding-bottom:4px;overflow-x:auto}.tn .preset{flex:none}.tn .verdict{width:100%;margin-left:0}.tn .speed{margin-left:0}}@media (prefers-reduced-motion:reduce){.tn .tape,.tn .state .body,.tn .state .halo{transition:none}}