*{box-sizing:border-box}body{margin:0;background:#faf9f6;color:#292a26;font-family:Arial,sans-serif}button{font:inherit;cursor:pointer}header{height:100px;margin:0 6%;display:flex;align-items:center;justify-content:space-between}header b{font-size:25px;letter-spacing:-1px}small{font-size:12px;color:#929189;font-weight:400;letter-spacing:.4px;margin-left:15px}header button{background:transparent;border:1px solid #dad9d2;border-radius:25px;padding:11px 20px;font-size:12px}main{max-width:1120px;margin:35px auto 80px;display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:center;padding:0 45px}.stage{padding-bottom:25px}.device{position:relative;width:380px;height:630px;filter:drop-shadow(8px 20px 16px #0002);user-select:none}.device svg{position:absolute;width:100%;height:100%}.lcd{position:absolute;left:70px;top:42px;width:240px;height:194px;background:linear-gradient(125deg,#b1b3a2,#c6c8b6 75%,#afb2a0);box-shadow:inset 0 0 9px 3px #45463880;color:#383c30;font:bold 17px/1.35 'Courier New',monospace;overflow:hidden;text-shadow:.5px 0 #45483c}.lcd-head{height:29px;margin:0 5px;border-bottom:2px solid #565a4b;display:flex;justify-content:space-between;align-items:center;padding:0 5px}.lcd-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#indicator{font-size:12px;min-width:15px}.lcd-head>span:last-child{font-size:25px}#screen{height:165px;padding:3px 5px;overflow:auto;scrollbar-width:none}.row{display:flex;justify-content:space-between;width:100%;font:inherit;border:0;background:transparent;color:inherit;line-height:23px;padding:2px 8px;text-align:left}.row span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.row.active{background:#494d40;color:#c9cbb9;text-shadow:none}.empty{padding:20px 8px;text-align:center;font-size:14px;line-height:1.5}.hw{position:absolute;border:0;background:transparent;color:#9b9d96;font-weight:bold;z-index:3;padding:0}.hw:hover{color:#64685e}.hw:focus-visible,#wheel:focus-visible{outline:2px solid #777}.menu{left:147px;top:280px;width:86px;height:42px;font-size:19px}.prev{left:30px;top:410px;width:45px;height:45px;font-size:13px}.next{right:30px;top:410px;width:45px;height:45px;font-size:13px}.play{left:158px;top:554px;width:64px;height:36px;font-size:17px}.select{left:146px;top:388px;width:88px;height:88px;border-radius:50%}#wheel{position:absolute;left:66px;top:308px;width:248px;height:248px;border-radius:50%;touch-action:none;cursor:grab}#wheel:active{cursor:grabbing}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:700;color:#8c8c81;margin-bottom:24px}h1{font:400 64px/1.08 Georgia,serif;letter-spacing:-3px;margin:0 0 27px}h1 em{color:#8d8f81;font-weight:400}p{font-size:16px;line-height:1.7;color:#85867d}.primary{display:inline-flex;align-items:center;justify-content:center;gap:35px;background:#30322b;color:white;padding:16px 24px;border:0;border-radius:6px;font-size:13px;cursor:pointer}.intro>.primary{margin-top:16px}.hint{font-size:12px;color:#92938a;line-height:1.7;margin-top:47px}.keys{font-size:10px;color:#a6a79c;margin-top:23px;white-space:nowrap}kbd{font:10px Arial;border:1px solid #dddcd5;padding:3px 5px;border-radius:3px}footer{border-top:1px solid #e5e4dd;margin:0 6%;padding:25px 0;display:flex;justify-content:space-between;font-size:11px;color:#999b90}footer button{border:0;background:none;color:inherit;font-size:11px}dialog{background:#faf9f6;border:1px solid #ddd;border-radius:18px;padding:40px;width:calc(100% - 30px);max-width:570px;box-shadow:0 30px 100px #0003}dialog::backdrop{background:#24271e66;backdrop-filter:blur(5px)}h2{font:32px Georgia;margin:0}.close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:26px;color:#888}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0}.actions label:not(.primary){border:1px solid #ccc;padding:15px;border-radius:6px;font-size:12px;cursor:pointer}.small{font-size:12px}code{font-size:11px}details{font-size:12px;color:#777}pre{background:#eeede6;padding:15px;overflow:auto;font-size:11px}details a{color:inherit}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#30322b;color:#fff;padding:14px 22px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;max-width:90vw}#toast.visible{opacity:1}.now{text-align:center;padding:8px 6px;font-size:13px}.song{font-size:17px;margin:8px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress{width:100%;accent-color:#464b3b;height:10px;margin-top:14px}.times{display:flex;justify-content:space-between;font-size:11px}@media(max-width:800px){header{height:75px}small{display:none}main{grid-template-columns:1fr;gap:30px;margin:20px auto 40px;padding:0 16px}.stage{justify-self:center}.intro{text-align:center;grid-row:1}.eyebrow{margin-bottom:15px}h1{font-size:43px;letter-spacing:-2px;margin-bottom:15px}.intro p,.hint,.keys{display:none}.intro>.primary{margin-top:0;padding:12px 20px}.device{zoom:.85}footer button{max-width:180px;text-align:right}}@media(max-width:350px){.device{zoom:.75}}

/* Chicago face and metrics used by Apple's monochrome iPod simulator. */
@font-face{font-family:ChicagoKare;src:url('assets/fonts/ChicagoKare.woff2') format('woff2');font-style:normal;font-weight:400;font-display:block}
@font-face{font-family:iPodKrungthep;src:local('Krungthep');size-adjust:79.5%;ascent-override:94.1%;descent-override:27.7%}
.lcd{font-family:ChicagoKare,iPodKrungthep,system-ui,sans-serif;font-size:24px;font-weight:400;line-height:1;text-shadow:none;font-synthesis:none;color:#484647}
.lcd b{font-weight:400}.lcd-head{height:32px}.row{line-height:27px;padding:0 8px}.row.active{background:#484647;color:#c9cbb9}.row>span:last-child{font-family:Arial,sans-serif;font-size:27px;line-height:27px;font-weight:400}
.now{font-size:18px;line-height:1.1}.song{font-size:23px}.artist{font-size:18px}.times{font-size:16px}.empty{font-size:19px;line-height:1.2}.hw{font-family:Arial,sans-serif}.menu{font-size:19px}

/* Mechanical wheel: reference geometry, curved type and SVG transport marks. */
.click-wheel{position:relative;top:30px;margin:0 auto;width:350px;height:350px;border-radius:50%;background-color:var(--control-circle-bgcolor, #f8f8f8);box-shadow:inset -16px 29px 11px 15px var(--control-circle-box-shadow-1, #f4f4f4), inset 8px -7px 34px -15px var(--control-circle-box-shadow-2, rgba(137, 137, 137, 0.8)), 0 0 0 2px var(--control-circle-box-shadow-3, rgba(135, 135, 135, 0.3803921569)), -4px 6px 10px 0 var(--control-circle-box-shadow-4, rgba(131, 131, 131, 0.231372549)), 0 0 1px 3px var(--control-circle-box-shadow-5, rgba(72, 72, 72, 0.1019607843)), 0 -1px 1px 2px var(--control-circle-box-shadow-6, rgba(168, 168, 168, 0.6705882353)), 0 0 1px 3px var(--control-circle-box-shadow-7, #e9e9e8), -2px 3px 1px 2px var(--control-circle-box-shadow-8, #d7d7d7), -1px 1px 0 3px var(--control-circle-box-shadow-9, rgba(229, 229, 229, 0.4705882353));cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}@media(prefers-color-scheme: dark){.click-wheel{--control-circle-bgcolor:#ededed;--control-circle-box-shadow-1:#e9e9e9;--control-circle-box-shadow-2:#1b1b1b87;--control-circle-box-shadow-3:#00000017;--control-circle-box-shadow-4:#0000001f;--control-circle-box-shadow-5:#0000001f;--control-circle-box-shadow-6:#ccccccf7;--control-circle-box-shadow-7:#70707008;--control-circle-box-shadow-8:#d6d6d6;--control-circle-box-shadow-9:#dadada78}}.click-wheel::after{content:"";position:absolute;display:block;top:15px;left:20.5px;width:318px;height:317px;padding:4px;border-radius:50%;background-image:conic-gradient(from 345deg at center, transparent 0, transparent 16%, rgb(255, 255, 255) 22%, transparent 30%, transparent 67%, rgb(255, 255, 255) 72%, transparent 80%);mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite:exclude;filter:blur(12px);z-index:1;pointer-events:none}.click-wheel.dragging .wheel-button,.click-wheel.dragging .select-button{pointer-events:none}.wheel-button{position:absolute;inset:0;display:flex;border-radius:50%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.wheel-button svg{fill:var(--wheel-icon-fill, #a3a3a3)}@media(prefers-contrast: more){.wheel-button{--wheel-icon-fill:#3a3a3a}}.wheel-button:active svg{opacity:0.99;scale:0.97}.menu-button{justify-content:center;align-items:flex-start;padding-top:9.5px;clip-path:polygon(50% 50%, 0% 0%, 100% 0%)}.menu-button::after{content:"";display:block;position:absolute;top:2px;left:50%;width:108px;height:34px;background:radial-gradient(ellipse at 50% -189%, rgba(255, 255, 255, 0.9) 57%, rgba(255, 255, 255, 0.07) 75.6%);transform:translate(-50%);border-radius:35%;opacity:0.25}.menu-button svg{width:136px;height:auto}.menu-button text{font-family:Arial, sans-serif;font-weight:bold;font-size:55px;fill:var(--wheel-menu-text-fill, #898989)}@media(prefers-contrast: more){.menu-button{--wheel-menu-text-fill:#3a3a3a}}.menu-button path{fill:transparent}.menu-button:active svg{scale:0.99}.back-button{justify-content:flex-start;align-items:center;padding-left:6px;clip-path:polygon(50% 50%, 0% 0%, 0% 100%)}.back-button svg{rotate:180deg}.forward-button{justify-content:flex-end;align-items:center;padding-right:6px;clip-path:polygon(50% 50%, 100% 0%, 100% 100%)}.playpause-button{justify-content:center;align-items:flex-end;padding-bottom:12px;clip-path:polygon(50% 50%, 0% 100%, 100% 100%)}.wheel-dividers{position:absolute;inset:0;pointer-events:none;border-radius:50%;outline:var(--wheel-outline, none)}@media(prefers-contrast: more){.wheel-dividers{--wheel-outline:2px solid #3a3a3a}}.wheel-dividers::before,.wheel-dividers::after{position:absolute;top:0;width:0;height:100%;content:"";border:1px solid var(--wheel-divider-color, #888)}@media(prefers-contrast: more){.wheel-dividers::before,.wheel-dividers::after{--wheel-divider-color:#3a3a3a}}.wheel-dividers::before{left:49.7%;transform:rotate(135deg)}.wheel-dividers::after{left:50%;transform:rotate(45deg)}.scroll-wheel{position:absolute;top:50%;left:50%;width:var(--scroll-wheel-pct);height:var(--scroll-wheel-pct);transform:translate(-50%, -50%);background-image:var(--wheel-noise-texture), radial-gradient(circle at 130% -100%, var(--clickwheel-bgcolor-1, #eaeaea), var(--clickwheel-bgcolor-2, #f6f6f6));background-size:30%;border:2px solid #7e7e7e;border-radius:50%;box-shadow:inset 0 0 0 2px var(--clickwheel-box-shadow-1, rgba(249, 249, 249, 0.2705882353)), 4px -5px 18px 0 var(--clickwheel-box-shadow-2, rgba(122, 122, 122, 0.6)), 0 -1px 4px 2px var(--clickwheel-box-shadow-3, rgba(168, 168, 168, 0.6705882353));cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform 0.1s ease-out;z-index:1}.scroll-wheel:focus{outline:none}@media(prefers-color-scheme: dark){.scroll-wheel{--clickwheel-bgcolor-1:#f1eeee;--clickwheel-bgcolor-2:#e4e4e4;--clickwheel-box-shadow-1:#c1bcbc45;--clickwheel-box-shadow-2:#b0aeae99;--clickwheel-box-shadow-3:#9b9b9bab}}.select-button{position:absolute;top:50%;left:50%;width:var(--select-button-pct);height:var(--select-button-pct);transform:translate(-50%, -50%) rotate(35deg);background:radial-gradient(ellipse closest-side at 50% 30%, var(--center-button-background-1, rgba(255, 255, 255, 0.2)) 0%, var(--center-button-background-2, rgba(255, 255, 255, 0.2)) 72%, transparent 80.6%), radial-gradient(farthest-side at -9% 209%, var(--center-button-background-3, rgba(22, 22, 22, 0.1882352941)) 0%, var(--center-button-background-4, rgba(250, 250, 250, 0.93)));border:2px solid #9f9f9f;border-radius:50%;touch-action:manipulation;transition:transform 0.1s ease-out, box-shadow 0.1s ease-out;-webkit-tap-highlight-color:transparent;z-index:1}@media(prefers-color-scheme: dark){.select-button{--center-button-background-1:#ecebeb24;--center-button-background-2:#ecebeb24;--center-button-background-3:#46454561;--center-button-background-4:#f2f2f2d9}}.select-button:active{transform:translate(-50%, -50%) rotate(35deg) scale(0.98);box-shadow:0 0 1px 1px #909090}
.device>svg{pointer-events:none}.device .click-wheel{position:absolute;left:30px;top:272px;margin:0;transform:scale(.9142857);transform-origin:top left;--scroll-wheel-pct:78%;--select-button-pct:28%;--wheel-noise-texture:url('assets/wheel-texture.png')}.device .click-wheel svg{position:static;width:auto;height:auto;pointer-events:none}.device .menu-button svg{width:136px;height:51px}.device .wheel-button{padding:0;background:transparent;border:0}.device .menu-button{padding-top:9.5px}.device .back-button{padding-left:6px}.device .forward-button{padding-right:6px}.device .playpause-button{padding-bottom:12px}.device #wheel{left:50%;top:50%;width:78%;height:78%;z-index:2}.device #select{z-index:3}.device .wheel-button:focus-visible{outline:2px solid #777;outline-offset:-6px}.device #wheel:focus-visible{outline:2px solid #777;outline-offset:4px}.device .battery-icon{position:static;width:30px;height:15px;flex-shrink:0}.lcd{background:linear-gradient(135deg,#a5a59b,#d6d5d0);color:#484647}.lcd .row.active{color:#c8c7c1}.device{filter:drop-shadow(2px 5px 3px #00000010)}.device>svg{border-radius:37px;-webkit-box-reflect:below 4px linear-gradient(transparent 72%,#00000015)}.stage{padding-bottom:34px}.device .select-button:active{transform:translate(-50%,-50%) rotate(35deg) scale(.97)}