:root{
  --bg:#070708;--card:#0F0F12;--card2:#15151a;--line:#2A2416;--line2:#1d1a12;
  --ink:#F4EEE1;--ink2:#cfc9b8;--mu:#8C8778;--mu2:#55524a;
  --acc:#D9A441;--acc-l:#EBC46A;--acc-d:#8E6422;--acc-bg:#15120a;--acc-line:#5a4720;
  --on-acc:#120E05;--ok:#9BD06A;--bad:#E5674E;--hi:#F4EEE1;--sheet:#0c0c0f;--tabbg:rgba(7,7,8,.96);--ov:rgba(0,0,0,.72);
  --r:16px;color-scheme:dark;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
:root[data-mode=light]{--bg:#F5F2EA;--card:#FFFFFF;--card2:#EFEADF;--line2:#ECE5D6;--ink:#17140D;--ink2:#3F3829;--mu:#7A7262;--mu2:#A9A190;--on-acc:#FFFFFF;--bad:#C2412B;--hi:#17140D;--sheet:#FBF9F4;--tabbg:rgba(245,242,234,.96);--ov:rgba(30,25,15,.45);color-scheme:light}
:root[data-mode=light] .card,:root[data-mode=light] .li,:root[data-mode=light] .exc{box-shadow:0 1px 2px rgba(40,30,10,.05)}
html,body{transition:background-color .35s,color .35s}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.45;overscroll-behavior-y:none}
body{min-height:100vh;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
input,select,textarea{font-size:16px}
.cz{font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.3px}
.mu{color:var(--mu);font-size:13px}
.acc{color:var(--acc)}
.hide{display:none!important}

#app{max-width:560px;margin:0 auto;padding:calc(14px + var(--safe-t)) 16px calc(96px + var(--safe-b))}
.top{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.top h1{font-family:Cinzel,serif;font-weight:700;font-size:24px;line-height:1.1;margin:0;flex:1}
.back{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink2);flex:none}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card.hl{border-color:var(--acc-line)}
.stack{display:flex;flex-direction:column;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row{display:flex;align-items:center;gap:10px}
.sp{flex:1}

.sec{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:3px;color:var(--acc);margin:20px 0 10px;text-transform:uppercase}
.sec:after{content:"";flex:1;height:1px;background:var(--line)}
.dm{width:6px;height:6px;background:var(--acc);transform:rotate(45deg);flex:none}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:var(--on-acc);border-top:2px solid var(--acc-l);border-bottom:3px solid var(--acc-d);border-radius:14px;padding:14px 16px;font-size:15px;font-weight:500;width:100%;transition:transform .12s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.lg{padding:17px;font-size:16px}
.btn2{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:14px;padding:13px 14px;font-size:14px;width:100%;transition:transform .12s}
.btn2:active{transform:scale(.98)}
.btn2.danger{color:var(--bad);border-color:#3a1d17}
.lnk{color:var(--acc);font-size:14px;display:inline-flex;align-items:center;gap:6px}
.ib{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--ink2);flex:none}
.ib:active{background:var(--card2)}

.fld{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;outline:none}
.fld:focus{border-color:var(--acc)}
.lab{font-size:12px;color:var(--mu);margin:0 0 5px 2px;display:block}

.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:13px;border:1px solid var(--line);border-radius:20px;padding:6px 12px;color:var(--ink2)}
.chip.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}

.sw{width:46px;height:28px;border-radius:14px;background:var(--line);position:relative;flex:none;transition:background .2s}
.sw:after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--mu);transition:all .28s cubic-bezier(.3,1.5,.5,1)}
.sw.on{background:var(--acc)}.sw.on:after{left:22px;background:var(--on-acc)}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13px;flex:none}
.seg button{padding:6px 11px;color:var(--mu)}
.seg button.on{background:var(--acc);color:var(--on-acc)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px;border-top:1px solid var(--line2);min-height:52px}
.set-row:first-child{border-top:0}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{width:32px;height:32px;border-radius:10px;color:var(--acc);font-size:20px}
.stepper span{min-width:52px;text-align:center}

/* tab bar */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--tabbg);border-top:1px solid var(--line2);padding:8px 8px calc(8px + var(--safe-b));display:flex;justify-content:center}
#tabs .in{display:flex;justify-content:space-around;width:100%;max-width:560px}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--mu2);padding:4px 0;position:relative}
#tabs button i{font-size:23px;font-style:normal}
#tabs button.on{color:var(--acc)}
#tabs button.on:before{content:"";position:absolute;top:-9px;width:6px;height:6px;background:var(--acc);transform:rotate(45deg)}

/* iconos simples (sin dependencias) */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-.14em;flex:none}

/* listas */
.li{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.li .t{font-size:15px}
.li .s{font-size:12.5px;color:var(--mu)}
.li:active{background:var(--card2)}
.medal{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--acc)}

/* entrenamiento activo */
.exc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 6px}
.exc.done{border-color:var(--acc-line)}
.exh{display:flex;align-items:flex-start;gap:8px}
.exh .nm{font-family:Cinzel,serif;font-weight:700;font-size:17px;line-height:1.2}
.hint{display:flex;align-items:center;gap:8px;margin:8px 0 4px;padding:8px 10px;border:1px solid var(--acc-line);background:var(--acc-bg);border-radius:10px;font-size:13px}
.sets{width:100%;border-collapse:collapse;margin-top:6px}
.sets th{font-weight:400;font-size:11.5px;color:var(--mu);text-align:left;padding:4px 4px}
.sets td{padding:4px 4px;vertical-align:middle}
.sets tr.ok td{color:var(--mu)}
.sets tr.cur td .in{border-color:var(--acc)}
.sn{font-family:Cinzel,serif;font-weight:700;font-size:14px;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.sn.w{color:#E9A13B}.sn.f{color:var(--bad)}
.in{width:100%;max-width:84px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center;outline:none}
.in:focus{border-color:var(--acc)}
.prev{font-size:12px;color:var(--mu);white-space:nowrap}
.ck{width:40px;height:36px;border-radius:10px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--mu2);transition:all .2s}
.ck.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc);animation:popck .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes popck{0%{transform:scale(.6)}100%{transform:scale(1)}}
.exf{display:flex;gap:4px;justify-content:space-between;margin-top:4px;border-top:1px solid var(--line2);padding-top:4px}
.exf button{font-size:12.5px;color:var(--acc);padding:8px 6px}

/* overlays */
.ov{position:fixed;inset:0;z-index:40;background:var(--ov);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease-out}
.ov.center{align-items:center;padding:20px}
.sheet{background:var(--sheet);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow:auto;padding:16px 16px calc(18px + var(--safe-b));animation:sheet .32s cubic-bezier(.2,1,.3,1)}
.dlg{background:var(--sheet);border:1px solid var(--line);border-radius:20px;width:100%;max-width:380px;padding:20px;animation:pop .3s cubic-bezier(.2,1.4,.4,1)}
.grab{width:40px;height:4px;background:var(--line);border-radius:2px;margin:0 auto 12px}
@keyframes fade{from{opacity:0}}
@keyframes sheet{from{transform:translateY(100%)}}
@keyframes pop{from{transform:scale(.85);opacity:0}}

#rest .sheet{text-align:center}
.ring-wrap{position:relative;display:flex;justify-content:center}
.ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* toast + confeti */
#toast{position:fixed;left:50%;top:calc(14px + var(--safe-t));transform:translateX(-50%);z-index:60;pointer-events:none;display:flex;flex-direction:column;gap:6px;align-items:center;width:calc(100% - 32px);max-width:420px}
.tst{box-shadow:0 6px 20px rgba(0,0,0,.18);background:var(--card);border:1px solid var(--acc-line);color:var(--ink);border-radius:14px;padding:10px 14px;font-size:14px;display:flex;gap:10px;align-items:center;animation:tin .35s cubic-bezier(.2,1.4,.4,1)}
.tst.out{animation:tout .3s ease-in forwards}
@keyframes tin{from{transform:translateY(-20px);opacity:0}}
@keyframes tout{to{transform:translateY(-20px);opacity:0}}
.cf{position:fixed;top:-20px;width:8px;height:13px;border-radius:2px;z-index:70;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* animaciones de entrada */
.rs{animation:rs .5s cubic-bezier(.2,1.2,.4,1) both}
@keyframes rs{from{transform:translateY(14px);opacity:0}}
.view{animation:vin .28s ease-out}
@keyframes vin{from{opacity:0;transform:translateY(6px)}}

/* splash */
#splash{position:fixed;inset:0;z-index:100;background:#070708;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s}
#splash.bye{opacity:0;pointer-events:none}
.sp-rg{stroke-dasharray:604;stroke-dashoffset:604;animation:dr 1.1s cubic-bezier(.6,0,.2,1) .05s forwards}
.sp-rg2{stroke-dasharray:490;stroke-dashoffset:490;animation:dr 1.1s cubic-bezier(.6,0,.2,1) .2s forwards}
.sp-rn{transform-origin:100px 100px;opacity:0;animation:rn 1.4s cubic-bezier(.2,.8,.2,1) .5s forwards}
.sp-fl{transform-box:fill-box;animation:fL .9s cubic-bezier(.7,0,.15,1) 1s both}
.sp-fr{transform-box:fill-box;animation:fR .9s cubic-bezier(.7,0,.15,1) 1s both}
.sp-ar{transform-box:fill-box;animation:aU .7s cubic-bezier(.2,1.4,.4,1) 1.7s both}
.sp-bs{transform-box:fill-box;transform-origin:center;animation:sx .5s cubic-bezier(.7,0,.2,1) 2.1s both}
.sp-cr{transform-box:fill-box;transform-origin:center;animation:popr .5s cubic-bezier(.2,1.8,.4,1) 2.3s both}
.sp-sw{animation:sweep 1.2s ease-in-out 2.5s both}
.sp-wm{letter-spacing:22px;opacity:0;animation:track 1.2s cubic-bezier(.2,.8,.2,1) 2.4s forwards}
.sp-fd{opacity:0;animation:fdin .8s ease-out forwards}
@keyframes dr{to{stroke-dashoffset:0}}
@keyframes rn{from{transform:rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes fL{from{transform:translate(-36px,24px);opacity:0}}
@keyframes fR{from{transform:translate(36px,24px);opacity:0}}
@keyframes aU{from{transform:translateY(26px);opacity:0}}
@keyframes sx{from{transform:scaleX(0)}}
@keyframes popr{from{transform:scale(0) rotate(-90deg)}}
@keyframes sweep{from{transform:translateX(-260px)}to{transform:translateX(260px)}}
@keyframes track{to{letter-spacing:9px;opacity:1}}
@keyframes fdin{to{opacity:1}}

/* gráficos */
.bars{display:flex;align-items:flex-end;gap:6px;height:90px}
.bars div{flex:1;background:var(--acc);border-radius:4px 4px 0 0;min-height:2px;transform-origin:bottom;animation:barup .7s cubic-bezier(.2,1,.3,1) both}
@keyframes barup{from{transform:scaleY(0)}}
.chart-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:dr 1.6s cubic-bezier(.6,0,.2,1) .2s forwards}

.empty{text-align:center;padding:26px 16px;color:var(--mu)}
.empty .cz{color:var(--ink);font-size:18px;display:block;margin-bottom:4px}

.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.big-time{font-family:Cinzel,serif;font-weight:700;font-size:54px;line-height:1;letter-spacing:1px}
.pill{display:inline-block;font-size:11px;letter-spacing:3px;padding:5px 14px;border:1px solid var(--acc);color:var(--acc)}
.week{display:flex;justify-content:space-between;padding:0 6px}
.week .d{text-align:center;font-size:12px;color:var(--mu)}
.week .d i{display:block;width:16px;height:16px;margin:4px auto 8px;transform:rotate(45deg);border:1px solid #3a3222}
.week .d i.on{background:var(--acc);border-color:var(--acc);animation:popd .45s cubic-bezier(.2,1.8,.4,1) both}
.week .d i.today{border:1.5px solid var(--acc)}
.week .d.t{color:var(--ink)}
@keyframes popd{from{transform:rotate(45deg) scale(0)}}
.plates{display:flex;align-items:center;justify-content:center;gap:3px;height:120px;margin:12px 0}
.plates .bar{width:40px;height:9px;background:#666;border-radius:2px}
.plates .p{border-radius:3px;animation:pin .4s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pin{from{transform:scaleY(0)}}

/* conteo inicial */
#count .cin{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fade .25s ease-out}
.cin-n{font-size:120px;line-height:1;color:var(--acc)}
.cin-n.go{font-size:34px;color:var(--ink);letter-spacing:1px}
.cin-n.pop{animation:cpop .55s cubic-bezier(.2,1.7,.4,1)}
@keyframes cpop{0%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:1}}

/* toques rápidos y sin zoom por doble toque */
button,a,label,.chip,.li,[data-act]{touch-action:manipulation;-webkit-user-select:none;user-select:none}
html{-webkit-text-size-adjust:100%}
/* barra Comenzar */
.startbar{position:fixed;left:0;right:0;bottom:calc(70px + var(--safe-b));z-index:22;display:flex;justify-content:center;padding:10px 16px;pointer-events:none}
.startbar .btn{max-width:528px;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pulse{animation:pulse .5s ease-in-out 2}
@keyframes pulse{50%{transform:scale(1.05)}}

/* ===== Bienvenida ===== */
.ob{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;padding:calc(12px + var(--safe-t)) 20px calc(18px + var(--safe-b));overflow-y:auto;overflow-x:hidden}
.ob>*{position:relative;z-index:1}
.ob .ob-bg{position:fixed;inset:0;z-index:0;background:var(--bg);overflow:hidden;pointer-events:none}
.ob-glow{position:absolute;left:50%;top:32%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,var(--acc) 0%,transparent 60%);opacity:.14;animation:obglow 7s ease-in-out infinite;transition:background .6s}
@keyframes obglow{50%{transform:scale(1.18);opacity:.22}}
.ob-p{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;background:var(--acc-l);opacity:0;animation:obrise linear infinite}
@keyframes obrise{10%{opacity:.8}85%{opacity:.4}100%{transform:translateY(-108vh) translateX(18px);opacity:0}}
.ob-top{display:flex;align-items:center;gap:12px;min-height:42px}
.ob-steps{flex:1;display:flex;gap:6px}
.ob-steps i{flex:1;height:3px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.ob-steps i b{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.8,.2,1) .1s}
.ob-steps i.on b{transform:scaleX(1)}
.ob-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 0;view-transition-name:obbody;animation:obin .55s cubic-bezier(.2,.9,.2,1) both}
.ob-backdir .ob-body{animation-name:obinb}
.ob-vt .ob-body{animation:none}
@keyframes obin{from{opacity:0;transform:translateX(44px)}}
@keyframes obinb{from{opacity:0;transform:translateX(-44px)}}
::view-transition-old(obbody){animation:vtout .3s ease-in both}
::view-transition-new(obbody){animation:vtin .5s cubic-bezier(.2,.9,.2,1) both}
html.vt-back::view-transition-old(obbody){animation-name:vtoutb}
html.vt-back::view-transition-new(obbody){animation-name:vtinb}
@keyframes vtout{to{opacity:0;transform:translateX(-56px) scale(.97)}}
@keyframes vtin{from{opacity:0;transform:translateX(56px) scale(.97)}}
@keyframes vtoutb{to{opacity:0;transform:translateX(56px) scale(.97)}}
@keyframes vtinb{from{opacity:0;transform:translateX(-56px) scale(.97)}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
.ob-foot{padding-top:6px}
.ob-k{font-size:11px;letter-spacing:4px;color:var(--acc)}
.ob-h{font-family:Cinzel,serif;font-weight:700;font-size:31px;line-height:1.12;margin:8px 0 6px}
.ob-s{color:var(--mu);font-size:15px;line-height:1.5}
.ob-hero{display:inline-block;position:relative;animation:obpop .9s cubic-bezier(.2,1.4,.4,1) both}
.ob-hero:before{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,var(--acc) 0%,transparent 65%);opacity:.18;z-index:-1}
.ob-spin{transform-origin:100px 100px;animation:obspin 60s linear infinite}
@keyframes obspin{to{transform:rotate(360deg)}}
@keyframes obpop{from{transform:scale(.6) rotate(-20deg);opacity:0}}
.ob-feat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px;text-align:left}
.ob-feat div{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ob-feat .acc{font-size:17px}
.ob-cta{position:relative;overflow:hidden}
.ob-cta:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 3.2s ease-in-out 1.2s infinite}
@keyframes shine{0%{left:-60%}45%,100%{left:130%}}
.ob-in{margin-top:34px}
.ob-name{width:100%;background:transparent;border:0;outline:0;text-align:center;font-family:Cinzel,serif;font-weight:700;font-size:38px;color:var(--ink);padding:8px 0;caret-color:var(--acc)}
.ob-name::placeholder{color:var(--mu2);font-weight:500}
.ob-line{height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.ob-line:after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.ob-in:focus-within .ob-line:after{transform:scaleX(1)}
.ob-err{color:var(--bad);font-size:13px;text-align:center;min-height:20px;margin-top:8px}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.ob-greet{text-align:center;margin-top:10px;opacity:0;transform:translateY(10px) scale(.96);transition:all .45s cubic-bezier(.2,1.3,.4,1)}
.ob-greet.on{opacity:1;transform:none}
.ob-prev{display:flex;align-items:center;gap:14px;margin:16px 0 14px;padding:14px;border:1px solid var(--acc-line);border-radius:18px;background:var(--acc-bg);transition:background .5s,border-color .5s}
.ob-prev-m{animation:obpop .7s cubic-bezier(.2,1.4,.4,1) both}
.ob-prev-bar{height:5px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.ob-prev-bar b{display:block;height:100%;width:68%;background:var(--acc);border-radius:3px;animation:prevbar 2.6s ease-in-out infinite alternate}
@keyframes prevbar{from{width:20%}to{width:85%}}
.ob-prev-btn{width:44px;height:44px;border-radius:50%;background:var(--acc);color:var(--on-acc);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.ob-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);transition:transform .2s,border-color .3s,background .3s}
.ob-tile:active{transform:scale(.97)}
.ob-tile.sel{border-color:var(--acc);background:var(--acc-bg)}
.ob-sw{display:inline-block;width:22px;height:22px;transform:rotate(45deg);border-radius:4px;margin:3px 3px 6px;vertical-align:middle;flex:none}
.ob-tn{font-weight:500;font-size:15px}
.ob-ck{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--on-acc);display:flex;align-items:center;justify-content:center;font-size:13px;transform:scale(0);transition:transform .35s cubic-bezier(.2,1.8,.4,1)}
.ob-tile.sel .ob-ck{transform:scale(1)}
.ob-mode{display:grid;grid-template-columns:repeat(3,1fr)}
.ob-mode button{padding:10px;display:flex;align-items:center;justify-content:center;gap:6px}
.ob-coach{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.coach{display:flex;align-items:center;gap:14px;text-align:left;padding:15px;border:1.5px solid var(--line);border-radius:18px;background:var(--card);transition:transform .2s,border-color .3s,background .3s}
.coach:active{transform:scale(.98)}
.coach.sel{border-color:var(--acc);background:var(--acc-bg)}
.coach-ic{width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--acc);border:1px solid var(--acc-line);background:var(--acc-bg)}
.coach.sel .coach-ic{background:var(--acc);color:var(--on-acc)}
.coach-n{display:block;font-family:Cinzel,serif;font-weight:700;font-size:18px}
.coach-q{display:block;font-size:12.5px;font-style:italic;color:var(--ink2);margin-top:5px;line-height:1.4}
.eq{display:flex;gap:3px;align-items:flex-end;height:22px;flex:none}
.eq i{width:3px;height:25%;background:var(--mu2);border-radius:2px}
.coach.sel .eq i{background:var(--acc)}
.coach.playing .eq i{animation:eq .7s ease-in-out infinite}
.coach.playing .eq i:nth-child(2){animation-delay:.1s}.coach.playing .eq i:nth-child(3){animation-delay:.25s}.coach.playing .eq i:nth-child(4){animation-delay:.05s}.coach.playing .eq i:nth-child(5){animation-delay:.18s}
@keyframes eq{0%,100%{height:20%}50%{height:100%}}
.ob-ready{position:relative;display:inline-block;animation:obpop 1s cubic-bezier(.2,1.4,.4,1) both}
.burst{position:absolute;inset:0;border:2px solid var(--acc);border-radius:50%;opacity:0;animation:burst 2.4s ease-out infinite}
@keyframes burst{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.ob-lt{display:inline-block;animation:oblt .7s cubic-bezier(.2,1.5,.4,1) both}
@keyframes oblt{from{transform:translateY(24px) scale(.6);opacity:0;filter:blur(6px)}}
.ob-sum{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.ob-sum>span{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:7px 12px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
@media (prefers-reduced-motion:reduce){.ob *,.ob{animation-duration:.01s!important;animation-iteration-count:1!important}}

.cin-n.sm{font-size:96px;color:var(--ink)}
.cin-n.big{font-size:132px;color:var(--acc)}
.ck.tmb{display:inline-flex;color:var(--acc);border-color:var(--acc-line)}