:root{font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e8edf5;background:#0b1220;color-scheme:dark;--green:#b1ed84;--line:#34445b}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;min-height:38px;border:1px solid var(--line);border-radius:8px;padding:7px 11px;background:#142238;color:#e8edf5}button{cursor:pointer;font-weight:650}button:hover:not(:disabled){background:#243b54}button:disabled{opacity:.5;cursor:default}a{color:inherit}button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:-100px;left:16px;z-index:40;background:white;color:#142238;padding:14px}.skip:focus{top:8px}.tour-bar{height:66px;padding:0 24px;display:flex;align-items:center;gap:20px;border-bottom:1px solid #3a4d63;background:#111e30;position:relative;z-index:10}.tour-brand{font-weight:850;letter-spacing:-.4px;font-size:17px;white-space:nowrap}.tour-brand span{font-size:9px;letter-spacing:.1em;color:var(--green);margin-left:9px}.tour-heading{margin-right:auto}.tour-heading h1{font-size:13px;font-weight:600;line-height:1.2;margin:0 0 4px}.tour-heading #progress{font-size:10px;color:#b5c5d8}.chapter-picker{display:flex;align-items:center;gap:9px;font-size:11px}.chapter-picker select{max-width:215px;font-size:11px}.exit-link{font-size:11px;white-space:nowrap;text-decoration:none}#restart{font-size:11px}.app-stage{height:calc(100dvh - 154px);position:relative;overflow:hidden}#app-frame{border:0;width:100%;height:100%;display:block;background:#0b1220}#target-halo{position:absolute;border:2px solid var(--green);border-radius:11px;box-shadow:0 0 0 5px #b1ed8424;pointer-events:none;transition:all .28s ease;z-index:3}#demo-pointer{position:absolute;width:27px;height:34px;z-index:9;filter:drop-shadow(0 3px 4px #0007);pointer-events:none;transition:left .55s ease,top .55s ease;transform-origin:5px 3px}#demo-pointer svg{width:100%;height:100%}#demo-pointer.clicking{animation:click .35s ease}#click-ring{width:36px;height:36px;border:3px solid #b1ed84;background:#b1ed8438;border-radius:50%;position:absolute;pointer-events:none;z-index:5;animation:ripple .5s ease forwards}.assistant{position:fixed;left:calc(100vw - 465px);top:130px;width:420px;height:auto;aspect-ratio:1902/827;z-index:8;transition:left .6s cubic-bezier(.22,.8,.25,1),top .6s cubic-bezier(.22,.8,.25,1),opacity .2s;filter:drop-shadow(0 5px 10px #0005);pointer-events:none}.guide-art{display:block;width:100%;height:100%;object-fit:contain}.speech-panel{position:absolute;left:38.2%;right:6.7%;top:24%;bottom:23%;color:#153757;display:flex;flex-direction:column;justify-content:center}.guide-label{display:flex;align-items:center;justify-content:space-between;font-size:8px;line-height:1.3;color:#426888;letter-spacing:.08em;gap:8px}.guide-label strong{font-weight:750}.speech{font-size:12px;line-height:1.42;font-weight:550;margin:5px 0 4px;overflow-wrap:anywhere}#assistant-state{font-size:8px;line-height:1.3;color:#456580}#collapse{position:absolute;right:5%;top:17%;background:#eff6fe;color:#365c7c;border:1px solid #b8cee0;border-radius:50%;width:23px;height:23px;min-height:23px;padding:0;line-height:20px;font-size:15px;pointer-events:auto}.assistant[data-phase=pressing] .guide-label strong{color:#18612b}.assistant.collapsed{width:80px;height:80px;aspect-ratio:auto;overflow:hidden;border-radius:50%;pointer-events:auto}.assistant.collapsed .guide-art{width:220px;height:96px;max-width:none;position:absolute;left:-5px;top:-9px}.assistant.collapsed .speech-panel{display:none}.assistant.collapsed #collapse{right:0;top:1px}.welcome-card{position:fixed;right:38px;bottom:120px;width:340px;max-height:calc(100dvh - 330px);overflow:auto;z-index:7;background:#172639;border:1px solid #44617b;border-radius:16px;padding:22px;box-shadow:0 18px 60px #0005}.eyebrow{font-size:9px;font-weight:800;letter-spacing:.12em;color:#b1ed84;margin:0 0 8px}.welcome-card h2{font-size:22px;line-height:1.2;margin:0 0 15px}.setup label{display:block;font-size:11px;font-weight:650;margin:10px 0 5px}.setup select{width:100%;font-size:12px;background:#0e1b2b}.primary{display:block;background:var(--green);color:#182a17;border:1px solid var(--green);font-weight:750;text-align:center;width:100%;font-size:13px;padding:12px;margin-top:16px;text-decoration:none;min-height:44px;border-radius:9px}.primary:hover:not(:disabled){background:#c4f4a2;color:#182a17}.voice-note{font-size:10px;color:#b5c6d5;line-height:1.55;margin:12px 0 0}.tour-footer{height:88px;padding:12px 24px;border-top:1px solid var(--line);background:#111e30;position:relative;z-index:10;display:flex;flex-direction:column;justify-content:center;gap:8px}.player-status{display:flex;align-items:center;justify-content:space-between;gap:10px}.player-status p{margin:0;font-size:10px;color:#b7c5d8}.player-status strong{color:#e0eadb;font-weight:500}.player-status #availability{margin-left:16px;color:#c6d8b6}.player-status #step-count{margin-left:10px}.player-controls{display:flex;gap:6px;align-items:center}.player-controls button{min-height:31px;font-size:10px;padding:5px 11px}.player-controls #demo-action{border-color:#5f8552;color:#c6f4a2}.player-controls #close{margin-left:auto}.sample-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--green);margin-right:6px}.player-controls details{font-size:10px;position:relative;color:#b6c9dd}.player-controls summary{cursor:pointer;min-height:31px;padding:7px 10px}.details-panel{position:absolute;bottom:45px;right:-100px;width:290px;padding:16px;border:1px solid #42617e;border-radius:10px;background:#172639;box-shadow:0 10px 40px #0008;max-height:60vh;overflow:auto}.details-panel p{font-size:11px}.talking .guide-label strong{animation:breathe 1.5s infinite}@keyframes click{50%{transform:scale(.7)}}@keyframes ripple{from{opacity:1;transform:scale(.45)}to{opacity:0;transform:scale(1.7)}}@keyframes breathe{50%{opacity:.6}}@media(max-width:1000px){.tour-bar{padding:0 14px;gap:10px}.tour-heading{display:none}.chapter-picker{margin-left:auto}.chapter-picker>span{display:none}.exit-link{display:none}.assistant{width:380px}.speech{font-size:11px}.welcome-card{right:24px}.speech-panel{top:23%;bottom:21%}}@media(max-width:600px){.tour-bar{height:56px;gap:9px}.tour-brand{font-size:13px}.tour-brand span{display:block;font-size:8px;margin:1px 0 0}.chapter-picker select{max-width:175px;font-size:10px;padding:6px;min-height:36px}#restart{min-height:34px;padding:5px 8px}#restart span{display:none}.app-stage{height:calc(100dvh - 150px)}.assistant{width:calc(100vw - 16px);max-width:360px;top:110px;left:8px}.speech-panel{left:38.5%;right:6.5%;top:23%;bottom:22%}.speech{font-size:10px;line-height:1.35;margin:3px 0}.guide-label{font-size:7px}#assistant-state{font-size:7px}#collapse{width:20px;height:20px;min-height:20px;line-height:17px;font-size:13px;right:4%;top:15%}.welcome-card{right:12px;bottom:116px;width:calc(100% - 24px);max-height:calc(100dvh - 335px);padding:16px}.welcome-card h2{font-size:19px;margin-bottom:10px}.setup{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}.setup label{margin:0;align-self:center;font-size:10px}.setup select{font-size:10px;min-height:34px;padding:6px}.setup #start,.setup .voice-note{grid-column:1/-1}.setup .voice-note{margin:0}.primary{margin-top:8px;padding:9px;min-height:40px}.tour-footer{height:94px;padding:9px 10px;gap:8px}.player-status{display:block}.player-status p{font-size:9px}.player-status #status{margin-top:4px;font-size:9px}.player-status #availability{margin-left:9px;font-size:8px}.player-controls{gap:4px}.player-controls button{font-size:9px;min-height:30px;padding:5px 7px}.player-controls #replay{display:none}.player-controls summary{font-size:9px;padding:7px 5px}.details-panel{right:-35px;width:270px}.assistant.collapsed{width:70px;height:70px}.assistant.collapsed .guide-art{width:195px;height:85px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:600px){.speech-panel{top:22%;bottom:21%}#assistant-state{display:none}.speech{font-size:10px;line-height:1.3;margin:3px 0}.guide-label{line-height:1.2}}

/* The approved square portrait performance sits inside the existing circular frame. */
.guide-video{position:absolute;left:4.5%;top:13.1%;width:30.5%;height:70.2%;object-fit:cover;border-radius:50%;pointer-events:none}.assistant.collapsed .guide-video{left:4px;top:4px;width:calc(100% - 8px);height:calc(100% - 8px)}@media(prefers-reduced-motion:reduce){.guide-video{visibility:hidden}}

/* Keep the primary action visible; only the optional setup choices scroll. */
.welcome-card{display:flex;flex-direction:column;overflow:hidden;max-height:max(210px,calc(100dvh - 330px))}
.welcome-card .eyebrow,.welcome-card h2{flex-shrink:0}
.setup{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.setup #start{flex-shrink:0;margin:0 0 12px}
.setup-options{min-height:0;overflow:auto;padding:3px 4px 4px;scrollbar-gutter:stable}
.setup-options label:first-child{margin-top:0}
@media(max-width:600px){.welcome-card{max-height:max(210px,calc(100dvh - 335px))}.setup{gap:0}.setup-options{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}.setup-options .voice-note{grid-column:1/-1}}

/* Keep the first action in the guide's speech panel, outside the setup scroll area. */
.assistant{top:76px;left:auto;right:24px}
.assistant.ready .speech-panel{top:20%;bottom:16%}
.assistant.ready #assistant-state{display:none}
.bubble-start{pointer-events:auto;min-height:36px;padding:5px 10px;margin:4px 0 0;font-size:12px;line-height:1.3;border-color:#7ba85d}
.welcome-card{top:280px;bottom:110px;height:auto;max-height:none}
.setup #start{margin:0 0 12px}
@media(max-width:600px){
 .assistant{top:64px;left:8px;right:auto}
 .assistant.ready .speech-panel{top:20%;bottom:16%}
 .assistant.ready .speech{font-size:10px;line-height:1.3}
 .bubble-start{font-size:11px;min-height:36px;margin-top:3px;padding:5px 7px}
 .welcome-card{top:232px;bottom:110px;max-height:none}
 .setup #start{margin:0 0 4px}
}
@media(min-width:601px) and (max-height:560px){
 .assistant{left:12px;right:auto;top:76px;width:min(340px,calc(50vw - 24px))}
 .assistant.ready .speech{font-size:10px;line-height:1.3}
 .assistant.ready .guide-label{display:none}
 .welcome-card{top:80px;right:12px;width:min(340px,calc(50vw - 24px));max-height:none}
}

/* The guide keeps the same anchor when its start controls disappear. */
.assistant.ready .speech-panel,.assistant .speech-panel{top:20%;bottom:16%}

/* Reserve space for the centred guide: app text never sits behind her. */
body{display:flex;flex-direction:column;height:100dvh;min-height:540px}
.tour-bar,.tour-footer{flex-shrink:0}
#tour{display:flex;flex:1;flex-direction:column;min-height:0}
.guide-stage{display:flex;justify-content:center;align-items:center;flex-shrink:0;padding:0 12px;background:#101c2d;border-bottom:1px solid var(--line);isolation:isolate}
.guide-stage{position:relative;z-index:11}
.guide-us-flag{position:absolute;left:clamp(24px,4vw,64px);top:50%;transform:translateY(-50%);width:clamp(100px,16vw,190px);max-width:calc(50% - 250px);height:auto;max-height:calc(100% - 24px);object-fit:contain;border-radius:3px;box-shadow:0 5px 22px #0004;opacity:.95;pointer-events:none}
.demo-options{position:absolute;left:calc(50% + 218px);top:50%;transform:translateY(-50%);font-size:12px;z-index:12}
.demo-options>summary{display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#142238;cursor:pointer;white-space:nowrap;list-style:none}
.demo-options>summary::-webkit-details-marker{display:none}
.demo-options[open]>summary{border-color:var(--green)}
.demo-options[open]>summary span{transform:rotate(180deg)}
.options-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 24px));max-height:min(360px,calc(100dvh - 300px));overflow:auto;overscroll-behavior:contain;background:#172639;border:1px solid #44617b;border-radius:12px;padding:16px;box-shadow:0 12px 36px #0007}
.demo-options .setup{display:block;overflow:visible}
.demo-options .setup-options{display:block;overflow:visible;padding:0;scrollbar-gutter:auto}
.demo-options label{display:block;font-size:11px;margin:12px 0 5px}
.demo-options .setup-options label:first-child{margin-top:0}
.demo-options select{width:100%;min-height:38px;font-size:12px}
.demo-options .voice-note{margin:12px 0}
#options-done{display:block;margin-left:auto;min-height:36px;font-size:12px}
.guide-stage .assistant{position:relative;inset:auto;width:min(420px,100%);margin:0;flex-shrink:0;transition:opacity .2s}
.guide-stage .assistant.collapsed{width:80px;height:80px;margin:6px 0}
.demo-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;flex:1;min-height:0}
.demo-workspace:has(>.welcome-card[hidden]){grid-template-columns:minmax(0,1fr)}
.demo-workspace .app-stage{height:auto;min-height:0;min-width:0}
.demo-workspace .welcome-card{position:relative;inset:auto;width:auto;min-width:0;min-height:0;height:auto;max-height:none;margin:0;border:0;border-left:1px solid var(--line);border-radius:0;padding:20px;box-shadow:none}
.demo-workspace #finish{min-height:0;overflow:auto}
@media(max-width:800px){
 .guide-us-flag{display:none}
 .guide-stage{flex-direction:column;padding-bottom:6px}
 .demo-options{position:relative;left:auto;top:auto;transform:none;margin-top:-3px}
 .options-panel{right:auto;left:50%;transform:translateX(-50%)}
 .demo-workspace{grid-template-columns:minmax(0,1fr)}
 .demo-workspace:has(>.welcome-card:not([hidden])) .app-stage{display:none}
 .demo-workspace .welcome-card{border-left:0;padding:16px max(16px,calc((100% - 440px)/2))}
}
@media(max-width:600px){
 .guide-stage{padding:0 8px}
 .guide-stage .assistant{width:min(360px,100%)}
 .guide-stage .assistant.collapsed{width:70px;height:70px}
}
@media(min-width:601px) and (max-height:560px){
 .guide-stage .assistant{width:min(340px,100%)}
 .guide-stage .assistant.collapsed{width:80px;height:80px}
 .demo-workspace .welcome-card{padding:14px 20px}
 .demo-workspace .welcome-card h2{font-size:19px;margin-bottom:10px}
}