/* Playback has one permanent home: immediately below the devices. */
.walkthrough-visual{min-width:0}
.walkthrough-controls{width:100%;padding:0 0 12px}
.walkthrough-controls .tour-transport{justify-content:center;gap:30px;margin:12px 0 16px}
.walkthrough-controls .tour-transport>.soft-button{min-width:154px;font-size:12px}
.walkthrough-controls .tour-icon-button{width:44px;min-width:44px}
.walkthrough-controls .tour-progress{max-width:700px;margin:auto}
.walkthrough-controls .tour-note{text-align:center;margin:12px auto 0}
.tour-display-settings{text-align:center;font-size:9px;letter-spacing:0;margin:0 auto 14px}
.hero-app-panel .tour-opacity i::after,.device-laptop-screen .tour-opacity i::after{left:85%}
.device-phone-screen .tour-opacity i::after{left:15%}
.walkthrough-controls .tour-mode{display:flex;margin:auto;justify-content:center;text-align:center}
@media(min-width:851px){.walkthrough .device-stage{max-width:700px;margin:0 auto}.walkthrough-controls{max-width:700px;margin:auto}}
.walkthrough-panel{align-self:start;padding-top:40px}
.crystal-colors{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 20px}
.crystal-color{border:0;border-radius:26px;background:var(--paper-alt);color:var(--head);box-shadow:var(--lift);font:11px/1.4 var(--sans);min-height:44px;padding:11px 18px;cursor:pointer}
.crystal-color[aria-pressed=true]{background:#211e1a;color:#FCF7F0;box-shadow:0 4px 12px #211e1a20}
.crystal-picker-label{font:italic 24px/1.3 var(--serif);color:var(--head);margin-top:25px!important}
.plus-visual{min-width:0}.plus-visual .crystal-picker-label{text-align:center}.glimpse-palette{justify-content:center}
.tour-color-options{margin:12px auto 0;max-width:700px;text-align:center}
.tour-color-options summary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font:11px/1.5 var(--sans);cursor:pointer;color:var(--head);text-decoration:underline;text-underline-offset:4px}
.tour-color-options summary::after{content:' +';margin-left:9px}
.tour-color-options[open] summary::after{content:' −'}
.tour-palette{justify-content:center;margin-top:9px}
.crystal-preview{background-image:var(--crystal-poster,url('/assets/kaleidoscope/poster.png'))}
/* Instant text flashes: no crossfade or opaque rectangle over the activity. */
.hero-live-affirmation,.hero-phone-affirmation{animation:none!important;transition:none!important;background:none;box-shadow:none;text-shadow:none;opacity:0}
.hero-live-affirmation{color:#211e1a}
.hero-phone-affirmation{color:#211e1a}
.tour-stage .tour-affirmation{animation:none!important;transition:none!important;opacity:0}
.tour-stage[data-scene=work] .tour-affirmation,.tour-stage[data-scene=vision] .tour-affirmation,.tour-stage[data-scene=rest] .tour-affirmation{display:block}
.hero-phone-surface .board-scroll-content{animation:none}
.hero-crystal-custom{display:none;position:absolute;inset:0;background:#FCF7F0;z-index:6;overflow:hidden}
.hero-photo-content[data-demo-phase=kaleidoscope] .hero-crystal-custom{display:block}
.hero-crystal-custom>.crystal-preview{position:absolute;inset:0 29% 0 0}
.hero-crystal-settings{position:absolute;inset:0 0 0 71%;padding:26px 20px;background:#FCF7F0;color:#211e1a;font-family:var(--sans)}
.hero-crystal-settings>span{font-size:11px;letter-spacing:.15em}
.hero-crystal-settings h4{font:35px/1.1 var(--serif);margin:25px 0}
.hero-crystal-settings>p{font-size:10px;letter-spacing:.12em;margin-bottom:16px}
.hero-crystal-settings>div{display:grid;grid-template-columns:1fr 1fr;gap:12px 9px}
.hero-crystal-settings [data-hero-color]{font-size:11px;padding:13px 7px;border-radius:15px;background:#f2f0ea;text-align:center;box-shadow:2px 2px 6px #211e1a10,-2px -2px 6px #fff}
.hero-crystal-settings [data-hero-color].selected{background:#211e1a;color:#FCF7F0;box-shadow:none}
.hero-crystal-settings>small{display:block;font-size:12px;line-height:1.8;margin-top:25px}
.hero-phone-surface .hero-crystal-custom>.crystal-preview{inset:0}
.hero-crystal-phone-label{position:absolute;inset:27px 10px auto;text-align:center;font:15px/1.6 var(--serif);color:white;text-shadow:0 1px 4px #0008;letter-spacing:.08em}
.hero-crystal-phone-label small{font:9px/1.5 var(--sans);letter-spacing:0}
.hero-preview-caption{gap:12px;flex-wrap:wrap;max-width:610px;justify-content:flex-end}
.hero-preview-caption>span{min-width:220px}
html[data-theme=dark] .hero-photo-content{filter:none}
@media(max-width:1100px){.hero-preview-caption{max-width:none;justify-content:flex-start}.hero-preview-caption>span{flex:1;min-width:220px}.walkthrough-panel{padding-top:30px}}
@media(max-width:850px){.walkthrough .device-layout{gap:0}.walkthrough-panel{padding-top:10px}.walkthrough-controls{padding-bottom:20px;border-bottom:1px solid var(--hair)}.walkthrough-controls .tour-transport{margin-top:8px}.walkthrough-controls .tour-mode{font-size:11px}}
@media(max-width:600px){.hero-preview-caption{gap:9px}.hero-preview-caption>span{flex:0 0 100%;min-width:0}.hero-preview-caption .soft-button{flex:0 0 auto}.walkthrough-controls .tour-transport{gap:16px;justify-content:space-between}.walkthrough-controls .tour-transport>.soft-button{min-width:135px;padding:13px 16px;font-size:11px}.crystal-color{padding:11px 14px;font-size:10px}.crystal-colors{gap:9px}.tour-palette .crystal-color{flex:1 0 40%}.walkthrough-controls .tour-progress>div{font-size:8px}}
@media(max-width:370px){.walkthrough-controls .tour-transport{gap:8px}.walkthrough-controls .tour-transport>.soft-button{min-width:110px;padding:13px 8px;gap:6px;font-size:11px}}