:root { --volt:#D7FF3E; --violet:#6B4DFF; --flame:#FF4D2E; --navy:#101A3D; --ice:#9FD8E6; --bone:#F2EFE6; --carbon:#111114; --ph:1s; }
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { background:var(--navy); }
body { min-height:100vh; display:flex; justify-content:center; font-family:Montserrat,Arial,sans-serif; color:var(--carbon); }
#app { display:flex; flex-direction:column; width:100%; max-width:440px; min-height:100vh; background:var(--bone); padding-bottom:env(safe-area-inset-bottom); }
@media (min-width:480px) { body { padding:24px 16px; } #app { min-height:calc(100vh - 48px); border:2px solid var(--carbon); border-radius:28px; overflow:hidden; } }

.top { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:calc(14px + env(safe-area-inset-top)) 20px 14px; background:var(--carbon); color:#fff; }
.top b { font-weight:900; letter-spacing:.06em; font-size:14px; }
.pill { width:auto; padding:6px 12px; border:0; border-radius:99px; background:var(--volt); color:var(--carbon); font:900 11px Montserrat,Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }

.head { padding:22px 20px 6px; }
.eyebrow { font:800 11px Montserrat,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); }
h1 { margin-top:8px; font:900 36px/1.02 Montserrat,Arial,sans-serif; text-transform:uppercase; }
h1 span { background:var(--volt); padding:0 6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.lead { margin-top:12px; font:600 15px/1.45 Montserrat,Arial,sans-serif; }

.week { display:flex; gap:6px; padding:14px 20px 0; }
.week i { flex:1; height:34px; display:grid; place-items:center; border:2px solid var(--carbon); border-radius:12px; background:#fff; font:900 11px Montserrat,Arial,sans-serif; font-style:normal; }
.week i.on { background:var(--violet); color:#fff; }
.week i.rest { background:var(--ice); }
.week i.now { background:var(--volt); }
.progress { margin:14px 20px 0; height:12px; border:2px solid var(--carbon); border-radius:99px; background:#fff; overflow:hidden; }
.progress div { height:100%; background:var(--violet); }
.meta { display:flex; justify-content:space-between; margin-top:8px; font:800 12px Montserrat,Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.pad { padding:0 20px; }

.steps { list-style:none; margin:16px 20px 0; background:#fff; border:2px solid var(--carbon); border-radius:16px; overflow:hidden; }
.steps li { display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:2px solid var(--bone); font:700 14px Montserrat,Arial,sans-serif; }
.steps li:first-child { border-top:0; }
.steps b { width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:99px; background:var(--carbon); color:var(--volt); font-size:12px; }
.steps span { flex:1; text-transform:capitalize; }
.steps em { font-style:normal; font-weight:800; font-size:12px; color:var(--violet); text-transform:uppercase; }

.stage { margin:14px 20px 0; background:var(--volt); border:2px solid var(--carbon); border-radius:22px; padding:10px 6px 4px; }
.art { display:block; width:100%; height:auto; }
.readout { text-align:center; padding:14px 20px 0; }
.readout .big { font:900 44px/1 Montserrat,Arial,sans-serif; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.readout .sub { margin-top:6px; font:800 13px Montserrat,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.tempo { margin:12px 20px 0; }
.bar { height:12px; border:2px solid var(--carbon); border-radius:99px; background:#fff; overflow:hidden; }
.fill { height:100%; width:0; background:var(--violet); }

.cards { display:grid; gap:10px; padding:18px 20px 4px; }
.card { background:#fff; border:2px solid var(--carbon); border-radius:16px; padding:12px 14px; }
.card h3 { font:900 11px Montserrat,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
.card p { font:600 14px/1.4 Montserrat,Arial,sans-serif; }
.card.stop { background:var(--carbon); color:#fff; }
.card.stop h3 { color:var(--flame); }

.cta { display:grid; gap:10px; padding:16px 20px 22px; }
button { width:100%; padding:16px; border:2px solid var(--carbon); border-radius:99px; background:var(--carbon); color:var(--volt); font:900 14px Montserrat,Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
button.ghost { background:#fff; color:var(--carbon); }
.two, .three { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:10px; }
.three button { padding:14px 6px; font-size:12px; letter-spacing:.06em; }

.form { display:grid; gap:18px; padding:18px 20px 24px; }
.form label { display:grid; grid-template-columns:1fr auto; gap:10px; font:700 15px/1.35 Montserrat,Arial,sans-serif; }
.form output { font:900 22px Montserrat,Arial,sans-serif; color:var(--violet); }
.form input[type=range] { grid-column:1 / -1; width:100%; accent-color:var(--violet); height:28px; }
.q { font:800 15px/1.4 Montserrat,Arial,sans-serif; }
.note { font:600 13px/1.45 Montserrat,Arial,sans-serif; padding:12px 14px; border:2px dashed var(--carbon); border-radius:16px; }

.sheet { position:fixed; inset:0; z-index:20; display:grid; align-content:center; gap:14px; padding:20px; background:rgba(16,26,61,.96); }
.sheet video { width:100%; max-height:70vh; border-radius:18px; background:#000; }

/* ---- animations, driven by data-phase / classes set in app.js ---- */
.frozen * { animation-play-state:paused !important; }
.wave { animation:rise 2.4s ease-in-out infinite; }
.w1 { animation-delay:.8s; } .w2 { animation-delay:1.6s; }
@keyframes rise { 0% { transform:translateY(8px); opacity:0; } 40% { opacity:1; } 100% { transform:translateY(-14px); opacity:0; } }
.art-cool .wave { animation-duration:3.6s; }

.swing { transform-origin:180px 30px; transition:transform var(--ph) ease-in-out; transform:rotate(0); }
[data-phase="0"] .art-side .swing { transform:rotate(28deg); }
[data-phase="1"] .art-side .swing { transform:rotate(-28deg); }

.floor, .lift { transition:transform var(--ph) ease-in-out; transform-box:fill-box; transform-origin:center; }
[data-phase="0"] .art-kegel .floor { transform:translateY(-30px); }
[data-phase="0"] .art-kegel .lift { transform:translateY(-24px); }

.grip, .press { transition:transform calc(var(--ph) * .6) ease-out, opacity calc(var(--ph) * .6); transform-box:fill-box; transform-origin:center; }
.press { opacity:0; }
[data-phase="0"] .art-squeeze .grip { transform:scale(.82, .78); }
[data-phase="0"] .art-squeeze .press { opacity:.55; }

.meter { transform-box:fill-box; transform-origin:left center; transform:scaleX(.25); transition:transform 20s ease-out; }
.rising .meter { transform:scaleX(.85); transition:transform 120s cubic-bezier(.2,.6,.3,1); }
[data-stops="1"] .d0, [data-stops="2"] .d0, [data-stops="2"] .d1, [data-stops="3"] .dot { fill:var(--violet); }

[data-phase="0"] .art-rkegel .floor { transform:translateY(22px); }
.breath { transform-box:fill-box; transform-origin:center; transition:transform var(--ph) ease-in-out; }
[data-phase="0"] .art-rkegel .breath { transform:scale(1.5); }

.reach, .raise { transition:transform var(--ph) ease-in-out; }
.raise { transform-box:fill-box; transform-origin:left center; }
[data-phase="0"] .art-pull .reach { transform:translateX(16px); }
[data-phase="1"] .art-pull .reach { transform:translateX(20px); }
[data-phase="0"] .art-towel .raise { transform:rotate(-9deg); }

.art-jelq .hand { animation:stroke var(--ph) cubic-bezier(.45,.05,.55,.95) infinite; }
[data-phase="1"] .art-jelq .hand { animation-name:stroke1; }
@keyframes stroke { 0% { transform:translateX(0); opacity:0; } 8% { opacity:1; } 82% { transform:translateX(220px); opacity:1; } 100% { transform:translateX(220px); opacity:0; } }
@keyframes stroke1 { 0% { transform:translateX(0); opacity:0; } 8% { opacity:1; } 82% { transform:translateX(220px); opacity:1; } 100% { transform:translateX(220px); opacity:0; } }

.swell { transform-box:fill-box; transform-origin:left center; animation:swell 6s ease-in-out infinite; }
@keyframes swell { 50% { transform:scale(1.05, 1.18); } }
.art-rest .breath { animation:breathe 8s ease-in-out infinite; }
@keyframes breathe { 50% { transform:scale(1.35); } }
[data-rings="2"] .r2, [data-rings="1"] .r2, [data-rings="1"] .r1 { opacity:.12; }

.chips { display:flex; flex-wrap:wrap; gap:8px; padding:12px 20px 0; }
.chip { padding:6px 10px; border:2px solid var(--carbon); border-radius:99px; background:#fff; font:800 11px Montserrat,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.chip.lock { background:var(--carbon); color:var(--volt); }
.plist { display:grid; gap:12px; padding:16px 20px 24px; }
.pcard { text-align:left; display:grid; gap:6px; padding:16px; border:2px solid var(--carbon); border-radius:18px; background:#fff; color:var(--carbon); letter-spacing:0; text-transform:none; font:600 14px/1.4 Montserrat,Arial,sans-serif; }
.pcard.on { background:var(--volt); }
.pcard b { font:900 18px/1.1 Montserrat,Arial,sans-serif; text-transform:uppercase; }
.pcard small { font:800 11px Montserrat,Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--violet); }
.tabs { position:sticky; bottom:0; margin-top:auto; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:10px 20px calc(10px + env(safe-area-inset-bottom)); background:var(--carbon); }
.tabs button { padding:12px 4px; font-size:11px; background:transparent; color:#fff; border-color:#fff; }
.tabs button.on { background:var(--volt); color:var(--carbon); border-color:var(--volt); }
.log { list-style:none; margin:16px 20px 0; display:grid; gap:8px; }
.log li { display:flex; justify-content:space-between; gap:10px; padding:12px 14px; border:2px solid var(--carbon); border-radius:14px; background:#fff; font:700 13px Montserrat,Arial,sans-serif; }
.log em { font-style:normal; color:var(--violet); font-weight:800; }
.chart { margin:14px 20px 0; padding:10px; background:#fff; border:2px solid var(--carbon); border-radius:16px; }
.chart svg { display:block; width:100%; height:auto; }
.empty { padding:20px; font:600 14px/1.45 Montserrat,Arial,sans-serif; }

@media (prefers-reduced-motion:reduce) { .wave { animation:none; opacity:.8; } }

.stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 20px 0; }
.stats div { padding:12px 14px; border:2px solid var(--carbon); border-radius:16px; background:#fff; display:grid; gap:2px; }
.stats small { font:800 10px Montserrat,Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--violet); }
.stats b { font:900 28px Montserrat,Arial,sans-serif; }
.stats em { font-style:normal; font:800 12px Montserrat,Arial,sans-serif; color:var(--flame); }
.form input.num { grid-column:1 / -1; width:100%; padding:14px; border:2px solid var(--carbon); border-radius:14px; font:800 20px Montserrat,Arial,sans-serif; background:#fff; }
.thumbs { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 20px 20px; }
.thumb { padding:0; overflow:hidden; border-radius:16px; background:#fff; color:var(--carbon); display:grid; letter-spacing:0; text-transform:none; }
.thumb img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.thumb span { padding:8px; font:800 11px Montserrat,Arial,sans-serif; }
.cam { position:relative; margin:14px 20px 0; border:2px solid var(--carbon); border-radius:22px; overflow:hidden; background:#000; aspect-ratio:16/9; }
.cam video { width:100%; height:100%; object-fit:cover; display:block; }
.guide { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.bubble { position:absolute; left:50%; bottom:10px; width:100px; height:18px; margin-left:-50px; border:2px solid #fff; border-radius:99px; }
.bubble i { position:absolute; left:41px; top:2px; width:14px; height:10px; border-radius:99px; background:var(--flame); }
.bubble.ok i { background:var(--volt); }
.calwrap { margin:14px 20px 0; border:2px solid var(--carbon); border-radius:18px; overflow:hidden; background:#fff; }
.calwrap canvas, .calwrap img { display:block; width:100%; height:auto; touch-action:manipulation; }
.ghostbtn { display:block; text-align:center; padding:16px; border:2px solid var(--carbon); border-radius:99px; background:#fff; font:900 14px Montserrat,Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }

.levels { display:grid; gap:8px; margin-top:6px; }
.levels button { display:flex; justify-content:space-between; gap:10px; padding:12px 16px; font-size:11px; letter-spacing:.06em; text-align:left; }
.levels button b { font-size:11px; }
.tabs button { padding:12px 2px; font-size:10px; letter-spacing:.06em; }