:root {
  --ink: #f5f0ea;
  --muted: #a9a1ad;
  --surface: #201d27;
  --surface-2: #292531;
  --border: rgba(244, 237, 255, 0.13);
  --accent: #ef6b45;
  --accent-2: #d55cdb;
  --accent-soft: rgba(239, 107, 69, 0.15);
  --green: #9ee06f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(900px 540px at 85% -5%, rgba(213, 92, 219, .18), transparent 66%), radial-gradient(680px 440px at -9% 22%, rgba(239, 107, 69, .16), transparent 68%), #15131b; }
button, select, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1120px, calc(100% - 32px)); margin: auto; padding: 22px 0 64px; }
.hero { padding: 0 0 32px; }
.app-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 54px; border-bottom: 1px solid var(--border); }
.back-link { color: var(--muted); font-weight: 650; font-size: .85rem; text-decoration: none; }
.back-link:hover { color: var(--ink); }
.brand { display: flex; align-items: center; gap: .58rem; letter-spacing: -.02em; }
.brand span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #24171c; background: linear-gradient(135deg, var(--accent), #ffb968); font-weight: 900; font-size: .68rem; }
.draft-pill { justify-self: end; padding: .32rem .5rem; border: 1px solid rgba(158,224,111,.36); border-radius: 100px; color: var(--green); font-size: .63rem; font-weight: 800; letter-spacing: .09em; }
.hero-copy { max-width: 720px; margin: 74px auto 45px; text-align: center; }
.kicker, .section-kicker { margin: 0 0 .55rem; color: #ff9c7c; font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 1rem; font-size: clamp(2.6rem, 7vw, 5.2rem); letter-spacing: -.075em; line-height: .95; }
.hero-copy > p:last-child { max-width: 560px; margin: auto; color: var(--muted); font-size: 1.06rem; line-height: 1.55; }
.workflow { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: rgba(32,29,39,.72); }
.workflow span { padding: .95rem 1.1rem; border-right: 1px solid var(--border); color: var(--muted); font-size: .78rem; font-weight: 700; }
.workflow span:last-child { border-right: 0; }
.workflow b { margin-right: .38rem; color: var(--accent); }
.panel { margin-top: 18px; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(135deg, rgba(42,37,50,.94), rgba(29,27,36,.94)); box-shadow: 0 30px 60px rgba(0,0,0,.16); }
.section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: start; margin-bottom: 23px; }
h2 { margin-bottom: 0; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.045em; line-height: 1.1; }
.section-note { max-width: 310px; margin: .3rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.48; }
.control-grid, .range-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.control-grid label { display: grid; gap: .45rem; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
select { width: 100%; min-height: 46px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 10px; outline: none; color: var(--ink); background: rgba(11,10,15,.34); font-weight: 700; letter-spacing: normal; text-transform: none; }
select:focus { border-color: var(--accent); }
.range-grid { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.range-control { display: grid; grid-template-columns: 1fr auto; gap: .6rem; color: var(--muted); font-size: .76rem; font-weight: 750; }
.range-control output { color: var(--ink); font-variant-numeric: tabular-nums; }
.range-control input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.main-actions, .mutation-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.primary-button, .quiet-button, .export-button { min-height: 46px; padding: 0 1rem; border: 1px solid transparent; border-radius: 10px; font-size: .84rem; font-weight: 820; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.primary-button { color: #2a1517; background: linear-gradient(100deg, var(--accent), #ffa16e); }
.primary-button:hover:not(:disabled), .export-button:hover:not(:disabled) { transform: translateY(-2px); }
.quiet-button { border-color: var(--border); color: var(--ink); background: rgba(255,255,255,.035); }
.quiet-button:hover:not(:disabled) { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.08); }
button:disabled { cursor: not-allowed; opacity: .42; }
.pattern-panel { min-height: 350px; }
.output-heading { margin-bottom: 16px; }
.pattern-meta { max-width: 360px; color: var(--muted); font-size: .82rem; line-height: 1.4; text-align: right; }
.piano-roll { position: relative; display: grid; grid-template-rows: repeat(12, 1fr); height: 244px; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(100% / 12 - 1px), rgba(255,255,255,.055) calc(100% / 12 - 1px), rgba(255,255,255,.055) calc(100% / 12)), repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 16 - 1px), rgba(255,255,255,.055) calc(100% / 16 - 1px), rgba(255,255,255,.055) calc(100% / 16)); }
.piano-roll::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 24.8%, rgba(255,255,255,.25) 25%, transparent 25.2%, transparent 49.8%, rgba(255,255,255,.25) 50%, transparent 50.2%, transparent 74.8%, rgba(255,255,255,.25) 75%, transparent 75.2%); }
.piano-roll.empty { display: grid; place-items: center; background: rgba(10,9,13,.24); }
.empty-pattern { color: var(--muted); font-size: .9rem; }
.note { position: absolute; z-index: 1; min-width: 4px; min-height: 8px; border: 1px solid rgba(255,237,225,.25); border-radius: 4px; background: linear-gradient(110deg, #f06b47, #d95fd1); box-shadow: 0 5px 12px rgba(213,92,219,.25); }
.note.chord { background: linear-gradient(110deg, #ffad70, #f16c8b); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: .72rem; }
.legend span { display: inline-flex; gap: .38rem; align-items: center; }
.note-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); }.bar-line { width: 1px; height: 12px; background: rgba(255,255,255,.4); }
.lock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lock-button { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: center; min-height: 92px; padding: 15px; border: 1px solid var(--border); border-radius: 14px; color: var(--ink); text-align: left; background: rgba(12,11,16,.23); }
.lock-button:hover { border-color: rgba(255,255,255,.3); }.lock-button[aria-pressed="true"] { border-color: rgba(158,224,111,.72); background: rgba(158,224,111,.1); }
.lock-icon { display: grid; grid-row: span 2; place-items: center; width: 37px; height: 37px; border-radius: 10px; color: #201c23; background: #cbbac5; font-weight: 900; }.lock-button[aria-pressed="true"] .lock-icon { color: #17300c; background: var(--green); }
.lock-button b { font-size: .88rem; }.lock-button small { color: var(--muted); font-size: .72rem; }
.export-button { margin-left: auto; color: #1c1721; background: var(--green); }.export-button span { font-size: .7rem; opacity: .7; }
.status { min-height: 1.25em; margin: 17px 0 0; color: var(--muted); font-size: .82rem; }.status.success { color: var(--green); }
.draft-note { margin: 18px auto 0; padding: 18px 24px; border: 1px dashed rgba(255,255,255,.18); border-radius: 16px; color: var(--muted); font-size: .8rem; line-height: 1.5; }.draft-note p { margin-bottom: 0; }.draft-note strong { color: var(--ink); }
.app-footer { display: flex; justify-content: space-between; gap: 1rem; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); color: var(--muted); font-size: .75rem; line-height: 1.45; }.app-footer p { margin-bottom: 0; }.app-version { flex: 0 0 auto; }.app-version a, .draft-pill { color: var(--green); text-decoration: none; }.app-version a:hover, .draft-pill:hover { color: var(--ink); }
.changelog-page { width: min(760px, 100%); margin: 62px auto 0; }.changelog-hero { max-width: 580px; margin: 0 auto 35px; text-align: center; }.changelog-hero h1 { margin-bottom: .85rem; font-size: clamp(2.8rem, 7vw, 5rem); }.changelog-hero > p:last-child { color: var(--muted); line-height: 1.55; }.changelog-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }.changelog-entry { padding: 24px; border: 1px solid var(--border); border-radius: 17px; background: rgba(41,37,49,.78); }.changelog-entry.is-current { border-color: rgba(158,224,111,.5); background: linear-gradient(135deg, rgba(158,224,111,.11), rgba(41,37,49,.8) 45%); }.current-label { display: inline-flex; margin-bottom: .8rem; padding: .27rem .45rem; border-radius: 5px; color: #1a3010; background: var(--green); font-size: .62rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }.changelog-entry header { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }.changelog-entry h2 { font-size: 1.25rem; }.changelog-entry time { color: var(--muted); font-size: .78rem; white-space: nowrap; }.changelog-entry p { margin: 1rem 0 0; color: var(--muted); line-height: 1.52; }.changelog-entry ul { display: grid; gap: .4rem; margin: .9rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: .88rem; line-height: 1.45; }.changelog-entry li::marker { color: var(--accent); }
@media (max-width: 720px) { .app-nav { grid-template-columns: 1fr auto; }.brand { display: none; }.workflow { grid-template-columns: 1fr 1fr; }.workflow span:nth-child(2) { border-right: 0; }.workflow span { border-bottom: 1px solid var(--border); }.workflow span:nth-last-child(-n+2) { border-bottom: 0; }.section-heading { display: block; }.section-note { max-width: none; margin-top: .9rem; }.control-grid { grid-template-columns: 1fr 1fr; }.range-grid { grid-template-columns: 1fr; }.pattern-meta { margin-top: 1rem; text-align: left; }.lock-grid { grid-template-columns: 1fr; }.export-button { margin-left: 0; }.piano-roll { height: 190px; } }
@media (max-width: 560px) { .app-footer, .changelog-entry header { align-items: flex-start; flex-direction: column; }.app-version { flex: initial; }.changelog-page { margin-top: 44px; }.changelog-entry { padding: 19px; } }
@media (max-width: 440px) { .app-shell { width: min(100% - 22px, 1120px); }.hero-copy { margin-top: 48px; }.control-grid { grid-template-columns: 1fr; }.workflow span { padding: .8rem; }.panel { padding: 19px; }.mutation-actions > * { flex: 1 1 auto; }.export-button { width: 100%; } }