.event-preview {
    min-width: 0;
    border: 1px solid var(--line);
    background: #151614;
}

.event-preview-header,
.event-preview-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 12px 14px;
}

.event-preview-header { border-bottom: 1px solid var(--line); }
.event-preview-footer { border-top: 1px solid var(--line); }
.event-preview-header h2 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: normal; }
.event-preview :is(fieldset, legend) { min-width: 0; margin: 0; padding: 0; border: 0; }
.event-preview :is(.screen-reader-text, input) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.event-preview-options,
.event-preview-layers,
.event-preview-views { display: flex; flex-wrap: wrap; gap: 4px; }
.event-preview label { position: relative; }
.event-preview label span {
    display: inline-flex;
    align-items: center;
    min-height: 39px;
    padding: 5px 9px;
    border: 1px solid transparent;
    color: var(--quiet);
    font-size: 12px;
    line-height: 1.15;
    cursor: pointer;
}
.event-preview label:hover span { color: var(--paper); }
.event-preview label input:checked + span { border-color: #565850; background: #262823; color: var(--paper); }
.event-preview label input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.event-preview-layers i {
    display: inline-grid;
    place-items: center;
    width: 11px;
    height: 11px;
    margin-inline-end: 6px;
    border: 1px solid #777a70;
    color: transparent;
    font: 800 9px/1 system-ui, sans-serif;
}
.event-preview-layers input:checked + span i { color: #141311; background: var(--accent); border-color: var(--accent); }
.event-preview-footer .button { min-height: 39px; gap: 10px; }

.event-preview-scene {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1.72;
    min-height: 205px;
    background: radial-gradient(ellipse at 50% 28%, #272a24 0%, #151614 47%, #10110f 76%);
}
.event-preview-scene canvas,
.event-preview-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.event-preview-scene canvas,
.event-preview-scene.has-webgl .event-preview-fallback { visibility: hidden; }
.event-preview-scene.has-webgl canvas { visibility: visible; }
.event-preview .event-preview-views {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    padding: 2px;
    border: 1px solid #43453e;
    background: #151614f5;
    white-space: nowrap;
}
.event-preview-views label span { min-height: 31px; padding: 4px 8px; font-size: 11px; }
.event-preview-motion {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #565850;
    background: #151614f5;
    color: var(--paper);
    font: 600 14px/1 system-ui, sans-serif;
}
.event-preview-motion:hover { border-color: var(--accent); }
.event-preview-scene.has-webgl.has-sound canvas { cursor: crosshair; }
.event-preview-hotspots { position: absolute; inset: 0; pointer-events: none; }
.event-preview-hotspots button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #f4f3efaa;
    border-radius: 50%;
    background: #171815eb;
    color: var(--paper);
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.event-preview-hotspots button span { font: 600 20px/1 system-ui, sans-serif; }
.event-preview-hotspots button:hover, .event-preview-hotspots button[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #141311;
}
.event-preview-hotspots button[aria-pressed="true"] span { transform: rotate(45deg); }
[data-preview-hotspot="sound"] { top: 40%; left: 24%; }
[data-preview-hotspot="lighting"] { top: 25%; left: 74%; }
[data-preview-hotspot="stage,led"] { top: 37%; left: 50%; }
[data-view="plan"] [data-preview-hotspot="sound"] { top: 42%; left: 27%; }
[data-view="plan"] [data-preview-hotspot="lighting"] { top: 55%; left: 66%; }
[data-view="plan"] [data-preview-hotspot="stage,led"] { top: 34%; left: 50%; }
.event-preview-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 14px; border-top: 1px solid var(--line); color: #c9cbc1; font-size: 13px; }
.event-preview-notes p { margin: 0; }
.event-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-inline-start: auto; }
.event-preview-pulse { min-height: 36px; padding: 2px 0; border: 0; background: transparent; color: var(--paper); font-size: 12px; font-weight: 700; }
.event-preview-pulse:hover, .event-preview-pulse span { color: var(--accent); }
.event-preview-pulse span { margin-inline-start: 3px; }
.event-cue-open {
    min-height: 36px;
    padding: 4px 9px;
    border: 1px solid #866050;
    background: #30231e;
    color: var(--paper);
    font-size: 12px;
    font-weight: 700;
}
.event-cue-open:hover, .event-cue-open[aria-expanded="true"] { border-color: var(--accent); }
.event-cue-open span { margin-inline-start: 5px; color: var(--accent); }
.event-cue-board {
    --cue-gap: clamp(3px, .5vw, 7px);
    border-top: 1px solid var(--line);
    padding: 12px 14px;
    background: #1a1b18;
}
.event-cue-header, .event-cue-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.event-cue-header { justify-content: space-between; }
.event-cue-header p { flex: 1 1 200px; margin: 0; color: #c9cbc1; font-size: 13px; line-height: 1.4; }
.event-cue-header .button { min-height: 35px; white-space: nowrap; }
.event-cue-board button:disabled { cursor: default; opacity: .5; }
.event-cue-grid {
    display: grid;
    grid-template-columns: minmax(56px, max-content) repeat(8, minmax(0, 1fr));
    gap: var(--cue-gap);
    margin-block: 9px 7px;
}
.event-cue-row {
    display: grid;
    grid-template-columns: 78px repeat(8, minmax(0, 1fr));
    grid-template-columns: subgrid;
    gap: var(--cue-gap);
    grid-column: 1 / -1;
    align-items: center;
}
.event-cue-count { text-align: center; font: 12px/1.4 ui-monospace, monospace; color: #b2b4aa; }
.event-cue-count .is-current { color: var(--paper); background: #34352e; }
.event-cue-label {
    min-height: 29px;
    padding: 2px 5px;
    border: 1px solid #44463d;
    background: #22241f;
    color: var(--paper);
    font-size: 12px;
    font-weight: 650;
    text-align: start;
}
.event-cue-label:enabled:hover { border-color: var(--accent); }
[data-cue-step] {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    min-height: 29px;
    padding: 0;
    border: 1px solid #44463d;
    background: #22241f;
    color: #ffc5b1;
}
[data-cue-step][aria-pressed="true"] { border-color: #af7059; background: #59392e; }
[data-cue-step][aria-pressed="true"]::after { content: ""; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; }
[data-cue-track="lighting"] [data-cue-step][aria-pressed="true"]::after { width: 6px; height: 6px; border-radius: 0; transform: rotate(45deg); }
[data-cue-track="led"] [data-cue-step][aria-pressed="true"]::after { width: 9px; height: 5px; border-radius: 0; }
[data-cue-step]:enabled:hover, [data-cue-step].is-current { border-color: #c1c1b3; }
[data-cue-step].is-current { background: #35362e; }
[data-cue-step][aria-pressed="true"].is-current { border-color: var(--accent); background: var(--accent); color: #1a1612; }
.event-cue-tools button { min-height: 34px; padding: 3px 0; border: 0; background: transparent; color: #dedfd6; font-size: 12px; }
.event-cue-tools button:hover, .event-cue-tools [aria-pressed="true"] { color: #ffc5b1; text-decoration: underline; text-underline-offset: 4px; }
.event-preview-actions button:focus-visible, .event-cue-board button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; z-index: 1; }
.event-preview-fallback i { display: block; position: absolute; }
.preview-cue-ripple { inset: 55% 21% 14%; border: 2px solid #ffc5b1; border-radius: 50%; box-shadow: 0 0 0 5px #ff784e66, 0 0 0 11px #ff784e40; opacity: 0; }
[data-view="plan"] .preview-cue-ripple { inset: 48% 34% 21%; }
.preview-floor {
    inset: 35% 0 0;
    clip-path: polygon(23% 0, 77% 0, 100% 100%, 0 100%);
    background: repeating-linear-gradient(0deg, transparent 0 13px, #f4f3ef15 13px 14px), linear-gradient(#262823, #171915);
}
.preview-audience {
    inset: 59% 12% 7%;
    background: radial-gradient(circle at 50% 50%, #d9dad1a3 0 1px, transparent 2px) 0 0 / 16px 13px;
}
[data-event="corporate"] .preview-audience {
    background: repeating-linear-gradient(0deg, transparent 0 8px, #bfc1b77a 8px 10px, transparent 10px 17px), repeating-linear-gradient(90deg, #141512 0 9px, transparent 9px 20px);
}
[data-event="private"] .preview-audience {
    background: radial-gradient(circle, #bfc1b78c 0 4px, transparent 5px) 0 0 / 23% 39%;
}
.preview-platform { inset: 38% 22% 49%; border: 1px solid #686b60; border-bottom-color: var(--accent); background: #353831; transform: perspective(200px) rotateX(35deg); }
.preview-screen { inset: 22% 33% 54%; border: 1px solid #ff57349c; background: repeating-linear-gradient(0deg, #702c21 0 3px, #40251f 3px 6px); }
.preview-speaker { top: 30%; width: 6%; height: 22%; border: 1px solid #75796c; background: repeating-linear-gradient(0deg, #141512 0 6px, #3a3c34 6px 8px); }
.preview-speaker-left { left: 21%; }
.preview-speaker-right { right: 21%; }
.preview-beam { inset: 14% 15% 35%; background: linear-gradient(#ff9c718a, #ff6e4305); }
.preview-beam-left { clip-path: polygon(20% 0, 57% 100%, 35% 100%); }
.preview-beam-right { clip-path: polygon(80% 0, 65% 100%, 43% 100%); }
[data-view="plan"] .preview-floor { inset: 19% 21% 7%; clip-path: none; border: 1px solid #65685d; }
[data-view="plan"] .preview-audience { inset: 49% 25% 11%; }
[data-view="plan"] .preview-platform { inset: 25% 28% 58%; transform: none; }
[data-view="plan"] .preview-screen { inset: 27% 35% 69%; }
[data-view="plan"] .preview-speaker { top: 35%; height: 8%; }
[data-view="plan"] .preview-speaker-left { left: 24%; }
[data-view="plan"] .preview-speaker-right { right: 24%; }
[data-view="plan"] .preview-beam { inset: 30% 18% 28%; background: linear-gradient(#ff9c716e, #ff6e4308); }
.event-preview-scene:not(.has-sound) .preview-speaker,
.event-preview-scene:not(.has-lighting) .preview-beam,
.event-preview-scene:not(.has-stage) :is(.preview-platform, .preview-screen) { visibility: hidden; }

@media (max-width: 460px) {
    .event-preview-header, .event-preview-footer { padding-inline: 10px; }
    .event-preview :is(.event-preview-options, .event-preview-layers) label span { min-height: 36px; padding-inline: 7px; }
    .event-preview-scene { min-height: 224px; }
    .event-preview .event-preview-views { left: 8px; transform: none; }
    .event-preview .event-preview-views label span { padding-inline: 6px; font-size: 10px; }
    .event-preview-notes, .event-cue-board { padding-inline: 10px; }
    .event-preview-actions { margin-inline-start: 0; }
    .event-cue-grid { grid-template-columns: minmax(44px, max-content) repeat(8, minmax(0, 1fr)); }
    .event-cue-label { font-size: 11px; }
}