.compression-demo{--cd-bg: var(--sl-color-bg);--cd-bg2: var(--sl-color-bg-nav);--cd-border: var(--sl-color-hairline);--cd-text: var(--sl-color-text);--cd-text-dim: var(--sl-color-text-badge);--cd-accent: var(--sl-color-text-accent);--cd-green: #16a34a;--cd-orange: #ca8a04;--cd-purple: #9333ea;--cd-blue: #2563eb;--cd-red: #dc2626;--cd-radius: 8px;--cd-mono: "SF Mono", "Fira Code", "Consolas", monospace}:root[data-theme=dark] .compression-demo{--cd-green: #3fb950;--cd-orange: #d29922;--cd-purple: #bc8cff;--cd-blue: #58a6ff;--cd-red: #f85149}.compression-demo .pipeline{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:1.5rem 0;flex-wrap:wrap}.compression-demo .pipeline .step{background:var(--cd-bg2);border:1px solid var(--cd-border);border-radius:var(--cd-radius);padding:.5rem 1rem;font-size:.85rem;font-weight:500;color:var(--cd-text)}.compression-demo .pipeline .step.active{border-color:var(--cd-accent);color:var(--cd-accent);font-weight:700}.compression-demo .pipeline .arrow{color:var(--cd-text-dim);font-size:1.2rem}.compression-demo .card{background:var(--cd-bg2);border:1px solid var(--cd-border);border-radius:var(--cd-radius);padding:1.25rem;margin-bottom:1rem;overflow-x:auto}.compression-demo .section-note{font-size:.8rem;color:var(--cd-text-dim);font-style:italic;margin-bottom:1rem}.compression-demo p{color:var(--cd-text-dim)}.compression-demo .ring-explorer{display:flex;gap:1.5rem;flex-wrap:wrap}.compression-demo .ring-inputs{flex:0 0 auto}.compression-demo .ring-inputs label{display:block;font-size:.8rem;color:var(--cd-text-dim);margin-bottom:.25rem;font-weight:600}.compression-demo .ring-inputs input[type=range]{width:200px}.compression-demo .ring-value{font-family:var(--cd-mono);font-size:1.1rem;color:var(--cd-accent);font-weight:700;min-width:2.5rem;display:inline-block}.compression-demo .ring-results{flex:1 1 300px}.compression-demo .ring-results table{width:100%;border-collapse:collapse;font-size:.85rem}.compression-demo .ring-results th{text-align:left;color:var(--cd-text-dim);font-weight:600;padding:.3rem .5rem;border-bottom:1px solid var(--cd-border);text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}.compression-demo .ring-results td{padding:.3rem .5rem;border-bottom:1px solid var(--cd-border);font-family:var(--cd-mono);font-size:.85rem;color:var(--cd-text)}.compression-demo .binary{font-family:var(--cd-mono);font-size:.78rem;color:var(--cd-text-dim);letter-spacing:.05em}.compression-demo .stratum-chart{display:flex;align-items:flex-end;gap:4px;height:120px;margin:1rem 0;padding:0 .5rem}.compression-demo .stratum-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}.compression-demo .stratum-bar{width:100%;min-height:2px;border-radius:3px 3px 0 0;transition:height .3s}.compression-demo .stratum-label{font-size:.7rem;color:var(--cd-text-dim);margin-top:4px;font-family:var(--cd-mono)}.compression-demo .stratum-count{font-size:.65rem;color:var(--cd-text-dim);font-family:var(--cd-mono);margin-bottom:2px}.compression-demo .ratio-table{width:100%;border-collapse:collapse;font-size:.85rem;margin:.75rem 0;table-layout:auto}.compression-demo .ratio-table th,.compression-demo .ratio-table td{padding:.4rem .5rem;text-align:right;border-bottom:1px solid var(--cd-border);color:var(--cd-text);white-space:nowrap}.compression-demo .ratio-table th{color:var(--cd-text-dim);font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}.compression-demo .ratio-table td:first-child,.compression-demo .ratio-table th:first-child{text-align:left;white-space:normal}.compression-demo .ratio-bar-track{height:18px;background:var(--cd-bg);border:1px solid var(--cd-border);border-radius:3px;overflow:hidden;min-width:60px}.compression-demo .ratio-bar{height:100%;border-radius:3px;min-width:2px}.compression-demo .data-selector{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.compression-demo .data-selector button{background:var(--cd-bg2);border:1px solid var(--cd-border);border-radius:var(--cd-radius);padding:.4rem .8rem;font-size:.8rem;color:var(--cd-text-dim);cursor:pointer;font-family:inherit}.compression-demo .data-selector button:hover{border-color:var(--cd-accent);color:var(--cd-text)}.compression-demo .data-selector button.active{border-color:var(--cd-accent);color:var(--cd-accent);font-weight:600;background:color-mix(in srgb,var(--cd-accent) 10%,transparent)}.compression-demo .plane-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin:1rem 0}.compression-demo .plane-card{background:var(--cd-bg);border:1px solid var(--cd-border);border-radius:var(--cd-radius);padding:.75rem;text-align:center;min-width:0}.compression-demo .plane-card h4{margin:0 0 .5rem;font-size:.8rem;color:var(--cd-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compression-demo .plane-card .entropy-val{font-family:var(--cd-mono);font-size:1.1rem;font-weight:700}.compression-demo .plane-card .entropy-label{font-size:.7rem;color:var(--cd-text-dim)}@media(max-width:600px){.compression-demo .plane-grid{grid-template-columns:repeat(2,1fr)}.compression-demo .ring-explorer{flex-direction:column}}.compression-demo .mode-badge{display:inline-block;font-size:.7rem;font-weight:600;padding:.15rem .5rem;border-radius:10px;font-family:var(--cd-mono)}.compression-demo .mode-0{background:color-mix(in srgb,var(--cd-blue) 15%,transparent);color:var(--cd-blue)}.compression-demo .mode-1{background:color-mix(in srgb,var(--cd-purple) 15%,transparent);color:var(--cd-purple)}.compression-demo .mode-2{background:color-mix(in srgb,var(--cd-green) 15%,transparent);color:var(--cd-green)}.compression-demo .mode-3{background:color-mix(in srgb,var(--cd-orange) 15%,transparent);color:var(--cd-orange)}