.ojm-rack{--ojm-ink:#d9e3e5;--ojm-green:#89ff9e;box-sizing:border-box;color:var(--ojm-ink);background:repeating-linear-gradient(0deg,#242a2d 0,#242a2d 2px,#272e31 3px);font:14px/1.5 system-ui,sans-serif;border:2px solid #111719;border-radius:12px;padding:clamp(12px,3vw,28px);margin:24px 0;max-width:100%;min-width:0;box-shadow:inset 0 1px #687176,0 14px 32px #0005;color-scheme:dark;isolation:isolate;container-type:inline-size}.ojm-rack *{box-sizing:border-box}.ojm-rack button,.ojm-rack input{font:inherit}.ojm-rack button{cursor:pointer;min-height:48px;white-space:normal;overflow-wrap:anywhere;letter-spacing:.07em;font-weight:750;border-radius:5px;line-height:1.2;text-transform:none}.ojm-rack button:disabled{cursor:default;opacity:.5}.ojm-rack :focus-visible{outline:3px solid #68d9ff;outline-offset:4px}.ojm-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid #090d0f}.ojm-eyebrow{font-size:10px;letter-spacing:.2em;color:#9da9ae}.ojm-rack .ojm-title{font:800 clamp(17px,2.5vw,26px)/1.3 system-ui,sans-serif;letter-spacing:.04em;margin:5px 0;color:#f0f3ef}.ojm-model{font:11px monospace;color:#acb5b8}.ojm-controls{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding-top:22px}.ojm-rack .ojm-stop-all{background:linear-gradient(#b83838,#7c1e22);color:#fff;border:1px solid #e27268;padding:14px 24px;box-shadow:0 3px 0 #39090d}.ojm-volume{display:flex;flex-direction:column;gap:6px;font-size:10px;letter-spacing:.08em;color:#adbabc;min-width:0;overflow-wrap:anywhere}.ojm-volume input{width:100%;min-width:0;min-height:32px;accent-color:#83e8b2;cursor:pointer;margin:0}.ojm-controls .ojm-volume{width:180px;max-width:100%}.ojm-exclusive{display:flex;align-items:center;gap:9px;font-size:12px}.ojm-exclusive input{width:20px;height:20px}.ojm-hint{font-size:11px;color:#b4bfc3;margin:16px 0}.ojm-banks{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.ojm-banks button{background:#171d20;border:1px solid #657174;color:#c5d1d5;padding:12px 20px;max-width:100%}.ojm-banks button[aria-pressed=true]{background:#bcebc3;color:#102118;border-color:#c5ffd0;box-shadow:0 0 14px #74ffa12b}.ojm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.ojm-cart{min-width:0;padding:16px;border:1px solid #080b0d;border-radius:7px;background:linear-gradient(110deg,#343c40,#242b2f);box-shadow:inset 0 1px #5c666b,0 4px 9px #0006;position:relative}.ojm-cart:before,.ojm-cart:after{content:'⊖';position:absolute;top:5px;color:#879094;font:12px monospace}.ojm-cart:before{left:7px}.ojm-cart:after{right:7px}.ojm-slot{font:10px monospace;letter-spacing:.15em;text-align:center;color:#a8b2b6;margin:6px 0 14px}.ojm-rack .ojm-label{background:#deddd0;color:#222d32;padding:12px 8px;min-height:66px;margin:0 0 16px;font:700 15px/1.4 system-ui,sans-serif;overflow-wrap:anywhere;box-shadow:inset 0 1px 5px #0004;border-radius:2px;border-left:5px solid #c99a48}.ojm-status{font:10px/1.5 monospace;letter-spacing:.03em;min-height:30px;color:#b7c3c5;overflow-wrap:anywhere}.ojm-status:before{content:'';display:inline-block;width:8px;height:8px;background:#7f9297;border-radius:50%;margin-right:7px}.ojm-cart[data-state=ready] .ojm-status:before{background:#e9c56c;box-shadow:0 0 8px #e9c56c70}.ojm-cart[data-state=playing] .ojm-status:before{background:#83ff9a;box-shadow:0 0 10px #83ff9a}.ojm-cart[data-state=error] .ojm-status{color:#ffb3a9}.ojm-cart[data-state=error] .ojm-status:before{background:#ff6554}.ojm-time{background:#081510;color:#a7ffc2;font:28px/1.4 monospace;padding:10px;text-align:center;border:1px solid #101a17;border-radius:3px;text-shadow:0 0 10px #8dffb850;box-shadow:inset 0 2px 7px #000}.ojm-progress{display:block;width:100%;height:7px;margin:12px 0 18px;accent-color:#8af5ae}.ojm-rack .ojm-start{width:100%;background:linear-gradient(#a9e59d,#61a55c);border:1px solid #c7f6b4;color:#132716;min-height:76px;font-size:22px;box-shadow:inset 0 1px 1px #fff9,0 4px #0c180c;margin-bottom:12px}.ojm-cart[data-state=playing] .ojm-start{opacity:1;background:linear-gradient(#c8ffc0,#85f981);box-shadow:0 0 22px #7aff6e66,inset 0 0 18px #ecffe3}.ojm-rack .ojm-stop{width:100%;background:linear-gradient(#565c60,#363c40);color:#f0d8d5;border:1px solid #7b858a;min-height:44px;margin-bottom:18px}.ojm-summary{padding:16px 0 0;margin:20px 0 0;border-top:1px solid #687176;font:11px/1.5 monospace;color:#b4c9bf;overflow-wrap:anywhere}@container(max-width:850px){.ojm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ojm-model{display:none}}@media(max-width:900px){.ojm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:400px){.ojm-cart{padding:12px 8px}.ojm-grid{gap:8px}.ojm-rack{padding:10px}.ojm-time{font-size:22px}.ojm-rack .ojm-start{font-size:18px}.ojm-label{font-size:13px}}@media(prefers-reduced-motion:reduce){.ojm-rack *{scroll-behavior:auto}}

/* Separate automatic-height rows keep wrapped bank buttons above the cart grid.
   Scope layout rules to the rack so theme navigation styles cannot float it. */
.ojm-rack .ojm-mount {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    align-items: start;
    min-width: 0;
}
.ojm-rack .ojm-banks {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: flex-start;
    gap: 8px;
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    margin: 20px 0;
    padding: 0;
}
.ojm-rack .ojm-banks > button {
    position: static;
    float: none;
    flex: 0 1 auto;
    min-width: 48px;
    max-width: 100%;
    margin: 0;
}
.ojm-rack .ojm-grid {
    position: static;
    float: none;
    min-width: 0;
    width: 100%;
    margin: 0;
}
.ojm-rack .ojm-banks[hidden],
.ojm-rack .ojm-grid[hidden] {
    display: none;
}
.ojm-rack .ojm-empty {
    margin: 0;
    padding: 20px 0;
    color: #b4c9bf;
}
/* Keep touch-device racks at 2x2 even when a phone/tablet is rotated. */
@media (pointer: coarse) {
    .ojm-rack .ojm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Fullscreen is a presentation of the same rack, not a second set of players. */
.ojm-rack .ojm-header {
    position: relative;
    min-width: 0;
    padding-right: 56px;
}
.ojm-rack .ojm-header > div { min-width: 0; }
.ojm-rack .ojm-title { overflow-wrap: anywhere; }
.ojm-rack .ojm-fullscreen-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 10px;
    margin: 0;
    border: 1px solid #657174;
    background: linear-gradient(#303a3e, #20282b);
    color: #b3c4ca;
}
.ojm-fullscreen-toggle svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.ojm-rack.ojm-is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100vh;
    height: var(--ojm-viewport-height, 100vh);
    height: 100dvh;
    max-height: none;
    margin: 0 !important;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: clamp(12px, 3vw, 28px);
    padding-top: max(clamp(12px, 3vw, 28px), env(safe-area-inset-top, 0px));
    padding-right: max(clamp(12px, 3vw, 28px), env(safe-area-inset-right, 0px));
    padding-bottom: max(clamp(12px, 3vw, 28px), env(safe-area-inset-bottom, 0px));
    padding-left: max(clamp(12px, 3vw, 28px), env(safe-area-inset-left, 0px));
}
.ojm-rack.ojm-is-fullscreen .ojm-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 2;
    background: #242b2f;
}
.ojm-rack::backdrop { background: #171d20; }
body.ojm-fullscreen-page > :not(.ojm-is-fullscreen),
body.ojm-fullscreen-page > :not(.ojm-is-fullscreen) * {
    visibility: hidden !important;
    pointer-events: none !important;
}