:root{--ink:#1d2230;--muted:#5d6475;--line:#d5d9e2;--bg:#f7f8fb;--card:#fff;--accent:#2f6fdf;--flash:#ffd84d}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;padding:24px 16px 48px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}main{max-width:1600px;margin:0 auto}.layout{grid-template-columns:minmax(0,1fr) minmax(360px,460px);align-items:start;gap:20px;display:grid}.layout>.content{grid-area:1/1}.layout>.controls{grid-area:1/2}@media (width<=1100px){.layout{grid-template-columns:1fr}.layout>.content,.layout>.controls{grid-area:auto}.layout>.controls{max-height:none;position:static}}@media print{.layout{display:block}}.back{margin:0 0 8px}a{color:var(--accent);text-decoration:none}a:hover{color:#1d4fb0}h1{margin:0 0 4px;font-size:32px}.subtitle{color:var(--muted);margin:0 0 16px;font-size:18px}.legend{margin:0 0 16px;font-size:18px}.legend b{white-space:nowrap}.controls{flex-direction:column;gap:16px;max-height:calc(100vh - 32px);display:flex;position:sticky;top:16px;overflow-y:auto}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}.card h2{color:var(--muted);margin:0 0 12px;font-size:18px;font-weight:600}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}button{font:inherit;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:8px;padding:8px 14px;font-size:16px}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button:disabled{opacity:.4;cursor:default}.wire-count{text-align:center;min-width:2ch;font-size:28px;font-weight:700}.info{color:var(--muted);margin:10px 0 0;font-size:15px}#typeInput{border:2px solid var(--line);border-radius:10px;width:100%;padding:10px 14px;font-size:24px}#typeInput:focus{border-color:var(--accent);outline:none}.leds{background:#0f1218;border-radius:12px;margin:14px 0 6px;padding:14px 18px 10px}.now{flex-wrap:wrap;align-items:baseline;gap:16px;margin-top:8px;display:flex}.now .sym{min-width:1.2em;font-size:40px;font-weight:700}.now .bin{letter-spacing:2px;font-family:ui-monospace,Menlo,monospace;font-size:26px}.msg{color:#b23b3b;min-height:1.4em;font-size:15px}.sent{background:var(--bg);word-break:break-all;white-space:pre-wrap;border-radius:8px;min-height:2.4em;padding:8px 10px;font-family:ui-monospace,Menlo,monospace;font-size:16px}textarea{width:100%;font:inherit;border:1px solid var(--line);resize:vertical;border-radius:8px;padding:8px 10px;font-size:16px}.play-text{word-break:break-word;margin-top:10px;font-size:18px;line-height:1.6}.play-text span.done{color:#9aa0ad}.play-text span.cur{background:var(--flash);border-radius:4px;outline:2px solid #e0b400}.play-text span.skip{color:#c77;text-decoration:line-through}.play-settings label{white-space:nowrap}input[type=number]{width:80px;font:inherit;border:1px solid var(--line);border-radius:8px;padding:6px}details>summary{cursor:pointer;color:var(--muted);font-weight:600}.tables{flex-wrap:wrap;align-items:flex-start;gap:20px;display:flex}table{border-collapse:collapse;background:var(--card);font-size:20px}th,td{border:1px solid var(--line);text-align:center;padding:4px 8px}th.wire{color:#fff;width:96px;min-width:96px;font-size:14px;line-height:1.2}th.wire small{opacity:.9;font-weight:400;display:block}th.wire.light{color:#222}th.wire.virt{background-image:repeating-linear-gradient(45deg,#ffffff2e 0 6px,#0000 6px 12px)}td.bit{padding:2px 6px;font-size:18px}td.bin{letter-spacing:1px;font-family:ui-monospace,Menlo,monospace}td.sym{text-align:left;min-width:70px;font-size:24px;font-weight:700}td.sym small{color:var(--muted);font-size:14px;font-weight:400}td.dec{color:var(--muted);font-size:15px}tbody tr{cursor:pointer}tbody tr:hover td{background:#eef3ff}tbody tr.zero td,tbody tr.zero:hover td{color:var(--muted);cursor:default;background:var(--bg)}tr.zero td.sym{font-size:18px}tr.free td{color:var(--muted);cursor:default;background:var(--bg);font-style:italic}tr.flash td{animation:5s ease-out flash}@keyframes flash{0%{background:var(--flash)}60%{background:#fea}to{background:0 0}}.note{color:var(--muted);margin-top:16px;font-size:16px}.decode{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-top:24px;padding:12px 16px}.decode>summary{font-size:18px}.decode-body{margin-top:12px}.decode h2{margin:0 0 4px}.decode p.hint{color:var(--muted);font-size:14px}.boxes{grid-template-columns:repeat(10,1fr);gap:3px;display:grid}.box{border:1px solid #999;border-radius:5px;flex-direction:column;min-width:0;padding:3px 3px 0;display:flex}.box .bits{justify-content:center;gap:2px;display:flex}.box .bits span{aspect-ratio:1;border:2px solid var(--c);border-radius:2px;flex:0 9px;min-width:0}.box .letter{flex:1;min-height:24px;margin:2px 4px}.box .idx{color:#999;text-align:right;font-size:8px}.print-only{display:none}.print-leds{--s:27px;width:max-content;margin:8px auto 0;padding:10px 14px 8px}@media print{@page{size:A4 portrait;margin:10mm}body{background:#fff;padding:0}.screen-only{display:none!important}.print-only{display:block}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}h1{font-size:18pt}.subtitle,.legend{margin-bottom:6px;font-size:11pt}.tables{gap:8px}table{width:100%;font-size:11pt}th,td{padding:0 5px;line-height:1.25}th.wire{width:12%;min-width:0;font-size:9pt}td.bit{font-size:11pt}td.sym{font-size:14pt}td.sym small{font-size:9pt}td.dec{font-size:10pt}tr.flash td{animation:none}.note{margin-top:6px;font-size:10pt}.decode{border:0;margin:0;padding:0}.decode>summary{display:none}body.with-decode .decode{break-before:page}.decode-body{flex-direction:column;height:275mm;margin:0;padding-right:1px;display:flex}.boxes{flex:1;grid-template-rows:repeat(14,minmax(0,1fr));min-height:0}.box{overflow:hidden}body:not(.with-decode) .decode{display:none}.decode h2{margin:0 0 4px;font-size:16pt}.decode p{margin:0 0 8px;font-size:10pt}.decode p.hint{font-size:8pt}}.panel{width:max-content;padding-left:calc(var(--s) * .9);flex-direction:column;align-items:center;margin:0 auto;display:flex;position:relative}.bus,.cable{height:calc(var(--s) * .16);margin-left:calc(var(--s) * -.65);border-radius:999px;align-self:stretch}.term{z-index:2;box-sizing:border-box;width:calc(var(--s) * .5);height:calc(var(--s) * .5);border:calc(var(--s) * .05) solid var(--c);background:#1a1d25;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;left:0}.term:before,.term.plus:after{content:"";width:calc(var(--s) * .24);height:calc(var(--s) * .06);background:var(--c);border-radius:999px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.term.plus:after{width:calc(var(--s) * .06);height:calc(var(--s) * .24)}.term.minus{--c:#6b7285;top:calc(var(--s) * -.17)}.term.plus{--c:#b9bfcc;bottom:calc(var(--s) * -.17)}.source{left:calc(var(--s) * -.1);width:calc(var(--s) * .7);text-align:center;font:700 calc(var(--s) * .24) / 1.3 system-ui, sans-serif;color:#8a91a3;position:absolute;top:50%;transform:translateY(-50%)}.bus{background:#6b7285}.cable{margin-top:calc(var(--s) * -.1);background:#b9bfcc;box-shadow:inset 0 2px #ffffff40}.led-row{gap:calc(var(--s) * .3);padding:0 calc(var(--s) * .25);display:flex}.slot{width:var(--s);flex-direction:column;align-items:center;display:flex}.lead-top{width:calc(var(--s) * .13);height:calc(var(--s) * .4);background:#6b7285}.led{width:var(--s);height:var(--s);box-sizing:border-box;background:color-mix(in srgb, var(--c) 22%, #0f1218);border:calc(var(--s) * .06) solid color-mix(in srgb, color-mix(in srgb, var(--c), #fff 35%) 75%, transparent);font:400 calc(var(--s) * .25) system-ui, sans-serif;color:#aab0be1f;border-radius:50%;justify-content:center;align-items:center;transition:background 80ms,border-color 80ms,box-shadow 80ms;display:flex}.lead{--b:calc(var(--s) * .04 - 1px);width:calc(var(--s) * .13 - 2 * var(--b));height:calc(var(--s) * .6);background:var(--c);box-shadow:0 0 0 var(--b) #fff;z-index:1;transform-origin:50% calc(100% - var(--s) * .065);border-radius:999px;transition:transform .15s;position:relative;transform:rotate(-45deg)}.slot.on .led{background:var(--c);filter:brightness(1.2)saturate(1.25);color:color-mix(in srgb, color-mix(in srgb, var(--c), #fff 35%) 75%, transparent);text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000;box-shadow:inset 0 0 calc(var(--s) * .22) #fffc, 0 0 calc(var(--s) * .3) var(--c), 0 0 calc(var(--s) * .65) var(--c);border-color:#fff;font-weight:700}.slot.on .lead{transform:none}
