:root{--p:#A42FE9;--m:#EA10FB;--bg:#0d0a12;--card:#2B2132;--tx:#f5f0fa;--mute:#b9aac8}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(900px 500px at 80% -10%,#3a1160 0,transparent 60%),var(--bg);color:var(--tx);font:16px/1.5 Inter,system-ui,sans-serif;overflow-x:hidden}
.wrap{max-width:1000px;margin:auto;padding:24px 18px 80px}
.badge{display:inline-block;border:2px solid #fff;border-radius:10px;padding:2px 14px;font:28px 'Bebas Neue',sans-serif;letter-spacing:1px}
.badge i{color:var(--m);font-style:normal}
h1{font:clamp(64px,16vw,150px)/.9 'Bebas Neue',sans-serif;margin:18px 0 0}
h1 em{color:var(--m)}
.script{font:700 clamp(48px,11vw,96px)/1 Caveat,cursive;color:var(--p);margin:-10px 0 6px;transform:rotate(-3deg);display:block;text-shadow:0 0 30px #a42fe966}
.tag{color:var(--mute);max-width:520px}
h2{font:38px 'Bebas Neue',sans-serif;letter-spacing:2px;color:var(--p);margin:50px 0 12px}
.why{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.why div{background:var(--card);border-radius:14px;padding:18px;border-top:4px solid var(--p)}
.why .n{border-color:var(--m)}
.why b{font:30px 'Bebas Neue';letter-spacing:1px}
.why p{margin:6px 0 0;color:var(--mute)}
.note-line{margin-top:14px;font:700 24px Caveat;color:#fff}
form,.locked{background:var(--card);border-radius:18px;padding:20px;border:1px solid #a42fe94d;box-shadow:0 0 40px #a42fe922}
label{display:block;font-weight:600;margin:12px 0 4px}
label small{color:var(--mute);font-weight:400}
input,textarea{width:100%;background:#150f1b;border:1px solid #4b3a5c;color:var(--tx);border-radius:10px;padding:12px;font:inherit}
input:focus,textarea:focus{outline:2px solid var(--m)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1px solid #6a4a86;background:transparent;color:var(--tx);border-radius:99px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
.chip:hover,.chip.on{background:var(--p);border-color:var(--p)}
.row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:600px){.row{grid-template-columns:1fr}}
button.go{margin-top:18px;width:100%;border:0;border-radius:12px;padding:14px;font:26px 'Bebas Neue';letter-spacing:2px;color:#fff;background:linear-gradient(90deg,var(--p),var(--m));cursor:pointer}
button.go:active{transform:scale(.98)}
.prev{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:16px}
.err{color:#ff8aa8;margin-top:8px}
.bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.wall{display:grid;gap:22px 16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding-top:10px}
.note{position:relative;padding:26px 14px 14px;border-radius:4px;color:#2a1633;font:500 21px/1.15 Caveat,cursive;box-shadow:0 8px 18px #0008;transform:rotate(var(--r));animation:drop .6s cubic-bezier(.3,1.6,.5,1) both;transition:transform .2s}
.note:hover{transform:rotate(0) scale(1.05);z-index:2}
.note.can{background:#c9a6f5}.note.need{background:#ff7ed0}
.note:before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;border-radius:50%;background:var(--p);box-shadow:0 3px 5px #0007;transform:translateX(-50%)}
.note.need:before{background:var(--m)}
.note b{display:block;font:15px 'Bebas Neue';letter-spacing:2px;opacity:.7}
.note small{display:block;margin-top:8px;font:600 12px Inter;opacity:.75}
.note.hit{outline:3px solid #fff;box-shadow:0 0 28px var(--m)}
.note.mine{outline:3px dashed #fff}
@keyframes drop{from{transform:translateY(-60px) rotate(12deg);opacity:0}}
.match{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(90deg,#a42fe933,#ea10fb22);border:1px solid var(--m);border-radius:14px;padding:12px 16px;margin-bottom:10px}
.match a{background:var(--m);color:#fff;text-decoration:none;border-radius:99px;padding:8px 16px;font-weight:600}
.locked{text-align:center;color:var(--mute)}
.blur{filter:blur(7px);pointer-events:none;user-select:none}
.conf{position:fixed;top:-10px;width:10px;height:14px;z-index:9;animation:fall 2.4s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
footer{margin-top:60px;color:var(--mute);font-size:14px;text-align:center}
.note .who{font:700 14px Inter,sans-serif;color:#1d0d26;margin-bottom:8px;line-height:1.25}
.note .who span{display:block;font-weight:500;font-size:12px;opacity:.75}
.note small a{color:inherit;font-weight:700;word-break:break-all}
.back{display:inline-block;margin-top:14px;color:var(--m);font-weight:600}
.btn{display:inline-block;text-decoration:none;color:#fff;font:22px 'Bebas Neue',sans-serif;letter-spacing:2px;padding:10px 22px;border-radius:99px;background:linear-gradient(90deg,var(--p),var(--m));box-shadow:0 0 22px #ea10fb55}
.btn.ghost{background:transparent;border:2px solid var(--p);box-shadow:none}
.top{margin-bottom:18px}
.top{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.top .btn{font-size:18px;padding:8px 18px}
.steps{counter-reset:s}.steps div:before{counter-increment:s;content:counter(s);font:44px 'Bebas Neue';color:var(--m)}
.tabs{display:flex;gap:8px;margin-bottom:6px}.tabs .chip{flex:1;font-size:16px;padding:10px}
button.link{background:none;border:0;color:var(--mute);font:inherit;cursor:pointer;text-decoration:underline}
.center{text-align:center}