/* Pre-change notice (alltology UX 4d17ea6)
   High-contrast card on the video for the last 3 s before a large light/sound change, plus a visible ON/OFF in the transport.
   No blinking, no sound; one gentle fade-in that is removed when motion is reduced */

#view-event-notice.view-notice{position:absolute;top:16px;right:16px;left:auto;z-index:4;display:flex;align-items:center;gap:12px;
  max-width:min(360px,calc(100% - 32px));padding:10px 16px 10px 10px;border:0;border-radius:14px;
  background:#0d0e11eb;color:#fff;box-shadow:0 8px 24px #0d0e1159;backdrop-filter:blur(8px);
  font:14px/1.35 Pretendard,system-ui,sans-serif;pointer-events:none;animation:pv-notice-in .22s ease-out}
#view-event-notice.view-notice[hidden]{display:none}
@keyframes pv-notice-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#view-event-notice.view-notice{animation:none}}
body.reduce-motion #view-event-notice.view-notice{animation:none}

.view-notice .notice-count{display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:11px;background:#257f76;color:#fff;line-height:1}
.view-notice .notice-count b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.view-notice .notice-count small{font-size:10px;font-weight:600;margin-top:-6px;opacity:.92}
.view-notice .notice-icons{display:flex;gap:4px;flex-shrink:0}
.view-notice .notice-icons svg{width:22px;height:22px;color:#ffe03d;fill:none;stroke:currentColor}
.view-notice .notice-text{display:grid;gap:2px;min-width:0}
.view-notice .notice-text b{font-size:16px;font-weight:800;letter-spacing:-.2px}
.view-notice .notice-text small{font-size:12.5px;color:#d5d7dc}
.view-notice .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Transport ON/OFF: same family as the mute label, state readable without color */
.notice-toggle{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:6px 9px;border:1px solid #ffffff33;border-radius:50px;background:transparent;color:#b0b3ba;font:600 12px/1 Pretendard,system-ui,sans-serif;cursor:pointer}
.notice-toggle svg{width:16px;height:16px}
.notice-toggle i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.3px}
.notice-toggle.on{color:#fff;border-color:#ffffff66}
.notice-toggle.on i{color:#ffe03d}
.notice-toggle:hover{background:#ffffff14}
.notice-toggle:focus-visible{outline:3px solid #257f7699;outline-offset:2px}

@media(max-width:760px){
  #view-event-notice.view-notice{top:10px;right:10px;gap:9px;padding:7px 12px 7px 7px;border-radius:12px;max-width:calc(100% - 20px)}
  .view-notice .notice-count{width:42px;height:42px;border-radius:9px}
  .view-notice .notice-count b{font-size:21px}
  .view-notice .notice-icons svg{width:18px;height:18px}
  .view-notice .notice-text b{font-size:14px}
  .view-notice .notice-text small{font-size:11.5px}
  .notice-toggle{padding:4px 2px;gap:3px;border-color:transparent}
  .notice-toggle.on{border-color:transparent}
  .notice-toggle span{display:none}
}
/* Narrow phones: keep the seek bar usable after adding the toggle (scene length is fixed and current time stays visible) */
@media(max-width:420px){.transport #duration{display:none}}