/* Local demo presentation. Original controllers, hidden states and scene transforms stay intact. */
body:has(#demo-shell){--bg:#000;--surface:#000;--ink:#f5f5f5;--muted:#a5a5a5;--line:#2c2c2c;color:#f5f5f5;color-scheme:dark}
#demo-shell{--demo-line:#2c2c2c;--demo-muted:#aaa;--demo-ink:#f5f5f5;font:400 14px/1.55 Supreme,Arial,sans-serif;color:var(--demo-ink);background:#000}
#demo-shell *,#demo-shell *::before,#demo-shell *::after{box-sizing:border-box}
#demo-shell>#experience{width:100%;max-width:1480px;margin-inline:auto}
#demo-shell :is(.product-app,.management-demo){--app-bg:#000;--app-panel:#000;--app-ink:#f5f5f5;--app-muted:#aaa;--app-line:#2c2c2c;--app-accent:#f5f5f5;--app-accent-ink:#000;--app-soft:#121212;--bg:#000;--surface:#000;--ink:#f5f5f5;--muted:#aaa;--line:#2c2c2c;background:#000;color:var(--demo-ink);border:1px solid var(--demo-line);border-radius:18px;box-shadow:none;margin-inline:0;overflow:visible;min-width:0;font:inherit}
#demo-shell :is(h2,h3,h4,p){max-width:none}
#demo-shell :is(h2,h3,h4){color:var(--demo-ink);font-family:Supreme,Arial,sans-serif;font-style:normal;font-weight:500;letter-spacing:-.035em;line-height:1.15}
#demo-shell h3{font-size:clamp(25px,3vw,36px)}
#demo-shell h4{font-size:23px}
#demo-shell p{color:var(--demo-muted);font-size:14px;line-height:1.6}
#demo-shell :is(button,input,select,textarea){font-family:inherit;font-size:14px;line-height:1.4;letter-spacing:normal}
#demo-shell :is(button,a,input,select,textarea){touch-action:manipulation}
#demo-shell button{min-height:44px;border-radius:12px;color:var(--demo-ink)}
#demo-shell button:not(:disabled){cursor:pointer}
#demo-shell :is(button,input,select,textarea,a,[tabindex]):focus-visible{outline:2px solid #fff;outline-offset:4px;box-shadow:0 0 0 2px #000}
#demo-shell button:disabled{opacity:.45;cursor:not-allowed}
#demo-shell :is(input,select,textarea){min-height:46px;border:1px solid #444;border-radius:12px;background:#000;color:var(--demo-ink);padding:12px;max-width:100%;min-width:0;font-size:16px}
#demo-shell input::placeholder,#demo-shell textarea::placeholder{color:#929292}
#demo-shell select{padding-right:32px}
#demo-shell option{background:#000;color:#fff}
#demo-shell textarea{width:100%;min-height:110px;resize:vertical}
#demo-shell label{color:#bdbdbd;font-size:12px;line-height:1.5}
#demo-shell :is(.flow-primary,.flow-secondary){min-height:46px;padding:12px 17px;border-radius:999px;font-size:13px;font-weight:500;line-height:1.4;gap:8px;white-space:normal;text-align:center;justify-content:center;align-items:center}
#demo-shell .flow-primary{background:#f5f5f5;color:#000;border:1px solid #f5f5f5}
#demo-shell .flow-secondary{background:#000;color:#f5f5f5;border:1px solid #484848}
@media(hover:hover) and (pointer:fine){#demo-shell .flow-secondary:hover{background:#151515;border-color:#777}}
@media(hover:hover) and (pointer:fine){#demo-shell .flow-primary:hover{background:#ddd;border-color:#ddd;filter:none}}
#demo-shell :is(.text-link,.text-button,.back-link){color:#e4e4e4;font-size:12px;min-height:44px;line-height:1.5;text-underline-offset:4px}
#demo-shell .text-link{padding:10px 0;display:inline-flex;align-items:center}
#demo-shell :is(.flow-note,.execution-note){font-size:12px;color:#a5a5a5;line-height:1.6}
#demo-shell :is(.app-eyebrow,.eyebrow){font-size:10px;letter-spacing:.12em;line-height:1.6;color:#a5a5a5}
#demo-shell :is(.small-tag,.sample-pill){font-size:11px;color:#aaa;letter-spacing:0;line-height:1.5}
#demo-shell .small-tag{border:1px solid var(--demo-line);border-radius:999px;padding:6px 11px;flex-shrink:0}

/* Short utility strip. Persistence remains explicit and fully operable. */
#demo-shell .demo-guide{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 0 10px;border:0;font-size:12px;line-height:1.5;color:#aaa}
#demo-shell .demo-guide button{margin:0;flex-shrink:0}
#demo-shell .demo-storage{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(0,1.6fr);gap:2px 22px;align-items:center;border:1px solid var(--demo-line);border-radius:14px;padding:10px 16px;margin:0 0 18px;background:#000}
#demo-shell .demo-storage label{display:flex;align-items:center;gap:10px;color:#ddd;min-height:44px;font-size:12px}
#demo-shell .demo-storage input[type=checkbox]{appearance:auto;min-height:20px;min-width:20px;width:20px;height:20px;padding:0;margin:0;accent-color:#fff;flex:none}
#demo-shell .demo-storage p{margin:3px 0;font-size:11px;line-height:1.5;color:#969696}
#demo-shell .demo-storage a{color:#c8c8c8;text-decoration:underline;text-underline-offset:3px}
#demo-shell .demo-storage [data-storage-status]{grid-column:1/-1;margin:0;color:#bcbcbc}
#demo-shell .demo-preferences{margin:0 0 16px;border:1px solid var(--demo-line);border-radius:14px;background:#000;color:#bbb}
#demo-shell .demo-preferences summary{min-height:44px;padding:11px 15px;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;font-size:12px;cursor:pointer;touch-action:manipulation}
#demo-shell .demo-preferences summary::-webkit-details-marker{display:none}
#demo-shell .demo-preferences summary::after{content:none;font-size:18px;color:#ddd}
#demo-shell .demo-preferences[open] summary::after{content:none}
#demo-shell .demo-preferences summary:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:14px}
#demo-shell .demo-preferences .demo-storage{margin:0;border:0;border-top:1px solid var(--demo-line);border-radius:0;padding:10px 15px 13px}

/* Shared app chrome. Tabs retain their horizontal scroller and stay in reach. */
#demo-shell :is(.app-topline,.demo-top){padding:17px 22px;gap:16px;min-height:62px;border-bottom:1px solid var(--demo-line);border-radius:18px 18px 0 0;background:#000;color:#f5f5f5}
#demo-shell :is(.app-topline>span:first-child,.mini-brand){font-size:11px;letter-spacing:.09em;font-weight:600}
#demo-shell .app-topline img{width:32px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}
#demo-shell .app-topline>span:first-child{gap:10px}
#demo-shell .demo-label{font-size:11px;color:#aaa;letter-spacing:0}
#demo-shell .app-tabs{position:sticky;top:0;z-index:40;display:flex;gap:6px;padding:10px 14px;background:#000;border-bottom:1px solid var(--demo-line);overflow-x:auto;scrollbar-width:thin;scrollbar-color:#555 #000;scroll-padding-inline:14px;overscroll-behavior-x:contain;max-width:100%}
#demo-shell .app-tabs>button{flex:0 0 auto;min-height:44px;padding:10px 15px;border:1px solid transparent;border-radius:999px;font-size:13px;color:#aaa;white-space:nowrap}
@media(hover:hover) and (pointer:fine){#demo-shell .app-tabs>button:hover{color:#fff;border-color:#444}}
#demo-shell .app-tabs>button[aria-pressed=true]{background:#f5f5f5;color:#000;border-color:#f5f5f5}
#demo-shell .app-tabs>button[aria-pressed=true]::after{display:none}
#demo-shell .app-notice{margin:0;padding:0 24px;min-height:0;font-size:12px}
#demo-shell .app-notice:empty{display:none}
#demo-shell .app-notice:not(:empty){padding-block:14px;border-bottom:1px solid var(--demo-line)}
#demo-shell .app-panel{padding:28px;min-width:0;scroll-margin-top:86px;background:#000;color:#f5f5f5}
#demo-shell .panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px;flex-wrap:wrap}
#demo-shell .panel-heading>div{min-width:0}
#demo-shell .panel-heading h3{margin:7px 0 0}
#demo-shell .compact-label{display:grid;gap:6px;min-width:160px;max-width:100%;flex-shrink:0}
#demo-shell .compact-label select{max-width:none;width:100%;min-width:0}

/* Gym: room search, workout, meals, movement example, pass and community. */
#demo-shell .gym-tour{--tour-radius:14px;--bg:#000;--surface:#000;--ink:#f5f5f5;--muted:#aaa;--line:#333;color:#f5f5f5}
#demo-shell .gym-tour-room{height:500px;border:1px solid var(--demo-line);border-radius:16px}
#demo-shell .gym-tour-room.is-expanded{height:100dvh;border-radius:0}
#demo-shell .gym-tour :is(.gym-tour-search,.gym-tour-badge,.gym-tour-bottom>span){background:#000e;border-color:#444}
#demo-shell .gym-tour button{border-color:#444;background:#000;color:#fff}
@media(hover:hover) and (pointer:fine){#demo-shell .gym-tour button:hover{background:#171717}}
#demo-shell .gym-tour .gym-tour-marker[aria-pressed=true]{background:#fff;color:#000}
#demo-shell .gym-tour-quick{gap:10px;margin-top:14px;padding-top:14px}
#demo-shell .gym-tour-quick button{border:1px solid #333;font-size:12px;padding:8px 12px}
#demo-shell .gym-tour-quick button[aria-pressed=true]{background:#fff;color:#000;border-color:#fff}
#demo-shell .gym-tour-caption{font-size:11px;line-height:1.5;flex-wrap:wrap}
#demo-shell .gym-tour-dialog{border-radius:18px;background:#000;border-color:#444;padding:24px;box-shadow:0 24px 100px #0009}
#demo-shell .gym-tour-result{border-radius:0;padding-block:12px}
#demo-shell .gym-tour-result strong{font-size:15px}
#demo-shell .gym-tour-result small{font-size:12px;color:#aaa}
#demo-shell .workout-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(240px,1fr);gap:20px}
#demo-shell :is(.workout-exercise,.session-summary,.meal-row,.community-grid>article){background:#000;color:#f5f5f5;border:1px solid var(--demo-line);border-radius:16px;box-shadow:none}
#demo-shell .workout-exercise{padding:22px;margin-bottom:12px}
#demo-shell .workout-exercise.selected{border-color:#777}
#demo-shell .exercise-top{gap:12px;margin-bottom:14px;font-size:11px;color:#aaa;flex-wrap:wrap}
#demo-shell .set-inputs{gap:10px;display:flex;flex-wrap:wrap;align-items:end;margin-top:20px}
#demo-shell .set-inputs label{flex:1 1 85px}
#demo-shell .set-inputs input[type=number]{width:100%;min-width:72px;font-size:19px}
#demo-shell .set-inputs>.flow-primary{flex:1 1 140px;margin-left:0}
#demo-shell .exercise-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px}
#demo-shell .exercise-links>button{font-size:12px;min-height:44px;color:#bbb;text-align:left}
#demo-shell .session-summary{padding:24px;top:86px;gap:0}
#demo-shell .session-summary>strong{font-size:72px;letter-spacing:-.06em;margin:22px 0 8px;font-weight:400;color:#fff}
#demo-shell .session-summary>span:not(.app-eyebrow){color:#aaa}
#demo-shell .session-summary p{font-size:13px}
#demo-shell .rest-clock{border-color:var(--demo-line);padding-top:20px;margin:18px 0 22px;gap:12px}
#demo-shell .rest-clock>span{font-size:34px;color:#fff}
#demo-shell .rest-clock>button{background:#111;border:1px solid #444;padding:10px 12px;font-size:12px}
#demo-shell :is(.nutrition-summary,.progress-totals){gap:10px;border:0;padding:0;margin-bottom:22px}
#demo-shell :is(.nutrition-summary,.progress-totals)>div{background:#000;border:1px solid var(--demo-line);border-radius:14px;padding:18px;min-width:0;gap:7px}
#demo-shell :is(.nutrition-summary,.progress-totals) strong{font-size:clamp(27px,3vw,40px);font-weight:450;color:#fff;font-variant-numeric:tabular-nums}
#demo-shell :is(.nutrition-summary,.progress-totals) span{font-size:12px;color:#aaa}
#demo-shell .meal-list{display:grid;gap:12px}
#demo-shell .meal-row{grid-template-columns:80px minmax(0,1fr) 75px auto;gap:18px;padding:20px}
#demo-shell .meal-time{font-size:21px;color:#fff}
#demo-shell .meal-time small{font-size:11px;color:#aaa}
#demo-shell .meal-row h4{font-size:21px}
#demo-shell .meal-row p{font-size:12px;color:#aaa}
#demo-shell .meal-row>strong{font-size:13px;color:#eee}
#demo-shell .execution-example{grid-template-columns:minmax(0,1.15fr) minmax(270px,1fr);gap:20px}
#demo-shell .execution-frame{background:#000;border:1px solid var(--demo-line);border-radius:16px}
#demo-shell .execution-caption{padding:50px 20px 20px;background:linear-gradient(transparent,#000e)}
#demo-shell .execution-caption>strong{font-size:22px;color:#fff}
#demo-shell .execution-count{background:#000d;color:#ddd;border:1px solid #444;border-radius:999px;font-size:11px;padding:7px 11px;top:16px;right:16px}
#demo-shell .execution-controls{margin:14px 0;gap:12px;flex-wrap:wrap}
#demo-shell .execution-controls>span{font-size:12px;color:#aaa}
#demo-shell .execution-phases{gap:6px;border:0;grid-template-columns:repeat(3,minmax(0,1fr))}
#demo-shell .execution-phases>button{border:1px solid #333;border-radius:12px;padding:12px;color:#bdbdbd;font-size:13px;min-height:65px;gap:4px}
#demo-shell .execution-phases>button:last-child{border-right:1px solid #333}
#demo-shell .execution-phases>button[aria-pressed=true]{background:#f5f5f5;color:#000;border-color:#f5f5f5}
#demo-shell .execution-result{padding:24px}
#demo-shell .execution-result h4{margin:18px 0;font-size:27px;max-width:none}
#demo-shell .execution-result>p{color:#bcbcbc;font-size:15px}
#demo-shell .execution-observations{margin:24px 0}
#demo-shell .execution-observations>div{border-color:var(--demo-line);font-size:13px;gap:16px;padding:14px 0;flex-wrap:wrap}
#demo-shell .execution-observations span{color:#aaa}
#demo-shell .execution-observations strong{color:#eee;font-weight:500}
#demo-shell .execution-feedback{border-left:2px solid #eee;padding-left:16px}
#demo-shell .execution-feedback p{font-size:14px;color:#ddd}
#demo-shell .execution-result .execution-note{font-size:12px;margin-top:24px;color:#aaa}
#demo-shell .pass-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch;padding:0}
#demo-shell .membership-card.member-example{width:100%;max-width:none;min-height:360px;aspect-ratio:auto;background:#000;color:#f5f5f5;border:1px solid #555;border-radius:18px;padding:26px;box-shadow:none;gap:20px}
#demo-shell .member-example>img{filter:brightness(0) invert(1);opacity:.13;left:auto;right:20px;top:78px;width:180px}
#demo-shell .member-example .member-card-top{font-size:11px;color:#eee;letter-spacing:.1em}
#demo-shell .member-example .member-identity{grid-template-columns:minmax(0,1fr);margin-top:20px;gap:8px}
#demo-shell .member-identity>span:first-child{color:#aaa;font-size:11px}
#demo-shell .member-identity>strong{font-size:31px;color:#fff;letter-spacing:-.03em}
#demo-shell .member-identity .pass-status{grid-column:1;grid-row:auto;justify-self:start;font-size:11px;border:1px solid #555;border-radius:999px;padding:6px 10px;margin-top:4px;color:#eee;white-space:normal}
#demo-shell .member-facts{border-color:#333;gap:20px;margin-top:4px}
#demo-shell .member-facts dt{color:#aaa;font-size:11px}
#demo-shell .member-facts dd{color:#eee;font-size:14px}
#demo-shell .member-example>small{color:#aaa;letter-spacing:.03em}
#demo-shell .pass-detail{padding:26px}
#demo-shell .pass-detail h4{font-size:26px;margin:15px 0}
#demo-shell .pass-detail ul{padding-left:18px;font-size:14px;line-height:1.8;color:#ddd}
#demo-shell .pass-detail li{margin-bottom:6px}
#demo-shell .session-history{border:1px solid var(--demo-line);border-radius:16px;overflow:hidden}
#demo-shell .session-history>li{grid-template-columns:28px minmax(0,1fr) minmax(110px,auto) auto;gap:14px;padding:16px 20px;font-size:13px;border-color:var(--demo-line)}
#demo-shell .session-history>li:last-child{border-bottom:0}
#demo-shell .session-history>li>span:first-child{color:#888;font-size:11px}
#demo-shell .session-history button{font-size:12px;padding:8px 0;min-height:44px}
#demo-shell .app-empty{padding:38px 22px;border:1px dashed #444;border-radius:16px;background:#000}
#demo-shell .app-empty h4{font-size:25px}
#demo-shell .app-empty p{margin:14px auto 20px;max-width:420px}
#demo-shell .community-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#demo-shell .community-grid>article{padding:24px}
#demo-shell .community-grid h4{font-size:25px;margin-top:16px}
#demo-shell .community-grid p{font-size:14px}
#demo-shell .community-grid label{margin-top:18px;gap:8px}
#demo-shell .community-grid :is([data-challenge-state],[data-coach-state]){font-size:12px;color:#aaa;margin-bottom:0}

/* Spaces: keep the actual imagery and scene geometry, unify its controls. */
#demo-shell .tour-journey{padding:12px 18px;gap:8px;background:#000;border-color:var(--demo-line)}
#demo-shell .tour-journey>button{min-height:44px;padding:10px 14px;border-radius:999px;border:1px solid #333;font-size:12px;color:#bbb;flex-shrink:0}
#demo-shell .tour-journey>button>span:first-child{font-size:11px;color:#aaa}
#demo-shell .tour-journey>button[aria-pressed=true]{background:#f5f5f5;color:#000;border-color:#f5f5f5}
#demo-shell .tour-journey>button[aria-pressed=true]>span:first-child{color:#555}
#demo-shell .tour-layout{grid-template-columns:minmax(0,1.5fr) minmax(310px,1fr)}
#demo-shell .tour-app.map-hidden .tour-layout{grid-template-columns:1fr}
#demo-shell .tour-app.map-hidden .tour-map-panel{display:none}
#demo-shell .tour-scene{height:auto;min-height:600px;background:#000}
#demo-shell .tour-scene-title{left:24px;right:24px;top:24px}
#demo-shell .tour-scene-title>strong{font:500 clamp(28px,3vw,40px)/1.15 Supreme,Arial,sans-serif;letter-spacing:-.035em;margin-top:8px;color:#fff}
#demo-shell .tour-scene-title .app-eyebrow{color:#eee}
#demo-shell .tour-node-links{left:22px;right:22px;bottom:120px;gap:8px}
#demo-shell .tour-node-links>button{min-height:44px;border-radius:999px;padding:11px 16px;line-height:1.4;font-size:12px}
#demo-shell .tour-node-links>.tour-next-link{background:#f5f5f5;color:#000}
#demo-shell .tour-node-links>.tour-secondary-link{background:#000d;color:#fff;border-color:#777}
#demo-shell .tour-tools{left:22px;right:22px;bottom:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#demo-shell .tour-tools>span{font-size:11px;color:#eee;max-width:none;flex-basis:100%;line-height:1.4}
#demo-shell .tour-tools>div{display:flex;flex-wrap:wrap;gap:6px}
#demo-shell .tour-tools button{min-width:44px;min-height:44px;width:auto;padding:10px 12px;background:#000e;border:1px solid #777;border-radius:12px;font-size:12px;color:#fff}
#demo-shell .tour-map-panel{min-width:0;background:#000;color:#f5f5f5;border-left:1px solid var(--demo-line)}
#demo-shell .tour-map-heading{padding:20px;gap:12px;color:#ddd}
#demo-shell .tour-map-heading .app-eyebrow{font-size:10px;color:#aaa}
#demo-shell .tour-map-heading>span:last-child{font-size:12px;color:#eee}
#demo-shell .tour-map-panel [data-tour-map]{padding:0;min-height:0}
#demo-shell .scene-map{background:#000;color:#f5f5f5}
#demo-shell .scene-map-controls{background:#000;color:#aaa;border-color:var(--demo-line);padding:12px 14px;gap:10px;flex-wrap:wrap;font-size:11px}
#demo-shell .scene-map-controls>div{gap:6px;flex-wrap:wrap}
#demo-shell .scene-map-controls button{min-height:44px;min-width:44px;border:1px solid #444;border-radius:12px;background:#000;color:#eee;font-size:12px;padding:10px 12px}
#demo-shell .scene-map .scene-map-pin{width:44px;height:44px;min-width:44px;min-height:44px}
#demo-shell .scene-pin-number{background:#000d;color:#fff;border-color:#fff}
#demo-shell .scene-pin-label{background:#000e;color:#fff;border:1px solid #555;border-radius:8px}
#demo-shell .scene-map-pin[aria-pressed=true] .scene-pin-number{background:#fff;color:#000;outline-color:#000}
#demo-shell .tour-location-detail{margin:0;padding:22px;border-color:var(--demo-line);background:#000}
#demo-shell .tour-location-detail .app-eyebrow{font-size:10px;color:#aaa}
#demo-shell .tour-location-detail h4{font-size:26px;color:#fff;margin-top:10px}
#demo-shell .tour-location-detail p{color:#aaa;font-size:14px;line-height:1.6}
#demo-shell .tour-location-detail :is(.flow-primary,.flow-secondary){font-size:13px}
#demo-shell .tour-app>.flow-note{padding:18px 22px;margin:0;border-top:1px solid var(--demo-line);font-size:12px}
#demo-shell .tour-scene:fullscreen{height:100dvh;min-height:100dvh}

/* Management: selectable editorial cards, clear workflow status and export. */
html[data-demo-mode="module"] #demo-shell .management-demo>.demo-top{display:none}
#demo-shell .planner-head{padding:26px;gap:22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
#demo-shell .planner-head h3{font-family:Supreme,Arial,sans-serif;font-size:32px;font-style:normal;margin-top:6px}
#demo-shell .planner-head .eyebrow{color:#aaa;font-size:10px}
#demo-shell .pill-row{display:flex;gap:6px;flex-wrap:wrap;color:#aaa}
#demo-shell .pill-row button{min-height:44px;padding:10px 16px;border:1px solid #3a3a3a;border-radius:999px;background:#000;color:#bbb;font-size:13px}
#demo-shell .pill-row button[aria-pressed=true]{color:#000;background:#f5f5f5;border-color:#f5f5f5}
#demo-shell .week-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border:0;margin:0 26px 24px}
#demo-shell .week-grid article{padding:22px;border:1px solid var(--demo-line);border-radius:16px;background:#000;color:#fff;min-width:0;box-shadow:none;gap:0}
#demo-shell .week-grid article:has([data-plan-toggle][aria-pressed=true]){border-color:#aaa;background:#080808}
#demo-shell .week-grid :is(.mono,.plan-kind){color:#aaa;font-size:12px}
#demo-shell .plan-kind{margin-top:25px}
#demo-shell .week-grid h4{font-size:25px;margin:13px 0;line-height:1.2;color:#fff}
#demo-shell .week-grid p{color:#aaa;font-size:14px;line-height:1.6;margin-bottom:22px}
#demo-shell .week-grid [data-plan-toggle]{min-height:44px;margin-top:auto;padding:11px 14px;border:1px solid #444;border-radius:999px;color:#eee;background:#000;text-align:center;font-size:12px}
#demo-shell .week-grid [data-plan-toggle][aria-pressed=true]{background:#f5f5f5;color:#000;border-color:#f5f5f5}
#demo-shell .demo-production-stage{margin-top:18px;gap:7px;color:#aaa;font-size:12px}
#demo-shell .demo-production-stage select{width:100%;min-height:46px;font-size:14px;color:#eee}
#demo-shell .planner-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 26px 26px;flex-wrap:wrap}
#demo-shell .planner-footer .demo-status{font-size:12px;color:#aaa;line-height:1.5;margin:0;flex:1 1 200px}
#demo-shell [data-export-plan]{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border:1px solid #f5f5f5;border-radius:999px;background:#f5f5f5;color:#000;font-size:13px;font-weight:500;flex-shrink:0}
body:has(#demo-shell) .toast{background:#f5f5f5;color:#000;border:1px solid #fff;border-radius:12px;font:400 13px/1.5 Supreme,Arial,sans-serif}

@media(max-width:1000px){
 #demo-shell .workout-layout{grid-template-columns:minmax(0,1.5fr) minmax(210px,1fr);gap:16px}
 #demo-shell .meal-row{grid-template-columns:65px minmax(0,1fr) auto;gap:12px}
 #demo-shell .meal-row>.flow-secondary{grid-column:2/-1;justify-self:start}
 #demo-shell .tour-layout{grid-template-columns:1fr}
 #demo-shell .tour-map-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);border-left:0;border-top:1px solid var(--demo-line)}
 #demo-shell .tour-map-heading{grid-column:1;grid-row:1}
 #demo-shell .tour-map-panel [data-tour-map]{grid-column:1;grid-row:2}
 #demo-shell .tour-location-detail{grid-column:2;grid-row:1/3;border-top:0;border-left:1px solid var(--demo-line)}
 #demo-shell .week-grid{grid-template-columns:1fr}
 #demo-shell .week-grid article{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.7fr);gap:0 25px}
 #demo-shell .week-grid :is(.mono,.plan-kind,h4,p){grid-column:1}
 #demo-shell .week-grid .plan-kind{margin-top:14px}
 #demo-shell .week-grid p{margin-bottom:0}
 #demo-shell .week-grid [data-plan-toggle]{grid-column:2;grid-row:2;align-self:start;margin:0}
 #demo-shell .demo-production-stage{grid-column:2;grid-row:3/5;align-self:start;margin-top:16px}
}
@media(max-width:760px){
 #demo-shell .demo-guide{font-size:11px;align-items:flex-start;gap:8px}
 #demo-shell .demo-guide>span{padding-top:10px}
 #demo-shell .demo-storage{grid-template-columns:1fr;padding:10px 14px;gap:4px;margin-bottom:14px}
 #demo-shell .demo-storage [data-storage-status]{grid-column:auto}
 #demo-shell :is(.app-topline,.demo-top){padding:14px 16px;gap:12px;min-height:58px}
 #demo-shell .app-topline>span:first-child{font-size:10px;gap:8px}
 #demo-shell .sample-pill{max-width:140px;font-size:10px}
 #demo-shell .app-tabs{padding:8px 10px;gap:4px}
 #demo-shell .app-tabs>button{padding:10px 13px;font-size:12px}
 #demo-shell .app-panel{padding:20px;scroll-margin-top:76px}
 #demo-shell .panel-heading{gap:16px;margin-bottom:20px}
 #demo-shell .panel-heading h3{font-size:27px}
 #demo-shell .compact-label{min-width:0;width:100%}
 #demo-shell .workout-layout{grid-template-columns:1fr}
 #demo-shell .workout-exercise{padding:20px}
 #demo-shell .session-summary{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 18px;padding:20px}
 #demo-shell .session-summary>strong{font-size:55px;margin:4px 0;grid-column:1}
 #demo-shell .session-summary>span,#demo-shell .session-summary>p{grid-column:1;margin:0}
 #demo-shell .rest-clock{grid-column:2;grid-row:1/5;padding:0;border:0;margin:0;align-self:center}
 #demo-shell .session-summary>.flow-primary{grid-column:1/-1;margin-top:12px}
 #demo-shell .nutrition-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 #demo-shell :is(.nutrition-summary,.progress-totals)>div{padding:16px}
 #demo-shell .progress-totals{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #demo-shell .progress-totals>div{padding:14px 10px}
 #demo-shell .progress-totals strong{font-size:27px}
 #demo-shell .progress-totals span{font-size:11px}
 #demo-shell .meal-row{grid-template-columns:60px minmax(0,1fr);padding:18px;gap:10px 15px}
 #demo-shell .meal-row>strong,#demo-shell .meal-row>.flow-secondary{grid-column:2}
 #demo-shell .meal-row h4{font-size:20px}
 #demo-shell .execution-example{grid-template-columns:1fr}
 #demo-shell .execution-result{padding:20px}
 #demo-shell .pass-layout{grid-template-columns:1fr;gap:18px}
 #demo-shell .membership-card.member-example{padding:24px;min-height:350px}
 #demo-shell .pass-detail{padding:22px}
 #demo-shell .community-grid{grid-template-columns:1fr;gap:16px}
 #demo-shell .community-grid>article{padding:22px}
 #demo-shell .session-history>li{grid-template-columns:22px minmax(0,1fr);gap:6px 12px;padding:16px}
 #demo-shell .session-history>li>span:nth-of-type(2){grid-column:2;color:#bbb;font-size:12px}
 #demo-shell .session-history>li>button{grid-column:2;justify-self:start;min-height:44px}
 #demo-shell .gym-tour-room{height:420px}
 #demo-shell .gym-tour-top,#demo-shell .gym-tour-bottom{left:12px;right:12px}
 #demo-shell .gym-tour-dialog{padding:20px}
 #demo-shell .tour-map-panel{display:flex;flex-direction:column}
 #demo-shell .tour-map-panel [data-tour-map]{width:100%;max-width:none;margin:0}
 #demo-shell .tour-location-detail{border-left:0;border-top:1px solid var(--demo-line);padding:20px}
 #demo-shell .tour-scene{min-height:540px;height:540px}
 #demo-shell .tour-scene-title{left:18px;right:18px;top:22px}
 #demo-shell .tour-scene-title>strong{font-size:32px}
 #demo-shell .tour-tools{left:16px;right:16px;bottom:16px}
 #demo-shell .tour-tools>span{font-size:10px}
 #demo-shell .tour-tools button{padding:10px;min-width:44px;font-size:11px}
 #demo-shell .tour-node-links{left:16px;right:16px;bottom:140px}
 #demo-shell .tour-node-links>button{font-size:12px;padding:10px 13px}
 #demo-shell .planner-head{padding:22px;gap:20px}
 #demo-shell .planner-head h3{font-size:29px}
 #demo-shell .week-grid{margin:0 22px 22px;gap:14px}
 #demo-shell .week-grid article{display:flex;padding:20px}
 #demo-shell .week-grid h4{font-size:25px}
 #demo-shell .week-grid p{margin-bottom:20px}
 #demo-shell .week-grid [data-plan-toggle]{margin-top:auto}
 #demo-shell .planner-footer{padding:0 22px 22px}
}
@media(max-width:420px){
 #demo-shell :is(.product-app,.management-demo){border-radius:14px}
 #demo-shell :is(.app-topline,.demo-top){padding:13px 14px;border-radius:14px 14px 0 0;align-items:flex-start}
 #demo-shell .app-topline img{width:27px}
 #demo-shell .sample-pill,#demo-shell .demo-label{max-width:108px;font-size:9px}
 #demo-shell .app-panel{padding:17px 14px 20px}
 #demo-shell .panel-heading h3{font-size:25px}
 #demo-shell .workout-exercise{padding:17px}
 #demo-shell .set-inputs label{flex-basis:calc(50% - 5px)}
 #demo-shell .set-inputs>.flow-primary{flex-basis:100%}
 #demo-shell .session-summary{padding:17px;gap:8px 12px}
 #demo-shell .rest-clock>span{font-size:29px}
 #demo-shell .rest-clock>button{font-size:11px;padding:10px}
 #demo-shell .meal-row{padding:16px;grid-template-columns:48px minmax(0,1fr);gap:10px 12px}
 #demo-shell .meal-time{font-size:18px}
 #demo-shell .meal-time small{font-size:10px}
 #demo-shell .execution-phases>button{padding:11px 8px;font-size:11px}
 #demo-shell .execution-result h4{font-size:24px}
 #demo-shell .execution-frame{height:420px}
 #demo-shell .execution-crop{height:420px;flex-basis:210px}
 #demo-shell .membership-card.member-example{padding:20px}
 #demo-shell .member-identity>strong{font-size:28px}
 #demo-shell .member-facts{gap:18px 12px}
 #demo-shell .member-facts dd{font-size:13px}
 #demo-shell .pass-detail,#demo-shell .community-grid>article{padding:20px}
 #demo-shell .gym-tour-room{height:390px}
 #demo-shell .gym-tour .gym-tour-search{min-width:0;width:100%;font-size:12px}
 #demo-shell .gym-tour-bottom>span{max-width:calc(100% - 96px);font-size:10px}
 #demo-shell .gym-tour-caption{font-size:10px}
 #demo-shell .tour-scene{height:560px;min-height:560px}
 #demo-shell .tour-tools button{padding:10px 8px;font-size:11px}
 #demo-shell .tour-tools>div{gap:5px}
 #demo-shell .tour-node-links{bottom:160px}
 #demo-shell .scene-map-controls{padding:12px}
 #demo-shell .scene-map-controls>span{flex-basis:100%}
 #demo-shell .planner-head{padding:20px 16px}
 #demo-shell .planner-head h3{font-size:27px}
 #demo-shell .pill-row{gap:6px;width:100%}
 #demo-shell .pill-row button{font-size:12px;padding:10px 12px;flex:1}
 #demo-shell .week-grid{margin:0 16px 18px}
 #demo-shell .week-grid article{padding:18px}
 #demo-shell .planner-footer{padding:0 16px 20px}
 #demo-shell [data-export-plan]{width:100%}
}
@media(prefers-reduced-motion:reduce){#demo-shell *,#demo-shell *::before,#demo-shell *::after{scroll-behavior:auto;transition:none;animation:none}}
html:has(#demo-shell){color-scheme:dark;scrollbar-color:#555 #000}
#demo-shell h3[tabindex="-1"]:focus{outline:none}
#demo-shell .app-tabs{gap:4px}
#demo-shell .app-tabs>button{padding-inline:12px;font-size:12px}
#demo-shell :is(.tour-map-heading,.tour-location-detail){background:#000;color:#f5f5f5}
#demo-shell .member-offers{border:0;border-radius:0;padding:0;background:#000;margin-top:64px}
#demo-shell .member-offers h4{font-size:22px;margin:0 0 12px;line-height:1.2}
#demo-shell .member-offers p{font-size:14px;line-height:1.6;max-width:65ch;margin:0;color:#aaa}

/* Give setup, demonstration and member benefits their own space. */
#demo-shell .product-app[data-gym-app]{border:0;border-radius:0}
#demo-shell .execution-setup{margin:12px 0 42px;max-width:850px}
#demo-shell .execution-setup-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;counter-reset:setup}
#demo-shell .execution-setup-steps li{font-size:17px;line-height:1.4;counter-increment:setup}
#demo-shell .execution-setup-steps li::before{content:counter(setup,decimal-leading-zero);display:block;color:#888;font-size:11px;letter-spacing:.06em;margin-bottom:12px}
#demo-shell .execution-demo-note{color:#aaa;font-size:12px;line-height:1.65;max-width:68ch;margin:24px 0 0}
#demo-shell .execution-example{gap:44px;align-items:start}
#demo-shell .execution-player{display:flex;flex-direction:column;min-width:0}
#demo-shell .execution-controls{order:-1;margin-top:0}
#demo-shell .execution-frame{border:0;border-radius:14px}
#demo-shell .execution-result{border:0;border-radius:0;padding:8px 0;background:#000}
#demo-shell .execution-result h4{font-size:28px;margin:14px 0 18px}
#demo-shell .execution-result .execution-observations{margin:26px 0}
#demo-shell .execution-phases>button,#demo-shell .execution-phases>button:last-child{border:0;border-radius:8px;min-height:58px}
#demo-shell .execution-feedback{border:0;padding:0;margin-top:32px}
#demo-shell .execution-result .execution-note{margin-top:32px}
#demo-shell .pass-layout{align-items:start;gap:clamp(30px,5vw,64px)}
#demo-shell .membership-card.member-example{border:0;border-radius:0;padding:6px 0;min-height:0;gap:18px}
#demo-shell .member-example>img{right:0;top:63px;opacity:.2;width:150px}
#demo-shell .member-example .member-identity{margin-top:16px}
#demo-shell .member-example>small{margin-top:25px}
#demo-shell .pass-detail{padding:6px 0;border:0;border-radius:0;background:#000;color:#f5f5f5}
#demo-shell .pass-detail h4{font-size:25px;line-height:1.2;margin-top:16px}
#demo-shell .pass-detail .flow-note{max-width:42ch;margin-top:24px}
#demo-shell .member-offers h4{font-size:28px;line-height:1.15;max-width:20ch;margin-bottom:18px}
#demo-shell .member-offers p{max-width:52ch;font-size:15px;line-height:1.65}
@media(max-width:700px){
 #demo-shell .execution-setup-steps{grid-template-columns:1fr;gap:16px}
 #demo-shell .execution-setup-steps li{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:16px;align-items:baseline}
 #demo-shell .execution-setup-steps li::before{margin:0}
 #demo-shell .execution-example{grid-template-columns:1fr;gap:30px}
 #demo-shell .execution-result{padding:0}
 #demo-shell .pass-layout{grid-template-columns:1fr;gap:48px}
 #demo-shell .pass-detail{padding:0}
 #demo-shell .member-offers{margin-top:48px}
}

/* Spaces and Management: open work areas, with controls still clearly defined. */
#demo-shell .product-app[data-tour-app],#demo-shell .management-demo{border:0;border-radius:0;box-shadow:none;background:#000}
#demo-shell .tour-layout{gap:28px}
#demo-shell .tour-app .tour-map-panel,#demo-shell .tour-app .tour-location-detail{border:0;background:#000}
#demo-shell .management-demo .week-grid{grid-template-columns:1fr;gap:42px;margin-block:12px 38px}
#demo-shell .management-demo .week-grid article{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.5fr);gap:0 50px;padding:12px 0;border:0;border-radius:0;box-shadow:none;background:#000}
#demo-shell .management-demo .week-grid article:has([data-plan-toggle][aria-pressed=true]){background:#000;border:0}
#demo-shell .management-demo .week-grid :is(.mono,.plan-kind,h4,p){grid-column:1}
#demo-shell .management-demo .week-grid .plan-kind{margin-top:12px}
#demo-shell .management-demo .week-grid h4{font-size:28px;max-width:26ch}
#demo-shell .management-demo .week-grid p{margin-bottom:0;max-width:48ch}
#demo-shell .management-demo .week-grid [data-plan-toggle]{grid-column:2;grid-row:2;align-self:start;justify-self:stretch;margin:0}
#demo-shell .management-demo .demo-production-stage{grid-column:2;grid-row:3/5;align-self:start;margin-top:18px}
@media(max-width:600px){
 #demo-shell .management-demo .week-grid{gap:40px}
 #demo-shell .management-demo .week-grid article{grid-template-columns:1fr;gap:0;padding:0}
 #demo-shell .management-demo .week-grid :is(.mono,.plan-kind,h4,p,[data-plan-toggle],.demo-production-stage){grid-column:1;grid-row:auto}
 #demo-shell .management-demo .week-grid [data-plan-toggle]{margin-top:22px;justify-self:start}
 #demo-shell .management-demo .demo-production-stage{margin-top:20px;max-width:320px;width:100%}
 #demo-shell .management-demo .week-grid h4{font-size:25px}
}