:root{--bg:#0a0c10;--surface:#111318;--surface2:#1a1d24;--border:#232630;--accent:#4f9cf9;--accent2:#7c5af9;--text:#e8eaf0;--muted:#6b7280;--card-bg:#1a1d24;--header-h:56px;--controls-h:88px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}header{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;padding:0 20px;display:flex}.logo{align-items:center;gap:12px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--accent), var(--accent2));border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:15px;display:flex}.logo-text{font-size:14px;font-weight:600}.logo-sub{color:var(--muted);margin-top:1px;font-size:11px}.main-layout{height:calc(100dvh - var(--header-h));flex-direction:column;display:flex;overflow:hidden}.viewer-panel{flex-direction:column;flex:1;min-height:0;display:flex}#viewer{cursor:crosshair;touch-action:none;user-select:none;background:#000;flex:1;min-height:0}.controls{background:var(--surface);border-top:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:8px;padding:10px 16px 8px;display:flex}.slice-row,.wl-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.control-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;min-width:44px;font-size:11px;font-weight:600}#slice-slider{-webkit-appearance:none;background:var(--border);cursor:pointer;border-radius:2px;outline:none;flex:1;min-width:120px;height:4px}#slice-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:2px solid var(--bg);cursor:pointer;border-radius:50%;width:16px;height:16px}#slice-slider::-moz-range-thumb{background:var(--accent);border:2px solid var(--bg);cursor:pointer;border-radius:50%;width:16px;height:16px}.counter{color:var(--accent);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:64px;font-size:12px}.preset,.reset-btn{border:1px solid var(--border);cursor:pointer;background:var(--surface2);color:var(--muted);white-space:nowrap;border-radius:5px;padding:4px 10px;font-size:11px;transition:all .15s}.preset:hover,.reset-btn:hover{border-color:var(--accent);color:var(--text)}.preset.active{border-color:var(--accent);color:var(--accent);background:#4f9cf926}.reset-btn{margin-left:auto}.hint{color:var(--muted);font-size:10px;display:none}@media (width>=600px){.hint{display:block}}.sidebar-toggle{background:var(--surface2);border:none;border-top:1px solid var(--border);width:100%;color:var(--muted);cursor:pointer;text-align:left;flex-shrink:0;padding:10px 16px;font-size:12px;font-weight:600}.sidebar-toggle:hover{color:var(--text)}.sidebar{flex-direction:column;flex-shrink:0;max-height:45vh;display:flex;overflow:hidden}.sidebar-inner{flex:1;overflow-y:auto}.sidebar-inner.collapsed{display:none}.sb-section{border-bottom:1px solid var(--border);padding:16px}.sb-section h3{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px;font-size:10px;font-weight:700}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;padding:12px}.card:last-child{margin-bottom:0}.card-title{color:var(--accent);margin-bottom:6px;font-size:12px;font-weight:700}.card-body{color:var(--muted);font-size:12px;line-height:1.6}.card-body strong{color:var(--text)}.card-body code{color:var(--accent2);background:#4f9cf91a;border-radius:3px;padding:1px 4px;font-size:11px}.meta-table{border-collapse:collapse;width:100%}.meta-table tr{border-bottom:1px solid var(--border)}.meta-table tr:last-child{border-bottom:none}.meta-table td{vertical-align:top;padding:6px 2px;font-size:11px}.meta-table td:first-child{color:var(--muted);width:44%}.meta-table td:last-child{color:var(--text);word-break:break-all;font-family:SF Mono,Fira Code,ui-monospace,monospace}.loading-cell{color:var(--muted);font-size:11px}@media (width>=768px){.main-layout{flex-direction:row}.viewer-panel{border-right:1px solid var(--border);flex:1}.sidebar{flex-direction:column;flex-shrink:0;width:300px;height:100%;max-height:none;overflow:hidden}.sidebar-toggle{display:none}.sidebar-inner{flex:1;overflow-y:auto}.sidebar-inner.collapsed{display:block}}