*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#2b3032;background:#e8e9e8;font-synthesis:none}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 35%,#fafafa 0,#eceeed 44%,#dedfdd 100%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #158fdb;outline-offset:3px}header{height:100px;padding:30px 5.1%;display:flex;justify-content:space-between;align-items:center}.wordmark{font-size:32px;letter-spacing:-2px;font-weight:900;text-decoration:none;color:#313636}.wordmark span{font-size:12px;vertical-align:top;display:inline-block;margin:5px 0 0 5px;letter-spacing:0}.edition,footer,.instructions>span{font-family:monospace;font-size:12px;letter-spacing:1.7px;color:#737979}main{display:flex;flex-direction:column;align-items:center;padding:25px 16px 40px}.player-wrap{position:relative;width:414px;max-width:100%;isolation:isolate}.device{position:relative;border-radius:38px;background:linear-gradient(105deg,#b9bec1 0%,#e3e6e6 4%,#ccd1d2 18%,#e4e7e6 47%,#c5cbcd 87%,#a7afb3 99%);padding:28px 25px 22px;box-shadow:inset 0 2px 3px #fff,inset 2px 0 4px #fff9,inset -3px -4px 7px #6b747a88,0 2px 2px #7a8083,0 20px 35px #343e4324;user-select:none}.device:before{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.65' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.hold{position:absolute;top:-2px;right:62px;width:37px;height:4px;border-radius:3px;background:#8e979b}.hold span{display:block;width:21px;height:4px;background:#c5c9ca;box-shadow:inset 0 1px #fff}.bezel{position:relative;border-radius:16px;padding:12px;background:linear-gradient(130deg,#333839,#141719 55%,#333637);box-shadow:0 1px 2px #fff,inset 0 1px 2px #62686b}.screen{background:#fff;height:252px;overflow:hidden;position:relative;border:1px solid #888;font-family:Arial,Helvetica,sans-serif;color:#121212;box-shadow:inset 0 0 6px #0003;font-weight:600}.status{height:27px;background:linear-gradient(#fff,#e2e4e5 48%,#bfc3c5);border-bottom:1px solid #959b9e;display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:15px;position:relative;z-index:5}.status-right{display:flex;align-items:center;gap:9px}.status-right span{color:#3585b7;font-size:12px}.battery{width:24px;height:11px;border:1px solid #8d9695;border-radius:2px;padding:1px;position:relative;background:#eee}.battery:after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:5px;background:#89928e}.battery b{display:block;height:7px;width:100%;background:linear-gradient(#b3e975,#53ad27)}.home-content{display:flex;height:calc(100% - 27px)}.menu-list{width:53%;background:#fff;z-index:2;box-shadow:4px 0 10px #0002;padding-top:5px}.menu-row{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;text-align:left;font-size:18px;font-weight:700;padding:9px 8px;color:#151515}.menu-row.active{color:#fff;background:linear-gradient(#61c2f4,#188adc 52%,#1685cf);box-shadow:inset 0 1px #b8ebff,inset 0 -1px #0b70c0}.chevron{font-size:25px;font-weight:400;line-height:15px}.menu-art{width:47%;position:relative;overflow:hidden;background:#161d21}.art{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;text-align:left;padding:15px;color:white;background:#222;position:relative}.art small{font:10px monospace;letter-spacing:1px}.art strong{font-size:34px;line-height:.92;letter-spacing:-2px;font-weight:900}.art em{font:11px monospace;letter-spacing:2px;font-style:normal}.art-0{background:radial-gradient(ellipse at 85% 15%,#bdbdad 0,transparent 45%),linear-gradient(160deg,#2f4145,#152322 60%,#92aab0)}.art-1{background:linear-gradient(145deg,#371416,#b94424 48%,#f09944)}.art-2{background:radial-gradient(ellipse at 25% 0,#d5a3d1,transparent 58%),linear-gradient(145deg,#232a5d,#502c74 70%,#a74975)}.menu-art .art{width:220px;height:225px;transform:rotate(-8deg) scale(1.2);transform-origin:40% 50%;padding-top:25px}.menu-art .art strong{font-size:53px;width:200px}.menu-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0002,transparent 30%,#fff1)}.wheel{position:relative;margin:26px auto 0;width:224px;height:224px;border-radius:50%;background:linear-gradient(140deg,#fff,#f5f6f5);box-shadow:0 1px 2px #89919555,inset 0 1px 2px #fff;touch-action:none}.wheel button{position:absolute;border:0;background:none;color:#929b9e;text-shadow:0 1px #fff;font-weight:bold;padding:0}.wheel-menu{top:15px;left:75px;width:74px;height:35px;font-size:15px;letter-spacing:1px}.wheel-prev,.wheel-next{top:94px;width:49px;height:35px;font-size:17px;letter-spacing:-5px}.wheel-prev{left:9px}.wheel-next{right:12px}.wheel-play{bottom:13px;left:78px;width:68px;height:35px;font-size:20px}.wheel .wheel-center{width:93px;height:93px;top:65.5px;left:65.5px;border-radius:50%;background:linear-gradient(125deg,#bcc3c6,#d4d9da);box-shadow:inset 0 1px 3px #8c969966,0 1px 2px #fff}.wheel-center:active{filter:brightness(.95)}.device-brand{font-size:12px;text-align:center;margin-top:14px;color:#879093;letter-spacing:1px;text-shadow:0 1px #fff8}.device-shadow{position:absolute;bottom:-19px;width:100%;height:30px;background:#4e575642;filter:blur(16px);border-radius:50%;z-index:-1}.instructions{margin-top:42px;text-align:center}.instructions>span{font-size:11px;letter-spacing:2.3px;color:#5c6566}.instructions p{font-size:14px;margin:12px 0 18px;color:#7d8585}.key-hint{display:flex;justify-content:center;gap:7px;align-items:center;font-size:12px;color:#858d8d}kbd{font:12px monospace;background:#ffffff66;border:1px solid #cdd1cf;border-radius:4px;min-width:20px;height:20px;display:inline-grid;place-items:center}i{font-style:normal;margin:0 4px}footer{display:flex;justify-content:space-between;padding:15px 5.1% 25px;font-size:10px;letter-spacing:1px}.coverflow{height:171px;position:relative;perspective:700px;background:linear-gradient(#fff 65%,#e4e6e8);overflow:hidden}.cover{position:absolute;width:133px;height:133px;top:14px;left:calc(50% - 66.5px);padding:0;border:0;transition:transform .25s,opacity .25s;box-shadow:0 5px 8px #0003;-webkit-box-reflect:below 2px linear-gradient(transparent 55%,#fff3)}.cover .art{padding:12px}.cover .art strong{font-size:30px}.cover .art small,.cover .art em{font-size:9px}.cover-caption{text-align:center;font-size:15px;background:#fff;height:52px;position:relative;padding:4px}.cover-caption span{display:block;font-size:12px;color:#666;margin-top:3px}.detail{padding:14px;display:flex;gap:14px;height:156px}.detail .art{width:122px;min-width:122px;height:122px;padding:11px}.detail .art strong{font-size:28px}.detail-copy{display:flex;flex-direction:column;justify-content:center;gap:8px;font-size:16px}.detail-copy small{font-size:12px;color:#727272;font-weight:400}.empty-audio{font-size:12px;text-align:center;padding:8px;background:#f3f4f4;border-top:1px solid #ddd;color:#666;font-weight:400}.about{padding:18px;font-weight:400}.about h1{font-size:35px;letter-spacing:-2px;margin:0 0 10px}.about p{font-size:15px;line-height:1.5;margin:8px 0}.about small{font-size:12px;color:#727272}.visual{height:225px;position:relative}.visual .art{padding:18px 25px}.visual .art strong{font-size:52px;width:210px}.visual-label{position:absolute;bottom:10px;right:10px;padding:4px 6px;font:10px monospace;background:#0007;color:white}.notice{position:absolute;bottom:8px;left:8px;right:8px;padding:10px;background:#1c2224ed;color:#fff;font-size:12px;text-align:center;border-radius:4px;z-index:10;font-weight:400}@media(min-height:850px){main{padding-top:50px}footer{position:fixed;bottom:0;width:100%}}@media(max-width:500px){header{height:82px;padding:23px}.edition{font-size:9px;letter-spacing:1px;max-width:135px;text-align:right;line-height:1.6}.wordmark{font-size:29px}main{padding-top:16px}.player-wrap{width:365px}.device{padding:23px 20px 18px;border-radius:32px}.bezel{padding:10px}.screen{height:235px}.wheel{margin-top:22px;width:208px;height:208px}.wheel .wheel-center{top:59px;left:59px;width:90px;height:90px}.wheel-menu{left:67px;top:12px}.wheel-prev,.wheel-next{top:86px}.wheel-play{left:70px;bottom:10px}.menu-row{font-size:17px;padding:9px 7px}.coverflow{height:156px}.cover{width:121px;height:121px;left:calc(50% - 60.5px);top:10px}.cover .art strong{font-size:27px}.detail{height:145px;padding:11px;gap:10px}.detail .art{width:115px;min-width:115px;height:115px}.visual{height:208px}.instructions{margin-top:34px}footer{position:static;font-size:9px;padding:12px 23px 24px}footer span:last-child{display:none}.key-hint{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Scale the complete player, including its screen and click wheel. */
.player-wrap{zoom:var(--player-zoom,1);max-width:none;flex-shrink:0}
footer{position:static}

/* Reserve a viewport-sized stage so the whole device remains visible. */
body{height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.site-header{height:64px;padding:12px 5.1%}
main{min-height:0;padding:8px 16px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;align-items:stretch}
.player-stage{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}
.instructions{margin:0}
.instructions>span,.instructions p{display:none}
.key-hint{min-height:20px}
footer{position:static;padding:6px 5.1% 10px;font-size:10px}
@media(max-height:550px){.site-header{height:52px;padding-top:6px;padding-bottom:6px}footer{display:none}main{gap:6px;padding:4px 12px}.instructions{display:none}}

.release-art{display:block;width:100%;height:100%;object-fit:cover}
.menu-art .release-art{width:220px;height:225px;max-width:none;object-fit:cover;transform:rotate(-8deg) scale(1.2);transform-origin:40% 50%}
.cover-caption{font-size:13px;padding:3px 8px;line-height:16px;height:52px;overflow:hidden}
.cover-caption span{font-size:11px;margin-top:1px}
.detail{height:116px;padding:9px;gap:10px;align-items:center}
.detail>.release-art{width:98px;height:98px;flex-shrink:0}
.detail-copy{min-width:0;gap:4px;font-size:13px}
.detail-copy strong{font-size:13px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.detail-copy a{font-size:11px;color:#1677b8;text-decoration:none}
.soundcloud-player{position:absolute;bottom:13px;left:13px;right:13px;height:94px;z-index:8;visibility:hidden;pointer-events:none;background:white}
.soundcloud-player.visible{visibility:visible;pointer-events:auto}
.soundcloud-player iframe{width:100%;height:100%;border:0;display:block}
.visual .release-art{object-fit:contain;background:#161719}
@media(max-width:500px){.soundcloud-player{bottom:11px;left:11px;right:11px;height:87px}.detail{height:116px;padding:9px;gap:8px}.detail>.release-art{width:90px;height:90px}.detail-copy strong{font-size:12px}}

.missing-art{width:100%;height:100%;background:#292b32;color:white;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12px;font-size:15px}.missing-art small{font-size:10px;margin-top:8px;color:#bbc0ca}.detail>.missing-art{width:98px;height:98px;flex-shrink:0}

.tiktok-profile{height:calc(100% - 27px);display:flex;flex-direction:column;align-items:center;justify-content:center;background:#111116;color:white;text-align:center;gap:7px;padding:10px}
.tiktok-note{font-size:40px;line-height:1;text-shadow:-2px 0 #25f4ee,2px 1px #fe2c55}
.tiktok-profile h1{margin:0;font-size:25px;letter-spacing:-1px}
.tiktok-profile p{margin:0;font-size:14px;color:#d4d4dc}
.tiktok-profile a{display:block;margin-top:4px;padding:9px 15px;border-radius:4px;background:#fff;color:#141419;font-size:14px;font-weight:700;text-decoration:none}
.tiktok-profile a:hover{background:#dcfdfb}
.tiktok-profile small{font-size:10px;color:#a5a5b0;font-weight:400}

.video-cover{width:94px;height:153px;left:calc(50% - 47px);top:5px;background:#15151b;border-radius:2px;overflow:hidden;-webkit-box-reflect:none}
.video-thumbnail{display:block;width:100%;height:100%;object-fit:cover}
.video-play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:32px;height:32px;padding-left:3px;border-radius:50%;background:#0009;color:#fff;font-size:15px;box-shadow:0 0 0 1px #fff8}
.video-caption strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-placeholder{display:flex;height:100%;padding:8px;align-items:center;justify-content:center;flex-direction:column;color:#fff;font-size:14px;background:#30313b}
.video-placeholder small{font-size:10px;margin-top:8px;font-weight:400}
.video-dialog{padding:14px;border:1px solid #53535b;border-radius:12px;background:#15151b;color:#fff;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 20px 100px #0008;font-family:Arial,Helvetica,sans-serif}
.video-dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}
.video-dialog-header{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:10px}
.video-dialog h2{margin:0;font-size:15px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.video-dialog button{border:0;border-radius:5px;background:#303039;color:white;padding:9px 12px;font-size:14px}
.video-dialog button:hover{background:#444450}.video-dialog button:disabled{opacity:.35;cursor:default}
.video-close{flex-shrink:0}.video-frame{height:min(65dvh,640px);background:black;border-radius:6px;overflow:hidden}
.video-frame iframe{display:block;border:0;width:100%;height:100%}
.video-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 10px}
.video-count{font-size:12px;color:#bfc0ca;white-space:nowrap}
.video-source{display:block;text-align:center;font-size:12px;color:#c7c7d5;text-decoration:none}
.video-error{font-size:12px;line-height:1.4;color:#ffd3b1;margin:8px 0}
@media(max-width:500px){.video-cover{width:84px;height:139px;left:calc(50% - 42px);top:5px}.video-dialog{padding:10px}.video-frame{height:65dvh}}

.social-card{height:100%;width:100%;padding:13px 9px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;color:#fff;overflow:hidden}
.social-card small{font:10px monospace;letter-spacing:2px;opacity:.85}
.social-card strong{font-size:23px;letter-spacing:-1px;line-height:1.1}
.social-card span{font-size:10px;font-weight:400}
.social-youtube{background:#df1022}
.social-tiktok{background:#14141a}.social-tiktok strong{text-shadow:-1px 0 #25f4ee,1px 1px #fe2c55}
.social-soundcloud{background:linear-gradient(#ff8e34,#f34c07)}.social-soundcloud strong{font-size:19px;letter-spacing:-.8px}
.social-instagram{background:linear-gradient(145deg,#6928bc,#ca247c 52%,#f7943e)}
.menu-art .social-card{padding:24px 6px;justify-content:center;gap:20px}
@media(max-width:500px){.social-card strong{font-size:21px}.social-soundcloud strong{font-size:18px}.social-card span{font-size:9px}}

#prev,#next{touch-action:none;-webkit-touch-callout:none;user-select:none}

.player-stage{position:relative}.start-listening{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:10;border:1px solid #aaa;border-radius:20px;padding:9px 18px;background:#fff;color:#333;font:600 13px Arial,sans-serif;box-shadow:0 2px 10px #0002;cursor:pointer}.start-listening[hidden]{display:none}