:root{--bg:#0b0b1a;--m:#ff3cac;--c:#2bd2ff;--y:#ffe14d;--g:#7dff9b;--tx:#e9e6ff;--mut:#8f8ab8}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#1d1240 0%,var(--bg) 60%);color:var(--tx);font-family:'Bricolage Grotesque',sans-serif;min-height:100vh;overflow-x:hidden}
.grid-floor{position:fixed;left:-50%;right:-50%;bottom:0;height:40vh;z-index:-1;background-image:linear-gradient(var(--m) 1px,transparent 1px),linear-gradient(90deg,var(--m) 1px,transparent 1px);background-size:50px 50px;transform:perspective(300px) rotateX(60deg);transform-origin:bottom;opacity:.18;animation:floor 3s linear infinite;mask-image:linear-gradient(transparent,#000)}
@keyframes floor{to{background-position:0 50px}}
header{text-align:center;padding:28px 16px 10px}
h1{font-family:'Bungee',cursive;font-size:clamp(2.4rem,7vw,4.6rem);margin:0;background:linear-gradient(90deg,var(--m),var(--c));-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 18px #ff3cac66)}
.sub{font-weight:300;color:var(--mut);font-style:italic;margin:6px 0 12px}
.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pill{font-family:'JetBrains Mono',monospace;font-size:.78rem;padding:4px 12px;border-radius:99px;border:1px solid #ffffff30;background:#ffffff0d}
main{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1200px;margin:0 auto;padding:16px}
.card{background:#14123099;backdrop-filter:blur(10px);border:1px solid #2bd2ff33;border-radius:20px;padding:18px;box-shadow:0 0 30px #ff3cac14;animation:rise .7s both;animation-delay:var(--d)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.wide{grid-column:1/-1}
h2{font-family:'Bungee',cursive;font-size:1.1rem;margin:0 0 12px;color:var(--c);letter-spacing:.5px}
label{display:block;font-size:.88rem;margin:8px 0;color:var(--mut)}
label b{font-family:'JetBrains Mono',monospace;color:var(--y);float:right}
input[type=range]{width:100%;accent-color:var(--m)}
select{width:100%;margin-top:4px;background:#0b0b1a;color:var(--tx);border:1px solid #2bd2ff55;border-radius:10px;padding:7px;font-family:inherit}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{margin:0;padding:4px 10px;border:1px solid #ff3cac55;border-radius:99px;cursor:pointer;color:var(--tx);font-size:.8rem}
.checks input{accent-color:var(--m);margin-right:4px}
.btn{font-family:'Bricolage Grotesque';font-weight:800;border:none;border-radius:99px;padding:9px 16px;cursor:pointer;background:linear-gradient(90deg,var(--m),#b34bff);color:#fff;transition:.15s;margin:6px 6px 0 0}
.btn:hover{box-shadow:0 0 18px var(--m)}
.btn:active{transform:translateY(2px) scale(.97)}
.btn.ghost{background:transparent;border:1px solid var(--c);color:var(--c)}
.btn.ghost:hover{box-shadow:0 0 14px var(--c)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap}
.mono{font-family:'JetBrains Mono',monospace}
.small{font-size:.78rem;color:var(--mut)}
.cv{width:100%;height:160px;display:block;background:#06061299;border-radius:12px;border:1px solid #ffffff14;margin-top:10px}
.small-cv{height:90px}
.big{height:280px}
#draw-cv{height:200px;touch-action:none;cursor:crosshair}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:5px;max-height:180px;overflow:auto}
.thumbs canvas{width:100%;height:34px;background:#06061299;border-radius:6px;cursor:pointer;border:1px solid #ffffff14}
.thumbs canvas:hover{border-color:var(--c)}
.legend{display:flex;gap:14px;margin-top:6px}.c{color:var(--c)}.m{color:var(--m)}.y{color:var(--y)}.g{color:var(--g)}
.metrics{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:.9rem}
.metrics div{padding:8px 12px;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff18}
.metrics b{color:var(--y)}
footer{text-align:center;padding:30px;color:var(--mut);font-size:.85rem}
footer a{color:var(--c)}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:#1d1240;border:1px solid var(--m);padding:10px 18px;border-radius:12px;transition:.3s;z-index:9}
#toast.show{transform:translateX(-50%)}
#confetti{position:fixed;inset:0;pointer-events:none;width:100%;height:100%;z-index:8}
@media(max-width:800px){main{grid-template-columns:1fr}}