:root {
  --ink: #050303;
  --panel: #0a0606;
  --panel-2: #100908;
  --cream: #f0e7d7;
  --muted: #756b62;
  --gold: #edbb48;
  --amber: #b96310;
  --oxblood: #571316;
  --line: rgba(223, 156, 39, .34);
  --lime: #c6ff28;
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--cream); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(91, 32, 24, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 32, 24, .045) 1px, transparent 1px),
    radial-gradient(circle at 20% 25%, rgba(117, 23, 18, .17), transparent 35%),
    #050303;
  background-size: 74px 74px, 74px 74px, auto, auto;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { color: inherit; }
.app-shell { max-width: 2100px; margin: 0 auto; }
.topbar { min-height: 136px; padding: 22px clamp(22px, 3vw, 62px); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 68px; align-items: center; gap: 34px; background: rgba(3, 2, 2, .96); }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 22px; }
.brand-mark { width: 86px; aspect-ratio: 1; border: 1px solid var(--line); display: grid; place-items: center; background: #030202; }
.brand-mark img { width: 78%; height: 78%; object-fit: contain; }
.brand > span:last-child { display: grid; gap: 11px; }
.brand b { font-size: 25px; letter-spacing: .21em; }
.brand small, .eyebrow, .library-state, .control footer, .actions span, .transport span, .tags, .hero-card figcaption span, .keyboard-foot, .shortcuts { font-family: "Courier New", monospace; font-weight: 700; letter-spacing: .15em; }
.brand small { color: #c99022; font-size: 10px; }
.library-state { display: flex; align-items: center; gap: 13px; color: #8a7f75; font-size: 10px; }
.library-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px rgba(237,187,72,.6); }
.library-state.ready i { background: var(--lime); box-shadow: 0 0 14px rgba(198,255,40,.55); }
.help-button { width: 62px; height: 62px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 23px; cursor: pointer; }
.workspace { padding: clamp(54px, 6vw, 110px) clamp(18px, 3vw, 60px) 42px; display: grid; grid-template-columns: minmax(390px, .72fr) minmax(700px, 1.3fr); gap: clamp(38px, 4vw, 72px); align-items: start; }
.hero-card { margin: clamp(120px, 11vw, 220px) 0 0; min-width: 0; border: 1px solid var(--line); background: #030202; box-shadow: 18px 18px 0 rgba(0,0,0,.52); position: sticky; top: 30px; }
.hero-card img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: contain; background: #030202; }
.hero-card figcaption { min-height: 76px; padding: 0 27px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hero-card figcaption b { font-size: 13px; letter-spacing: .12em; }
.hero-card figcaption span { color: #9a6a20; font-size: 9px; white-space: nowrap; }
.machine { min-width: 0; border: 1px solid var(--line); background: rgba(6,4,4,.94); box-shadow: 20px 20px 0 rgba(0,0,0,.5); }
.machine-head { min-height: 174px; padding: 30px 38px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 30px; background: linear-gradient(120deg, rgba(110,21,17,.2), transparent 58%); }
.eyebrow { margin: 0 0 18px; color: #d59b30; font-size: 11px; }
h1, h2 { margin: 0; font-weight: 900; letter-spacing: -.035em; }
h1 { max-width: 810px; font-size: clamp(34px, 3.3vw, 64px); line-height: .95; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tags span { min-height: 48px; padding: 0 15px; border: 1px solid var(--line); display: grid; place-items: center; color: #b6a696; font-size: 9px; white-space: nowrap; }
.tags span:first-child { color: var(--gold); }
.pattern { position: relative; min-height: clamp(300px, 30vw, 475px); padding: 42px 32px; display: grid; grid-template-columns: repeat(32, 1fr); align-items: center; gap: 6px; overflow: hidden; background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(122,84,54,.06) 28px), linear-gradient(90deg, rgba(87,19,22,.08), transparent 70%); }
.pattern::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 24.8%, var(--line) 25%, transparent 25.2%, transparent 49.8%, var(--line) 50%, transparent 50.2%, transparent 74.8%, var(--line) 75%, transparent 75.2%); }
.step { position: relative; height: var(--height, 12%); min-height: 12px; background: linear-gradient(180deg, #7b3c13, var(--gold) 48%, #55250c); opacity: var(--opacity, .18); box-shadow: 0 0 16px rgba(221,142,34,.13); transition: height .22s ease, opacity .22s ease, filter .08s ease; }
.step.anchor { outline: 1px solid rgba(240,190,69,.5); }
.step.active { filter: brightness(2.1); box-shadow: 0 0 27px rgba(237,187,72,.58); opacity: 1 !important; }
.step.muted { background: #201b18; box-shadow: none; }
.transport { min-height: 118px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 116px minmax(210px,1fr) minmax(185px,.65fr) minmax(145px,.45fr); }
.transport > * { border: 0; border-right: 1px solid var(--line); background: transparent; }
.transport > *:last-child { border-right: 0; }
.play-button { cursor: pointer; display: grid; place-items: center; }
.play-button i { width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 21px solid var(--gold); transform: translateX(3px); }
.play-button.playing i { width: 20px; height: 20px; border: 0; background: var(--gold); transform: none; }
.time { padding: 0 28px; display: flex; align-items: center; gap: 14px; font: 14px "Courier New", monospace; }.time span,.time em { color: #58504b; font-style: normal; }
.source-button, .export-button { padding: 19px 24px; display: grid; align-content: center; justify-items: start; gap: 9px; cursor: pointer; text-align: left; }
.source-button span, .export-button span { color: #716861; font-size: 8px; }.source-button b,.export-button b { font: 700 13px "Courier New", monospace; color: var(--gold); letter-spacing: .1em; }
.control-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.control { min-height: 212px; padding: 30px 31px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(87,19,22,.07), transparent); }
.control:nth-child(2n) { border-right: 0; }
.control header { display: grid; grid-template-columns: 1fr auto 43px; align-items: center; gap: 14px; }
.control label { font-weight: 900; font-size: 15px; letter-spacing: .13em; }
.control output { color: var(--gold); font: 700 13px "Courier New", monospace; }
.lock { width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; color: var(--gold); cursor: pointer; }
.lock.locked { color: #070303; background: var(--gold); }
.control input, #glide { width: 100%; height: 4px; margin: 47px 0 22px; appearance: none; background: linear-gradient(90deg, var(--gold) 0 var(--fill,50%), #292320 var(--fill,50%) 100%); }
.control input::-webkit-slider-thumb, #glide::-webkit-slider-thumb { appearance: none; width: 31px; height: 31px; border: 3px solid #050303; outline: 2px solid var(--gold); border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px rgba(237,187,72,.3); }
.control input::-moz-range-thumb, #glide::-moz-range-thumb { width: 27px; height: 27px; border: 3px solid #050303; outline: 2px solid var(--gold); border-radius: 50%; background: var(--gold); }
.control footer { color: #564e48; font-size: 8px; display: flex; justify-content: space-between; }
.actions { display: grid; grid-template-columns: repeat(4,1fr); min-height: 114px; }
.actions button { padding: 20px; border: 0; border-right: 1px solid var(--line); display: grid; align-content: center; justify-items: start; gap: 9px; background: #070404; cursor: pointer; text-align: left; }
.actions button:last-child { border-right: 0; }.actions b { font-size: 15px; letter-spacing: .13em; }.actions span { color: #6a6059; font-size: 7px; }
.actions .primary { background: linear-gradient(120deg,#f0cc69,#b9620e); color: #070303; }.actions .primary span { color: rgba(0,0,0,.58); }
.actions .performance { border: 1px solid rgba(129,31,28,.75); color: #d77258; }.actions .performance.active { background: #7e1819; color: #fff1dd; }
button:disabled { opacity: .32; cursor: not-allowed; }
button:not(:disabled):hover { filter: brightness(1.12); }
.keyboard-panel { margin: 32px clamp(18px,3vw,60px) 90px; border: 1px solid var(--line); background: rgba(6,4,4,.94); box-shadow: 18px 18px 0 rgba(0,0,0,.45); }
.keyboard-panel > header { min-height: 158px; padding: 36px 42px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.keyboard-panel h2 { font-size: clamp(31px,3vw,54px); }.keyboard-panel header > p { max-width: 630px; margin: 0; color: #756b62; font: 12px/1.7 "Courier New", monospace; }
.keyboard { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(24,1fr); min-height: 220px; background: #030202; overflow: hidden; }
.key { position: relative; min-width: 0; border: 0; border-right: 1px solid var(--line); display: grid; place-content: end center; padding: 0 4px 22px; gap: 7px; background: linear-gradient(180deg,rgba(255,255,255,.035),transparent); cursor: pointer; touch-action: none; }
.key:last-child { border-right: 0; }.key.sharp { background: linear-gradient(180deg,#2b1512 0 58%,#090505 59%); }.key b { font-size: 11px; }.key small { color: #6f655d; font: 7px "Courier New", monospace; }
.key.active { background: linear-gradient(180deg,#8c321a,#e4af41); color: #050303; }.key.active small { color: #35160c; }
.keyboard-foot { min-height: 84px; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: #6c635c; font-size: 8px; }
.keyboard-foot label { display: flex; align-items: center; gap: 13px; color: var(--gold); }.keyboard-foot #glide { width: 160px; margin: 0; }.keyboard-foot output { min-width: 34px; }
.sheet { width: min(760px,calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); color: var(--cream); background: #080505; box-shadow: 20px 20px 0 rgba(0,0,0,.65); }
.sheet::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(8px); }
.sheet-card { padding: 34px; }.sheet-card > header { min-height: 90px; display: flex; justify-content: space-between; gap: 20px; align-items: start; }.sheet h2 { font-size: 35px; }.sheet header button { width: 45px; height: 45px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 23px; }
.source-choice { width: 100%; min-height: 108px; padding: 22px 25px; border: 1px solid var(--line); border-bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: inherit; background: #090606; cursor: pointer; text-align: left; }.source-choice:last-of-type { border-bottom: 1px solid var(--line); }
.source-choice span { display: grid; gap: 9px; }.source-choice b { font-size: 15px; letter-spacing: .1em; }.source-choice small { color: #766b63; font: 9px "Courier New", monospace; }.source-choice em { color: var(--gold); font-style: normal; font-size: 22px; }
.sheet.busy .source-choice { display: none; }
.progress { padding: 24px 0 0; }.progress div { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--gold); font: 9px "Courier New", monospace; letter-spacing: .13em; }.progress progress { width: 100%; height: 8px; accent-color: var(--gold); }
.help-grid { display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid var(--line); }.help-grid p { min-height: 130px; margin: 0; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; align-content: center; gap: 10px; }.help-grid p:nth-child(2n) { border-right: 0; }.help-grid b { color: var(--gold); font-size: 13px; letter-spacing: .1em; }.help-grid span { color: #7d7168; font: 10px/1.6 "Courier New", monospace; }.shortcuts { padding: 22px 0 0; color: #7a6d63; font-size: 9px; }
.toast { position: fixed; z-index: 30; right: 24px; bottom: 24px; max-width: min(430px,calc(100vw - 48px)); padding: 17px 22px; border: 1px solid var(--line); background: #0a0606; font: 700 10px "Courier New", monospace; letter-spacing: .09em; transform: translateY(100px); opacity: 0; transition: .25s ease; }.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1200px) {
  .workspace { grid-template-columns: 1fr; }.hero-card { width: min(820px,100%); margin: 0 auto; position: static; }.machine { width: 100%; }
  .keyboard { grid-template-columns: repeat(12,1fr); }.key { min-height: 125px; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .topbar { min-height: 96px; padding: max(12px,env(safe-area-inset-top)) 15px 12px; grid-template-columns: 1fr auto; }.brand { gap: 12px; }.brand-mark { width: 59px; }.brand b { font-size: 16px; }.brand small { font-size: 7px; }.library-state { display: none; }.help-button { width: 47px; height: 47px; }
  .workspace { padding: 24px 10px; gap: 26px; }.hero-card { box-shadow: 7px 7px 0 #000; }.hero-card figcaption { min-height: 58px; padding: 0 14px; }.hero-card figcaption b { font-size: 9px; }.hero-card figcaption span { font-size: 7px; }
  .machine { box-shadow: 7px 7px 0 #000; }.machine-head { min-height: 155px; padding: 24px 18px; display: grid; }.machine-head h1 { font-size: 31px; }.tags { justify-content: start; }.tags span { min-height: 36px; padding: 0 9px; font-size: 7px; }
  .pattern { min-height: 245px; padding: 25px 12px; gap: 3px; }
  .transport { grid-template-columns: 72px 1fr 1fr; }.time { padding: 0 13px; font-size: 10px; }.source-button { grid-column: 2; min-height: 68px; border-top: 1px solid var(--line); }.export-button { grid-column: 3; min-height: 68px; border-top: 1px solid var(--line); }
  .control { min-height: 180px; padding: 23px 14px 18px; }.control header { grid-template-columns: 1fr auto 34px; gap: 7px; }.control label { font-size: 11px; }.control output { font-size: 9px; }.lock { width: 33px; height: 33px; }.control input { margin: 39px 0 20px; }
  .actions { grid-template-columns: repeat(2,1fr); }.actions button { min-height: 88px; border-bottom: 1px solid var(--line); }.actions button:nth-child(2n) { border-right: 0; }
  .keyboard-panel { margin: 0 10px 45px; box-shadow: 7px 7px 0 #000; }.keyboard-panel > header { min-height: 155px; padding: 27px 18px; display: grid; gap: 19px; }.keyboard-panel h2 { font-size: 30px; }.keyboard-panel header > p { font-size: 9px; }
  .keyboard { grid-template-columns: repeat(8,1fr); }.key { min-height: 92px; }.keyboard-foot { display: grid; padding: 18px; line-height: 1.5; }.keyboard-foot label { width: 100%; }.keyboard-foot #glide { flex: 1; }
  .sheet-card { padding: 24px 18px; }.help-grid { grid-template-columns: 1fr; }.help-grid p { border-right: 0; min-height: 110px; }.sheet h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; scroll-behavior: auto !important; } }