html { background:#181a1b; color:#ddd; font-family:Arial,sans-serif; }
body { margin:0; padding:18px 10px; } * { box-sizing:border-box; }
a { color:#00ffd0; } button,select,input { font:inherit; } button,a,select,summary { touch-action:manipulation; }
.studio { max-width:1516px; margin:auto; }
.faceplate-scroll { overflow-x:auto; }
#faceplate-size { position:relative; margin:auto; }
.faceplate { position:relative; width:1264px; height:513px; transform-origin:top left; background:url('../../castio.png') 0 0 / 1264px 513px no-repeat; color:#000; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.faceplate .keys-panel { position:absolute; left:19px; top:100px; width:231px; height:196px; display:block; overflow:hidden; background:#080b0a; }
.keys-panel .pattern-area { width:100%; height:196px; display:flex; }
.faceplate .track-panel { position:absolute; left:434px; top:101px; width:523px; height:116px; background:#050606; display:grid; grid-template-rows:repeat(4,1fr); overflow:auto; scrollbar-width:thin; }
.track-row { display:grid; grid-template-columns:repeat(16,minmax(31px,1fr)); }
.track-cell { position:relative; min-width:0; }
.track-cell select { appearance:none; width:100%; height:100%; padding:0; margin:0; border:1px solid transparent; border-radius:0; background:#050606; color:#00ffcb; text-align:center; font:bold 23px Arial,sans-serif; cursor:pointer; }
.track-cell select.has-pattern { background:#454747; border-color:#555; }
.track-cell select:focus-visible { outline:2px solid white; outline-offset:-2px; }
.track-cell.active select { color:#fff; box-shadow:inset 0 -2px #00ffcb; }
.track-row.drums select { color:#999; }
.track-cell option { background:#252827; color:#00ffd0; }
.drum-panel { position:absolute; left:1029px; top:100px; width:217px; height:196px; display:grid; grid-template-columns:12px repeat(8,1fr); grid-template-rows:repeat(12,1fr); background:#444; border:1px solid #202323; }
.drum-panel button { min-width:0; padding:0; margin:0; border:1px solid #292b2a; border-radius:0; background:#444; cursor:pointer; }
.drum-panel button.on { background:#00ffcb; box-shadow:inset 0 0 0 3px #387b6c; }
.drum-panel button:focus-visible { outline:2px solid white; z-index:1; }
.drum-dot { background:radial-gradient(circle,#fff 0 2px,#00ffcb 2px 5px,transparent 5px); }
.hardware-slider { position:absolute; height:53px; background:#444; display:flex; align-items:center; }
.tempo-slider { left:352px; top:246px; width:269px; }
.pitch-slider { left:727px; top:246px; width:273px; }
.volume-slider { left:972px; top:325px; width:260px; }
.hardware-slider input { appearance:none; background:transparent; width:100%; height:46px; margin:0; padding:0 8px; cursor:pointer; }
.hardware-slider input::-webkit-slider-runnable-track { height:6px; background:#c6c6c6; }
.hardware-slider input::-webkit-slider-thumb { appearance:none; width:18px; height:38px; background:#c6c6c6; border:0; border-radius:0; margin-top:-16px; }
.hardware-slider input::-moz-range-track { height:6px; background:#c6c6c6; }
.hardware-slider input::-moz-range-thumb { width:18px; height:38px; background:#c6c6c6; border:0; border-radius:0; }
.hardware-select { position:absolute; top:342px; height:29px; background:#ccc; border:2px outset #ddd; display:flex; align-items:center; justify-content:center; font:bold 18px Arial,sans-serif; pointer-events:none; }
.scale-slot { left:65px; width:162px; } .instrument-slot { left:265px; width:161px; }
.hardware-select::after { content:'⌄'; position:absolute; right:10px; top:0; color:#555; font-size:27px; }
.hardware-select select { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; pointer-events:auto; }
.hardware-select:focus-within { outline:2px solid white; }
.keyboard { position:absolute; left:24px; top:399px; width:1026px; height:107px; display:flex; }
.keyboard button { position:absolute; top:0; height:100%; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; touch-action:none; }
.keyboard button.black { height:65%; z-index:1; }
.keyboard button.held,.keyboard button:active { background:#00ffd080; box-shadow:inset 0 0 0 2px #00ffcb; }
.keyboard button:focus-visible { outline:2px solid #00ffcb; outline-offset:-2px; background:#00ffd040; }
.utility-bar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 4px; }
.utility-bar button,.save-panel button { background:#454948; border:1px solid #8c9995; color:#eee; padding:7px 16px; cursor:pointer; }
#transport-slot { display:block; width:175px; background:transparent; }
#control-status { color:#a8b4b0; font:12px monospace; margin-left:auto; }
#advanced { border:1px solid #454b48; background:#303435; margin:4px 0 18px; }
summary { cursor:pointer; padding:12px; font-size:13px; }
#beepboxEditorContainer { padding:12px; }
#beepboxEditorContainer .beepboxEditor { display:grid; grid-template-columns:minmax(0,1fr) 240px; grid-template-areas:'track-area settings-area'; }
#beepboxEditorContainer .settings-area { width:240px; }
.save-panel { display:flex; gap:14px; flex-wrap:wrap; align-items:end; padding:8px 4px; }
.save-panel label { display:grid; gap:7px; font:11px Arial,sans-serif; flex:1; }
.save-panel input { min-width:150px; padding:10px; background:#272c2a; color:#e4eae7; border:1px solid #68736e; }
.save-panel button { padding:11px 18px; color:#00ffd0; }
#save-status,footer { font-size:12px; color:#a2aeaa; padding:0 4px; }
html:root { --page-margin:#181a1b; --editor-background:#080b0a; --primary-text:#eee; --secondary-text:#aaa; --ui-widget-background:#444; --ui-widget-focus:#666; --pitch-background:#444; --tonic:#005245; --fifth-note:#34413d; --link-accent:#00ffd0; --loop-accent:#00ffd0; --playhead:#fff; --pitch1-primary-channel:#00ffd0; --pitch1-secondary-channel:#078d76; --pitch1-primary-note:#93ffe6; --pitch1-secondary-note:#00b997; --pitch2-primary-channel:#00ffd0; --pitch3-primary-channel:#00ffd0; }
@media(max-width:600px) { body { padding:8px; } #beepboxEditorContainer .beepboxEditor { grid-template-columns:minmax(0,1fr); grid-template-areas:'track-area' 'settings-area'; } #beepboxEditorContainer .settings-area { width:100%; } }