/* Silver desktop chrome around a dark, sixteenth-note piano roll. */
.beat-window{width:980px;max-width:100%;height:740px;max-height:calc(100dvh - 72px)}
.desktop-enabled .beat-window>.window-body{overflow:auto;display:flex;flex-direction:column;padding-bottom:0}
.beat-app{--beat-cell:30px;color:#151515;font:12px Tahoma,Arial,sans-serif;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:500px;height:100%;box-sizing:border-box}
.beat-app *{box-sizing:border-box}.beat-app button,.beat-app input,.beat-app select{font:inherit;color:inherit}
.beat-app button{border:0;border-radius:0;box-shadow:var(--raise);background:#c0c0c0;padding:5px 9px;min-height:29px;cursor:pointer}
.beat-app button:active,.beat-app button[aria-pressed=true]{box-shadow:var(--sink);background:#d3d3d3}
.beat-app button:disabled{color:#777;cursor:default}.beat-app button:focus-visible,.beat-app input:focus-visible,.beat-app select:focus-visible{outline:2px solid #000080;outline-offset:2px}
.beat-app input:not([type=range]),.beat-app select{background:#fff;border:1px solid #777;border-radius:0;min-height:28px;padding:3px 5px;min-width:0;max-width:100%}
.beat-app input[type=range]{width:85px;accent-color:#000080;vertical-align:middle;margin:0;max-width:100%}
.beat-transport{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:5px;box-shadow:var(--raise);background:#c9c9c9}
.beat-transport label{display:flex;align-items:center;gap:5px}.beat-transport input[type=number]{width:55px}.beat-transport .beat-play{font-weight:bold;min-width:70px}
.beat-transport .beat-play[aria-pressed=true]{color:#fff;background:#000080}.beat-master{margin-left:auto}
.beat-transport output{background:#152329;color:#a3f1c2;font:bold 17px 'Courier New',monospace;box-shadow:var(--sink);padding:5px 10px;min-width:80px;text-align:center;letter-spacing:2px}
.beat-workspace{display:flex;gap:8px;flex:1;min-height:280px}
.beat-loops{width:162px;flex:0 0 162px;background:#aaa;box-shadow:var(--sink);padding:5px;overflow:auto}
.beat-panel-title{display:flex;justify-content:space-between;padding:4px 3px 8px;font:11px 'Courier New',monospace;letter-spacing:1px}.beat-panel-title strong{font-weight:bold}
.beat-loop{margin-bottom:6px;padding:3px;background:#bdbdbd;box-shadow:var(--raise);border-left:3px solid transparent}
.beat-loop.is-selected{border-left-color:#000080;background:#d6d6d6}.beat-app .beat-loop-pick{display:flex;width:100%;text-align:left;gap:6px;box-shadow:none;background:transparent;font-weight:bold;overflow-wrap:anywhere;align-items:baseline;padding:5px 2px}
.beat-loop-pick>span{font:11px 'Courier New',monospace;color:#505050}.beat-app .beat-loop-pick[aria-pressed=true]{color:#000080;background:transparent;box-shadow:none}
.beat-loop-toggles{display:flex;align-items:center;gap:4px;padding:2px}.beat-loop-toggles>span{font-size:10px;flex:1;color:#444}.beat-app .beat-loop-toggles button{min-height:24px;min-width:24px;padding:3px}
.beat-loop-toggles button[aria-pressed=true]{background:#000080;color:white}.beat-add{width:100%;margin-top:2px}.beat-loop-actions{display:flex;gap:4px;margin-top:7px}.beat-app .beat-loop-actions button{padding:4px;flex:1;font-size:11px}.beat-loops>p{font-size:11px;line-height:1.5;margin:12px 4px;color:#333}
.beat-editor{min-width:0;flex:1;display:flex;flex-direction:column;gap:7px}.beat-loop-settings{display:flex;gap:7px;align-items:end;flex-wrap:wrap}.beat-loop-settings label{display:flex;flex-direction:column;gap:3px;font-size:11px}.beat-name-label{flex:1;min-width:110px}.beat-name-label input{width:100%}.beat-loop-volume{padding-bottom:4px}
.beat-note-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.beat-note-tools>span{font-size:11px}.beat-durations{display:flex;gap:3px}.beat-app .beat-durations button{display:flex;flex-direction:column;align-items:center;padding:4px 7px;min-width:48px;font-size:10px;gap:3px}.beat-durations b{font:14px 'Courier New',monospace;line-height:16px}.beat-app .beat-durations button[aria-pressed=true]{color:#fff;background:#000080}.beat-note-tools>label{font-size:11px;display:flex;align-items:center;gap:5px;margin-left:auto}.beat-note-tools>button[aria-pressed=true]{background:#702e2e;color:#fff}
.beat-roll-scroll{overflow:auto;min-height:190px;flex:1;background:#17252a;box-shadow:var(--sink);overscroll-behavior:contain}
.beat-roll{width:calc(52px + var(--beat-steps)*30px);min-width:100%;position:relative;color:#b6cad0;--beat-steps:16;padding-bottom:2px}
.beat-ruler,.beat-pitch-row{display:grid;grid-template-columns:52px repeat(var(--beat-steps),minmax(30px,1fr));height:23px}
.beat-ruler{position:sticky;top:0;z-index:6;height:27px;background:#243840}.beat-ruler>span{display:flex;align-items:center;justify-content:center;font:10px 'Courier New',monospace;border-right:1px solid #34464c;border-bottom:1px solid #667b80}
.beat-key{position:sticky;left:0;z-index:4;background:#d9d9d3;color:#263135;text-align:right;padding:4px 8px;font:bold 11px 'Courier New',monospace;box-shadow:inset -2px 0 #777}
.beat-ruler>.beat-key{z-index:7;font-size:9px;background:#bcbfbd;color:#263135}.beat-pitch-row.is-sharp>.beat-key{background:#3c454a;color:#e4e9e9}.beat-pitch-row.is-c>.beat-key{color:#000080;background:#c8d7db;border-bottom:1px solid #788f9b}
.beat-app .beat-cell{position:relative;min-height:0;height:23px;width:100%;min-width:0;padding:0;border:0;box-shadow:inset -1px -1px #2d4148;background:#203239;overflow:visible;cursor:crosshair}
.beat-app .is-sharp>.beat-cell{background:#192a30}.beat-app .beat-cell.is-beat{box-shadow:inset 1px 0 #516267,inset -1px -1px #2d4148}.beat-app .beat-cell.is-bar{box-shadow:inset 2px 0 #91a1a5,inset -1px -1px #2d4148}.beat-app .is-c>.beat-cell{border-bottom:1px solid #5f747a}
.beat-app .beat-cell:hover{background:#3f5962}.beat-app .beat-cell:focus-visible{outline:2px solid #fff;outline-offset:-3px;z-index:3}.beat-app .beat-cell.has-note{background:#28554c}
.beat-note{position:absolute;inset:2px auto 2px 1px;z-index:2;pointer-events:none;background:#83d8b3;border:1px solid #b6f0d2;border-bottom-color:#39705c;border-right-color:#39705c;color:#10362b;font:10px 'Courier New',monospace;text-align:left;padding:2px 4px;overflow:hidden;white-space:nowrap;box-shadow:inset 2px 0 #ddffee}
.beat-app .beat-cell.is-playing{background:#687e50!important;box-shadow:inset 2px 0 #e1f393}.beat-ruler>span.is-playing{background:#b5d37b;color:#102019}.beat-roll.is-erasing .beat-cell{cursor:cell}.beat-roll.is-erasing .beat-cell:hover{background:#6e4241}
.beat-editor-footer{display:flex;justify-content:space-between;gap:6px;color:#444;font:10px 'Courier New',monospace}.beat-bottom{display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:center}.beat-bottom-actions{display:flex;gap:5px}.beat-bottom p{font-size:11px;line-height:1.4;margin:0}.beat-bottom>span{grid-column:1/-1;font-size:10px;color:#444;padding-top:4px;border-top:1px solid #aaa}.beat-help{font-size:11px;line-height:1.5}.beat-help summary{cursor:pointer;color:#000080}.beat-help p{margin:6px 0}
.desktop-shortcuts>[data-open-window="beat-maker"]{grid-area:beat}
@media(min-width:801px) and (min-height:601px){.desktop-shortcuts{grid-template-areas:"lab music . frontier trading" "mail media . game crypt" ". beat . mines mines3" "printing wiki . asteroids escape" "flow . . . ."}.desktop-enabled .beat-window{position:absolute}}
.compact-desktop .desktop-shortcuts{grid-template-areas:"lab mail printing flow" "music media wiki beat" ". . . ." "frontier trading game crypt" "mines mines3 asteroids escape"}
@media(min-width:600px){.compact-desktop .desktop-shortcuts{grid-template-areas:"lab mail printing flow music media wiki beat" ". . . . . . . ." "frontier trading game crypt mines mines3 asteroids escape"}}
.compact-desktop .beat-window .beat-app{height:calc(100dvh - 150px);min-height:420px}.compact-desktop .beat-workspace{min-height:160px}.compact-desktop .beat-roll-scroll{min-height:130px}
@media(max-width:620px){.beat-app{padding:6px;gap:6px}.beat-workspace{flex-direction:column;gap:7px}.beat-loops{width:100%;flex:0 0 auto;max-height:140px;display:flex;flex-wrap:wrap;gap:5px;align-items:start}.beat-panel-title{width:100%;padding:2px 3px}.beat-loop-list{display:flex;gap:5px;overflow:auto;max-width:100%;flex:1 1 100%}.beat-loop{min-width:140px;margin-bottom:1px}.beat-add{width:auto;margin:0}.beat-loop-actions{margin:0}.beat-loops>p{display:none}.beat-editor{flex:1;min-height:220px}.beat-app .beat-durations button{min-width:41px;padding:5px}.beat-note-tools>span{display:none}.beat-note-tools>label{margin-left:0}.beat-app input[type=range]{width:70px}.beat-loop-settings{gap:5px}.beat-loop-volume{margin-left:auto}.beat-master{margin-left:0}.beat-transport{gap:5px}.beat-transport output{margin-left:auto}.beat-bottom{grid-template-columns:1fr}.beat-app .beat-bottom-actions button{flex:1}.beat-bottom p{min-height:30px}.compact-desktop .beat-window .beat-app{height:calc(100dvh - 120px);min-height:620px}.beat-editor-footer{font-size:9px}}

/* A single console enclosure: the managed title bar is part of the instrument. */
#beat-maker{--nes-red:#b8292b;--nes-shell:#d2d0c6;--nes-dark:#292a2b;--nes-ink:#262626;padding:0;border:3px solid #242526;border-radius:18px;background:#363737;box-shadow:inset 0 1px #72736f,0 6px 0 #181a1a,0 10px 22px #001b1b66}
#beat-maker>.window-title{position:relative;min-height:54px;padding:10px 13px;background:#292a2b;border-bottom:3px solid #191a1b;border-radius:13px 13px 0 0;color:#e0ded4;font:bold 13px 'Courier New',monospace;letter-spacing:1.5px}
#beat-maker>.window-title>span:first-child{gap:0;color:#e44b45;text-transform:uppercase;padding:3px 9px;border:2px solid #b73532;border-radius:14px;line-height:1.3;white-space:nowrap}
#beat-maker>.window-title .window-app-icon{display:none}
#beat-maker>.window-title:after{content:'';position:absolute;pointer-events:none;left:46%;top:14px;width:112px;height:22px;background:repeating-linear-gradient(90deg,#111212 0 4px,#393b3a 4px 7px);border-top:1px solid #464743;border-bottom:1px solid #121313;opacity:.75}
#beat-maker>.window-title .window-controls{position:relative;z-index:1;gap:5px}
#beat-maker>.window-title .window-controls button{width:27px;height:25px;min-height:0;padding:0;border:1px solid #73736d;border-radius:5px;background:#474846;color:#e0ded4;box-shadow:0 2px 0 #101111;font:16px/1 'Courier New',monospace;letter-spacing:0}
#beat-maker>.window-title .window-controls button[data-window-action=close]{background:#a82929;border-color:#ce4b43;color:#fff}
#beat-maker>.window-title .window-controls button:active{transform:translateY(1px);box-shadow:0 1px 0 #101111}
#beat-maker>.window-title:focus-visible{outline:2px dashed #f1d79c;outline-offset:-5px}
#beat-maker>.window-body{margin:0 7px 7px;padding:0;border-radius:0 0 11px 11px;background:var(--nes-shell);scrollbar-color:#777972 #bbbcb3}
#beat-maker .beat-app{padding:11px;gap:10px;color:var(--nes-ink);background:var(--nes-shell);font:12px 'Courier New',monospace}
#beat-maker .beat-app button{border:1px solid #777970;border-radius:5px;background:#cacbc2;color:#282a29;box-shadow:0 2px 0 #7d8076,inset 0 1px #edede3;font-weight:bold;letter-spacing:-.2px;transition:background-color .1s}
#beat-maker .beat-app button:active{box-shadow:0 1px 0 #64675f,inset 0 1px #edede3;transform:translateY(1px)}
#beat-maker .beat-app button:disabled{color:#73766d;background:#b8bab1;border-color:#9a9d92;box-shadow:0 1px 0 #8f9288}
#beat-maker .beat-app button:focus-visible,#beat-maker .beat-app input:focus-visible,#beat-maker .beat-app select:focus-visible{outline:2px solid #9a2226;outline-offset:2px}
#beat-maker .beat-app input:not([type=range]),#beat-maker .beat-app select{border:1px solid #7d8077;border-radius:4px;background:#ecece2;color:#222723;box-shadow:inset 0 1px 2px #71776933;font-weight:bold}
#beat-maker .beat-app input[type=range]{accent-color:#ac272b}
#beat-maker .beat-transport{padding:9px;gap:8px;border:1px solid #777b70;border-radius:9px;background:#b5b8ad;box-shadow:inset 0 1px #e2e4d8,0 2px 0 #8a8d81;font-weight:bold;font-size:11px}
#beat-maker .beat-transport .beat-play,#beat-maker .beat-transport [data-beat-action=stop]{height:38px;min-width:68px;border-radius:24px;background:#b62b2d;border:2px solid #812226;box-shadow:0 3px 0 #702024,inset 0 1px #ea6b5d;color:#fff3dc;font-size:11px}
#beat-maker .beat-transport .beat-play[aria-pressed=true]{background:#862126;color:#fff7d7;box-shadow:0 1px 0 #672027,inset 0 1px 4px #5c191d}
#beat-maker .beat-transport [data-beat-action=stop]{min-width:58px;background:#3e4240;border-color:#292e2c;box-shadow:0 3px 0 #242927,inset 0 1px #70756f}
#beat-maker .beat-transport output{border:2px solid #151a17;border-radius:5px;background:#222b24;color:#d4e4a0;box-shadow:inset 0 2px 5px #070e0c88;min-width:86px;font-size:18px;line-height:24px;padding:3px 7px}
#beat-maker .beat-loops{padding:7px;width:166px;flex-basis:166px;border:1px solid #7d8176;border-radius:8px;background:#a6aa9e;box-shadow:inset 0 2px 3px #62695c55;scrollbar-color:#747a6d #bfc3b5}
#beat-maker .beat-panel-title{padding:2px 2px 9px;color:#3b4437;font-weight:bold;font-size:10px;letter-spacing:1.3px}
#beat-maker .beat-loop{border:1px solid #858b7d;border-left:4px solid #7e8878;border-radius:5px;background:#c3c8b9;box-shadow:0 1px 1px #616a5c44;padding:4px;margin-bottom:7px}
#beat-maker .beat-loop.is-selected{background:#e1e1d2;border-left-color:#b62b2d;box-shadow:0 1px 2px #62675966}
#beat-maker .beat-app .beat-loop-pick{background:transparent;box-shadow:none;border:0;border-radius:0;color:#29352a;padding:3px 1px;font-size:11px;line-height:1.5}
#beat-maker .beat-app .beat-loop-pick[aria-pressed=true]{color:#a32929;background:transparent;box-shadow:none}
#beat-maker .beat-loop-pick>span{color:#626b5c;font-size:10px}
#beat-maker .beat-loop-toggles>span{font-size:9px;color:#495241;line-height:1.5}
#beat-maker .beat-loop-toggles button{font-size:10px;border-radius:4px}
#beat-maker .beat-loop-toggles button[aria-pressed=true]{background:#9c282a;color:#fff0d7;border-color:#742226;box-shadow:0 1px #5d2725}
#beat-maker .beat-loops>p{font-size:10px;color:#34412f;line-height:1.6;margin:12px 2px 4px}
#beat-maker .beat-loop-settings{padding:2px 0 1px;gap:7px}
#beat-maker .beat-loop-settings label{font-size:10px;font-weight:bold;letter-spacing:.2px;color:#45483f}
#beat-maker .beat-note-tools{gap:7px;padding:3px 0 6px;border-bottom:2px solid #9d9f92}
#beat-maker .beat-note-tools>span{font-size:10px;max-width:34px;line-height:1.4;font-weight:bold;text-transform:uppercase;color:#474d40}
#beat-maker .beat-durations{gap:4px}
#beat-maker .beat-app .beat-durations button{padding:5px 6px;min-width:51px;gap:3px;background:#bfc1b7;border-radius:5px;font-size:9px;line-height:1.2}
#beat-maker .beat-durations b{font:bold 15px/17px 'Courier New',monospace}
#beat-maker .beat-durations small{font-size:8px;font-weight:normal;opacity:.85;white-space:nowrap;letter-spacing:0}
#beat-maker .beat-app .beat-durations button[aria-pressed=true]{background:#ad282c;border-color:#7f2025;color:#fff5dc;box-shadow:0 2px 0 #702024,inset 0 1px #d9564b}
#beat-maker .beat-note-tools>label{font-size:10px;font-weight:bold}
#beat-maker .beat-note-tools>button[aria-pressed=true]{background:#4b4f48;border-color:#30382e;color:#fff4dc}
#beat-maker .beat-roll-scroll{border:3px solid #44493f;border-radius:7px;box-shadow:inset 0 2px 5px #080b08;scrollbar-color:#6f7769 #2b3329;background:#252e27}
#beat-maker .beat-roll{color:#b7c5ad}
#beat-maker .beat-ruler{height:27px;background:#39443a}
#beat-maker .beat-ruler>span{border-right-color:#4d584b;border-bottom-color:#6d7865;color:#c7d1b9}
#beat-maker .beat-key{background:#d3d6c6;color:#3c4b36;box-shadow:inset -2px 0 #828c76}
#beat-maker .beat-ruler>.beat-key{background:#acb4a0;color:#34432e}
#beat-maker .beat-pitch-row.is-sharp>.beat-key{background:#3e493d;color:#d3dbc7}
#beat-maker .beat-pitch-row.is-c>.beat-key{background:#c2ccb0;color:#8b2527;border-bottom-color:#8d9b7f}
#beat-maker .beat-app .beat-cell{border:0;border-radius:0;box-shadow:inset -1px -1px #3b483a;background:#303d31;transition:none;touch-action:pan-x pan-y;font-weight:normal}
#beat-maker .beat-app .is-sharp>.beat-cell{background:#29352b}
#beat-maker .beat-app .beat-cell.is-beat{box-shadow:inset 1px 0 #69755e,inset -1px -1px #3b483a}
#beat-maker .beat-app .beat-cell.is-bar{box-shadow:inset 2px 0 #a5af92,inset -1px -1px #3b483a}
#beat-maker .beat-app .is-c>.beat-cell{border-bottom:1px solid #6b7b61}
#beat-maker .beat-app .beat-cell:hover{background:#56634d}
#beat-maker .beat-app .beat-cell:active{transform:none}
#beat-maker .beat-app .beat-cell.has-note{background:#5a3c35;cursor:grab;touch-action:none}
#beat-maker .beat-app .beat-cell:focus-visible{outline:2px solid #fff0b8;outline-offset:-3px}
#beat-maker .beat-note{background:#d76650;color:#281d16;border:1px solid #edb895;border-right-color:#9b3c32;border-bottom-color:#88362e;border-radius:2px;box-shadow:inset 2px 0 #f7ceaa;font-size:10px}
#beat-maker .beat-app .beat-cell.is-playing{background:#6f7950!important;box-shadow:inset 2px 0 #e2d68a}
#beat-maker .beat-ruler>span.is-playing{background:#d5bc75;color:#303c28}
#beat-maker .beat-roll.is-erasing .beat-cell:hover{background:#785045}
#beat-maker .beat-editor-footer{font-size:9px;line-height:1.5;flex-wrap:wrap;color:#4b5542}
#beat-maker [data-beat-duration]{color:#8e2427;font-weight:bold}
#beat-maker .beat-bottom{gap:9px;padding-top:3px}
#beat-maker .beat-bottom-actions{gap:6px}
#beat-maker .beat-bottom-actions button{font-size:10px;min-height:31px}
#beat-maker .beat-bottom p{font-size:10px;color:#363f30;line-height:1.55}
#beat-maker .beat-bottom>span{border-top:1px solid #a3a699;padding-top:7px;font-size:9px;color:#555d4b;letter-spacing:.2px}
#beat-maker .beat-help{font-size:10px;line-height:1.6;color:#3e4935}
#beat-maker .beat-help summary{color:#93292c;font-weight:bold}
#beat-maker>.window-resize{right:6px;bottom:5px;width:17px;height:17px;background:repeating-linear-gradient(135deg,transparent 0 3px,#73796b 3px 4px,#b5b9a9 4px 5px,transparent 5px 7px)}
#beat-maker .beat-roll.is-dragging .beat-cell{cursor:grabbing}
#beat-maker .beat-cell.is-drag-target{background:#72815c!important}
#beat-maker .beat-cell.is-drop-blocked{background:repeating-linear-gradient(135deg,#733f37 0 5px,#4b302d 5px 10px)!important}
#beat-maker .beat-note.is-drag-source{opacity:.3}
#beat-maker .beat-drag-preview{position:absolute;inset:1px auto 1px 0;z-index:8;pointer-events:none;border:2px solid #e9e3b5;border-radius:2px;background:#d7d49a99;color:#222d1c;font:bold 10px 'Courier New',monospace;box-shadow:0 0 0 1px #354129;padding:2px 3px;white-space:nowrap;overflow:hidden}
#beat-maker .is-drop-blocked .beat-drag-preview{border-color:#ef9d84;background:repeating-linear-gradient(135deg,#c94d3b99 0 5px,#573429bb 5px 10px);color:#fff0d6}
/* Small screens scroll the console body instead of squeezing panels together. */
@media(max-width:620px){.compact-desktop #beat-maker .beat-app{height:auto;min-height:0}.compact-desktop #beat-maker .beat-workspace{flex:none;min-height:0}.compact-desktop #beat-maker .beat-editor{flex:none;min-height:0}.compact-desktop #beat-maker .beat-roll-scroll{flex:none;height:250px;min-height:250px}}
@media(max-width:620px){#beat-maker{border-radius:14px;border-width:2px}#beat-maker>.window-title{min-height:47px;padding:8px 10px;border-radius:10px 10px 0 0;font-size:12px}#beat-maker>.window-title:after{display:none}#beat-maker>.window-body{margin:0 4px 4px;border-radius:0 0 8px 8px}#beat-maker .beat-app{padding:8px;gap:8px}#beat-maker .beat-transport{padding:7px;gap:7px}#beat-maker .beat-transport .beat-play,#beat-maker .beat-transport [data-beat-action=stop]{height:34px;min-width:60px;font-size:10px}#beat-maker .beat-transport output{font-size:16px;min-width:77px}#beat-maker .beat-loops{width:100%;flex-basis:auto;padding:5px;max-height:139px;gap:5px}#beat-maker .beat-panel-title{padding:1px 2px 3px}#beat-maker .beat-loop{margin:0;min-width:140px;padding:3px}#beat-maker .beat-loops>p{display:none}#beat-maker .beat-note-tools{gap:6px}#beat-maker .beat-app .beat-durations button{min-width:44px;padding:4px 5px;font-size:8px}#beat-maker .beat-durations b{font-size:13px;line-height:15px}#beat-maker .beat-durations small{font-size:7px}#beat-maker .beat-loop-settings label,#beat-maker .beat-note-tools>label{font-size:9px}#beat-maker .beat-editor-footer{gap:3px 8px;font-size:8px}#beat-maker [data-beat-duration]{order:3;flex-basis:100%}#beat-maker .beat-bottom p{font-size:9px}#beat-maker .beat-bottom-actions button{font-size:10px}}