/* Approved mechanical board. Scoped; never changes playback or chat geometry. */
.rhk-playlist-trigger{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer}
.rhk-playlist-trigger svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rhk-playlist-trigger[data-unseen]:after{content:attr(data-unseen);position:absolute;right:0;top:0;background:#f3d846;color:#161b14;border-radius:8px;padding:1px 4px;font:600 9px/14px system-ui}
.rhk-playlist-trigger.rhk-playlist-room{position:absolute;right:12px;top:10px;z-index:8;width:auto;padding:0 10px 0 5px;background:#13281eee;border:1px solid #ffffff30;border-radius:22px;font:600 11px system-ui;color:#efe7ce}
.rhk-playlist-room img{width:30px;height:30px;border-radius:50%;background:#fff}
.mp-shared.mp-chat-active .rhk-playlist-trigger{display:none}
.rhk-playlist-trigger:focus-visible{outline:2px solid #f3d846;outline-offset:2px}
.rhk-playlist{box-sizing:border-box;position:fixed;inset:auto 16px auto auto;top:80px;margin:0;padding:0;width:390px;max-width:calc(100vw - 24px);max-height:min(429px,calc(100dvh - 100px));border:1px solid #4c4e43;border-radius:4px;background:#101210;color:#f0df76;box-shadow:0 8px 24px #0006;z-index:10060;font:.6875rem/1.4 ui-monospace,Menlo,Consolas,monospace;overflow:hidden}
.rhk-playlist[open]{display:flex;flex-direction:column;animation:rhk-board-open 300ms cubic-bezier(.22,1,.36,1)}
.rhk-playlist *{box-sizing:border-box}.rhk-playlist button{font:inherit;color:inherit;cursor:pointer}.rhk-playlist button:focus-visible{outline:2px solid #f3d846;outline-offset:-2px}
.rhk-playlist::backdrop{background:#07100b85}
.rhk-playlist .bp-head{display:flex;align-items:center;gap:8px;padding:0 8px 0 10px;min-height:44px;flex-shrink:0}
.rhk-playlist h2{margin:0;font:500 17px/1.2 "Arial Narrow",Arial,sans-serif;letter-spacing:.03em;color:#f3d846}
.rhk-playlist .bp-emblem{display:grid;place-items:center;background:#f3d846;color:#151711;width:20px;height:20px;border-radius:2px}
.rhk-playlist .bp-close{margin-left:auto;width:44px;height:44px;border:0;background:transparent;font-size:22px;color:#deded5}
.rhk-playlist .bp-meta{display:flex;justify-content:space-between;gap:8px;margin:0 10px 8px;color:#bbc0af;font-size:.5625rem;flex-shrink:0}
.rhk-playlist .bp-columns,.rhk-playlist .bp-row{display:grid;grid-template-columns:1.1875rem minmax(0,1fr) 4.125rem;gap:4px;align-items:center}
.rhk-playlist .bp-columns{padding:0 10px 5px;font-size:.5625rem;color:#d5d7c8;flex-shrink:0}
.rhk-playlist .bp-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;padding:3px 5px 4px;border-top:1px solid #505345;scrollbar-width:thin;scrollbar-color:#696b52 #151813}
.rhk-playlist .bp-row{width:100%;text-align:left;min-height:24px;padding:2px 4px;margin:0 0 1px;border:0;border-radius:1px;background:linear-gradient(#30322d 0 48%,#10120d 48% 53%,#292c26 53%);color:#eedb69}
.rhk-playlist .bp-row[data-state=PLAYING]{background:linear-gradient(#494a30 0 48%,#252715 48% 53%,#3b3e24 53%);box-shadow:inset 2px 0 #f3d846;color:#fff08a}
.rhk-playlist .bp-row[data-state=PLAYED],.rhk-playlist .bp-row[data-state=SKIPPED]{color:#b3b9a6}
.rhk-playlist .bp-row:hover{filter:brightness(1.15)}
.rhk-playlist .bp-track{display:flex;gap:4px;align-items:center;min-width:0;overflow:hidden}
.rhk-playlist .bp-title{font-size:.6875rem;min-width:0;flex:1 1 auto;overflow:hidden}
.rhk-playlist .bp-row .bp-title{color:inherit;text-shadow:0 0 0 transparent;transition:color 600ms ease-out,text-shadow 600ms ease-out}
.rhk-playlist .bp-row.bp-added .bp-title{color:#fffbe6;text-shadow:0 0 4px #fff2ac55;transition-duration:160ms}
.rhk-playlist .bp-number,.rhk-playlist .bp-status,.rhk-playlist .bp-duration{font-size:.53125rem;flex-shrink:0}
.rhk-playlist .bp-flaps{display:flex;gap:1px;white-space:nowrap;perspective:650px;overflow:hidden}
.rhk-playlist .bp-letter{position:relative;display:inline-grid;place-items:center;flex:0 0 .68em;min-width:.68em;height:1.5em;line-height:1.5;font-weight:500;background:linear-gradient(#171916 0 47%,#030403 47% 54%,#0b0d0b 54%);border-radius:1px;box-shadow:inset 0 1px #ffffff1c,inset 0 -1px #000,0 0 0 1px #0008}
.rhk-playlist .bp-letter.wide{flex-basis:1.08em;min-width:1.08em;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
.rhk-playlist .bp-letter.blank{background:transparent;box-shadow:none;flex-basis:.3em;min-width:.3em}
.rhk-playlist .bp-letter:after{content:"";position:absolute;inset:50% 0 auto;height:1px;background:#030403;box-shadow:0 1px #ffffff08;z-index:3;pointer-events:none}
.rhk-playlist .bp-letter.turning:not(.blank):before{content:attr(data-char);position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#252821 0 47%,#020302 47% 54%,#10130f 54%);border-radius:1px;z-index:2;transform-origin:50% 50%;backface-visibility:hidden;animation:bp-flip 1080ms cubic-bezier(.22,.7,.3,1) both;animation-delay:calc(var(--i)*24ms)}
.rhk-playlist .bp-foot{padding:7px 10px;border-top:1px solid #383c31;color:#bbc0af;font-size:.5625rem;flex-shrink:0;display:flex;align-items:center;gap:8px;min-height:30px}
.rhk-playlist .bp-notice{margin:0;flex:1}.rhk-playlist .bp-retry{min-height:44px;border:1px solid #777b65;background:transparent;padding:0 10px}.rhk-playlist [hidden]{display:none!important}
.rhk-playlist .bp-detail{padding:6px 10px;margin:0;font:.75rem/1.5 system-ui;color:#e4e5d9;border-top:1px solid #383c31;max-height:100px;overflow:auto;flex-shrink:0}
.rhk-playlist .bp-empty{padding:20px 10px;font:.75rem/1.5 system-ui;color:#bbc0af;margin:0}
@keyframes bp-flip{0%{transform:rotateX(-88deg);filter:brightness(.35)}55%{filter:brightness(1.15)}100%{transform:rotateX(0);filter:brightness(1)}}
@keyframes rhk-board-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:800px){.rhk-playlist{inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:78dvh;border-radius:13px 13px 0 0}.rhk-playlist[open]{animation:rhk-sheet-open 420ms cubic-bezier(.22,1,.36,1)}.rhk-playlist .bp-head{padding-top:10px;min-height:54px}.rhk-playlist .bp-head:before{content:"";position:absolute;width:32px;height:3px;border-radius:2px;background:#6f7563;top:6px;left:calc(50% - 16px)}.rhk-playlist .bp-foot{padding-bottom:max(10px,env(safe-area-inset-bottom))}.rhk-playlist .bp-scroll{min-height:75px}.rhk-playlist-room svg{display:none}}
@keyframes rhk-sheet-open{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.rhk-playlist,.rhk-playlist *,.rhk-playlist *:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.motion-paused .rhk-playlist *,body.motion-paused .rhk-playlist *:before,.rhk-playlist[data-motion=off],.rhk-playlist[data-motion=off] *,.rhk-playlist[data-motion=off] *:before{animation:none!important;transition:none!important}

@media(max-width:800px){body:has(.rhk-playlist:modal){overflow:hidden}}

/* The shop sign colours, with the original transparent bear as a CSS mask. */
.rhk-playlist-room .bp-disc{position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#ffdd32;box-shadow:inset 0 0 0 1px #a82a2033;animation:bp-record-spin 24s linear infinite;animation-play-state:paused}
.bp-disc:before{content:"";position:absolute;inset:2px;border:1px solid #bf211f33;border-radius:50%;box-shadow:inset 0 0 0 1px #ffdd32,inset 0 0 0 2px #bf211f22}
.bp-disc span{width:22px;height:22px;background:#c52026;mask:url('/radiohead-bear-favicon.png') center/contain no-repeat;-webkit-mask:url('/radiohead-bear-favicon.png') center/contain no-repeat}
.rhk-playlist-room[data-spinning=true] .bp-disc{animation-play-state:running}
@keyframes bp-record-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.rhk-playlist-room .bp-disc{animation:none}}