/* ==========================================================================
   jukebox.css — the AWOW Jukebox taken apart and rebuilt as CSS.
   Every measurement is the cabinet's own at 720p (UI scale s = 2), read out of
   crates/jb-ui/src/lib.rs (draw_inner, draw_viz, draw_eq, the HUD) and
   crates/jb-gfx/src/lib.rs (palette). KIT.md lists the source line for each.
   No libraries. British English in comments. The cabinet font has no comma,
   apostrophe or question mark: never put one in a .px line.
   ========================================================================== */

/* --- the cabinet's own glyphs, embedded (awow-companion/shared/fonts/AWOWPixel.ttf, 13,328 B).
       ONLY for lines that quote the screen (rail items, mode names, HUD hints, the ABOUT stamp). */
@font-face {
  font-family: 'AWOW Pixel';
  src: url('data:font/ttf;base64,AAEAAAAKAIAAAwAgT1MvMkjnS54AAAEoAAAAYGNtYXABYAJPAAACTAAAAHRnbHlmizZrNgAAAygAAC0SaGVhZDF68L0AAACsAAAANmhoZWEH0QYNAAAA5AAAACRobXR4wlYAAAAAAYgAAADEbG9jYQ2CAk0AAALAAAAAZm1heHAAVQCKAAABCAAAACBuYW1lKyMXzwAAMDwAAAHLcG9zdIs6iUgAADIIAAACBgABAAAAAQAAeu9iWl8PPPUAAQPoAAAAAObCVbwAAAAA5sJVvAB9AH0EZQPoAAAAAwACAAAAAAAAAAEAAAPoAAAAAATiAAAA+gPoAAEAAAAAAAAAAAAAAAAAAAAwAAEAAAAyAIgAIgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAwQQAZAABQAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAPz8/PwAAACAAegPoAAAAAAPoAAAAAAAAAAAAAAPoA+gAAAAgAAAC7gAAAfQAAAH0AAAEZQAABOIAAAPoAAAD6AAAAfQAAARlAAAEZQAAA+gAAARlAAAEZQAABGUAAARlAAAEZQAABGUAAARlAAAEZQAAAfQAAANrAAADawAABGUAAARlAAAEZQAABGUAAARlAAAEZQAABGUAAARlAAAC7gAABGUAAARlAAAEZQAABGUAAARlAAAEZQAABGUAAARlAAAEZQAABGUAAAPoAAAEZQAABGUAAARlAAAEZQAAA+gAAARlAAAAAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABgAAAAFAAQAAMABAAhACUAKwA6ADwAPgBaAF8Aev//AAAAIAAlACoALQA8AD4AQQBeAGH////h/97/2v/Z/9j/1//V/9L/tQABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQwCvASoBdgGZAbMB/gKnAwwDkgQZBJYFJAWwBhUGtQdBB3AHvwgNCKoJWAnMCmgK8AtiC/MMlQz1DWkN/A5fDw4PvRBHEM4RZhILEpYS9ROOFA8UvhU4FaIWHhZiFokAAAAMAH0AfQF3A+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AABM1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFX19ffp9ffp9ffp9ffp9ffp9fQNrfX19fX19fX19fX19fX19fX19fX19fX19+n19fX0AABQAfQB9A+gDawADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AABM1MxUxNTMVITUzFTE1MxUFNTMVMTUzFTM1MxUxNTMVBTUzFTE1MxUFNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVfX19AXd9ffyVfX36fX3+iX19/ol9ff6JfX36fX38lX19AXd9fQLufX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19ABgAfQD6BGUDawADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwAAEzUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFTM1MxUxNTMV+n19+n19/Y99fX19/RJ9fX19fX19ff0SfX19ff2PfX36fX0C7n19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AAA4AfQD6A2sDawADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAAAE1MxUxNTMVBzUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFQc1MxUxNTMVAXd9ffp9ff4MfX19fX19/gx9ffp9fQLufX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0ABgB9AfQDawJxAAMABwALAA8AEwAXAAATNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxV9fX19fX19AfR9fX19fX19fX19fX0AAAQAfQB9AXcBdwADAAcACwAPAAA3NTMVMTUzFQc1MxUxNTMVfX19+n19+n19fX19fX19fQANAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwAAATUzFTE1MxUFNTMVMTUzFQU1MxUxNTMVBTUzFTE1MxUFNTMVMTUzFQU1MxUxNTMVBzUzFQLufX3+iX19/ol9ff6JfX3+iX19/ol9ffp9A2t9fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAhAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAbwBzAHcAewB/AIMAABM1MxUxNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUxNTMVBTUzFTE1MxUzNTMVMzUzFTE1MxUFNTMVMTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVMTUzFfp9fX19ff0SfX0Bd319/JV9ffp9fX38lX19fX19fX38lX19ffp9ffyVfX0Bd319/RJ9fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19ABMAfQB9A2sD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAAABNTMVMTUzFQU1MxUxNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVBTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVAXd9ff6JfX19+n19+n19+n19+n19/gx9fX19fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19AAAaAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAAATNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUHNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFQU1MxUxNTMVBzUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFfp9fX19ff0SfX0Bd319+n19/Y99fX19/Y99ff6JfX36fX19fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAAGgB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwAAEzUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBzUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVBzUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUxNTMVMTUzFTE1MxX6fX19fX39En19AXd9ffp9ff2PfX19fX19ffyVfX0Bd319/RJ9fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAAGAB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAAABNTMVMTUzFQU1MxUxNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFTM1MxUxNTMVBTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVBzUzFTE1MxUCcX19/ol9fX3+DH19fX39j319fX19/RJ9fX19fX19/ol9ffp9fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19ABwAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawBvAAATNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUHNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUxNTMVfX19fX19fX38lX19+n19fX19fX19ffp9ffyVfX0Bd319/RJ9fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AGwB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAAABNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUFNTMVMTUzFQc1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUxNTMVMTUzFTE1MxUBd319fX39j319/ol9ffp9fX19fX39En19AXd9ffyVfX0Bd319/RJ9fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19ABMAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAAATNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVBzUzFTE1MxUFNTMVMTUzFQU1MxUxNTMVBTUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVfX19fX19fX36fX3+iX19/ol9ff6JfX36fX36fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19AAAfAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAbwBzAHcAewAAEzUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVMTUzFfp9fX19ff0SfX0Bd319/JV9fQF3fX39En19fX19/RJ9fQF3fX38lX19AXd9ff0SfX19fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19ABsAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawAAEzUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFQc1MxUxNTMVBTUzFTE1MxUFNTMVMTUzFTE1MxUxNTMV+n19fX19/RJ9fQF3fX38lX19AXd9ff0SfX19fX19+n19/ol9ff2PfX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19AAAIAH0A+gF3A2sAAwAHAAsADwATABcAGwAfAAATNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFX19ffp9ffp9ffp9fQLufX19fX19fX19+n19fX19fX19fQAADgB9AH0C7gPoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwAAATUzFTE1MxUFNTMVMTUzFQU1MxUxNTMVBTUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUB9H19/ol9ff6JfX3+iX19fX19fX19fX19A2t9fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19AAAOAH0AfQLuA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3AAATNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFQU1MxUxNTMVBTUzFTE1MxUFNTMVMTUzFX19fX19fX19fX19ff6JfX3+iX19/ol9fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAeAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAbwBzAHcAAAE1MxUxNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQF3fX19/gx9fX19ff0SfX0Bd319/JV9fQF3fX38lX19fX19fX38lX19AXd9ffyVfX0Bd319A2t9fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AACIAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawBvAHMAdwB7AH8AgwCHAAATNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVfX19fX19ff0SfX0Bd319/JV9fQF3fX38lX19fX19ff0SfX0Bd319/JV9fQF3fX38lX19fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AABYAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAAABNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVMzUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVAXd9fX19/Y99ffp9ffyVfX36fX36fX19fX36fX39j319fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19AAAeAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAbwBzAHcAABM1MxUxNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVMTUzFX19fX19ff2PfX36fX39En19AXd9ffyVfX0Bd319/JV9fQF3fX38lX19+n19/RJ9fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19AAAbAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAABM1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFX19fX19fX19/JV9ffp9ffp9fX19ff2PfX36fX36fX19fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19ABYAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAAATNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVfX19fX19fX38lX19+n19+n19fX19/Y99ffp9ffp9fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AABwAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawBvAAABNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVBzUzFTE1MxUzNTMVMTUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUxNTMVAXd9fX19/Y99ffp9ffyVfX36fX36fX19/JV9fQF3fX39En19+n19/Y99fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AHwB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAG8AcwB3AHsAABM1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxV9fX0Bd319/JV9fQF3fX38lX19AXd9ffyVfX19fX19ffyVfX0Bd319/JV9fQF3fX38lX19AXd9fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AEgB9AH0CcQPoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAAATNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxV9fX19ff6JfX36fX36fX36fX36fX3+iX19fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAAFgB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAAAE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUFNTMVMTUzFTM1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUB9H19fX3+iX19+n19+n19/RJ9ffp9ff0SfX36fX39j319fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19ABwAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawBvAAATNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVfX19AXd9ffyVfX36fX39En19fX19/Y99fX19/gx9fX19ff2PfX36fX39En19AXd9fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AABMAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAAATNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVfX19+n19+n19+n19+n19+n19+n19fX19fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19ACIAfQB9A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwBLAE8AUwBXAFsAXwBjAGcAawBvAHMAdwB7AH8AgwCHAAATNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUxNTMVMzUzFTE1MxUxNTMVBTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVMzUzFTM1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVfX19AXd9ffyVfX19fX19ffyVfX19fX19ffyVfX19fX19ffyVfX0Bd319/JV9fQF3fX38lX19AXd9fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AIgB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAG8AcwB3AHsAfwCDAIcAABM1MxUxNTMVITUzFTE1MxUFNTMVMTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxV9fX0Bd319/JV9fX36fX38lX19fX19fX38lX19fX19fX38lX19+n19ffyVfX0Bd319/JV9fQF3fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19AAAaAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAAABNTMVMTUzFTE1MxUFNTMVMTUzFTM1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMTUzFQF3fX19/gx9fX19ff0SfX0Bd319/JV9fQF3fX38lX19AXd9ff0SfX19fX3+DH19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAaAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAAATNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFX19fX19fX39En19AXd9ffyVfX0Bd319/JV9fX19fX39En19+n19+n19A2t9fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19AAAdAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AYwBnAGsAbwBzAAABNTMVMTUzFTE1MxUFNTMVMTUzFTM1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFTM1MxUxNTMVMzUzFQU1MxUxNTMVMzUzFTE1MxUFNTMVMTUzFTE1MxUzNTMVMTUzFQF3fX19/gx9fX19ff0SfX0Bd319/JV9fQF3fX38lX19fX19fX38lX19+n19/Y99fX19fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AIAB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAG8AcwB3AHsAfwAAEzUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFTM1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVITUzFTE1MxV9fX19fX19/RJ9fQF3fX38lX19AXd9ffyVfX19fX19/RJ9fX19ff2PfX36fX39En19AXd9fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAAGwB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAAATNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFQc1MxUxNTMVMTUzFTE1MxUxNTMVBzUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUxNTMVMTUzFTE1MxX6fX19fX39En19AXd9ffyVfX19fX19fX19fX38lX19AXd9ff0SfX19fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQASAH0AfQNrA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcAABM1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxUHNTMVMTUzFX19fX19fX3+DH19+n19+n19+n19+n19+n19A2t9fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AHQB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAG8AcwAAEzUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUxNTMVMTUzFTE1MxV9fX0Bd319/JV9fQF3fX38lX19AXd9ffyVfX0Bd319/JV9fQF3fX38lX19AXd9ff0SfX19fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AGAB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAAATNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMTUzFQc1MxV9fX0Bd319/JV9fQF3fX38lX19AXd9ffyVfX0Bd319/RJ9fX19ff4MfX19+n0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAAIgB9AH0D6APoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwBTAFcAWwBfAGMAZwBrAG8AcwB3AHsAfwCDAIcAABM1MxUxNTMVITUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFQU1MxUxNTMVMzUzFTM1MxUxNTMVBTUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFQU1MxUxNTMVMTUzFTM1MxUxNTMVMTUzFQU1MxUxNTMVITUzFTE1MxV9fX0Bd319/JV9fQF3fX38lX19AXd9ffyVfX19fX19ffyVfX19fX19ffyVfX19fX19ffyVfX0Bd319A2t9fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAXAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAAATNTMVMTUzFSE1MxUxNTMVBTUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMTUzFQc1MxUHNTMVMTUzFTE1MxUFNTMVMTUzFTM1MxUxNTMVBTUzFTE1MxUhNTMVMTUzFX19fQF3fX39En19fX19/gx9fX36ffp9fX3+DH19fX19/RJ9fQF3fX0Da319fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX0AFAB9AH0DawPoAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AD8AQwBHAEsATwAAEzUzFTE1MxUzNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUFNTMVMTUzFTE1MxUxNTMVBTUzFTE1MxUHNTMVMTUzFQc1MxUxNTMVBzUzFTE1MxV9fX36fX39En19+n19/Y99fX19/ol9ffp9ffp9ffp9fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fQAYAH0AfQPoA+gAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcASwBPAFMAVwBbAF8AABM1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFTE1MxUFNTMVMTUzFQU1MxUxNTMVBTUzFTE1MxUFNTMVMTUzFQU1MxUxNTMVBzUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFX19fX19fX19/ol9ff6JfX3+iX19/ol9ff6JfX36fX19fX19fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19AAwAfQH0A+gD6AADAAcACwAPABMAFwAbAB8AIwAnACsALwAAATUzFQc1MxUxNTMVMTUzFQU1MxUxNTMVMzUzFTE1MxUFNTMVMTUzFSE1MxUxNTMVAfR9+n19ff4MfX19fX39En19AXd9fQNrfX19fX19fX19fX19fX19fX19fX19fX19fX19AAAHAH0AfQPoAPoAAwAHAAsADwATABcAGwAANzUzFTE1MxUxNTMVMTUzFTE1MxUxNTMVMTUzFX19fX19fX19fX19fX19fX19fX19fX19AAAAAAAADgCuAAEAAAAAAAAALQAAAAEAAAAAAAEACgAtAAEAAAAAAAIABwA3AAEAAAAAAAMADQA+AAEAAAAAAAQACgAtAAEAAAAAAAUAAwBLAAEAAAAAAAYAEQBOAAMAAQQJAAAAWgBfAAMAAQQJAAEAFAC5AAMAAQQJAAIADgDNAAMAAQQJAAMAGgDbAAMAAQQJAAQAFAC5AAMAAQQJAAUABgD1AAMAAQQJAAYAIgD7QXJjYWRlIFdPVy4gVGhlIGp1a2Vib3ggY2FiaW5ldCdzIG93biBnbHlwaHMuQVdPVyBQaXhlbFJlZ3VsYXJBV09XUGl4ZWwtMS4wMS4wQVdPV1BpeGVsLVJlZ3VsYXIAQQByAGMAYQBkAGUAIABXAE8AVwAuACAAVABoAGUAIABqAHUAawBlAGIAbwB4ACAAYwBhAGIAaQBuAGUAdAAnAHMAIABvAHcAbgAgAGcAbAB5AHAAaABzAC4AQQBXAE8AVwAgAFAAaQB4AGUAbABSAGUAZwB1AGwAYQByAEEAVwBPAFcAUABpAHgAZQBsAC0AMQAuADAAMQAuADAAQQBXAE8AVwBQAGkAeABlAGwALQBSAGUAZwB1AGwAYQByAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADIAAAADAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExB3VuaTAwMjEHdW5pMDAyNQd1bmkwMDJBB3VuaTAwMkIHdW5pMDAyRAd1bmkwMDJFB3VuaTAwMkYHdW5pMDAzMAd1bmkwMDMxB3VuaTAwMzIHdW5pMDAzMwd1bmkwMDM0B3VuaTAwMzUHdW5pMDAzNgd1bmkwMDM3B3VuaTAwMzgHdW5pMDAzOQd1bmkwMDNBB3VuaTAwM0MHdW5pMDAzRQd1bmkwMDQxB3VuaTAwNDIHdW5pMDA0Mwd1bmkwMDQ0B3VuaTAwNDUHdW5pMDA0Ngd1bmkwMDQ3B3VuaTAwNDgHdW5pMDA0OQd1bmkwMDRBB3VuaTAwNEIHdW5pMDA0Qwd1bmkwMDREB3VuaTAwNEUHdW5pMDA0Rgd1bmkwMDUwB3VuaTAwNTEHdW5pMDA1Mgd1bmkwMDUzB3VuaTAwNTQHdW5pMDA1NQd1bmkwMDU2B3VuaTAwNTcHdW5pMDA1OAd1bmkwMDU5B3VuaTAwNUEHdW5pMDA1RQd1bmkwMDVGAAA=') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- the web headings' face, ours now rather than Google's. The page used to
       pull Press Start 2P from fonts.googleapis.com, which meant two preconnects,
       a render-blocking stylesheet on somebody else's server and a third party
       watching every visitor read a page about a £99 upgrade. This is the design
       system's own latin subset (assets/fonts/press-start-2p-latin.woff2,
       12,512 B, 220 glyphs -- verified to carry every character the copy uses,
       the pound sign, the comma, the apostrophe, the question mark and the
       middle dot included). url(), not base64: the served page gets a cacheable
       12.5 KB binary instead of 17 KB of base64 inside a render-blocking
       stylesheet, and both distribution builds inline it on their way out.
       swap, so the copy is readable in the fallback while it arrives. */
@font-face {
  font-family: 'Press Start 2P';
  src: url('../../assets/fonts/press-start-2p-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette — jb-gfx palette + jb-ui literals */
  --jb-bg: #05060b;          /* the cabinet ground (inside every screen frame) */
  --jb-ground: #0a0a0f;      /* the page ground (handoff token) */
  --jb-neon: #40c8ec;
  --jb-hot: #e8208a;
  --jb-gold: #f2e310;
  --jb-ink: #e7f0ff;
  --jb-green: #39ff14;       /* INV_GREEN: invaders, AURORA hem, Spotify badge */
  --jb-led: #3df27a;         /* the live-source LED, ON pills */
  --jb-dim: #5d6b86;         /* rail labels at rest, HUD hint, blurbs */
  --jb-dim-aa: #6b7386;      /* dim bumped to 4.2:1 where a 16 px pixel line carries information */
  --jb-faint: #3d4860;       /* OFF pills, counts at rest */
  --jb-track: #2c3650;       /* scrubber track, unlit volume segments, fader rails */
  --jb-panel: #070810;       /* PANEL_BG, the art panel */
  --jb-glass-list: rgba(6, 7, 15, .72);
  --jb-yt: #ff0033;
  --jb-btn-a: #446cbc;       /* the A button square on the tip build, measured off now-playing.jpg */
  --jb-btn-b: var(--jb-gold);
  /* handoff web tokens */
  --jb-body: #b9c0d0;
  --jb-secondary: #8b93a7;
  --jb-web-dim: #565d6e;
  --jb-hairline: rgba(255, 255, 255, .08);
  --jb-img-border: rgba(64, 200, 236, .3);
  --jb-glass: rgba(255, 255, 255, .03);
  --jb-r-card: 14px;
  --jb-r-btn: 6px;
  --jb-r-panel: 18px;
  --jb-glow-cyan: 0 0 24px rgba(64, 200, 236, .35);
  --jb-glow-magenta: 0 0 24px rgba(232, 32, 138, .45);
  --jb-glow-gold: 0 0 24px rgba(242, 227, 16, .5);
  /* type */
  --jb-font-px: 'AWOW Pixel', 'Press Start 2P', monospace;
  --jb-font-head: 'Press Start 2P', 'AWOW Pixel', monospace;
  --jb-font-body: Inter, Helvetica, Arial, sans-serif;
  /* motion (design-system springs) */
  --spring-standard: cubic-bezier(.22, 1, .36, 1);
  --spring-bouncy: cubic-bezier(.34, 1.56, .64, 1);
  --spring-snappy: cubic-bezier(.2, .8, .2, 1);
  /* geometry */
  --jb-rail-w: 224px;        /* 14 * 8 * s */
  --jb-rail-pitch: 24px;     /* item_h floors at 10s = 20 on the cabinet; +4 px breath for a mouse */
  --jb-hud-h: 32px;
  --jb-strip-h: 56px;        /* phone: the rail as a bottom strip, when there IS a rail */
  --jb-horizon: 62vh;        /* the page horizon; the cabinet's is 0.56 h */
  --jb-blink: 800ms;         /* 2.5 Hz square wave: 400 on / 400 off */
}

/* Reserve the bottom strip only for a page that actually has a rail. The promo page has none -- it
   has the dock -- and reserving 56 px there floated the HUD above a dead band and pushed its hint
   into the buttons. Engines without :has() keep the old, harmless-for-the-demo reservation. */
@supports selector(:has(*)) {
  :root { --jb-strip-h: 0px; }
  body:has(.rail) { --jb-strip-h: 56px; }
}

html { color-scheme: dark; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--jb-ground);
  color: var(--jb-body);
  font-family: var(--jb-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- the 2.5 Hz blink and the other cabinet clocks ---------- */
@keyframes jb-blink { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: var(--jb-blink-low, 0); } }
@keyframes jb-scanroll { from { transform: translateY(-120px); } to { transform: translateY(100%); } }
@keyframes jb-pop { from { transform: scale(.96); opacity: .001; } to { transform: scale(1); opacity: 1; } }
@keyframes jb-coinflicker { 0% { opacity: 1; } 20% { opacity: .15; } 33% { opacity: 1; } 55% { opacity: .2; } 60% { opacity: 1; } 100% { opacity: 1; } }
@keyframes jb-marquee { 0%, 8% { transform: translateX(0); } 92%, 100% { transform: translateX(var(--jb-marquee-x, -50%)); } }
@keyframes jb-toast { 0% { opacity: 1; } 66% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jb-crt-on { 0% { transform: scaleY(.004); filter: brightness(2); } 60% { transform: scaleY(1); filter: brightness(2); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jb-typein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- pixel text ---------- */
.px {
  font-family: var(--jb-font-px);
  font-size: 16px;            /* one glyph = 8 * s */
  line-height: 1.25;          /* room for a second line: a phone will wrap these */
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: pre-wrap;      /* the cabinet's double spaces survive, but the line can still wrap */
  overflow-wrap: break-word;
}
.px--2 { font-size: 32px; }   /* 2s: artist row, wordmark, toast name */
.px--3 { font-size: 48px; }   /* 3s: the title row, the ABOUT wordmark */
/* The one line that may NOT wrap: a row that only reads as a fixed grid of glyphs (the EQ's band
   labels). It scrolls sideways inside itself instead of widening the page. `white-space: pre` on
   every .px is what made a 390 px window carry a 760 px document. */
.px--quote { white-space: pre; display: block; overflow-x: auto; overscroll-behavior-x: contain; }
.head {
  font-family: var(--jb-font-head);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.5;
}
.c-neon { color: var(--jb-neon); } .c-hot { color: var(--jb-hot); } .c-gold { color: var(--jb-gold); }
.c-ink { color: var(--jb-ink); } .c-dim { color: var(--jb-dim-aa); } .c-green { color: var(--jb-led); }

/* ---------- layers ---------- */
.jb-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.jb-layer canvas, .jb-layer img { display: block; }
.jb-layer--sky { z-index: 1; }
.jb-layer--sun { z-index: 2; mix-blend-mode: screen; }
.jb-layer--grid { z-index: 3; }
.jb-layer--world { z-index: 2; }   /* the phone's sun and grid on ONE canvas */
/* setPresence() is a per-section dimmer, so a section change costs a composite, not a repaint */
.jb-layer--sky, .jb-layer--sun, .jb-layer--grid, .jb-layer--world { transition: opacity 400ms var(--spring-standard); }
.jb-layer--viz { z-index: 4; opacity: .85; transition: opacity 700ms var(--spring-standard); }
.jb-layer--viz canvas { width: 100%; height: 100%; }
.jb-content { position: relative; z-index: 7; }
.px-scale { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- the rail (draw_inner: rail_w = 14*8*s, rule s wide NEON a.6, wordmark at (32,32)) ---------- */
.rail {
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 6;
  width: var(--jb-rail-w);
  box-sizing: border-box;
  background: rgba(10, 10, 15, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-right: 2px solid rgba(64, 200, 236, .6);
  padding: 0;
  display: flex; flex-direction: column;
}
.rail__mark {
  position: relative;
  height: 112px;                 /* the first rail row is at y = 112 on the capture */
  display: block;
  text-decoration: none;
}
.rail__mark .a { position: absolute; left: 32px; top: 32px; color: var(--jb-neon); }
.rail__mark .w { position: absolute; left: 64px; top: 32px; color: var(--jb-hot); }
.rail__mark .j { position: absolute; left: 32px; top: 80px; color: var(--jb-ink); opacity: .8; }
.rail__list { list-style: none; margin: 0; padding: 0; position: relative; }
.rail__list > li { display: block; }
.rail-item {
  position: relative;
  display: block;
  height: var(--jb-rail-pitch);
  line-height: var(--jb-rail-pitch);
  padding-left: 48px;            /* text x = 3*8*s */
  color: var(--jb-dim);
  text-decoration: none;
  outline-offset: -2px;
  transition: color 120ms linear;
}
.rail-item:hover, .rail-item:focus-visible { color: var(--jb-ink); }
.rail-item[aria-current] { color: var(--jb-bg); }
/* the active plate: NEON a.85, full rail width, slides between rows */
.rail__plate {
  position: absolute; left: 0; right: 0;
  height: var(--jb-rail-pitch);
  background: rgba(64, 200, 236, .85);
  transform: translateY(var(--jb-plate-y, 0));
  transition: transform 180ms var(--spring-snappy);
  pointer-events: none;
}
/* the gold > cursor at x = 16, blinking at 2.5 Hz */
.cursor {
  position: absolute; left: 16px; top: 0;
  color: var(--jb-gold);
  opacity: 0;
  pointer-events: none;
}
.rail-item:hover > .cursor, .rail-item:focus-visible > .cursor, .rail-item.is-cursor > .cursor {
  animation: jb-blink var(--jb-blink) steps(1) infinite;
}
.rail-item[aria-current] > .cursor { color: var(--jb-bg); }
/* the live LED: 4s square at x = rail_w - 10s */
.led {
  position: absolute; right: 12px; top: 8px;
  width: 8px; height: 8px;
  background: var(--jb-led);
  opacity: 0;
  --jb-blink-low: .4;
}
.led.is-on { opacity: 1; animation: jb-blink var(--jb-blink) steps(1) infinite; }
.led.is-gold { background: var(--jb-gold); --jb-blink-low: .35; }
.led.is-green { background: var(--jb-green); }
.led.is-hot { background: var(--jb-hot); --jb-blink-low: .35; }
.led.is-steady { animation: none; }
.rail__exit { margin-top: auto; padding: 16px 0 16px 48px; }
.rail__exit a { color: var(--jb-dim-aa); text-decoration: none; }
.rail__exit a:hover { color: var(--jb-ink); }

/* ---------- pills (chip_plate: NEON plate 12s tall, BG text, 4s + 2s of side padding) ---------- */
.pill {
  display: inline-block;
  box-sizing: border-box;
  height: 24px; line-height: 24px;
  padding: 0 6px 0 6px;
  background: var(--jb-neon);
  color: var(--jb-bg);
  font-family: var(--jb-font-px); font-size: 16px; text-transform: uppercase; white-space: pre;
  vertical-align: middle;
}
.pill--yt { background: var(--jb-yt); }
.pill--sp { background: var(--jb-green); }
.pill--wifi { background: var(--jb-neon); }
.pill--gold { background: var(--jb-gold); }
.pill--onair {
  background: var(--jb-hot);
  width: 144px; text-align: center; padding: 0;   /* 9*8*s wide */
  --jb-blink-low: .55;
  animation: jb-blink var(--jb-blink) steps(1) infinite;
}
.pill--on, .pill--off {
  width: 80px; height: 20px; line-height: 20px; padding: 0; text-align: center;   /* 5*8*s by 10*s */
}
.pill--on { background: var(--jb-led); color: var(--jb-bg); }
.pill--off { background: var(--jb-faint); color: var(--jb-dim); }
.pill--refused { background: var(--jb-hot); color: var(--jb-bg); --jb-blink-low: .85; animation: jb-blink 400ms steps(1) 1; }
.pill--dark { background: rgba(6, 7, 15, .9); color: var(--jb-gold); border: 1px solid var(--jb-hairline); }

/* ---------- the HUD (hint at (16, 379), 16 px dim a.9; the chip GOLD; VOL segments 4s x 8s at a 6s pitch) ---------- */
.hud {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 8;
  height: var(--jb-hud-h);
  box-sizing: border-box;
  padding: 0 16px 0 calc(var(--jb-rail-w) + 16px);
  background: rgba(10, 10, 15, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--jb-hairline);
  display: flex; align-items: center; gap: 24px;
  color: var(--jb-dim-aa);
}
.hud__hint { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.hud__hint > span { display: inline-block; white-space: nowrap; }
.hud__hint.is-marquee > span { animation: jb-marquee 8s linear infinite; }
.hud__btn { display: inline-block; width: 8px; height: 8px; margin: 0 2px 0 0; vertical-align: 1px; opacity: .8; }
.hud__btn--a { background: var(--jb-btn-a); }
.hud__btn--b { background: var(--jb-btn-b); }
.hud__chip { color: var(--jb-gold); flex: 0 0 auto; }
.hud__vol { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hud__vol .pct { color: var(--jb-ink); min-width: 3ch; text-align: right; }
.hud__segs { display: inline-flex; gap: 4px; }
.hud__segs i { display: block; width: 8px; height: 16px; background: var(--jb-track); }
.hud__segs i.on { background: var(--jb-neon); }
.hud__range {
  -webkit-appearance: none; appearance: none;
  width: 116px; height: 16px; margin: 0; background: transparent; cursor: pointer;
  position: absolute; opacity: 0;
}
.hud__volwrap { position: relative; display: inline-flex; }
.hud__tag { color: var(--jb-dim-aa); }

/* ---------- INSERT COIN ---------- */
.coin {
  font-family: var(--jb-font-px); font-size: 16px; text-transform: uppercase; white-space: pre;
  background: var(--jb-gold); color: var(--jb-bg);
  border: 0; border-radius: 0;
  height: 32px; padding: 0 16px;
  cursor: pointer;
  box-shadow: var(--jb-glow-gold);
  --jb-blink-low: .55;
  animation: jb-blink var(--jb-blink) steps(1) infinite;
}
.coin:hover { animation: none; opacity: 1; }
.coin[aria-pressed="true"] { animation: none; background: var(--jb-track); color: var(--jb-ink); box-shadow: none; }
.coin.is-flicker { animation: jb-coinflicker 180ms steps(1) 1; }
.coin--big { min-height: 56px; height: auto; padding: 12px 24px; font-size: 16px; }
/* A 32 px plate is a mouse target. Where the pointer is a finger, every coin is at least 44. */
@media (pointer: coarse) {
  .coin { min-height: 44px; height: auto; padding: 10px 16px; }
  .coin--big { min-height: 56px; padding: 12px 24px; }
}

/* ---------- a screen-shaped block: 16:9, the cabinet ground, the CRT scanline overlay ---------- */
.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--jb-bg);
  border: 1px solid var(--jb-img-border);
  border-radius: var(--jb-r-btn);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 24px 64px rgba(0, 0, 0, .5);
}
.screen > img, .screen > video, .screen > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.screen::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.screen::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 120px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .06) 50%, transparent);
  animation: jb-scanroll 1.5s linear infinite;
}
.screen--band { aspect-ratio: 4 / 1; }   /* the 1280x320 visualizer strip */
.screen--flat { box-shadow: none; }
/* every frame says what it is: the source pill in its corner, above the scanlines */
.screen > .pill, .pill--corner { position: absolute; left: 8px; top: 8px; z-index: 2; }

/* ---------- the living screenshot: jukebox-screens.js ----------
 * The still stays WHOLE and the band clip is laid over the region it was cropped from
 * (crop=1280:320:0:400), so there is no join to keep aligned -- only a rectangle that covers.
 * --jb-band-y is 400/720 of the frame. At any width w the frame is w x 9w/16, so the band
 * region is w x w/4: exactly the clip's own 4:1, at every size, with nothing to round. */
.jb-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; --jb-band-y: 55.5556%; }
.jb-screen .jb-screen__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Sized, not stretched between insets: for a REPLACED element (a video is one) `width: auto`
 * with left and right both set means its INTRINSIC width, not the gap between them, so
 * `inset: 55.5556% 0 0 0` leaves a 1280x320 video sitting at its natural size. It is anchored
 * to the bottom edge and given the band's own fraction of the height, so the exact edge is the
 * frame's own border and the only rounding left is a ten-thousandth of a pixel at the seam. */
.jb-screen .jb-screen__band {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: calc(100% - var(--jb-band-y)); object-fit: cover;
  background: transparent; pointer-events: none;
  opacity: 0; transition: opacity 200ms linear;   /* the still is the poster underneath */
}
.jb-screen.is-live .jb-screen__band { opacity: 1; }

/* ---------- glass ---------- */
.glass {
  background: var(--jb-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--jb-hairline);
  border-radius: var(--jb-r-card);
  padding: 24px;
}
.glass--list { background: var(--jb-glass-list); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .5); border-radius: 0; padding: 0; }
.glass--list > * { padding: 12px 16px; border-bottom: 1px solid var(--jb-hairline); }
.glass--list > *:last-child { border-bottom: 0; }
.glass--pop { animation: jb-pop 250ms var(--spring-bouncy) both; }

/* ---------- the art frame (208 px panel, PANEL_BG fill; idle ring 2 px HOT a.9, playing 3 px NEON blinking) ---------- */
.art-frame {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background: var(--jb-panel);
  border: 2px solid rgba(232, 32, 138, .9);
  overflow: hidden;
}
.art-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-frame--playing { border: 3px solid var(--jb-neon); --jb-blink-low: .7; animation: jb-blink var(--jb-blink) steps(1) infinite; }
.art-frame--note::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--jb-note-url, none) center / 50% no-repeat;
  image-rendering: pixelated;
  opacity: .9;
}

/* ---------- the NOW rows ---------- */
.now-title { color: var(--jb-neon); font-size: 48px; overflow: hidden; text-overflow: ellipsis; }
.now-artist { color: var(--jb-hot); font-size: 32px; overflow: hidden; text-overflow: ellipsis; }
.now-album { color: var(--jb-dim-aa); font-size: 16px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the scrubber (track 3s tall #2c3650, NEON fill, INK playhead 3s x 7s) ---------- */
.scrubber { position: relative; height: 6px; background: var(--jb-track); max-width: 480px; }
.scrubber__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--jb-neon); width: var(--jb-progress, 33%); }
.scrubber__head { position: absolute; top: -4px; width: 6px; height: 14px; background: var(--jb-ink); left: calc(var(--jb-progress, 33%) - 2px); }
.scrubber__times { display: flex; justify-content: space-between; max-width: 480px; margin-top: 14px; }
.scrubber__times .t0 { color: var(--jb-ink); } .scrubber__times .t1 { color: var(--jb-dim-aa); }

/* ---------- tab strips (SPTFY / YOUTUBE / WIFI: active tab on a NEON plate, the rest dim) ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tab {
  height: 24px; line-height: 24px; padding: 0 6px;
  color: var(--jb-dim-aa); background: transparent; border: 0; cursor: pointer;
  font-family: var(--jb-font-px); font-size: 16px; text-transform: uppercase; white-space: pre;
}
.tab:hover { color: var(--jb-ink); }
.tab[aria-selected="true"] { background: var(--jb-neon); color: var(--jb-bg); }

/* ---------- the ABOUT stamp ---------- */
.stamp { border-top: 1px solid var(--jb-hairline); padding-top: 18px; }
.stamp__mark { color: var(--jb-neon); font-size: 48px; }
.stamp__crew { color: var(--jb-hot); margin-top: 12px; }
.stamp__plates { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.stamp__plate { background: rgba(6, 7, 15, .9); border: 1px solid var(--jb-hairline); padding: 8px 12px; }
.stamp__plate .k { color: var(--jb-dim-aa); display: block; }
.stamp__plate .v { color: var(--jb-gold); display: block; margin-top: 6px; }
.ticks { list-style: none; margin: 16px 0 0; padding: 0; }
.ticks li { position: relative; padding-left: 20px; margin: 8px 0; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; background: var(--jb-led); }
.ticks li.is-coming::before { background: var(--jb-faint); }
.ticks li.is-coming { color: var(--jb-dim-aa); }

/* ---------- the toast (name 2s GOLD + blurb s dim on an opaque BG plate, 1.5 s, fading over its last third) ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--jb-hud-h) + 80px);
  z-index: 9;
  transform: translateX(-50%);
  background: var(--jb-bg);
  padding: 4px 32px 8px;
  text-align: left;
  pointer-events: none;
  opacity: 0;
}
.toast.is-on { animation: jb-toast 1.5s linear 1 both; }
.toast__name { color: var(--jb-gold); font-size: 32px; }
.toast__blurb { color: var(--jb-dim-aa); margin-top: 8px; }

/* ---------- the CRT power-on line (cold entry) ---------- */
.crt-on {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background: var(--jb-ink);
  transform-origin: 50% 50%;
  animation: jb-crt-on 300ms linear 1 both;
}

/* ==========================================================================
   THE START SEQUENCE (jukebox-poweron.js + jukebox-startup.js)
   A cabinet does not begin with music. It takes the coin, admits the credit,
   begs to be started, and only then plays. This is the picture of that, and it
   is one score with the sound: every duration and delay below is a custom
   property written from `FANFARE.marks`, and every keyframe percentage is a
   whole sixteenth of the fanfare's twelve, expressed as a fraction of whichever
   span that keyframe runs over. Nothing here is tuned by eye.

   The marks are THE GROWL's measured moments -- the crest at 9/16, the pitch
   lock at 10/16, the resolve at 11/16, the downbeat at 12/16 -- so the crest is
   a sixteenth later than the sound this replaced and the percentages below moved
   with it. In the fanfare's own twelve sixteenths: 75 % is the bloom, 83.333 %
   the landing, 91.667 % the arrival.

     --po-t0     the measured lead from this frame to the fanfare's first sample
     --po-rise   start -> bloom, 1.089 s: the tube opening, the sun rising
     --po-swp    bloom -> root, 0.242 s: the scanline crossing
     --po-fall   bloom -> downbeat, 0.363 s: the wash falling away
     --po-tail   the mark's wipe after the downbeat, 0.18 s
     --po-line   3 px expressed as a scaleY, so the strike is a LINE at any height
     --po-wash   the peak of the overbright frame

   Transform and opacity only: no filter, no shadow, no layout, nothing that
   repaints. The elements exist for 1.6 s and are then removed.
   ========================================================================== */

/* the tube: a line that snaps open. The gradient is what makes the open frame a
   BAND of light rather than a flat white rectangle -- at scaleY .004 you see
   only the white core, at scaleY 1 the whole falloff. */
@keyframes aw-po-open {
  0%    { transform: scaleX(0) scaleY(var(--po-line, .004)); opacity: .92; }
  7.716% { transform: scaleX(1) scaleY(var(--po-line, .004)); opacity: .92; }  /* 84 ms: the strike */
  45%   { transform: scaleX(1) scaleY(calc(var(--po-line, .004) * 3)); opacity: .52; }
  72%   { transform: scaleX(1) scaleY(.03); opacity: .38; }
  88%   { transform: scaleX(1) scaleY(.12); opacity: .42; }
  96%   { transform: scaleX(1) scaleY(.42); opacity: .52; }
  100%  { transform: scaleX(1) scaleY(1);   opacity: var(--po-wash, .45); }     /* THE BLOOM */
}
/* and then it falls away. 33.333 % of this is the landing and 66.667 % the arrival
   on A, because bloom -> downbeat is three sixteenths and those are two of them.
   The early knee at 8.333 % is a twelfth of the fall: a shape point, not a cue. */
@keyframes aw-po-settle {
  0%       { transform: scaleX(1) scaleY(1); opacity: var(--po-wash, .45); }
  8.333%   { transform: scaleX(1) scaleY(1); opacity: calc(var(--po-wash, .45) * .84); }
  33.333%  { transform: scaleX(1) scaleY(1); opacity: calc(var(--po-wash, .45) * .22); }
  66.667%  { transform: scaleX(1) scaleY(1); opacity: calc(var(--po-wash, .45) * .13); }
  100%     { transform: scaleX(1) scaleY(1); opacity: 0; }
}
/* one bright band, top edge to bottom edge, over the 242 ms between the bloom and
   the arrival on A. The easing is front-loaded, so it is already 94.6 % of the way
   down when PLAYER 1 is struck -- where it used to finish -- and it clears the
   frame on the root. The band sits at the middle of a full-height element, so -50%
   puts it ON the top edge and +50% on the bottom: +/-100% would spend half the
   animation travelling off-screen and the sweep would only be seen for 121 ms of
   its 242. */
@keyframes aw-po-sweep {
  0%    { transform: translateY(-50%); opacity: 0; }
  12%   { opacity: .95; }
  82%   { opacity: .55; }
  100%  { transform: translateY(50%); opacity: 0; }
}
/* struck, not faded: three hard steps, the way the note arrives */
@keyframes aw-po-strike {
  0%    { opacity: 0; transform: scale(1.08); }
  100%  { opacity: 1; transform: scale(1); }
}
/* the downbeat: the mark is not dismissed, the tube snaps shut on it */
@keyframes aw-po-wipe {
  0%    { opacity: 1; transform: scaleY(1); }
  60%   { opacity: .9; transform: scaleY(.08); }
  100%  { opacity: 0; transform: scaleY(.004); }
}
/* the world rising with the sweep. It ENDS on var(--aw-veil) -- the exact value
   the page's composer is holding -- so the animation releases with no step. */
@keyframes aw-po-world {
  0%       { opacity: calc(var(--aw-veil, .6) + .12); }
  75%      { opacity: calc(var(--aw-veil, .6) * .30); }   /* 9/12: the bloom */
  83.333%  { opacity: calc(var(--aw-veil, .6) * .62); }   /* 10/12: PLAYER 1 */
  100%     { opacity: var(--aw-veil, .6); }
}
@keyframes aw-po-bail { to { opacity: 0; } }

.aw-po {
  position: fixed; inset: 0; z-index: 30;      /* over the nav too: the whole screen powers on */
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
  display: grid; place-items: center;
}
.aw-po > * { grid-area: 1 / 1; }
.aw-po__tube, .aw-po__sweep {
  position: absolute; inset: 0;
  display: block;
  opacity: 0;                                  /* the resting state, for the frame before it starts */
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
/* a BAND of light, not a flat rectangle: the plateau is what you see when the tube
   is open, and its white core is the 3 px line at the strike. A thin core alone
   measured 0.13 alpha a third of the way up the open frame -- a bloom nobody could
   see -- which is why the plateau is broad and the falloff is only at the edges. */
.aw-po__tube {
  background: linear-gradient(180deg,
    rgba(231, 240, 255, 0) 0%, rgba(231, 240, 255, .30) 17%,
    rgba(255, 255, 255, .86) 37%, #ffffff 50%, rgba(255, 255, 255, .86) 63%,
    rgba(231, 240, 255, .30) 83%, rgba(231, 240, 255, 0) 100%);
}
.aw-po__sweep {
  background: linear-gradient(180deg,
    transparent 0%, transparent 42%,
    rgba(231, 240, 255, .45) 47%, #ffffff 50%, rgba(64, 200, 236, .85) 53%,
    transparent 60%, transparent 100%);
}
/* The cabinet's own plate, the same one .toast is: opaque ground, pixel face, no
   border. Struck over the middle of the window, so it needs its own ground --
   free-standing glyphs landed on top of the headline and neither could be read. */
.aw-po__mark {
  position: relative;
  text-align: center;
  background: var(--jb-bg);
  padding: 20px 40px 26px;
  max-width: min(90vw, 520px);
  box-sizing: border-box;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
/* Two classes deep on purpose. These are `.px` lines, and the page that hosts the
   kit re-sizes `.px` to 13 px on a phone from a stylesheet that loads after this
   one -- at equal specificity that wins, and the mark came out 13 px tall. */
.aw-po .aw-po__aw { font-size: clamp(48px, 10vw, 96px); line-height: 1; }
.aw-po .aw-po__p1 { font-size: clamp(16px, 3.6vw, 32px); line-height: 1; color: var(--jb-gold); margin-top: 16px; }

.aw-po.is-on .aw-po__tube {
  animation:
    aw-po-open var(--po-rise, 1.089s) linear var(--po-t0, 0s) both,
    aw-po-settle var(--po-fall, .363s) linear calc(var(--po-t0, 0s) + var(--po-bloom, 1.089s)) forwards;
}
.aw-po.is-on .aw-po__sweep {
  animation: aw-po-sweep var(--po-swp, .242s) cubic-bezier(.2, .8, .2, 1)
             calc(var(--po-t0, 0s) + var(--po-bloom, 1.089s)) forwards;
}
.aw-po.is-on .aw-po__mark {
  animation:
    aw-po-strike 90ms steps(3, end) calc(var(--po-t0, 0s) + var(--po-land, 1.21s)) forwards,
    aw-po-wipe var(--po-tail, .18s) linear calc(var(--po-t0, 0s) + var(--po-hand, 1.452s)) forwards;
}
/* a skip: the layer fades while its children carry on underneath, because a hard
   cut on an opening tube reads as a fault rather than as a choice */
.aw-po.is-bail { animation: aw-po-bail 140ms linear forwards; }

.aw-po-run .aw-veil {
  animation: aw-po-world var(--po-total, 1.452s) linear var(--po-t0, 0s) none;
}

/* ---------- attract: with a credit in, the plate asks to be pressed ----------
   Patient, not frantic: a 1.6 s breath against the coin's own 2.5 Hz blink, and
   it runs only where the page's animation budget already lets the coin move --
   the hero and the phone's dock. The HUD plate is fixed furniture that sits in
   the corner of every screenful, so it goes steady gold and stays quiet while
   somebody reads. */
/* The breath DIPS rather than rises, so 0 % is the lit plate. The HUD's copy is
   held at animation-play-state: paused by the page's budget, and a paused
   animation rests on its first keyframe: written the other way round, the one
   plate that never moves would also be the one permanently dimmed. */
@keyframes aw-po-attract {
  0%, 100% { opacity: 1;   box-shadow: 0 0 28px rgba(242, 227, 16, .75); }
  50%      { opacity: .84; box-shadow: 0 0 10px rgba(242, 227, 16, .28); }
}
.coin--start {
  background: var(--jb-gold); color: var(--jb-bg);
  animation: aw-po-attract 1600ms var(--spring-standard) infinite;
}
.coin--start[aria-pressed="true"] { background: var(--jb-gold); color: var(--jb-bg); }
/* while the fanfare is playing the plate stops asking: it has been pressed */
.coin--start.is-running { animation: none; opacity: 1; box-shadow: var(--jb-glow-gold); }
.aw-coin-status.is-attract { color: var(--jb-gold); }

/* ---------- focus ---------- */
:focus-visible { outline: 2px solid var(--jb-gold); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--jb-gold); color: var(--jb-bg); padding: 8px 12px; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
.skip:focus { left: 8px; }

/* ---------- the VIZ picker (draw_viz: name x = 272, blurb x = 448, pill at 1136; focused row plate NEON a.10 + GOLD >) ---------- */
.picker { color: var(--jb-ink); }
.picker__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.picker__head .title { color: var(--jb-ink); font-size: 32px; }
.picker__head .sub { color: var(--jb-dim-aa); }
.picker__head .set { margin-left: auto; }
.picker__head .set b { color: var(--jb-gold); font-weight: 400; margin-right: 8px; }
.picker__list { list-style: none; margin: 0; padding: 0; max-height: 448px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.picker__row {
  position: relative;
  display: grid; grid-template-columns: minmax(120px, 176px) minmax(0, 1fr) 80px; align-items: center; gap: 8px;
  height: 28px; padding: 0 8px 0 24px;
  cursor: pointer;
  color: var(--jb-ink);
}
.picker__row[aria-selected="true"] { background: rgba(64, 200, 236, .10); }
.picker__row[aria-selected="true"] .name { color: var(--jb-gold); }
.picker__row[aria-selected="true"] .cursor { animation: jb-blink var(--jb-blink) steps(1) infinite; }
.picker__row .cursor { left: 4px; top: 6px; }
.picker__row .name { overflow: hidden; white-space: nowrap; }
.picker__row .blurb { color: var(--jb-dim-aa); opacity: .9; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.picker__row.is-off .name { color: var(--jb-dim-aa); }
.picker__row.is-off .blurb { opacity: .55; }
.picker__row .dot { position: absolute; left: -4px; top: 10px; width: 8px; height: 8px; background: var(--jb-ink); }
.picker__row--pinned { margin-bottom: 4px; }
.picker__row .switch { justify-self: end; border: 0; cursor: pointer; }
.picker__preview { margin-top: 12px; }
.picker__caption { margin-top: 8px; color: var(--jb-dim-aa); display: flex; justify-content: space-between; gap: 16px; }
/* THE LIST'S LIVE WINDOW. jukebox-screens.js's LiveBand keeps ONE canvas in the preview (or, for a
 * mode that cannot be drawn here, that mode's clip) and lays it OVER the still, never beside it:
 * the window's box is the still's, whatever is drawing. It is invisible until the host carries
 * is-live, which the band sets only after the mode's first frame is on it, then fades up 200 ms. */
.picker__preview > .jb-band {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 200ms linear; pointer-events: none;
}
.picker__preview.is-live > .jb-band { opacity: 1; }

/* ---------- the picker as a swipe (phones): 23 cards under a thumb, no 20 px switches ---------- */
.picker--swipe .picker__rail { margin: 0 0 8px; }
.viz-card {
  background: rgba(6, 7, 15, .55);
  border: 1px solid var(--jb-hairline);
  border-radius: var(--jb-r-card);
  padding: 8px; box-sizing: border-box; cursor: pointer;
  transition: border-color 200ms var(--spring-standard), box-shadow 200ms var(--spring-standard);
}
.viz-card__shot { aspect-ratio: 2 / 1; }        /* the 4:1 band clip cropped to a card */
.viz-card__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; margin-top: 8px; align-items: baseline; }
.viz-card__meta .name { color: var(--jb-ink); }
.viz-card__meta .count { font-size: 13px; }
.viz-card__meta .blurb { grid-column: 1 / -1; color: var(--jb-dim-aa); font-size: 13px; }
.viz-card[aria-selected="true"] { border-color: var(--jb-neon); box-shadow: var(--jb-glow-cyan); }
.viz-card[aria-selected="true"] .name { color: var(--jb-gold); }
.viz-card.is-set { box-shadow: inset 3px 0 0 var(--jb-ink); }
.viz-card.is-set[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--jb-ink), var(--jb-glow-cyan); }
.viz-card.is-live .viz-card__shot { border-color: var(--jb-led); }

/* ---------- the rail primitive: a full-bleed snap row that always shows the next card ----------
   Cards are (100% - 40px) so the next one peeks past the edge: on a phone the only affordance that
   reliably says "there is more this way" is seeing part of the thing that is next. */
.jb-rail {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px calc(16px + env(safe-area-inset-right, 0px)) 4px calc(16px + env(safe-area-inset-left, 0px));
  scroll-padding-inline: calc(16px + env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-right, 0px));
}
.jb-rail::-webkit-scrollbar { display: none; }
.jb-rail__card { flex: 0 0 auto; width: min(420px, calc(100% - 40px)); scroll-snap-align: center; }
.jb-rail__dots { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin: 0 0 8px; }
.jb-rail__dots i { display: block; width: 6px; height: 6px; background: var(--jb-track); }
.jb-rail__dots i.is-on { background: var(--jb-neon); }
/* the edge fade that says a row keeps going */
.jb-fade-x {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

/* ---------- the deck: a pile of pictures that opens into a real layout ----------
   jukebox-deck.js. Both states are the SAME grid: open is the layout, closed is that layout
   collapsed into one cell (`grid-area: 1 / 1` on every card), so the pile is not a set of absolute
   positions left over from the layout -- it IS the layout, one column wide and one card tall.
   Nothing here animates width, height, top or left; the two states differ only in
   grid-template-columns and grid-area, which change in a single frame and are never transitioned.
   The card in the flow carries the layout delta (origin 0 0, so translate + scale maps one box
   onto the other exactly); the face inside it carries the pile's own tilt about its own centre. */
.jb-deck { --jb-deck-w: 240px; --jb-deck-dx: 13px; --jb-deck-dy: 7px; }
/* the open layout. Below 1000 px three across and two rows; above it ONE row of --n, because
   "all of them at once" is the whole promise of the button and a sixth card alone on a second row
   is a card the reader has to go and find. --n is the card count, written by the component. */
.jb-deck__cards {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 1000px) {
  .jb-deck__cards { gap: 12px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
}
.jb-deck__card { position: relative; min-width: 0; transform-origin: 0 0; z-index: calc(var(--n, 6) - var(--i, 0)); }
.jb-deck__face { transform-origin: 50% 50%; }
/* six captions in one grid cell is six captions on top of each other, so in the pile only the top
   card's is shown. They come back on a stagger, keyed off the same --i the cards travel on. */
.jb-deck__cap { transition: opacity 260ms linear; }
.jb-deck.is-deck.is-open .jb-deck__cap { transition-delay: calc(var(--i, 0) * 70ms); }
.jb-deck.is-deck:not(.is-open) .jb-deck__card:not(:first-child) .jb-deck__cap { opacity: 0; }

/* the pile. Only with .is-deck, which the script adds: with no script the markup rests OPEN and
   every picture is visible, which is also the reduced-motion and no-JS answer. */
.jb-deck.is-deck:not(.is-open) .jb-deck__cards {
  grid-template-columns: minmax(0, var(--jb-deck-w)); justify-content: center;
}
.jb-deck.is-deck:not(.is-open) .jb-deck__card { grid-area: 1 / 1; }
.jb-deck.is-deck:not(.is-open) .jb-deck__face {
  transform: translate(calc(var(--i) * var(--jb-deck-dx)), calc(var(--i) * var(--jb-deck-dy)))
             rotate(var(--jb-deck-tilt, 0deg))
             scale(calc(1 - var(--i) * .035));
  opacity: calc(1 - var(--i) * .07);   /* depth in opacity, not a filter: transform and opacity only */
}
/* handled rather than aligned: six tilts that repeat, alternating sign. A degree or two is the
   difference between a pile of photographs and a stack of rectangles. */
.jb-deck__card:nth-child(6n + 2) { --jb-deck-tilt: -1.6deg; }
.jb-deck__card:nth-child(6n + 3) { --jb-deck-tilt: 1.2deg; }
.jb-deck__card:nth-child(6n + 4) { --jb-deck-tilt: -2.2deg; }
.jb-deck__card:nth-child(6n + 5) { --jb-deck-tilt: 1.8deg; }
.jb-deck__card:nth-child(6n) { --jb-deck-tilt: -1.2deg; }
/* only while it is moving: a permanent will-change on six cards is six permanent layers */
.jb-deck.is-travelling .jb-deck__card, .jb-deck.is-travelling .jb-deck__face { will-change: transform, opacity; }

.jb-deck__ctl { display: flex; justify-content: center; margin-top: 20px; }
.jb-deck__btn {
  font-family: var(--jb-font-px); font-size: 16px; text-transform: uppercase; letter-spacing: 1px;
  min-height: 48px; padding: 0 20px; cursor: pointer;
  background: transparent; color: var(--jb-ink);
  border: 1px solid var(--jb-neon); border-radius: var(--jb-r-btn);
  transition: box-shadow 200ms var(--spring-standard), color 200ms var(--spring-standard);
}
.jb-deck__btn:hover { box-shadow: 0 0 24px rgba(64, 200, 236, .35); }
.jb-deck__btn:focus-visible { outline: 2px solid var(--jb-gold); outline-offset: 3px; }

/* ---------- the dock (phones): the visualizer owns the bottom edge, always ----------
   Two rows, and no text at all in the band row -- a 48 px live canvas pinned to the bottom of the
   window, and under it the only two controls that must never scroll away. The cabinet gives the
   visualizer the bottom half of its screen; this is the page keeping that promise on a phone. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  display: none;
  background: rgba(10, 10, 15, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--jb-hairline);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform 300ms var(--spring-standard);
}
.dock.is-out { transform: translateY(calc(100% + 2px)); }
.dock__band { display: block; position: relative; height: 48px; overflow: hidden; }
.dock__band > canvas { display: block; width: 100%; height: 100%; }
.dock__row { display: flex; align-items: stretch; gap: 8px; padding: 6px 12px 8px; }
.dock__row > * { flex: 1 1 0; min-width: 0; }
.dock .coin, .dock__row > a {
  min-height: 56px; height: auto; display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.3; padding: 8px 12px; white-space: pre-wrap;
}

/* ---------- motion primitives the page composes with ---------- */
.jb-reveal { opacity: .001; transform: translateY(12px); transition: opacity 420ms var(--spring-standard), transform 420ms var(--spring-standard); }
.jb-reveal.is-in { opacity: 1; transform: none; }
.jb-pop { animation: jb-pop 250ms var(--spring-bouncy) both; }
.jb-typein { animation: jb-typein 900ms steps(24, end) both; }
/* a sprite crossing the gap between two sections; paused until its section is near */
@keyframes jb-drift { from { transform: translate3d(-12%, 0, 0); } to { transform: translate3d(112%, 0, 0); } }
.jb-drift { position: absolute; pointer-events: none; animation: jb-drift var(--jb-drift-t, 26s) linear infinite; animation-play-state: paused; }
.is-near .jb-drift, .jb-drift.is-near { animation-play-state: running; }
/* applied by script ONLY when the text actually overflows its box */
.jb-marquee > span { display: inline-block; animation: jb-marquee 8s linear infinite; }
/* the beat bus: <html> carries .is-kick for one frame on every kick, and anything that should move
   with the music keys off that rather than running a clock of its own */
.on-kick { transition: transform 120ms var(--spring-snappy); }
.is-kick .on-kick { transform: scale(1.02); }
/* the phone's replacement for a wide table: the same rows, stacked */
.aw-deflist { display: grid; gap: 12px; margin: 0; }
.aw-deflist > div { border-top: 1px solid var(--jb-hairline); padding-top: 8px; }
.aw-deflist dt { color: var(--jb-ink); font-family: var(--jb-font-head); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.aw-deflist dd { margin: 4px 0 0; color: var(--jb-body); }

/* ---------- the EQ (draw_eq: col_w 64, dbpx 8, +/-12 dB = +/-96 px, labels at y 315, zones at 335) ---------- */
.eq { color: var(--jb-ink); }
.eq__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.eq__head .title { color: var(--jb-gold); }
.eq__head .preset { color: var(--jb-gold); }
.eq__rowb { margin-top: 4px; min-height: 16px; }
.eq__rowb .ok { color: var(--jb-gold); opacity: .9; }
.eq__rowb .hot { color: var(--jb-hot); }
.eq__pane { min-width: 0; }
/* Both children of .eq--wide need it, not just the pane. .eq--wide is a grid, so a
   grid item's min-width:auto is its CONTENT minimum: the presets row's five buttons
   measure 768px unwrapped, that became the track width, and the whole column -- pane
   included -- was dragged to 768 inside a 390px phone. That is what made the document
   810px wide and the page scroll sideways. The presets row scrolls inside itself
   (see the phone block below); this lets it. */
.eq__presets { min-width: 0; }
.eq__rack { display: grid; grid-template-columns: 40px repeat(10, 64px); margin-top: 16px; position: relative; }
.eq__gutter { position: relative; height: 240px; color: var(--jb-dim-aa); }
.eq__gutter span { position: absolute; left: 0; }
.eq__gutter .p12 { top: 8px; } .eq__gutter .z { top: 104px; } .eq__gutter .m12 { top: 200px; }
.eq__zero { position: absolute; left: 24px; right: 0; top: 112px; height: 2px; background: rgba(64, 200, 236, .35); pointer-events: none; }
.eq__fader { position: relative; height: 240px; }
.eq__trough {
  position: absolute; left: 24px; width: 16px; top: 16px; height: 192px;
  border-left: 2px solid var(--jb-track); border-right: 2px solid var(--jb-track);
  box-sizing: border-box;
  overflow: visible;
}
.eq__live { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--live, 0) * 100%); background: var(--col); opacity: .22; pointer-events: none; }
.eq__fill { position: absolute; left: 0; right: 0; background: var(--col); opacity: .85; pointer-events: none; }
.eq__cap { position: absolute; left: -4px; right: -4px; height: 8px; background: var(--col); opacity: .9; pointer-events: none; }
.eq__fader.is-focus .eq__cap { background: var(--jb-ink); --jb-blink-low: .7; animation: jb-blink var(--jb-blink) steps(1) infinite; }
.eq__fader .cursor { left: -2px; color: var(--jb-gold); }
.eq__fader.is-focus .cursor { animation: jb-blink var(--jb-blink) steps(1) infinite; --jb-blink-low: .4; }
.eq__read { position: absolute; left: 22px; width: 20px; text-align: center; color: var(--jb-ink); opacity: 0; }
.eq__fader.is-focus .eq__read { opacity: 1; }
.eq__range {
  -webkit-appearance: none; appearance: none;
  position: absolute; left: 12px; top: 16px; width: 40px; height: 192px;
  margin: 0; background: transparent; opacity: 0; cursor: ns-resize;
  writing-mode: vertical-lr; direction: rtl;
}
.eq__label { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; color: var(--jb-ink); }
.eq__zones { display: grid; grid-template-columns: 40px repeat(5, 128px); margin-top: 4px; }
.eq__zone { text-align: center; }
.eq__presets { margin-top: 16px; }
.eq__presets .title { color: var(--jb-gold); margin-bottom: 8px; }
.eq__preset {
  display: block; width: 208px; height: 24px; line-height: 24px; padding: 0 8px; text-align: left;
  background: transparent; color: var(--jb-dim-aa); border: 0; cursor: pointer;
  font-family: var(--jb-font-px); font-size: 16px; text-transform: uppercase; white-space: pre;
}
.eq__preset:hover { color: var(--jb-ink); }
.eq__preset[aria-checked="true"] { background: var(--jb-neon); color: var(--jb-bg); }
.eq--wide { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: start; }

/* ---------- the stage for Denise (16:9, the cabinet ground) ---------- */
.stage { position: relative; }
.stage canvas { width: 100%; height: 100%; display: block; }
.stage__controls { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 2; }
.stage__btn {
  font-family: var(--jb-font-px); font-size: 16px; text-transform: uppercase; white-space: pre;
  background: var(--jb-gold); color: var(--jb-bg); border: 0; height: 28px; padding: 0 10px; cursor: pointer;
}
.stage__btn--dim { background: var(--jb-track); color: var(--jb-ink); }

/* ---------- Rick ---------- */
.rick { position: relative; display: inline-block; width: 68px; height: 100px; }
.rick img { display: block; width: 68px; height: 100px; image-rendering: pixelated; }
.rick .zzz { position: absolute; left: 60px; top: -4px; color: var(--jb-dim-aa); transition: opacity 600ms; }
.rick.is-awake .zzz { opacity: 0; }
.rick.is-awake img { animation: jb-bob 484ms steps(2) infinite; }
/* beat mode: Rick bobs when the music does, not on a wall clock of his own */
.rick--beat.is-awake img { animation: none; }
.rick--beat img.is-bob { animation: jb-bob 220ms steps(2) 1; }
@keyframes jb-bob { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---------- the keyboard entry line ---------- */
.entry { background: rgba(6, 7, 15, .9); border: 1px solid var(--jb-hairline); padding: 8px 12px; color: var(--jb-ink); }
.entry::after { content: '_'; color: var(--jb-gold); animation: jb-blink var(--jb-blink) steps(1) infinite; }

/* ---------- layout helpers ---------- */
.jb-main { padding: 0 32px 120px calc(var(--jb-rail-w) + 32px); max-width: 1440px; box-sizing: border-box; }
.jb-section { margin: 0 0 96px; scroll-margin-top: 80px; }
.jb-eyebrow { font-family: var(--jb-font-head); font-size: 11px; letter-spacing: 3px; color: var(--jb-gold); text-transform: uppercase; margin: 0 0 12px; }
.jb-h2 { font-family: var(--jb-font-head); font-size: 20px; line-height: 1.7; letter-spacing: 1px; color: var(--jb-neon); margin: 0 0 16px; text-transform: uppercase; }
.jb-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.jb-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.jb-scrollx { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

/* ---------- tablet: a narrower rail ---------- */
@media (max-width: 1099px) and (min-width: 768px) {
  :root { --jb-rail-w: 176px; }
  .rail-item { font-size: 14px; padding-left: 40px; }
  .rail__mark .a, .rail__mark .j { left: 24px; } .rail__mark .w { left: 56px; }
}

/* ---------- narrow: the blurb drops under the name so the pill stops painting over it ---------- */
@media (max-width: 1099px) {
  .picker__row {
    grid-template-columns: minmax(0, 1fr) 88px;
    grid-template-areas: 'name pill' 'blurb pill';
    height: auto; min-height: 44px; padding: 6px 8px 6px 24px; align-items: center;
  }
  .picker__row .name { grid-area: name; }
  .picker__row .blurb { grid-area: blurb; white-space: normal; }
  .picker__row .switch { grid-area: pill; align-self: center; }
  .picker__row .cursor { top: 10px; }
}

/* ---------- phones: the rail becomes a bottom strip, the HUD sits above it ---------- */
@media (max-width: 767px) {
  :root { --jb-rail-w: 0px; --jb-hud-h: 56px; --jb-horizon: 66vh; }
  .dock { display: block; }
  .rail {
    top: auto; right: 0; bottom: 0; width: 100%;
    height: calc(var(--jb-strip-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-right: 0; border-top: 1px solid var(--jb-hairline);
    flex-direction: row; align-items: center;
  }
  .rail__mark { height: 44px; width: 48px; flex: 0 0 48px; display: flex; align-items: center; }
  .rail__mark .a, .rail__mark .w, .rail__mark .j { position: static; font-size: 16px; }
  .rail__mark .j { display: none; }
  .rail__mark .a { margin-left: 8px; }
  .rail__list {
    display: flex; flex: 1 1 auto; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__list > li { flex: 0 0 76px; scroll-snap-align: center; }
  .rail-item {
    width: 76px; height: 44px; line-height: 44px; padding: 0; text-align: center; box-sizing: border-box;
    font-family: var(--jb-font-head); font-size: 11px; letter-spacing: 1px;
  }
  .rail-item[aria-current] { color: var(--jb-bg); }
  .rail__plate { width: 76px; height: 28px; top: 8px; left: 0; right: auto; transform: translateX(var(--jb-plate-x, 0)); }
  .cursor { left: 2px; top: 0; }
  .led { width: 6px; height: 6px; right: 4px; top: 10px; }
  .rail__exit { display: none; }
  /* the HUD is two rows on a phone: the hint can no longer be clipped by the buttons beside it */
  .hud {
    bottom: calc(var(--jb-strip-h) + env(safe-area-inset-bottom, 0px));
    height: auto; min-height: var(--jb-hud-h);
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 8px 12px; flex-wrap: wrap; align-items: center;
  }
  .hud__hint { flex: 1 0 100%; order: -1; font-size: 13px; white-space: pre-wrap; overflow: visible; }
  .hud__hint > span { white-space: pre-wrap; }
  .hud__vol, .hud__tag, .hud__chip { display: none; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; max-width: 100%; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
  .hud__mute, .hud__motion { min-width: 44px; min-height: 44px; height: auto; }
  .jb-main { padding: 0 16px calc(var(--jb-strip-h) + var(--jb-hud-h) + 48px); }
  .px--3 { font-size: 24px; } .px--2 { font-size: 16px; }
  .now-title { font-size: 24px; } .now-artist { font-size: 16px; } .now-album { font-size: 11px; }
  .picker__row { padding-left: 20px; font-size: 13px; }
  .pill--on, .pill--off { min-width: 64px; height: 44px; line-height: 44px; }
  /* the rack is 464 px of faders: it scrolls inside itself under an edge fade, it does not widen
     the page, and every column is a 44 px target */
  .eq__pane {
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .eq__pane::-webkit-scrollbar { display: none; }
  .eq__rack { grid-template-columns: 24px repeat(10, 44px); width: max-content; }
  /* HIDDEN, NOT REMOVED. The rack's first track is the +12/0/-12 scale's own 24 px and the
     zones row below carries a matching 24 px spacer, so the two rows line up. `display: none`
     took the gutter out of the grid but NOT its track: the ten faders each slid one cell left,
     the 40 Hz fader landed in the 24 px column (a 24 px target, against the 44 px the comment
     above promises) and SUB/BASS/MID/HIGH/AIR each sat over the wrong two faders. Making it
     invisible instead keeps the cell filled: same width, same hidden labels, columns aligned. */
  .eq__gutter { visibility: hidden; }
  .eq__zero { left: 0; }
  .eq__fader { height: 216px; }
  .eq__trough { left: 10px; width: 24px; top: 8px; height: 176px; }
  .eq__cap { height: 10px; }
  .eq__range { left: 0; width: 44px; top: 0; height: 192px; }
  .eq__read { left: 8px; width: 28px; }
  .eq__label { font-size: 13px; }
  .eq__zones { grid-template-columns: 24px repeat(5, 88px); font-size: 13px; width: max-content; }
  .eq--wide { grid-template-columns: 1fr; }
  .eq__presets .jb-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
  .eq__preset { flex: 0 0 auto; width: auto; height: 44px; line-height: 44px; scroll-snap-align: start; }
  .toast { bottom: calc(var(--jb-strip-h) + var(--jb-hud-h) + 48px); padding: 4px 16px 8px; }
  .toast__name { font-size: 16px; }
  .stage__btn { min-height: 44px; height: auto; padding: 10px 16px; }
  /* the deck opens into the page's own snap rail, not into six unreadable thumbnails */
  .jb-deck { --jb-deck-w: min(62vw, 230px); --jb-deck-dx: 8px; --jb-deck-dy: 6px; }
  .jb-deck__cards {
    display: flex; gap: 12px; align-items: flex-start;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 4px calc(16px + env(safe-area-inset-right, 0px)) 4px calc(16px + env(safe-area-inset-left, 0px));
    scroll-padding-inline: calc(16px + env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-right, 0px));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .jb-deck__cards::-webkit-scrollbar { display: none; }
  .jb-deck__card { flex: 0 0 auto; width: 78vw; scroll-snap-align: center; }
  /* the pile must not scroll or fade: it is one card wide with the rest behind it */
  .jb-deck.is-deck:not(.is-open) .jb-deck__cards {
    display: grid; overflow: visible; padding: 4px 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .jb-deck.is-deck:not(.is-open) .jb-deck__card { width: auto; }
  .tab { height: 44px; line-height: 44px; padding: 0 10px; }
}

/* ---------- reduced motion: every layer stops, every blink goes steady ---------- */
@media (prefers-reduced-motion: reduce) {
  .cursor, .led, .pill--onair, .coin, .coin--start, .art-frame--playing, .eq__cap, .rick img, .entry::after, .hud__hint > span, .screen::before, .toast, .crt-on, .glass--pop, .picker__row .cursor, .eq__fader .cursor,
  .jb-drift, .jb-marquee > span, .jb-pop, .jb-typein, .aw-po__tube, .aw-po__sweep, .aw-po__mark, .aw-po-run .aw-veil {
    animation: none !important;
  }
  /* the start sequence does not exist: the picture simply arrives, which is also
     what jukebox-poweron.js does on its own -- this is the belt to that braces */
  .aw-po { display: none !important; }
  /* a resting state, not a blank page: everything that arrives is simply already there */
  .jb-reveal { opacity: 1; transform: none; }
  .on-kick, .jb-reveal, .dock { transition: none !important; }
  .jb-drift { display: none; }
  .cursor, .rail-item:hover > .cursor { opacity: 1; }
  .led.is-on { opacity: 1; }
  .toast.is-on { opacity: 1; }
  .rail__plate, .jb-layer--viz, .rail-item { transition: none !important; }
  .crt-on { display: none; }
  /* the living screenshot goes back to being a screenshot: the clip is not hidden mid-motion,
   * it is removed, and the whole still underneath is what was always there */
  .jb-screen__band { display: none !important; }
  .picker__preview > .jb-band { display: none !important; }   /* the picker's window: its still */
  /* the deck still opens and closes; it simply does not travel, and the captions do not fade */
  .jb-deck__card, .jb-deck__face, .jb-deck__cap { transition: none !important; }
}
.jb-motion-off .cursor, .jb-motion-off .led, .jb-motion-off .pill--onair, .jb-motion-off .coin, .jb-motion-off .art-frame--playing,
.jb-motion-off .eq__cap, .jb-motion-off .rick img, .jb-motion-off .entry::after, .jb-motion-off .hud__hint > span, .jb-motion-off .screen::before,
.jb-motion-off .toast, .jb-motion-off .glass--pop, .jb-motion-off .picker__row .cursor, .jb-motion-off .eq__fader .cursor,
.jb-motion-off .jb-drift, .jb-motion-off .jb-marquee > span, .jb-motion-off .jb-pop, .jb-motion-off .jb-typein,
.jb-motion-off .coin--start, .jb-motion-off .aw-po__tube, .jb-motion-off .aw-po__sweep, .jb-motion-off .aw-po__mark,
.jb-motion-off.aw-po-run .aw-veil { animation: none !important; }
.jb-motion-off .aw-po { display: none !important; }
.jb-motion-off .jb-screen__band, .jb-motion-off .picker__preview > .jb-band { display: none !important; }
.jb-motion-off .jb-deck__card, .jb-motion-off .jb-deck__face, .jb-motion-off .jb-deck__cap { transition: none !important; }
.jb-motion-off .cursor, .jb-motion-off .led.is-on, .jb-motion-off .toast.is-on { opacity: 1; }
.jb-motion-off .jb-reveal { opacity: 1; transform: none; }
.jb-motion-off .jb-drift { display: none; }
.jb-motion-off .rail__plate, .jb-motion-off .jb-layer--viz, .jb-motion-off .on-kick, .jb-motion-off .jb-reveal, .jb-motion-off .dock,
.jb-motion-off .jb-layer--sky, .jb-motion-off .jb-layer--sun, .jb-motion-off .jb-layer--grid, .jb-motion-off .jb-layer--world { transition: none !important; }