.m-stad .hero-clips-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 14px; border:1px solid #ff873a80; border-radius:8px; color:var(--accent); font-size:14px; font-weight:750; }
.m-stad .hero-clips-link:hover { background:#ff873a12; }
.m-stad .clips-dialog { width:min(880px,calc(100% - 24px)); }
.m-stad .clips-dialog .detail-content { padding:24px; }
.m-stad .clips-dialog .detail-close-form { position:static; margin:0 0 4px; }
.m-stad .clips-dialog h2 { margin-bottom:8px; padding-right:0; }
.m-stad .clips-intro { margin:0 0 18px; }
.m-stad .clips-stage { width:100%; aspect-ratio:16/9; min-height:200px; background:#030a11; }
.m-stad .clips-stage iframe { display:block; width:100%; height:100%; min-height:200px; border:0; }
.m-stad .clips-empty { display:grid; place-content:center; text-align:center; min-height:200px; padding:28px; border:1px solid #ffffff26; border-radius:12px; background:var(--shell); }
.m-stad .clips-empty span { color:var(--accent); font-size:36px; font-weight:850; }
.m-stad .clips-empty p { margin:12px 0 0; }
.m-stad .clips-track { margin:18px 0 12px; }
.m-stad .clips-track strong { display:block; font-size:20px; overflow-wrap:anywhere; }
.m-stad .clips-track span { display:block; color:var(--on-dark); margin-top:5px; }
.m-stad .clips-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.m-stad .clips-sound { display:inline-flex; align-items:center; gap:8px; min-height:44px; border:1px solid var(--accent); border-radius:8px; background:transparent; color:var(--accent); padding:10px 16px; font:inherit; font-weight:750; cursor:pointer; }
.m-stad .clips-sound[aria-pressed="true"] { background:var(--accent); color:var(--button-ink); }
.m-stad .clips-sound:disabled { opacity:.5; cursor:default; }
.m-stad .clips-status { min-height:1.5em; font-size:14px; margin:14px 0 0; }
.m-stad .clips-help { margin-top:18px; font-size:13px; color:var(--on-dark); }
.m-stad .clips-help summary { cursor:pointer; }
.m-stad .clips-help p { font-size:13px; margin:8px 0; }
.m-stad .clips-help a { color:var(--accent); text-decoration:underline; }
.m-stad .hero-clips-link:focus-visible,.m-stad .clips-sound:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.m-stad .clips-dialog [hidden] { display:none!important; }
@media(max-width:600px) { .m-stad .clips-dialog .detail-content { padding:16px; } .m-stad .clips-dialog h2 { font-size:26px; } .m-stad .clips-controls .button { padding:10px 14px; min-height:44px; } }