:root{--bg:#f6f1ea;--fg:#1b1714;--card:#fffdf9;--line:#e6dccf;--mut:#7a6f64;--acc:#ff5a36;--acc2:#1f3d2b}
.dark{--bg:#121110;--fg:#f3ece3;--card:#1c1a18;--line:#2e2a26;--mut:#9b9086;--acc:#ff6b47;--acc2:#9fd3b0}
*{box-sizing:border-box}
body{margin:0;font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--fg);transition:background .3s,color .3s}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 10% 0%,rgba(255,90,54,.12),transparent 40%),radial-gradient(circle at 100% 100%,rgba(31,61,43,.12),transparent 40%)}
#root{position:relative;z-index:1}
.serif{font-family:'Fraunces',serif}
.mono{font-family:'JetBrains Mono',monospace}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px}
.inp{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--fg);font:inherit;font-size:14px;outline:none}
.inp:focus{border-color:var(--acc)}
.btn{border-radius:12px;padding:9px 14px;font-weight:700;font-size:14px;transition:transform .12s;cursor:pointer}
.btn:active{transform:scale(.95)}
.btn-p{background:var(--acc);color:#fff}
.btn-g{background:transparent;border:1px solid var(--line);color:var(--fg)}
.mut{color:var(--mut)}
.fadeup{animation:fu .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(24px);transition:all .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.pulse{animation:pl 2s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.shimmer{background:linear-gradient(90deg,var(--line),var(--card),var(--line));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
.dot{animation:bl 1s infinite}
@keyframes bl{50%{opacity:.2}}
.phone{width:375px;height:760px;border-radius:46px;border:10px solid #111;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
.noscroll::-webkit-scrollbar{display:none}
.confetti{position:fixed;top:-10px;width:9px;height:14px;z-index:999;animation:cf 1.8s linear forwards}
@keyframes cf{to{transform:translateY(105vh) rotate(720deg)}}
.drag-over{outline:2px dashed var(--acc)}