/* mw.css — ManyHand Muscle Workout 3D: a dark anatomy studio on the cream site page. */

:root{
  --cream:#faf5ec; --paper:#fffdf8; --ink:#221a12; --inksoft:#6f6152;
  --brand:#0e386d; --brand2:#0b7d74; --line:#e8ddc9;

  --bg:#0c0e12; --panel:#12151b; --panel2:#181c24; --panel3:#20252f;
  --edge:#242a35; --edge2:#313847; --edge3:#465066;
  --text:#eceff4; --dim:#9099ab; --faint:#606a7d;
  --hot:#ff4a1c; --hot2:#ff7a4d; --amber:#ffad33; --green:#3ddc97; --blue:#6fb2ff;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:14px;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif; background:var(--cream); color:var(--ink);
  line-height:1.5; display:flex; flex-direction:column; min-height:100%; }
button,select,input{ font:inherit; color:inherit; }
button{ cursor:pointer; }
svg{ display:block; }
[hidden]{ display:none !important; }

header.site{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1.5px solid var(--line); background:var(--paper); }
header.site .brand{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:20px; letter-spacing:-.02em; color:var(--brand); text-decoration:none; display:flex; align-items:center; gap:8px; }
header.site .brand img{ width:24px; height:24px; }
header.site .brand span{ color:var(--brand2); }
header.site .back{ font-size:13px; font-weight:700; color:var(--brand); text-decoration:none; }

main{ width:100%; max-width:1320px; margin:0 auto; padding:16px 14px calc(36px + env(safe-area-inset-bottom)); }
h1.title{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:30px; letter-spacing:-.02em; text-align:center; margin:2px 0 0; }
.sub{ text-align:center; color:var(--inksoft); font-size:15px; margin:2px auto 14px; max-width:680px; }
.crumbs{ text-align:center; font-size:13px; margin:-6px 0 10px; color:var(--inksoft); }
.crumbs a{ color:var(--brand); font-weight:700; text-decoration:none; }

/* ===================================================================== */
/* The app                                                                */
/* ===================================================================== */
.app{ position:relative; background:var(--bg); color:var(--text); border-radius:22px; padding:10px;
  box-shadow:0 30px 60px -36px rgba(10,12,18,.75), 0 0 0 1px #000 inset; isolation:isolate; }
.app :focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.topbar{ display:flex; align-items:center; gap:8px; padding:2px 2px 10px; flex-wrap:wrap; }
.tabs{ display:inline-flex; background:var(--panel); border:1px solid var(--edge); border-radius:12px; padding:3px; gap:2px; }
.tabs button{ border:0; background:transparent; color:var(--dim); font-size:13.5px; font-weight:800; padding:7px 13px; border-radius:9px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.tabs button svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tabs button[aria-selected="true"]{ background:var(--panel3); color:var(--text); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 6px -2px #000; }
.tabs .count{ font:700 10.5px/1 var(--mono); background:var(--hot); color:#fff; border-radius:9px; padding:3px 6px; }
.sp{ flex:1 1 auto; }
.search{ position:relative; flex:0 1 300px; min-width:170px; }
.search input{ width:100%; height:38px; border-radius:11px; border:1px solid var(--edge2); background:var(--panel2); padding:0 12px 0 34px; font-size:14px; font-weight:600; color:var(--text); }
.search input::placeholder{ color:var(--faint); }
.search svg{ position:absolute; left:11px; top:11px; width:16px; height:16px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; }
.qres{ position:absolute; left:0; right:0; top:42px; z-index:20; background:#151922; border:1px solid var(--edge2); border-radius:12px; padding:4px; max-height:340px; overflow:auto; box-shadow:0 18px 40px -12px #000; }
.qres button{ display:flex; width:100%; align-items:center; gap:8px; border:0; background:transparent; padding:8px 10px; border-radius:8px; text-align:left; font-size:13.5px; font-weight:700; color:var(--text); }
.qres button small{ margin-left:auto; color:var(--faint); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.qres button:hover, .qres button.on{ background:var(--panel3); }
.tbtn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--edge2); background:var(--panel2); border-radius:11px; height:38px; min-width:38px; padding:0 11px; font-size:13.5px; font-weight:800; color:var(--text); }
.tbtn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tbtn:hover{ border-color:var(--edge3); background:var(--panel3); }

.split{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(320px, 1fr); gap:10px; align-items:stretch; }

/* ---------------- stage ---------------- */
.stage{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--edge); min-height:560px; height:clamp(560px, 78vh, 780px);
  background:radial-gradient(110% 80% at 50% 18%, #2b2f38 0%, #16191f 52%, #0b0c10 100%); touch-action:none; user-select:none; -webkit-user-select:none; }
.stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; cursor:grab; }
.stage canvas:active{ cursor:grabbing; }
.stage.picky canvas{ cursor:pointer; }
.views{ position:absolute; right:10px; top:10px; z-index:3; display:flex; gap:3px; background:rgba(8,10,14,.55); padding:3px; border-radius:11px; backdrop-filter:blur(6px); }
.views button{ border:0; background:transparent; color:rgba(255,255,255,.7); font-size:12px; font-weight:800; padding:6px 10px; border-radius:8px; }
.views button[aria-pressed="true"]{ background:rgba(255,255,255,.15); color:#fff; }
.views button:hover{ color:#fff; }
.stage-tools{ position:absolute; left:10px; top:10px; z-index:3; display:flex; gap:6px; flex-wrap:wrap; }
.chipbtn{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:15px; border:1px solid rgba(255,255,255,.14); background:rgba(8,10,14,.55);
  color:rgba(255,255,255,.82); font-size:12px; font-weight:800; backdrop-filter:blur(6px); }
.chipbtn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chipbtn[aria-pressed="true"]{ border-color:var(--amber); color:var(--amber); }
.chipbtn:hover{ color:#fff; }
.tip{ position:absolute; z-index:4; pointer-events:none; transform:translate(14px, -50%); background:rgba(10,12,16,.9); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-size:13px; font-weight:800; padding:6px 10px; border-radius:10px; white-space:nowrap; box-shadow:0 8px 20px -8px #000; }
.tip small{ display:block; font-size:11px; font-weight:600; color:var(--dim); }
.labels{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.labels button{ position:absolute; transform:translate(-50%, -50%); pointer-events:auto; border:1px solid rgba(255,255,255,.22); background:rgba(10,12,16,.72);
  color:#fff; font-size:11.5px; font-weight:800; padding:4px 8px; border-radius:12px; white-space:nowrap; transition:opacity .2s; backdrop-filter:blur(4px); }
.labels button:hover, .labels button.on{ background:var(--hot); border-color:var(--hot); }
.labels button.side{ opacity:0; pointer-events:none; }
.phase{ position:absolute; left:50%; top:54px; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:10px; background:rgba(8,10,14,.6);
  border:1px solid rgba(255,255,255,.12); padding:6px 14px; border-radius:20px; font-size:14px; font-weight:800; backdrop-filter:blur(6px); white-space:nowrap; }
.phase .dot{ width:9px; height:9px; border-radius:50%; background:var(--hot); box-shadow:0 0 10px var(--hot); }
.phase[data-ph="e"] .dot{ background:var(--amber); box-shadow:0 0 10px var(--amber); }
.phase[data-ph="h"] .dot{ background:var(--blue); box-shadow:0 0 10px var(--blue); }
.phase[data-ph="r"] .dot{ background:var(--dim); box-shadow:none; }
.phase .rep{ font:700 12px/1 var(--mono); color:var(--dim); }
.legend{ position:absolute; left:12px; bottom:12px; z-index:3; display:flex; gap:12px; font-size:12px; font-weight:700; color:rgba(255,255,255,.75); background:rgba(8,10,14,.5); padding:5px 10px; border-radius:12px; }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.legend .p i{ background:var(--hot); } .legend .s i{ background:var(--amber); }
.dock{ position:absolute; left:10px; right:10px; bottom:10px; z-index:3; display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:rgba(9,11,15,.78);
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:8px; backdrop-filter:blur(10px); }
.play{ width:46px; height:46px; border-radius:14px; border:0; display:grid; place-items:center; background:linear-gradient(180deg, #ff7a4d, #ff4a1c); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 18px -8px #ff4a1c; flex:none; }
.play svg{ width:20px; height:20px; fill:currentColor; }
.play .i-pause{ display:none; } .playing .play .i-pause{ display:block; } .playing .play .i-play{ display:none; }
.posrow{ display:flex; gap:6px; flex-wrap:wrap; flex:1 1 200px; min-width:0; }
.posbtn{ height:34px; padding:0 12px; border-radius:17px; border:1px solid var(--edge2); background:var(--panel2); font-size:12.5px; font-weight:800; color:var(--dim); white-space:nowrap; }
.posbtn small{ font:700 10.5px/1 var(--mono); color:var(--faint); margin-right:5px; }
.posbtn[aria-pressed="true"]{ border-color:var(--hot); color:#fff; background:rgba(255,74,28,.16); }
.speed{ display:inline-flex; background:var(--panel); border:1px solid var(--edge); border-radius:10px; padding:2px; }
.speed button{ border:0; background:transparent; color:var(--dim); font:700 12px/1 var(--mono); padding:8px 8px; border-radius:7px; }
.speed button[aria-pressed="true"]{ background:var(--panel3); color:#fff; }
.loading{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; color:var(--dim); font-size:14px; font-weight:700; background:rgba(12,14,18,.6); }
.loading .bar{ width:180px; height:4px; border-radius:2px; background:var(--panel3); overflow:hidden; margin-top:10px; }
.loading .bar span{ display:block; height:100%; width:40%; background:var(--hot); animation:load 1s ease-in-out infinite alternate; }
@keyframes load{ from{ transform:translateX(-60%); } to{ transform:translateX(200%); } }
.fallback{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; color:var(--dim); font-size:14px; }

/* ---------------- panel ---------------- */
.panel{ background:var(--panel); border:1px solid var(--edge); border-radius:16px; min-width:0; display:flex; flex-direction:column; overflow:hidden; height:clamp(560px, 78vh, 780px); }
.pane{ flex:1 1 auto; overflow:auto; padding:16px 16px 18px; scrollbar-width:thin; scrollbar-color:var(--edge2) transparent; }
.pane h2{ font-family:"Fraunces",Georgia,serif; font-size:25px; font-weight:800; letter-spacing:-.01em; line-height:1.15; color:#fff; }
.pane h3{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:18px 0 8px; }
.pane p{ color:#c3c9d5; font-size:14px; }
.pane .latin{ font-size:13px; color:var(--dim); font-style:italic; margin:3px 0 10px; }
.pane ul.dots, .pane ol.steps{ padding-left:0; list-style:none; display:grid; gap:7px; }
.pane ul.dots li{ position:relative; padding-left:18px; font-size:14px; color:#c3c9d5; }
.pane ul.dots li::before{ content:""; position:absolute; left:3px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--hot); }
.pane ul.dots.warn li::before{ background:var(--amber); }
.pane ul.dots.ok li::before{ background:var(--green); }
.pane ol.steps{ counter-reset:s; }
.pane ol.steps li{ counter-increment:s; position:relative; padding:8px 10px 8px 40px; border-radius:11px; background:var(--panel2); font-size:14px; color:#d3d8e2; border:1px solid transparent; transition:border-color .25s, background .25s; }
.pane ol.steps li::before{ content:counter(s); position:absolute; left:10px; top:8px; width:21px; height:21px; border-radius:50%; background:var(--panel3); color:#fff;
  font:800 11.5px/21px var(--mono); text-align:center; }
.pane ol.steps li.now{ border-color:rgba(255,74,28,.5); background:rgba(255,74,28,.08); }
.pane ol.steps li.now::before{ background:var(--hot); }
.back-btn{ display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--dim); font-size:12.5px; font-weight:800; padding:0; margin-bottom:8px; }
.back-btn:hover{ color:#fff; }
.back-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.badges{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.badge{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:12px; background:var(--panel3); font-size:11.5px; font-weight:800; color:#cfd5e0; }
.badge.l1{ color:#7fe0a8; } .badge.l2{ color:#ffd16b; } .badge.l3{ color:#ff8a6b; }
.mchips{ display:flex; flex-wrap:wrap; gap:6px; }
.mchip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px 0 9px; border-radius:15px; border:1px solid var(--edge2); background:var(--panel2); font-size:12.5px; font-weight:800; color:#e1e5ec; }
.mchip i{ width:9px; height:9px; border-radius:50%; background:var(--amber); }
.mchip.p i{ background:var(--hot); box-shadow:0 0 8px var(--hot); }
.mchip:hover{ border-color:var(--edge3); }
.regions{ display:grid; gap:12px; margin-top:12px; }
.region b{ display:block; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.gchips{ display:flex; flex-wrap:wrap; gap:6px; }
.gchip{ height:32px; padding:0 12px; border-radius:16px; border:1px solid var(--edge2); background:var(--panel2); font-size:13px; font-weight:800; color:#dfe3ea; }
.gchip:hover{ border-color:var(--hot); color:#fff; }
.gchip[aria-pressed="true"]{ background:var(--hot); border-color:var(--hot); color:#fff; }
.hint{ display:flex; gap:10px; align-items:flex-start; background:var(--panel2); border:1px solid var(--edge); border-radius:12px; padding:10px 12px; font-size:13.5px; color:#c7cdd8; margin-top:12px; }
.hint svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--amber); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 10px; }
.fchip{ height:28px; padding:0 10px; border-radius:14px; border:1px solid var(--edge2); background:transparent; font-size:12px; font-weight:800; color:var(--dim); }
.fchip[aria-pressed="true"]{ border-color:var(--text); color:#fff; background:var(--panel3); }
.selrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.selrow select{ appearance:none; -webkit-appearance:none; height:34px; border-radius:10px; border:1px solid var(--edge2); background:var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239099ab' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding:0 28px 0 11px; font-size:13px; font-weight:700; color:var(--text); flex:1 1 140px; }

/* exercise cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--edge); background:var(--panel2); border-radius:13px; overflow:hidden; text-align:left; padding:0; transition:border-color .15s, transform .15s; }
.card:hover{ border-color:var(--edge3); transform:translateY(-1px); }
.card .th{ aspect-ratio:4/3; background:radial-gradient(100% 90% at 50% 25%, #2a2e37, #14171d 70%); position:relative; }
.card .th img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .35s; }
.card .th img.ok{ opacity:1; }
.card .tx{ padding:8px 10px 10px; display:flex; flex-direction:column; gap:3px; }
.card b{ font-size:13.5px; font-weight:800; line-height:1.25; color:#f1f3f7; }
.card span{ font-size:11.5px; font-weight:700; color:var(--dim); }
.card .lv{ position:absolute; top:7px; left:7px; font:700 10px/1 var(--mono); padding:4px 6px; border-radius:7px; background:rgba(8,10,14,.75); }
.card .lv.l1{ color:#7fe0a8; } .card .lv.l2{ color:#ffd16b; } .card .lv.l3{ color:#ff8a6b; }
.card .helps{ position:absolute; top:7px; right:7px; font-size:10px; font-weight:800; padding:3px 6px; border-radius:7px; background:rgba(255,173,51,.18); color:var(--amber); }
.empty{ color:var(--dim); font-size:13.5px; padding:14px; border:1px dashed var(--edge2); border-radius:12px; text-align:center; }

/* sets & reps */
.goals{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.goal{ background:var(--panel2); border:1px solid var(--edge); border-radius:12px; padding:9px 10px; }
.goal b{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:800; }
.goal span{ display:block; font:800 16px/1.25 var(--mono); color:#fff; margin-top:3px; }
.goal small{ display:block; font-size:11.5px; color:var(--dim); font-weight:700; margin-top:2px; }
.rel{ display:flex; gap:8px; flex-wrap:wrap; }
.rel button{ flex:1 1 140px; text-align:left; border:1px solid var(--edge2); background:var(--panel2); border-radius:12px; padding:8px 11px; }
.rel button small{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.rel button b{ font-size:13.5px; color:#fff; }
.rel button:hover{ border-color:var(--edge3); }
.cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 16px; border-radius:12px; border:0; font-size:14px; font-weight:800;
  background:linear-gradient(180deg, #ff7a4d, #ff4a1c); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 10px 20px -12px #ff4a1c; }
.cta svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cta.ghost{ background:var(--panel2); border:1px solid var(--edge2); box-shadow:none; color:var(--text); }
.cta.wide{ width:100%; }
.cta[disabled]{ opacity:.5; cursor:default; }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.note{ font-size:12.5px; color:var(--dim); margin-top:8px; }
.safety{ border-left:3px solid var(--amber); padding:6px 10px; background:rgba(255,173,51,.07); border-radius:0 10px 10px 0; font-size:13.5px; color:#e8d7b8; margin-top:10px; }

/* workout */
.opts{ display:grid; gap:12px; }
.opt b{ display:block; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.seg2{ display:flex; flex-wrap:wrap; gap:5px; }
.seg2 button{ height:32px; padding:0 12px; border-radius:16px; border:1px solid var(--edge2); background:var(--panel2); font-size:12.5px; font-weight:800; color:#d4d9e2; }
.seg2 button[aria-pressed="true"]{ background:#fff; color:#111; border-color:#fff; }
.wlist{ display:grid; gap:7px; counter-reset:w; }
.witem{ display:grid; grid-template-columns:54px 1fr auto; gap:10px; align-items:center; background:var(--panel2); border:1px solid var(--edge); border-radius:13px; padding:7px 8px 7px 7px; }
.witem .th{ width:54px; height:54px; border-radius:10px; overflow:hidden; background:#1c2028; }
.witem .th img{ width:100%; height:100%; object-fit:cover; }
.witem b{ display:block; font-size:13.5px; color:#fff; line-height:1.25; }
.witem span{ display:block; font:700 12px/1.35 var(--mono); color:var(--dim); }
.witem .acts{ display:flex; gap:3px; }
.witem .acts button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--edge2); background:transparent; color:var(--dim); display:grid; place-items:center; }
.witem .acts button:hover{ color:#fff; border-color:var(--edge3); }
.witem .acts svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.witem.done{ opacity:.55; }
.witem.cur{ border-color:var(--hot); }
.wsum{ display:flex; gap:14px; flex-wrap:wrap; font:700 12.5px/1 var(--mono); color:var(--dim); margin:4px 0 10px; }
.wsum b{ color:#fff; }

/* the session */
.session{ display:grid; gap:12px; }
.sx-head small{ font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
.sx-sets{ display:flex; gap:6px; flex-wrap:wrap; }
.sx-sets i{ width:30px; height:30px; border-radius:9px; border:1px solid var(--edge2); display:grid; place-items:center; font:700 12px/1 var(--mono); color:var(--dim); font-style:normal; }
.sx-sets i.done{ background:var(--green); border-color:var(--green); color:#062; }
.sx-sets i.now{ border-color:var(--hot); color:#fff; }
.sx-target{ font:800 28px/1.1 var(--mono); color:#fff; }
.sx-target small{ font:700 13px/1 "Hanken Grotesk",sans-serif; color:var(--dim); margin-left:6px; }
.rest{ display:flex; align-items:center; gap:14px; background:var(--panel2); border:1px solid var(--edge); border-radius:14px; padding:12px; }
.ring{ position:relative; width:84px; height:84px; flex:none; }
.ring svg{ width:84px; height:84px; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:7; }
.ring .bgc{ stroke:var(--panel3); } .ring .fgc{ stroke:var(--blue); stroke-linecap:round; transition:stroke-dashoffset .25s linear; }
.ring span{ position:absolute; inset:0; display:grid; place-items:center; font:800 20px/1 var(--mono); color:#fff; }

/* heat map */
.heat{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); font-weight:700; margin:6px 0 2px; }
.heat .scale{ display:flex; height:9px; border-radius:5px; overflow:hidden; flex:0 0 140px; }
.heat .scale i{ flex:1; }
.hist{ display:grid; gap:6px; }
.hist div{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:#cfd4dd; background:var(--panel2); border-radius:10px; padding:8px 10px; }
.hist small{ color:var(--dim); font:700 11.5px/1.3 var(--mono); }

.toast{ position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:70; background:#151922; color:#fff;
  border:1px solid var(--edge3); padding:10px 16px; border-radius:12px; font-size:13.5px; font-weight:700; box-shadow:0 14px 30px -10px #000; max-width:calc(100% - 32px); }

/* full screen */
html.mw-full, html.mw-full body{ overflow:hidden; }
.app.full{ position:fixed; inset:0; z-index:50; border-radius:0; padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); display:flex; flex-direction:column; }
.app.full .split{ flex:1 1 auto; min-height:0; }
.app.full .stage, .app.full .panel{ height:100%; min-height:0; }

/* ===================================================================== */
/* The guide below                                                        */
/* ===================================================================== */
.guide{ max-width:860px; margin:28px auto 0; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r); padding:22px 22px 18px; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); color:var(--ink); }
.guide h2{ font-family:"Fraunces",Georgia,serif; font-size:22px; font-weight:800; letter-spacing:-.01em; margin:0 0 8px; }
.guide h2:not(:first-child){ margin-top:24px; }
.guide h3{ font-size:16px; font-weight:800; margin:18px 0 6px; }
.guide p, .guide li{ color:var(--inksoft); font-size:14.5px; }
.guide p{ margin:0 0 8px; }
.guide ul, .guide ol{ padding-left:20px; margin:4px 0 8px; }
.guide li{ margin:3px 0; }
.guide b{ color:var(--ink); }
.guide a{ color:var(--brand); font-weight:700; }
.guide details{ border-top:1.5px solid var(--line); padding:11px 0; }
.guide details:last-of-type{ border-bottom:1.5px solid var(--line); }
.guide summary{ cursor:pointer; font-weight:700; font-size:14.5px; }
.guide details p{ margin-top:6px; font-size:14px; }
.guide .cols{ columns:2 220px; column-gap:28px; }
.guide .cols li{ break-inside:avoid; }
.guide .exlist li{ margin:6px 0; }
.guide .exlist small{ color:var(--inksoft); }
.guide .more{ font-size:13.5px; margin-top:14px; }
.guide table{ border-collapse:collapse; width:100%; margin:8px 0 12px; font-size:14px; }
.guide th, .guide td{ text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); color:var(--inksoft); vertical-align:top; }
.guide th{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand2); }

footer{ text-align:center; color:var(--inksoft); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer a{ color:var(--brand); }

/* ===================================================================== */
/* Smaller screens                                                        */
/* ===================================================================== */
@media (max-width:980px){
  .split{ grid-template-columns:1fr; }
  .stage{ height:clamp(380px, 68vh, 640px); min-height:380px; }
  .panel{ height:auto; max-height:none; }
  .pane{ overflow:visible; }
  .app.full .split{ grid-template-rows:1fr; }
  .app.full .panel{ display:none; }
}
@media (max-width:640px){
  main{ padding:10px 8px calc(30px + env(safe-area-inset-bottom)); }
  h1.title{ font-size:24px; }
  .sub{ font-size:13.5px; margin-bottom:10px; }
  .app{ border-radius:16px; padding:7px; }
  .topbar{ gap:6px; }
  .tabs{ order:1; width:100%; }
  .tabs button{ flex:1 1 0; justify-content:center; padding:8px 6px; font-size:12.5px; }
  .tabs button svg{ display:none; }
  .search{ order:2; flex:1 1 auto; }
  #fullBtn{ order:3; }
  .stage{ height:clamp(360px, 118vw, 560px); border-radius:12px; }
  .views button{ padding:6px 7px; font-size:11px; }
  .legend{ display:none; }
  .dock{ left:6px; right:6px; bottom:6px; padding:6px; gap:6px; }
  .play{ width:42px; height:42px; }
  .posbtn{ height:32px; padding:0 9px; font-size:12px; }
  .pane{ padding:14px 12px 16px; }
  .pane h2{ font-size:22px; }
  .goals{ grid-template-columns:1fr 1fr 1fr; }
  .goal span{ font-size:14px; }
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .guide{ padding:18px 16px 14px; }
  .phase{ top:auto; bottom:68px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){ .loading .bar span{ animation:none; } }

/* ===================================================================== */
/* Print: the workout card                                                */
/* ===================================================================== */
.printcard{ display:none; }
@media print{
  @page{ margin:12mm; }
  body{ background:#fff; }
  header.site, .app, .guide, footer, .mh-related, .sub, h1.title, .crumbs, .toast{ display:none !important; }
  .printcard{ display:block; color:#000; font-size:11pt; }
  .printcard h1{ font-family:"Fraunces",Georgia,serif; font-size:20pt; margin:0 0 2mm; }
  .printcard .meta{ font-size:10pt; color:#444; margin-bottom:5mm; }
  .printcard .pex{ display:grid; grid-template-columns:34mm 34mm 1fr; gap:4mm; align-items:start; border-top:0.4mm solid #ccc; padding:3mm 0; break-inside:avoid; }
  .printcard img{ width:34mm; height:26mm; object-fit:cover; border-radius:2mm; background:#222; }
  .printcard h2{ font-size:12.5pt; margin:0 0 1mm; }
  .printcard .sr{ font-family:var(--mono); font-size:10pt; margin-bottom:1.5mm; }
  .printcard ol{ margin:0; padding-left:5mm; font-size:9.5pt; }
  .printcard .boxes{ display:flex; gap:2mm; margin-top:2mm; }
  .printcard .boxes span{ width:6mm; height:6mm; border:0.4mm solid #555; border-radius:1mm; }
  .printcard .foot{ margin-top:6mm; font-size:9pt; color:#555; }
}

/* ===================================================================== */
/* Install, update                                                         */
/* ===================================================================== */
.tbtn.install{ border-color:rgba(255,122,77,.55); color:#ffd2c0; }
.tbtn.install:hover{ border-color:var(--hot); background:rgba(255,74,28,.14); }
@media (max-width:640px){ .tbtn.install span{ display:none; } .tbtn.install{ order:3; } }
.updatepill{ position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 10px); transform:translateX(-50%); z-index:80; border:0; border-radius:20px;
  padding:9px 16px; font-size:13px; font-weight:800; color:#fff; background:linear-gradient(180deg, #ff7a4d, #ff4a1c); box-shadow:0 10px 24px -8px #ff4a1c; }
.installdlg{ margin:auto; max-width:min(440px, calc(100% - 32px)); border:0; border-radius:18px; padding:20px 20px 18px; background:#151922; color:var(--text); }
.installdlg::backdrop{ background:rgba(6,8,12,.66); }
.installdlg h2{ font-family:"Fraunces",Georgia,serif; font-size:21px; margin-bottom:4px; }
.installdlg p{ color:#c3c9d5; font-size:14px; margin-bottom:10px; }
.installdlg .isteps{ background:#1c212b; border-radius:12px; padding:10px 12px; margin-bottom:8px; font-size:13.5px; color:#c7cdd8; }
.installdlg .isteps b{ display:block; color:#fff; margin-bottom:4px; }
.installdlg .isteps ol{ padding-left:18px; }
.installdlg .isteps:not(.mine){ opacity:.7; }
.sheet-handle{ display:none; }

/* ===================================================================== */
/* As an installed app: no website around it, the app fills the screen     */
/* ===================================================================== */
html.is-app, html.is-app body{ height:100%; overflow:hidden; overscroll-behavior:none; background:var(--bg); }
html.is-app body{ touch-action:manipulation; }
html.is-app header.site, html.is-app h1.title, html.is-app .sub, html.is-app .crumbs, html.is-app .guide,
html.is-app .mh-related, html.is-app footer, html.is-app #fullBtn, html.is-app #installBtn{ display:none !important; }
html.is-app main{ max-width:none; padding:0; height:100%; }
html.is-app .app{ position:fixed; inset:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 8px);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
html.is-app .app input{ -webkit-user-select:text; user-select:text; }
html.is-app .split{ flex:1 1 auto; min-height:0; }
html.is-app .stage, html.is-app .panel{ height:100%; min-height:0; }
html.is-app .pane{ overscroll-behavior:contain; }
html.is-app .toast{ bottom:calc(84px + env(safe-area-inset-bottom)); }

/* phones and narrow windows: figure on top, the panel a sheet below, tabs along the bottom */
@media (max-width:980px){
  html.is-app .app{ padding-bottom:0; }
  html.is-app .topbar{ padding:0 0 8px; flex-wrap:nowrap; }
  html.is-app .search{ flex:1 1 auto; min-width:0; }
  html.is-app .split{ display:flex; flex-direction:column; gap:0; --stageH:54%; }
  html.is-app .stage{ flex:0 0 var(--stageH); height:auto; border-radius:16px; }
  html.is-app .panel{ flex:1 1 auto; height:auto; position:relative; margin:-14px -8px 0; border-radius:20px 20px 0 0; border-width:1px 0 0;
    box-shadow:0 -14px 30px -18px #000; z-index:4; }
  html.is-app .pane{ overflow:auto; padding-top:18px; padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  html.is-app .sheet-handle{ display:grid; place-items:center; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:5;
    width:96px; height:22px; border:0; background:transparent; touch-action:none; cursor:ns-resize; }
  html.is-app .sheet-handle span{ width:40px; height:5px; border-radius:3px; background:var(--edge3); }
  html.is-app .tabs{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; width:auto; margin:0; border:0; border-top:1px solid var(--edge);
    border-radius:0; gap:0; background:rgba(12,14,18,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    padding:6px calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 6px) calc(env(safe-area-inset-left) + 8px); }
  html.is-app .tabs button{ position:relative; flex:1 1 0; flex-direction:column; justify-content:center; gap:3px; padding:6px 0 4px; font-size:11px; letter-spacing:.01em;
    border-radius:12px; background:none; box-shadow:none; color:var(--dim); }
  html.is-app .tabs button svg{ display:block; width:23px; height:23px; }
  html.is-app .tabs button[aria-selected="true"]{ color:var(--hot2); background:none; box-shadow:none; }
  html.is-app .tabs button[aria-selected="true"] svg{ filter:drop-shadow(0 0 6px rgba(255,90,40,.55)); }
  html.is-app .tabs .count{ position:absolute; top:1px; left:calc(50% + 8px); }
  html.is-app .phase{ top:auto; bottom:76px; }
  html.is-app .legend{ display:none; }
}
/* a phone turned sideways: figure and panel side by side, tabs still along the bottom */
@media (max-width:980px) and (orientation:landscape) and (max-height:560px){
  html.is-app .split{ flex-direction:row; gap:8px; }
  html.is-app .stage{ flex:1 1 55%; }
  html.is-app .panel{ flex:1 1 45%; margin:0; border-radius:16px; border-width:1px; padding-bottom:0; }
  html.is-app .sheet-handle{ display:none; }
  html.is-app .split{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
}