*{box-sizing:border-box}body{margin:0;background:#08090e;color:#f5f0ed;font-family:Arial,sans-serif;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}.grain{position:fixed;inset:0;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")}header{position:fixed;top:0;width:100%;padding:32px 4.5%;display:flex;justify-content:space-between;align-items:center}.brand{color:inherit;text-decoration:none;font-size:30px;letter-spacing:-2px;font-weight:600;display:flex;align-items:center;gap:24px}.brand span{font-size:8px;letter-spacing:2px;font-weight:400;color:#b0aeb8;border-left:1px solid #ffffff30;padding-left:24px}button{font:inherit;color:inherit;background:#ffffff08;border:1px solid #ffffff22;border-radius:30px;padding:12px 19px;cursor:pointer;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);font-size:11px}button:hover{background:#ffffff16}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #88e3e0;outline-offset:5px}main{position:fixed;top:25%;left:7%;pointer-events:none;text-shadow:0 2px 30px #08090e}.eyebrow{font-size:9px;letter-spacing:3px;color:#b8b1c4}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(65px,8vw,130px);letter-spacing:-6px;margin:28px 0 22px;line-height:1}h1 em{font-weight:400;color:#ded4e9}p{font-size:12px;line-height:1.9;color:#bbb3c3}.hint{position:fixed;bottom:154px;left:50%;transform:translate(-50%);font-size:8px;letter-spacing:2px;color:#c5bbc9;white-space:nowrap;pointer-events:none;transition:opacity 1s}.panel{position:fixed;bottom:70px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:20px;padding:15px 22px;background:#15131dbd;border:1px solid #ffffff20;border-radius:50px;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 10px 40px #0005}.palettes{display:flex;gap:12px}.swatch{padding:0;width:25px;height:25px;border-radius:50%;background:var(--swatch);border:0;position:relative}.swatch.active:after{content:"";position:absolute;inset:-5px;border:1px solid #ffffffb0;border-radius:50%}.separator{height:26px;width:1px;background:#fff2}.panel label{display:flex;align-items:center;gap:12px;font-size:10px;color:#c8becf}.panel input{width:85px;accent-color:#baa7da}.panel>button{border:0;background:none;white-space:nowrap;padding:8px 0}.panel>button:hover{color:#c5b5f4}footer{position:fixed;bottom:24px;padding:0 4.5%;width:100%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#a99dae;pointer-events:none}#toast{position:fixed;top:94px;right:4.5%;background:#22212d;padding:12px 20px;border-radius:25px;font-size:12px;opacity:0;transition:.3s;pointer-events:none}#toast.visible{opacity:1}@media(max-width:650px){header{padding:24px 6%}.brand span{display:none}main{top:22%;left:8%}h1{font-size:74px;letter-spacing:-4px}.panel{width:90%;max-width:410px;border-radius:24px;gap:16px;justify-content:center;flex-wrap:wrap;padding:20px;bottom:62px}.panel label{flex:1;justify-content:center}.panel input{width:70px}.separator{display:none}.hint{bottom:196px;font-size:7px;letter-spacing:1.4px}footer{padding:0 6%;font-size:7px}footer>span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){.hint,#toast{transition:none}}