body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;background-color:#0f172a;margin:0 auto;padding:2rem;color:#e2e8f0;line-height:1.4;overflow:hidden;box-sizing:border-box;overflow-y:auto;max-width:700px}.internal-link{text-decoration:none;color:inherit;margin-left:.25em;opacity:0}h2:hover .internal-link{opacity:1}.link-text{color:#7c3aed;text-decoration:none}.link-text:hover{text-decoration:underline}.whiteboard-demo{display:flex;flex-direction:column;gap:20px;align-items:center;max-width:650px;margin:0 auto;user-select:none}.toolbar{margin-bottom:10px;display:flex;justify-content:center;align-items:center;gap:15px;flex-wrap:wrap;user-select:none}.color-picker{display:flex;gap:10px;user-select:none}.color-circle{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .2s ease;user-select:none}.color-circle:hover{border:2px solid #aaa}.color-circle.selected{border:2px solid #aaa;box-shadow:0 0 5px #0009}.reset-button{padding:6px 14px;font-size:14px;cursor:pointer;border-radius:4px;border:1px solid #aaa;background:#f0f0f0;transition:background .2s ease;user-select:none}.reset-button:hover{background:#ddd}.grid-container{display:flex;gap:20px;justify-content:center;width:100%;user-select:none}.whiteboard-grid{flex:1 1;max-width:300px;min-width:100px;aspect-ratio:1 / 1;border:1px solid #475569;box-sizing:border-box;cursor:pointer;width:100%;height:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1px;background-color:#475569;user-select:none}.grid-cell{background-color:#0f172a;border:none;cursor:pointer;transition:background-color .1s ease;user-select:none}.grid-cell[data-filled=true]{border:1px solid rgba(0,0,0,.1)}.log-container{display:flex;gap:20px;justify-content:center;width:100%;user-select:none}.log-box{flex:1 1 150px;max-width:300px;height:150px;overflow-y:auto;border:1px solid #334155;border-radius:4px;padding:5px;box-sizing:border-box;font-size:11px;font-family:monospace;white-space:pre-wrap;user-select:text}.compression-controls{display:flex;gap:15px;align-items:center;flex-wrap:wrap;justify-content:center;user-select:none}.control-group{display:flex;align-items:center;gap:6px;flex-shrink:0;min-width:160px;justify-content:space-between;user-select:none}.control-group label{font-weight:500;color:#e2e8f0;font-size:12px;width:50px;text-align:right;user-select:none}.slider{width:75px;height:6px;border-radius:3px;background:#334155;outline:none;-webkit-appearance:none;appearance:none;flex-shrink:0;user-select:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#35b9d3;cursor:pointer}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#35b9d3;cursor:pointer;border:none}.value-display{width:35px;text-align:center;font-weight:700;color:#35b9d3;font-size:12px;user-select:none}.pattern-select{padding:6px 10px;border-radius:4px;border:1px solid #475569;background:#0f172a;color:#e2e8f0;font-size:13px;min-width:200px;flex-shrink:0;cursor:pointer;user-select:none}.compression-visualization{display:flex;flex-direction:column;gap:30px;width:100%;padding:20px;border:1px solid #475569;border-radius:6px;background:#1e293b4d;user-select:none}.data-container,.window-container{display:flex;flex-direction:column;gap:10px;user-select:none}.data-container h3,.window-container h3{margin:0;color:#e2e8f0;font-size:14px;font-weight:600;user-select:none}.data-stream,.sliding-window,.compressed-stream{display:flex;align-items:center;flex-direction:column;gap:4px;padding:10px;border:1px solid #334155;border-radius:6px;background:#1e293b;min-height:50px;overflow-y:auto;overflow-x:auto;user-select:none}.sliding-window{min-height:30px;padding:8px 15px;user-select:none}.data-item,.window-item{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:4px;color:#fff;font-weight:700;font-size:12px;border:2px solid transparent;transition:all .2s ease;user-select:none}.data-item.current{border-color:#fbbf24;user-select:none}.data-chunk,.compressed-chunk{display:block;padding:8px 12px;border-radius:4px;color:#fff;font-family:monospace;font-size:11px;margin:2px;word-break:break-all;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);user-select:none}.compressed-container{display:flex;flex-direction:column;gap:10px;user-select:none}.compressed-container h3{margin:0;color:#e2e8f0;font-size:14px;font-weight:600;user-select:none}.window-item{border-color:#059669;box-shadow:0 0 8px #0596694d;user-select:none}.stats-wrapper{margin-top:20px;display:flex;flex-direction:column;gap:10px;user-select:none}.stats-title{margin:0;color:#e2e8f0;font-size:14px;font-weight:600;user-select:none}.stats-container{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;padding:20px;border:1px solid #334155;border-radius:6px;background:#1e293b;user-select:none}.stat{display:flex;flex-direction:column;align-items:center;gap:3px;color:#e2e8f0;font-size:12px;text-align:center;user-select:none}.stat strong{color:#94a3b8;font-size:10px;text-transform:uppercase;letter-spacing:.5px;user-select:none}.stat span{font-size:14px;font-weight:700;color:#b6b6b6;user-select:none}.demo-explanation{max-width:800px;margin:30px auto;padding:20px;border:1px solid #334155;border-radius:8px;background:#1e293b;user-select:none}.demo-explanation h3{color:#e2e8f0;margin-top:0;margin-bottom:15px;font-size:14px;user-select:none}.demo-explanation ul{margin:10px 0;padding-left:20px;user-select:none}.demo-explanation li{margin:8px 0;color:#cbd5e1;line-height:1.5;user-select:none}.demo-explanation ul ul{margin:5px 0;user-select:none}.demo-explanation strong{color:#059669;user-select:none}.sliding-window-highlight{background-color:#0596694d;color:#059669;border:1px solid rgba(5,150,105,.5);border-radius:2px;user-select:none}.handshake-container{display:flex;flex-direction:row;gap:20px;max-width:1200px;margin:30px auto;align-items:stretch;user-select:none}@media (max-width: 900px){.handshake-container{flex-direction:column}}.request-box,.response-box{border:1px solid #475569;border-radius:6px;padding:15px;background-color:#4755691a;flex:1;display:flex;flex-direction:column;user-select:none}.box-title{font-size:14px;font-weight:700;margin-bottom:12px;color:#64748b;border-bottom:1px solid #475569;padding-bottom:6px;user-select:none}.method-line{font-weight:700;color:#f59e0b;margin-bottom:8px;font-family:monospace;font-size:12px;user-select:none}.header-line{color:#94a3b8;margin-bottom:4px;font-family:monospace;font-size:11px;user-select:none}.extension-line{color:#ddd;font-weight:700;margin-bottom:4px;font-family:monospace;font-size:11px;user-select:none}.explanation{margin-top:30px;padding:20px;background-color:#4755691a;border-radius:6px;border-left:3px solid #475569;max-width:800px;margin-left:auto;margin-right:auto;user-select:none}.explanation h3{color:#64748b;margin-top:0;font-size:14px;user-select:none}.explanation ul{margin:10px 0;padding-left:20px;user-select:none}.explanation li{margin-bottom:8px;user-select:none}.sw-demo-container{max-width:1000px;margin:30px auto;user-select:none}.sw-demo-controls{display:flex;gap:30px;align-items:center;justify-content:center;margin-bottom:30px;flex-wrap:wrap}.sw-control-group{display:flex;align-items:center}.sw-control-group label{font-size:14px;color:#94a3b8;font-weight:500}.sw-window-slider{max-width:150px;min-width:75px;height:6px;border-radius:3px;background:#334155;outline:none;-webkit-appearance:none;appearance:none}.sw-window-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#35b9d3;cursor:pointer}.sw-window-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#35b9d3;cursor:pointer;border:none}.sw-size-display{font-family:monospace;font-size:14px;color:#35b9d3;font-weight:700;min-width:60px}.sw-viz-container{display:flex;flex-direction:column}.sw-text-container{position:relative;font-family:monospace;font-size:14px;background-color:#0f172a;padding:20px;border-radius:4px;overflow-x:auto;margin-bottom:20px;border:1px solid #334155}.sw-text-display{position:relative;white-space:nowrap;letter-spacing:.5px;color:#e2e8f0;z-index:1;font-size:14px}.sw-char{display:inline-block;width:14px;text-align:center;transition:all .2s ease;box-sizing:border-box}.sw-window-char{background-color:#35b9d333;border-top:1px solid #35b9d3;border-bottom:1px solid #35b9d3}.sw-window-first{border-left:1px solid #35b9d3;border-top-left-radius:2px;border-bottom-left-radius:2px}.sw-window-last{border-right:1px solid #35b9d3;border-top-right-radius:2px;border-bottom-right-radius:2px}.sw-next-char,.sw-next-char-multi{color:#f59e0b;font-weight:700}.sw-reference-char{color:#10b981;font-weight:700}.sw-step-button{background-color:#334155;color:#e2e8f0;border:1px solid #475569;border-radius:4px;padding:6px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s ease}.sw-step-button:hover:not(:disabled){background-color:#475569;border-color:#64748b}.sw-step-button:disabled{opacity:.5;cursor:not-allowed}.sw-position-display{font-family:monospace;font-size:14px;color:#94a3b8;font-weight:700;min-width:80px;text-align:center}.sw-label{margin:0 0 15px;color:#e2e8f0;font-size:14px;font-weight:500}.sw-output-display{font-family:monospace;font-size:14px;color:#e2e8f0;background-color:#0f172a;padding:20px;border-radius:4px;word-break:break-all;border:1px solid #334155}.sw-output-item{display:inline-block;margin-right:6px;transition:all .2s ease}.sw-current-output{color:#f59e0b;font-weight:700}.sw-current-output-multi{color:#10b981;font-weight:700}@media (max-width: 768px){body{padding:1rem}.compression-visualization{padding:10px;gap:20px}.data-stream,.sliding-window,.compressed-stream{padding:8px;gap:2px}.compression-controls{gap:10px}.control-group{min-width:140px;gap:4px}.pattern-select{min-width:150px;padding:4px 8px}}@media (max-width: 480px){.stats-container{padding:10px}}