@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#cdd7dc;background:#070b10;font-synthesis:none;--muted:#77868f;--accent:#8de6d4;--line:#c6e8ec16}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{background:none;border:1px solid var(--line);border-radius:5px;transition:background .18s,border-color .18s}button:hover{background:#b6f4e911;border-color:#a1d8cf55}#scene{position:fixed;width:100%;height:100%;inset:0;touch-action:none}header{position:fixed;inset:0 0 auto;height:90px;display:flex;align-items:center;padding:0 42px;gap:46px;pointer-events:none}.brand{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:600;letter-spacing:5px;color:#f0f6f5;text-decoration:none;display:flex;align-items:center;gap:12px;pointer-events:auto}.brand-mark{font-size:38px;font-weight:400;color:var(--accent);letter-spacing:0}.version{font-size:10px;color:#71838b;letter-spacing:2px;margin-left:2px}.tagline,.live,.eyebrow,.section-label,.panel-heading,.scale-note,.scene-caption,.stats,.shortcuts,footer>button,#show{font-size:10px;letter-spacing:1.6px}.tagline{color:#6e818b}.live{margin-left:auto;display:flex;align-items:center;gap:9px;color:#96b1ab;font-size:9px;letter-spacing:1.4px}.live i{height:5px;width:5px;border-radius:50%;background:#8de6d4;box-shadow:0 0 10px #8de6d477}main{pointer-events:none}.intro{position:absolute;top:148px;left:44px}.eyebrow{font-size:9px;color:#7aa198;letter-spacing:2px}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,4.3vw,68px);line-height:1.04;letter-spacing:-3px;font-weight:400;margin:23px 0 21px;color:#e6eceb}h1 em{font-weight:400;font-style:normal;color:#829994}.intro p{font-size:12px;line-height:1.9;color:#7f929b}aside{position:absolute;right:30px;top:112px;width:272px;max-height:calc(100dvh - 192px);overflow:auto;scrollbar-width:thin;scrollbar-color:#37474a transparent;background:linear-gradient(130deg,#10191cdb,#0c1319df);backdrop-filter:blur(18px);border:1px solid #bedcde20;border-radius:9px;pointer-events:auto;box-shadow:0 20px 80px #0002}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:19px 20px;color:#d0deda;font-size:10px;letter-spacing:2px;border-bottom:1px solid var(--line)}.small-mark{font-size:17px;color:#82b6aa}section{padding:19px 20px 17px;border-bottom:1px solid var(--line)}.section-label{color:#58766e;font-size:9px;letter-spacing:1.6px;margin-bottom:16px;display:flex;gap:12px}.section-label span{color:#9aa9b0}.presets{display:flex;gap:6px}.preset{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10px;padding:10px 0 9px;border-color:#c6e8ec15;color:#8c9da5}.preset>span{font-size:22px;line-height:23px}.preset.active{color:#b8efdf;background:#81e8cc0c;border-color:#87d4bd66}.note{color:#687e85;font-size:10px;line-height:1.6;min-height:16px;margin:12px 0 0}label{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin:16px 0 10px;color:#aab9be}label:first-of-type{margin-top:0}output{font-variant-numeric:tabular-nums;font-size:10px;color:#89bbae;font-family:monospace}select{width:100%;height:34px;padding:0 10px;border:1px solid #c6e8ec20;border-radius:4px;background:#101c21;color:#d0dfdf;font-size:11px;cursor:pointer}.scale-note{display:flex;justify-content:space-between;font-size:8px;color:#557078;margin-top:7px;letter-spacing:1px}input[type=range]{appearance:none;display:block;width:100%;height:3px;border-radius:2px;margin:0 0 2px;background:linear-gradient(to right,#7ab4a5 var(--fill,40%),#263339 var(--fill,40%));cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;background:#b6e3d5;border-radius:50%;box-shadow:0 0 0 3px #162729}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:#b6e3d5;border:none;border-radius:50%}.palette-row{display:flex;gap:7px;margin-bottom:19px}.palette{display:flex;align-items:center;justify-content:center;gap:6px;font-size:9px;color:#758a92;padding:7px 6px;flex:1;border-color:transparent}.palette i{width:12px;height:12px;border-radius:50%;background:var(--swatch)}.palette.active{border-color:#74988a55;color:#c6dcd5;background:#9fd0be09}.panel-actions{padding:15px 20px;display:flex;gap:8px}.panel-actions button{flex:1;font-size:10px;padding:9px 0;color:#99aaa9}.scene-caption{position:absolute;bottom:112px;left:44px;display:flex;align-items:center;gap:16px;font-size:9px;color:#648782;letter-spacing:2px}.scene-caption>span:last-child{color:#526771;font-size:8px}.caption-line{width:56px;height:1px;background:#567b7066}footer{position:fixed;bottom:0;height:68px;left:30px;right:30px;display:flex;align-items:center;gap:25px;border-top:1px solid var(--line)}.stats{display:flex;gap:19px;align-items:center;font-size:8px;color:#65808a;letter-spacing:1px;white-space:nowrap}.stats b{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:13px;color:#bdcdc9;letter-spacing:0;margin-right:3px}.gpu-label{border-left:1px solid #41636a55;padding-left:18px;font-size:8px;max-width:160px;overflow:hidden;text-overflow:ellipsis}.shortcuts{margin-left:auto;display:flex;gap:18px;letter-spacing:0;font-size:9px;color:#687e87}kbd{font-family:inherit;font-size:8px;border:1px solid #b0d6df22;padding:3px 4px;border-radius:3px;margin-right:4px;color:#93aaa9}footer>button,#show{padding:9px 10px;font-size:9px;letter-spacing:0;color:#9caeac;white-space:nowrap}#show{position:fixed;right:24px;bottom:24px;background:#0d1a20aa}#loading,#error{position:fixed;inset:0;background:#070b10;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10}#loading h2,#error h2{font-family:'Space Grotesk',sans-serif;font-weight:400;color:#d6eee6}#loading p,#error p{font-size:13px;color:#8a9fa5}.loader-mark{font-size:60px;color:var(--accent);animation:spin 6s linear infinite}#error>div{max-width:500px;padding:32px}#error p{line-height:1.7;overflow-wrap:anywhere}#error button{padding:12px 20px;margin-top:15px}#pointer{position:fixed;pointer-events:none;width:56px;height:56px;border:1px solid #8cefd84d;border-radius:50%;transform:translate(-50%,-50%);display:none;box-shadow:0 0 30px #55dbcc0b}#pointer i{position:absolute;left:26px;top:26px;width:3px;height:3px;border-radius:50%;background:#a8f1dd}#pointer span{position:absolute;left:65px;top:23px;font-size:8px;letter-spacing:2px;color:#8dcbb8}#pointer.push{border-color:#ffb07799}#pointer.push span{color:#ffb077}body.ui-hidden .ui{display:none}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@media(max-height:820px){header{height:76px}aside{top:88px;max-height:calc(100dvh - 160px)}section{padding:14px 18px}.section-label{margin-bottom:11px}label{margin-top:13px}.intro{top:125px}.panel-heading{padding:15px 18px}}@media(max-width:1100px){.tagline,.gpu-label{display:none}.shortcuts{gap:10px}.intro{left:28px}h1{font-size:48px}header{padding:0 28px}.stats{gap:10px}aside{right:22px;width:252px}.shortcuts span:first-child{display:none}}@media(max-width:700px){.intro{top:98px;left:20px}h1{font-size:37px;letter-spacing:-2px}.intro p,.intro .eyebrow,.scene-caption,.shortcuts{display:none}header{padding:0 20px}.brand{font-size:18px;gap:8px}.brand-mark{font-size:30px}aside{top:240px;right:16px;width:225px;max-height:calc(100dvh - 315px)}footer{left:16px;right:16px;gap:10px;justify-content:space-between}.live{font-size:8px}.version{display:none}}@media(prefers-reduced-motion:reduce){.loader-mark{animation:none}button{transition:none}}
@media(min-width:701px) and (max-height:820px){aside{max-height:calc(100dvh - 155px)}section{padding:11px 17px}.panel-heading{padding:12px 17px}.section-label{margin-bottom:10px;font-size:8px}.preset{padding:6px 0;gap:3px}.preset>span{font-size:18px;line-height:19px}.note{margin-top:8px;font-size:9px}label{margin:11px 0 8px;font-size:10px}select{height:29px}.palette-row{margin-bottom:13px}.palette{padding:5px 4px}.panel-actions{padding:11px 17px}.panel-actions button{padding:7px 0}}
@media(min-width:701px) and (max-height:760px){.note{display:none}section{padding:10px 17px}.section-label{margin-bottom:8px}.palette-row{margin-bottom:10px}}
.presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.palette-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.preset{flex-direction:row;justify-content:center;gap:9px}.palette{justify-content:flex-start;padding-left:9px}

.preset[data-preset="4"]{grid-column:1/-1}.collapse-copy{font-size:10px;line-height:1.6;color:#879ca3;margin:9px 0}.collapse-metrics{font:10px monospace;color:#b4dcd0;margin:12px 0}.collapse-link{font-size:10px;color:#8de6d4;text-underline-offset:3px}