html,body{margin:0;padding:0;background:#f4efe7;font-family:Inter Tight,system-ui,sans-serif;overflow-x:hidden}*{box-sizing:border-box}.stage{min-height:100vh;display:flex;justify-content:center;position:relative;overflow-x:clip;max-width:100vw}.mesh-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.mesh-bg:before,.mesh-bg:after,.mesh-bg>span{content:"";position:absolute;border-radius:50%;filter:blur(110px);opacity:.55;will-change:transform}.mesh-bg:before{width:720px;height:720px;top:-160px;left:-120px;background:radial-gradient(circle,#F59E0B 0%,transparent 70%);animation:meshA 28s ease-in-out infinite alternate}.mesh-bg:after{width:640px;height:640px;top:320px;right:-180px;background:radial-gradient(circle,#EC4899 0%,transparent 70%);animation:meshB 32s ease-in-out infinite alternate}.mesh-bg>span.b3{width:560px;height:560px;bottom:200px;left:30%;background:radial-gradient(circle,#8B5CF6 0%,transparent 70%);animation:meshC 36s ease-in-out infinite alternate;opacity:.45}.mesh-bg>span.b4{width:480px;height:480px;top:1100px;left:-120px;background:radial-gradient(circle,#6366F1 0%,transparent 70%);animation:meshD 30s ease-in-out infinite alternate;opacity:.4}@keyframes meshA{0%{transform:translate(0) scale(1)}to{transform:translate(180px,220px) scale(1.15)}}@keyframes meshB{0%{transform:translate(0) scale(1)}to{transform:translate(-220px,280px) scale(.9)}}@keyframes meshC{0%{transform:translate(0) scale(.95)}to{transform:translate(-160px,-200px) scale(1.2)}}@keyframes meshD{0%{transform:translate(0) scale(1.1)}to{transform:translate(240px,-180px) scale(.85)}}.mesh-bg.dark:before{background:radial-gradient(circle,#6366F1 0%,transparent 70%);opacity:.5}.mesh-bg.dark:after{background:radial-gradient(circle,#EC4899 0%,transparent 70%);opacity:.45}.mesh-bg.dark>span.b3{background:radial-gradient(circle,#8B5CF6 0%,transparent 70%);opacity:.4}.mesh-bg.dark>span.b4{background:radial-gradient(circle,#06B6D4 0%,transparent 70%);opacity:.35}.mesh-bg.off:before,.mesh-bg.off:after,.mesh-bg.off>span{animation:none!important;opacity:.4}input[type=number].fin-num::-webkit-outer-spin-button,input[type=number].fin-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number].fin-num{-moz-appearance:textfield}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#6366f1;cursor:pointer;border:none;box-shadow:0 2px 6px #6366f166}.drawer-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:998;opacity:0;pointer-events:none;transition:opacity .25s}.drawer-scrim.open{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;bottom:0;width:360px;background:#fbfaf7;border-left:1px solid rgba(0,0,0,.06);z-index:999;transform:translate(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-20px 0 50px #00000026}.drawer.open{transform:translate(0)}.drawer-head{padding:18px 22px;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between}.drawer-body{flex:1;overflow-y:auto;padding:16px 22px 24px}.drawer-section{margin-top:18px}.drawer-section:first-child{margin-top:0}.drawer-section-title{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#1a171480;font-family:JetBrains Mono,monospace;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.06)}.ctrl{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:13px}.ctrl-label{color:#1a1714bf}input[type=range]{-webkit-appearance:none;height:4px;background:#00000014;border-radius:99px;flex:1;max-width:140px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#6366f1;cursor:pointer;box-shadow:0 2px 6px #6366f166}.swatch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.swatch{aspect-ratio:1;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:transform .15s}.swatch:hover{transform:scale(1.08)}.swatch.active{border-color:#000000d9;transform:scale(1.05)}.seg{display:flex;gap:0;background:#0000000a;border-radius:8px;padding:3px}.seg button{flex:1;padding:6px 10px;border:none;background:transparent;border-radius:6px;font-family:inherit;font-size:12px;cursor:pointer;color:#1a1714b3}.seg button.active{background:#fff;color:#1a1714;font-weight:600;box-shadow:0 1px 3px #00000014}.gear-btn{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#f59e0b);color:#fff;border:none;cursor:pointer;font-size:22px;box-shadow:0 12px 30px -8px #6366f199;z-index:100;transition:transform .2s}.gear-btn:hover{transform:scale(1.05) rotate(20deg)}