*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#0d0d10;color:#eee;display:flex;justify-content:center;align-items:center;min-height:100svh}
.stage{display:flex;gap:36px;align-items:center;justify-content:center;padding:16px;width:100%}
.phone{position:relative;width:390px;height:min(800px,94svh);border-radius:38px;overflow:hidden;background:var(--bg);color:var(--fg);box-shadow:0 0 0 10px #1b1b20,0 0 0 11px #333,0 30px 80px #000a;flex:none;font-size:15px}
.scrs{position:absolute;inset:0;overflow:hidden}
.scr{position:absolute;inset:0;overflow-y:auto;display:none;padding-bottom:90px}
.scr.on{display:block}
.splash{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--splash);transition:opacity .35s,visibility .35s}
.splash.off{opacity:0;visibility:hidden}
.splash img,.splash svg{width:132px;animation:pop .6s ease-out both}
.splash .nm{font-weight:700;letter-spacing:.04em;animation:rise .6s .1s ease-out both}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes rise{0%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:1}}
.spot{position:absolute;z-index:40;pointer-events:none;border-radius:14px;box-shadow:0 0 0 999px #000b,0 0 0 3px var(--ac);transition:all .35s;opacity:0}
.spot.on{opacity:1}
.coach{width:340px;background:#17171c;border:1px solid #2b2b33;border-radius:20px;padding:22px;flex:none}
.coach .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa6;margin-bottom:8px}
.coach h2{font-size:21px;margin-bottom:10px;color:#fff}
.coach p{line-height:1.55;color:#c9c9d2;font-size:15px;min-height:96px}
.coach .nav{display:flex;gap:10px;margin-top:18px}
.coach button,.coach a.btn{flex:1;padding:13px;border-radius:12px;border:1px solid #3a3a45;background:#22222a;color:#fff;font-size:15px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none}
.coach button.pri,.coach a.pri{background:var(--ac);border-color:var(--ac);color:var(--acfg)}
.coach button:disabled{opacity:.35}
.dots{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.dots i{width:8px;height:8px;border-radius:50%;background:#333}
.dots i.on{background:var(--ac)}
.free{display:block;margin-top:14px;font-size:13px;color:#8d8d99;text-align:center;cursor:pointer;background:none;border:0;width:100%}
.demo-tag{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:30;font-size:10px;letter-spacing:.12em;background:#000a;color:#fff;padding:3px 9px;border-radius:99px;pointer-events:none}
@media(max-width:820px){
 body{align-items:flex-start}
 .stage{flex-direction:column;gap:12px;padding:10px 8px 14px}
 .phone{width:min(390px,100%);height:calc(100svh - 290px);min-height:380px;box-shadow:0 0 0 6px #1b1b20}
 .coach{width:min(390px,100%);padding:16px}
 .coach p{min-height:0;font-size:14px}
 .coach h2{font-size:18px;margin-bottom:6px}
 .coach .nav{margin-top:12px}.dots{margin-top:10px}.free{margin-top:8px}
}

.cap{position:absolute;left:12px;right:12px;bottom:84px;z-index:45;background:#000d;color:#fff;padding:10px 14px;border-radius:12px;font-weight:600;font-size:14px;text-align:center;display:none}
body.rec .cap{display:block}
body.rec{background:transparent;display:block}
body.rec .stage{padding:0;display:block}
body.rec .coach,body.rec .demo-tag{display:none}
body.rec .phone{width:100vw!important;height:100svh!important;min-height:0!important;border-radius:0;box-shadow:none}

body.rec .spot{box-shadow:0 0 0 999px #0006,0 0 0 3px var(--ac)}