@import '../tokens.css?v=3c0b2c0204b1c7ef';
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4
 * Genre: modern-minimal · macrostructure: Workbench · theme: RIDGELINE existing brand
 * Nav: N3 side navigation · Footer: Ft2 inline · audience: product users
 * Functional interactive learning with a shared long-form manual. */
@font-face{font-family:Geist;src:url('../assets/fonts/Geist-Variable.woff2?v=3c0b2c0204b1c7ef') format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../assets/fonts/GeistMono-Variable.woff2?v=3c0b2c0204b1c7ef') format('woff2');font-weight:100 700;font-display:swap}
*{box-sizing:border-box}html,body{overflow-x:clip}body{margin:0;background:var(--color-paper);color:var(--color-ink);font:16px/1.65 var(--font-body)}button,input,textarea,select{font:inherit}button,a,input,textarea,select,summary{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-ink);border-radius:var(--radius-sm);padding:9px 14px;min-height:44px;white-space:nowrap;transition:transform var(--dur-short) var(--ease-out)}button:hover{border-color:var(--color-accent);color:var(--color-accent)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}.skip{position:fixed;top:-60px;left:16px;background:var(--color-surface);padding:12px;z-index:20}.skip:focus{top:8px}.topbar{height:80px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--color-line);padding:0 36px;background:var(--color-surface)}.topbar img{display:block;object-fit:contain;max-width:100%}.site-label{border-left:1px solid var(--color-line);padding-left:24px;color:var(--color-muted);font-size:14px}.home-link{margin-left:auto}.topbar a{white-space:nowrap;font-size:14px}.platform-link{border:1px solid var(--color-line);padding:8px 14px;border-radius:var(--radius-sm)}.layout{max-width:1680px;margin:auto;display:grid;grid-template-columns:248px minmax(0,1fr)}.sidebar{padding:32px 20px 24px 28px;border-right:1px solid var(--color-line);align-self:start;position:sticky;top:0;max-height:100vh;overflow-y:auto}.sidebar-title{font-weight:700}.sidebar-title span{display:block;font:11px var(--font-mono);letter-spacing:.1em;color:var(--color-muted);margin-top:8px}.search-label{display:block;margin:28px 0 8px;font-size:13px;color:var(--color-muted)}input,textarea,select{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:10px 12px;color:var(--color-ink);min-height:44px;min-width:0;width:100%}input::placeholder,textarea::placeholder{color:var(--color-muted)}#search{font-size:13px;padding:10px}nav h2{font-size:12px;color:var(--color-muted);font-weight:400;margin:28px 10px 8px}#navigation a{display:flex;align-items:center;gap:6px;justify-content:space-between;color:var(--color-ink);padding:10px;border-radius:var(--radius-sm);font-size:14px;white-space:nowrap;min-height:44px}#navigation a span{font-size:11px;color:var(--color-muted)}#navigation a[aria-current]{color:var(--color-accent);font-weight:700;background:var(--color-tint)}.sidebar-note{font-size:12px;color:var(--color-muted);border-top:1px solid var(--color-line);margin-top:28px;padding-top:20px}.menu{display:none}main{min-width:0;padding:30px clamp(24px,3.2vw,52px) 0}.breadcrumbs{font-size:12px;color:var(--color-muted)}.breadcrumbs span{margin:0 10px}.heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:34px 0 28px}.eyebrow{font-size:12px;letter-spacing:.03em;color:var(--color-accent);margin:0 0 10px}h1{font-size:clamp(26px,2.5vw,36px);line-height:1.25;letter-spacing:-.03em;margin:0;font-weight:700;overflow-wrap:anywhere;min-width:0}h2{font-size:22px;line-height:1.45}h3{font-size:18px;line-height:1.5;overflow-wrap:anywhere}h4{margin:0 0 16px}p{overflow-wrap:anywhere}.summary{color:var(--color-muted);margin:14px 0 0;max-width:65ch}.audience{white-space:nowrap;font-size:12px;border:1px solid var(--color-line);border-radius:4px;padding:4px 10px;margin-top:30px}.mode-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--color-line);padding-bottom:16px;margin-bottom:24px}.mode-switch{display:flex;gap:4px;background:var(--color-line);padding:3px;border-radius:var(--radius-sm)}.mode-switch button{border:0;background:transparent;font-size:14px}.mode-switch [aria-pressed=true]{background:var(--color-surface);color:var(--color-accent);font-weight:700}.quiet{background:transparent;border-color:transparent;color:var(--color-muted);font-size:13px}.demo-notice{font-size:12px;color:var(--color-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.demo-notice>span:last-child{margin-left:auto}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--color-success)}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 266px;border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:clip;background:var(--color-surface);min-height:460px}.stage{min-width:0;background:var(--color-paper)}.stage-header{height:58px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--color-surface);border-bottom:1px solid var(--color-line);font-size:14px}.stage-header span{font-size:11px;color:var(--color-muted);white-space:nowrap}.screen{padding:28px;animation:enter var(--dur-short) var(--ease-out)}.screen h3{margin:0 0 20px}.screen .study-code{font-size:16px}.screen-eyebrow{font-size:12px;color:var(--color-muted);margin:0 0 8px}.coach{border-left:1px solid var(--color-line);padding:26px 22px;display:flex;flex-direction:column;min-width:0}.step-counter{font:13px var(--font-mono);color:var(--color-accent)}.step-counter span{color:var(--color-muted)}.progress{display:flex;gap:5px;margin:14px 0 12px}.progress span{height:3px;flex:1;background:var(--color-line)}.progress .filled{background:var(--color-accent)}.coach h2{font-size:20px;margin:16px 0 0}.coach p{font-size:14px;color:var(--color-muted);line-height:1.8}.coach .coach-hint{font-size:12px;color:var(--color-accent);margin-top:auto;padding-top:24px}.coach-nav{display:flex;gap:4px;flex-wrap:wrap}.coach-nav button{font-size:12px;padding:7px 10px}.coach details{font-size:12px;border-top:1px solid var(--color-line);margin-top:20px;padding-top:16px}.coach summary{cursor:pointer;color:var(--color-muted)}.coach details p{font-size:12px}.primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-surface);font-size:14px}.primary:hover{background:var(--color-dark);color:var(--color-light)}.target{outline:3px solid var(--color-tint);outline-offset:3px}.target span{margin-left:12px}.field{display:flex;flex-direction:column;gap:7px;font-size:13px;margin-bottom:18px}.field textarea{resize:vertical;min-height:104px}.field select{max-width:100%}.form-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:0 16px}fieldset{border:0;padding:0;margin:20px 0}legend{font-size:14px;font-weight:700;margin-bottom:12px}.check{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px}.check input{width:18px;min-height:18px;accent-color:var(--color-accent)}.app-nav{display:grid;gap:8px;max-width:250px}.app-nav>span{padding:10px 16px;background:var(--color-surface);font-size:14px}.app-nav button{text-align:left}.muted{color:var(--color-muted);font-size:13px}.table-scroll{width:100%;overflow-x:auto;margin:18px 0 24px}table{border-collapse:collapse;width:100%;background:var(--color-surface);font-size:13px;text-align:left}th{font-size:11px;color:var(--color-muted);background:var(--color-tint);font-weight:400}td,th{padding:16px 12px;border-bottom:1px solid var(--color-line)}td{overflow-wrap:anywhere;min-width:90px}td strong{display:block;margin-top:8px}td small{color:var(--color-muted)}.study-code{overflow-wrap:anywhere;font-family:var(--font-mono)}.sheet{background:var(--color-surface);padding:24px;margin:24px 0;border-radius:var(--radius-sm)}.sheet-divider{border-top:1px solid var(--color-line);margin:24px 0}.sheet small{color:var(--color-muted);font-size:12px}.success{color:var(--color-success);font-size:14px;font-weight:700}.error{color:var(--color-error);font-size:13px;margin-top:18px}.error:empty{display:none}.screen-toolbar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:24px}.screen-toolbar h3{margin:0}.pending{padding:12px 16px;background:var(--color-tint);color:var(--color-accent);font-size:13px}.member{display:inline-block;background:var(--color-tint);padding:4px 8px;border-radius:4px;color:var(--color-accent)}.report-sections{display:grid;gap:14px;margin:28px 0}.report-sections span{padding-bottom:14px;border-bottom:1px solid var(--color-line)}.step-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.step-list button{display:flex;gap:8px;align-items:center;font-size:12px;background:transparent;border:0;padding:6px 8px}.step-list button span{font:11px var(--font-mono);width:22px;height:22px;border:1px solid var(--color-line);border-radius:50%;display:grid;place-items:center}.step-list button[aria-current]{color:var(--color-accent)}.step-list button[aria-current] span{border-color:var(--color-accent)}.below-demo{border-top:1px solid var(--color-line);margin-top:32px;padding-top:16px;display:grid;grid-template-columns:1fr auto;align-items:start;gap:0 20px}.below-demo h2{font-size:14px;grid-column:1/-1}.below-demo p{font-size:13px;color:var(--color-muted);margin:0}.ai-intro{padding:30px 0}.ai-monogram{display:grid;place-items:center;background:var(--color-tint);width:48px;height:48px;border-radius:50%;font-size:22px;color:var(--color-accent);margin-bottom:20px}.suggestion{white-space:normal;text-align:left;font-size:13px;color:var(--color-accent);margin-bottom:20px;width:100%}.chat-question{background:var(--color-tint);padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:24px;font-size:14px;overflow-wrap:anywhere}.chat-answer{font-size:14px}.source-label{font-size:12px;color:var(--color-accent);border-top:1px solid var(--color-line);padding-top:16px}.chart{padding:24px 0}.chart>div{display:grid;grid-template-columns:90px minmax(0,1fr) 24px;gap:14px;align-items:center;font-size:12px;margin:20px 0}.chart i{display:block;height:24px;background:var(--color-accent)}.bar-short{width:50%}.bar-long{width:100%}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.completion{padding:48px 32px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}.completion-mark{display:grid;place-items:center;width:48px;height:48px;background:var(--color-tint);color:var(--color-success);border-radius:50%;font-size:24px;margin-bottom:24px}.completion h2{font-size:24px}.completion>p{max-width:65ch}.manual{max-width:800px}.reading-intro{border-left:3px solid var(--color-accent);padding:12px 20px;background:var(--color-tint);font-size:14px}.manual section{margin:36px 0}.manual p,.manual li{font-size:15px;line-height:1.9}.written-steps{padding-left:24px}.written-steps>li{padding-left:10px;margin:28px 0}.written-steps>li::marker{color:var(--color-accent);font-weight:700}.written-steps h3{margin-bottom:8px}.written-steps p{margin-top:0}.written-steps dl{font-size:13px;background:var(--color-surface);padding:16px 20px}.written-steps dl>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;margin:8px 0}.written-steps dt{font-weight:700}.written-steps dd{margin:0;color:var(--color-muted);overflow-wrap:anywhere}.article-next{border-top:1px solid var(--color-line);padding-top:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.article-next a{font-size:14px}footer{font-size:11px;color:var(--color-muted);border-top:1px solid var(--color-line);margin-top:48px;padding:24px 0;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:1150px){.layout{grid-template-columns:222px minmax(0,1fr)}.sidebar{padding:28px 14px}.workbench{grid-template-columns:minmax(0,1fr)}.coach{border-left:0;border-top:1px solid var(--color-line)}.coach .coach-hint{padding-top:0}.coach h2{margin-top:8px}.screen{min-height:310px}.coach details{margin-top:12px}.heading{flex-direction:column}.audience{margin-top:0}.coach-nav{margin-top:10px}}@media(max-width:760px){.topbar{height:auto;min-height:72px;padding:16px 20px;gap:12px;flex-wrap:wrap}.topbar img{width:145px;height:30px}.site-label{border:0;padding:0;font-size:12px}.home-link{margin-left:auto}.platform-link{display:none}.layout{display:block}.sidebar{position:static;max-height:none;padding:20px;border-right:0;border-bottom:1px solid var(--color-line)}.sidebar-title,.sidebar-note{display:none}.search-label{margin:0 0 8px}.menu{display:block;width:100%;text-align:left;margin-top:10px}#navigation{display:none}#navigation.open{display:block}#navigation a{font-size:14px}main{padding:24px 20px 0}.heading{margin:24px 0}.summary{font-size:14px}.workbench{min-height:0}.screen{padding:20px}.coach{padding:22px}.demo-notice>span:last-child{margin-left:0;flex-basis:100%;padding-left:14px}.mode-bar{gap:4px}.mode-switch button{font-size:13px;padding:8px 10px}#print{padding:8px;font-size:12px}.stage-header{padding:14px 20px}.below-demo{display:block}.below-demo button{margin-top:12px}.written-steps dl>div{display:block}.written-steps dd{margin-top:4px}.step-list{gap:2px}.step-list button{max-width:100%;font-size:11px;padding:6px}.completion{padding:28px 20px}.completion h2{font-size:21px}.topbar .home-link{font-size:12px}.chart>div{grid-template-columns:74px minmax(0,1fr) 20px;gap:8px}.screen .actions{flex-direction:column;align-items:start}}@media print{.topbar,.sidebar,.mode-bar,.article-next,.breadcrumbs,.audience,.skip{display:none!important}.layout{display:block}main{padding:0}.manual{max-width:none}.manual section{break-inside:auto}.written-steps>li{break-inside:avoid}.heading{margin-top:0}body{background:var(--color-surface);font-size:12pt}footer{margin-top:24px}.reading-intro{background:none}}

/* Actual Vue platform viewport, with teaching controls outside the application. */
.live-mode .layout{max-width:1920px;grid-template-columns:226px minmax(0,1fr)}
.live-mode main{padding:24px 24px 0}.live-mode .heading{margin:20px 0}.live-mode h1{font-size:28px}.live-mode .mode-bar{margin-bottom:16px}.live-mode .summary{margin-top:8px;font-size:14px}.live-mode .audience{margin-top:8px}.live-mode footer{margin-top:24px}
.live-demo{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:clip}
.tour-control{display:flex;gap:24px;justify-content:space-between;align-items:center;padding:20px 24px;background:var(--color-dark);color:var(--color-light)}
.tour-copy{min-width:0;max-width:760px}.tour-copy .eyebrow{color:var(--color-light);opacity:.7;font-size:11px}.tour-copy h2{font-size:18px;margin:6px 0}.tour-copy p{font-size:13px;margin:0;line-height:1.7}.tour-buttons{display:grid;grid-template-columns:repeat(2,auto);gap:8px;flex-shrink:0}.tour-buttons button{font-size:12px;padding:8px 12px}.tour-buttons .quiet{color:var(--color-light)}.tour-buttons .primary{background:var(--color-light);color:var(--color-dark);border-color:var(--color-light)}.tour-buttons button:disabled{opacity:.45}.frame-scroll{overflow:auto;background:var(--color-paper)}#platform-frame{display:block;width:100%;height:760px;min-width:0;border:0;background:var(--color-surface)}.live-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 20px;border-top:1px solid var(--color-line);font-size:12px;color:var(--color-muted)}.mobile-demo-hint{display:none;font-size:12px;color:var(--color-muted)}.live-demo.expanded{position:fixed;inset:12px;z-index:100;display:flex;flex-direction:column}.expanded .frame-scroll{flex:1;min-height:0}.expanded #platform-frame{height:100%}.demo-expanded{overflow-y:hidden}.live-mode .sidebar{padding-left:16px;padding-right:16px}.live-mode #navigation a{font-size:13px}.live-mode #navigation a span{display:none}
@media(max-width:1100px){.tour-control{align-items:start;flex-direction:column;gap:16px}.tour-buttons{display:flex;flex-wrap:wrap}.mobile-demo-hint{display:block}}
@media(max-width:760px){.live-mode .layout{display:block}.live-mode main{padding:20px 16px 0}.tour-control{padding:18px}.live-footer{align-items:start;flex-direction:column;gap:0}.live-demo.expanded{inset:0;border-radius:0}.tour-copy p{font-size:12px}.tour-buttons{gap:4px}.tour-buttons button{padding:7px 9px}.expanded .tour-control{padding:12px}.expanded .tour-copy h2{font-size:16px}.expanded .live-footer{padding:4px 12px}.expanded .live-footer button{display:none}}

/* Both reading modes share one stable, viewport-sized shell. */
@media screen {
html,body{height:100%;overflow:hidden}
.topbar{height:56px;min-height:56px;padding:0 24px}
.layout{height:calc(100dvh - 56px);max-width:none;grid-template-columns:210px minmax(0,1fr)}
.sidebar{height:100%;max-height:none;position:static;padding:20px 14px;overflow:auto}
main{height:100%;min-height:0;padding:16px 24px 0;display:flex;flex-direction:column}
.heading{margin:12px 0;flex-direction:row;align-items:center}.heading h1{font-size:25px}.heading .eyebrow{margin-bottom:5px}.summary{margin-top:6px;font-size:13px}.audience{margin:0}.breadcrumbs{font-size:11px}
.mode-bar{flex-shrink:0;margin-bottom:12px;padding-bottom:10px}.mode-switch button{min-height:36px;padding:6px 12px}
#content{flex:1;min-height:0;overflow:hidden;position:relative}
#demo-panel{height:100%;display:flex;flex-direction:column;min-height:0}#demo-panel[hidden],#read-panel[hidden]{display:none}
#read-panel{height:100%;overflow:auto;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);padding:24px 32px;scrollbar-gutter:stable}.manual{max-width:900px;margin:auto}
.demo-notice{margin-bottom:6px;font-size:11px;flex-shrink:0}.live-demo{flex:1;min-height:0;display:flex;flex-direction:column}
.tour-control{padding:10px 16px;gap:16px;flex-direction:row;align-items:center;flex-shrink:0}.tour-copy h2{font-size:15px;margin:2px 0}.tour-copy p{font-size:12px;line-height:1.5}.tour-buttons{display:grid;grid-template-columns:repeat(2,auto);gap:4px}.tour-buttons button{min-height:32px;padding:4px 8px;font-size:11px}
.frame-scroll{flex:1;min-height:0;position:relative;overflow:hidden}#platform-frame{position:absolute;left:0;top:0;transform-origin:top left;max-width:none}
.live-footer{flex-shrink:0;padding:4px 12px;font-size:11px}.live-footer button{min-height:28px;padding:2px 8px;font-size:11px}.mobile-demo-hint{display:none}
footer{margin:0;padding:6px 0;border:0;flex-shrink:0;font-size:10px}
.sidebar-note{margin-top:16px;padding-top:12px}.search-label{margin-top:18px}#navigation a{font-size:13px;padding:8px;min-height:36px}nav h2{margin-top:18px}
}
@media screen and (max-width:760px){
.topbar{padding:0 14px;flex-wrap:nowrap}.topbar img{width:125px}.site-label{display:none}
.layout{display:flex;flex-direction:column}.sidebar{height:auto;flex-shrink:0;padding:8px 14px;max-height:35dvh}.search-label,#search{display:none}.menu{margin:0;min-height:32px;padding:4px 10px}
main{flex:1;min-height:0;padding:10px 14px 0}.breadcrumbs,.summary,.audience{display:none}.heading{margin:0 0 8px}.heading h1{font-size:20px}.heading .eyebrow{font-size:10px}.mode-bar{margin-bottom:8px;padding-bottom:6px}
.tour-control{padding:8px;gap:8px;align-items:start}.tour-buttons{grid-template-columns:1fr}.tour-buttons button{font-size:10px;min-height:26px;padding:2px 6px}.tour-copy p{font-size:11px}.tour-copy h2{font-size:13px}.demo-notice>span:last-child{display:none}.live-footer>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.live-footer{display:block}.live-footer button{display:none}#read-panel{padding:16px}footer span{display:none}
}
@media print{#demo-panel{display:none!important}#read-panel{display:block!important}}
/* Public walkthrough: raster screenshots plus independent hotspot controls. */
.frame-scroll{display:grid;place-items:center;background:#e8edef}
.screenshot-stage{position:relative;flex:none;overflow:hidden}
#tour-image{display:block;width:100%;height:100%;object-fit:contain}
.hotspot{position:absolute;border:2px solid #147dab;background:rgb(24 132 172 / 9%);border-radius:4px;min-height:0;padding:0;white-space:normal;box-shadow:0 0 0 3px rgb(255 255 255 / 80%)}
.hotspot:hover,.hotspot:focus-visible{background:rgb(24 132 172 / 20%);border-color:#147dab}
.hotspot span{position:absolute;right:0;top:0;transform:translateY(-100%);background:#126b91;color:white;padding:3px 8px;font-size:11px;line-height:1.5;border-radius:4px;white-space:nowrap}
.hotspot[hidden]{display:none}.hotspot:active{transform:none}
#image-status{position:absolute;bottom:8px;margin:0;background:var(--color-surface);font-size:12px;padding:4px 10px}#image-status:empty{display:none}
/* Give the screenshot the vertical space; place coaching beside it on desktop. */
@media screen and (min-width:1000px){
main{padding-top:12px}.breadcrumbs{display:none}.heading{margin:0 0 10px}.heading .eyebrow{margin-bottom:3px;font-size:11px}.heading h1{font-size:23px}.summary{margin-top:4px}.mode-bar{padding-bottom:8px;margin-bottom:8px}
.live-demo,.live-demo.expanded{display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:minmax(0,1fr) auto}
.frame-scroll{grid-column:1;grid-row:1;min-width:0}
.tour-control{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:22px 18px;gap:24px;overflow:auto;background:var(--color-surface);color:var(--color-ink);border-left:1px solid var(--color-line)}
.tour-copy .eyebrow{color:var(--color-accent);opacity:1}.tour-copy h2{font-size:19px;margin:12px 0}.tour-copy p{font-size:14px;line-height:1.85}.tour-buttons{margin-top:auto;gap:8px}.tour-buttons button{font-size:12px;min-height:36px}.tour-buttons .quiet{color:var(--color-muted)}.tour-buttons .primary{background:var(--color-accent);color:var(--color-surface);border-color:var(--color-accent)}#tour-zoom{grid-column:1/-1}
.live-footer{grid-column:1/-1;grid-row:2}.live-demo.expanded .tour-control{padding:24px 18px}
}
/* Always show the complete frame; no image scrolling or width-fill crop. */
.frame-scroll{display:grid;place-items:center;overflow:hidden;scrollbar-gutter:auto;background:var(--color-surface)}
.screenshot-stage{margin:0;max-width:100%;max-height:100%}
.live-demo{max-width:100%;align-self:center;width:100%}
.live-demo.expanded{width:auto!important;max-width:none;align-self:auto}
@media screen and (max-width:999px){.tour-buttons{grid-template-columns:repeat(2,auto)}.tour-control{gap:10px}}
/* Product guide directory, before entering an individual product. */
[hidden]{display:none!important}
body.product-selection{height:auto;min-height:100dvh;overflow-y:auto}
#product-picker{max-width:1120px;margin:0 auto;padding:64px 32px 40px}
#picker-title{font-size:34px}.picker-intro{color:var(--color-muted);margin:16px 0 36px}
.product-guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.product-guide{display:flex;flex-direction:column;align-items:flex-start;min-height:238px;border:1px solid var(--color-line);background:var(--color-surface);border-radius:8px;padding:28px;color:var(--color-ink)}
.product-number{font:11px var(--font-mono);letter-spacing:.05em;color:var(--color-muted)}
.product-guide h2{font-size:23px;margin:18px 0 8px}.product-guide p{font-size:14px;color:var(--color-muted);margin:0 0 24px}
.product-guide.available{border-color:var(--color-accent);background:var(--color-tint)}.product-guide.available:hover{text-decoration:none;box-shadow:0 4px 18px rgb(20 70 90 / 10%)}
.guide-coming,.guide-ready{font-size:12px;margin-top:auto;color:var(--color-muted)}.guide-ready,.guide-enter{color:var(--color-accent)}.guide-enter{font-size:14px;font-weight:700;margin-top:16px}
.picker-note{font-size:13px;color:var(--color-muted);margin-top:24px}.back-products{display:block;font-size:12px;margin:0 0 20px}
@media(max-width:760px){#product-picker{padding:32px 20px}#picker-title{font-size:27px}.product-guides{grid-template-columns:1fr;gap:14px}.product-guide{min-height:200px;padding:24px}.back-products{margin-bottom:10px}}
@media print{#product-picker,.back-products{display:none!important}}
/* Keep the product directory aligned with the guide's left navigation. */
#product-picker{display:grid;grid-template-columns:210px minmax(0,1fr);max-width:none;min-height:calc(100dvh - 56px);padding:0;margin:0}
.product-directory{border-right:1px solid var(--color-line);padding:24px 14px;background:var(--color-paper)}
.product-directory nav{display:grid;gap:8px;margin-top:28px}.product-directory nav>a,.directory-pending{display:block;padding:10px;border-radius:4px;font-size:14px;color:var(--color-ink)}
.product-directory small{display:block;margin-top:4px;font-size:11px;color:var(--color-muted)}.product-directory .directory-current{background:var(--color-tint);color:var(--color-accent);font-weight:700}.directory-pending{color:var(--color-muted)}
.picker-content{width:100%;max-width:1120px;justify-self:center;padding:48px 32px 40px;min-width:0}
@media(max-width:760px){#product-picker{display:block;padding:0}.product-directory{border-right:0;border-bottom:1px solid var(--color-line);padding:16px 20px}.product-directory nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0}.product-directory .directory-current{grid-column:1/-1}.product-directory .sidebar-note{display:none}.picker-content{padding:28px 20px}}