:root{--bg:#0b1020;--c1:#ff7a3c;--c2:#5b8cff;--tx:#eef1ff;--mu:#9aa4c7;--card:rgba(255,255,255,.07);--bd:rgba(255,255,255,.14)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font:16px/1.55 ui-rounded,"Segoe UI",system-ui,sans-serif;background:radial-gradient(1200px 700px at 10% -10%,#26307a66,transparent),radial-gradient(900px 600px at 100% 10%,#ff7a3c30,transparent),var(--bg);color:var(--tx);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
#bg{position:fixed;inset:0;z-index:-1}#glow{position:fixed;left:0;top:0;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;background:radial-gradient(#5b8cff38,transparent 65%);pointer-events:none;z-index:0}
nav{display:flex;align-items:center;gap:6px;padding:14px 5vw;flex-wrap:wrap;position:relative;z-index:3}
nav a{color:var(--mu);text-decoration:none;padding:7px 12px;border-radius:99px;transition:.2s}nav a:hover{color:#fff;background:var(--card)}
nav .logo{display:flex;gap:10px;align-items:center;font-weight:800;font-size:21px;color:#fff;margin-right:auto;padding:0}nav .logo svg{width:38px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}nav .logo:hover svg{transform:rotate(-12deg) scale(1.12)}
main{flex:1;padding:2vh 5vw 6vh;max-width:1100px;width:100%;margin:auto;position:relative;z-index:1}
footer{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:22px;color:var(--mu);font-size:14px;position:relative;z-index:1}footer a{color:var(--mu)}
h1{font-size:clamp(34px,6vw,62px);line-height:1.04;letter-spacing:-.03em;margin-bottom:16px}h2{font-size:26px;margin-bottom:10px;word-break:break-word}h3{margin:16px 0 6px}
.sub,p{color:var(--mu)}.sub{font-size:18px;margin-bottom:24px}.small{font-size:13px;margin-top:10px}a{color:#9bb8ff}
.card{background:var(--card);border:1px solid var(--bd);border-radius:28px;padding:28px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px #0006;transition:transform .15s ease-out}.center{text-align:center}.big{font-size:60px}
.btn{display:inline-block;border:0;cursor:pointer;color:#fff;font:inherit;font-weight:700;padding:13px 24px;border-radius:99px;background:linear-gradient(135deg,var(--c1),#ff4f7a);text-decoration:none;box-shadow:0 10px 30px #ff7a3c55;transition:transform .15s,box-shadow .2s;margin:4px 4px 4px 0}.btn:hover{box-shadow:0 14px 44px #ff7a3c99;color:#fff}.btn.ghost{background:var(--card);border:1px solid var(--bd);box-shadow:none}.btn.sm{padding:7px 14px;font-size:14px}.btn.red{background:#c0344f;box-shadow:none}.btn:disabled{opacity:.5;cursor:wait}
input,select{width:100%;padding:13px 16px;margin:6px 0;border-radius:14px;border:1px solid var(--bd);background:#0007;color:inherit;font:inherit}input:focus,select:focus,.btn:focus-visible{outline:2px solid var(--c2);outline-offset:2px}select option{background:#12172e}
.err{color:#ff8a9a;min-height:1.5em;margin-top:8px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:5vh 0}.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:20px}.feats .card{padding:22px}
@media(max-width:820px){.hero{grid-template-columns:1fr}}
.auth{max-width:430px;margin:0 auto}.fox-wrap{width:170px;margin:0 auto -38px;position:relative;z-index:2}.fox{display:block;width:100%}
.tabs{display:flex;gap:6px;margin-bottom:12px;background:#0006;border-radius:99px;padding:4px}.tabs a{flex:1;text-align:center;padding:8px;border-radius:99px;color:var(--mu);text-decoration:none}.tabs a.on{background:linear-gradient(135deg,var(--c1),#ff4f7a);color:#fff}
.pup{transition:transform .15s}.paw{transition:transform .38s cubic-bezier(.34,1.56,.64,1)}.fox.hide .paw{transform:translateY(-94px)}
.fox .hap,.fox .brow,.fox .bl,.fox .mh,.fox .ma{display:none}.fox.happy .eye,.fox.happy .mn,.fox.angry .mn{display:none}.fox.happy .hap,.fox.happy .bl,.fox.happy .mh,.fox.angry .brow,.fox.angry .ma{display:inline}
.fox.angry .face{filter:hue-rotate(-18deg) saturate(1.8) brightness(.95)}.fox.angry{animation:shake .5s}.fox.happy .head{animation:hop .5s 2}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}@keyframes hop{50%{transform:translateY(-12px)}}
.meter{display:flex;gap:14px;align-items:center;background:#0005;border-radius:18px;padding:12px 14px;margin:8px 0}.meter svg{width:74px;flex:none}.meter circle{fill:none;stroke-width:7}.meter .bg{stroke:#ffffff1f}
#ring{stroke-linecap:round;stroke-dasharray:214;stroke-dashoffset:214;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .6s cubic-bezier(.3,1.4,.5,1),stroke .4s}
.meter[data-s="5"] .sh{animation:pulse .8s infinite}.sh{transition:.4s}@keyframes pulse{50%{transform:scale(1.25)}}.meter b{display:block;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:5px}.chips span{font-size:12px;padding:3px 9px;border-radius:99px;background:#ffffff14;color:var(--mu);transition:.3s}.chips span.ok{background:#27c27a33;color:#7dffc0;transform:scale(1.08)}
.cf{position:fixed;width:9px;height:9px;border-radius:2px;z-index:9;pointer-events:none}
.drop{display:block;border:2px dashed var(--bd);border-radius:22px;padding:34px 16px;text-align:center;cursor:pointer;transition:.25s;margin-bottom:12px}.drop:hover,.drop.on{border-color:var(--c1);background:#ff7a3c14;transform:scale(1.015)}.drop .di{font-size:38px}
.bar{height:12px;background:#0007;border-radius:9px;overflow:hidden;margin:12px 0}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c1),var(--c2));transition:width .25s}
.stage{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(#141a45,#3b3f8f 62%,#ff9a5c);box-shadow:0 20px 60px #0006;width:100%;height:220px}
.sc{position:absolute;left:50%;top:0;margin-left:-320px;width:640px;height:220px;transform-origin:center top}.sun{position:absolute;left:60px;top:26px;width:54px;height:54px;border-radius:50%;background:#ffe8a3;box-shadow:0 0 50px #ffd36e}
.road{position:absolute;left:0;right:0;bottom:0;height:40px;background:#232733}.road:after{content:"";position:absolute;left:0;right:0;top:18px;height:4px;background:repeating-linear-gradient(90deg,#fff 0 30px,transparent 30px 60px)}
.rolling .road:after{animation:rd .45s linear infinite}@keyframes rd{to{background-position:-60px 0}}.house{position:absolute;right:30px;bottom:38px;width:170px}
.truck{position:absolute;left:205px;bottom:34px;width:230px}.truck svg{display:block;width:230px}.rolling .truck svg{animation:bump .35s infinite}@keyframes bump{50%{transform:translateY(-2px)}}
.wh{transform-box:fill-box;transform-origin:center}.rolling .wh{animation:sp .4s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.box{position:absolute;width:84px;height:58px;left:237px;bottom:75px;background:#c9954f;border-radius:5px;opacity:0;z-index:4;box-shadow:inset 0 -8px #0002}.box:before{content:"";position:absolute;left:36px;top:0;width:12px;height:100%;background:#e7c98f88}
.lid{position:absolute;left:-4px;right:-4px;top:-9px;height:16px;background:#dba865;border-radius:4px;transform-origin:left bottom;transition:transform .7s cubic-bezier(.3,1.5,.5,1)}.box.open .lid{transform:rotate(-115deg)}
.box.open:after{content:"✨";position:absolute;left:28px;top:-34px;font-size:26px;animation:up 1.2s}@keyframes up{from{transform:translateY(20px);opacity:0}}
.done{text-align:center;font-size:clamp(24px,5vw,40px);margin-top:18px;min-height:1.3em;letter-spacing:.02em}.done.in{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{transform:scale(.4);opacity:0}}
.row{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;padding:14px 18px;margin-bottom:10px;border-radius:20px}.row b{word-break:break-all}.row small{color:var(--mu);display:block}
.b{font-size:12px;padding:2px 10px;border-radius:99px;margin-left:6px}.b.active{background:#27c27a33;color:#7dffc0}.b.blocked{background:#ff4f7a33;color:#ff9ab0}.b.deleted{background:#ffffff22;color:#ccc}.b.expired{background:#ffb74d33;color:#ffd08a}
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}.stats .card{padding:12px 20px;border-radius:18px}.stats b{font-size:24px;display:block}
.tree{max-height:240px;overflow:auto;background:#0005;border-radius:16px;padding:12px 16px;margin:14px 0;font-size:14px}.tree ul{list-style:none;padding:0;margin-top:6px}.tree li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px solid #ffffff10}.tree li span{word-break:break-all}.tree em{color:var(--mu);font-style:normal;white-space:nowrap}
.doc{max-width:760px;margin:0 auto}.doc p{margin-bottom:12px}.page{animation:fi .5s}@keyframes fi{from{opacity:0;transform:translateY(12px)}}
@media(hover:none){#glow{display:none}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}