@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600&display=swap";:root{--ui-base: #39ff14;--phosphor: color-mix(in srgb, var(--ui-base) 80%, #000);--phosphor-bright: var(--ui-base);--phosphor-muted: color-mix(in srgb, var(--phosphor) 66%, transparent);--phosphor-crossed: color-mix(in srgb, var(--phosphor) 50%, transparent);--phosphor-subtle: color-mix(in srgb, var(--phosphor) 55%, transparent);--phosphor-hover: color-mix(in srgb, var(--phosphor) 20%, transparent);color:var(--phosphor);background:#000;font-family:Space Grotesk,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{min-width:240px;margin:0;background:#000}button{font:inherit}button:focus-visible,.player-shell:focus-visible{outline:2px solid var(--phosphor-bright);outline-offset:2px}.setup-shell,.player-shell{min-height:100dvh;background:#000}.setup-shell{width:100%;height:100dvh;display:grid;place-items:center;padding:8px 10px;overflow:auto}.setup-panel{width:100%;padding:24px 0;display:grid;justify-items:center;text-align:center}.wordmark{margin:0;color:var(--phosphor);font:500 10px DM Mono,monospace;letter-spacing:0}.wordmark span{display:none}.eyebrow{margin:28px 0 6px;color:var(--phosphor);font:500 9px DM Mono,monospace;letter-spacing:0;text-transform:uppercase}h1{max-width:12ch;margin:0;font-size:clamp(24px,8vw,34px);font-weight:600;line-height:1;letter-spacing:0;text-transform:uppercase}.setup-copy{max-width:42ch;margin:12px 0 18px;color:var(--phosphor);font-size:11px;line-height:1.35}.pairing-code{width:fit-content;min-width:min(100%,248px);margin:16px 0;padding:9px 12px;border:1px solid var(--phosphor);background:transparent;color:var(--phosphor);font:500 clamp(20px,7vw,28px) "DM Mono",monospace;letter-spacing:3px;text-align:center}.status{display:flex;align-items:center;gap:6px;min-height:24px;margin:0 0 10px;color:var(--phosphor);font:400 9px DM Mono,monospace;line-height:1.3;text-transform:uppercase}.status svg{flex:none}.primary-button{width:min(100%,420px);min-height:34px;border:1px solid var(--phosphor);padding:8px 12px;background:var(--phosphor);color:#000;cursor:pointer;font:500 10px DM Mono,monospace;letter-spacing:0;text-transform:uppercase}.primary-button:hover{background:#000;color:var(--phosphor)}.player-shell{width:100%;height:100dvh;margin:0;padding:8px 10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;overflow:hidden;touch-action:pan-y}.player-header{display:flex;align-items:center;justify-content:space-between;min-height:28px;padding-bottom:6px}.hud-status,.header-actions,.queue-controls{display:flex;align-items:center}.hud-status{width:18px;display:flex;justify-content:center;color:var(--phosphor)}.header-actions{gap:5px}.view-tabs{display:flex;border:1px solid var(--phosphor-subtle)}.view-tab{min-width:54px;height:28px;border:0;border-right:1px solid var(--phosphor-subtle);border-radius:0;background:transparent;color:var(--phosphor);cursor:pointer;font:500 9px DM Mono,monospace;text-transform:uppercase}.view-tab:last-child{border-right:0}.view-tab.is-active{background:var(--phosphor);color:#000}.icon-button,.queue-button{display:grid;place-items:center;border:1px solid var(--phosphor-subtle);border-radius:0;background:transparent;color:var(--phosphor);cursor:pointer}.icon-button{width:28px;height:28px}.color-button{color:var(--phosphor-bright)}.icon-button:hover,.queue-button:hover{background:var(--phosphor-hover)}.icon-button:disabled{opacity:.35;cursor:default}.error-state{position:absolute;top:42px;left:12px;right:12px;z-index:1;margin:0;padding:5px 7px;border:1px solid var(--phosphor);background:#000;color:var(--phosphor);font:400 9px DM Mono,monospace;line-height:1.3;text-transform:uppercase}.notification-list{--notification-scale: 1;min-height:0;width:100%;max-width:100%;padding:0 30px 8px 0;display:grid;justify-self:stretch;grid-template-columns:max-content;align-content:start;gap:8px;overflow-x:hidden;overflow-y:auto}.notification{--notification-color: var(--phosphor);width:auto;max-width:100%;position:relative;padding:calc(6px * var(--notification-scale)) calc(10px * var(--notification-scale));color:var(--notification-color);cursor:pointer}.critical-notification{padding:calc(12px * var(--notification-scale));border:calc(3px * var(--notification-scale)) double var(--phosphor)}.high-notification{padding-left:calc(8px * var(--notification-scale));border-left:calc(2px * var(--notification-scale)) solid var(--phosphor)}.normal-notification{--notification-color: var(--phosphor-muted)}.notification.is-selected:after{position:absolute;top:50%;right:calc(-28px * var(--notification-scale));width:calc(20px * var(--notification-scale));height:calc(20px * var(--notification-scale));display:grid;place-items:center;border-radius:0;background:transparent;color:var(--phosphor-bright);content:"";transform:translateY(-50%)}.notification.is-action-armed,.notification.is-archived{--notification-color: var(--phosphor-crossed)}.notification:is(.is-action-armed,.is-archived) :is(h2,p,time){text-decoration:line-through}.notification.is-archived.is-action-armed{--notification-color: var(--phosphor)}.notification.is-archived.is-action-armed :is(h2,p,time){text-decoration:none}.notification.is-action-armed:after{border:1px solid var(--phosphor-subtle);background:#000;content:"×";font:500 calc(20px * var(--notification-scale)) "DM Mono",monospace;line-height:1}.notification.is-archived.is-action-armed:after{content:"✓"}.notification.is-selected:not(.is-action-armed):after{content:"←";font:500 calc(20px * var(--notification-scale)) "DM Mono",monospace;line-height:1}.notification-heading{display:flex;align-items:center;gap:calc(7px * var(--notification-scale))}.priority{width:calc(12px * var(--notification-scale));height:calc(12px * var(--notification-scale));display:grid;place-items:center;flex:none;border:calc(1px * var(--notification-scale)) solid var(--notification-color);color:var(--notification-color);font:500 calc(9px * var(--notification-scale)) "DM Mono",monospace;line-height:1}.priority.critical{background:var(--notification-color);color:#000}.priority.high{width:calc(8px * var(--notification-scale));height:calc(8px * var(--notification-scale));border:0;background:var(--notification-color);color:transparent}.priority.normal{width:calc(6px * var(--notification-scale));height:calc(6px * var(--notification-scale));border:0;background:var(--notification-color);color:transparent}.notification h2{flex:1;margin:0;color:inherit;font-size:calc(16px * var(--notification-scale));font-weight:600;line-height:1.15;letter-spacing:0}.notification p{margin:calc(4px * var(--notification-scale)) 0 0 calc(13px * var(--notification-scale));color:inherit;font-size:calc(13px * var(--notification-scale));line-height:1.25;white-space:pre-wrap}.notification time{display:block;margin:calc(4px * var(--notification-scale)) 0 0 calc(13px * var(--notification-scale));color:inherit;font:400 calc(9px * var(--notification-scale)) "DM Mono",monospace;text-transform:uppercase}.empty-state{color:var(--phosphor);font:400 10px DM Mono,monospace;text-align:center;text-transform:uppercase}.queue-controls{justify-content:flex-start;gap:12px;min-height:26px}.critical-notification h2{font-size:calc(20px * var(--notification-scale))}.critical-notification p{margin-left:calc(19px * var(--notification-scale));font-size:calc(15px * var(--notification-scale))}.queue-button{width:26px;height:26px}.spinning{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:360px),(max-height:400px){.setup-shell{padding:10px 14px}.setup-panel{padding-block:10px}.eyebrow{margin-top:16px}.setup-copy{display:none}.notification{padding-block:10px}.notification h2{font-size:clamp(16px,6vw,22px)}}