/* All three banks stay on the bar; navigation has no visible labels or counts. */
.music-mode .track{height:13px;overflow:visible;position:relative}
.music-mode .fill{top:0;height:13px}
.music-bank-controls{inset:0;height:100%;z-index:2;pointer-events:none;gap:0}
.music-bank-page{justify-self:end;width:20px;height:100%;padding:0;margin:0;display:grid;place-items:center;background:transparent;pointer-events:auto}
.music-bank-page svg{display:block;shape-rendering:crispEdges}
.music-bank-page:disabled{visibility:hidden;pointer-events:none}
.music-bank-page:hover,.music-bank-page:focus-visible{background:#242424;outline-offset:0}
@media(max-width:540px){.music-mode .track{height:18px}.music-mode .fill,.music-mode .music-square{top:0;height:18px}}

/* Pixel windows inherit the current artwork palette. */
.external-window{width:min(680px,calc(100vw - 64px));max-width:none;max-height:calc(100dvh - 64px);padding:0;border:4px solid var(--theme-primary,#ffff00);border-radius:0;background:#080808;color:#fff;box-shadow:10px 10px 0 #000;overflow:visible;font:14px/1.6 'Courier New',monospace}
.external-window[open]{display:flex;flex-direction:column}
.external-window::backdrop{background:#000a}
.external-window-chrome{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 10px;background:var(--theme-primary,#ffff00);color:var(--theme-primary-ink,#000);flex:none}
.external-window-chrome h2{margin:0;font:14px/1.5 ZXComputer,monospace;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.external-window-controls{display:flex;gap:8px;flex:none}
.external-window-controls button{width:32px;height:32px;display:grid;place-items:center;padding:5px;border:2px solid currentColor;border-radius:0;background:transparent;color:inherit;box-shadow:none}
.external-window-controls svg{display:block;shape-rendering:crispEdges}
.external-window-controls button:hover{background:var(--theme-primary-ink,#000);color:var(--theme-primary,#ffff00)}
.external-window-content{min-height:0;overflow:auto;display:flex;flex-direction:column;flex:1}
.external-window-preview{padding:42px 36px;min-height:240px;display:flex;flex-direction:column;justify-content:center;gap:18px;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 4px)}
.external-window-preview p,.external-window-preview h3{margin:0}
.external-window-preview h3{font:clamp(20px,3vw,32px)/1.4 ZXComputer,monospace;color:var(--theme-secondary,#00ffff);overflow-wrap:anywhere}
.external-window-kicker{font:11px/1.6 ZXComputer,monospace;color:var(--theme-primary,#ffff00)}
.external-window-preview p:last-child{max-width:48ch;color:#ddd}
.external-window-player{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000;flex:1;min-height:0}
.external-window-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;border-top:2px solid var(--theme-primary,#ffff00);flex:none}
.external-window-domain{font-size:11px;color:#aaa;overflow-wrap:anywhere}
.external-window-open{display:inline-flex;align-items:center;min-height:42px;flex:none;padding:8px 12px;color:var(--theme-secondary-ink,#000);background:var(--theme-secondary,#00ffff);font:11px/1.5 ZXComputer,monospace;text-decoration:none}
.external-window button:focus-visible,.external-window a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.external-window.is-expanded{width:calc(100vw - 48px);height:calc(100dvh - 48px);max-height:none}
.external-window.is-expanded .external-window-preview{flex:1}

/* The overlay never intercepts clicks, and the hand tip stays at the event point. */
.pixel-cursor{display:none;position:fixed;left:0;top:0;width:16px;height:24px;pointer-events:none!important;z-index:2147483647;mix-blend-mode:difference;image-rendering:pixelated}
.pixel-cursor svg{display:block;shape-rendering:crispEdges;pointer-events:none!important}
.pixel-cursor .cursor-hand,.pixel-cursor.is-hand .cursor-arrow{display:none}
.pixel-cursor.is-hand .cursor-hand{display:block}
@media(any-hover:hover) and (any-pointer:fine){html body.cursor-active.cursor-active,html body.cursor-active.cursor-active *{cursor:none!important}.cursor-active .pixel-cursor{display:block}}
@media(forced-colors:active){.pixel-cursor{display:none!important}html body.cursor-active.cursor-active,html body.cursor-active.cursor-active *{cursor:auto!important}}