:root { color-scheme: dark; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #eaf2ee; background: #14252d; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
main { --side-width: 318px; --column-gap: 24px; max-width: 1160px; margin: 0 auto; padding: 28px 30px 48px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 32px; }
.wordmark { font-size: 13px; font-weight: 800; letter-spacing: .07em; }
.header-links { display: flex; gap: 20px; }
a { color: #a9c6c0; font-size: 11px; text-decoration: none; }
a:hover { color: #eaf2ee; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-width); gap: var(--column-gap); align-items: stretch; }
.pattern { min-width: 0; display: flex; flex-direction: column; }
h1 { margin: 0 0 5px; font-size: clamp(25px, 3vw, 33px); letter-spacing: -.05em; line-height: 1.1; }
h2 { margin: 0; font-size: 15px; font-weight: 650; }
p { margin: 0; color: #a6b9b7; font-size: 12px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.count, .score { color: #90aaa9; font-size: 11px; white-space: nowrap; }
button, textarea, input, select { font: inherit; }
button { border: 1px solid #455f65; border-radius: 8px; background: #2c4148; color: #eaf2ee; padding: 9px 13px; font-size: 11px; font-weight: 650; cursor: pointer; }
button:hover { background: #39565d; }
button:disabled { cursor: default; opacity: .45; }
.primary { border-color: #c5e6b6; background: #c5e6b6; color: #1e382c; font-weight: 800; }
.primary:hover { background: #d6edca; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid #c5e6b6; outline-offset: 3px; }
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 13px; margin: 20px 0 13px; color: #a2b9b7; font-size: 11px; }
.transport-buttons { display: flex; gap: 6px; }.transport-buttons button { white-space: nowrap; }
.transport-meta { display: flex; align-items: center; gap: 10px; }
.transport-meta label, .transport > label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.transport input[type="number"], .transport select { border: 1px solid #455f65; border-radius: 6px; padding: 5px; background: #10242c; color: #eaf2ee; font-size: 11px; }
.transport input[type="number"] { width: 48px; }.transport select { max-width: 106px; }
.volume { margin-left: auto; }.volume input { width: 66px; accent-color: #c5e6b6; }
.status { color: #b8d8bd; white-space: nowrap; }
#kit-status, #swing-status { display: none; }#kit-status.is-active, #swing-status.is-active { display: inline; color: #d9c98c; }
.grid-scroll { overflow-x: auto; padding: 2px 0 5px; }
.pattern-bars { --bars: 1; }
.bar-ruler, .pattern-lane { display: grid; grid-template-columns: 70px minmax(0, 1fr); }
.bar-ruler { grid-template-columns: 70px repeat(var(--bars), 120px); color: #799b9b; font-size: 10px; font-weight: 700; }
.bar-ruler span:not(:first-child) { padding-left: 3px; padding-bottom: 5px; }
.pattern-lane { min-height: 24px; align-items: center; --lane-hue: 152; }
.grid-label { color: hsl(var(--lane-hue) 35% 76%); font-size: 11px; white-space: nowrap; }
.lane-track { position: relative; height: 15px; border-radius: 4px; background: #263b42; }
.beat-line { position: absolute; top: 2px; bottom: 2px; width: 1px; background: #68818655; pointer-events: none; }.beat-line.bar-line { background: #8aa3a377; }
.note-dot { position: absolute; top: 50%; width: calc(4px + var(--velocity) * 3px); height: calc(4px + var(--velocity) * 3px); transform: translate(-50%, -50%); border-radius: 50%; background: hsl(var(--lane-hue) 80% calc(88% - var(--velocity) * 35%)); box-shadow: 0 0 7px hsl(var(--lane-hue) 80% 65% / .5); }
.lane-kick { --lane-hue: 152; }.lane-snare { --lane-hue: 11; }.lane-closed_hat { --lane-hue: 194; }.lane-open_hat { --lane-hue: 41; }.lane-ride { --lane-hue: 51; }.lane-crash { --lane-hue: 32; }.lane-high_tom { --lane-hue: 277; }.lane-mid_tom { --lane-hue: 259; }.lane-floor_tom { --lane-hue: 235; }
.pattern-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; margin-top: auto; }
.beat-actions { display: flex; gap: 8px; margin-left: -10px; }
.beat-actions button, #new-session { background: transparent; border-color: transparent; color: #a9c6c0; padding: 8px 10px; }
.beat-actions button:hover, #new-session:hover { background: #2c4148; color: #eaf2ee; }
.grid-legend { display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: #89a4a2; font-size: 10px; }.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: #d8f5e2; }.legend-dot.strong { margin-left: 6px; background: #48c383; }
.jev-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 295px; padding: 10px 7px; border-radius: 15px; background: radial-gradient(circle at 50% 38%, #34535a 0, #20373f 59%, #1a2c33 100%); }
.jev-kit { position: relative; width: 302px; height: 258px; flex: none; }
.jev-kit span { position: absolute; display: block; }
.jev-kit .antenna { left: 151px; top: 16px; width: 4px; height: 22px; border-radius: 4px; background: #81aaa8; }.jev-kit .antenna:before { content: ""; position: absolute; left: -4px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: #e9c97d; }
.jev-kit .head { left: 111px; top: 38px; width: 82px; height: 66px; border: 3px solid #8fb8af; border-radius: 23px 23px 26px 26px; background: #c1dad0; box-shadow: inset 0 5px #ffffff44; }
.jev-kit .face { left: 123px; top: 58px; width: 58px; height: 30px; border-radius: 12px; background: #2a4c57; }.jev-kit .face:before, .jev-kit .face:after { content: ""; position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e9c97d; box-shadow: 0 0 7px #e9c97d; }.jev-kit .face:before { left: 13px; }.jev-kit .face:after { right: 13px; }
.jev-kit .torso { left: 128px; top: 102px; width: 50px; height: 65px; border: 3px solid #6c9897; border-radius: 15px 15px 20px 20px; background: #8bb5ac; }.jev-kit .torso:after { content: "♪"; position: absolute; left: 14px; top: 12px; font-size: 23px; color: #2a4c57; }
.jev-kit .arm-left { left: 87px; top: 117px; width: 45px; height: 9px; transform: rotate(-19deg); border-radius: 7px; background: #749b9b; }.jev-kit .arm-left:after { content: ""; position: absolute; left: -4px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: #a8c8bb; }
.jev-kit .arm-right { left: 175px; top: 120px; width: 46px; height: 9px; transform: rotate(24deg); border-radius: 7px; background: #749b9b; }.jev-kit .arm-right:after { content: ""; position: absolute; right: -4px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: #a8c8bb; }
.jev-kit .stick-left { left: 45px; top: 137px; width: 39px; height: 5px; transform: rotate(-20deg); transform-origin: right center; border-radius: 5px; background: #f3d69e; }.jev-kit .stick-right { left: 216px; top: 140px; width: 35px; height: 5px; transform: rotate(-27deg); transform-origin: left center; border-radius: 5px; background: #f3d69e; }
.jev-kit .hat-stand { left: 46px; top: 157px; width: 3px; height: 89px; background: #809a9a; }.jev-kit .hat-top { left: 20px; top: 148px; width: 55px; height: 12px; border-radius: 50%; background: #e9ca79; box-shadow: inset 0 0 0 2px #a18c62; }.jev-kit .hat-bottom { left: 21px; top: 155px; width: 53px; height: 8px; border-radius: 50%; background: #b79a64; }
.jev-kit .crash-stand { left: 255px; top: 128px; width: 3px; height: 113px; transform: rotate(8deg); background: #809a9a; }.jev-kit .crash { left: 226px; top: 123px; width: 60px; height: 13px; transform: rotate(-10deg); border-radius: 50%; background: #f1c979; box-shadow: inset 0 0 0 2px #b7975c; }
.jev-kit .snare { left: 78px; top: 177px; width: 70px; height: 28px; border: 3px solid #edc29b; border-radius: 50% 50% 35% 35%; background: #d2987b; box-shadow: inset 0 8px #38545c; }.jev-kit .tom { left: 180px; top: 167px; width: 61px; height: 32px; border: 3px solid #e0c4c0; border-radius: 50% 50% 35% 35%; background: #bd9eb4; box-shadow: inset 0 8px #38545c; }
.jev-kit .kick { left: 125px; top: 181px; width: 82px; height: 64px; border: 7px solid #91bdb1; border-radius: 50%; background: radial-gradient(circle, #648e85 0, #345963 45%, #2a454e 54%); }.jev-kit .kick:after { content: "KICK"; position: absolute; top: 25px; left: 16px; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #d5e6d6; }
.jev-caption { color: #acd2c2; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.jev-kit.hit-left .arm-left { animation: arm-left-hit .3s ease-out; }.jev-kit.hit-right .arm-right { animation: arm-right-hit .3s ease-out; }
.jev-kit.hit-hat .stick-left { animation: hat-hit .3s ease-out; }.jev-kit.hit-hat .hat-top { animation: cymbal-hit .3s ease-out; }
.jev-kit.hit-crash .stick-right { animation: crash-hit .3s ease-out; }.jev-kit.hit-crash .crash { animation: cymbal-hit .3s ease-out; }
.jev-kit.hit-snare .arm-left { animation: arm-snare-hit .3s ease-out; }.jev-kit.hit-snare .stick-left { animation: snare-hit .3s ease-out; }.jev-kit.hit-snare .snare { animation: drum-hit .3s ease-out; }
.jev-kit.hit-tom .stick-right { animation: tom-hit .3s ease-out; }.jev-kit.hit-tom .tom { animation: drum-hit .3s ease-out; }
.jev-kit.hit-kick .kick { animation: kick-flash .3s ease-out; }
@keyframes arm-left-hit { 0% { transform: translateY(-12px) rotate(-35deg); } 55% { transform: translateY(5px) rotate(-5deg); } }
@keyframes arm-right-hit { 0% { transform: translateY(-12px) rotate(4deg); } 55% { transform: translateY(5px) rotate(39deg); } }
@keyframes arm-snare-hit { 55% { transform: translate(24px, 31px) rotate(22deg); } }
@keyframes hat-hit { 0% { transform: translateY(-17px) rotate(-48deg); } 55% { transform: translateY(5px) rotate(-10deg); } }
@keyframes crash-hit { 0% { transform: translateY(-17px) rotate(-62deg); } 55% { transform: translateY(5px) rotate(-13deg); } }
@keyframes snare-hit { 55% { transform: translate(55px, 31px) rotate(-20deg); } }@keyframes tom-hit { 55% { transform: translate(-28px, 44px) rotate(38deg); } }
@keyframes cymbal-hit { 50% { filter: brightness(1.45); transform: rotate(2deg); } }@keyframes drum-hit { 50% { filter: brightness(1.4); } }
@keyframes kick-flash { 35% { background: radial-gradient(circle, #c5e6b6 0, #7fbaa5 23%, #345963 47%, #2a454e 54%); box-shadow: 0 0 19px #bfe9b791, 0 0 35px #bfe9b744; } }
.prompt { margin-top: 24px; }.prompt .section-heading { justify-content: flex-end; }
.pending { color: #e2d193; font-size: 11px; padding: 6px; }
.prompt-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-width); gap: var(--column-gap); align-items: start; }
.prompt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prompt-actions button { min-height: 48px; font-size: 12px; }
.prompt-row textarea { width: 100%; resize: vertical; min-height: 48px; border: 1px solid #455f65; border-radius: 8px; padding: 14px 16px; background: #10242c; color: #eaf2ee; font-size: 13px; line-height: 1.4; }.prompt-row textarea::placeholder { color: #819f9f; }.prompt-row button { min-width: 94px; }
#record { touch-action: none; user-select: none; }#record[aria-pressed="true"] { background: #b64858; color: white; }
.record-cancel { margin: 8px 5px 0; border-color: #b64858; color: #f2b7c0; }.record-cancel[hidden] { display: none; }
.session-details summary { color: #91adaa; font-size: 11px; cursor: pointer; }
.examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; max-width: calc(100% - var(--side-width) - var(--column-gap)); }.examples button { padding: 8px 11px; border-radius: 16px; border-color: #345057; background: transparent; color: #a9c6bd; font-size: 11px; font-weight: 500; }.examples button:hover { background: #2c4148; border-color: #688782; }
.request-status { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 0; min-height: 16px; color: #add4bb; font-size: 11px; }
.session-footer { margin-top: 24px; border-top: 1px solid #345057; padding-top: 12px; }
.session-shortcuts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.session-shortcuts button, .session-shortcuts #new-session { padding: 6px 9px; font-size: 11px; line-height: 16px; }
.demo-invite { animation: demo-invite 1.1s ease-in-out .6s 2; }
@keyframes demo-invite {
  50% { box-shadow: 0 0 0 5px #add4bb20; border-color: #add4bb; }
}
@media (prefers-reduced-motion: reduce) { .demo-invite { animation: none; } }
.session-details > summary { width: fit-content; padding: 4px 0; color: #cfdfd5; font-size: 13px; font-weight: 600; }
.history-list { display: grid; gap: 12px; margin-top: 16px; max-height: 560px; overflow: auto; }
.activity-card { border: 1px solid #345057; border-radius: 12px; background: #1a2d34; padding: 20px; border-left: 3px solid #8ebc99; }
.activity-columns { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 24px; }
.activity-columns section { min-width: 0; }
.activity-columns h3 { margin: 0 0 12px; color: #8daaa8; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.activity-input { margin: 0; color: #e1ece4; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.decision-path { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.decision-path li { color: #c9d9ed; font-size: 11px; line-height: 1.6; background: #283d4c; border-radius: 6px; padding: 4px 8px; }
.decision-path li + li::before { content: "→ "; color: #8fb1ce; }
.activity-actions { list-style: none; padding: 0; margin: 0; color: #b9d7bd; font-size: 12px; line-height: 1.7; }
.activity-actions li + li { margin-top: 5px; }
.activity-technical { margin-top: 16px; }
.activity-technical summary { color: #789492; font-size: 10px; cursor: pointer; }
.empty { padding: 20px 0; color: #8daaa8; font-size: 12px; }
pre { max-height: 330px; overflow: auto; padding: 12px; background: #10242c; color: #b3c8c3; white-space: pre-wrap; word-break: break-word; font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media(max-width: 650px) { .activity-columns { grid-template-columns: 1fr; gap: 20px; }.activity-card { padding: 16px; } }
footer { padding: 25px 2px 0; color: #779591; font-size: 10px; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media(max-width: 850px) { main { --side-width: 275px; }.jev-panel { overflow: hidden; }.jev-kit { transform: scale(.88); margin: -15px; }}
@media(max-width: 650px) { main { padding: 20px 14px 35px; }header { margin-bottom: 22px; }.workspace { grid-template-columns: 1fr; }.jev-panel { grid-row: 1; min-height: 200px; }.jev-kit { transform: scale(.7); margin: -35px 0 -35px; }.pattern-lane { min-height: 21px; }.transport { margin-top: 16px; }.volume { margin-left: 0; }.prompt-row { grid-template-columns: 1fr; gap: 12px; }.examples { max-width: none; }.pattern-footer { margin-top: 8px; }.prompt-row button { min-width: 0; } }
@media(prefers-reduced-motion: reduce) { .jev-kit.hit-snare .arm-left, .jev-kit.hit-left .arm-left, .jev-kit.hit-right .arm-right, .jev-kit.hit-hat .stick-left, .jev-kit.hit-hat .hat-top, .jev-kit.hit-crash .stick-right, .jev-kit.hit-crash .crash, .jev-kit.hit-snare .stick-left, .jev-kit.hit-snare .snare, .jev-kit.hit-tom .stick-right, .jev-kit.hit-tom .tom, .jev-kit.hit-kick .kick { animation: none; } }

.lane-track { cursor: crosshair; touch-action: none; user-select: none; }
.selection-overlay { position: absolute; top: -3px; bottom: -3px; background: #c5e6b62b; border: 1px solid #c5e6b6; border-radius: 3px; pointer-events: none; }
.selection-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 32px; margin-top: 16px; color: #91adaa; font-size: 11px; }
.selection-summary.has-selection { color: #c5e6b6; }
.selection-summary + .prompt { margin-top: 8px; }
#clear-selection { padding: 6px 9px; background: transparent; font-size: 10px; }
#clear-selection[hidden] { display: none; }

.microphone-row { grid-column: 2; min-width: 0; color: #91adaa; font-size: 11px; }
.microphone-control { position: relative; }
.microphone-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.microphone-row select { appearance: none; color-scheme: dark; display: block; min-width: 0; width: 100%; padding: 8px 25px 8px 31px; border: 1px solid #455f65; border-radius: 8px; background-color: #10242c; color: #c0d4cd; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, #91adaa 50%), linear-gradient(135deg, #91adaa 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.microphone-row select:hover:not(:disabled) { border-color: #688782; background-color: #1a2d34; }
.microphone-row select:disabled { opacity: .5; cursor: default; }
.microphone-row option { background: #10242c; color: #eaf2ee; }
#microphone-enable { min-height: 0; min-width: 0; width: 100%; margin-top: 8px; padding: 6px 8px; background: transparent; font-size: 11px; }
#microphone-enable[hidden] { display: none; }

.demo-studio { margin: 0 0 22px; padding: 15px 16px; border: 1px solid #345057; border-radius: 12px; background: #172d35; }
.demo-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.demo-label { font-size: 12px; font-weight: 700; margin-right: 6px; color: #c1d9d0; }
.demo-toolbar button { padding: 8px 11px; }
#demo-record.is-recording { border-color: #cc6674; background: #643a44; color: #ffe3e4; }
#demo-play.is-playing { border-color: #c5e6b6; color: #c5e6b6; }
#demo-time { margin-left: auto; font-variant-numeric: tabular-nums; }
#demo-status { margin-top: 11px; font-size: 11px; line-height: 1.5; }

#demo-studio[hidden] { display: none; }