@font-face{font-family:Departure;src:url('assets/DepartureMono-Regular.woff2') format('woff2');font-display:swap;font-style:normal;font-weight:400}
:root{color-scheme:light;--lcd:#cbd3b3;--ink:#253a29;--faint:rgba(37,58,41,.13);--line:rgba(37,58,41,.3);font-family:Departure,ui-monospace,monospace;color:var(--ink);background:var(--lcd);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit;color:inherit}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;border:0;border-radius:0;background:none}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:5px}svg{display:block;width:24px;height:24px;fill:currentColor;shape-rendering:crispEdges}button svg{pointer-events:none;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}
/* Glass illumination and static grain sit beneath the ink. The fine perpendicular
   channels above it divide the whole screen into tiny square LCD cells. */
.lcd-surface{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 40% 30%,rgba(242,244,215,.14),transparent 75%),linear-gradient(115deg,rgba(43,62,30,.055),transparent 35%,rgba(255,255,227,.07) 65%,rgba(43,62,30,.035))}
.lcd-surface:before{content:"";position:absolute;inset:0;opacity:.45;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23657446' opacity='.14' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
body:after{content:"";position:fixed;z-index:5;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(233,239,207,.15) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(233,239,207,.15) 0 1px,transparent 1px 3px);opacity:.68}
.app{position:relative;isolation:isolate;width:100%;max-width:560px;min-height:100svh;min-height:100dvh;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden;text-shadow:1px 1px 0 rgba(37,58,41,.04)}
.topline{display:flex;align-items:center;gap:14px;min-height:44px;margin-bottom:28px}.brand{font-size:16.5px;letter-spacing:2px}.icon-button{display:grid;place-items:center;width:44px;height:44px;padding:8px}.save{margin-left:auto}.save svg{width:29px;height:29px}.back{margin-left:-8px}.view-label{font-size:14px;letter-spacing:1px}.focus-count{margin-left:auto;font-size:12px;white-space:nowrap}.pages{display:grid;flex:1;min-height:0}.page{grid-area:1/1;min-width:0;transition:transform 340ms cubic-bezier(.22,.8,.24,1),opacity 280ms,visibility 340ms;will-change:transform}.playlist-page{transform:translateX(0);opacity:1}.playing-page{display:flex;flex-direction:column;transform:translateX(115%);opacity:0;pointer-events:none;visibility:hidden}.app[data-view=playing] .playlist-page{transform:translateX(-115%);opacity:0;pointer-events:none;visibility:hidden}.app[data-view=playing] .playing-page{transform:translateX(0);opacity:1;pointer-events:auto;visibility:visible}
h1,h2,p{font-weight:400;margin:0}h1{font-size:clamp(27px,7.8vw,44px);line-height:1.3;letter-spacing:-1.8px;white-space:nowrap}.eyebrow{font-size:11px;letter-spacing:1.5px;margin-top:8px}.spectrum{position:relative;width:100%;overflow:hidden}.spectrum canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.spectrum-small{height:80px;margin:26px 0 24px}.spectrum-label{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:1px;background:rgba(203,211,179,.3)}.tracks{margin:0;padding:0;list-style:none}.track{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:66px;padding:12px 0;text-align:left;border-bottom:1px solid var(--line)}.track.active{color:var(--lcd);background:var(--ink);border-color:var(--ink);box-shadow:-10px 0 var(--ink),10px 0 var(--ink)}.track-number{font-size:16.5px;display:flex;align-items:center;justify-content:flex-start}.track-number svg{width:23px;height:23px}.track-info{min-width:0}.track-name{display:block;font-size:16.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-artist{display:block;font-size:11px;line-height:1.45;margin-top:3px;opacity:.86;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-end{display:flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}.track-saved{width:12px;height:12px}
.player{padding-top:40px}.now-title{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;min-height:54px;padding:0 0 12px}.current-title{font-size:24px;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.current-index{font-size:11px;letter-spacing:1.4px}.scrubber{margin-top:6px}input[type=range]{display:block;width:100%;height:30px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;--progress:0%}input[type=range]::-webkit-slider-runnable-track{height:5px;background:linear-gradient(to right,var(--ink) var(--progress),var(--faint) var(--progress))}input[type=range]::-moz-range-track{height:5px;background:var(--faint)}input[type=range]::-moz-range-progress{height:5px;background:var(--ink)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;margin-top:-2.5px;border:0;border-radius:0;background:var(--ink)}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:0;background:var(--ink)}.times{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.5px;margin-top:0}.transport{display:flex;justify-content:space-evenly;align-items:center;margin-top:14px}.transport-button{display:grid;place-items:center;width:64px;height:64px;padding:12px}.transport-button svg{width:34px;height:34px}.play-button svg{width:42px;height:42px}.transport-button:active,.icon-button:active{transform:translateY(1px)}.save-status{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;margin:8px auto 0;padding:5px 8px;font-size:11px;letter-spacing:1px}.save-status svg{width:17px;height:17px}.message{max-width:420px;min-height:0;text-align:center;font-size:11px;line-height:1.6;margin:0 auto;color:var(--ink)}.message:not(:empty){margin-top:5px;margin-bottom:6px}.spectrum-large{height:clamp(180px,34svh,370px);margin:60px 0 36px}.focus-track{margin:auto 0 15px}.focus-track h2{font-size:clamp(26px,8.5vw,44px);line-height:1.25;overflow-wrap:anywhere;letter-spacing:-1px}.focus-track p{font-size:16.5px;margin-top:9px}.app[data-view=playing] .now-title{display:none}.app[data-view=playing] .player{padding-top:24px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.no-script{margin:40px}
@media(min-width:600px){.app{padding-left:34px;padding-right:34px}.topline{margin-bottom:38px}.spectrum-small{height:100px;margin:30px 0}.track{min-height:76px}.track-name{font-size:19px}.track-artist{font-size:12px}.player{padding-top:48px}.current-title{font-size:28px}}
@media(max-height:740px) and (max-width:599px){.topline{margin-bottom:14px}.spectrum-small{height:58px;margin:18px 0}.track{min-height:59px;padding:9px 0}.player{padding-top:24px}.spectrum-large{margin:22px 0;height:30svh}}
@media(max-width:360px){.app{padding-left:16px;padding-right:16px}.track{gap:8px;grid-template-columns:25px minmax(0,1fr) auto}.track-name{font-size:14px}.track-end{font-size:12px}.track-artist{font-size:10px}.view-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.page{transition:none}.transport-button:active,.icon-button:active{transform:none}}
/* Keep the transport on screen. Longer playlists scroll inside their own list. */
.app{height:100svh;height:100dvh;min-height:560px}
.topline{flex-shrink:0;margin-bottom:20px}
.page{min-height:0}
.playlist-page{display:flex;flex-direction:column}
.playlist-heading,.spectrum-small{flex-shrink:0}
.spectrum-small{height:64px;margin:20px 0 20px}
.tracks{min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent;margin:0 -10px;padding:0 10px 1px}
.track{min-height:64px}
.player{flex-shrink:0;padding-top:24px}
.transport{margin-top:8px}
.transport-button{height:56px}
.save-status{margin-top:4px}
@media(max-height:740px) and (max-width:599px){.topline{margin-bottom:12px}.spectrum-small{height:48px;margin:16px 0}.track{min-height:59px}.player{padding-top:20px}.now-title{min-height:50px}.transport{margin-top:4px}.transport-button{height:50px}.save-status{margin-top:2px}}