:root {
  font-family: Arial, Helvetica, sans-serif;
  color-scheme: light;
  --background: #f0f0e6;
  --ink: #121414;
  --muted: #5c5e52;
  --surface: #f0f0e6;
  --edge: #121414;
  --separator: #c9c9bd;
  --fill: #e8e8dd;
  --selected: #121414;
  --focus: #0079b5;
  --blue: #009dea;
  --orange: #ff4b23;
  --shadow: none;
  --glass-highlight: transparent;
}
body { background: var(--background); }
button,input,select,textarea { border-radius: 0; background-color: transparent; border-color: #b6b8aa; }
button { font-weight: 700; border-color: var(--ink); padding: 12px 17px; }
button:hover { background-color: #e0e0d3; }
button:disabled { opacity: .45; }
:is(button,input,select,textarea,a):focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23121414' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E"); background-color: #f8f8f0; padding-right: 40px; }
header { max-width: none; min-height: 88px; padding: 0 max(36px,calc((100vw - 1248px)/2)); border-bottom: 1px solid var(--ink); }
.brand-home { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: .07em; line-height: 1.3; }
.brand-home img { width: 34px; height: 34px; }
main { max-width: 1320px; margin: 0 auto 64px; padding: 0 36px; }
.heading { align-items: flex-end; margin: 0; padding: 46px 0 34px; }
.heading h1 { font-family: Impact, "Arial Narrow", Arial, sans-serif; text-transform: uppercase; font-size: clamp(42px,5vw,68px); font-weight: 900; line-height: 1; letter-spacing: -.035em; }
.heading p { color: var(--ink); font-size: 16px; line-height: 1.5; padding-bottom: 3px; }
.glass { background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.stage { padding: 0; }
.stage-toolbar { gap: 28px; padding: 22px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.layout-control { gap: 14px; }
.layout-control h3,.preset-pick { color: var(--ink); font-size: 12px; font-weight: 700; }
.layout-options { max-width: 390px; gap: 6px; }
.layout-options button { height: 42px; padding: 9px 8px; color: #92958a; border: 1px solid transparent; }
.layout-options button:hover { color: var(--ink); background: #e1e1d5; }
.layout-options button[aria-pressed=true] { color: var(--ink); border-color: var(--ink); background: #fff; }
.layout-options svg { max-height: 23px; }
.layout-options rect:not([fill=none]) { fill: var(--blue); opacity: .45; transition: opacity .15s; }
.layout-options button:is(:hover,[aria-pressed=true]) rect:not([fill=none]) { opacity: 1; }
.preset-pick { gap: 12px; }
.preset-select { width: 144px; }
.preset-select select { height: 42px; font-size: 13px; border-color: var(--ink); }
.code-actions { gap: 10px; }
.code-actions .code-action { height: 42px; padding: 10px 18px; font-size: 12px; }
.primary { background: var(--orange); color: var(--ink); border-color: var(--orange); font-weight: 700; }
.primary:hover { background: #eb421e; border-color: #eb421e; filter: none; }
.share-status { top: auto; bottom: -24px; right: 14px; color: var(--ink); z-index: 1; }
.demo-panel { background: #e4e4d9; padding: 36px 32px 0; border-bottom: 1px solid var(--ink); }
.device-scene { max-width: 1050px; margin: 0 auto 26px; }
.preview-labels { color: var(--ink); font-size: 14px; }
.action-first { font-weight: 700; }
.demo-panel .action-hold { color: var(--muted); font-size: 12px; }
.preview-label .action-first,.preview-label .action-hold { padding: 3px 9px; border-radius: 7px; }
.preview-label[data-action=first] .action-first,.preview-label[data-action=hold] .action-hold { color: white; border-color: white; background: #121414; }
.device { padding: 14px 0; }
.device > svg { filter: drop-shadow(0 13px 9px #12141430); }
.preview-zone { border-radius: 0; }
.preview-zone[data-active=true] { background: transparent; box-shadow: none; }
.preview-hint { color: var(--muted); font-size: 12px; margin-top: 14px; }
.feedback { gap: 48px; margin: 0 -32px; padding: 16px 32px; min-height: 74px; border: 0; border-top: 1px solid #12141440; border-radius: 0; background: transparent; }
.current-readout { display: flex; align-items: center; gap: 20px; width: 330px; }
.current-label { color: var(--muted); font-size: 9px; letter-spacing: .12em; font-weight: 700; margin: 0; white-space: nowrap; }
.current-value { gap: 12px; }
kbd { border-radius: 0; background: #f0f0e6; border: 1px solid var(--ink); }
#currentAction { font: 700 17px Arial,Helvetica,sans-serif; }
#currentAction[data-idle=true] { color: var(--muted); }
.key-state { color: var(--muted); font-size: 11px; }
.countdown { color: var(--muted); width: 170px; }
.progress-track { background: #12141425; border-radius: 0; }
.progress-fill { background: var(--ink); }
.workbench { margin-top: 34px; }
.editor { padding: 0; }
.base-layer { margin-bottom: 26px; }
.layer-card { background: transparent; border: 1px solid #b6b8aa; border-radius: 0; padding: 20px; gap: 20px; }
.layer-edit { gap: 18px; border-radius: 0; }
.layer-card-title { font-size: 12px; font-weight: 700; }
.layer-card-title span:last-child { font-size: 20px; color: var(--ink); line-height: 1; }
.layer-edit:hover .layer-card-title { color: #006595; }
.layer-strip { height: 16px; gap: 1px; border-radius: 0; background: var(--fill); }
.layer-strip i { background: #d4d5c9; }
.base-layer .layer-card { padding: 20px 22px; border-color: var(--ink); }
.base-layer .layer-edit { grid-template-columns: 150px 1fr; align-items: center; gap: 32px; }
.base-layer .layer-card-title { font-size: 13px; }
.base-layer .layer-strip { height: 18px; }
.editor-tabs { gap: 0; margin-bottom: 28px; border-bottom: 1px solid var(--ink); }
.editor-tabs button { border: 0; border-radius: 0; border-bottom: 4px solid transparent; padding: 16px 16px 18px; color: var(--muted); background: transparent; font-size: 16px; }
.editor-tabs button+button { border-left: 1px solid #c9c9bd; }
.editor-tabs button:hover { background: #e8e8dd; }
.editor-tabs button[aria-selected=true] { border-color: transparent; border-bottom-color: var(--orange); background: #e8e8dd; color: var(--ink); }
.editor-tabs button+button[aria-selected=true] { border-left-color: #c9c9bd; }
.editor-tabs .action-hold { font-size: 11px; color: var(--muted); }
.editor-tabs .button-number { font-size: 10px; font-weight: 700; letter-spacing: .08em; margin-top: 7px; opacity: 1; }
.button-mode { width: calc(50% - 16px); }
.button-mode > .control { font-weight: 700; }
.action-pair { gap: 32px; margin-top: 22px; }
.action-controls { background: transparent; border: 1px solid #b6b8aa; border-radius: 0; padding: 22px; }
.action-artwork .layer-card { min-height: 136px; }
.control { font-size: 12px; gap: 8px; }
.control select,.key-picker select { min-height: 42px; font-size: 13px; }
.activity-title { font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.mods { gap: 8px; }
.mods label { padding: 8px 10px; border-radius: 0; background: transparent; color: var(--muted); }
.mods label:has(input:checked) { background: #dce9e9; border-color: #0079b5; color: var(--ink); }
.hold-calculation { margin-top: 12px; padding: 12px 0 0; border-top: 1px solid var(--separator); border-radius: 0; background: transparent; color: var(--muted); }
.duration input { min-height: 40px; background: #f8f8f0; }
.layer-toggle { background: transparent; }
.layer-toggle:hover { background: transparent; }
.layer-toggle::before { background: #8a8d80; opacity: .5; }
.layer-toggle::after { box-shadow: none; background: var(--background); }
.layer-toggle[aria-checked=true]::before { background: var(--ink); }
.segmented { border-radius: 0; background: transparent; padding: 0; gap: 0; border-color: var(--ink); }
.segmented button { border-radius: 0; padding: 10px 16px; font-weight: 700; }
.segmented button[aria-pressed=true] { background: var(--ink); color: var(--background); box-shadow: none; }
.error { color: #a82b13; }
@media(max-width:1100px) {
  .stage-toolbar { grid-template-columns: minmax(0,1fr) auto; gap: 18px; }
  .layout-control { grid-column: 1/-1; }
  .layout-options { max-width: 480px; }
  .preset-pick { justify-self: start; }
}
@media(max-width:760px) {
  header { min-height: 76px; padding: 0 24px; }
  main { padding: 0 24px; }
  .heading { padding: 32px 0 28px; align-items: start; gap: 22px; }
  .heading h1 { font-size: clamp(34px,6.6vw,50px); max-width: 9em; }
  .heading p { max-width: 8em; font-size: 13px; }
  .demo-panel { padding: 28px 16px 0; }
  .feedback { margin-inline: -16px; padding: 14px 20px; gap: 20px; }
  .current-readout { display: block; width: auto; flex: 1; }
  .current-label { margin-bottom: 8px; }
  .device-scene { margin-bottom: 22px; }
  .preview-labels { font-size: 12px; }
  .demo-panel .action-hold { font-size: 10px; }
  .preview-label .action-first,.preview-label .action-hold { padding: 3px; }
  .action-pair { gap: 20px; }
  .button-mode { width: calc(50% - 10px); }
}
@media(max-width:560px) {
  header { min-height: 70px; padding: 0 20px; }
  .brand-home { font-size: 13px; gap: 10px; }
  .brand-home img { width: 29px; height: 29px; }
  main { padding: 0 16px; margin-bottom: 32px; }
  .heading { display: block; padding: 28px 0 24px; }
  .heading h1 { font-size: 40px; max-width: none; }
  .heading p { margin-top: 12px; text-align: left; max-width: none; font-size: 13px; }
  .stage-toolbar { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 18px 0; }
  .layout-control { gap: 8px; }
  .layout-control h3 { font-size: 11px; }
  .layout-options { gap: 4px; }
  .layout-options button { padding: 9px 4px; }
  .preset-pick { width: 100%; }
  .preset-select { flex: 1; }
  .code-actions .code-action { flex: 1; }
  .demo-panel { padding: 26px 8px 0; }
  .feedback { margin-inline: -8px; padding: 14px 16px; }
  .preview-labels { font-size: 12px; }
  .demo-panel .action-hold { font-size: 9px; }
  .preview-hint { font-size: 11px; }
  .countdown { width: 110px; }
  .base-layer .layer-edit { grid-template-columns: 1fr; gap: 16px; }
  .base-layer .layer-card { padding: 18px; }
  .editor-tabs button { font-size: 14px; padding: 14px 6px; }
  .editor-tabs .action-hold { font-size: 10px; }
  .button-mode { width: 100%; }
  .action-controls { padding: 18px; }
  .action-pair { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .action-artwork .layer-card { min-height: 0; }
}