@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/share-tech-mono.ttf') format('truetype')}
:root{color-scheme:dark;--background:#03160c;--foreground:#52ffa1;--green:#52ffa1;--muted:#0d3020;--muted-foreground:#32bd72;--primary:#52ffa1;--primary-foreground:#032014;--accent:#123f27;--accent-foreground:#52ffa1;--border:#2c9c5d;--ring:#52ffa1;--radius:0;--font-mono:'Share Tech Mono',monospace}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{height:100dvh;display:grid;place-items:center;background:#050c08;color:var(--green);font-family:'Share Tech Mono','Lucida Console',monospace;font-size:16px;font-weight:400;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}button{font:inherit;touch-action:manipulation}.pipboy{width:min(100%,620px);height:100%;max-height:1040px;min-height:0;padding:5px;border:1px solid #335c3b;border-radius:30px;background:#17291b;box-shadow:inset 0 0 0 2px #08110c,0 0 40px #0008}.crt{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;border-radius:25px;padding:clamp(16px,4vw,26px);background:radial-gradient(ellipse at 50% 20%,#0b3521,#03150c 80%);box-shadow:inset 0 0 35px #000b;text-shadow:0 0 5px #52ffa140}.crt:before,.crt:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:10}.crt:after{background-image:linear-gradient(to right,transparent 75%,#001a0c55 75%),linear-gradient(to bottom,transparent 63%,#0007 63%);background-size:calc(100% / 800) calc(100% / 600);opacity:.5;animation:flicker 5s steps(1,end) infinite}.crt:before{background:linear-gradient(transparent 35%,#a6ffc80b 49%,transparent 61%);background-size:100% 230%;box-shadow:inset 0 0 28px #0007;animation:sweep 11s linear infinite}@keyframes flicker{0%,100%{opacity:.45}31%{opacity:.55}33%{opacity:.47}76%{opacity:.53}78%{opacity:.48}}@keyframes sweep{from{background-position:0 130%}to{background-position:0 -130%}}.brand{flex:none;text-align:center;padding:4px 0 22px}.logo{position:relative;overflow:hidden;width:min(94%,430px,60dvh);aspect-ratio:1210/275;margin:0 auto;filter:drop-shadow(0 0 3px #52ffa145)}.logo img{position:absolute;width:132.2314%;max-width:none;height:auto;left:-19.0083%;top:-250.9091%;opacity:1;filter:url(#logo-green)}.brand p{font-size:clamp(12px,2.9vw,14px);letter-spacing:.045em;margin:12px 0 0;white-space:nowrap}.player-window{height:90px;min-height:90px;flex:none;position:relative;background:#061d10;overflow:hidden;box-shadow:0 0 0 1px #2c9c5d80}.frame-stage{height:90px;position:relative;overflow:hidden}.music-frame{position:absolute;inset:0;display:block;width:100%;height:90px;border:0;background:#061d10;filter:grayscale(1) sepia(1) saturate(4) hue-rotate(87deg);color-scheme:dark}.music-frame.loading{opacity:0;pointer-events:none;z-index:-1}.load-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);animation:load 1s ease-in-out infinite;transform-origin:left}@keyframes load{50%{transform:scaleX(.2);opacity:.4}}.library{display:flex!important;flex-direction:column;min-height:0;flex:1;gap:0!important;margin-top:25px}.sort-tabs{display:flex!important;width:100%!important;height:43px!important;flex:none;border-radius:0!important;background:none!important;padding:0!important;border-bottom:2px solid var(--green);gap:8px}.sort-tabs button{position:relative;flex:1;font-size:19px;letter-spacing:.1em;font-weight:400;border-radius:0!important;height:100%;color:var(--green)!important;background:transparent!important;border:0;box-shadow:none!important}.sort-tabs button[data-state=active]{color:#062311!important;background:var(--green)!important}.sort-tabs button:disabled{opacity:.36}.sort-tabs button:after{display:none}.track-panel{min-height:0;flex:1;overflow:auto;margin:0;padding-top:9px;scrollbar-width:thin;scrollbar-color:#2c9c5d transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.track-list{list-style:none;padding:0;margin:0}.track{width:100%;min-height:60px;padding:13px 8px;display:grid;grid-template-columns:25px minmax(0,1fr) 18px;gap:12px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid #23623d66;color:var(--green);font-size:clamp(17px,4.3vw,21px);line-height:1.2;cursor:pointer}.track>span:nth-child(2){overflow-wrap:anywhere}.track-number{font-size:13px;color:#35b775}.track[aria-pressed=true]{background:#52ffa117;box-shadow:inset 3px 0 var(--green)}.track:hover{background:#52ffa120}.track:focus-visible,.sort-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:-3px}.marker{font-size:14px}.error{font-size:14px;line-height:1.3;margin:8px 0 0;flex:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-height:570px){.brand{padding:0 0 12px}.logo{width:min(70%,220px,40dvh)}.brand p{margin-top:5px}.crt{padding:12px 16px}.library{margin-top:14px}.track{min-height:48px}.pipboy{border-radius:20px}}@media(prefers-reduced-motion:reduce){.crt:before,.crt:after,.load-line{animation:none}.crt:before{background:none}}@media(forced-colors:active){.crt:before,.crt:after{display:none}}

/* Deliberately low-resolution decorative trace and a shared pixel matrix. */
.wave{height:38px;min-height:38px;flex:none;margin-top:8px;border-bottom:1px solid #2c9c5d60;overflow:hidden}
.wave canvas{display:block;width:100%;height:32px;image-rendering:pixelated;opacity:.85}
.library{margin-top:14px}
.crt{filter:contrast(1.12);text-rendering:optimizeSpeed;-webkit-font-smoothing:none}
.crt:after{background-image:linear-gradient(to right,transparent 70%,#00140766 70%),linear-gradient(to bottom,transparent 58%,#0009 58%);background-size:3px 3px;opacity:.58}
@media(max-height:570px){.wave{height:28px;min-height:28px;margin-top:5px}.wave canvas{height:24px}.library{margin-top:8px}}

/* Larger mark, constrained by viewport height on short phones. */
.logo{width:min(100%,540px,76dvh)}
@media(max-height:570px){.logo{width:min(100%,340px,58dvh)}}

/* Color the original pixels directly instead of relying on luminance masks. */
.logo{overflow:visible;filter:none;mix-blend-mode:screen}
.logo a{position:relative;display:block;width:100%;height:100%;overflow:hidden;cursor:pointer;touch-action:manipulation;animation:logo-invite 3.6s ease-in-out infinite;transform-origin:center;transition:filter .2s,transform .2s}
.logo a:focus-visible{outline:2px solid var(--green);outline-offset:5px;border-radius:2px}
.logo a:hover{animation:none;filter:brightness(1.18);transform:scale(1.025)}
.logo a:active{animation:none;transform:scale(.98)}
@keyframes logo-invite{0%,70%,100%{transform:scale(1);filter:brightness(1)}35%{transform:scale(1.025);filter:brightness(1.18)}}
@media(max-width:640px),(pointer:coarse){.logo{filter:brightness(1.3)}}
@media(prefers-reduced-motion:reduce){.logo a{animation:none;transition:none}.logo a:hover,.logo a:active{transform:none}}

button{font-family:inherit;font-weight:400;line-height:inherit;margin:0;cursor:pointer}img{display:block}h1{font-size:inherit;font-weight:inherit} .logo a{height:auto;aspect-ratio:1210/275} [hidden]{display:none!important}