.epic-creating { display: flex; align-items: center; gap: 8px; color: var(--epic-muted, #5d6d86); font-size: 14px; }
.epic-creating-orbit { width: 64px; height: 64px; flex: 0 0 64px; animation: epic-creating-turn 32s linear infinite; }
.epic-creating-orbit svg { display: block; width: 100%; height: 100%; }
.epic-creating-orbit rect:nth-child(9n + 1) { fill: #579ef4; }
.epic-creating-orbit rect:nth-child(9n + 2) { fill: #ad92e8; }
.epic-creating-orbit rect:nth-child(9n + 3) { fill: #76c6dd; }
.epic-creating-orbit rect:nth-child(9n + 4) { fill: #82b0f6; }
.epic-creating-orbit rect:nth-child(9n + 5) { fill: #899de6; }
.epic-creating-orbit rect:nth-child(9n + 6) { fill: #5bb7d4; }
.epic-creating-orbit rect:nth-child(9n + 7) { fill: #b69fef; }
.epic-creating-orbit rect:nth-child(9n + 8) { fill: #699fdd; }
.epic-creating-orbit rect:nth-child(9n) { fill: #8fbafa; }
.epic-creating.is-paused .epic-creating-orbit { animation-play-state: paused; }
@keyframes epic-creating-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .epic-creating-orbit { animation: none; } }

.epic-media { max-width: 1540px; margin: 0 auto; }
.epic-media-heading, .epic-media-actions, .epic-media-filebar, .epic-media-panel-heading, .epic-media-duration, .epic-media-bgm-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.epic-media-heading { margin: 22px 0 28px; flex-wrap: wrap; }
.epic-media-actions { gap: 8px; }
.epic-media-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.epic-media-main { min-width: 0; }
.epic-media-stage { aspect-ratio: 16 / 9; border: 1px solid #d5e3ef; border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at 30% 0%, #e5f0fc, transparent 70%), #eef3f8; display: grid; place-items: center; }
.epic-media-stage:has(video) { background: #101621; }
.epic-media-stage video { width: 100%; height: 100%; max-height: 580px; object-fit: contain; }
.epic-media-filebar { padding: 14px 2px 24px; font-size: 13px; }
.epic-media-filename { color: var(--epic-muted); overflow-wrap: anywhere; min-width: 0; }
.epic-media-file-button, .epic-media-reset { color: var(--epic-blue); background: none; border: 0; cursor: pointer; white-space: nowrap; font-size: 13px; padding: 4px 0; }
.epic-media-file-input { display: none; position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.epic-media-copy { display: grid; gap: 24px; padding-bottom: 32px; }
.epic-media-copy .epic-input { background: rgba(255,255,255,.65); border-color: #d5e0eb; border-radius: 12px; padding: 12px 14px; }
.epic-media-copy textarea { resize: vertical; line-height: 1.9; }
.epic-media-editing { display: grid; gap: 20px; }
.epic-media-panel { display: grid; gap: 22px; padding: 24px; border: 1px solid rgba(255,255,255,.9); border-radius: 20px; background: rgba(255,255,255,.65); box-shadow: 0 12px 36px #244b7610; }
.epic-media-panel h2 { margin: 0; font-size: 16px; font-weight: 650; }
.epic-media-panel .epic-field { gap: 8px; }
.epic-media-panel .epic-field label { font-size: 12px; margin: 0; color: var(--epic-muted); }
.epic-media-panel-heading { gap: 8px; }
.epic-media-volume { display: flex; align-items: center; gap: 12px; }
.epic-media-volume input { min-width: 0; width: 100%; accent-color: #3488e5; cursor: pointer; padding: 0; border: 0; box-shadow: none; }
.epic-media-volume output { font-size: 12px; color: var(--epic-muted); min-width: 36px; text-align: right; }
.epic-media :is(button, input, textarea, label):focus, .epic-media :is(button, input, textarea, label):focus-visible { outline: none; box-shadow: none; }
.epic-media .epic-input, .epic-media .epic-input:focus { border-color: #d5e0eb; }
.epic-media button:disabled { cursor: default; opacity: .45; }
.epic-media-article { padding: 28px 0; overflow-wrap: anywhere; }
.epic-media-article h2 { font-size: 26px; font-weight: 650; margin: 0 0 24px; }
.epic-media-article p { white-space: pre-wrap; font-size: 17px; line-height: 1.95; }
.epic-media.is-preview .epic-media-layout { grid-template-columns: minmax(0, 920px); justify-content: center; }
.epic-media-publication { width: min(460px, calc(100vw - 32px)); }
.epic-media-visibility { display: grid; gap: 16px; border: 0; padding: 0; margin-bottom: 32px; }
.epic-media-visibility legend { margin-bottom: 16px; font-weight: 600; }
.epic-media-visibility label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.epic-media-visibility input { accent-color: #3488e5; }
@media (max-width: 1100px) { .epic-media-layout { grid-template-columns: minmax(0, 1fr); } .epic-media-editing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .epic-media-heading { margin: 20px 0; gap: 18px; } .epic-media-heading h1 { font-size: 26px; } .epic-media-actions { width: 100%; } .epic-media-actions button { flex: 1; padding-inline: 12px; } .epic-media-layout { gap: 20px; } .epic-media-editing { grid-template-columns: minmax(0, 1fr); } .epic-media-panel { padding: 20px; } .epic-media-stage { border-radius: 14px; } .epic-media-filebar { gap: 10px; } }
.epic-media-stage--audio { min-height: 240px; aspect-ratio: auto; align-content: center; gap: 24px; padding: 32px 20px; }
.epic-media-audio-mark .epic-icon { width: 48px; height: 48px; color: var(--epic-blue); }
.epic-media-stage--audio audio { min-width: 0; width: min(100%, 640px); }

.epic-media-trim { margin-bottom: 28px; gap: 16px; }
.epic-media-timeline { position: relative; height: 76px; margin: 10px 24px 0; touch-action: none; user-select: none; cursor: crosshair; --trim-start: 0%; --trim-end: 100%; --trim-position: 0%; }
.epic-media-timeline-track { position: absolute; inset: 8px 0; border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), #c5d2df 10%), #dce4ed; }
.epic-media-timeline-selection { position: absolute; top: 8px; bottom: 8px; left: var(--trim-start); right: calc(100% - var(--trim-end)); border-block: 3px solid #3989e6; background: #8abcf199; pointer-events: none; }
.epic-media-trim-handle { position: absolute; top: 2px; width: 24px; height: 72px; padding: 0; border: 0; background: #3989e6; color: white; display: grid; place-items: center; cursor: ew-resize; touch-action: none; z-index: 3; }
.epic-media-trim-handle span { width: 3px; height: 24px; border-radius: 2px; background: currentColor; }
.epic-media-trim-handle--start { left: var(--trim-start); transform: translateX(-100%); border-radius: 7px 0 0 7px; }
.epic-media-trim-handle--end { left: var(--trim-end); border-radius: 0 7px 7px 0; }
.epic-media-playhead { position: absolute; left: var(--trim-position); top: -10px; bottom: -2px; width: 20px; padding: 0; border: 0; transform: translateX(-50%); background: transparent; cursor: ew-resize; touch-action: none; z-index: 2; }
.epic-media-playhead::before { content: ""; position: absolute; top: 0; left: 5px; border-inline: 5px solid transparent; border-top: 9px solid #172b49; }
.epic-media-playhead::after { content: ""; position: absolute; top: 7px; bottom: 0; left: 9px; width: 2px; background: #172b49; }

.epic-media-result video { width: 100%; max-height: 65dvh; background: #101621; border-radius: 14px; }
.epic-media-result audio { width: 100%; }
.epic-media-description { white-space: pre-wrap; line-height: 1.9; margin-top: 24px; overflow-wrap: anywhere; }

.epic-media-player { overflow: hidden; border: 1px solid #d5e0eb; border-radius: 16px; background: #f8fbff; color: var(--epic-ink, #172b49); }
.epic-media-player video { display: block; width: 100%; height: auto; max-height: 62dvh; aspect-ratio: 16 / 9; object-fit: contain; background: #101621; border-radius: 0; cursor: pointer; }
.epic-media-player audio { display: none; }
.epic-media-player-controls { padding: 18px 22px; }
.epic-media-player-seek { display: grid; gap: 0; }
.epic-media-player input[type="range"] { display: block; appearance: none; height: 44px; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; box-shadow: none; touch-action: none; --player-progress: 100%; }
.epic-media-player input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 8px; background: linear-gradient(to right, #3488e5 var(--player-progress), #dbe5f0 var(--player-progress)); }
.epic-media-player input[type="range"]::-moz-range-track { height: 6px; border-radius: 8px; background: linear-gradient(to right, #3488e5 var(--player-progress), #dbe5f0 var(--player-progress)); }
.epic-media-player input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 2px solid #fff; border-radius: 50%; background: #3488e5; box-shadow: 0 1px 5px #244b7633; transition: transform 120ms ease; }
.epic-media-player input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: #3488e5; transition: transform 120ms ease; }
.epic-media-player input[type="range"]:is(:active, .is-scrubbing)::-webkit-slider-thumb { transform: scale(1.4); }
.epic-media-player input[type="range"]:is(:active, .is-scrubbing)::-moz-range-thumb { transform: scale(1.4); }
@media (hover: hover) and (pointer: fine) {
  .epic-media-player input[type="range"]:enabled:hover::-webkit-slider-thumb { transform: scale(1.4); }
  .epic-media-player input[type="range"]:enabled:hover::-moz-range-thumb { transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .epic-media-player input[type="range"]::-webkit-slider-thumb { transition: none; }
  .epic-media-player input[type="range"]::-moz-range-thumb { transition: none; }
}
.epic-media-player-time { display: flex; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--epic-muted, #65758a); }
.epic-media-player-toolbar, .epic-media-player-transport, .epic-media-player-options, .epic-media-player-volume { display: flex; align-items: center; gap: 8px; }
.epic-media-player-toolbar { justify-content: space-between; gap: 16px; margin-top: 10px; }
.epic-media-player-button { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--epic-ink, #172b49); cursor: pointer; }
.epic-media-player-button:hover { background: #e5effa; }
.epic-media-player-button .epic-icon { display: block; width: 21px; height: 21px; }
.epic-media-player-toggle { width: 48px; height: 48px; border: 1px solid #c9def6; border-radius: 50%; background: #e9f3ff; color: #2676cb; }
.epic-media-player-toggle .epic-icon { width: 24px; height: 24px; }
.epic-media-player-toggle [data-epic-player-target="playIcon"] .epic-icon { fill: currentColor; stroke: none; }
.epic-media-player-skip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 8px; font-weight: 650; line-height: 1; }
.epic-media-player-volume { gap: 2px; }
.epic-media-player-volume input[type="range"] { width: 72px; }
.epic-media-player-speed { height: 44px; width: 68px; min-width: 0; padding: 0 20px 0 8px; border: 1px solid #d5e0eb; border-radius: 8px; background-color: transparent; font-size: 12px; cursor: pointer; }
.epic-media-player :is(button, input, select):focus, .epic-media-player :is(button, input, select):focus-visible { outline: none; box-shadow: none; border-color: #d5e0eb; }
.epic-media-player-toggle:focus, .epic-media-player-toggle:focus-visible { border-color: #c9def6; }
.epic-media-player [hidden] { display: none !important; }
.epic-media-player :disabled { opacity: .45; cursor: default; }
.epic-media-player-status { font-size: 12px; margin: 12px 0 0; color: var(--epic-muted, #65758a); }
.epic-media-player-audio-mark { display: grid; place-items: center; padding: 26px 0 0; color: #3488e5; }
.epic-media-player-audio-mark .epic-icon { width: 30px; height: 30px; }
.epic-media-player:fullscreen { display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; background: #101621; }
.epic-media-player:fullscreen video { flex: 1; min-height: 0; max-height: none; }
.epic-media-player:fullscreen .epic-media-player-controls { flex-shrink: 0; background: #f8fbff; }
@media (max-width: 600px) {
  .epic-media-player-controls { padding: 14px; }
  .epic-media-player-toolbar { display: grid; justify-content: stretch; gap: 8px; }
  .epic-media-player-options, .epic-media-player-transport { justify-content: center; }
  .epic-media-player-options { gap: 4px; }
  .epic-media-player-volume { flex: 1; min-width: 90px; }
  .epic-media-player-speed { flex-shrink: 0; }
  .epic-media-player-volume input[type="range"] { width: 100%; min-width: 44px; }
}

.epic-media-player--video { container-type: inline-size; }
.epic-media-player--video .epic-media-player-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.epic-media-player--video .epic-media-player-transport { grid-column: 2; }
.epic-media-player--video .epic-media-player-options { grid-column: 3; justify-self: end; }
@container (max-width: 760px) {
  .epic-media-player--video .epic-media-player-toolbar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .epic-media-player--video .epic-media-player-transport { grid-column: auto; justify-content: center; }
  .epic-media-player--video .epic-media-player-options { grid-column: auto; justify-self: stretch; justify-content: center; gap: 4px; }
  .epic-media-player--video .epic-media-player-volume { flex: 1; min-width: 90px; }
  .epic-media-player--video .epic-media-player-volume input[type="range"] { width: 100%; min-width: 44px; }
  .epic-media-player--video .epic-media-player-speed { flex-shrink: 0; }
}

.epic-media > .epic-media-visibility { margin-top: 28px; }
.epic-media > .epic-media-visibility label { min-height: 44px; margin: 0; }

.epic-media-player--editor .epic-media-trim { margin: 0 0 12px; }
.epic-media-player--editor .epic-media-timeline { height: 48px; margin: 8px 22px 0; }
.epic-media-player--editor .epic-media-timeline-track,
.epic-media-player--editor .epic-media-timeline-selection { top: 12px; bottom: 12px; }
.epic-media-player--editor .epic-media-playhead { top: 0; bottom: 0; width: 44px; }
.epic-media-player--editor .epic-media-playhead::before { left: 17px; }
.epic-media-player--editor .epic-media-playhead::after { left: 21px; }
.epic-media-trim-times { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; }
.epic-media-timecode { min-width: 0; width: 100%; max-width: 100px; height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--epic-muted); font-size: 11px; font-variant-numeric: tabular-nums; cursor: text; border-radius: 0; }
.epic-media-timecode:last-child { justify-self: end; text-align: right; }
.epic-media-trim-times .epic-media-player-time { margin: 0; white-space: nowrap; font-size: 11px; }
.epic-media-trim-actions { display: flex; justify-content: end; }
.epic-media-trim-actions button { min-height: 44px; }
.epic-media [hidden] { display: none !important; }
.epic-media-player--editor .epic-media-trim-handle { top: 0; width: 44px; height: 48px; transform: translateX(-50%); background: transparent; border-radius: 0; }
.epic-media-player--editor .epic-media-trim-handle::before { content: ""; position: absolute; inset: 4px 15px; border-radius: 4px; background: #3989e6; }
.epic-media-player--editor .epic-media-trim-handle span { position: relative; height: 18px; }
.epic-media .epic-media-timecode[type="text"] { font-size: 11px; padding: 0 2px; background: transparent; border: 0; box-shadow: none; }