.transport button { position:relative; flex:0 0 92px; width:92px; height:36px; min-height:36px; overflow:hidden; padding:6px 8px; white-space:nowrap; border-color:#7180a0; background:linear-gradient(#33405e,#172036); box-shadow:inset 0 2px #ffffff3d,0 2px var(--shadow-deep); font-size:var(--type-action); transition:box-shadow .06s steps(1); }
.transport button:not(:disabled):active,.input-control button:active { box-shadow:inset 0 4px 7px #000c,0 3px #050811; }
#play { color:#071807; border-color:#52ff38; background:linear-gradient(#72ff5c,#28bf13); text-shadow:none; }
#play[aria-label='Run or pause'] { color:#071807; }
#stop { color:#fff; border-color:#ff5e5e; background:linear-gradient(#ff5151,#b40819); }
#step { border-color:#71bfff; background:linear-gradient(#347bb6,#164369); }
.status { display:grid; place-items:center; flex:0 0 104px; width:104px; height:36px; overflow:hidden; padding:3px 6px; color:var(--text-status); border:2px inset #53617d; border-radius:4px; background:var(--surface-status); font:var(--weight-bold) var(--type-label)/1.2 var(--font-ui); letter-spacing:.02em; text-align:center; }
.status[data-state='running'] { color:var(--state-run); border-color:#2acb16; box-shadow:inset 0 0 9px #39ff1430,0 0 8px #39ff1470; }
.status[data-state='paused'] { color:var(--state-warn); border-color:#b77900; }
.status[data-state='error'] { color:var(--state-stop); border-color:#c52121; box-shadow:0 0 8px #ff313170; }
.sound-toggle { position:relative; flex:0 0 46px; width:46px; height:36px; min-height:36px; padding:15px 2px 1px; font:700 var(--type-micro)/1 var(--font-ui); }
.sound-toggle::before { content:''; position:absolute; top:7px; left:16px; width:14px; height:10px; background:var(--state-run); clip-path:polygon(0 30%,35% 30%,75% 0,75% 100%,35% 70%,0 70%); filter:drop-shadow(0 0 3px #39ff14); }
.sound-toggle[data-enabled='false']::before { background:var(--text-muted); filter:none; }
.header-menu { position:relative; color:var(--text-primary); }
.header-menu summary { min-width:76px; height:38px; display:grid; place-items:center; padding:4px 8px; overflow:hidden; border:2px solid var(--line-bright); border-radius:4px; background:linear-gradient(#34405d,#182137); cursor:pointer; font-size:var(--type-action); font-weight:var(--weight-bold); line-height:1.2; white-space:nowrap; list-style:none; box-shadow:inset 0 2px #fff3,0 2px var(--shadow-deep); }
.header-menu summary::-webkit-details-marker { display:none; }
.header-popover { position:absolute; z-index:20; top:46px; right:0; width:190px; display:grid; gap:8px; padding:12px; border:2px solid var(--line-bright); border-radius:8px; background:var(--bg-panel); box-shadow:5px 6px 0 #050811; }
.header-popover button { width:100%; text-align:left; }
.project-identity { display:grid; gap:2px; margin:0; padding:2px 4px 8px; border-bottom:1px solid var(--line); }
.project-identity span { color:var(--text-muted); font-size:var(--type-micro); font-weight:var(--weight-bold); text-transform:uppercase; }
.project-identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.examples-menu summary { border-color:var(--state-warn); }
.examples-popover { left:0; right:auto; width:270px; }
.example-choice { display:grid; gap:2px; min-height:52px; }
.example-choice small { color:var(--text-muted); font-size:var(--type-label); font-weight:400; }
#undo-example { border-color:var(--state-warn); }
.panels-popover label { display:flex; align-items:center; gap:8px; }
.toast { position:fixed; z-index:30; top:84px; right:16px; max-width:min(420px,calc(100% - 32px)); padding:10px 14px; color:#081308; border:2px solid var(--state-run); border-radius:6px; background:#dfffd9; box-shadow:5px 5px #050811; }
.toast.error { color:#260509; border-color:var(--state-stop); background:#ffd9df; }
.es5-badge { padding:2px 5px; color:#201300; border:1px solid #d98d00; border-radius:3px; background:var(--state-warn); font-size:10px; text-shadow:none; }
.hardware-panel { position:relative; background:linear-gradient(#251b3de8,#17132ae8),linear-gradient(90deg,transparent 49%,#b77cff0c 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#b77cff0c 50%,transparent 51%); background-size:auto,24px 24px,24px 24px; }
#inputs-panel { position:relative; flex:1; min-height:0; overflow:auto; padding:8px; display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:8px; }
.input-control { position:relative; min-width:0; height:72px; padding:6px; overflow:hidden; border:1px solid #5f4b7e; border-radius:4px; background:#ffffff08; box-shadow:inset 0 1px #cfa7ff18; }
.input-control label { height:18px; display:flex; align-items:center; justify-content:space-between; gap:4px; margin-bottom:4px; font-size:var(--type-label); font-weight:var(--weight-bold); }
.control-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.input-control output { min-width:3ch; color:var(--state-warn); font:var(--weight-bold) var(--type-label)/1 var(--font-code); text-align:right; }
.input-control button { width:100%; height:40px; min-height:40px; padding:3px 8px; border-color:#8e85a1; background:linear-gradient(#eeeaf2,#8a8196); color:#100b1c; box-shadow:inset 0 2px #fff,0 4px #08050e; }
.input-control button[data-pressed='true'] { color:#fff; background:var(--bg-pressed); box-shadow:inset 0 5px 9px #000e,0 2px #08050e; }
.switch-well { position:relative; display:block; width:56px; height:30px; margin-top:4px; border:2px solid #08060d; border-radius:2px; background:repeating-linear-gradient(90deg,#0b0911 0 7px,#171322 8px); box-shadow:inset 0 4px 7px #000,0 1px #766889; }
.switch-well input[type='checkbox'] { appearance:none; position:absolute; z-index:2; inset:-2px; width:56px; height:30px; min-height:30px; margin:0; opacity:0; cursor:pointer; }
.switch-handle { pointer-events:none; position:absolute; z-index:1; top:2px; left:2px; width:24px; height:22px; border:2px solid #28222e; border-radius:1px; background:linear-gradient(135deg,#e3dde8 0 28%,#8b8293 55%,#5e5668); box-shadow:inset 2px 2px #fff8,inset -2px -2px #302a36,0 3px #000; transition:left .08s steps(1); }
.input-control[data-checked='true'] .switch-well { border-color:#9d1a62; box-shadow:inset 0 0 8px #ff007f66,0 1px #766889; }
.input-control[data-checked='true'] .switch-handle { left:26px; background:linear-gradient(135deg,#eee8f2 0 28%,#a39aaa 55%,#6e6577); }
.switch-well input:focus-visible { outline:none; }
.switch-well:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:2px; }
.input-control input[type='range'] { appearance:none; width:100%; height:28px; margin:0; background:transparent; }
.input-control input[type='range']::-webkit-slider-runnable-track { height:12px; border:2px solid #090611; border-radius:2px; background:repeating-linear-gradient(90deg,#302a38 0 1px,transparent 1px 10px),#0b0911; box-shadow:inset 0 3px 4px #000; }
.input-control input[type='range']::-webkit-slider-thumb { appearance:none; width:18px; height:26px; margin-top:-10px; border:2px solid #0a0711; border-radius:2px; background:linear-gradient(90deg,#6b6079 0 38%,var(--state-warn) 39% 61%,#6b6079 62%); box-shadow:inset 2px 0 #fff3,0 2px #000; }
.input-control input[type='range']::-moz-range-track { height:8px; border:2px solid #090611; background:repeating-linear-gradient(90deg,#302a38 0 1px,transparent 1px 10px),#0b0911; }
.input-control input[type='range']::-moz-range-thumb { width:16px; height:24px; border:2px solid #0a0711; border-radius:2px; background:var(--state-warn); }
.board-slider { grid-column:1/-1; height:64px; }
.first-cue { margin:auto 12px 12px; padding:8px; color:#2b1b00; border:2px solid #c27e00; border-radius:4px; background:#ffe6a6; }
.sound-toggle[data-tooltip]::after { content:attr(data-tooltip); pointer-events:none; position:absolute; z-index:40; top:calc(100% + 6px); left:50%; width:max-content; padding:5px 7px; opacity:0; transform:translateX(-50%); color:#000; border:1px solid #000; border-radius:6px; background:#fffde3; font:var(--type-caption)/1.2 var(--font-ui); }
.sound-toggle[data-tooltip]:hover::after,.sound-toggle[data-tooltip]:focus-visible::after { opacity:1; }
.canvas-shell { flex:1; min-width:0; min-height:0; display:grid; place-items:center; overflow:hidden; padding:6px; background:radial-gradient(circle,#283650,#101725); }
.crt-bezel { position:relative; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; max-height:100%; overflow:hidden; display:grid; place-items:center; padding:8px; border:3px solid #65718a; border-radius:16px; background:linear-gradient(145deg,#58657a,#20293a 58%,#101621); box-shadow:inset 3px 3px #ffffff24,inset -4px -4px #050811,0 3px #050811; }
.crt-bezel::after { content:''; pointer-events:none; position:absolute; inset:8px; border-radius:9px; background:repeating-linear-gradient(0deg,transparent 0 3px,#0910180c 4px); }
#composite-canvas { display:block; min-width:0; min-height:0; max-width:100%; max-height:100%; aspect-ratio:4/3; width:auto; height:auto; border:3px solid #080c12; border-radius:12px; background:#fff; box-shadow:inset 0 0 18px #001a2a80; touch-action:none; }
.keyboard-region { display:flex; flex-direction:column; }
.keyboard-scroll { flex:1; min-height:0; overflow-x:auto; overflow-y:hidden; padding:4px 8px; background:linear-gradient(#251b3d,#111425); }
.piano-chassis { width:1416px; height:124px; margin:auto; padding:4px 6px 8px; border:3px ridge #66728a; border-radius:8px; background:linear-gradient(#303a51,#111827); box-shadow:inset 3px 3px #ffffff28,inset -4px -4px #050811,0 3px #050811; }
.piano-label-rail { position:relative; width:1400px; height:16px; color:#b9c2d1; border-bottom:2px solid #070a10; background:#171e2d; font:700 var(--type-micro)/14px var(--font-code); user-select:none; }
.piano-note-label { position:absolute; top:0; overflow:visible; text-align:center; white-space:nowrap; }
.piano-note-label.black { color:#ffb8d8; }
#piano { position:relative; width:1400px; height:96px; user-select:none; }
.key { position:absolute; top:0; display:block; padding:0; border:2px solid #090d16; border-radius:0 0 4px 4px; touch-action:none; user-select:none; transition:transform .06s steps(1),box-shadow .06s steps(1); }
.key.white { z-index:1; width:40px; height:96px; border-bottom-width:4px; background:linear-gradient(90deg,#cbd2dc,#fff 18% 72%,#aeb7c5); box-shadow:inset 0 -7px #d4d9e2,0 4px #070a10; }
.key.black { z-index:2; width:24px; height:60px; background:linear-gradient(90deg,#080b12,#34415a 55%,#06080d); box-shadow:inset 0 -5px #05070b,0 4px #070a10; }
.key.active,.key.program-active { color:#18000c; border-color:var(--state-accent); background:linear-gradient(#ff5baa,#ff007f); box-shadow:inset 0 5px 9px #75003a; transform:translateY(4px); }
.ace_marker-layer .execution-line { position:absolute; z-index:4; border-top:2px solid var(--state-warn); border-bottom:2px solid var(--state-warn); background:#ffb00026; }
.ace_marker-layer .error-line { position:absolute; z-index:4; border-top:2px solid var(--state-stop); border-bottom:2px solid var(--state-stop); background:#ff313128; }
.ace-monokai { color:var(--text-primary); background:#0f1322; }
.ace-monokai .ace_gutter { color:var(--text-muted); background:var(--bg-master); }
.ace-monokai .ace_marker-layer .ace_active-line,.ace-monokai .ace_gutter-active-line { background:#18213a; }
.ace-monokai .ace_marker-layer .ace_selection { background:#314362; }
.ace-monokai .ace_cursor { color:var(--text-primary); }
.ace-monokai .ace_keyword,.ace-monokai .ace_storage,.ace-monokai .ace_storage.ace_type { color:var(--syntax-keyword); font-style:normal; }
.ace-monokai .ace_keyword.ace_operator { color:var(--syntax-operator); }
.ace-monokai .ace_support.ace_function,.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_identifier { color:var(--syntax-function); }
.ace-monokai .ace_string { color:var(--syntax-string); }
.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_language { color:var(--syntax-value); }
.ace-monokai .ace_comment { color:var(--syntax-comment); font-style:normal; }
.console-header { color:var(--text-primary); border-color:#070a10; background:var(--surface-title); }
.console-log { min-height:0; overflow:auto; padding:6px 10px; color:var(--state-run); background:var(--surface-terminal); white-space:pre-wrap; font:var(--type-code)/1.45 var(--font-code); }
.console-log:empty::before { content:'Program output will appear here.'; color:var(--text-console-muted); }
.console-entry.warn { color:var(--state-warn); }.console-entry.error { color:#ff7a7a; }.console-entry.error-assistant { color:#ffe28a; }.console-entry.input { color:#7edfff; }
.console-entry.result { color:var(--text-primary); }

.prompt-dialog { width:min(440px,calc(100vw - 32px)); padding:0; color:var(--text-primary); background:var(--bg-panel); border:2px solid #8f9cae; border-radius:8px; box-shadow:6px 6px 0 #05070b,inset 0 0 0 2px #263452; }
.prompt-dialog::backdrop { background:rgb(5 7 11 / 75%); }
.prompt-dialog form { display:grid; gap:12px; padding:16px; }
.prompt-dialog h2 { margin:0; font-size:var(--type-heading); text-transform:uppercase; letter-spacing:.05em; }
.prompt-dialog p { min-height:24px; margin:0; color:var(--text-primary); }
.prompt-dialog label { color:var(--text-muted); font-size:var(--type-code); font-weight:var(--weight-bold); text-transform:uppercase; }
.prompt-dialog input { min-width:0; padding:10px; color:var(--state-run); background:var(--surface-terminal); border:2px inset var(--text-muted); font:var(--type-body) var(--font-code); }
.prompt-dialog textarea { width:100%; min-height:96px; resize:vertical; padding:8px; color:var(--state-run); background:var(--surface-terminal); border:2px inset var(--text-muted); font:var(--type-code)/1.4 var(--font-code); }
.prompt-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.manual-link { display:inline-flex; align-items:center; justify-content:center; min-width:76px; height:38px; padding:4px 10px; overflow:hidden; color:var(--text-primary); border:2px outset var(--text-muted); border-radius:4px; background:var(--surface-title); font-size:var(--type-action); font-weight:var(--weight-bold); line-height:1.2; white-space:nowrap; text-decoration:none; }
.manual-link:active { border-style:inset; background:var(--bg-pressed); }
.console-controls { display:grid; grid-template-columns:auto 1fr 64px; align-items:center; gap:6px; padding:2px 8px; border-top:2px solid #26334b; background:#0a0e17; }
.console-controls #console-context { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--type-label); }
.console-controls .console-snippet { min-width:0; width:100%; height:30px; min-height:30px; color:var(--state-run); border:2px inset var(--line); border-radius:1px; background:var(--surface-terminal); box-shadow:inset 2px 2px 4px #000; font:var(--type-code)/1.45 var(--font-code); }
.console-snippet .ace_scroller { background:var(--surface-terminal); }
.console-snippet .ace_content { padding-top:2px; }
.console-snippet .ace_placeholder { color:var(--text-muted); opacity:1; }
.console-controls button { height:30px; min-height:30px; padding:2px 8px; }