:root{color-scheme:dark;--bg:#08131a;--bg-2:#11212a;--surface:rgba(241,246,244,0.74);--surface-deep:rgba(255,255,255,0.84);--lcd-bg:#bdbdb1;--lcd-line:rgba(36,42,33,0.08);--lcd-ink:#31352b;--shadow:rgba(5,11,16,0.36);--accent:#d79e49;--muted:rgba(228,236,233,0.74)}*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;font-family:SF Pro Display,PingFang SC,Helvetica Neue,sans-serif;color:#f5f6f0;background:radial-gradient(circle at top,rgba(215,158,73,.18),transparent 25%),radial-gradient(circle at 20% 20%,rgba(99,183,162,.18),transparent 35%),linear-gradient(160deg,var(--bg),var(--bg-2) 58%,#04090d)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 0);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle at center,black,transparent 78%);mask-image:radial-gradient(circle at center,black,transparent 78%)}button{font:inherit}.page-shell{width:min(100%,calc(100% - 24px));margin:0 auto;padding:20px 12px 28px}.device-stage,.page-shell{min-height:100vh;display:grid;place-items:center}.device-stage{width:100%}.ipod-device{width:min(100%,340px);padding:22px 18px 24px;border-radius:34px;background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(225,230,230,.84)),rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -18px 40px rgba(134,151,158,.16),0 34px 70px rgba(0,0,0,.34)}.lcd-screen{position:relative;height:220px;padding:14px 12px 12px;overflow:hidden;border-radius:10px;border:2px solid rgba(72,77,61,.3);background:linear-gradient(180deg,rgba(255,255,255,.14),transparent),repeating-linear-gradient(180deg,var(--lcd-line) 0,var(--lcd-line) 1px,transparent 1px,transparent 4px),var(--lcd-bg);box-shadow:inset 0 1px 4px rgba(255,255,255,.25),inset 0 -10px 18px rgba(45,49,38,.12)}.about-screen,.menu-screen,.now-playing{height:100%;display:grid;align-content:start}.menu-header,.status-bar{padding-bottom:8px;border-bottom:1px solid rgba(49,53,43,.25);color:var(--lcd-ink);font-family:SF Mono,JetBrains Mono,monospace;font-size:.8rem;font-weight:700;letter-spacing:.04em}.status-bar{display:flex;justify-content:space-between}.menu-list{margin:0;padding:8px 0 0;list-style:none;display:grid;grid-gap:4px;gap:4px;max-height:176px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.menu-list::-webkit-scrollbar{display:none}.menu-list li{border-radius:2px}.menu-list li button{width:100%;padding:7px 8px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:2px;border:0;background:transparent;color:var(--lcd-ink);font-family:SF Mono,JetBrains Mono,monospace;font-size:.84rem;cursor:pointer;text-align:left}.menu-list li button small{color:rgba(49,53,43,.75);font-size:.72rem}.menu-list li.selected{background:var(--lcd-ink)}.menu-list li.selected button{color:#f7f8ef}.menu-list li.selected button small{color:rgba(247,248,239,.72)}.about-copy{display:grid;grid-gap:10px;gap:10px;padding-top:10px;color:var(--lcd-ink);font-family:SF Mono,JetBrains Mono,monospace;font-size:.8rem;line-height:1.65}.now-playing-hint,.time-row,.track-counter,.track-meta{color:rgba(49,53,43,.86);font-family:SF Mono,JetBrains Mono,monospace}.track-counter{padding-top:10px;font-size:.72rem}.track-title{padding-top:10px;color:var(--lcd-ink);font-family:SF Mono,JetBrains Mono,monospace;font-size:1.1rem;font-weight:700}.track-meta{padding-top:6px;display:grid;grid-gap:2px;gap:2px;font-size:.76rem}.progress-shell{padding-top:18px;cursor:ew-resize}.progress-track{position:relative;height:8px;border:1px solid rgba(49,53,43,.85);border-radius:999px}.progress-fill{height:100%;border-radius:999px;background:var(--lcd-ink)}.progress-thumb{position:absolute;top:50%;width:14px;height:14px;border:2px solid var(--lcd-ink);border-radius:50%;background:#d9ddcd;transform:translate(-50%,-50%)}.time-row{padding-top:8px;display:flex;justify-content:space-between;font-size:.72rem}.now-playing-hint{padding-top:16px;font-size:.72rem;line-height:1.6}.click-wheel{--wheel-size:min(100%,252px);--wheel-lean-x:0deg;--wheel-lean-y:0deg;position:relative;width:var(--wheel-size);aspect-ratio:1;margin:28px auto 0;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.98),rgba(221,227,228,.96) 60%,rgba(198,208,211,.9)),white;box-shadow:inset 0 8px 16px rgba(255,255,255,.78),inset 0 -16px 32px rgba(145,159,165,.22),0 20px 36px rgba(93,103,109,.15);touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:transform .13s cubic-bezier(.2,.8,.2,1),box-shadow .13s cubic-bezier(.2,.8,.2,1);transform:perspective(900px) rotateX(var(--wheel-lean-x)) rotateY(var(--wheel-lean-y)) translateZ(0)}.click-wheel.wheel-pulse{transform:perspective(900px) rotateX(var(--wheel-lean-x)) rotateY(var(--wheel-lean-y)) scale(.994);box-shadow:inset 0 10px 18px rgba(255,255,255,.84),inset 0 -18px 34px rgba(124,137,143,.24),0 18px 28px rgba(93,103,109,.18)}.wheel-button{position:absolute;display:grid;place-items:center;border:0;background:transparent;color:#798088;letter-spacing:.08em;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;transition:transform .12s cubic-bezier(.2,.8,.2,1),color .12s ease,filter .12s ease}.wheel-button.is-pressed{color:#66707a;filter:saturate(.9) brightness(.94)}.wheel-menu{top:4px;left:50%;width:112px;height:72px;transform:translateX(-50%);font-size:.86rem;font-weight:700}.wheel-menu.is-pressed{transform:translateX(-50%) translateY(2px) scale(.985)}.wheel-prev{top:50%;left:4px;width:72px;height:112px;transform:translateY(-50%)}.wheel-prev.is-pressed{transform:translateY(-50%) translateX(2px) scale(.985)}.wheel-next{top:50%;right:4px;width:72px;height:112px;transform:translateY(-50%)}.wheel-next.is-pressed{transform:translateY(-50%) translateX(-2px) scale(.985)}.wheel-play{bottom:4px;left:50%;width:112px;height:72px;transform:translateX(-50%)}.wheel-play.is-pressed{transform:translateX(-50%) translateY(-2px) scale(.985)}.wheel-icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}.wheel-icon-skip{gap:5px}.wheel-icon-skip span{display:block;width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent}.wheel-icon-skip-prev span{border-right:16px solid}.wheel-icon-skip-next span{border-left:16px solid}.wheel-icon-playpause{gap:8px}.wheel-play-triangle{display:block;width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:18px solid}.wheel-pause-bars{display:inline-flex;gap:5px}.wheel-pause-bars span{display:block;width:5px;height:22px;border-radius:2px;background:currentColor}.center-button{position:absolute;inset:29%;border:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(250,250,250,.98),rgba(219,225,227,.96)),#f2f5f5;box-shadow:inset 0 10px 18px rgba(255,255,255,.82),inset 0 -10px 18px rgba(148,158,162,.18);cursor:pointer;z-index:3;transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .12s cubic-bezier(.2,.8,.2,1),filter .12s ease}.center-button.is-pressed{transform:scale(.97);box-shadow:inset 0 7px 14px rgba(255,255,255,.76),inset 0 -7px 14px rgba(122,132,136,.26);filter:brightness(.98)}.center-button:focus-visible,.menu-list li button:focus-visible,.wheel-button:focus-visible{outline:2px solid rgba(215,158,73,.9);outline-offset:2px}@media (max-width:980px){.page-shell{padding-top:12px}}@media (max-width:720px){.page-shell{width:100%;padding:10px 10px 18px;min-height:100svh;place-items:center}.device-stage{width:100%;min-height:100svh;align-items:center}.ipod-device{width:min(calc(100vw - 20px),320px);padding:18px 14px 20px;border-radius:28px}.lcd-screen{height:196px}.click-wheel{--wheel-size:min(100%,214px);margin-top:18px}.wheel-menu{width:104px;height:64px}.wheel-next,.wheel-prev{width:64px;height:104px}.wheel-play{width:104px;height:64px}.wheel-icon-skip span{border-top-width:10px;border-bottom-width:10px}.wheel-icon-skip-prev span{border-right-width:14px}.wheel-icon-skip-next span{border-left-width:14px}.wheel-play-triangle{border-top-width:10px;border-bottom-width:10px;border-left-width:16px}.wheel-pause-bars span{height:20px}}