/* Color3 · 78 RPM Shuffle 1.0.5.
 * Self-contained player document, like Jazz Club 1.0.8.
 * The cabinet fits in CSS. No fixed-pixel scene or JS scale is used.
 */
:root{color-scheme:dark}
html,body{width:100%;height:100%;margin:0;padding:0;background:#080a08;overflow:hidden}
*,*::before,*::after{box-sizing:border-box}
body{font-family:"Exo 2",Arial,sans-serif}
.c378-player{
 --c378-art-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
 position:relative;width:100%;height:100%;min-width:0;min-height:0;margin:0;
 padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
 display:flex;align-items:center;justify-content:center;color:#302113;
 font-family:"Exo 2",Arial,sans-serif;line-height:1.3;text-align:left;background:#080a08;
}
@supports(height:100dvh){.c378-player{--c378-art-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}}
.c378-player [hidden]{display:none!important}
.c378-viewport{
 position:relative;flex:none;min-width:0;width:min(100%,calc(var(--c378-art-height) * .562799043),var(--c378-max,760px));
 aspect-ratio:941/1672;overflow:hidden;background:#060806;border-radius:3%;container-type:inline-size;isolation:isolate;
}
.c378-machine{position:absolute;inset:0;width:100%;height:100%}
.c378-player img{display:block;padding:0;margin:0;border:0;max-width:none;box-shadow:none;user-select:none;-webkit-user-drag:none}
.c378-cabinet,.c378-surface,.c378-arm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Matte face uses the supplied d6 grooves, without its Grateful Dead label.
 * Separate layers keep the surface free of rotating highlights; only the
 * preserved 78 RPM label needs animation to represent these concentric grooves.
 */
.c378-cabinet{z-index:0}.c378-surface{z-index:1}.c378-arm{z-index:3}
.c378-record{
 position:absolute;left:13.39001%;top:17.76316%;width:72.68863%;height:40.90909%;z-index:2;pointer-events:none;
 animation:c378-spin .76923077s linear infinite;animation-play-state:paused;transform-origin:50% 50%;will-change:transform;
}
.c378-player.is-playing .c378-record{animation-play-state:running}
@keyframes c378-spin{to{transform:rotate(360deg)}}
.c378-player button{font-family:inherit;text-transform:none;letter-spacing:normal;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.c378-player .c378-hit{display:block;position:absolute;z-index:5;padding:0;margin:0;border:0;border-radius:50%;background:transparent;box-shadow:none;appearance:none;-webkit-appearance:none;min-height:0;line-height:1}
.c378-disc{left:10.62699%;top:16.98565%;width:78.21467%;height:43.30144%}
.c378-shuffle{left:36.13177%;top:71.77033%;width:27.84272%;height:15.66986%;transition:box-shadow .25s}
.c378-player.is-playing .c378-shuffle{box-shadow:0 0 2.34cqw .53cqw #ed683880,inset 0 0 1.59cqw .32cqw #ff915560}
.c378-player.is-loading .c378-shuffle{animation:c378-glow 1.25s ease-in-out infinite}
@keyframes c378-glow{50%{box-shadow:0 0 3.19cqw .96cqw #ff934e90,inset 0 0 2.55cqw #ffd59070}}
.c378-player .c378-hit:focus-visible{outline:2px solid #ffe2a1;outline-offset:-3px}
.c378-player .c378-hit:active{box-shadow:inset 0 0 2.34cqw #ffcc8070}
.c378-info{left:2.55048%;top:87.91866%;width:10.20191%;height:5.74163%}
.c378-player .c378-full{left:87.03507%;top:87.79904%;width:11.05207%;height:5.98086%;display:grid;place-items:center}
.c378-full span{display:grid;place-items:center;width:51.92308%;height:54%;border-radius:50%;background:radial-gradient(circle at 40% 25%,#302d24,#121411 75%);box-shadow:0 0 .32cqw .32cqw #141714}
.c378-full svg{width:55.55556%;height:55.55556%;fill:none;stroke:#eac990;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c378-player .c378-credit{position:absolute;z-index:5;left:21.78533%;top:90.311%;width:56.74814%;height:1.85407%;display:flex;align-items:center;justify-content:center;background:#151817;color:#bc9665;text-decoration:none;font:1.80659cqw/1.1 Georgia,serif;letter-spacing:.12752cqw;white-space:nowrap}
.c378-credit:focus-visible{outline:2px solid #eac990;outline-offset:2px}
/* Use the full parchment: title gets two lines, year never shares an
 * ellipsized artist string, transport and timeline share the last row.
 * All elements stay inside the existing artwork; no cabinet resizing.
 */
.c378-screen{position:absolute;z-index:6;left:12.11477%;top:62.38%;width:75.77%;height:8.13%;padding:0;color:#302113;display:grid;grid-template-rows:minmax(0,1fr) 3.15cqw 3.35cqw;gap:.16cqw;text-align:center;overflow:hidden}
.c378-heading{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.c378-player .c378-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;max-height:2.12em;width:100%;min-width:0;min-height:0;font:700 3.71945cqw/1.04 Georgia,"Times New Roman",serif;white-space:normal;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:inherit;appearance:none;-webkit-appearance:none;text-align:center}
.c378-meta{display:flex;align-items:center;gap:1cqw;min-width:0;min-height:0}
.c378-player .c378-subtitle{display:block;flex:1;min-width:0;min-height:0;font:2.60cqw/1.15 "Exo 2",Arial,sans-serif;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:inherit;appearance:none;-webkit-appearance:none;text-align:center}
.c378-player .c378-year{display:flex;flex:0 0 auto;align-items:baseline;justify-content:center;gap:.65cqw;max-width:39%;min-width:0;min-height:0;margin:0;padding:0 0 0 1cqw;border:0;border-left:1px solid #79593160;border-radius:0;background:transparent;box-shadow:none;color:#503318;appearance:none;-webkit-appearance:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.c378-year-label{font:700 1.55cqw/1 Arial,sans-serif;letter-spacing:.10cqw}
.c378-year-value{font:700 2.9cqw/1 Georgia,serif}
.c378-year.is-unknown .c378-year-value{font:2.10cqw/1.05 Arial,sans-serif}
.c378-year.is-long .c378-year-value{font:700 2.15cqw/1.05 Georgia,serif}
.c378-player .c378-seek{display:block;flex:1;appearance:none;-webkit-appearance:none;height:2.9cqw;min-height:2.9cqw;min-width:0;width:100%;padding:1.24cqw 0;margin:0;border:0;border-radius:0;background:transparent;cursor:pointer;accent-color:#724d2b;touch-action:pan-y}
.c378-seek::-webkit-slider-runnable-track{height:.42508cqw;border-radius:2px;background:linear-gradient(to right,#65442b var(--c378-progress,0%),#74593645 var(--c378-progress,0%))}
.c378-seek::-moz-range-track{height:.42508cqw;border-radius:2px;background:#74593645}
.c378-seek::-moz-range-progress{height:.42508cqw;background:#65442b}
.c378-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1.38151cqw;height:1.38151cqw;background:#714a24;border-radius:50%;margin-top:-.47821cqw;border:1px solid #342313}
.c378-seek::-moz-range-thumb{width:1.27524cqw;height:1.27524cqw;background:#714a24;border-radius:50%;border:1px solid #342313}
.c378-seek:disabled{cursor:default;opacity:.5}
.c378-transport{display:flex;align-items:center;gap:1.25cqw;min-width:0;min-height:0;font:2.33794cqw/1 Arial,sans-serif;font-variant-numeric:tabular-nums}
.c378-transport time{flex:none;white-space:nowrap}
.c378-controls{display:flex;flex:none;gap:.7cqw;align-items:center}
.c378-player .c378-controls button{display:grid;place-items:center;appearance:none;-webkit-appearance:none;background:none;border:0;box-shadow:none;padding:0;margin:0;width:4.5cqw;height:3.35cqw;min-height:0;color:#664321}
.c378-controls svg{display:block;width:2.9cqw;height:2.9cqw;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.c378-player .c378-screen button:focus-visible{outline:2px solid #714a24;outline-offset:-2px;border-radius:3px}
.c378-audio{display:none!important}
.c378-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Expansion is applied to the iframe/native document, never by moving it. */
.c378-player.is-expanded{--c378-max:100000px!important}
:fullscreen{background:#080a08}:-webkit-full-screen{background:#080a08}
.c378-player .c378-dialog{position:fixed;inset:0;margin:auto;padding:clamp(18px,4vw,32px);max-width:720px;width:calc(100% - 24px);max-height:92vh;max-height:92dvh;overflow-y:auto;border:1px solid #9a7849;border-radius:14px;background:#171914;color:#ead7b8;box-shadow:0 20px 100px #0009;font:16px/1.6 "Exo 2",Arial,sans-serif;text-align:left;z-index:2147483640}
.c378-dialog::backdrop{background:#000b}
.c378-dialog h2{font:700 27px/1.2 Georgia,serif;color:#f2d6a1;margin:0 35px 5px 0;padding:0}
.c378-dialog p{font-size:14px;line-height:1.5;padding:0;margin:14px 0 0;color:#d9c6a8}
.c378-dialog .c378-intro{margin:0 0 20px;color:#bda583}
.c378-dialog dl{margin:0;padding:0}.c378-dialog dt{margin:12px 0 3px;color:#b99e76;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.c378-dialog dd{margin:0;overflow-wrap:anywhere}
.c378-dialog [data-info="title"]{font:700 24px/1.25 Georgia,serif;color:#f2d6a1}
.c378-dialog .c378-info-year{font:700 30px/1.2 Georgia,serif;color:#f2d6a1}
.c378-dialog .c378-date-note{font:13px/1.5 "Exo 2",Arial,sans-serif;color:#bda583;margin:6px 0 14px}
@media(max-width:430px){.c378-dialog [data-info="title"]{font-size:21px}.c378-dialog h2{font-size:25px}}
.c378-dialog .c378-source{display:block;margin:22px 0 12px;padding:12px 14px;border:1px solid #836a44;border-radius:5px;color:#ffe0a4;text-decoration:none;text-align:center}
.c378-player .c378-close{position:absolute;right:10px;top:10px;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:#eed3aa;font:32px/1 Arial,sans-serif}
.c378-dialog .c378-diagnostic{font-size:12px;color:#b49d7a}
.c378-player>noscript{position:absolute;bottom:0;left:0;right:0;padding:12px;background:#171914;color:#f2d6a1;text-align:center;font-size:14px}
@media(prefers-reduced-motion:reduce){.c378-record{animation:none!important}.c378-player .c378-shuffle{animation:none!important;transition:none!important}}

/* 1.0.5: same cabinet, installed webapp viewport and controls inside ⓘ only. */
.c378-player.is-webapp{--c378-max:100000px!important}
.c378-app-panel{border:1px solid #836a44;border-radius:8px;padding:16px;margin:18px 0 24px;background:#20221b}
.c378-app-panel h3{font:700 19px/1.3 Georgia,serif;color:#f2d6a1;padding:0;margin:0}
.c378-dialog .c378-app-status{margin:8px 0 12px}
.c378-player .c378-app-open,.c378-player .c378-app-install{display:block;width:100%;padding:12px 14px;margin:10px 0 0;border:1px solid #a08452;border-radius:5px;background:#11150f;color:#ffe0a4;font:600 15px/1.4 Arial,sans-serif;text-decoration:none;text-align:center;min-height:44px}
.c378-app-open:focus-visible,.c378-app-install:focus-visible{outline:2px solid #ffe0a4;outline-offset:3px}
.c378-dialog .c378-app-help p{font-size:14px}
.c378-dialog .c378-app-diagnostic{font-size:12px;color:#bda583;margin:10px 0 0;overflow-wrap:anywhere}
.c378-app-diagnostic:empty{display:none}
@media(display-mode:standalone),(display-mode:fullscreen){html.c378-webapp,html.c378-webapp body{overscroll-behavior:none}}