:root{--bg-void:#0c0c0c;--bg-panel:#191919;--bg-panel-raised:#202020;--line:#2d2d2d;--line-strong:#454545;--ink:#e5e5e5;--ink-dim:#a3a3a3;--ink-faint:#7e7e7e;--signal:#ffbd19;--signal-dim:#8f6a17;--amber:#e0a83e;--error:#e2665a;--font-display:"Space Grotesk", "Inter", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;--radius:3px}*{box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{background:var(--bg-void);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0}button,input,textarea,select{font-family:inherit}:focus-visible{outline:2px solid var(--signal);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.blueprint-grid{background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-position:-1px -1px;background-size:32px 32px}.login-screen{background:var(--bg-void);justify-content:center;align-items:center;height:100%;display:flex}.login-card{background:var(--bg-panel);border:1px solid var(--line);width:min(360px,100vw - 48px);padding:40px 32px 32px;position:relative}.login-card:before,.login-card:after,.login-card__bracket-tr,.login-card__bracket-bl{content:"";border:1.5px solid var(--signal);width:18px;height:18px;position:absolute}.login-card:before{border-bottom:none;border-right:none;top:-1px;left:-1px}.login-card:after{border-top:none;border-left:none;bottom:-1px;right:-1px}.login-eyebrow{font-family:var(--font-mono);letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase;margin:0 0 6px;font-size:11px}.login-title{font-family:var(--font-display);color:var(--ink);margin:0 0 28px;font-size:22px;font-weight:600}.login-field{margin-bottom:16px}.login-field label{color:var(--ink-dim);margin-bottom:6px;font-size:12px;display:block}.login-field input{background:var(--bg-void);border:1px solid var(--line-strong);border-radius:var(--radius);width:100%;color:var(--ink);padding:10px 12px;font-size:14px}.login-field input:focus{border-color:var(--signal)}.login-submit{background:var(--signal);color:#06201e;border-radius:var(--radius);cursor:pointer;border:none;width:100%;margin-top:8px;padding:11px;font-size:14px;font-weight:600}.login-submit:disabled{background:var(--line-strong);color:var(--ink-faint);cursor:not-allowed}.login-error{color:var(--error);font-size:13px;font-family:var(--font-mono);margin:-6px 0 16px}.login-status{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.04em;margin-top:24px;font-size:11px}.shell{background:var(--bg-void);grid-template-rows:auto auto 1fr;height:100%;display:grid}.header{border-bottom:1px solid var(--line);background:var(--bg-panel);z-index:40;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 24px;display:grid;position:relative}.header__user{align-items:center;gap:12px;min-width:0;display:flex}.header__login{font-family:var(--font-mono);color:var(--ink-dim);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:13px;overflow:hidden}.header__logout{border:1px solid var(--line-strong);color:var(--ink-dim);border-radius:var(--radius);cursor:pointer;white-space:nowrap;background:0 0;flex-shrink:0;padding:6px 10px;font-size:12px}.header__logout:hover{border-color:var(--error);color:var(--error)}.header__brand{font-family:var(--font-display);letter-spacing:.02em;color:var(--ink);text-align:center;white-space:nowrap;font-size:18px;font-weight:600}.header__power{justify-self:end;align-items:center;gap:12px;min-width:0;display:flex}.power-label{font-family:var(--font-mono);letter-spacing:.04em;color:var(--ink-faint);text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:12px;overflow:hidden}.power-label--on{color:var(--signal)}.power-toggle{border:1px solid var(--line-strong);background:var(--bg-void);cursor:pointer;border-radius:14px;flex-shrink:0;width:52px;height:28px;padding:0;transition:border-color .15s;position:relative}.power-toggle--on{border-color:var(--signal-dim);background:#ffbd191f}.power-toggle:disabled{opacity:.5;cursor:not-allowed}.power-toggle__knob{background:var(--ink-faint);border-radius:50%;width:22px;height:22px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.power-toggle--on .power-toggle__knob{background:var(--signal);transform:translate(24px)}.playlist-toggle{background:var(--bg-void);border:1px solid var(--line-strong);border-radius:var(--radius);width:36px;height:32px;color:var(--ink-dim);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;font-size:15px;display:none;position:relative}.playlist-toggle__badge{background:var(--signal);color:#06201e;min-width:16px;height:16px;font-family:var(--font-mono);text-align:center;border-radius:8px;padding:0 3px;font-size:10px;font-weight:600;line-height:16px;position:absolute;top:-6px;right:-6px}.status-bar{font-family:var(--font-mono);color:var(--amber);background:var(--bg-panel-raised);border-bottom:1px solid var(--line);padding:8px 24px;font-size:12px}.status-bar--error{color:var(--error)}.main{grid-template-columns:1fr 300px;min-height:0;display:grid;overflow:hidden}.composer{flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:32px;display:flex;overflow-y:auto}.genre-picker{width:min(520px,100%);position:relative}.genre-picker__button{background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:var(--radius);width:100%;color:var(--ink-dim);text-align:left;cursor:pointer;justify-content:space-between;padding:8px 12px;font-size:13px;display:flex}.genre-picker__button:disabled{opacity:.5;cursor:not-allowed}.genre-picker__arrow{color:var(--ink-faint)}.genre-picker__menu{z-index:5;background:var(--bg-panel-raised);border:1px solid var(--line-strong);border-radius:var(--radius);max-height:220px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.genre-picker__option{border:none;border-bottom:1px solid var(--line);width:100%;color:var(--ink-dim);text-align:left;cursor:pointer;background:0 0;padding:8px 12px;font-size:13px;display:block}.genre-picker__option:hover{background:var(--bg-panel);color:var(--ink)}.genre-picker__option--active{color:var(--signal)}.composer__textarea{background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:var(--radius);width:min(520px,100%);min-height:120px;color:var(--ink);resize:vertical;padding:12px 14px;font-size:14px}.composer__textarea:disabled{opacity:.5;cursor:not-allowed}.composer__textarea:focus{border-color:var(--signal)}.composer__submit{background:var(--signal);color:#06201e;border-radius:var(--radius);cursor:pointer;border:none;width:min(520px,100%);padding:11px;font-size:14px;font-weight:600}.composer__submit:disabled{background:var(--line-strong);color:var(--ink-faint);cursor:not-allowed}.player{align-items:center;gap:12px;margin-top:10px;display:flex}.player__button{background:var(--bg-panel);border:1px solid var(--line-strong);width:44px;height:44px;color:var(--ink);cursor:pointer;border-radius:50%;font-size:16px}.player__button--main{border-color:var(--signal-dim);width:54px;height:54px;color:var(--signal);font-size:20px}.player__button:disabled{opacity:.35;cursor:not-allowed}.player__now-playing{font-family:var(--font-mono);color:var(--ink-faint);font-size:12px}.volume{align-items:center;gap:10px;width:min(280px,100%);margin-top:4px;display:flex}.volume__icon{flex-shrink:0;font-size:15px;line-height:1}.volume__slider{appearance:none;background:var(--line-strong);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}.volume__slider::-webkit-slider-thumb{appearance:none;background:var(--signal);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.volume__slider::-moz-range-thumb{background:var(--signal);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.volume__slider::-moz-range-progress{background:var(--signal-dim);border-radius:2px;height:4px}.volume__value{font-family:var(--font-mono);color:var(--ink-faint);text-align:right;flex-shrink:0;width:34px;font-size:11px}.playlist{border-left:1px solid var(--line);background:var(--bg-panel);flex-direction:column;min-height:0;display:flex}.playlist__title{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:0;padding:14px 16px 8px;font-size:12px}.playlist__empty{color:var(--ink-faint);padding:0 16px;font-size:13px}.playlist__list{flex:1;padding-bottom:12px;overflow-y:auto}.playlist__item{cursor:pointer;border-left:2px solid #0000;justify-content:space-between;align-items:center;gap:8px;padding:9px 16px;display:flex}.playlist__item:hover{background:var(--bg-panel-raised)}.playlist__item--active{border-left-color:var(--signal);color:var(--signal);background:#ffbd1914}.playlist__item-name{font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.playlist__star{color:var(--ink-faint);cursor:pointer;background:0 0;border:none;flex-shrink:0;font-size:15px}.playlist__star--active{color:var(--signal)}.playlist__header{justify-content:space-between;align-items:center;padding-right:8px;display:flex}.playlist__close{color:var(--ink-faint);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:16px;display:none}.playlist__close:hover{color:var(--ink)}.playlist-backdrop{display:none}@media (width<=768px){.header{gap:10px;padding:10px 14px}.header__brand{font-size:15px}.header__logout-text,.power-label{display:none}.header__power{gap:8px}.playlist-toggle{display:inline-flex}.main{grid-template-columns:1fr;position:relative}.composer{padding:20px 16px}.playlist{border-left:1px solid var(--line-strong);z-index:30;width:min(86vw,340px);transition:transform .25s;position:fixed;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-12px 0 32px #00000080}.playlist--open{transform:translate(0)}.playlist__close{display:inline-block}.playlist-backdrop{z-index:20;background:#0000008c;display:block;position:fixed;inset:0}}