:root{--ink: #fff7ec;--muted: #ffecc8c9;--gold: #f4c430;--ember: #ff8a1f;--deep: #0d0805;--glass: #120b08b8;--glass-strong: #160e0ae8;--line: #ffffff2e;--font-display: Chilanka, cursive;--font-ui: Syne, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{color:var(--ink);background:var(--deep);font-family:var(--font-ui);overflow:hidden;min-height:100dvh}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}#player-container{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.scene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;background:var(--deep)}.scene picture{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}.scene-photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}.boot-loader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#2a180ecc,#0d0805f2 70%),#0d0805;transition:opacity .55s ease,visibility .55s}.boot-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}.boot-loader-inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem;padding:1.5rem;text-align:center}.boot-spinner{width:2.1rem;height:2.1rem;border-radius:50%;border:2px solid #f4c43033;border-top-color:#f4c430;animation:boot-spin .85s linear infinite}.boot-loader-text{font-family:var(--font-display);font-size:clamp(1.15rem,3.2vw,1.55rem);color:#ffecc8;letter-spacing:.02em;text-shadow:0 2px 18px #000c;animation:boot-pulse 1.6s ease-in-out infinite}@keyframes boot-spin{to{transform:rotate(360deg)}}@keyframes boot-pulse{0%,to{opacity:.72}50%{opacity:1}}body.is-booting .shell,body.is-booting .online-pill{opacity:0}.scene-veil{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,#0d0805cc 0%,#0d080566 18%,transparent 42%),linear-gradient(0deg,#0d0805f0 0%,#0d0805aa 22%,transparent 48%),linear-gradient(90deg,#0d080599 0%,transparent 28%,transparent 72%,#0d080566 100%)}.online-pill{position:fixed;left:clamp(1rem,2.5vw,1.6rem);bottom:clamp(1rem,2.5vh,1.6rem);z-index:6;display:inline-flex;align-items:center;gap:.35rem;padding:0;border:0;background:none;box-shadow:none;color:#fff7ece6;font-size:.68rem;font-weight:500;letter-spacing:.01em;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:0 1px 8px #000a}.online-dot{width:.4rem;height:.4rem;border-radius:50%;background:#116530;box-shadow:0 0 #11653066;animation:online-pulse 2.2s ease-out infinite}@keyframes online-pulse{0%{box-shadow:0 0 #11653066}70%{box-shadow:0 0 0 6px #11653000}to{box-shadow:0 0 #11653000}}.shell{position:relative;z-index:2;height:100dvh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.4rem,3.5vh,2.4rem) clamp(1.4rem,3.5vw,2.8rem) clamp(1.1rem,2.5vh,1.8rem);pointer-events:none;transition:opacity .45s ease}.online-pill{transition:opacity .45s ease}.shell>*{pointer-events:auto}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;animation:rise .8s ease both}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.brand{max-width:min(34rem,70vw)}.brand-chant{color:var(--gold);letter-spacing:.16em;font-size:.74rem;font-weight:700;margin-bottom:.55rem;text-shadow:0 2px 14px #000d}.brand-name{font-family:var(--font-display);font-size:clamp(3.2rem,7vw,5.6rem);line-height:.95;font-weight:700;color:#fff8ef;text-shadow:0 2px 0 #0005,0 12px 40px #000c}.brand-line{margin-top:.85rem;max-width:22rem;color:var(--muted);font-size:clamp(.95rem,1.3vw,1.08rem);line-height:1.45;font-weight:500;text-shadow:0 2px 16px #000c}.fab{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem .95rem;border-radius:999px;border:1px solid #ffffff2e;background:#1a110df0;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);color:var(--ink);font-size:.84rem;font-weight:650;letter-spacing:.02em;box-shadow:0 10px 28px #0008;transition:background .2s,border-color .2s,transform .2s;flex-shrink:0}.fab:hover{background:#24160ff5;border-color:#f4c43066;transform:translateY(-1px)}.dock{display:flex;flex-direction:column;gap:.85rem;width:min(26.5rem,100%);margin-inline:auto;padding:.95rem 1rem 1rem;border-radius:18px;border:1px solid #ffffff33;background:#1a110df2;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:0 18px 50px #000c,0 0 0 1px #0004,inset 0 1px #ffffff1f;animation:rise 1s ease both}.dock-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.now{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1}.now-art{width:3.1rem;height:3.1rem;border-radius:9px;object-fit:cover;flex-shrink:0;box-shadow:0 4px 14px #0009;transition:transform .25s ease,box-shadow .25s ease}.now-art.art-land{animation:art-land .45s cubic-bezier(.22,1,.36,1)}@keyframes art-land{0%{transform:scale(.86);box-shadow:0 0 #f4c43000}55%{transform:scale(1.08);box-shadow:0 0 28px #f4c43066}to{transform:scale(1);box-shadow:0 4px 14px #0009}}.song-flyer{position:fixed;z-index:120;pointer-events:none;border-radius:50%;overflow:hidden;border:2px solid #f4c430cc;box-shadow:0 16px 40px #000c,0 0 28px #f4c43066;will-change:transform,border-radius,opacity}.song-flyer img{display:block;width:100%;height:100%;object-fit:cover}.chain-bead.is-origin{opacity:.4;transition:opacity .25s ease}.dock.receive-song{animation:dock-pulse .55s ease}@keyframes dock-pulse{0%,to{box-shadow:0 18px 50px #000c,0 0 0 1px #0004,inset 0 1px #ffffff1f}45%{box-shadow:0 18px 50px #000c,0 0 0 1px #f4c43055,0 0 36px #f4c43033,inset 0 1px #ffffff1f}}.now-text{min-width:0}.now-title{font-weight:650;font-size:.92rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-artist{color:#ffecc8b3;font-size:.76rem;margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-tools{display:flex;align-items:center;gap:.15rem;flex-shrink:0}.meter{min-width:0}.seek{display:block;width:100%;height:.28rem;border-radius:99px;background:#fff2;overflow:hidden;position:relative}.seek:hover{height:.34rem;background:#ffffff30}.seek-fill{display:block;height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#ff9a3c,var(--gold));transition:width .15s linear}.times{display:flex;justify-content:space-between;margin-top:.35rem;color:#ffe8c999;font-size:.68rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}.transport{display:flex;align-items:center;justify-content:center;gap:.85rem}.icon-soft{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;color:#fff3e0ee;transition:background .15s,transform .15s,color .15s}.icon-soft:hover{background:#ffffff16;color:#fff}.icon-soft:active{transform:scale(.94)}.play{position:relative;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;color:#1a0d06;background:#f0b429;box-shadow:0 6px 20px #f0b42955;transition:transform .15s,background .15s,box-shadow .15s}.play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none}.play #icon-play{display:block}body.is-playing .play #icon-play{display:none}body.is-playing .play #icon-pause{display:block}.fs-icon[hidden]{display:none!important}.play:hover:not(:disabled){background:#ffc44a;transform:scale(1.05);box-shadow:0 8px 24px #f0b42966}.play:disabled{opacity:.5;cursor:not-allowed}.play:active:not(:disabled){transform:scale(.96)}.playlist-anchor{position:relative;z-index:10;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}.fab.is-active{border-color:#f4c43088;background:#24160ff5;box-shadow:0 10px 28px #0008,0 0 0 1px #f4c43033}.song-chain{position:absolute;top:calc(100% + .15rem);right:0;width:min(22rem,calc(100vw - 1.5rem));max-height:min(78vh,40rem);padding:0 .35rem 0 0;overflow:visible;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-14px) scale(.97);transform-origin:top right;filter:blur(6px);transition:opacity .5s cubic-bezier(.22,1,.36,1),visibility .5s,transform .55s cubic-bezier(.22,1,.36,1),filter .55s cubic-bezier(.22,1,.36,1)}.song-chain.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);filter:blur(0)}.song-chain.is-closing{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.98);filter:blur(4px)}.chain-hook{width:2px;height:.85rem;margin:0 1.55rem 0 auto;background:linear-gradient(180deg,#f4c430,#c48a1a);border-radius:99px;box-shadow:0 0 10px #f4c43066;transform-origin:top center;transform:scaleY(0);opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1) .04s,opacity .4s ease .04s}.song-chain.open .chain-hook{transform:scaleY(1);opacity:1}.chain-list{display:flex;flex-direction:column;align-items:stretch;max-height:min(72vh,36rem);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:1.25rem .85rem 2.75rem 1.65rem;scrollbar-width:none;-ms-overflow-style:none;perspective:920px;perspective-origin:85% 18%;transform-style:preserve-3d;mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 78%,transparent 100%)}.chain-list::-webkit-scrollbar{width:0;height:0;display:none}.chain-node{position:relative;display:flex;flex-direction:column;align-items:flex-end;opacity:0;transform-style:preserve-3d;transform-origin:right center;will-change:transform,opacity,filter}.song-chain.open .chain-node.depth-live{--chain-x: var(--chain-x-base, 0px);filter:blur(var(--chain-blur, 0px));opacity:var(--chain-opacity, 1);transform:translate3d(var(--chain-x),0,var(--chain-z, 0px)) rotateX(var(--chain-rx, 0deg)) scale(var(--chain-scale, 1))}.chain-node.depth-live:has(.chain-bead:hover){--chain-x: calc(var(--chain-x-base, 0px) - 5px)}.chain-cord{width:2px;height:.7rem;margin-right:1.35rem;background:linear-gradient(180deg,#f0b429,#a56b12);border-radius:99px;box-shadow:0 0 8px #f4c43044}.chain-bead{display:grid;grid-template-columns:2.55rem 1fr auto;align-items:center;gap:.7rem;width:100%;box-sizing:border-box;text-align:left;padding:.55rem .7rem .55rem .55rem;border-radius:999px;border:1px solid #ffffff28;background:#1a110df5;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 10px 28px #0008,inset 0 1px #ffffff18;color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}.chain-bead:hover{border-color:#f4c43077;background:#24170ff8;box-shadow:0 12px 32px #000a,0 0 0 1px #f4c43033,inset 0 1px #fff2}.chain-bead.active{border-color:#f4c430;background:linear-gradient(120deg,#3a2412f5,#1a110df8);box-shadow:0 12px 34px #000a,0 0 22px #f4c43033,inset 0 0 0 1px #f4c43044}.chain-thumb{width:2.55rem;height:2.55rem;border-radius:50%;object-fit:cover;border:1.5px solid #f4c43066;box-shadow:0 0 12px #f4c43022}.chain-bead.active .chain-thumb{border-color:#f4c430;box-shadow:0 0 16px #f4c43055}.chain-meta{min-width:0}.chain-title{display:block;font-size:.84rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chain-artist{display:block;margin-top:.1rem;color:#ffecc8b0;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chain-index{font-size:.68rem;font-variant-numeric:tabular-nums;color:#f4c430cc;font-weight:700;letter-spacing:.04em}@media(max-width:640px){.brand-line{max-width:16rem}.fab-label{display:none}.brand-name{font-size:clamp(2.6rem,14vw,3.4rem)}.shell{padding-inline:.9rem;padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px))}.dock{width:100%;margin-bottom:calc(1.55rem + env(safe-area-inset-bottom,0px));padding:.85rem .85rem .9rem;gap:.7rem}.online-pill{left:.9rem;bottom:max(.45rem,env(safe-area-inset-bottom,0px));z-index:3;font-size:.62rem}.song-chain{width:min(19.5rem,calc(100vw - 1.1rem));max-height:min(58vh,28rem)}.chain-list{max-height:min(52vh,24rem);padding:1rem .55rem 2rem 1.1rem}.now-art{width:2.75rem;height:2.75rem}.now-title{font-size:.86rem}.transport{gap:1.1rem}}