:root{--color-bg:#0d131c;--color-surface:#121a24;--color-surface-raised:#182230;--color-border:#e7eef41a;--color-border-strong:#e7eef438;--color-glass:#121a248c;--color-glass-border:#e7eef429;--color-accent:#55c2ce;--color-accent-strong:#7ad3dd;--color-secondary:#f0a85e;--color-leaf:var(--color-accent);--color-text:#e7eef4;--color-text-muted:#8fa0af;--color-text-faint:#62727f;--color-canvas-bg:#0a0f17;--color-focus-ring:var(--color-accent);--color-activity-dormant:#3a4a5a;--color-activity-quiet:#5b7a8c;--color-activity-active:#55c2ce;--color-activity-festival:#f0a85e;--font-display:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-num:"IBM Plex Mono", SFMono-Regular, Consolas, monospace;--text-xs:.7rem;--text-sm:.8125rem;--text-base:.9375rem;--text-md:1.0625rem;--text-lg:1.25rem;--text-xl:1.5rem;--leading-tight:1.2;--leading-normal:1.55;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:20px;--radius-pill:999px;--radius-panel:14px;--radius-sheet:18px;--cover-radius:4px;--duration-fast:.12s;--duration-base:.22s;--ease-standard:cubic-bezier(.2, .8, .2, 1);--topbar-h:56px;--tabbar-height:60px;--sidebar-width:400px;--sidebar-inset:16px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--z-topbar:10;--z-floating:1;--z-tabbar:20;--z-backdrop:25;--z-sidebar:30;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (width>=900px){:root{--cover-radius:8px}}*{box-sizing:border-box}html,body{background:var(--color-bg);color:var(--color-text);margin:0;padding:0}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);height:100dvh;overflow:hidden}button{font:inherit;color:inherit}h1,h2,h3,p{margin:0}img{max-width:100%}input,select{font:inherit;color:inherit}[hidden]{display:none!important}:focus{outline:none}:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.app{height:100dvh;overflow:hidden}.layout{height:100%;display:flex}.content{flex-direction:column;flex:auto;min-width:0;height:100%;display:flex;position:relative;overflow:hidden}.topbar{z-index:var(--z-topbar);min-height:var(--topbar-h);justify-content:space-between;align-items:center;gap:var(--space-4);padding:calc(var(--safe-top) + var(--space-2)) var(--space-4) var(--space-2);background:var(--color-glass);border-bottom:1px solid var(--color-glass-border);-webkit-backdrop-filter:blur(18px);display:flex;position:absolute;top:0;left:0;right:0}.brand{font-family:var(--font-display);font-size:var(--text-md);letter-spacing:-.01em;color:var(--color-text);font-weight:700}.main{align-items:center;gap:var(--space-3);min-height:0;padding-top:calc(var(--topbar-h) + var(--safe-top) + var(--space-3));padding-left:calc(var(--space-4) + var(--safe-left));padding-right:calc(var(--space-4) + var(--safe-right));padding-bottom:calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-4));flex-direction:column;flex:auto;width:100%;display:flex;position:relative;overflow:hidden}@media (width>=900px){.main{padding-top:calc(var(--topbar-h) + var(--space-4));padding-bottom:var(--space-4)}}.view-switch{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);gap:2px;padding:2px;display:flex}.view-tab{appearance:none;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);cursor:pointer;color:var(--color-text-muted);font-size:var(--text-sm);transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);background:0 0;border:1px solid #0000;font-weight:500}.view-tab:hover{color:var(--color-text)}.view-tab.is-active{background:var(--color-accent);color:#0b1116;font-weight:600}@media (width<=899px){.view-switch{z-index:var(--z-tabbar);background:var(--color-glass);border-top:1px solid var(--color-glass-border);-webkit-backdrop-filter:blur(18px);padding:var(--space-1) calc(var(--space-2) + var(--safe-left)) calc(var(--space-1) + var(--safe-bottom)) calc(var(--space-2) + var(--safe-right));border-radius:0;gap:0;display:flex;position:fixed;bottom:0;left:0;right:0}.view-tab{border-radius:var(--radius-sm);text-align:center;flex:1 1 0;justify-content:center;align-items:center;min-height:44px;display:flex}}.district-toolbar{z-index:var(--z-floating);align-self:center;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-2);background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(16px);flex:none;max-width:100%;display:inline-flex;position:relative;box-shadow:0 16px 32px -18px #0009}.icon-btn{appearance:none;border-radius:var(--radius-pill);min-width:44px;min-height:44px;color:var(--color-text);font-size:var(--text-xl);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);background:0 0;border:none;justify-content:center;align-items:center;line-height:1;display:flex}.icon-btn:hover{background:#e7eef414}.icon-btn:active{transform:scale(.94)}.district-readout{text-align:center;min-width:0;max-width:46vw;padding:0 var(--space-1);flex-direction:column;align-items:center;display:flex}.district-readout__genre{font-size:var(--text-xs);color:var(--color-text-muted)}.district-readout__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-md);color:var(--color-text);white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.village-caption{z-index:var(--z-floating);font-size:var(--text-sm);color:var(--color-text-muted);text-align:center;background:var(--color-glass);border:1px solid var(--color-glass-border);-webkit-backdrop-filter:blur(14px);padding:6px var(--space-3);border-radius:var(--radius-pill);flex:none;align-self:center;max-width:100%;position:relative}.stage-area{justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}#game{box-sizing:content-box;background:var(--color-canvas-bg);image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:grab;border:none;display:block}#game:active{cursor:grabbing}.caption-layer{pointer-events:none;image-rendering:auto;position:absolute}.zoom-controls{right:var(--space-3);bottom:var(--space-3);background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(16px);flex-direction:column;display:flex;position:absolute;overflow:hidden;box-shadow:0 16px 32px -18px #0009}.zoom-btn{appearance:none;min-width:44px;min-height:44px;color:var(--color-text);font-size:var(--text-lg);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;line-height:1;display:flex}.zoom-btn+.zoom-btn{border-top:1px solid var(--color-border)}.zoom-btn:hover{background:#e7eef414}.zoom-btn:active{transform:scale(.94)}@media (width<=899px){.zoom-btn{font-size:var(--text-base)}}.recolor-note{z-index:var(--z-floating);font-size:var(--text-xs);color:var(--color-text-faint);text-align:center;flex:none;align-self:center;position:relative}.roster{z-index:var(--z-floating);align-content:start;gap:var(--space-3);flex:auto;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));width:100%;min-height:0;display:grid;position:relative;overflow-y:auto}.rcell{align-items:center;gap:var(--space-1);padding:var(--space-2);background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-panel);-webkit-backdrop-filter:blur(12px);cursor:pointer;min-height:44px;transition:border-color var(--duration-fast) var(--ease-standard);flex-direction:column;display:flex}.rcell:hover{border-color:var(--color-accent)}.rcell canvas{aspect-ratio:1;width:100%;image-rendering:pixelated;background:var(--color-canvas-bg);border-radius:var(--radius-sm)}.rcell__genre{font-family:var(--font-display);font-weight:600;font-size:var(--text-xs);color:var(--color-accent);text-align:center}.rcell__name{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center}.sidebar-backdrop{z-index:var(--z-backdrop);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-base) var(--ease-standard);background:#05080c8c;position:fixed;inset:0}.sidebar-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}.sidebar{top:calc(var(--safe-top) + var(--topbar-h) + var(--space-4));z-index:var(--z-sidebar);background:var(--color-glass);border:1px solid var(--color-glass-border);border-top-left-radius:var(--radius-sheet);border-top-right-radius:var(--radius-sheet);-webkit-backdrop-filter:blur(22px);padding:var(--space-2) var(--space-4) calc(var(--space-4) + var(--safe-bottom));visibility:hidden;opacity:0;transition:transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);flex-direction:column;display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -20px 60px #00000080}.sidebar.is-open{visibility:visible;opacity:1;transition:transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);transform:translateY(0)}.sidebar__grabber{border-radius:var(--radius-pill);background:var(--color-border-strong);width:36px;height:4px;margin:0 auto var(--space-2);flex:none}.sidebar__close{top:var(--space-2);right:var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--color-border);width:30px;height:30px;color:var(--color-text-muted);font-size:var(--text-lg);cursor:pointer;background:0 0;justify-content:center;align-items:center;display:flex;position:absolute}.sidebar__close:hover{color:var(--color-text)}.sidebar__header{align-items:center;gap:var(--space-3);padding-right:var(--space-6);flex:none;display:flex}.sidebar__portrait{border-radius:var(--radius-md);background:var(--color-canvas-bg);border:1px solid var(--color-border);width:56px;height:56px;image-rendering:pixelated;flex:none}.sidebar__header-text{min-width:0}.sidebar__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-md);color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sidebar__meta{margin-top:var(--space-1);align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.pill{font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:2px var(--space-2);white-space:nowrap;font-weight:500}.sidebar__location{font-size:var(--text-sm);color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sidebar__footer{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-text-faint);flex:none;align-items:center;gap:6px;min-width:70px;display:flex}.sidebar__footer:before{content:"";background:var(--color-text-faint);opacity:.7;border-radius:50%;flex:none;width:6px;height:6px}.sidebar-tablist{gap:var(--space-3);margin-top:var(--space-3);scrollbar-width:none;border-bottom:1px solid var(--color-border);flex:none;display:flex;overflow-x:auto}.sidebar-tablist::-webkit-scrollbar{display:none}.sidebar-tab{appearance:none;color:var(--color-text-muted);font-size:var(--text-sm);padding:var(--space-3) 0;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:none;min-height:44px;font-weight:500}.sidebar-tab:hover{color:var(--color-text)}.sidebar-tab[aria-selected=true]{color:var(--color-accent);border-bottom-color:var(--color-accent);font-weight:600}.sidebar-panel{min-height:0;padding-top:var(--space-3);flex:auto;overflow-y:auto}.sidebar-heading{font-size:var(--text-xs);color:var(--color-text);margin:var(--space-4) 0 var(--space-2);font-weight:600}.sidebar-heading:first-of-type{margin-top:2px}.sidebar-empty{font-size:var(--text-sm);color:var(--color-text-faint);padding:var(--space-3) 0}.activity-pill{font-size:var(--text-xs);padding:4px var(--space-2) 4px 8px;border-radius:var(--radius-pill);border:1px solid var(--color-border-strong);color:var(--color-text);background:0 0;align-items:center;gap:6px;font-weight:500;display:inline-flex}.activity-pill:before{content:"";background:var(--dot);width:6px;height:6px;box-shadow:0 0 8px var(--dot);border-radius:50%}.activity-pill--dormant{--dot:var(--color-activity-dormant)}.activity-pill--quiet{--dot:var(--color-activity-quiet)}.activity-pill--active{--dot:var(--color-activity-active)}.activity-pill--festival{--dot:var(--color-activity-festival)}.overview-stats{gap:var(--space-5);margin-top:var(--space-3);display:flex}.overview-stat{flex-direction:column;display:flex}.overview-stat strong{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-xl);color:var(--color-text);font-weight:600}.overview-stat span{font-size:var(--text-xs);color:var(--color-text-faint)}.artist-list{flex-direction:column;display:flex}.artist-row{appearance:none;justify-content:space-between;align-items:center;gap:var(--space-2);width:100%;min-height:44px;padding:var(--space-2) 0;border:none;border-bottom:1px solid var(--color-border);cursor:pointer;text-align:left;background:0 0;display:flex}.artist-row:last-child{border-bottom:none}.artist-row__name{color:var(--color-text);font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.artist-row__plays{color:var(--color-text-faint);font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-xs);flex:none}.nowplaying-card{align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-panel);background:var(--color-surface-raised);border:1px solid var(--color-border);margin-top:var(--space-2);display:flex}.np-cover{border-radius:var(--cover-radius);background:var(--color-canvas-bg);flex:none;width:40px;height:40px;overflow:hidden}.np-cover-img{object-fit:contain;width:100%;height:100%}.np-meta{flex:auto;min-width:0}.np-title{font-size:var(--text-sm);color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.np-sub{font-size:var(--text-xs);color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;overflow:hidden}.eq{flex:none;align-items:flex-end;gap:2px;height:16px;display:flex}.eq i{background:var(--color-accent);border-radius:1px;width:3px;animation:.9s ease-in-out infinite eq-pulse;display:block}.eq i:first-child{animation-delay:-.6s}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:0s}@keyframes eq-pulse{0%,to{height:4px}50%{height:14px}}.songs-controls{gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.songs-search{min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-text);flex:160px}.songs-search::placeholder{color:var(--color-text-faint)}.songs-filter{min-height:40px;padding:0 var(--space-2);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-text);flex:120px}.song-list{flex-direction:column;display:flex}.song-row{align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border);color:inherit;min-height:44px;text-decoration:none;display:flex}.song-row:last-child{border-bottom:none}.song-row__cover{border-radius:var(--cover-radius);background:var(--color-canvas-bg);flex:none;width:44px;height:44px;overflow:hidden}.song-row__cover-img{object-fit:contain;width:100%;height:100%}.song-row__info{flex:auto;min-width:0}.song-row__title{font-size:var(--text-sm);color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.song-row__meta{font-size:var(--text-xs);color:var(--color-text-faint);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;overflow:hidden}.song-row__plays{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--color-text-faint);flex:none}@media (width>=900px){.sidebar-backdrop{display:none}.sidebar{top:calc(var(--topbar-h) + var(--sidebar-inset));right:var(--sidebar-inset);bottom:var(--sidebar-inset);width:var(--sidebar-width);border-radius:var(--radius-panel);padding:var(--space-3) var(--space-4) var(--space-4);position:absolute;left:auto;box-shadow:0 30px 70px #0000008c}.sidebar__grabber{display:none}}