:root{--primary-color:#8b5cf6;--primary-hover:#7c3aed;--pink:#f43f5e;--green:#10b981;--amber:#f59e0b;--bg-color:#0f172a;--text-main:#f8fafc;--text-muted:#94a3b8;--glass-bg:#0f172abf;--glass-border:#8b5cf640;--glass-shadow:0 8px 32px 0 #0009;--font-heading:"Outfit", sans-serif;--font-body:"Inter", sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-color);color:var(--text-main);width:100vw;height:100vh;overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.ui-overlay{z-index:10;pointer-events:none;flex-direction:column;gap:.75rem;width:100%;height:100%;padding:1.25rem 1.5rem;display:flex;position:absolute;top:0;left:0}header{pointer-events:auto;text-shadow:0 2px 10px #000c}header h1{font-family:var(--font-heading);background:linear-gradient(90deg,#c4b5fd,#8b5cf6,#f43f5e);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.25rem;font-size:1.8rem;font-weight:700}header p{color:var(--text-muted);font-size:.9rem;font-weight:300}.chapter-tabs{pointer-events:auto;flex-wrap:wrap;gap:.5rem;display:flex}.tab-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-muted);font-family:var(--font-body);cursor:pointer;border-radius:8px;padding:.5rem 1rem;font-size:.85rem;transition:all .25s}.tab-btn:hover{color:var(--text-main);background:#8b5cf626}.tab-btn.active{border-color:var(--primary-color);color:#fff;background:#8b5cf64d;box-shadow:0 0 16px #8b5cf64d}.glass-panel{pointer-events:auto;background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:14px;flex-direction:column;gap:.75rem;width:380px;max-height:calc(100vh - 10rem);padding:1.25rem;display:flex;overflow-y:auto}.glass-panel::-webkit-scrollbar{width:6px}.glass-panel::-webkit-scrollbar-track{background:#0003;border-radius:3px}.glass-panel::-webkit-scrollbar-thumb{background:#8b5cf666;border-radius:3px}.glass-panel::-webkit-scrollbar-thumb:hover{background:#8b5cf6cc}.upload-section{width:380px}.tab-content{display:none!important}.tab-content.active{display:flex!important}.image-upload-wrapper{flex-direction:column;align-items:center;gap:.75rem;display:flex}#imageUpload{display:none}.upload-btn{background:var(--primary-color);color:#fff;font-family:var(--font-heading);cursor:pointer;text-align:center;border-radius:8px;width:100%;padding:.6rem 1.2rem;font-weight:700;transition:all .2s;box-shadow:0 4px 15px #8b5cf666}.upload-btn:hover{background:var(--primary-hover);box-shadow:0 6px 20px #7c3aed99}.upload-note{color:var(--text-muted);text-align:center;margin-top:-.3rem;font-size:.7rem}.preview-container{background:#0006;border:1px dashed #94a3b84d;border-radius:6px;justify-content:center;align-items:center;width:100%;height:80px;display:flex;overflow:hidden}.preview-container img{object-fit:contain;opacity:.5;max-width:100%;max-height:100%;transition:opacity .3s}.preview-container img.loaded{opacity:1}.controls-divider{background:var(--glass-border);width:100%;height:1px}.glass-panel h2{font-family:var(--font-heading);color:var(--text-main);margin-bottom:-.25rem;font-size:.95rem}.button-group{flex-direction:column;gap:.35rem;display:flex}.row-group{flex-direction:row!important}.row-group button{text-align:center;flex:1}.button-group button{color:var(--text-muted);font-family:var(--font-body);cursor:pointer;text-align:left;background:#8b5cf60d;border:1px solid #8b5cf633;border-radius:6px;padding:.55rem .75rem;font-size:.85rem;transition:all .2s;position:relative;overflow:hidden}.button-group button:hover{color:var(--text-main);background:#8b5cf626}.button-group button.active{border-color:var(--primary-color);color:#fff;background:#8b5cf640}.button-group button.active:before{content:"";background:var(--primary-color);width:3px;height:100%;position:absolute;top:0;left:0}.row-group button.active:before{display:none}.action-btn{color:var(--pink);font-family:var(--font-heading);cursor:pointer;text-align:center;background:#f43f5e26;border:1px solid #f43f5e66;border-radius:8px;padding:.6rem;font-size:.85rem;font-weight:700;transition:all .25s}.action-btn:hover{background:#f43f5e4d;box-shadow:0 0 14px #f43f5e4d}.slider-control{border:1px solid var(--glass-border);background:#00000059;border-radius:8px;flex-direction:column;gap:.4rem;padding:.75rem;display:flex}.slider-control label{color:#c4b5fd;justify-content:space-between;font-size:.8rem;font-weight:600;display:flex}input[type=range]{-webkit-appearance:none;background:0 0;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#8b5cf6;border-radius:50%;width:16px;height:16px;margin-top:-5px;box-shadow:0 0 10px #8b5cf6cc}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:#334155;border-radius:3px;width:100%;height:5px}.metrics-row{flex-wrap:wrap;gap:.5rem;display:flex}.metric{background:#0006;border:1px solid #8b5cf626;border-radius:6px;flex-direction:column;flex:1;align-items:center;gap:.15rem;min-width:70px;padding:.5rem;display:flex}.metric-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.6rem}.metric-value{font-family:var(--font-mono);color:var(--green);font-size:.85rem;font-weight:700}.code-table{max-height:130px;font-family:var(--font-mono);background:#00000080;border-radius:6px;padding:.4rem;font-size:.7rem;overflow-y:auto}.code-table::-webkit-scrollbar{width:4px}.code-table::-webkit-scrollbar-thumb{background:#8b5cf64d;border-radius:2px}.code-row{border-bottom:1px solid #ffffff0d;justify-content:space-between;padding:.2rem .4rem;display:flex}.code-row:nth-child(odd){background:#8b5cf60d}.code-row .sym{color:var(--amber)}.code-row .freq{color:var(--text-muted)}.code-row .bits{color:var(--green)}#energy-chart,#histogram-canvas{background:#0000004d;border-radius:6px;width:100%}.compress-section{flex-direction:column;gap:.75rem;display:flex}.loader{background:var(--bg-color);z-index:9999;opacity:0;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s;display:flex;position:fixed;top:0;left:0}.loader.active{opacity:1;pointer-events:all}.spinner{border:3px solid #8b5cf61a;border-top-color:var(--primary-color);border-radius:50%;width:44px;height:44px;margin-bottom:1rem;animation:.8s ease-in-out infinite spin}@keyframes spin{to{transform:rotate(360deg)}}