/* A watch-first tour: Pip changes real sample outputs while the visitor observes. */
#tour-guide .demo-demonstration{margin-top:20px;padding:16px;border:1px solid #d1c5a6;border-radius:10px;background:#f1eee3}
#demo-tool-location{font-size:11px;font-weight:650;color:#40583e;margin:0 0 12px}
#demo-demonstration-fields{display:grid;gap:10px}
.demo-demonstration-field{display:grid;gap:5px;min-width:0}
.demo-demonstration-field>span{font-size:11px;color:#53634d}
.demo-demonstration-field output{display:flex;align-items:center;gap:9px;min-height:42px;padding:9px 11px;border:1px solid #c2b58e;border-radius:6px;background:#fffdf6;color:#263f30;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.demo-demonstration-field output i{display:block;width:24px;height:24px;border-radius:4px;border:1px solid #9da68d;flex:none}
.demo-demonstration-field output.is-typing:after{content:'';display:block;height:18px;border-right:2px solid #31523c}
#tour-guide[data-scene="finish"] #demo-demonstration-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
#tour-guide .demo-slider-field{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center;scroll-margin-bottom:90px;padding:10px;border:1px solid transparent;border-radius:6px}
#tour-guide .demo-slider-field.is-active{border-color:#ad8b4c;background:#fffdf6}
#tour-guide .demo-slider-field.is-inactive{opacity:.55}
#tour-guide .demo-slider-field output{min-height:0;border:0;padding:0;background:transparent;font-variant-numeric:tabular-nums;font-size:12px}
.demo-slider-track{grid-column:1/-1;height:6px;margin:8px 7px;position:relative;border-radius:6px;background:linear-gradient(to right,#a48345 var(--demo-slider-position),#d8d7c9 var(--demo-slider-position))}
.demo-slider-track:after{content:'';position:absolute;left:var(--demo-slider-position);top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:#bfa56c;border:2px solid #786231;box-shadow:0 2px 3px #263f3030}
.demo-slider-ends{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#53634d}
#tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack){height:380px}
#tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) .walkthrough-photo-group{height:100%;grid-template-columns:minmax(0,2.25fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
#tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) figure:first-child{grid-row:1/3}
#tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) canvas{max-height:150px}
#tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) figure:first-child canvas{max-height:340px}
#tour-guide.collection-walkthrough .walkthrough-visual{position:sticky;top:12px}
#tour-guide.collection-walkthrough #demo-action{font-size:12px;max-width:none;color:#304b36}
#tour-guide.collection-walkthrough .walkthrough-visual-bar{min-height:30px;margin-bottom:12px}
#tour-guide #demo-demonstration:empty{display:none}
@media(max-width:760px){
 #tour-guide.collection-walkthrough .walkthrough-body{display:flex;flex-direction:column}
 #tour-guide.collection-walkthrough .walkthrough-visual{order:-1;position:sticky;top:0;z-index:1;padding:10px;background:#f2f1e8;box-shadow:0 3px 8px #203e3320}
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack){height:210px}
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) .walkthrough-photo-group{gap:8px}
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) canvas{max-height:96px}
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) figure:first-child canvas{max-height:205px}
 #tour-guide.collection-walkthrough :is(.walkthrough-photo-group figcaption,#demo-visual-note){display:none}
 #tour-guide.collection-walkthrough .walkthrough-gallery.is-pack{height:230px}
 #tour-guide.collection-walkthrough .is-pack figure{height:62px}
 #tour-guide.collection-walkthrough .is-pack canvas{max-height:62px}
 #tour-guide.collection-walkthrough #demo-action{font-size:11px;line-height:1.5}
 #tour-guide .demo-demonstration{margin-top:14px;padding:12px}
}
@media(max-height:500px) and (min-width:761px){
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack){height:240px}
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) canvas{max-height:100px}
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) figure:first-child canvas{max-height:220px}
}

#tour-guide.collection-walkthrough .walkthrough-footer{position:sticky;bottom:0;z-index:3;box-shadow:0 -4px 12px #243b2310}
@media(max-width:370px) and (max-height:650px){
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack){height:145px}
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) canvas{max-height:66px}
 #tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) figure:first-child canvas{max-height:140px}
 #tour-guide.collection-walkthrough .walkthrough-gallery.is-pack{height:168px}
 #tour-guide.collection-walkthrough .is-pack figure{height:43px}
 #tour-guide.collection-walkthrough .is-pack canvas{max-height:43px}
}

/* Follow each narrated setting; keep the result and playback bar on screen. */
#tour-guide.collection-walkthrough{--demo-gallery-height:clamp(120px,calc(100dvh - 270px),380px);overflow-anchor:none}
#tour-guide .demo-demonstration-field{padding:8px;border:1px solid transparent;border-radius:6px}
#tour-guide .demo-demonstration-field.is-active{border-color:#ad8b4c;background:#fffdf6;box-shadow:0 0 0 1px #ad8b4c22}
#tour-guide #demo-scene-label{font-size:10px;line-height:1.4;font-weight:650;letter-spacing:.6px;color:#806837;margin:0 0 5px}
#tour-guide .demo-current-action{min-width:0}
#tour-guide.collection-walkthrough .walkthrough-gallery{height:var(--demo-gallery-height)}
#tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack){height:var(--demo-gallery-height)}
#tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) canvas{max-height:calc((var(--demo-gallery-height) - 36px)/2)}
#tour-guide.collection-walkthrough .walkthrough-gallery:not(.is-pack) figure:first-child canvas{max-height:calc(var(--demo-gallery-height) - 24px)}
#tour-guide.collection-walkthrough .is-pack figure{height:calc((var(--demo-gallery-height) - 52px)/3)}
#tour-guide.collection-walkthrough .is-pack canvas{max-height:calc((var(--demo-gallery-height) - 52px)/3)}
@media(max-width:760px){
 #tour-guide.collection-walkthrough{--demo-gallery-height:clamp(120px,30dvh,210px)}
 #tour-guide .demo-demonstration-field{padding:6px}
 #tour-guide.collection-walkthrough .walkthrough-visual{z-index:2}
 #tour-guide.collection-walkthrough .walkthrough-visual-bar{margin-bottom:8px}
 #tour-guide.collection-walkthrough .is-pack figure{height:calc((var(--demo-gallery-height) - 30px)/3)}
 #tour-guide.collection-walkthrough .is-pack canvas{max-height:calc((var(--demo-gallery-height) - 30px)/3)}
}
@media(max-width:370px) and (max-height:650px){#tour-guide.collection-walkthrough{--demo-gallery-height:135px}}
@media(max-height:650px) and (min-width:761px){
 #tour-guide.collection-walkthrough .walkthrough-visual{padding:12px}
 #tour-guide.collection-walkthrough #demo-visual-note{display:none}
}

/* Let full chapter names fit without squeezing seven buttons onto a phone. */
@media(max-width:900px){
 #tour-guide .walkthrough-chapters{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:6px 14px 10px}
 #tour-guide .walkthrough-chapters button{flex:0 0 auto;min-width:72px;white-space:nowrap;padding:10px 12px;justify-content:center;font-size:12px}
}