@property --base{syntax: "<color>"; inherits: true; initial-value: hsl(30 8% 9%);}@property --glow{syntax: "<color>"; inherits: true; initial-value: hsl(30 12% 18%);}@property --accent{syntax: "<color>"; inherits: true; initial-value: hsl(36 70% 70%);}:root{--text: hsl(40 20% 96%);--text-muted: hsl(40 10% 78%);--surface: hsl(0 0% 100% / .06);--surface-hover: hsl(0 0% 100% / .1);--line: hsl(0 0% 100% / .12);--radius: 8px;--font: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);font-size:15px;line-height:1.75;letter-spacing:.02em;color:var(--text);background:#191715;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;padding:1px 6px;border-radius:4px;background:var(--surface)}h1,h2{word-break:auto-phrase;text-wrap:balance}.eyebrow{margin:0;font-size:14px;font-weight:500;color:var(--text-muted)}.gate{min-height:100%;display:grid;place-items:center;padding:32px 20px;background:radial-gradient(120% 80% at 80% 0%,hsl(30 14% 18%),transparent 60%),#191715}.gate-inner{max-width:480px}.gate-title{margin:8px 0 12px;font-size:32px;line-height:1.4;font-weight:700;letter-spacing:.01em}.gate-body{margin:0 0 28px;color:var(--text-muted)}.gate-error{margin:0 0 20px;padding:12px 16px;border:1px solid hsl(4 70% 60% / .6);border-radius:var(--radius);background:#ad281f2e}.primary-button{min-height:48px;padding:0 24px;border:0;border-radius:999px;font-weight:700;color:#1c1a17;background:#2bde6a;transition:transform .15s ease,background-color .15s ease}.primary-button:hover{background:#46e27c}.primary-button:active{transform:scale(.98)}.room{min-height:100%;display:grid;grid-template-columns:300px minmax(0,1fr);background:radial-gradient(110% 90% at 75% 15%,var(--glow),transparent 65%),var(--base);transition:--base .3s ease,--glow .3s ease,--accent .3s ease}.library{display:flex;flex-direction:column;height:100vh;position:sticky;top:0;border-right:1px solid var(--line);background:#0000002e}.tabs{display:flex;gap:4px;padding:16px 16px 8px}.tab{flex:1;min-height:40px;border:1px solid transparent;border-radius:var(--radius);font-size:14px;font-weight:500;color:var(--text-muted);background:transparent;transition:background-color .15s ease,color .15s ease}.tab:hover{color:var(--text);background:var(--surface)}.tab[aria-selected=true]{color:var(--text);border-color:var(--line);background:var(--surface-hover)}.library-panel{flex:1;overflow-y:auto;padding:4px 8px 16px}.library-list{list-style:none;margin:0;padding:0}.library-item{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:6px 8px;border:1px solid transparent;border-radius:var(--radius);text-align:left;background:transparent;transition:background-color .15s ease}button.library-item:hover{background:var(--surface)}.library-item[aria-current=true]{border-color:var(--line);background:var(--surface-hover)}.library-item[aria-current=true] .library-name{color:var(--accent)}.thumb{flex:none;width:44px;height:44px;border-radius:4px;object-fit:cover;background:var(--surface)}.library-text{min-width:0;display:flex;flex-direction:column;line-height:1.5}.library-name,.library-sub{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.library-name{font-size:14px;font-weight:500}.library-sub{font-size:14px;color:var(--text-muted)}.library-empty{margin:16px 8px;font-size:14px;color:var(--text-muted)}.library-empty p{margin:0 0 12px}.skeleton{display:block;background:#ffffff14;border-radius:4px}.skeleton-line{width:140px;height:12px;margin:4px 0}.skeleton-line.short{width:90px}.stage{min-width:0;min-height:100vh;display:flex;flex-direction:column;padding:20px 40px 16px}.stage-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.device-status{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-muted)}.device-dot{width:8px;height:8px;border-radius:50%;background:#8c8473}.device-status[data-ready=true] .device-dot{background:#2bde6a}.ghost-button{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;background:transparent;transition:background-color .15s ease}.ghost-button:hover{background:var(--surface)}.notice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:10px 8px 10px 16px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;background:#00000040}.notice-close{flex:none;width:36px;height:36px;border:0;border-radius:6px;font-size:18px;background:transparent}.notice-close:hover{background:var(--surface)}.stage-message{margin:auto;max-width:440px;text-align:center;color:var(--text-muted)}.stage-message-title{margin:0 0 8px;font-size:26px;line-height:1.4;color:var(--text)}.now-playing{flex:1;display:grid;grid-template-columns:minmax(0,auto) minmax(280px,420px);align-items:center;justify-content:center;gap:clamp(40px,6vw,96px);padding:32px 0}.record{--size: clamp(240px, 34vw, 440px);position:relative;width:var(--size);height:var(--size);margin-right:calc(var(--size) * .3)}.jacket{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:0 24px 48px -24px #000000b3}.vinyl{position:absolute;inset:3%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,transparent 0 31%,hsl(0 0% 100% / .04) 31.5% 32%,transparent 32.5%),repeating-radial-gradient(circle,#141414 0 2px,#1f1f1f 2px 3px),#171717;transform:translate(8%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}.record[data-playing=true] .vinyl{transform:translate(32%)}.vinyl-label{display:block;width:34%;height:34%;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #0f0f0f,inset 0 0 0 calc(var(--size) * .006) #00000040}.meta{min-width:0}.track-title{margin:4px 0 2px;font-size:clamp(26px,3vw,40px);line-height:1.3;font-weight:700;letter-spacing:.01em;overflow-wrap:anywhere}.track-artist{margin:0;font-size:17px;color:var(--text-muted)}.progress{margin-top:28px}.progress-times{display:flex;justify-content:space-between;font-size:14px;font-variant-numeric:tabular-nums;color:var(--text-muted)}.slider{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:transparent;cursor:pointer}.slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--fill, 0%),hsl(0 0% 100% / .2) var(--fill, 0%))}.slider::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--fill, 0%),hsl(0 0% 100% / .2) var(--fill, 0%))}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:var(--text);opacity:0;transition:opacity .15s ease}.slider::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--text)}.slider:hover::-webkit-slider-thumb,.slider:focus-visible::-webkit-slider-thumb{opacity:1}.controls{display:flex;align-items:center;justify-content:space-between;max-width:340px;margin-top:16px}.icon-button{position:relative;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;color:var(--text-muted);background:transparent;transition:color .15s ease,background-color .15s ease}.icon-button:hover{color:var(--text);background:var(--surface)}.icon-button[aria-pressed=true]{color:var(--accent)}.icon-button[aria-pressed=true]:after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:currentColor}.repeat-button[data-mode=track]:before{content:"1";position:absolute;top:6px;right:6px;font-size:10px;font-weight:700;line-height:1}.play-button{width:64px;height:64px;display:grid;place-items:center;border:0;border-radius:50%;color:var(--base);background:var(--accent);transition:transform .15s ease}.play-button:hover{transform:scale(1.04)}.play-button:active{transform:scale(.97)}.volume{display:flex;align-items:center;gap:8px;max-width:220px;margin-top:12px;margin-left:-10px}.up-next{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}.up-next-title{margin:0 0 8px;font-size:14px;font-weight:500;color:var(--text-muted)}.up-next-list{list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto}.up-next-item{display:flex;align-items:center;gap:12px;padding:4px 0}.up-next-item .thumb{width:36px;height:36px}.stage-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--text-muted)}a.ghost-button{display:inline-flex;align-items:center;color:inherit;text-decoration:none}.stage-header-actions{display:flex;gap:8px}.room-mode{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left));overflow:hidden;background:radial-gradient(110% 90% at 75% 15%,var(--glow),transparent 65%),var(--base);transition:--base .3s ease,--glow .3s ease,--accent .3s ease,filter .3s ease;user-select:none;-webkit-user-select:none}.room-mode[data-night=true]{filter:brightness(.72)}.room-scene{width:100%;max-width:1180px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center;gap:clamp(24px,3.5vw,48px)}.room-stage{position:relative;width:100%;aspect-ratio:1 / .9;max-height:calc(100dvh - 80px);margin-inline:auto;container-type:size}.window{position:absolute;top:0;left:6cqw;width:88cqw;height:60cqh;border:1.6cqw solid hsl(36 10% 82%);border-radius:4px;overflow:hidden;background:var(--sky-bottom);box-shadow:inset 0 0 0 1px #00000026,0 1.2cqw 3cqw -1.5cqw #00000080}.window-sky,.window-clouds,.window-weather,.window-glass{position:absolute;inset:0}.window-weather{width:100%;height:100%}.window-sky{background:linear-gradient(to bottom,var(--sky-top),var(--sky-bottom))}.window-clouds{background:radial-gradient(40% 22% at 22% 30%,hsl(0 0% 100% / .22),transparent 70%),radial-gradient(46% 24% at 70% 22%,hsl(0 0% 100% / .18),transparent 70%),radial-gradient(38% 20% at 52% 48%,hsl(0 0% 100% / .14),transparent 70%)}.window[data-condition=fog] .window-clouds{background:linear-gradient(to bottom,#ffffff1f,#ffffff80)}.window[data-time=night] .window-clouds{opacity:.35}.window-glass{background:linear-gradient(120deg,hsl(0 0% 100% / .1) 0 18%,transparent 18% 34%,hsl(0 0% 100% / .05) 34% 40%,transparent 40%)}.window-mullion{position:absolute;top:0;bottom:0;left:50%;width:1.4cqw;transform:translate(-50%);background:#d6d2cd}.room-shelf{position:absolute;left:0;right:0;top:76cqh;bottom:0;border-radius:3px;background:linear-gradient(to bottom,#5a4c3f 0 1.4cqh,#352d27 1.4cqh 3.2cqh,#1f1c19 3.2cqh)}.room-objects{position:absolute;left:2cqw;right:1cqw;bottom:24cqh;display:flex;align-items:flex-end}.sleeve-set{position:relative;z-index:1;flex:none;display:flex;align-items:flex-end}.obi{width:7cqh;height:42cqh;margin-right:.8cqh;padding-block:2.4cqh;display:flex;flex-direction:column;align-items:center;gap:1.6cqh;overflow:hidden;border-radius:2px;color:#2f2923;background:linear-gradient(to right,#e2daca,#eeeae2 40%,#dfd7c8);box-shadow:0 1.2cqh 2cqh -1cqh #00000080}.obi-title,.obi-artist{display:block;writing-mode:vertical-rl;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.obi-title{max-height:26cqh;font-family:Shippori Mincho B1,Hiragino Mincho ProN,Yu Mincho,serif;font-size:max(16px,3.4cqh);font-weight:700;line-height:1.2;letter-spacing:.08em}.obi-artist{max-height:14cqh;font-size:max(14px,2.2cqh);letter-spacing:.1em;opacity:.8}.sleeve{position:relative;width:46cqh;height:46cqh;border-radius:8px;box-shadow:0 1.6cqh 2.6cqh -1.2cqh #0009}.sleeve:after{content:"";position:absolute;top:.8cqh;right:-.9cqh;bottom:-.2cqh;width:.9cqh;border-radius:0 3px 3px 0;background:linear-gradient(to right,#bdb5a8,#8c8273)}.sleeve-art{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}.sleeve-art-empty{background:#ffffff14}.turntable{position:relative;z-index:2;flex:none;width:48cqh;margin-left:auto}.plinth{position:relative;width:100%;aspect-ratio:1;border-radius:1.4cqh;background:linear-gradient(160deg,#312e2b,#1e1c1a);box-shadow:inset 0 0 0 1px #ffffff0f,0 1.6cqh 2.8cqh -1.2cqh #000000a6}.platter{position:absolute;left:4%;top:12%;width:80%;aspect-ratio:1;border-radius:50%;background:#9e9e9e;box-shadow:0 0 0 .5cqh #4d4d4d,0 .6cqh 1.4cqh #00000080}.disc{position:absolute;inset:1.5%;display:grid;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle,#121212 0 1px,#1c1c1c 1px 2px);animation:disc-spin 1.8s linear infinite;animation-play-state:paused}.turntable[data-state=playing] .disc{animation-play-state:running}@keyframes disc-spin{to{transform:rotate(360deg)}}.disc-label{position:relative;width:35%;height:35%;display:grid;place-items:center;border-radius:50%;background:var(--accent)}.disc-label:before{content:"";position:absolute;left:50%;top:9%;bottom:60%;width:1px;background:#00000059}.disc-side{transform:translateY(80%);font-family:ui-monospace,Menlo,monospace;font-size:max(9px,1.7cqh);letter-spacing:.14em;color:#0000008c}.disc-sheen{position:absolute;inset:1.5%;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 8%,hsl(0 0% 100% / .09) 12%,transparent 18% 50%,hsl(0 0% 100% / .06) 62%,transparent 68%)}.disc-spindle{position:absolute;left:50%;top:50%;width:2.2%;height:2.2%;transform:translate(-50%,-50%);border-radius:50%;background:#bfbfbf}.arm-base{position:absolute;left:86%;top:14%;width:13%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#6b6b6b 0 30%,#2e2e2e 32% 100%);box-shadow:0 0 0 .3cqh #141414}.tonearm{position:absolute;left:86%;top:14%;width:2.6%;height:64%;transform-origin:top center;transform:translate(-50%) rotate(var(--arm-angle));transition:transform 1s linear;filter:drop-shadow(.6cqh 1cqh .8cqh hsl(0 0% 0% / .55))}.turntable[data-state=paused] .tonearm{filter:drop-shadow(1.4cqh 2cqh 1.2cqh hsl(0 0% 0% / .4))}.turntable[data-state=idle] .tonearm{transition-duration:.6s;transition-timing-function:ease}.arm-rod{position:absolute;inset:0 0 6%;border-radius:999px;background:linear-gradient(to right,#949494,#e0e0e0 45%,#858585)}.arm-head{position:absolute;left:50%;bottom:0;width:300%;height:9%;transform:translate(-50%);border-radius:2px;background:#333;box-shadow:inset 0 0 0 1px #666}.room-meta{min-width:0;display:grid;align-content:center}.room-collection{margin:0;font-size:18px;color:var(--text-muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.room-title{margin:6px 0 4px;font-size:clamp(30px,3.9vw,52px);line-height:1.25;font-weight:700;letter-spacing:.01em;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.room-title a{color:inherit;text-decoration:none}.room-artist{margin:0;font-size:clamp(20px,2.1vw,26px);color:var(--text-muted)}.room-times{margin:24px 0 0;font-size:18px;font-variant-numeric:tabular-nums;color:var(--text-muted)}.room-device{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:18px;color:var(--text-muted)}.room-device-dot{flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--text-muted)}.room-device-dot[data-playing=true]{border-color:var(--accent);background:var(--accent)}.room-offline{color:var(--text)}.room-weather{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:16px;color:var(--text-muted)}.room-message{display:grid;justify-items:start;gap:12px}.room-message-title{margin:0;font-size:28px;font-weight:700;line-height:1.4}.room-message-body{margin:0;font-size:18px;color:var(--text-muted)}.room-credit{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));margin:0;font-size:14px;color:var(--text-muted)}@media(orientation:portrait){.room-scene{grid-template-columns:minmax(0,1fr);gap:32px}.room-stage{max-height:56dvh}.room-meta{width:100%;max-width:560px;justify-self:center}}@media(prefers-reduced-motion:reduce){.disc{animation:none}}.room-mode-3d{--text: hsl(30 14% 14%);--text-muted: hsl(30 8% 32%);--line: hsl(30 10% 20% / .2);display:block;padding:0;background:#e9e3da;color:var(--text)}.room-mode-3d[data-time=night]{background:#2a2622}.room-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.room-jacket{position:absolute;z-index:1;container-type:size;pointer-events:none}.room-jacket .sleeve{width:100%;height:100%;box-shadow:1.5cqh 2.5cqh 4cqh -1.5cqh #1f1a1473}.room-jacket .sleeve:after{top:1.6cqh;right:-1.8cqh;width:1.8cqh}.room-jacket .obi{position:absolute;right:calc(100% + 11cqh);bottom:0;width:13cqh;height:86cqh;margin:0;padding-block:5cqh;gap:3cqh}.room-jacket .obi-title{max-height:50cqh;font-size:max(14px,6.4cqh)}.room-jacket .obi-artist{max-height:26cqh;font-size:max(14px,4.2cqh)}.room-meta-3d{position:absolute;z-index:2;top:50%;right:max(3vw,env(safe-area-inset-right));width:min(23vw,360px);transform:translateY(-50%)}.room-meta-3d .room-title{font-size:clamp(26px,3vw,44px)}.room-mode-3d .room-device-dot[data-playing=true]{border-color:var(--text-muted)}@media(max-width:960px){.now-playing{grid-template-columns:minmax(0,1fr);justify-items:center;gap:32px}.record{--size: min(60vw, 360px)}.meta{width:100%;max-width:440px}}@media(max-width:720px){.room{grid-template-columns:minmax(0,1fr)}.library{position:static;height:auto;max-height:40vh;order:2;border-right:0;border-top:1px solid var(--line)}.stage{min-height:auto;padding:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0ms!important}}