:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#eff1fa;background:#07090f;font-synthesis:none}*{box-sizing:border-box}body{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 320px;height:100dvh;overflow:hidden}button,select,input{font:inherit}button,select{color:inherit;background:#161922;border:1px solid #2b303d;border-radius:7px;font-size:14px}button{cursor:pointer;padding:9px 12px}button:hover{background:#252b3b}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #9baaff;outline-offset:4px}#stage{position:relative;min-width:0;overflow:hidden}canvas{position:absolute;width:100%;height:100%;inset:0}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:30px 36px;gap:12px}.brand{font:600 19px ui-monospace,monospace;text-decoration:none;color:#f1f3fc}.brand span{font-size:14px;color:#808898;font-weight:400}header button{background:#090c1399;backdrop-filter:blur(12px)}#hero{position:absolute;left:8%;top:34%;pointer-events:none}.eyebrow{font:11px ui-monospace,monospace;letter-spacing:2px;color:#989faf}h1{font-size:clamp(38px,4.8vw,78px);font-weight:480;letter-spacing:-3px;line-height:1.05;margin:20px 0}#hero p{color:#aeb6c9;font-size:clamp(15px,1.5vw,20px);margin-bottom:30px}.sample{display:inline-block;border:1px solid #ffffff20;background:#080b1480;border-radius:8px;padding:14px 18px;font:14px ui-monospace,monospace;color:#d4d9eb}.sample span{margin-left:25px;color:#7d8597}footer{position:absolute;bottom:22px;left:36px;right:36px;display:flex;gap:16px;align-items:center;justify-content:space-between;font:12px ui-monospace,monospace;color:#868fa2}footer>span:nth-child(2){font-size:11px}#panel{background:#101219;border-left:1px solid #252936;padding:26px 24px;overflow-y:auto}.panelhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}h2{font-size:21px;letter-spacing:-.5px;font-weight:500;margin:10px 0 0}#reset{background:transparent;color:#aab2c4;padding:6px 9px}section{padding-bottom:24px;margin-bottom:22px;border-bottom:1px solid #232734}.sectionlabel{font-size:14px;display:block;margin-bottom:12px;color:#c6cbd8}.presets{display:flex;gap:5px}.presets button{flex:1;padding:9px 5px}.presets .active{background:#333b58;border-color:#7486bd;color:white}.range{margin-bottom:19px}.range:last-child{margin-bottom:0}.range label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px;color:#c6cbd8}.range output{font:12px ui-monospace,monospace;color:#8f9ab5}input[type=range]{display:block;width:100%;height:4px;accent-color:#a5b5ff;cursor:pointer}select{width:100%;padding:10px}#colors{display:flex;gap:8px;margin-top:13px}input[type=color]{width:27px;height:27px;border:0;background:none;padding:0;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}.toggles{display:grid;gap:15px}.toggles label{font-size:14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}input[type=checkbox]{accent-color:#a5b5ff;width:16px;height:16px}.export{width:100%;background:#dbe3ff;color:#171d2f;border:0;padding:12px}.export:hover{background:#eef1ff}.hint{font-size:12px;line-height:1.6;color:#7f889c}.clean{grid-template-columns:1fr}.clean #panel{display:none}#status{font-size:12px;color:#b4c4ff}@media(max-width:800px){body{height:auto;min-height:100dvh;display:block;overflow:auto}#stage{height:72dvh;min-height:430px}#panel{border-left:0;border-top:1px solid #252936;padding:24px}#ranges{display:grid;grid-template-columns:1fr 1fr;gap:18px}header{padding:22px}header .brand span{display:none}#hero{left:8%;top:29%}h1{letter-spacing:-2px;font-size:44px}footer{left:22px;right:22px}footer>span:nth-child(2){display:none}.clean #stage{height:100dvh}}