/* atlas.css — extracted from atlas.html. Exercise Atlas surface. */

  /* Atlas 3D modal — lazy-mounted écorché viewer (progressive enhancement) */
  .atlas-3d-modal{width:min(94vw,1100px);height:90vh;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#0b0d12;color:#F0F4F8;overflow:hidden;}
  .atlas-3d-modal::backdrop{background:rgba(3,4,7,.74);backdrop-filter:blur(3px);}
  .atlas-3d-modal .modal-content{display:flex;flex-direction:column;height:100%;}
  .atlas-3d-modal .modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08);}
  .atlas-3d-modal .modal-title{margin:0;font:600 16px/1.3 'Space Grotesk','Inter',system-ui,sans-serif;letter-spacing:-.01em;}
  .atlas-3d-modal .modal-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:#94A3B8;font-size:24px;line-height:1;cursor:pointer;border-radius:8px;}
  .atlas-3d-modal .modal-close:hover{color:#fff;background:rgba(255,255,255,.07);}
  .atlas-3d-modal .viewer-container{flex:1 1 auto;min-height:50vh;position:relative;background:radial-gradient(120% 120% at 50% 38%,#10151d 0%,#080b10 68%,#05070b 100%);}
  .atlas-3d-modal .viewer-container canvas{display:block;width:100%;height:100%;}
  .atlas-3d-modal .viewer-container output{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(7,12,20,.82);border:1px solid rgba(126,167,189,.4);border-radius:999px;padding:8px 16px;color:#d7ecff;font-size:12px;white-space:nowrap;}
  /* form-truth panel — honest, scannable read of the lift (never squeezes the 3D view: flex 0 + capped) */
  .atlas-3d-modal .atlas-form-truth{flex:0 1 auto;min-height:0;max-height:32%;overflow:auto;padding:10px 24px 14px;border-top:1px solid rgba(126,167,189,.2);background:rgba(7,12,20,.55);font:12px/1.5 ui-monospace,monospace;color:#cfe0ee;}
  .atlas-3d-modal .atlas-form-truth[hidden]{display:none;}
  .atlas-3d-modal .ft-grid{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:baseline;}
  .atlas-3d-modal .ft-k{color:#2dd4bf;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10px;white-space:nowrap;}
	  .atlas-3d-modal .ft-sub{color:#8fa6b8;}
	  .atlas-3d-modal .ft-note{margin:8px 0 0;color:#8dd8ff;font-size:11px;}
	  .atlas-browse-card{cursor:pointer;}
	  /* 3D-first modal controls live in-head; no post-document draft CSS. */
	  .atlas-3d-modal .atlas-motion-rig{flex:0 1 auto;min-height:72px;height:clamp(110px,18vh,160px);overflow:hidden;}
	  .atlas-3d-modal .atlas-motion-rig .atk-rig{display:block;width:100%;height:100%;}
	  .atlas-browse-card[role="button"]{cursor:pointer;}
	  .atlas-browse-card[role="button"]:focus-visible{outline:2px solid var(--cy);outline-offset:4px;}
	  .atlas-truth-panel{position:absolute;left:20px;right:20px;bottom:20px;z-index:10;max-width:600px;margin:0 auto;padding:16px;border:1px solid var(--line-2);border-radius:12px;background:rgba(12,16,26,.85);box-shadow:0 12px 32px rgba(0,0,0,.5);color:#cbd7e6;font:400 13px/1.5 var(--font-body);backdrop-filter:blur(12px);pointer-events:auto;}
	  .truth-header{margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid rgba(37,99,235,.24);color:var(--cy);font:700 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;}
	  .truth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px;margin-bottom:12px;}
	  .truth-item strong{display:block;margin-bottom:2px;color:var(--dim);font:600 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;}
	  .truth-limit{margin-top:4px;padding-top:8px;border-top:1px solid var(--line);color:var(--faint);font-size:11px;}
	  .fault-list{margin:0;padding-left:16px;color:var(--warn);}
	  .scrub-container{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin:0;padding:10px 24px;border-top:1px solid var(--line);background:rgba(12,16,26,.4);backdrop-filter:blur(12px);}
	  .btn-play-pause{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px;border:0;border-radius:6px;background:transparent;color:var(--dim);font-size:16px;cursor:pointer;transition:color .2s ease,background .2s ease;}
	  .btn-play-pause:hover,.btn-play-pause:focus-visible{background:var(--card);color:var(--ink);outline:none;}
	  .rom-scrubber{flex:1;height:44px;border-radius:2px;background:linear-gradient(var(--line-2),var(--line-2)) center/100% 4px no-repeat;outline:none;cursor:pointer;accent-color:var(--cy);-webkit-appearance:none;}
	  .rom-scrubber::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line-2);}
	  .rom-scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:2px solid var(--bg);border-radius:50%;background:var(--cy);box-shadow:0 0 10px rgba(45,212,191,.32);cursor:pointer;transition:transform .1s ease;}
	  .rom-scrubber::-webkit-slider-thumb:hover{transform:scale(1.2);}
	  .scrub-value{min-width:40px;color:var(--dim);font:700 11px var(--font-mono);text-align:right;}
	
  /* Self-hosted premium type system — CSP font-src 'self', font-display:swap (no FOIT) */
  @font-face{font-family:'Space Grotesk';font-weight:500 700;font-display:swap;src:url('./fonts/space-grotesk-latin.woff2') format('woff2');}
  @font-face{font-family:'JetBrains Mono';font-weight:400 700;font-display:swap;src:url('./fonts/jetbrains-mono-latin.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-weight:400 700;font-display:swap;src:url('./fonts/inter-400.woff2') format('woff2');}
        :root{
      --bg: #030407; --bg-2: #0a0b10;
      --card: rgba(20, 22, 32, 0.5);
      --panel: rgba(15, 18, 25, 0.6);
      --elev: rgba(25, 28, 40, 0.7);
      --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.15);
      --ink: #F0F4F8; --dim: #CBD5E1; --faint: #A8B3C7;
      --cy: #2563eb; --cy-text: #60A5FA; --cy-deep: #1d4ed8; --cy-soft: rgba(45,212,191,.16);
      --good: #36e07f; --warn: #ff3d8b;
      --atk-effort:#e0b271; --atk-gravity:#ff5d73; --atk-bone:#5b6472;
      --press:#e0b271; --pull:#7ea7bd; --squat:#78d6a3; --hinge:#c98bd6; --iso:#d6b06a;
      --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
      --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
      --font-mono:'JetBrains Mono',ui-monospace,"SFMono-Regular","Segoe UI Mono",monospace;
      --pad:clamp(16px,4vw,44px);
    }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;background:var(--bg);color:var(--ink);
    font:16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  /* Generated wallpaper — cold blue/teal gradients + top-masked engineering grid (static, motion-safe) */
  body{min-height:100vh;position:relative;
    background:
      radial-gradient(120% 55% at 50% -6%, rgba(37,99,235,.07), transparent 55%),
      radial-gradient(80% 50% at 12% 18%, rgba(126,167,189,.04), transparent 55%),
      radial-gradient(80% 50% at 88% 22%, rgba(120,214,163,.035), transparent 55%),
      linear-gradient(180deg,#090b0f 0%,var(--bg) 44%,#070809 100%);}
  body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
    background-image:
      linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
    background-size:40px 40px,40px 40px;
    -webkit-mask-image:radial-gradient(140% 100% at 50% 0%,#000 50%,transparent 86%);
            mask-image:radial-gradient(140% 100% at 50% 0%,#000 50%,transparent 86%);}
  .wrap{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:var(--pad);}

  header.mast{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:6px 0;}
  .mast .wordmark{font:700 17px var(--font-display);letter-spacing:.06em;}
  .mast .wordmark .y{color:var(--cy-text);}
  .mast .crumb{font:600 11px var(--font-mono);letter-spacing:.14em;color:var(--faint);text-transform:uppercase;}
  .mast .home{margin-left:auto;font:600 11px var(--font-mono);letter-spacing:.1em;color:var(--dim);text-decoration:none;border:1px solid var(--line);padding:7px 12px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
  .mast .home:hover{border-color:var(--cy);color:var(--cy-text);}

  /* hero — lead with a real Atlas exercise visual; keep force mapping as context. */
  .hero{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;margin:30px 0 14px;}
  @media (max-width:760px){.hero{grid-template-columns:1fr;}}
  .hero .eyebrow{font:700 11px var(--font-mono);letter-spacing:.2em;color:var(--cy-text);text-transform:uppercase;margin:0 0 10px;}
  .hero h1{font:800 clamp(36px,6.4vw,62px)/.98 var(--font-display);letter-spacing:-.025em;margin:0 0 14px;}
  .hero h1 .accent{color:var(--cy-text);}
  .hero p{color:var(--dim);font-size:clamp(15px,2.3vw,18px);line-height:1.6;max-width:48ch;margin:0;}
  .hero .stat-row{display:flex;gap:22px;margin-top:20px;font:700 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
  .hero .stat-row b{display:block;font-size:24px;color:var(--ink);letter-spacing:-.01em;margin-bottom:2px;}
  /* Atlas hero picture */
  .plate{background:var(--card); backdrop-filter:blur(12px); border:1px solid var(--line-2); border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.3);padding:14px;position:relative;overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,.8);}
  .plate::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:22px 22px;}
  .plate svg{width:100%;height:auto;display:block;position:relative;z-index:1;}
  .plate .tag{position:absolute;top:12px;left:14px;z-index:2;font:700 9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy-text);}
  .atlas-hero-picture{display:grid;gap:10px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));}
  .atlas-hero-picture::after{opacity:.35;}
  .atlas-hero-picture .tag{position:relative;top:auto;left:auto;}
  .atlas-hero-picture img{position:relative;z-index:1;display:block;width:100%;height:auto;object-fit:contain;border-radius:10px;background:#f8f8fa;}
  .atlas-hero-picture figcaption{position:relative;z-index:1;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:700 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}
  .atlas-hero-picture figcaption strong{color:var(--cy-text);font-weight:800;}

  /* legend */
  .legend-groups{display:grid;gap:8px;margin:8px 0 30px;}
  .legend{display:flex;gap:18px;flex-wrap:wrap;font:600 11px var(--font-mono);letter-spacing:.06em;color:var(--dim);}
  .legend strong,.legend-force summary{font:800 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
  .legend i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:6px;}
  .legend-force{border:0;color:var(--dim);}
  .legend-force summary{cursor:pointer;list-style:none;min-height:44px;display:inline-flex;align-items:center;}
  .legend-force summary::-webkit-details-marker{display:none;}
  .legend-force .legend{padding-top:2px;}

  /* scan controls */
  .atlas-control-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:0 0 24px;
    padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));border:1px solid var(--line);
    border-radius:12px;}
  .atlas-search label,.atlas-count-label{display:block;font:700 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
  .atlas-search input{width:100%;min-height:46px;border:1px solid var(--line-2);border-radius:8px;background:#0c0e13;color:var(--ink);
    font:600 14px var(--font-body);padding:0 13px;outline:none;}
  .atlas-search input:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(45,212,191,.16);}
  .atlas-filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
  .atlas-filter{min-height:44px;min-width:44px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);color:var(--dim);
    font:700 10px var(--font-mono);letter-spacing:.11em;text-transform:uppercase;padding:0 12px;cursor:pointer;}
	  .atlas-filter:hover{border-color:var(--line-2);color:var(--ink);}
	  /* WCAG AA: #0b0d11 on --cy #2563eb measured 3.76:1 (Lighthouse 2026-07-06); --ink on --cy = 4.8:1 */
	  .atlas-filter[aria-pressed="true"]{border-color:var(--cy);color:var(--ink);background:var(--cy);}
	  .atlas-count{font:700 12px var(--font-mono);letter-spacing:.08em;color:var(--dim);text-align:right;margin:2px 0 0;}
	  .atlas-empty-state{display:grid;gap:10px;margin:0 0 22px;padding:18px;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.035);color:var(--dim);}
	  .atlas-empty-state[hidden]{display:none;}
	  .atlas-empty-state strong{color:var(--ink);font:800 13px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;}
	  .atlas-empty-state p{margin:0;max-width:56ch;}
	  .atlas-empty-state button{justify-self:start;min-height:44px;border:1px solid rgba(37,99,235,.38);border-radius:8px;background:rgba(45,212,191,.10);color:var(--ink);font:800 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:0 14px;cursor:pointer;}
	  .atlas-empty-state button:hover,.atlas-empty-state button:focus-visible{border-color:var(--cy);background:rgba(37,99,235,.16);outline:none;}
	  .section[hidden],.ex[hidden]{display:none!important;}
  @media (max-width:760px){.atlas-control-panel{grid-template-columns:1fr;}.atlas-filters{justify-content:flex-start;}.atlas-count{text-align:left;}}

  /* pattern sections */
  .section{margin:30px 0;}
  .section h2{font:700 13px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
    display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);}
  .section h2 .dot{width:9px;height:9px;border-radius:50%;background:var(--accent,var(--cy));}
  .section h2 .n{margin-left:auto;color:var(--faint);font-size:11px;letter-spacing:.08em;}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
  .ex{position:relative;background:var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); border-radius: 16px;border:1px solid var(--line);padding:16px 16px 14px;overflow:hidden;transition:border-color .16s,transform .16s;}
  .ex::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--cy));opacity:.8;}
  .ex:hover{border-color:var(--line-2);transform:translateY(-2px);}
  .ex .nm{font:700 16px/1.15 var(--font-display);letter-spacing:-.01em;margin-bottom:4px;}
  .ex .pat{font:700 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text,var(--cy-text));}
  .ex .mus{margin-top:8px;font-size:12.5px;color:var(--dim);}
  .atlas-pattern-chip{justify-self:start;padding:4px 8px;border:1px solid rgba(37,99,235,.24);border-radius:999px;background:rgba(37,99,235,.08);}
  .atlas-card-detail{margin-top:2px;border-top:1px solid var(--line);padding-top:6px;color:var(--dim);}
  .atlas-card-detail summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font:800 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);outline:none;}
  .atlas-card-detail summary:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:6px;}
  .atlas-card-detail-grid{display:grid;gap:6px;margin:2px 0 4px;}
  .atlas-card-detail-grid div{display:grid;grid-template-columns:minmax(64px,max-content) minmax(0,1fr);gap:10px;align-items:baseline;}
  .atlas-card-detail-grid strong{color:var(--faint);font:800 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;}
  .atlas-card-detail-grid span{min-width:0;color:var(--dim);font-size:12px;overflow-wrap:anywhere;}
  .atlas-train-link{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:auto;border:1px solid rgba(37,99,235,.32);border-radius:8px;background:rgba(45,212,191,.08);color:var(--ink);font:800 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:border-color .16s ease,background .16s ease,transform .16s ease;}
  .atlas-train-link:hover,.atlas-train-link:focus-visible{border-color:var(--cy);background:rgba(37,99,235,.15);transform:translateY(-1px);outline:none;}
  .atlas-browse-card{display:flex;flex-direction:column;gap:8px;min-height:360px;}
  .atlas-visual-shell{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:18/11;margin:0 0 6px;overflow:hidden;background:transparent;border:1px solid var(--line);}
  .atlas-visual-shell::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(110deg,transparent 0%,rgba(37,99,235,.10) 42%,rgba(45,212,191,.09) 50%,transparent 62%);background-size:220% 100%;opacity:.7;animation:atlas-scan 6s ease-in-out infinite;}
  .atlas-visual-shell picture{display:block;width:100%;height:100%;}
  .atlas-photo{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;background:transparent;animation:atlas-image-breathe 5.5s ease-in-out infinite;}
  .atlas-visual-shell[data-visual-status="anatomy"] .atlas-photo{opacity:.94;}
  .atlas-visual-shell[data-visual-status="ready"] .atlas-photo{opacity:.96;}
  .atlas-visual-shell svg.fv-overlay,
  .atlas-visual-shell svg.force-vector-overlay{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;}
  .atlas-visual-shell figcaption{position:absolute;left:8px;right:8px;bottom:7px;display:flex;justify-content:space-between;gap:8px;font:700 9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(0,0,0,.75);}
  @keyframes atlas-scan{0%,100%{background-position:180% 0;opacity:.22;}48%,55%{background-position:0 0;opacity:.72;}}
  @keyframes atlas-image-breathe{0%,100%{filter:saturate(1) contrast(1);}50%{filter:saturate(1.08) contrast(1.04);}}
  .section[data-p="press"]{--accent:var(--press);}
  .section[data-p="pull"]{--accent:var(--pull);}
  .section[data-p="squat"]{--accent:var(--squat);}
  .section[data-p="hinge"]{--accent:var(--hinge);}
  /* acquisition->habit CTA (blueprint 2.1): atlas is the SEO landing surface — give the
     browser one clear path into a live session. Action-blue (cold-surface action color). */
  .atlas-cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-height:44px;
    padding:12px 22px;border-radius:10px;background:#2563eb;color:#fff;text-decoration:none;
    font:700 15px var(--font-body,sans-serif);letter-spacing:.01em;transition:transform .1s ease;}
  .atlas-cta:hover{background:#1d4ed8;}
  .atlas-cta:active{transform:scale(.97);}
  .atlas-cta:focus-visible{outline:2px solid #2dd4bf;outline-offset:3px;}

  /* Command shelf: search is the hero action; grid turns into a fast scan wall. */
  .wrap{max-width:1280px;padding-top:24px;}
  .hero{grid-template-columns:minmax(320px,.82fr) minmax(360px,1.18fr);gap:18px;align-items:end;margin:18px 0 12px;padding-bottom:18px;border-bottom:1px solid var(--line-2);}
  .hero h1{font-size:clamp(42px,6vw,70px);letter-spacing:0;max-width:10ch;}
  .hero p{font-size:15px;max-width:42ch;}
  .hero .stat-row{gap:12px;margin-top:18px;}
  .hero .stat-row div{border-left:2px solid var(--cy);padding-left:10px;}
  .atlas-hero-picture{border-radius:8px;padding:10px;background:#0a101a;}
  .atlas-hero-picture img{max-height:420px;background:#f6fbff;}
  .atlas-control-panel{position:sticky;top:10px;z-index:30;grid-template-columns:minmax(340px,1fr) minmax(420px,1.15fr);gap:14px;border:1px solid rgba(96,165,250,.32);border-radius:8px;background:#070c14;box-shadow:0 18px 44px rgba(0,0,0,.38);}
  .atlas-search input{min-height:54px;font-size:18px;border-color:rgba(96,165,250,.32);}
  .atlas-filters{gap:6px;}
  .atlas-filter{border-radius:6px;padding:0 11px;}
  .section{margin:22px 0;}
  .section h2{margin-bottom:10px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:8px;}
  .ex{border-radius:8px;padding:10px;}
  .atlas-browse-card{min-height:316px;}
  .atlas-visual-shell{aspect-ratio:4/3;}
  .ex h3{font-size:15px;line-height:1.2;}
  .atlas-card-detail{margin-top:2px;border-top:1px solid rgba(96,165,250,.18);padding-top:4px;}
  .atlas-card-detail summary{min-height:30px;font-size:9px;color:var(--cy-text);}
  .atlas-card-detail[open]{background:#08101b;border-radius:6px;padding:6px;}
  .atlas-train-link{border-radius:6px;}
  @media (max-width:760px){.hero{grid-template-columns:1fr;}.atlas-control-panel{position:static;grid-template-columns:1fr;}.grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));}.atlas-browse-card{min-height:292px;}}

  footer{margin:42px 0 12px;padding-top:18px;border-top:1px solid var(--line);
    font:600 11px var(--font-mono);letter-spacing:.06em;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
  @media (prefers-reduced-motion:reduce){.ex{transition:none;}.atlas-visual-shell::before,.atlas-photo{animation:none;}}

.legend-press{background:var(--press)}
.legend-pull{background:var(--pull)}
.legend-squat{background:var(--squat)}
.legend-hinge{background:var(--hinge)}
.legend-effort{background:var(--atk-effort)}
.legend-gravity{background:var(--atk-gravity)}

/* WCAG 2.4.7 focus-ring restoration (a11y hardening 2026-07-21). The four controls
   below declare outline:none in their base/hover rules with no visible ring left for
   keyboard users (bg/border tint only). Appended state-scoped rules at equal-or-higher
   specificity win on later source order; they fire ONLY on :focus-visible, so default
   and pointer rendering cannot regress. */
.rom-scrubber:focus-visible{outline:2px solid var(--cy);outline-offset:3px;}
.btn-play-pause:focus-visible{outline:2px solid var(--cy);outline-offset:2px;}
.atlas-empty-state button:focus-visible{outline:2px solid var(--cy);outline-offset:2px;}
.atlas-train-link:focus-visible{outline:2px solid var(--cy);outline-offset:2px;}

/* Atlas motion gate (Local+) — standalone-page copy of the lock pair; the unlock is
   the html.ecx-motion-unlocked root flip from atlas.js, and locked is the default
   state on every entitlement failure path. Kept structurally distinct from the
   styles.css block on purpose (jscpd clone ratchet). */
html:not(.ecx-motion-unlocked) .atlas-anim-webp { overflow: hidden; position: relative; }
/* !important beats the atlas-image-breathe filter animation in the cascade (see styles.css).
   Sampler trio exempted by aria-label :not() chains (names contract-pinned). */
html:not(.ecx-motion-unlocked) .atlas-anim-webp:not([aria-label^="Trap bar deadlift "]):not([aria-label^="Plate-loaded incline press "]):not([aria-label^="Pendulum squat "]) img { animation: none !important; filter: blur(8px) saturate(0.85) !important; }
html:not(.ecx-motion-unlocked) .atlas-anim-webp:not([aria-label^="Trap bar deadlift "]):not([aria-label^="Plate-loaded incline press "]):not([aria-label^="Pendulum squat "])::after {
  content: "Local+ · full-rep motion";
  font: 700 10px/1.3 var(--mono, monospace);
  color: var(--acc, #7ef0c2);
  border: 1px solid var(--acc, #7ef0c2);
  background: rgba(10, 12, 16, 0.88);
  border-radius: 999px;
  padding: 3px 9px;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
}

/* Atlas motion upsell dialog — standalone-page copy (clone-distinct from styles.css) */
.ecx-motion-upsell {
  background: #0b0d12;
  border: 1px solid var(--acc, #7ef0c2);
  border-radius: 14px;
  color: #f0f4f8;
  max-width: 340px;
  padding: 22px;
  text-align: center;
}
.ecx-motion-upsell::backdrop { backdrop-filter: blur(3px); background: rgba(3, 4, 7, 0.72); }
.ecx-motion-upsell .emu-close { background: transparent; border: 0; color: #94a3b8; cursor: pointer; font-size: 22px; min-height: 44px; min-width: 44px; position: absolute; right: 10px; top: 8px; }
.ecx-motion-upsell .emu-still { height: 180px; object-fit: contain; width: 180px; }
.ecx-motion-upsell .emu-name { font: 700 17px/1.3 var(--font-mono, monospace); margin: 8px 0 4px; }
.ecx-motion-upsell .emu-copy { color: #cbd5e1; font-size: 13px; margin: 0 0 14px; }
.ecx-motion-upsell .emu-cta { background: var(--acc, #7ef0c2); border-radius: 999px; color: #08090c; display: inline-block; font: 700 13px/1 var(--font-mono, monospace); letter-spacing: 0.04em; padding: 10px 22px; text-decoration: none; }
