:root{--bg:#0b0c0f;--surface:#131418;--surface-raised:#1a1c21;--surface-hover:#23252c;--border:#ffffff12;--border-strong:#ffffff1f;--accent:#e94560;--accent-soft:#e9456024;--accent-ring:#e945604d;--text:#ecedf0;--text-dim:#b4b8c2;--text-muted:#7d828e;--radius:9px;--radius-lg:16px;--gutter:12px;--sidebar-width:308px;--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;color:var(--text);background:var(--bg);color-scheme:dark;-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:15px}*,:before,:after{box-sizing:border-box}body{gap:var(--gutter);height:100dvh;padding:var(--gutter);margin:0;display:flex;overflow:hidden}.viewport{flex:1;min-width:0;position:relative}canvas{border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--border), 0 24px 64px #00000073;cursor:grab;touch-action:none;image-rendering:pixelated;background:#000;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}canvas:active{cursor:grabbing}.sidebar{width:var(--sidebar-width);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);scrollbar-width:thin;flex-direction:column;flex-shrink:0;gap:22px;padding:18px;display:flex;overflow-y:auto}.brand{align-items:center;gap:12px;display:flex}.brand-logo{border-radius:8px;flex-shrink:0}.brand-title{letter-spacing:-.01em;margin:0;font-size:16px;font-weight:650}.brand-subtitle{color:var(--text-muted);margin:2px 0 0;font-size:14px}.section{flex-direction:column;gap:9px;display:flex}.section-heading,.stat-label{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);user-select:none;font-size:12.5px;font-weight:600}.stats{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);grid-template-columns:1fr 1fr;display:grid}.stat{flex-direction:column;gap:4px;min-width:0;padding:10px 13px;display:flex}.stat:nth-child(2n){border-left:1px solid var(--border)}.stat:nth-child(n+3){border-top:1px solid var(--border)}.stat-label{font-size:11.5px}.stat-value{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;font-size:16px;overflow:hidden}.stat-unit{color:var(--text-muted);margin-left:4px;font-size:12.5px}.shading-picker{position:relative}.shading-list{--step-h:34px;--step-gap:2px;--rail-x:10px;gap:var(--step-gap);counter-reset:shading-step var(--shading-count,10);flex-direction:column;margin:0;padding:0;list-style:none;display:flex;position:relative}.shading-list:before{content:"";top:calc(var(--step-h) / 2);bottom:calc(var(--step-h) / 2);left:calc(var(--rail-x) - 1px);background:var(--border-strong);width:2px;position:absolute}.shading-list li{counter-increment:shading-step -1;padding-left:25px;position:relative}.shading-list li:before{--dot:10px;content:"";z-index:1;top:calc(50% - var(--dot) / 2);left:calc(var(--rail-x) - var(--dot) / 2);width:var(--dot);height:var(--dot);background:var(--surface);border:2px solid #3b3e47;border-radius:50%;transition:background-color .15s,border-color .15s;position:absolute}.shading-list li:has(.is-active)~li:after{content:"";bottom:50%;left:calc(var(--rail-x) - 1px);width:2px;height:calc(var(--step-h) + var(--step-gap));background:var(--accent);position:absolute}.shading-list li:has(.is-active)~li:before{border-color:var(--accent);background:var(--accent)}.shading-list li:has(.is-active):before{--dot:16px;border:3px solid var(--accent);background:var(--text);box-shadow:0 0 0 4px var(--accent-soft)}.shading-picker:has(.shading-slider:focus-visible) li:has(.is-active):before{outline:2px solid var(--accent);outline-offset:3px}.shading-option{width:100%;height:var(--step-h);font:inherit;text-align:left;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:7px;justify-content:space-between;align-items:center;gap:9px;padding:0 12px;transition:background-color .15s,color .15s;display:flex}.shading-option:after{content:counter(shading-step);font-family:var(--mono);color:var(--text-muted);opacity:.6;font-size:12.5px}.shading-list li:has(.is-active)~li .shading-option{color:var(--text-dim)}.shading-option:hover,.shading-list li:has(.is-active)~li .shading-option:hover{color:var(--text);background:var(--surface-hover)}.shading-option.is-active{color:var(--text);background:var(--accent-soft);font-weight:600}.shading-option.is-active:after{color:var(--accent);opacity:1}.shading-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.shading-slider{z-index:2;opacity:0;cursor:pointer;writing-mode:vertical-lr;direction:rtl;width:23px;height:100%;margin:0;position:absolute;top:0;left:0}.sidebar-footer{border-top:1px solid var(--border);margin-top:auto;padding-top:18px}.controls{grid-template-columns:1fr 1fr;gap:8px 16px;margin:0;font-size:14px;display:grid}.controls div{justify-content:space-between;align-items:center;gap:7px;display:flex}.controls dt{color:var(--text-muted)}.controls dd{gap:4px;margin:0;display:flex}kbd{min-width:21px;font-family:var(--mono);text-align:center;color:var(--text-dim);background:var(--surface-raised);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:12px}@media (height<=800px){.sidebar-footer{display:none}}@media (height<=720px){.sidebar{gap:14px;padding:14px 18px}.section{gap:7px}.stat{padding:8px 13px}.shading-list{--step-h:30px}}@media (width<=576px){.hideMobile{display:none!important}body{flex-direction:column;gap:8px;padding:8px}.viewport{min-height:0}.sidebar{gap:18px;width:auto;max-height:60dvh;padding:16px}.shading-list{scrollbar-width:none;flex-direction:row-reverse;gap:7px;margin:0 -16px;padding:0 16px;overflow-x:auto}.shading-list:before,.shading-list li:before,.shading-list li:after{display:none}.shading-list li{flex-shrink:0;padding-left:0}.shading-option{background:var(--surface-raised);border:1px solid var(--border);border-radius:999px;padding:0 14px}.shading-option.is-active{border-color:var(--accent)}}