:root{--bg:#070713;--c1:#7c5cff;--c2:#ff4d8d;--c3:#2de2b0;--ink:#f3f3ff;--mu:#9a9ab8;--gl:rgba(255,255,255,.07);--ln:#ffffff18}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Inter,system-ui,sans-serif;min-height:100vh;padding-bottom:90px}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;background:radial-gradient(circle at 20% 20%,#7c5cff55,transparent 40%),radial-gradient(circle at 80% 30%,#ff4d8d44,transparent 40%),radial-gradient(circle at 50% 95%,#2de2b033,transparent 40%);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4%,3%) rotate(6deg) scale(1.12)}}@keyframes rise{from{opacity:0;transform:translateY(16px)}}@keyframes pulse{50%{transform:scale(1.04)}}@keyframes pop{from{transform:scale(.6);opacity:0}}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px}.logo,h1,h2,h3,.big{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;margin:0}
.logo{font-size:28px;letter-spacing:.06em;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
main{max-width:900px;margin:0 auto;padding:0 16px}.card{background:var(--gl);backdrop-filter:blur(14px);border:1px solid var(--ln);border-radius:20px;padding:18px;margin:14px 0;animation:rise .5s both}
.card:nth-child(2){animation-delay:.07s}.card:nth-child(3){animation-delay:.14s}.card:nth-child(4){animation-delay:.21s}
h1{font-size:46px;line-height:1}h2{font-size:30px}.big{font-size:56px;line-height:1}.mu{color:var(--mu);font-size:14px}
.btn{border:0;border-radius:14px;padding:12px 20px;font:600 16px Inter,sans-serif;color:#fff;cursor:pointer;background:linear-gradient(90deg,var(--c1),var(--c2));transition:transform .15s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #7c5cff55}.btn:active{transform:scale(.97)}
.btn.alt{background:none;border:1px solid var(--ln)}input,select,textarea{font:inherit;color:var(--ink);background:#0d0d22;border:1px solid var(--ln);border-radius:12px;padding:11px;width:100%}
label{display:block;font-size:14px;color:var(--mu);margin:10px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cat{border:1px solid var(--ln);background:var(--gl);border-radius:18px;padding:18px;cursor:pointer;text-align:left;color:var(--ink);font:inherit;transition:transform .2s,border-color .2s}.cat:hover{transform:translateY(-4px) rotate(-.5deg);border-color:var(--c1)}.cat b{display:block;font:700 26px "Barlow Condensed",sans-serif}.cat i{font-size:34px;font-style:normal}
.stat b{display:block;font:700 34px "Barlow Condensed",sans-serif}.stat span{color:var(--mu);font-size:14px}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:4px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:#0a0a1ccc;backdrop-filter:blur(16px);border-top:1px solid var(--ln);z-index:5}
nav button{flex:1;max-width:120px;border:0;background:none;color:var(--mu);font:600 13px Inter,sans-serif;padding:8px 4px;border-radius:12px;cursor:pointer}nav button i{display:block;font-size:20px;font-style:normal}nav button.on{color:#fff;background:linear-gradient(90deg,#7c5cff55,#ff4d8d55)}
.opt{display:block;width:100%;text-align:left;margin:8px 0;padding:15px 16px;border-radius:14px;border:2px solid var(--ln);background:var(--gl);color:var(--ink);font:600 17px Inter,sans-serif;cursor:pointer;transition:all .2s}.opt:hover,.opt.on{border-color:var(--c1);transform:translateX(4px)}
.bar{height:6px;background:var(--ln);border-radius:3px;margin-bottom:22px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c1),var(--c2));border-radius:3px;transition:width .4s}
.ex{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--ln)}.chip{display:inline-block;padding:3px 11px;border-radius:99px;background:var(--ln);margin:2px;font-size:14px}.chip.on{background:var(--c3);color:#04281f}
#player{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;transition:background .5s}#player.rest{background:#06201c}
#player svg{width:min(78vw,340px)}#player .ring{transition:stroke-dashoffset .25s linear}.work .num{animation:pulse 1s infinite}
#fx{position:fixed;inset:0;pointer-events:none;z-index:30}.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:linear-gradient(90deg,var(--c1),var(--c2));padding:12px 22px;border-radius:99px;font:700 22px "Barlow Condensed",sans-serif;z-index:40;animation:pop .35s}
.msg{margin:8px 0;padding:10px 14px;border-radius:16px;white-space:pre-wrap;max-width:92%;background:var(--ln);animation:rise .3s}.msg.u{margin-left:auto;background:var(--c1)}table{width:100%;border-collapse:collapse}td,th{padding:7px 6px;border-bottom:1px solid var(--ln);text-align:left}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}