/* ====================================
   Cut — the archive player
   One flat card (readout, disc, three keys) that plays a mix from the
   original episode streams, beside the current sleeve and the queue.
   Device tokens live on .cut-page; everything else uses the site variables.
   Sizes inside the device are container units (cqw) so it scales as one piece.
======================================= */

.cut-page {
    --cut-body: #d9d9d7;
    --cut-body-2: #c8c8c6;
    --cut-edge: #8e8e8c;
    --cut-key: #ececea;
    --cut-key-edge: #a6a6a4;
    --cut-black: #232325;
    --cut-black-2: #3a3a3d;
    --cut-white: #f5f5f3;
    --cut-ink: #2a2a2a;
    --cut-ink-2: #6f6f6d;
    --cut-orange: #ff5a1f;
    --cut-green: #30b45f;
    --cut-led: #ff7a2a;
    --cut-screen: #131314;
    --cut-label-color: #6b6b6b;
    --cut-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cut-brush: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27b%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.012%200.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.62%20%200%200%200%200%200.62%20%200%200%200%200%200.62%20%200%200%200%200.16%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23b%29%27/%3E%3C/svg%3E");
    padding-top: var(--space-lg);
}

:root[data-theme="dark"] .cut-page {
    --cut-body: #2d2d2f;
    --cut-body-2: #232325;
    --cut-edge: #0b0b0c;
    --cut-key: #3d3d40;
    --cut-key-edge: #111112;
    --cut-black: #151516;
    --cut-black-2: #2b2b2e;
    --cut-white: #e9e9e7;
    --cut-ink: #e8e8e6;
    --cut-ink-2: #9b9b99;
    --cut-screen: #0d0d0e;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cut-page {
        --cut-body: #2d2d2f;
        --cut-body-2: #232325;
        --cut-edge: #0b0b0c;
        --cut-key: #3d3d40;
        --cut-key-edge: #111112;
        --cut-black: #151516;
        --cut-black-2: #2b2b2e;
        --cut-white: #e9e9e7;
        --cut-ink: #e8e8e6;
        --cut-ink-2: #9b9b99;
        --cut-screen: #0d0d0e;
    }
}

/* :where() keeps this reset below any single class, so .cut-qrow and friends can set their own padding and border */
.cut-page :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.cut-eyebrow {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-tertiary, var(--color-text-secondary));
}

.cut-status {
    margin: 0 0 var(--space-md);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* Stage: the device beside the Now Playing card and the queue */
.cut-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(300px, 1fr);
    gap: 44px;
    align-items: start;
}

.cut-stage::before {
    content: "";
    position: absolute;
    left: -8%;
    top: -6%;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--cut-label-color) 22%, transparent), transparent 68%);
    filter: blur(28px);
    pointer-events: none;
    z-index: 0;
    transition: background 900ms ease;
}

/* ---------- The device ---------- */
.cut-device {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 4 / 5;
    container-type: inline-size;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
    perspective: 2400px;
}

.cut-flip {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 680ms var(--cut-ease-out);
}

.cut-device.is-flipped .cut-flip { transform: rotateY(180deg); }

.cut-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cut-face-front { transform: translateZ(0.5px); }
.cut-face-back { transform: rotateY(180deg) translateZ(0.5px); }
/* only the face you see takes clicks */
.cut-device.is-flipped .cut-face-front,
.cut-device:not(.is-flipped) .cut-face-back { pointer-events: none; }

.cut-body {
    position: absolute;
    inset: 0;
    border-radius: 5cqw;
    background: linear-gradient(180deg, var(--cut-body), var(--cut-body-2));
    box-shadow: 0 0 0 1px var(--cut-edge), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3cqw 5cqw -2.4cqw rgba(0, 0, 0, 0.38), 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.1);
}

.cut-body > * { position: absolute; z-index: 1; }

.cut-te-label {
    font-size: 2.2cqw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cut-ink-2);
    white-space: nowrap;
    line-height: 1;
}

/* Readout row: prev · LED · next, inside one glass */
.cut-top { left: 5cqw; right: 5cqw; top: 5cqw; height: 13cqw; }

.cut-readout {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1.6cqw;
    overflow: hidden;
    background: radial-gradient(130% 160% at 50% 130%, #1e1e21, var(--cut-screen) 62%);
    box-shadow: inset 0 0.35cqw 0.9cqw rgba(0, 0, 0, 0.85), inset 0 0 0 0.28cqw #050506, 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 0 1px #0a0a0b;
    display: grid;
    grid-template-columns: 9.5cqw auto minmax(0, 1fr) auto 9.5cqw;
    align-items: center;
    gap: 2cqw;
}

.cut-readout::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
    pointer-events: none;
}

.cut-readout::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 28%, transparent 46%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%);
    pointer-events: none;
}

.cut-tkey {
    position: relative;
    z-index: 1;
    width: 9.5cqw;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--cut-led);
    opacity: 0.92;
    background: rgba(255, 122, 42, 0.05);
    transition: opacity 150ms ease, background 150ms ease;
}

.cut-tkey::after {
    content: "";
    position: absolute;
    top: 2.6cqw;
    bottom: 2.6cqw;
    width: 1px;
    background: rgba(255, 255, 255, 0.09);
}

.cut-tkey-prev::after { right: 0; }
.cut-tkey-next::after { left: 0; }

.cut-tkey svg {
    width: 3.8cqw;
    height: 3.8cqw;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 0.6cqw rgba(255, 122, 42, 0.75));
    transition: transform 120ms ease;
}

.cut-tkey:hover { opacity: 1; background: rgba(255, 122, 42, 0.14); }
.cut-tkey:active svg { transform: scale(0.86); }
.cut-tkey:disabled { opacity: 0.12; pointer-events: none; }
.cut-tkey:focus-visible { outline: 2px solid var(--cut-orange); outline-offset: -3px; }

.cut-tseg { display: flex; gap: 0.8cqw; transform: skewX(-6deg); margin-left: 0.4cqw; }
.cut-digit { width: 4cqw; height: 6.2cqw; display: block; }
.cut-digit path { fill: var(--cut-led); opacity: 0.08; }
.cut-digit path.is-lit { opacity: 1; filter: drop-shadow(0 0 0.6cqw rgba(255, 122, 42, 0.8)); }

.cut-tinfo { min-width: 0; overflow: hidden; display: grid; gap: 0.9cqw; }
.cut-tinfo.is-swapping { animation: cut-tswap 240ms ease-out; }
@keyframes cut-tswap { from { opacity: 0.15; transform: translateY(0.6cqw); } to { opacity: 1; transform: none; } }

.cut-tname {
    min-width: 0;
    font-size: 2.7cqw;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #f2f2f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.cut-tmeta {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 1.9cqw;
    letter-spacing: 0.08em;
    color: #8d8d8b;
    white-space: nowrap;
}

.cut-tind {
    display: flex;
    gap: 1.5cqw;
    margin-right: 0.6cqw;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 1.55cqw;
    letter-spacing: 0.12em;
    color: var(--cut-led);
    line-height: 1;
}

.cut-tind span { opacity: 0.13; transition: opacity 200ms ease; }
.cut-tind span.is-on { opacity: 1; text-shadow: 0 0 0.6cqw rgba(255, 122, 42, 0.8); }

/* the settings cog: a bare icon, orange on hover */
.cut-cog {
    right: 10.8cqw;
    top: 90.6cqw;
    width: 7.4cqw;
    height: 7.4cqw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--cut-ink-2);
    transition: color 150ms ease;
}

.cut-cog svg {
    width: 4.6cqw;
    height: 4.6cqw;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 120ms ease;
}

.cut-cog:hover { color: var(--cut-orange); }
.cut-cog:active svg { transform: scale(0.92); }
.cut-cog:focus-visible { outline: 2px solid var(--cut-orange); outline-offset: 2px; }
.cut-body > .cut-cog-close { top: 5.4cqw; right: 5.2cqw; }

/* the disc */
.cut-platter {
    position: absolute;
    left: 15cqw;
    top: 25cqw;
    width: 70cqw;
    height: 70cqw;
    border-radius: 50%;
}

.cut-platter::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 300ms ease;
}

.cut-device.is-empty .cut-platter::before { opacity: 1; }

.cut-vinyl-wrap { position: absolute; inset: 0; border-radius: 50%; }

.cut-vinyl {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    cursor: pointer;
    will-change: transform;
    background: repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px), radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--cut-body-2) 92%, white), var(--cut-body-2) 70%, color-mix(in srgb, var(--cut-body-2) 86%, black));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22), inset 0 0.3cqw 0.9cqw rgba(255, 255, 255, 0.35), inset 0 -0.4cqw 1cqw rgba(0, 0, 0, 0.12), 0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.12);
}

.cut-vinyl::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.28) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(45deg, transparent calc(50% - 0.5px + 9cqw), rgba(0, 0, 0, 0.14) calc(50% - 0.5px + 9cqw) calc(50% + 0.5px + 9cqw), transparent calc(50% + 0.5px + 9cqw));
    -webkit-mask: radial-gradient(circle, transparent 0 11cqw, #000 11.2cqw 95%, transparent 96%);
    mask: radial-gradient(circle, transparent 0 11cqw, #000 11.2cqw 95%, transparent 96%);
}

.cut-d-show,
.cut-d-date {
    position: absolute;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 1.9cqw;
    letter-spacing: 0.08em;
    color: var(--cut-ink-2);
    white-space: nowrap;
}

.cut-d-show { left: 17%; top: 23%; max-width: 30cqw; overflow: hidden; text-overflow: ellipsis; }
.cut-d-date { right: 17%; bottom: 23%; }

.cut-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20cqw;
    height: 20cqw;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--cut-label-color) 82%, white), var(--cut-label-color) 65%, color-mix(in srgb, var(--cut-label-color) 80%, black));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0.4cqw 0.9cqw rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cut-hub i {
    position: absolute;
    width: 1.3cqw;
    height: 1.3cqw;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.35);
}

.cut-hub i:nth-child(1) { left: 34%; top: 30%; }
.cut-hub i:nth-child(2) { left: 62%; top: 42%; }
.cut-hub i:nth-child(3) { left: 40%; top: 66%; }

/* a record change: the next disc fades in over the old one while both keep turning */
.cut-vinyl.is-incoming { animation: cut-dropin 460ms ease-out both; }
.cut-vinyl.is-outgoing { animation: cut-fadeout 460ms ease-in-out both; pointer-events: none; }
@keyframes cut-dropin { from { opacity: 0; scale: 1.012; } to { opacity: 1; scale: 1; } }
@keyframes cut-fadeout { from { opacity: 1; } to { opacity: 0; } }

/* transport: three big keys along the bottom, brushed */
.cut-transport {
    left: 5cqw;
    right: 5cqw;
    bottom: 5cqw;
    height: 16cqw;
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 1.2cqw;
}

.cut-bigkey {
    position: relative;
    border-radius: 1.8cqw;
    background: var(--cut-brush), radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 60%), linear-gradient(180deg, var(--cut-key), color-mix(in srgb, var(--cut-key) 90%, black));
    color: var(--cut-ink);
    display: grid;
    place-items: center;
    box-shadow: 0 0.5cqw 0 var(--cut-key-edge), 0 0.6cqw 0 rgba(0, 0, 0, 0.18), 0 1cqw 1.6cqw rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 -0.3cqw 0.4cqw rgba(0, 0, 0, 0.06);
    transition: transform 90ms ease, box-shadow 90ms ease;
}

.cut-bigkey svg { width: 5cqw; height: 5cqw; fill: currentColor; filter: drop-shadow(0 0.12cqw 0 rgba(255, 255, 255, 0.35)); }

.cut-bigkey:hover {
    background: var(--cut-brush), radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--cut-key) 96%, white), color-mix(in srgb, var(--cut-key) 94%, black));
}

.cut-bigkey:focus-visible { outline: 2px solid var(--cut-orange); outline-offset: 2px; }

.cut-bigkey:active {
    transform: translateY(0.45cqw);
    box-shadow: 0 0.05cqw 0 var(--cut-key-edge), 0 0.2cqw 0.5cqw rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0.4cqw 0.6cqw rgba(0, 0, 0, 0.08);
}

.cut-bigkey:disabled { opacity: 0.45; pointer-events: none; }

.cut-dot {
    position: absolute;
    left: 2.6cqw;
    top: 2.6cqw;
    width: 2cqw;
    height: 2cqw;
    border-radius: 50%;
    background: var(--cut-orange);
    box-shadow: inset 0 -0.2cqw 0 rgba(0, 0, 0, 0.2);
    transition: background 220ms ease;
}

.cut-device.is-playing .cut-dot { background: var(--cut-green); }
.cut-device.is-busy .cut-dot { animation: cut-blink 420ms steps(2, end) infinite; }
@keyframes cut-blink { to { opacity: 0.25; } }
.cut-device.is-empty .cut-bigkey-play { opacity: 0.55; }

/* the back: a label plate with the two faders, vents, fine print */
.cut-screw {
    width: 1.5cqw;
    height: 1.5cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #f2f2f0, #9a9a98);
    box-shadow: inset 0 0 0 0.12cqw rgba(0, 0, 0, 0.35);
}

.cut-screw::before,
.cut-screw::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%) rotate(35deg);
}

.cut-screw::before { width: 0.9cqw; height: 0.16cqw; }
.cut-screw::after { width: 0.16cqw; height: 0.9cqw; }
.cut-screw-tl { left: 2.3cqw; top: 2.3cqw; }
.cut-screw-tr { right: 2.3cqw; top: 2.3cqw; }
.cut-screw-bl { left: 2.3cqw; bottom: 2.3cqw; }
.cut-screw-br { right: 2.3cqw; bottom: 2.3cqw; }

.cut-plate {
    left: 7cqw;
    right: 7cqw;
    top: 24cqw;
    padding: 4cqw 5cqw 5cqw;
    border-radius: 2cqw;
    background: color-mix(in srgb, var(--cut-body) 70%, white);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: grid;
    gap: 4.2cqw;
}

.cut-plate-head { display: flex; justify-content: space-between; align-items: baseline; }
.cut-plate-head b { font-size: 2.6cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cut-ink); }
.cut-setting { display: grid; gap: 1.8cqw; }
.cut-setting .cut-te-label { color: var(--cut-ink); font-size: 2.1cqw; }
.cut-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) 7cqw; gap: 3cqw; align-items: center; }

.cut-setting-val {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 2.2cqw;
    color: var(--cut-ink-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cut-fader {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1cqw;
    margin: 2cqw 0;
    border-radius: 0.5cqw;
    background: var(--cut-black);
    box-shadow: inset 0 0 0.3cqw rgba(0, 0, 0, 0.9);
    outline: none;
    cursor: pointer;
}

.cut-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 6.4cqw;
    height: 3.4cqw;
    border-radius: 0.7cqw;
    border: 0;
    background: var(--cut-white) linear-gradient(var(--cut-orange), var(--cut-orange)) center / 55% 0.3cqw no-repeat;
    box-shadow: 0 0.35cqw 0 var(--cut-key-edge), 0 0.6cqw 0.9cqw rgba(0, 0, 0, 0.25);
}

.cut-fader::-moz-range-thumb {
    width: 6.4cqw;
    height: 3.4cqw;
    border-radius: 0.7cqw;
    border: 0;
    background: var(--cut-white) linear-gradient(var(--cut-orange), var(--cut-orange)) center / 55% 0.3cqw no-repeat;
    box-shadow: 0 0.35cqw 0 var(--cut-key-edge), 0 0.6cqw 0.9cqw rgba(0, 0, 0, 0.25);
}

.cut-fader:focus-visible { outline: 2px solid var(--cut-orange); outline-offset: 4px; }

.cut-vents {
    left: 7cqw;
    right: 7cqw;
    bottom: 22cqw;
    height: 11cqw;
    border-radius: 0.6cqw;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0 0.5cqw, transparent 0.5cqw 2.2cqw);
}

.cut-fineprint {
    left: 7cqw;
    right: 7cqw;
    bottom: 7cqw;
    display: flex;
    justify-content: space-between;
    font-size: 1.9cqw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cut-ink-2);
}

/* ---------- Now playing + queue ---------- */
.cut-now { display: grid; gap: 30px; min-width: 0; align-content: start; }

.cut-nowcard {
    display: grid;
    grid-template-columns: 198px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    min-width: 0;
}

.cut-nowcard.is-nosignal { grid-template-columns: 1fr; }
.cut-nowcard.is-nosignal .cut-sleeve { display: none; }

/* square jacket; the record hides inside when paused, peeks on hover, slides out while playing */
.cut-sleeve { position: relative; width: 198px; height: 176px; cursor: pointer; }

.cut-disc {
    position: absolute;
    left: 26px;
    top: 5px;
    width: calc(100% - 32px);
    height: calc(100% - 10px);
    border-radius: 50%;
    z-index: 0;
    transform: translateX(-16px);
    transition: transform 560ms var(--cut-ease-out);
    background: repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px), radial-gradient(circle, var(--cut-label-color) 0 21%, #0b0b0c 21.3% 22.3%, #161618 22.8% 98%, #0a0a0b 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.cut-disc::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-background);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cut-sleeve:hover .cut-disc,
.cut-sleeve:focus-visible .cut-disc { transform: translateX(-6px); }
.cut-now.is-playing .cut-disc { transform: translateX(7%) rotate(18deg); }
.cut-now.is-playing .cut-sleeve:hover .cut-disc,
.cut-now.is-playing .cut-sleeve:focus-visible .cut-disc { transform: translateX(9%) rotate(20deg); }

.cut-jacket {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 22px);
    height: 100%;
    aspect-ratio: 1;
    border-radius: 2px;
    z-index: 1;
    overflow: hidden;
    background: var(--color-surface-alt);
    transition: opacity 240ms ease, transform 240ms ease, box-shadow 240ms ease;
    box-shadow: 0 24px 34px -16px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.18), 2px 0 0 rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.cut-jacket-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 320ms ease;
}

.cut-jacket-art.is-on { opacity: 1; }

.cut-jacket::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06) 7%, transparent 12%), linear-gradient(118deg, rgba(255, 255, 255, 0.2) 0 26%, transparent 27%);
    pointer-events: none;
}

.cut-sleeve:hover .cut-jacket {
    transform: translateY(-2px);
    box-shadow: 0 28px 38px -16px rgba(0, 0, 0, 0.6), 0 6px 10px rgba(0, 0, 0, 0.2), 2px 0 0 rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.cut-sleeve:active .cut-jacket { transform: translateY(0); }
.cut-sleeve:focus-visible { outline: 2px solid var(--color-accent, currentColor); outline-offset: 4px; border-radius: 2px; }

.cut-nowtext { min-width: 0; }
.cut-state { display: flex; align-items: center; gap: 8px; }

.cut-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.cut-eq i {
    display: block;
    width: 2.5px;
    border-radius: 1px;
    background: var(--color-text-secondary);
    transform-origin: bottom;
    animation: cut-eq 1s ease-in-out infinite;
}
.cut-eq i:nth-child(1) { height: 6px; }
.cut-eq i:nth-child(2) { height: 10px; animation-delay: 0.25s; }
.cut-eq i:nth-child(3) { height: 7px; animation-delay: 0.5s; }
.cut-state:not(.is-live) .cut-eq i { animation-play-state: paused; height: 4px; opacity: 0.5; }
@keyframes cut-eq { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }

.cut-title {
    margin: 8px 0 0;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.cut-artist { font-size: 1.05rem; color: var(--color-text-secondary); margin-top: 4px; }
.cut-from { font-size: 0.8rem; color: var(--color-text-tertiary, var(--color-text-secondary)); margin-top: 10px; }
.cut-release { font-size: 0.8rem; color: var(--color-text-tertiary, var(--color-text-secondary)); margin-top: 2px; }
.cut-release b { font-weight: 500; color: var(--color-text-secondary); }

/* position in the track: a hairline you can click or drag; arrows step 5 s */
.cut-progress {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    max-width: 420px;
    padding: 6px 0;
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.cut-time {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.7rem;
    color: var(--color-text-tertiary, var(--color-text-secondary));
    font-variant-numeric: tabular-nums;
    min-width: 4.2ch;
}

.cut-time-remain { text-align: right; }

.cut-bar {
    position: relative;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-text-secondary) 22%, transparent);
    transition: height 150ms ease;
}

.cut-bar-fill {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(0);
    background: var(--color-text-secondary);
}

.cut-progress.is-live .cut-bar-fill { background: var(--cut-orange); }
.cut-progress:hover .cut-bar,
.cut-progress:focus-visible .cut-bar { height: 5px; }
.cut-progress:focus-visible .cut-bar { box-shadow: 0 0 0 2px var(--cut-orange); }
.cut-progress:not(.is-live) { cursor: default; }

.cut-queue-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cut-queue-count { font-size: 0.72rem; color: var(--color-text-tertiary, var(--color-text-secondary)); font-variant-numeric: tabular-nums; }
.cut-queue { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cut-qrow { min-width: 0; }
.cut-qrow.is-past { display: none; }

.cut-qbtn {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 7px 10px;
    border-radius: 10px;
    text-align: left;
    width: 100%;
    min-width: 0;
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.cut-qbtn:hover { background: var(--color-surface-alt); }
.cut-qbtn:focus-visible { outline: 2px solid var(--cut-orange); outline-offset: -2px; }
.cut-qrow.is-first .cut-qbtn { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04)); }
.cut-qrow.is-first .cut-qbtn:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08)); }

.cut-qart {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-surface-alt);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.cut-qart img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cut-qtext { display: grid; min-width: 0; }
.cut-qtitle { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cut-qartist { color: var(--color-text-secondary); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cut-qtag {
    display: none;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary, var(--color-text-secondary));
}

.cut-qrow.is-dead .cut-qbtn { opacity: 0.45; cursor: default; }
.cut-qrow.is-dead .cut-qbtn:hover { background: none; }
.cut-qrow.is-dead .cut-qtag { display: block; }
.cut-qrow.is-dead .cut-qart { filter: grayscale(1); }
.cut-qend { font-size: 0.8rem; color: var(--color-text-tertiary, var(--color-text-secondary)); padding: 8px 10px; }
.cut-qnote { margin: 10px 10px 0; font-size: 0.75rem; color: var(--color-text-tertiary, var(--color-text-secondary)); }

@media (max-width: 1180px) {
    .cut-stage { grid-template-columns: 1fr; }
}

/* phones: the sleeve sits beside the text so the title is on the first screen */
@media (max-width: 760px) {
    .cut-stage { gap: 24px; }
    .cut-now { gap: 22px; }
    .cut-nowcard { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
    .cut-sleeve { width: 112px; height: 100px; }
    .cut-disc { left: 14px; top: 3px; width: calc(100% - 18px); height: calc(100% - 6px); }
    .cut-jacket { width: calc(100% - 12px); }
    .cut-title { font-size: 1.2rem; margin-top: 4px; }
    .cut-artist { font-size: 0.95rem; }
    .cut-from { margin-top: 6px; }
    .cut-progress { margin-top: 8px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cut-flip, .cut-disc, .cut-jacket, .cut-jacket-art, .cut-bigkey, .cut-bar { transition: none; }
    .cut-vinyl.is-incoming, .cut-vinyl.is-outgoing, .cut-tinfo.is-swapping, .cut-device.is-busy .cut-dot, .cut-eq i { animation: none; }
}