.sample-module { margin: 3rem 0; padding: clamp(1.25rem,3vw,2rem); border: 1px solid #bfc7c8; border-radius: 14px; background: #fafaf7; max-width: 760px; }
.sample-jump { margin: 1.1rem 0 0; font-size: 1rem; line-height: 1.5; }
.sample-jump a { display: inline-flex; align-items: center; min-height: 44px; color: #f4dfae; text-underline-offset: .28em; }
.sample-intro h2 { font: 600 clamp(1.5rem,3vw,2rem)/1.2 Georgia,serif; margin: 0; }
.sample-eyebrow { font: 750 .72rem/1.6 system-ui,sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #586266; margin: 0 0 .55rem; }
.sample-title { margin: 1rem 0 .5rem; font-size: 1rem; font-weight: 650; line-height: 1.55; overflow-wrap: anywhere; }
.sample-help { font-size: .95rem; color: #4c5659; line-height: 1.6; margin: .5rem 0 1.5rem; }
.sample-stage { position: relative; width: 100%; height: max(200px,calc((min(760px,100vw - 40px) - 66px)*.5625)); min-height: 200px; background: #111f29; color: #fff; }
.sample-placeholder { height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 10px; }
.sample-placeholder p { margin: 0; font-size: .8rem; color: #d8dee2; text-align: center; line-height: 1.5; }
.sample-notes { font-size: 2rem; color: #e7c582; }
.sample-module button,.sample-module a { min-height: 44px; }
.sample-module button { padding: .7rem 1rem; border: 1px solid #788b93; border-radius: 7px; background: #eef1f1; color: #162632; font: 700 .95rem/1.3 system-ui,sans-serif; cursor: pointer; }
.sample-module #load-sample { background: #f7ecd6; border-color: #dec89e; }
.sample-actions { margin-top: 16px; }
.sample-player-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; margin-top:16px; }
.sample-toggle-slot { width: 140px; min-height: 44px; }
.sample-actions a,.back-to-live { display: inline-flex; align-items: center; font-size: .95rem; font-weight: 650; text-underline-offset: .25em; }
.sample-status { font-size: .88rem; line-height: 1.55; color: #4c5659; min-height: 6.2em; }
.sample-status:empty { display: none; }
.sample-stage iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
.sample-empty { margin: 2rem 0; color: #4c5659; font-size: 1rem; }
.sample-module :focus-visible { outline: 3px solid #b37c22; outline-offset: 3px; }
.sample-module [hidden] { display:none !important; }
.sample-module { position: relative; }
.sample-fragment { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 150px; }
@media(max-width:700px) { .sample-module { margin: 2.7rem 0; } .sample-stage { height: 200px; } }