@layer components {
  .danmaku-overlay{position:fixed;overflow:hidden;pointer-events:none;z-index:12;contain:layout paint;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
  .danmaku-item{position:absolute;left:0;display:block;white-space:nowrap;max-width:none;line-height:1.6;font-weight:500;color:var(--link);text-shadow:0 1px 2px var(--surface);pointer-events:none}
  #message-form{position:relative;z-index:13}
  .danmaku-marker{font-size:10px;font-weight:400;vertical-align:1px;margin-right:6px;opacity:.8}
  .danmaku-settings{width:420px;padding:24px;overflow:auto}
  .danmaku-settings-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
  .danmaku-settings-head h2{font-size:21px}
  .danmaku-settings-status{font-size:12px;color:var(--muted);min-height:22px;margin-bottom:20px;line-height:1.8}
  #danmaku-preferences{display:grid;gap:20px}
  .danmaku-switch{display:flex;gap:12px;align-items:center;font-size:13px;min-height:36px}
  .danmaku-switch input{width:18px;height:18px;flex-shrink:0}
  .danmaku-setting{display:grid;gap:6px}
  .danmaku-setting>label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
  .danmaku-setting output{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
  .danmaku-setting input{width:100%;min-height:28px}
  .danmaku-settings-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--border);padding-top:20px;margin-top:4px}
  .danmaku-overlay[hidden],.danmaku-item[hidden]{display:none}
  [data-danmaku-settings][data-danmaku-visible=true]{color:var(--link);background:var(--accent-soft)}
}
@layer utilities {
  @media(max-width:680px){.danmaku-settings{padding:20px;width:calc(100vw - 32px)}.danmaku-settings-head h2{font-size:20px}}
  @media(prefers-reduced-motion:reduce){.danmaku-overlay{display:none}.danmaku-item{display:none}}
  @media print{.danmaku-overlay,.danmaku-settings{display:none!important}}
}