/* Prepared guide */
#notes-dialog .guide-lenses{grid-template-columns:repeat(3,minmax(0,1fr));position:sticky;top:-1px;z-index:2}
#notes-dialog .guide-lenses button{font-size:var(--gs-text-sm);min-height:46px}
.guide-counts{font-size:var(--gs-text-sm);color:var(--gs-content-information);font-weight:var(--gs-weight-semibold)}
.guide-stage{border:1px solid var(--gs-border-default);border-radius:var(--gs-radius-md);background:var(--gs-surface-raised);margin:var(--gs-space-3) 0;overflow:hidden}
.guide-stage>summary{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--gs-space-1) var(--gs-space-2);align-items:center;padding:var(--gs-space-4);cursor:pointer;font-size:var(--gs-text-sm);font-weight:var(--gs-weight-semibold);list-style:none}
.guide-stage>summary:after{content:'+';grid-column:1;grid-row:2;color:var(--gs-content-information);text-align:center;font-size:var(--gs-text-base)}
.guide-stage[open]>summary:after{content:'−'}
.guide-stage>summary small{grid-column:2;font-size:var(--gs-text-sm);font-weight:var(--gs-weight-regular);color:var(--gs-content-secondary)}
.guide-stage-number{background:var(--gs-surface-raised);color:var(--gs-content-information);border-radius:var(--gs-radius-pill);width:30px;height:30px;display:grid;place-items:center;font-size:var(--gs-text-xs)}
.guide-stage-body{border-top:1px solid var(--gs-border-default);padding:var(--gs-space-4)}
.guide-stage-body h3{font-size:var(--gs-text-sm);margin:var(--gs-space-6) 0 var(--gs-space-3);color:var(--gs-content-information)}
.guide-reading{font-size:var(--gs-text-sm);line-height:1.65;color:var(--gs-content-secondary)}
.guide-item{display:flex;gap:var(--gs-space-3);align-items:flex-start;border-bottom:1px solid var(--gs-border-default);padding:var(--gs-space-3) 0}
.guide-item>p,.guide-task-check{flex:1;min-width:0;margin:0;font-size:var(--gs-text-sm);line-height:1.6;overflow-wrap:anywhere}
.guide-task-check{display:flex;align-items:flex-start;gap:var(--gs-space-2);cursor:pointer}
.guide-task-check input{width:21px;height:21px;margin-top:var(--gs-space-1);flex:none;accent-color:var(--gs-content-information)}
.guide-task-check span{min-width:0}.guide-task-check small{display:block;font-size:var(--gs-text-sm);color:var(--gs-content-secondary);line-height:1.5;margin-top:var(--gs-space-1)}
.guide-task-check:has(input:checked)>span{color:var(--gs-content-secondary)}
.guide-task-check:has(input:checked)>span:before{content:'Done · ';font-weight:var(--gs-weight-semibold)}
.guide-remove,.guide-restore{border:0;background:none;min-height:44px;padding:var(--gs-space-2) var(--gs-space-1);font-size:var(--gs-text-sm);color:var(--gs-content-accent);flex:none}
.guide-restore{color:var(--gs-content-information)}.guide-removed{margin-top:var(--gs-space-5);font-size:var(--gs-text-sm);color:var(--gs-content-secondary)}
.guide-removed>summary{cursor:pointer;min-height:44px;padding:var(--gs-space-3) 0}.guide-removed p{font-size:var(--gs-text-sm)}
.guide-reset-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--gs-space-2);margin:var(--gs-space-4) 0}
.guide-reset-actions button{font-size:var(--gs-text-sm);min-height:44px;text-align:left}
.guide-reset-actions button:last-child{color:var(--gs-content-secondary)}
.guide-document li,.guide-document p{overflow-wrap:anywhere}
.guide-document .guide-print-stage{margin-top:var(--gs-space-6)}
@media(max-width: 40rem){.guide-stage>summary{padding:var(--gs-space-3)}.guide-stage-body{padding:var(--gs-space-3)}.guide-item{flex-wrap:wrap;gap:var(--gs-space-1)}.guide-item>p,.guide-item>.guide-task-check{flex-basis:100%}.guide-remove,.guide-restore{margin-left:auto;padding-right:var(--gs-space-1)}.guide-stage-body h3{margin-top:var(--gs-space-5)}}
@media print{.guide-print-stage>h2{break-after:avoid}.guide-print-stage{break-inside:auto}.guide-print-stage h3{break-after:avoid}}
/* The short introduction uses the working route in either renderer. */
body[data-intro=true] .visual-top .segmented,body[data-intro=true] .body-options,body[data-intro=true] .camera-buttons,body[data-intro=true] .playback,body[data-intro=true] .visual-bottom,body[data-intro=true] .view-caption,body[data-intro=true] #toggle-diagram,body[data-intro=true] .tip-label{display:none!important}
.intro-controls{padding:var(--gs-space-5) var(--gs-space-6) var(--gs-space-6);border-top:1px solid var(--gs-border-default);background:var(--gs-surface-inverse);color:var(--gs-content-inverse)}
.intro-step-label{display:flex;justify-content:space-between;gap:var(--gs-space-2);color:var(--gs-content-secondary);font-size:var(--gs-text-xs);letter-spacing:.05em}.intro-step-label span:first-child{color:var(--gs-content-information);font-weight:var(--gs-weight-semibold)}
.intro-controls h2{font-size:var(--gs-text-xl);line-height:1.2;margin:var(--gs-space-3) 0 var(--gs-space-2);letter-spacing:-.035em}.intro-controls p{margin:0 0 var(--gs-space-4);font-size:var(--gs-text-sm);line-height:1.55;color:var(--gs-content-inverse);min-height:3.1em}
.intro-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gs-space-2)}.intro-steps button{border:1px solid var(--gs-border-default);border-radius:var(--gs-radius-md);padding:var(--gs-space-2) var(--gs-space-1);min-height:44px;background:transparent;color:var(--gs-content-inverse);font:inherit;font-size:var(--gs-text-sm)}.intro-steps button[aria-pressed=true]{background:var(--gs-surface-sunken);color:var(--gs-content-primary);border-color:var(--gs-border-default)}
.intro-actions{display:flex;align-items:center;gap:var(--gs-space-4);flex-wrap:wrap;margin-top:var(--gs-space-4)}.intro-actions .inline-link{color:var(--gs-content-inverse);margin:0;font-size:var(--gs-text-sm)}.intro-actions .secondary-button{background:var(--gs-surface-raised);color:var(--gs-content-primary);border:0;padding:var(--gs-space-2) var(--gs-space-4);min-height:44px;margin:0}.intro-controls #intro-motion-note{margin:var(--gs-space-3) 0 0;min-height:0;color:var(--gs-content-secondary);font-size:var(--gs-text-sm)}
.intro-purpose{display:flex;gap:var(--gs-space-4);margin:var(--gs-space-8) 0;color:var(--gs-content-primary)}.intro-purpose>span{font-size:var(--gs-text-xl);color:var(--gs-content-accent)}.intro-purpose p{margin:0;font-size:var(--gs-text-base);line-height:1.65}.intro-next{display:grid;gap:var(--gs-space-3);margin:var(--gs-space-6) 0 var(--gs-space-4)}.intro-next .next-button,.intro-next .secondary-button{margin:0;width:100%}.intro-replay-link{margin:0 0 var(--gs-space-5)!important}
.intro-camera{position:absolute;z-index:4;right:22px;bottom:54px;width:128px;padding:var(--gs-space-2);background:var(--gs-surface-inverse);border:1px solid var(--gs-border-default);border-radius:var(--gs-radius-md);box-shadow:none;pointer-events:none}.intro-camera svg{width:100%;display:block}.intro-camera>span{display:block;font-size:var(--gs-text-xs);color:var(--gs-content-inverse);text-align:center;line-height:1.35;padding-top:var(--gs-space-1)}.intro-camera small{font-size:var(--gs-text-xs);color:var(--gs-content-secondary)}
body[data-intro=true] .model-window{min-height:330px;height:clamp(330px,43vh,440px)}body[data-intro=true] #diagram-host{right:80px;inset-block:8px 24px}body[data-intro=true] #model-kind{font-size:var(--gs-text-xs)}
/* Suggestions appear only after guide review or in follow-up. */
.app-invitation{border:1px solid var(--gs-border-default);border-radius:var(--gs-radius-md);background:var(--gs-surface-raised);padding:var(--gs-space-5);margin:var(--gs-space-6) 0 var(--gs-space-3)}.app-invitation .eyebrow{font-size:var(--gs-text-xs);letter-spacing:.08em;color:var(--gs-content-primary);margin:0 0 var(--gs-space-2)}.app-invitation h3{font-size:var(--gs-text-xl);letter-spacing:-.035em;line-height:1.25;margin:0 0 var(--gs-space-2)}.app-invitation p{font-size:var(--gs-text-sm);line-height:1.6;margin:0 0 var(--gs-space-4)}.app-invitation .small-note{font-size:var(--gs-text-sm);color:var(--gs-content-primary);margin:var(--gs-space-3) 0}.app-store-links{display:grid;gap:var(--gs-space-2)}.app-store-links a{display:block;border:1px solid var(--gs-border-default);color:var(--gs-content-primary);border-radius:var(--gs-radius-md);text-decoration:none;padding:var(--gs-space-3) var(--gs-space-3);font-size:var(--gs-text-sm);background:var(--gs-surface-raised);min-height:44px}.app-store-links a:hover{background:var(--gs-surface-sunken)}.app-qr{margin:var(--gs-space-4) 0}.app-qr>summary{font-size:var(--gs-text-sm);color:var(--gs-content-primary);cursor:pointer;min-height:36px;padding:var(--gs-space-1) 0}.app-qr-codes{display:flex;gap:var(--gs-space-4);flex-wrap:wrap;margin-top:var(--gs-space-3)}.app-qr figure{margin:0;text-align:center;background:var(--gs-surface-raised);padding:var(--gs-space-2);border-radius:var(--gs-radius-md)}.app-qr img{display:block;max-width:100%;height:auto}.app-qr figcaption{font-size:var(--gs-text-sm);margin:var(--gs-space-1) 0 var(--gs-space-1)}.app-invitation .inline-link{font-size:var(--gs-text-sm);margin:0}
@media(max-width: 40rem){body[data-intro=true] .visual-card{position:static}body[data-intro=true] .model-window{height:260px;min-height:260px}body[data-intro=true] #diagram-host{inset:6px 58px 28px 0}.intro-camera{width:98px;right:14px;bottom:42px;padding:var(--gs-space-1);border-radius:var(--gs-radius-md)}.intro-camera>span{font-size:var(--gs-text-xs)}.intro-camera small{font-size:var(--gs-text-xs)}.intro-controls{padding:var(--gs-space-4) var(--gs-space-4) var(--gs-space-4)}.intro-controls h2{font-size:var(--gs-text-xl);margin-top:var(--gs-space-2)}.intro-controls p{font-size:var(--gs-text-sm);margin-bottom:var(--gs-space-3)}.intro-actions{gap:var(--gs-space-4)}.intro-actions .inline-link{font-size:var(--gs-text-xs)}.intro-step-label{font-size:var(--gs-text-xs)}.intro-panel{padding-top:var(--gs-space-2)}.intro-purpose{margin:var(--gs-space-5) 0}.app-invitation{padding:var(--gs-space-4)}.app-qr{display:none}}
@media(max-width: 40rem){.intro-actions{gap:var(--gs-space-3)}.intro-actions .secondary-button{padding-inline:var(--gs-space-3)}.intro-steps{gap:var(--gs-space-1)}.intro-steps button{font-size:var(--gs-text-xs)}.intro-controls{padding-inline:var(--gs-space-3)}}
@media print{.app-invitation{display:none!important}}
/* Keep the guide title and close control visible without covering its tabs. */
#notes-dialog[open]{display:flex;flex-direction:column;height:min(900px,85dvh);overflow:hidden}
#notes-dialog .dialog-heading{position:relative;flex:none;z-index:3}
#notes-dialog .dialog-heading .close-dialog{flex:none}
#notes-dialog .dialog-body{min-height:0;flex:1;overflow:auto}
#notes-dialog .guide-lenses{top:-1px}
.site-header #question-count{width:auto;min-width:0;height:auto;padding:var(--gs-space-1) var(--gs-space-1);border-radius:var(--gs-radius-md);font-size:var(--gs-text-xs)}
body[data-intro=true] .visual-top>span{display:block}
@media(max-width: 40rem){body[data-intro=true] #diagram-host{right:92px}}
@media(max-width: 40rem){body[data-intro=true] .model-window{height:240px;min-height:240px}}
body[data-intro=true] .visual-top #visual-title{display:block}