.showcase-layout{grid-template-columns:minmax(240px,340px) minmax(0,390px);max-width:920px;justify-content:center;gap:40px}.showcase-space{display:none}.scenario-panel{max-width:340px}.scenario-list{display:block;overflow:visible}.scenario-group{border-bottom:1px solid #d6e1e8;padding:4px 0}.scenario-group summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:14px;font-weight:600;color:#243f52}.scenario-group>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:0 0 10px}.scenario-choice{width:100%;min-width:0;min-height:44px;font-size:14px;line-height:1.35;white-space:normal}.scenario-choice>span{flex:0 0 24px;white-space:nowrap}.showcase-start{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:22px 0 12px}.showcase-start button,.app-toolbar button,.close-scenarios{min-height:44px;border:1px solid #b6cbd9;border-radius:12px;padding:12px 18px;background:#fff;color:#173e64;font-weight:600;line-height:1.3}.showcase-start .tour-start{background:#285bc4;border-color:#285bc4;color:#fff}.showcase-intro .tour-explainer{font-size:12px;color:#496273}.app-toolbar,.close-scenarios{display:none}.phone-stage{max-width:100%}.phone-stage iframe{max-width:100%}#scenario-events button,#scenario-reset{min-height:44px;font-size:13px}.event-panel summary{min-height:44px;align-items:center}.showcase-intro h1{text-wrap:balance}.scenario-panel,.phone-stage{min-width:0}.showcase-header>span{white-space:normal}.app-immersive{overflow:hidden}.app-immersive .showcase-header,.app-immersive .showcase-intro,.app-immersive .scope-note,.app-immersive .showcase-next{display:none}.app-immersive .app-toolbar{display:flex;position:fixed;inset:0 0 auto;z-index:20;min-height:64px;padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left));align-items:center;gap:8px;background:#f8fbfdf5;border-bottom:1px solid #cddce6}.app-toolbar button{padding:8px 12px;font-size:12px}.app-toolbar span{font-size:12px;flex:1;text-align:center}.app-immersive .showcase-layout{display:block;padding:0;margin:0;max-width:none}.app-immersive .phone-stage{position:fixed;inset:64px 0 0;width:100%;max-width:none;display:flex;justify-content:center;background:#f2f5f8}.app-immersive .phone-stage iframe{height:calc(100dvh - 64px);width:min(100%,390px);border-radius:0;box-shadow:none}.app-immersive .phone-stage small{display:none}.app-immersive .scenario-panel{display:none}.app-immersive.scenario-open .scenario-panel{display:block;position:fixed;inset:auto 0 0;max-width:600px;margin:auto;max-height:calc(100dvh - 80px);overflow:auto;overscroll-behavior:contain;z-index:30;border:1px solid #c4d7df;border-radius:24px 24px 0 0;padding:16px 20px max(16px,env(safe-area-inset-bottom));background:#f8fbfd;box-shadow:0 -14px 60px #10212e30}.app-immersive .close-scenarios{display:block;width:100%;margin-bottom:12px}.app-immersive .scenario-detail ol{display:none}.app-immersive.scenario-open .phone-stage{visibility:hidden}@media(max-width:760px){.showcase-layout{display:flex;flex-direction:column;padding:0 12px;gap:22px;align-items:center}.scenario-panel{max-width:390px;width:100%;order:2}.phone-stage{order:1}.showcase-intro{padding:28px 20px 24px}.showcase-intro h1{font-size:34px}.scenario-group>div{grid-template-columns:repeat(2,minmax(0,1fr))}.scenario-detail ol{display:block}#scenario-events{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-start{display:grid}.showcase-header{gap:12px;padding-inline:16px}.showcase-header>span{font-size:12px}.showcase-header img{max-width:65px}.showcase-header .back-link{font-size:12px}.app-toolbar span{display:none}.app-toolbar button{flex:1}.phone-stage iframe{height:812px}.app-immersive .phone-stage iframe{height:calc(100dvh - 64px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.runtime-notice{position:absolute;inset:12px 12px auto;z-index:5;padding:16px;border:1px solid #a8bfd1;border-radius:18px;background:#f8fbfd;color:#10212e;box-shadow:0 10px 30px #10212e22;text-align:left}.runtime-notice[hidden]{display:none}.runtime-notice button{width:100%;min-height:44px;padding:10px;border:1px solid #245abc;border-radius:10px;background:#245abc;color:#fff;font:inherit}

/* Demonstrator guidance stays outside the application viewport. */
.tour-guide{padding:16px;margin:20px 0;border-left:3px solid #285bc4;border-radius:0 12px 12px 0;background:#e8effa;color:#163a5b}
.tour-guide[hidden],.tour-log[hidden]{display:none}
.tour-guide-label{display:flex;justify-content:space-between;gap:12px;margin:0;font-size:12px;font-weight:600}
.tour-guide-label span{font-variant-numeric:tabular-nums}
.tour-guide h3{font-size:18px;line-height:1.3;margin:8px 0}
.tour-guide p:last-child{font-size:13px;line-height:1.55;margin:0}
.tour-log{margin-top:14px;border-top:1px solid #d6e1e8;color:#496273;font-size:12px}
.tour-log summary{min-height:44px;padding:12px 0;cursor:pointer}
.tour-log ul{padding-left:20px;overflow-wrap:anywhere}
.showcase-start button,.app-toolbar button,.close-scenarios,.scenario-choice,#scenario-events button,#scenario-reset{font-family:inherit;cursor:pointer}
.showcase-start button:focus-visible,.app-toolbar button:focus-visible,.close-scenarios:focus-visible,.scenario-choice:focus-visible,#scenario-events button:focus-visible,#scenario-reset:focus-visible,summary:focus-visible{outline:3px solid #245abc;outline-offset:3px}
.app-immersive main{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.app-immersive .app-toolbar{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex:0 0 auto;gap:4px 8px;min-height:0;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px}
.app-toolbar .open-scenarios{grid-column:1;grid-row:1}
.app-toolbar .close-app{grid-column:2;grid-row:1}
.app-toolbar #tour-progress{display:block;grid-column:1/-1;grid-row:2;margin:0;text-align:center;color:#456071;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.app-immersive .showcase-layout{flex:1;min-height:0;width:100%}
.app-immersive .phone-stage{position:relative;inset:auto;height:100%;min-height:0}
.app-immersive .phone-stage iframe{height:100%;min-height:0}
@media(max-width:760px){.app-immersive .showcase-layout{display:block}.app-toolbar button{min-width:0;white-space:normal}}