@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;background:#000;color:#eee;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}header{height:100px;display:flex;align-items:center;justify-content:space-between;margin:0 4%;border-bottom:1px solid #202020}.brand{display:flex;align-items:center;gap:11px;color:#f0f0f0;text-decoration:none;font:600 23px 'Space Grotesk',sans-serif;letter-spacing:-1px}.brand span{font-weight:400;color:#858585;margin-left:-5px}.brand svg{width:28px;height:33px;margin-right:5px}.edition{font-size:10px;letter-spacing:2px;color:#777}.edition span{margin:0 18px;color:#454545}#panelToggle{display:none}main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;margin:0 4%;min-height:calc(100svh - 159px)}.stage{position:relative;min-height:750px;overflow:hidden}.intro{position:absolute;top:44px;left:0;z-index:1;pointer-events:none}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;color:#929292;display:flex;align-items:center;gap:9px}.eyebrow>span{width:5px;height:5px;background:#d5fa79;border-radius:50%}h1{font:400 clamp(30px,3.2vw,48px)/1.13 'Space Grotesk',sans-serif;letter-spacing:-1.8px;margin:20px 0 15px}.intro p{font-size:13px;color:#717171;margin:0}#viewport{position:absolute;inset:100px 0 45px;touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}.cube-caption{position:absolute;bottom:97px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:15px;font:10px 'Space Grotesk',sans-serif;letter-spacing:2px;color:#9b9b9b}.line{width:28px;height:1px;background:#333}#stateLabel{color:#c4e88a}.view-tools{position:absolute;right:10px;bottom:91px;display:flex;gap:7px}.view-tools button{width:34px;height:34px;border:1px solid #282828;background:#101010;color:#999;border-radius:8px;font-size:21px}.view-tools button[aria-pressed=true]{color:#d6f99b;border-color:#718648}.hints{position:absolute;bottom:31px;display:flex;justify-content:center;width:100%;gap:25px;color:#686868;font-size:10px}.hints i{font-style:normal;color:#aaa;font-size:15px;margin-right:6px}aside{background:#111;border:1px solid #282828;border-radius:13px;margin:30px 0 28px;align-self:start;overflow:hidden}.panel-heading{padding:24px 23px;display:flex;align-items:center;justify-content:space-between}.panel-heading .eyebrow{font-size:8px;letter-spacing:1.8px}h2{font:500 20px 'Space Grotesk',sans-serif;letter-spacing:-.6px;margin:9px 0 0}.live-dot{height:6px;width:6px;background:#d4f88b;border-radius:50%;box-shadow:0 0 8px #c5f87733}details{border-top:1px solid #292929}summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:19px 23px;font-size:12px;font-weight:550}summary::-webkit-details-marker{display:none}summary b{font-size:9px;font-weight:400;color:#666;margin-right:12px}.chevron{color:#737373;font-size:13px}details:not([open]) .chevron{transform:rotate(180deg)}.section-content{padding:0 23px 20px}label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#aaa;margin:16px 0 9px}label:first-child{margin-top:0}output{color:#c2c2c2;font-size:10px;font-variant-numeric:tabular-nums}input[type=range]{display:block;appearance:none;width:100%;height:3px;margin:13px 0 5px;border-radius:9px;background:linear-gradient(to right,#c7e9a0 var(--fill,25%),#333 var(--fill,25%));cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:#d9f4ba;border-radius:50%;box-shadow:0 0 0 3px #d9f4ba08}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#d9f4ba;border:0;border-radius:50%}.range-ticks{display:flex;justify-content:space-between;color:#565656;font-size:8px;margin-top:9px}select{width:100%;background:#1b1b1b;color:#c9c9c9;border:1px solid #333;border-radius:6px;padding:10px;font-size:11px}.paired{display:grid;grid-template-columns:1fr 1fr;gap:12px}.paired>div label{margin-top:16px}.actions button{border:1px solid #343434;background:#1a1a1a;color:#ccc;border-radius:6px;padding:12px;font-size:11px}.actions .primary{display:flex;justify-content:space-between;width:100%;background:#d2f89b;color:#1b2512;border-color:#d2f89b;margin-bottom:10px;font-weight:650}.actions .paired button{display:flex;gap:10px;justify-content:center}.action-note{display:flex;justify-content:space-between;font-size:9px;color:#606060;margin-top:14px}button:hover{filter:brightness(1.15)}button:disabled{opacity:.4;cursor:default}.panel-footer{border-top:1px solid #292929;padding:18px 23px;display:flex;align-items:center;justify-content:space-between;font-size:7px;letter-spacing:1.2px;color:#626262}.color-dots{display:flex;gap:4px}.color-dots i{width:5px;height:5px;border-radius:50%;background:#e9513f}.color-dots i:nth-child(2){background:#f49835}.color-dots i:nth-child(3){background:#f3d64b}.color-dots i:nth-child(4){background:#72b675}.color-dots i:nth-child(5){background:#598ed8}.color-dots i:nth-child(6){background:#ddd}footer{border-top:1px solid #202020;margin:0 4%;height:59px;display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#626262;letter-spacing:1.5px}.footer-mark{font-size:19px;margin-left:17px;color:#b7b7b7}input[type=color]{width:35px;height:25px;border:1px solid #444;border-radius:4px;padding:2px;background:#222}input[type=checkbox]{accent-color:#c9ed9a}button:focus-visible,summary:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #cdecaa;outline-offset:4px}#error{position:fixed;bottom:20px;left:20px;background:#322;padding:20px;max-width:450px;font-size:13px;border-radius:8px}#error[hidden]{display:none}@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 370px}.stage{min-height:850px}}@media(max-width:900px){header{height:80px}.edition{font-size:8px;letter-spacing:1px}main{gap:15px;grid-template-columns:minmax(0,1fr) 305px}.section-content{padding-left:18px;padding-right:18px}summary{padding-left:18px;padding-right:18px}.hints{gap:10px;flex-wrap:wrap}.hints span{font-size:9px}h1{font-size:33px}.view-tools{bottom:133px}}@media(max-width:650px){header{height:73px}.edition{display:none}#panelToggle{display:block;background:#151515;border:1px solid #303030;padding:8px 12px;border-radius:6px;font-size:11px;color:#bbb}#panelToggle span{margin-left:12px}main{display:block}.stage{height:620px;min-height:0}.intro{top:28px}h1{font-size:35px}.intro p{font-size:12px}#viewport{inset:140px -12px 38px}.cube-caption{bottom:76px}.view-tools{bottom:110px;right:0}.hints{bottom:22px;gap:16px}.hints span{font-size:8px}aside{margin:0 0 25px}.panel-heading{padding:22px}aside.hidden{display:none}.section-content{padding:0 22px 23px}summary{padding:20px 22px}label,output{font-size:12px}.panel-footer{font-size:8px}footer{font-size:6px;letter-spacing:1px;height:60px}.actions button{font-size:12px;padding:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}