.guide-visual{--demo-padding:var(--s6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--fg);overflow:hidden;text-align:left;font-size:var(--text-small);min-width:0}
.demo-window-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--demo-padding);border-bottom:1px solid var(--border)}.demo-window-bar>strong{font-size:var(--text-body)}
.demo-control{display:inline-flex;align-items:center;justify-content:center;padding:var(--s2) var(--s3);background:var(--accent);color:var(--accent-fg);border:1px solid var(--accent);border-radius:var(--radius);font-size:var(--text-small);font-weight:600;white-space:nowrap}.demo-control.secondary{background:var(--surface);border-color:var(--border);color:var(--fg)}.demo-chip{padding:var(--s1) var(--s2);border:1px solid var(--border);border-radius:var(--radius);font-size:var(--text-small)}
.demo-file-list{padding:0 var(--demo-padding)}.demo-file{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--border)}.demo-file:last-child{border:0}.demo-file img,.demo-file .demo-notice{width:72px;height:60px;object-fit:cover;border-radius:var(--radius)}.demo-file strong,.demo-file span:not(.demo-check){display:block}.demo-file strong{overflow-wrap:anywhere}.demo-file span{color:var(--muted)}.demo-check{color:var(--color-success-text);font-size:1.44rem}.demo-notice{display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-fg);font-weight:600;font-size:.75rem;line-height:1.1;text-align:center}.demo-footnote{padding:var(--s3) var(--demo-padding);margin:0;background:var(--bg);color:var(--muted)}
.demo-program{list-style:none;margin:0;padding:0 var(--demo-padding)}.demo-program li{display:grid;grid-template-columns:auto 64px minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--border)}.demo-program li:last-child{border:0}.demo-program img,.demo-program .demo-notice{width:64px;height:48px;object-fit:cover;border-radius:var(--radius)}.demo-program strong{overflow-wrap:anywhere}.demo-order,.demo-time{font-family:var(--font-mono);font-size:.75rem}.demo-order{color:var(--muted)}.demo-time{white-space:nowrap}.demo-window-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s3);padding:var(--s4) var(--demo-padding);border-top:1px solid var(--border)}.demo-window-footer>span{color:var(--muted)}.demo-window-footer>div{display:flex;gap:var(--s2)}
.demo-pair{padding:var(--demo-padding);background:var(--bg)}.demo-pair-screen{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s6);background:var(--sidebar);color:var(--color-on-dark);border-radius:var(--radius);text-align:center}.demo-pair-screen>span:first-child{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em}.demo-pair-screen>strong{font-size:var(--text-h2)}.demo-pair-screen code{font-family:var(--font-mono);font-size:clamp(1.4rem,4vw,2rem);white-space:nowrap;letter-spacing:.06em}.demo-pair-screen small{color:var(--border)}.demo-pair-confirm{display:grid;gap:var(--s1);padding-top:var(--s4)}.demo-pair-confirm>span:not(.demo-control){color:var(--muted)}.demo-pair-confirm .demo-control{justify-self:start;margin-top:var(--s2)}
.demo-promotion{position:relative;aspect-ratio:16/9;background:var(--color-demo-background);overflow:hidden;isolation:isolate}.demo-promotion>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.demo-promotion-copy{position:relative;display:flex;flex-direction:column;justify-content:center;width:53%;height:100%;padding:var(--s6);color:var(--color-demo-text)}.demo-promotion-copy>span{font-size:clamp(.5rem,1vw,.75rem);letter-spacing:.1em;font-weight:600}.demo-promotion-copy strong{font-size:clamp(1.25rem,3vw,2.8rem);line-height:1.08;letter-spacing:-.04em;font-weight:600;margin:var(--s3) 0}.demo-promotion-copy p{font-size:clamp(.625rem,1.1vw,.875rem);margin:0}
@media(max-width:640px){.guide-visual{--demo-padding:var(--s4)}.demo-file{gap:var(--s3)}.demo-program li{grid-template-columns:auto 48px minmax(0,1fr) auto;gap:var(--s2)}.demo-program img,.demo-program .demo-notice{width:48px;height:40px}.demo-promotion-copy{padding:var(--s4)}.demo-promotion-copy>span{font-size:.5rem}.demo-promotion-copy strong{font-size:clamp(1.25rem,5.6vw,2.5rem);margin:var(--s2) 0}.demo-promotion-copy p{font-size:.625rem}}