/* A lightweight listening deck, with a local audio file and a rotating compact disc. */
.cafe-music{position:fixed;right:22px;bottom:max(20px,env(safe-area-inset-bottom));z-index:75;width:300px;color:#f1e4d1;font-family:var(--sans);isolation:isolate}
.music-deck{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:12px;align-items:center;padding:11px 13px 11px 11px;border:1px solid #e6cda35e;border-radius:22px;background:radial-gradient(ellipse at 0 0,#e7d5b530,transparent 65%),linear-gradient(130deg,#453a2ef5,#201b17fb);box-shadow:inset 0 1px #fff4,inset 0 -1px #0007,0 10px 36px #0005}
.music-open{display:flex;align-items:center;gap:13px;min-width:0;text-align:left;border:0;background:none;padding:0;color:inherit;cursor:pointer;border-radius:15px}
.music-disc-case{width:57px;height:57px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#161411;box-shadow:inset 0 1px 5px #000b,0 1px #ffe4bc45}
.music-disc{position:relative;width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,transparent 10%,#c9bfa5 11% 14%,#3a342b 15% 18%,transparent 19% 66%,#f0e2c459 67% 68%,transparent 69%),conic-gradient(from 20deg,#b8aa8e,#f2e8d3 12%,#99b1ae 18%,#806d50 23%,#c5b997 40%,#fff2d8 48%,#cab3aa 53%,#8b8874 62%,#eadac0 77%,#b2a784 89%,#b8aa8e);border:1px solid #f4e8ca7a;box-shadow:0 1px 5px #0008,inset 0 0 0 4px #e8d8b723;animation:music-disc-spin 9s linear infinite;animation-play-state:paused}
.music-disc::before{content:'';position:absolute;inset:5px;border:1px solid #5c503935;border-radius:50%}
.music-disc::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#1b1814;box-shadow:0 0 0 2px #afa189}
.music-disc-label{position:absolute;top:9px;font:500 4px var(--sans);letter-spacing:.2em;color:#3b3327}
.music-track{min-width:0;display:flex;flex-direction:column;gap:4px}
.music-track strong{font-size:15px;line-height:1.2;font-weight:600;letter-spacing:-.025em}
.music-track small{font-size:10px;line-height:1.3;color:#cfbea7}
.music-track-label{display:flex;align-items:center;gap:6px;font:7px/1.2 var(--mono);letter-spacing:.1em;color:#b9a487}
.music-led{width:4px;height:4px;background:#a28c6c;border-radius:50%}
.music-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid #ead4ad4a;background:linear-gradient(135deg,#f9e8ca21,#c6a16e09);box-shadow:inset 0 1px #fff3;color:#ecdbbc;cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.music-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.music-icon:hover:not(:disabled){background-color:#e8c89b1a;border-color:#efd4a998;transform:translateY(-1px)}
.music-icon:active:not(:disabled){transform:translateY(1px)}
.music-icon:disabled{opacity:.4;cursor:default}
.cafe-music :is(button,a,input):focus-visible{outline:2px solid #e8c38d;outline-offset:4px}
.cafe-music.is-playing .music-disc{animation-play-state:running}
.cafe-music.is-playing .music-led{background:#d8bc82;box-shadow:0 0 8px #d4bd7c70}
.music-panel{position:absolute;bottom:calc(100% + 10px);right:0;width:360px;max-width:calc(100vw - 32px);padding:17px;border:1px solid #e3c99e59;border-radius:22px;background:radial-gradient(ellipse at 0 0,#e9cba918,transparent 50%),linear-gradient(135deg,#332b23fc,#1c1815fc);box-shadow:inset 0 1px #fff3,0 15px 55px #0006;max-height:calc(100svh - 130px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;animation:music-panel-in .35s cubic-bezier(.2,.7,.2,1) both}
.music-panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.music-panel-head h2{font:500 12px/1.5 var(--sans);letter-spacing:.015em;margin:0}
.music-close{width:32px;height:32px;font-size:21px;line-height:1}
.music-now{display:flex;gap:18px;align-items:center;padding:16px;border:1px solid #ead4b521;border-radius:14px;background:linear-gradient(125deg,#e5bf8615,#15131066)}
.music-album-mark{position:relative;display:grid;place-items:center;flex:none;width:64px;height:70px;border-radius:6px;background:linear-gradient(135deg,#cdb38b,#7a674d);color:#241d16;font:500 24px Georgia,serif;box-shadow:inset 0 1px #fff6,0 4px 14px #0004;letter-spacing:-.08em}
.music-album-mark>span{position:absolute;bottom:5px;right:7px;font-size:12px;opacity:.7}
.music-caption{display:block;font:7px var(--mono);letter-spacing:.17em;color:#c4ab86;margin-bottom:8px}
.music-now strong{display:block;font-size:25px;line-height:1.2;letter-spacing:-.035em;font-weight:500}
.music-now p{font-size:12px;line-height:1.5;color:#c8b59e;margin:5px 0 0}
.cafe-music audio,.music-panel[hidden],.music-retry[hidden]{display:none}
.music-seek-row{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:10px;align-items:center;margin-top:17px;font:9px var(--mono);color:#bead93}
.music-seek-row output:last-child{text-align:right}
.cafe-music input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:24px;margin:0;background:transparent;cursor:pointer;accent-color:#d8b888}
.cafe-music input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#d8b888 var(--music-range,0%),#ffffff21 var(--music-range,0%))}
.cafe-music input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;background:#e2c59e;border:1px solid #f4ddbd;border-radius:50%;margin-top:-3.5px;box-shadow:0 1px 5px #0005}
.cafe-music input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:#ffffff21}
.cafe-music input[type=range]::-moz-range-progress{height:3px;background:#d8b888}
.cafe-music input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#e2c59e;border:1px solid #f4ddbd;border-radius:50%}
.cafe-music input:disabled{opacity:.35;cursor:default}
.music-controls{display:flex;align-items:center;justify-content:space-between;gap:13px;margin:11px 0 12px}
.music-transport{display:flex;gap:8px;align-items:center}
.music-skip{position:relative}.music-skip small{position:absolute;top:16px;font:7px var(--mono)}
.music-play-main{background:linear-gradient(130deg,#e1c59b,#b99566);color:#241c13;border-color:#e8cba5;box-shadow:inset 0 1px #ffefd7a3,0 3px 10px #0003}
.music-volume{display:flex;align-items:center;gap:7px;width:90px;flex-shrink:1}
.music-volume svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:#d1bc9d;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.music-status{font-size:10px;line-height:1.65;color:#c4b199;margin:0;min-height:17px}
.music-source{display:flex;flex-wrap:wrap;justify-content:space-between;gap:7px;padding-top:11px;margin-top:11px;border-top:1px solid #e5c69820;font-size:9px;line-height:1.6;color:#ae9778}
.music-source a{text-decoration:underline;text-underline-offset:3px;color:#d2b793}
.music-retry{border:0;padding:5px 0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:10px;color:#e1c49b;cursor:pointer}
.cafe-music.is-page-hidden .music-disc{animation-play-state:paused}
body:has(.cafe-music) .footer-bottom{padding-bottom:115px}
@keyframes music-disc-spin{to{transform:rotate(360deg)}}
@keyframes music-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.cafe-music{right:14px;bottom:max(12px,env(safe-area-inset-bottom));width:264px;max-width:calc(100vw - 28px)}.music-panel{width:344px;padding:14px}.music-deck{padding:8px 11px 8px 8px;gap:8px;border-radius:19px}.music-disc-case{width:49px;height:49px}.music-disc{width:43px;height:43px}.music-open{gap:10px}.music-track strong{font-size:14px}.music-track small{font-size:9px}.music-panel-head{margin-bottom:11px}.music-controls{gap:9px}}
@media(max-height:630px){.music-panel{max-height:calc(100svh - 105px)}.music-panel-head{margin-bottom:8px}.music-now{padding:10px}}
@media(prefers-reduced-motion:reduce){.music-disc{animation:none}.music-panel{animation:none}.music-icon{transition:none}}