.demo-tour{max-width:880px;margin:0 auto}.demo-tour__frame,.step-loop__frame{position:relative;width:100%;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background:var(--color-bg-light-gray)}.demo-tour__player,.step-loop__player{display:block;width:100%;height:100%;object-fit:cover}.demo-tour__play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;border:none;border-radius:50%;background:var(--color-primary);color:var(--color-text-light);box-shadow:var(--shadow-md);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.demo-tour__play svg{width:34px;height:34px;margin-left:4px}.demo-tour__play:hover{background:var(--color-primary-hover);transform:translate(-50%,-50%) scale(1.04)}@media (max-width:600px){.demo-tour__play{width:56px;height:56px}.demo-tour__play svg{width:28px;height:28px;margin-left:3px}}.demo-tour__play:focus-visible,.step-loop__toggle:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}.demo-tour__chapters{margin-top:var(--space-3)}.demo-tour__chapters-title{margin:0 0 var(--space-1);font-size:var(--font-size-sm);font-weight:var(--fw-semibold);color:var(--color-text-dark)}.demo-tour__chapter-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:0 var(--space-3)}.demo-tour__chapter{display:flex;align-items:center;gap:.9rem;width:100%;min-height:44px;padding:.35rem .5rem;border:none;border-bottom:1px solid var(--color-border);background:none;text-align:left;font:inherit;font-size:var(--font-size-base);color:var(--color-text-dark);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}.demo-tour__chapter:hover{background:var(--color-bg-white)}.demo-tour__chapter[aria-current=true]{box-shadow:inset 3px 0 0 var(--color-primary)}.demo-tour__chapter[aria-current=true] .demo-tour__chapter-title,.demo-tour__time{font-weight:var(--fw-semibold)}.demo-tour__time{flex:0 0 2.8rem;font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--blue-600)}.demo-tour__transcript{margin-top:var(--space-2)}.demo-tour__transcript-toggle{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;list-style:none;font-size:var(--font-size-sm);font-weight:var(--fw-semibold);color:var(--blue-600);cursor:pointer}.demo-tour__transcript-toggle::-webkit-details-marker{display:none}.demo-tour__transcript-toggle:before{content:"";width:.45rem;height:.45rem;border-right:2px solid;border-bottom:2px solid;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-out)}.demo-tour__transcript[open]>.demo-tour__transcript-toggle:before{transform:rotate(45deg)}.demo-tour__transcript-toggle:hover{color:var(--blue-500)}.demo-tour__transcript-list{list-style:none;max-width:46rem;margin:var(--space-1) 0 0;padding:0;display:grid;gap:.6rem}.demo-tour__transcript-list li{display:flex;align-items:baseline;gap:.9rem;font-size:var(--font-size-base);line-height:1.55;color:var(--color-text-subtle)}.demo-tour__voice-credit{margin:var(--space-1) 0 0;font-size:var(--font-size-xs);color:var(--color-text-muted)}.demo-tour--watch .demo-tour__chapters,.demo-tour--watch .demo-tour__transcript{margin-top:2.5rem}.demo-tour--watch .demo-tour__chapters-title{margin-bottom:var(--space-2);font-size:var(--font-size-h2);font-weight:var(--fw-bold)}.demo-tour__caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--space-3);margin:var(--space-2) 0 0;font-size:var(--font-size-sm);color:var(--color-text-muted)}.demo-tour__duration{font-family:var(--font-mono);letter-spacing:.02em}.demo-tour__guide-link{display:inline-flex;align-items:center;min-height:44px;font-weight:var(--fw-semibold);color:var(--blue-600);text-decoration:underline;text-decoration-color:var(--blue-200);text-underline-offset:3px}.demo-tour__guide-link:hover{color:var(--blue-500);text-decoration-color:var(--blue-500)}.step-loop{min-width:0}.step-loop__toggle{position:absolute;right:.5rem;bottom:.5rem;display:grid;place-items:center;width:44px;height:44px;border:none;border-radius:50%;background:rgba(var(--blue-500-rgb),.9);color:var(--color-text-light);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}.step-loop__toggle svg{width:20px;height:20px}.step-loop__toggle:hover{background:var(--color-primary-hover)}.step-loop__toggle--large{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:64px;height:64px;box-shadow:var(--shadow-md)}.step-loop__toggle--large svg{width:30px;height:30px;margin-left:3px}.step-loop__title{margin:var(--space-2) 0 .35rem;font-size:var(--font-size-lg);font-weight:var(--fw-bold);color:var(--color-text-dark)}.step-loop--text{padding:1.25rem 1.5rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-bg-white)}.step-loop--text .step-loop__title{margin-top:0}.step-loop__text{margin:0;font-size:var(--font-size-base);color:var(--color-text-subtle)}