:root{--bg: #1a1a2e;--bg2: #16213e;--bg3: #0f3460;--fg: #e0e0e0;--fg2: #999;--accent: #4fc3f7;--accent2: #e91e63;--green: #66bb6a;--yellow: #fdd835;--px0: #000000;--px1: #6d6d6d;--px2: #b2b2b2;--px3: #ffffff}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--fg);font-family:Segoe UI,system-ui,sans-serif;line-height:1.5;padding:16px;max-width:1200px;margin:0 auto}h1{font-size:1.4em;color:var(--accent);margin-bottom:4px}h1 span{color:var(--fg2);font-size:.7em;font-weight:400}.subtitle{color:var(--fg2);font-size:.9em;margin-bottom:16px}h2{font-size:1em;color:var(--accent);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.intro{background:var(--bg2);border-radius:8px;padding:14px;margin-bottom:16px;font-size:.9em;color:var(--fg2);border-left:3px solid var(--accent)}.intro strong{color:var(--fg)}.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);border-radius:8px;padding:10px 14px;margin-bottom:16px;position:sticky;top:0;z-index:100;box-shadow:0 4px 12px #00000080}.controls label{color:var(--fg2);font-size:.85em}.controls select{background:var(--bg3);color:var(--fg);border:1px solid #444;border-radius:4px;padding:4px 8px;font-size:.9em}.controls button{background:var(--bg3);color:var(--fg);border:1px solid #555;border-radius:4px;padding:5px 12px;cursor:pointer;font-size:.9em;transition:background .15s}.controls button:hover{background:var(--accent);color:#000}.controls button:disabled{opacity:.4;cursor:default}.controls .step-counter{color:var(--accent);font-family:monospace;font-size:.95em;margin:0 4px}.controls .nav-group{display:flex;align-items:center;gap:4px}.controls .spacer{flex:1}.help-btn{background:var(--accent)!important;color:#000!important;font-weight:700;min-width:32px;border-radius:50%!important;font-size:1.1em!important;padding:2px 0!important}.file-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);border-radius:8px;padding:10px 14px;margin-top:-12px;margin-bottom:16px;border-top:1px solid #333}.file-controls label{color:var(--fg2);font-size:.85em}.file-controls input[type=file]{max-width:200px;font-size:.8em;color:var(--fg2)}.file-controls button{background:var(--bg3);color:var(--fg);border:1px solid #555;border-radius:4px;padding:5px 12px;cursor:pointer;font-size:.9em;transition:background .15s}.file-controls button:hover{background:var(--accent);color:#000}.file-controls button:disabled{opacity:.4;cursor:default}.file-controls .spacer{flex:1}.stats-bar{background:var(--bg2);border-radius:8px;padding:12px 14px;margin-bottom:16px}.stats-bar h2{margin-bottom:4px}.bar-row{display:flex;align-items:center;gap:10px;margin:4px 0;font-family:monospace;font-size:.82em}.bar-label{color:var(--fg2);min-width:90px;text-align:right}.bar-track{flex:1;height:22px;background:#0d0d1a;border-radius:4px;position:relative;overflow:hidden}.bar-fill{height:100%;border-radius:4px;transition:width .3s;min-width:2px}.bar-fill.uncompressed{background:linear-gradient(90deg,#555,#777)}.bar-fill.pp1-stream{background:linear-gradient(90deg,var(--accent),#29b6f6)}.bar-fill.consumed{background:linear-gradient(90deg,var(--green),#43a047)}.bar-value{color:var(--fg2);margin-left:8px;min-width:80px}.stats-summary{font-family:monospace;font-size:.82em;color:var(--fg2);margin-top:6px;text-align:center}.main{display:grid;grid-template-columns:1fr 320px;gap:16px}@media(max-width:800px){.main{grid-template-columns:1fr}}.panel{background:var(--bg2);border-radius:8px;padding:12px}.bitstream-hex{font-family:JetBrains Mono,Fira Code,monospace;font-size:.8em;line-height:1.7;word-break:break-all;max-height:180px;overflow-y:auto;padding:8px;background:#0d0d1a;border-radius:4px;white-space:pre-wrap}.bitstream-hex .byte-consumed{color:#555;padding:1px 2px;border-radius:2px}.bitstream-hex .byte-current{background:var(--accent);color:#000;font-weight:700;padding:1px 2px;border-radius:2px}.bitstream-hex .byte-future{color:var(--fg2);padding:1px 2px;border-radius:2px}.bitstream-hex .byte-unused{color:#422;text-decoration:line-through;text-decoration-color:#633;padding:1px 2px}.bit-detail{font-family:monospace;font-size:.95em;margin-top:8px;padding:8px;background:#0d0d1a;border-radius:4px}.bit-detail .bit-consumed{color:#555}.bit-detail .bit-current{color:var(--yellow);font-weight:700}.bit-detail .bit-future{color:var(--fg2)}.tile-area{text-align:center}.current-tile-grid{display:inline-grid;grid-template-columns:repeat(8,28px);grid-template-rows:repeat(8,28px);gap:1px;background:#333;border:2px solid #555;border-radius:4px;margin:8px auto}.current-tile-grid .px{transition:background-color .15s;position:relative}.current-tile-grid .px.unfilled{background:#222!important}.current-tile-grid .px.highlight{outline:2px solid var(--yellow);outline-offset:-2px;z-index:1}.current-tile-grid .px.scanline-hl{outline:1px solid var(--accent);outline-offset:-1px}.bitplanes{margin-top:10px;padding:8px;background:#0d0d1a;border-radius:4px}.bp-layout{display:flex;gap:0;justify-content:center;align-items:flex-start}.bp-plus,.bp-equals{display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:1.2em;color:var(--fg2);padding:16px 6px 0}.bitplane-section{text-align:center}.bitplane-section h4{font-family:monospace;font-size:.9em;color:var(--fg2);margin-bottom:4px;font-weight:400}.bitplane-row{display:flex;align-items:center;gap:4px;font-family:monospace;font-size:.95em;line-height:1.7}.bitplane-row.highlight-row{background:#ffff001a;border-radius:2px}.bitplane-row .bp-idx{color:#555;min-width:24px;text-align:right;padding-right:2px}.bitplane-row .bp-bits{letter-spacing:1px}.bitplane-row .bp-hex{color:var(--fg2);min-width:20px;text-align:left;padding-left:2px}.bitplane-row .bp-bits .bit-on-0{color:#29b6f6}.bitplane-row .bp-bits .bit-on-1{color:#ef5350}.bitplane-row .bp-bits .bit-off{color:#333}.bitplane-row .bp-bits .bit-unfilled{color:#1a1a1a}.bitplane-row .bp-bits .cpx-0{color:#333}.bitplane-row .bp-bits .cpx-1{color:#29b6f6}.bitplane-row .bp-bits .cpx-2{color:#ef5350}.bitplane-row .bp-bits .cpx-3{color:#fff}.bp-explanation{font-family:monospace;font-size:.85em;color:var(--fg2);text-align:center;margin-top:6px;line-height:1.4}.bp-explanation .c0{color:#555}.bp-explanation .c1{color:#29b6f6}.bp-explanation .c2{color:#ef5350}.bp-explanation .c3{color:#d0d0d0}.prediction-table{font-family:monospace;font-size:.85em;width:100%;border-collapse:collapse;margin-bottom:8px}.prediction-table th,.prediction-table td{padding:3px 8px;text-align:center;border-bottom:1px solid #333}.prediction-table th{color:var(--accent);font-weight:400}.prediction-table tr.highlight-col{background:#4fc3f726}.prediction-table .type-0{display:inline-block;padding:0 6px;border-radius:3px;font-weight:700;background:#333}.prediction-table .type-1{display:inline-block;padding:0 6px;border-radius:3px;font-weight:700;background:#1b5e20}.prediction-table .type-2{display:inline-block;padding:0 6px;border-radius:3px;font-weight:700;background:#e65100}.prediction-table .type-3{display:inline-block;padding:0 6px;border-radius:3px;font-weight:700;background:#880e4f}.lookup-ref{font-family:monospace;font-size:.75em;color:var(--fg2);margin-top:10px;padding:6px;background:#0d0d1a;border-radius:4px;line-height:1.5}.completed-tiles{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;justify-content:center}.completed-tiles canvas{border:1px solid #444;border-radius:2px;image-rendering:pixelated}.comparison-table{font-family:JetBrains Mono,Fira Code,monospace;font-size:.78em;line-height:1.6;max-height:200px;overflow-y:auto;padding:8px;background:#0d0d1a;border-radius:4px;width:100%;border-collapse:collapse}.comparison-table th,.comparison-table td{padding:2px 4px;text-align:left;border-bottom:1px solid #1a1a2e;white-space:nowrap}.comparison-table th{color:var(--fg2);font-weight:400;font-size:.9em}.comparison-table .current-tile-row{background:#4fc3f714}.comparison-table .match{color:var(--green)}.comparison-table .mismatch{color:var(--fg2);opacity:.25}.step-details{padding:0}.step-details .step-title{color:var(--accent);font-weight:700;font-size:1.05em}.step-details .step-desc{font-family:monospace;font-size:.85em;line-height:1.6;white-space:pre-wrap;max-height:300px;overflow-y:auto;padding:8px;background:#0d0d1a;border-radius:4px}.step-details .step-desc .val-bits{color:var(--yellow)}.step-details .step-desc .val-num,.step-details .step-desc .val-hex{color:var(--green)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#555}