/* The guided tour is a Shelf page; its embedded canvas keeps its own visual system. */
.public-page[data-section="demo"] { background:var(--panel) }
.public-page[data-section="demo"] .public-header { position:sticky; top:0; z-index:20 }
.public-page[data-section="demo"] .public-footer { display:none }
.demo-page { width:100%; max-width:var(--site-max); margin:0 auto; padding:0 var(--site-gutter) 2rem }
.demo-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; padding:2.75rem 0 2.5rem }
.demo-intro { min-width:0 }
.demo-title { display:flex; align-items:center; gap:.75rem }
.public-page .demo-heading h1 { margin:0 }
.demo-heading p { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; margin:1rem 0 0; font-size:var(--t-body); color:var(--ink-2); line-height:1.6 }
.demo-label { font-weight:600; color:var(--ink) }
.demo-github { display:inline-grid; place-items:center; flex:none; width:2.75rem; height:2.75rem; border-radius:50% }
.demo-github svg { width:1.25rem; height:1.25rem }
.demo-github:hover { background:var(--panel-2) }
.demo-tour { display:grid; grid-template-columns:minmax(13rem,17rem) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); align-items:start }
.demo-stage { grid-column:2; grid-row:1; position:sticky; top:5.25rem; display:flex; flex-direction:column; height:calc(100dvh - 13rem); min-height:20rem }
.demo-workspace { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; border:0; border-radius:.75rem; background:var(--well); box-shadow:var(--shadow) }
.demo-toolbar { display:flex; align-items:center; gap:.75rem; flex:none; min-height:3.75rem; padding:.5rem .75rem; background:var(--panel) }
#demo-location { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-body-2); color:var(--ink-2) }
.demo-fit { display:flex; flex:none; gap:.125rem; padding:.25rem; border-radius:.625rem; background:var(--panel-2) }
.demo-fit button { min-height:2.25rem; padding:.5rem .75rem; border:0; border-radius:.4375rem; background:transparent; color:var(--ink-2); font:500 var(--t-meta)/1.4 var(--sans); cursor:pointer }
.demo-fit button:hover { color:var(--ink) }
.demo-fit button[aria-pressed="true"] { background:var(--panel); color:var(--ink) }
.demo-viewport { flex:1; min-height:0; position:relative }
#demo-canvas,#demo-screen { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; pointer-events:none }
#demo-screen { display:none; background:var(--panel) }
.demo-loading { position:absolute; inset:0; display:grid; place-items:center; background:var(--well); color:var(--ink-2); font-size:var(--t-body) }
.demo-stage[data-ready="true"] .demo-loading { display:none }
.demo-tour-controls { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex:none; min-height:3.75rem; color:var(--ink-2); font-size:var(--t-meta) }
.demo-tour-controls > div { display:flex; align-items:center; gap:.5rem; flex:none }
.demo-tour-controls button { min-width:2.75rem; min-height:2.75rem; padding:0; border:0; border-radius:.5rem; background:var(--panel-2); color:var(--ink); font:var(--t-body)/1 var(--sans); cursor:pointer }
.demo-tour-controls button:disabled { opacity:.4; cursor:default }
.demo-tour-controls button:hover:not(:disabled) { background:var(--well) }
.demo-steps { grid-column:1; grid-row:1; min-width:0 }
.demo-step { min-height:72vh; padding:2rem 0 3.75rem; scroll-margin-top:7.5rem }
.demo-step:last-child { min-height:calc(100dvh - 6.5rem) }
.demo-step-number { font:500 var(--t-meta)/1.4 var(--sans); color:var(--ink-3) }
.public-page .demo-step h2 { margin:1rem 0 .75rem; font-size:var(--t-section); line-height:1.4; letter-spacing:-.025em }
.demo-step p { font-size:var(--t-body); line-height:1.75; color:var(--ink-2) }
.demo-step[data-active] h2 { color:var(--ink) }
.demo-step .demo-step-action { margin-top:1.5rem; padding:0; border:0; font-size:var(--t-meta) }
.demo-step > a { display:inline-flex; align-items:center; min-height:2.75rem; font-size:var(--t-body-2) }
.demo-caption,.demo-caption > div { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem }
.demo-caption { justify-content:space-between; min-height:2.75rem; color:var(--ink-2); font-size:var(--t-meta) }
.demo-caption a { display:inline-flex; align-items:center; min-height:2.75rem }
@media (max-width:48rem) {
  .demo-heading { gap:1rem; padding:1.75rem 0 2rem }
  .demo-heading p { display:block; margin-top:.75rem }
  .demo-label { display:block; margin-bottom:.375rem }
  .demo-tour { display:flex; flex-direction:column; gap:0 }
  .demo-stage { order:-1; width:100%; top:4rem; height:min(55dvh,32.5rem); min-height:16.25rem; z-index:3; background:var(--panel); padding-top:.5rem }
  .demo-toolbar { flex-wrap:wrap; gap:.25rem; min-height:5rem; padding:.375rem .5rem }
  #demo-location { flex-basis:100%; font-size:var(--t-meta); line-height:1.5rem }
  .demo-fit button { min-height:2.75rem }
  .demo-stage[data-view="screen"] #demo-screen { display:block }
  .demo-stage[data-view="screen"] #demo-canvas { visibility:hidden }
  .demo-tour-controls { min-height:3.5rem; font-size:var(--t-micro) }
  .demo-tour-controls > div { gap:.3125rem }
  #demo-scroll-hint { max-width:9.375rem }
  .demo-steps { width:100% }
  .demo-step { min-height:70dvh; padding:1.5rem 0 3.5rem }
  .demo-step:last-child { min-height:80dvh }
  .public-page .demo-step h2 { margin-top:.75rem }
}