@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fff;
  --ink: #20231f;
  --muted: #61645e;
  --line: #d8d8d5;
  --accent: #20231f;
  --wash: #f5f5f5;
  --serif: "Times New Roman", Times, serif;
  --sans: Arial, Helvetica, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --type-hero: 72px;
  --type-section: 28px;
  --type-item: 18px;
  --type-body: 13px;
  --type-note: 10px;
  --type-brand: 14px;
  --type-scene: 9px;
  --grid-gap: 32px;
  --sidebar-width: 280px;
  --workspace-gap: 40px;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--type-body)/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { border: 0; border-radius: 0; color: inherit; cursor: pointer; font: var(--type-body)/1.4 var(--mono); }
button:disabled { opacity: .36; cursor: default; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; }
h2 { margin: 0; font-size: var(--type-section); line-height: 1.15; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.recording-timer[hidden], .toast[hidden], #field[hidden], #spatial-field[hidden], #effects-status[hidden], #online-session[hidden], #online-start[hidden], #tape-owner[hidden] { display: none; }
.eyebrow { font: var(--type-note)/1.5 var(--mono); letter-spacing: .035em; }
.light { color: var(--muted); }
.text-button { padding: 5px 0; background: none; }

/* Page and notebook */
.app-shell { width: min(1600px, 100%); margin: auto; padding: 0 clamp(20px, 3vw, 48px); }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.wordmark { display: flex; flex-shrink: 0; text-decoration: none; font: var(--type-brand)/1.5 var(--mono); }
.site-header nav { display: flex; align-items: center; gap: 24px; }
.introduction { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); align-items: end; gap: var(--workspace-gap); padding: 40px 0 44px; }
h1 { margin: 0; font-size: var(--type-hero); line-height: 1; }
h1 em { font-weight: 400; }
.intro-copy { margin: 0; max-width: 390px; color: var(--muted); font: var(--type-body)/1.65 var(--mono); }
.intro-copy strong { color: var(--ink); font-weight: 400; }
.field-notebook { padding-bottom: 28px; }
.notebook-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.field-tabs { display: flex; flex: 1; min-width: 0; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.add-field { flex-shrink: 0; border: 1px solid var(--line); background: none; padding: 8px 12px; white-space: nowrap; }
#field-tabs [role="tab"] { flex: 0 0 auto; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 0 7px; background: none; border-bottom: 1px solid var(--line); text-align: left; }
#field-tabs [role="tab"]:hover { border-color: var(--muted); }
#field-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--ink); }
#field-tabs [role="tab"].playing::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 7px; border-radius: 50%; background: var(--ink); vertical-align: 2px; }
.field-metadata { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; align-items: end; gap: var(--grid-gap); }
.field-metadata label { display: grid; min-width: 0; gap: 8px; }
.field-metadata input { min-width: 0; width: 100%; height: 32px; padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); background: none; font: var(--type-body)/1.5 var(--mono); }
.remove-field { justify-self: end; margin-bottom: 3px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Listening field */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); grid-template-rows: repeat(3, auto); column-gap: var(--workspace-gap); row-gap: 0; align-items: start; }
.field-section, .performance-desk, .output-monitor { min-width: 0; grid-column: 1; }
.field-section { grid-row: 1; }
.performance-desk { display: grid; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--workspace-gap); align-items: start; padding-top: 44px; }
.output-monitor { grid-row: 3; }
.field-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 0 12px; }
.add-tape { padding: 9px 12px; background: var(--ink); color: var(--paper); white-space: nowrap; }
.tape-count { color: var(--muted); font: var(--type-note)/1.5 var(--mono); white-space: nowrap; }
.view-switch { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.view-switch button { min-height: 34px; padding: 7px 0; border-bottom: 1px solid transparent; background: none; color: var(--muted); white-space: nowrap; }
.view-switch button[aria-pressed="true"] { border-bottom-color: var(--ink); color: var(--ink); }
.view-switch button:hover { color: var(--ink); }
.view-controls { display: flex; align-items: center; gap: 5px; }
.view-controls button { min-height: 34px; padding: 7px 8px; border: 1px solid var(--line); background: none; white-space: nowrap; }
.view-controls button:hover { border-color: var(--muted); }
#zoom-in, #zoom-out { min-width: 32px; padding: 5px 6px; }
.view-controls output { min-width: 42px; color: var(--muted); text-align: center; font: var(--type-note)/1.5 var(--mono); }
.field-wrap { position: relative; width: 100%; }
#field, #spatial-field { display: block; width: 100%; height: clamp(340px, 42vw, 560px); overflow: hidden; background: var(--paper); touch-action: none; cursor: grab; }
#field.panning, #spatial-field.tape-dragging, #spatial-field.orbiting { cursor: grabbing; }
#spatial-field:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* Artwork units scale together when the field is zoomed. */
.field-guides, #mechanism, #listening-beam, #motion-trail { pointer-events: none; }
.field-guides { stroke: var(--line); stroke-width: .7; fill: none; }
.field-guides circle { stroke-dasharray: 2 9; opacity: .6; }
.field-guides path { opacity: .75; }
.motion-trail { stroke: var(--muted); opacity: .3; stroke-width: .8; }
.sound-radius { pointer-events: none; fill: var(--ink); fill-opacity: .012; stroke: var(--ink); stroke-opacity: .14; stroke-width: .8; stroke-dasharray: 2 5; opacity: .35; }
.sound-radius.loaded { opacity: 1; }
.sound-radius.targeted { fill-opacity: .045; stroke-opacity: .32; stroke-dasharray: none; }
#beam-center { stroke: var(--ink); opacity: .3; stroke-width: 1; stroke-dasharray: 3 7; fill: none; }
#beam-edges { stroke: var(--ink); opacity: .12; stroke-width: .8; fill: none; }
#listening-beam { opacity: 0; transition: opacity .3s; }
#listening-beam.visible { opacity: 1; }
.arm { stroke: #454940; stroke-width: 2; stroke-linecap: butt; }
#arm2 { stroke: #5b5f57; stroke-width: 1.6; }
.arm-shadow { opacity: 0; }
/* Bearing and microphone footprints follow the 3D model's world-unit radii. */
.joint { fill: var(--paper); stroke: #454940; stroke-width: .65; }
.pivot-ring { fill: var(--paper); stroke: #b7bab3; stroke-width: .45; }
.pivot { fill: #454940; }
.mic-cable { stroke: var(--muted); stroke-width: .55; fill: none; }
.cable-anchor { fill: #454940; }
.microphone-mark { fill: var(--ink); }
.microphone-outline { fill: var(--paper); stroke: #92968d; stroke-width: .4; }
.rig-label { fill: var(--muted); font: var(--type-scene) var(--mono); }
.cassette { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
/* The artwork's monochrome corner marks provide cassette focus feedback. */
.cassette:focus, .cassette:focus-visible { outline: none; }
.cassette.dragging { cursor: grabbing; }
.cassette.dragging .selection-mark { opacity: 1; stroke-width: 2; }
.cassette[aria-disabled="true"] { cursor: default; }
.tape-body { fill: var(--wash); stroke: #a6aaa2; stroke-width: .8; transition: fill .2s, stroke .2s; }
.cassette:hover .tape-body { fill: var(--paper); stroke: var(--ink); }
.cassette.targeted .tape-body { fill: #e6e8e2; stroke: var(--ink); }
.tape-border { fill: none; stroke: var(--line); stroke-width: .7; }
.tape-label { fill: var(--paper); stroke: var(--line); stroke-width: .5; }
.tape-label-rule { stroke: #969992; stroke-width: .6; }
.tape-window { fill: #333831; stroke: #969992; stroke-width: .8; }
.tape-spool { fill: #e1e3dd; stroke: #858982; stroke-width: .6; }
.reel-hub { fill: var(--muted); }
.reel-spoke { stroke: var(--muted); stroke-width: 1.2; }
.tape-number, .tape-name, .tape-under { font: var(--type-scene) var(--mono); }
.tape-number { fill: var(--muted); letter-spacing: .5px; }
.tape-name { fill: var(--ink); }
.tape-under { fill: var(--muted); letter-spacing: .3px; }
.cassette.targeted .tape-under { fill: var(--accent); }
.tape-screw { fill: #858982; opacity: .7; }
.tape-trapezoid { fill: #e1e3dd; stroke: #a6aaa2; stroke-width: .6; }
.selection-mark { stroke: var(--ink); stroke-width: 1.5; fill: none; opacity: 0; }
.cassette.selected .selection-mark { opacity: .65; }
.cassette:focus-visible .selection-mark { opacity: 1; stroke-width: 2.5; }
.tape-led { fill: #a6aaa2; }
.cassette.has-audio .tape-led { fill: var(--muted); }
.cassette.targeted.has-audio .tape-led { fill: var(--accent); }
.cassette.recording .tape-led { fill: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.transport { display: flex; align-items: center; gap: 20px; padding: 16px 0 26px; }
.listen-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 170px; min-height: 40px; padding: 11px 16px; background: var(--ink); color: var(--paper); }
.listen-button:hover, .record-button:hover { background: #41483d; }
.listen-button svg { width: 14px; height: 14px; }
.nudge-button { padding: 8px 0; background: none; white-space: nowrap; }
.nudge-button span { margin-right: 5px; }
.listening-readout { display: grid; min-width: 80px; gap: 2px; margin-left: auto; text-align: right; }
#focus-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); padding: 8px 0 20px; }
.field-controls label, .mix-level, .mix-send, .master-level, .effect-return, .effect-parameters label { display: grid; min-width: 0; gap: 9px; color: var(--muted); font: var(--type-note)/1.5 var(--mono); }
.field-controls label > span, .mix-level > span, .mix-send > span, .master-level > span, .effect-return > span, .effect-parameters label > span { display: flex; justify-content: space-between; gap: 8px; }
.field-controls output, .mix-level output, .mix-send output, .master-level output, .effect-return output, .effect-parameters output { color: var(--ink); white-space: nowrap; }
input[type="range"] { --range-fill: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: -5px 0; padding: 0; border: 0; background: linear-gradient(var(--ink), var(--ink)) left center / var(--range-fill) 2px no-repeat, linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 20px; background: transparent; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 7px; margin-top: 6.5px; border-radius: 0; background: var(--ink); }
input[type="range"]::-moz-range-track { height: 1px; background: transparent; }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 7px; height: 7px; border: 0; border-radius: 0; background: var(--ink); }
.motor-hint, .radius-hint, .record-hint { color: var(--muted); font: var(--type-note)/1.65 var(--mono); }
.motor-hint { margin: 0 0 8px; }
.radius-hint { margin: 0; }
.arrangement-controls { display: flex; justify-content: flex-end; align-items: center; padding-top: 12px; }
.arrangement-controls button { white-space: nowrap; }

/* Cassette editor */
.tape-panel { display: flex; flex-direction: column; grid-column: 2; grid-row: 1 / span 3; align-self: stretch; min-width: 0; padding-top: 3px; padding-bottom: 22px; }
.tape-panel > * { flex-shrink: 0; }
.tape-owner { margin: 8px 0 0; color: var(--muted); font: var(--type-note)/1.5 var(--mono); overflow-wrap: anywhere; }
.tape-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 176px; overflow-y: auto; margin: 20px 0 24px; }
.picker-button { position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 2px 7px; align-items: center; min-width: 0; min-height: 35px; padding: 7px; border: 1px solid var(--line); background: none; text-align: left; }
.picker-number { padding-left: 6px; border-left: 3px solid var(--tape-color); font: var(--type-note)/1.5 var(--mono); }
.picker-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-note)/1.5 var(--mono); }
#panel-title.has-tape::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 5px 0; background: var(--tape-color); }
.tape-colour-stripe, .tape-badge-edge { fill: var(--tape-color); }
.tape-badge-paper { fill: var(--tape-pale); }
.tape-badge-number { fill: var(--ink); font: 10px var(--mono); }
.picker-button.has-audio::after { content: ""; position: absolute; bottom: 3px; right: 3px; width: 2px; height: 2px; border-radius: 50%; background: var(--muted); }
.picker-button.selected { background: var(--ink); color: var(--paper); }
.picker-button.selected::after { background: var(--paper); }
.picker-button.targeted { border-color: var(--accent); }
.name-label { margin-bottom: 8px; color: var(--muted); font: var(--type-note)/1.5 var(--mono); letter-spacing: .035em; }
.name-input { width: 100%; height: 32px; padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); font: var(--type-body)/1.5 var(--mono); }
.name-input::placeholder { color: #969992; }
.journal-entry { display: flex; flex-direction: column; flex: 0 0 auto; gap: 8px; margin-top: 24px; }
.journal-entry .name-label { margin: 0; }
.journal-input { display: block; width: 100%; height: clamp(320px, 44vw, 600px); min-height: 260px; padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); font: var(--type-body)/1.85 var(--mono); resize: vertical; }
.journal-input::placeholder { color: #969992; }
.journal-input:disabled { opacity: .55; }
.waveform-box { position: relative; display: flex; align-items: center; justify-content: center; height: 64px; margin: 12px 0 0; }
#waveform { width: 100%; height: 48px; }
.waveform-box.is-recording, .waveform-box.is-awaiting, .waveform-box.is-saving { height: 94px; align-items: flex-start; padding-top: 8px; background: #f5f5f2; }
.waveform-box.is-recording #waveform { color: var(--ink); }
.recording-input-status { position: absolute; bottom: 9px; left: 10px; right: 10px; color: var(--ink); font: var(--type-note)/1.5 var(--mono); }
.recording-input-status[hidden] { display: none; }
.tape-detail { display: flex; justify-content: space-between; margin: 0 0 16px; color: var(--muted); font: var(--type-note)/1.5 var(--mono); }
.empty-dot { display: inline-block; width: 4px; height: 4px; margin: 0 5px 2px 0; border-radius: 50%; background: #a6aaa2; }
.record-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 40px; padding: 10px 12px; background: var(--ink); color: var(--paper); }
.record-button.is-recording { background: var(--accent); }
.record-symbol { width: 8px; height: 8px; border-radius: 50%; background: var(--paper); }
.record-button.is-recording .record-symbol { border-radius: 1px; animation: pulse 1s infinite; }
.recording-timer { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--accent); font: var(--type-note)/1.5 var(--mono); }
.recording-timer .text-button { margin-left: auto; }
.recording-pulse { width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite; }
.upload-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--line); background: none; }
.upload-button svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 1.2; }
.upload-button:hover { border-color: var(--muted); }
.tape-actions { display: flex; justify-content: space-between; gap: 8px; padding: 12px 0 2px; }
.remove-tape { align-self: flex-start; margin-top: 6px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.record-hint { margin: 10px 0 0; }
.panel-bottom { margin-top: 26px; }
.demo-button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 5px 0 10px; background: none; text-align: left; }
.field-file-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.import-button, .export-button { color: var(--muted); white-space: nowrap; }

/* Field mixer and output */
.field-mixer { min-width: 0; padding: 0 0 24px; }
#mixer-heading, #effects-heading { font-style: italic; }
.mixer-heading { display: grid; gap: 18px; margin-bottom: 8px; }
.mixer-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mix-all { padding: 10px 16px; background: var(--ink); color: var(--paper); }
#playing-count { color: var(--muted); font: var(--type-note)/1.5 var(--mono); }
.mix-channel { display: grid; gap: 16px; padding: 18px 0 20px; }
.mix-channel-main { display: grid; grid-template-columns: 74px minmax(0, 1fr) 52px 52px; align-items: center; gap: 12px; min-width: 0; }
.mix-channel-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); align-items: end; gap: 20px; }
.mix-field-name { grid-column: 1 / 3; grid-row: 1; }
.mix-date, .mix-field-date { grid-column: 3 / -1; grid-row: 1; text-align: right; }
.mix-play { grid-column: 1; grid-row: 2; justify-self: start; min-width: 74px; }
.mix-toggle { grid-row: 2; }
.mix-toggle:nth-last-child(2) { grid-column: 3; }
.mix-toggle:last-child { grid-column: 4; }
.mix-level { grid-column: 2; grid-row: 2; }
.mix-channel + .mix-channel { border-top: 1px solid #eeeeeb; }
.mix-field-name { min-width: 0; padding: 4px 0; overflow-wrap: anywhere; background: none; text-align: left; font: var(--type-item)/1.3 var(--serif); }
.mix-date, .mix-field-date { color: var(--muted); font: var(--type-note)/1.5 var(--mono); }
.mix-play, .mix-toggle { min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); background: none; }
.mix-play:hover, .mix-toggle:hover { border-color: var(--muted); }
.mix-play[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.mix-toggle[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.field-meter { display: grid; min-width: 0; gap: 9px; padding-bottom: 2px; }
.meter-caption { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: var(--type-note)/1.5 var(--mono); }
.meter-value { min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.meter-track { position: relative; height: 5px; overflow: hidden; background: #ededeb; }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #73766f; }
.meter-peak { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ink); }
.field-meter.clipping .meter-peak { background: #a34536; }
.field-meter.clipping .meter-value { color: #a34536; }
.master-level { width: min(250px, 100%); margin: 22px 0 0 auto; }
.effects-section { min-width: 0; padding: 0 0 28px; }
.effects-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.effects-heading button { color: var(--muted); white-space: nowrap; }
.effects-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.effect-channel { min-width: 0; }
.effect-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.effect-heading h3 { margin: 0; font: 400 var(--type-item)/1.3 var(--serif); }
.effect-return { flex: 0 1 180px; }
.effect-parameters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.effects-status { min-height: 15px; margin: 20px 0 0; color: var(--muted); font: var(--type-note)/1.5 var(--mono); }
.effects-section input[type="range"], .mix-channel input[type="range"] { min-width: 0; }
.effects-section input:disabled, .mix-send input:disabled { opacity: .36; cursor: default; }
.output-monitor { margin: 0; padding: 16px 0 22px; }
#output-scope { display: block; width: 100%; height: 110px; overflow: hidden; }
.scope-guide { fill: none; stroke: #eceee9; stroke-width: 1; vector-effect: non-scaling-stroke; }
.scope-zero { stroke: #c6cac1; }
#scope-trace { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.site-footer { display: flex; justify-content: flex-end; align-items: center; padding: 24px 0 32px; }
.footer-slash { margin: 0 7px; color: #b7bab3; }

/* Feedback and project information */
.toast { position: fixed; z-index: 5; bottom: 22px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; border: 1px solid #ffffff22; border-radius: 0; background: var(--ink); color: var(--paper); font: var(--type-body)/1.65 var(--mono); }
dialog { position: relative; width: min(660px, calc(100vw - 32px)); max-height: calc(100dvh - 50px); overflow: auto; padding: 28px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); }
dialog::backdrop { background: #20231f66; backdrop-filter: blur(3px); }
dialog h2 { margin: 5px 0 16px; }
dialog p { color: var(--muted); font-size: var(--type-body); line-height: 1.8; }
.dialog-close { position: absolute; top: 8px; right: 12px; padding: 0 4px; background: none; font-size: var(--type-section); }
.installation-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.installation-photos img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
dialog .about-small { font: var(--type-note)/1.8 var(--mono); }
.noscript { padding: 20px; background: var(--wash); text-align: center; }

/* Controller setup is kept off the listening surface. */
.midi-dialog { width: min(620px, calc(100vw - 32px)); }
.midi-dialog .midi-intro { margin: 0 0 22px; }
.midi-connection { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.midi-primary { flex-shrink: 0; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.midi-note, .midi-dialog p.midi-note { margin: 8px 0; color: var(--muted); font: var(--type-note)/1.65 var(--mono); overflow-wrap: anywhere; }
.midi-select-label { display: grid; min-width: 0; gap: 8px; }
.midi-select-label select { width: 100%; min-width: 0; min-height: 38px; padding: 8px 28px 8px 8px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: var(--type-body)/1.4 var(--mono); text-overflow: ellipsis; }
.midi-learn-row { display: flex; align-items: end; gap: 12px; margin: 20px 0 10px; }
.midi-learn-row label { flex: 1; }
.midi-secondary { min-height: 38px; padding: 8px 14px; border: 1px solid var(--line); background: none; }
.midi-message { display: block; min-height: 17px; }
.midi-mapping-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.midi-mappings { margin: 0 0 20px; padding: 0; list-style: none; max-height: 230px; overflow: auto; }
.midi-mappings li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.midi-mappings li + li { border-top: 1px solid var(--wash); }
.midi-mappings .midi-map-label { min-width: 0; overflow-wrap: anywhere; font: var(--type-body)/1.5 var(--mono); }
.midi-mappings .midi-map-source { display: block; color: var(--muted); font: var(--type-note)/1.6 var(--mono); }
.midi-mappings button { flex-shrink: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
#midi-cancel[hidden] { display: none; }

/* Shared rooms are an explicit choice; local journals remain the default. */
.online-dialog { position: fixed; inset: 0; margin: auto; width: min(680px, calc(100vw - 32px)); }
.online-dialog [hidden], .shared-field-bar[hidden] { display: none !important; }
.online-dialog h2 { margin-bottom: 24px; }
.online-dialog h2.sr-only { margin: -1px; }
.online-modes { display: flex; gap: 24px; margin-bottom: 20px; }
.online-modes button { padding: 8px 0; background: none; border-bottom: 1px solid transparent; color: var(--muted); }
.online-modes button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.online-label { display: grid; min-width: 0; gap: 8px; }
.online-label input { min-width: 0; width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: var(--type-body)/1.5 var(--mono); }
.online-label input::placeholder { color: #969992; }
.online-primary { min-height: 40px; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.online-secondary { flex-shrink: 0; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); background: none; white-space: nowrap; }
.online-form-panel { display: grid; gap: 18px; margin-top: 20px; }
.online-form-panel > button { justify-self: start; }
.online-identity, .online-link-row { display: flex; align-items: end; gap: 12px; margin-top: 22px; }
.online-identity .online-label, .online-link-row .online-label { flex: 1; }
.online-dialog p.online-note, .online-note { color: var(--muted); font: var(--type-note)/1.65 var(--mono); overflow-wrap: anywhere; }
.online-note { margin: 12px 0 0; }
.online-dialog .online-status { min-height: 20px; margin: 22px 0 0; color: var(--ink); font: var(--type-body)/1.65 var(--mono); }
.online-dialog.is-connected .online-status { margin-top: 0; padding-right: 24px; }
.online-session { margin-top: 24px; }
.online-room-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.online-room-heading h3 { margin: 8px 0 0; font: 400 var(--type-section)/1.15 var(--serif); overflow-wrap: anywhere; }
.online-room-heading .online-note { margin-top: 8px; }
.online-role { flex-shrink: 0; padding-top: 2px; font: var(--type-note)/1.6 var(--mono); }
.online-members-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 28px; }
.online-members-heading .online-note { margin: 0; }
.online-members { display: grid; gap: 20px; margin: 16px 0 20px; padding: 0; list-style: none; font: var(--type-body)/1.6 var(--mono); }
.online-members li { min-width: 0; overflow-wrap: anywhere; }
.online-person-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.online-person-role { color: var(--muted); font: var(--type-note)/1.5 var(--mono); }
.online-contributions { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 8px; }
.online-contributions .online-note { margin: 0; }
.online-tape-link { padding-left: 9px; border-left: 3px solid var(--tape-color); background: none; text-align: left; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.online-session-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.online-room-actions { display: flex; gap: 22px; margin-top: 24px; }
#online-back-session { margin-bottom: 18px; }
#online-switch-room, #online-leave { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
#online-button[aria-pressed="true"]::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--ink); vertical-align: 2px; }
.shared-field-bar { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 18px; color: var(--muted); font: var(--type-note)/1.6 var(--mono); }
.shared-field-bar button { flex-shrink: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.picker-owner { grid-column: 2; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .72; font: var(--type-note)/1.4 var(--mono); }

@media (max-width: 480px) {
  .online-dialog { padding: 22px; }
  .online-identity, .online-link-row { flex-wrap: wrap; }
  .online-identity .online-label, .online-link-row .online-label { flex-basis: 100%; }
  .online-room-heading, .online-person-heading { flex-direction: column; gap: 4px; }
  .online-members-heading { flex-wrap: wrap; gap: 5px; }
  .shared-field-bar { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 480px) {
  .midi-connection { align-items: start; flex-direction: column; gap: 4px; }
  .midi-learn-row { flex-wrap: wrap; }
  .midi-learn-row label { flex-basis: 100%; }
  .midi-mappings li { gap: 12px; }
}

@media (max-width: 1100px) {
  :root { --grid-gap: 24px; --sidebar-width: 260px; --workspace-gap: 32px; }
  .view-controls { flex-basis: 100%; justify-content: flex-end; }
  .field-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  .performance-desk { grid-template-columns: 1fr; gap: 32px; }
  .transport { gap: 16px; }
  .mix-channel-detail { gap: 24px; }
  .effects-grid { gap: 32px; }
  .effect-parameters { grid-template-columns: 1fr; gap: 18px; }
  .effect-heading { align-items: start; flex-direction: column; gap: 12px; }
  .effect-return { width: 100%; flex-basis: auto; }
}

@media (max-width: 800px) {
  .introduction { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .intro-copy { max-width: none; }
  .workspace { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 32px; }
  .performance-desk { grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; gap: 32px; }
  .output-monitor { grid-row: 4; }
  .view-controls { flex-basis: auto; }
  #field, #spatial-field { height: 340px; }
  .tape-panel { display: grid; grid-column: 1; grid-row: 2; grid-template-columns: 1fr 1fr; align-self: start; gap: 0 14px; padding-top: 0; padding-bottom: 0; }
  .tape-panel > :is(h2, .tape-owner, .tape-picker, .name-label, .name-input, .journal-entry, .waveform-box, .tape-detail, .recording-timer, .tape-actions, .remove-tape, .record-hint, .panel-bottom) { grid-column: 1 / -1; }
  .tape-panel > .upload-button { margin-top: 0; }
  .tape-panel > .recording-timer { grid-row: auto; }
  .tape-panel > .remove-tape { justify-self: start; }
  .tape-picker { margin-bottom: 20px; }
  .waveform-box { height: 56px; }
  .journal-entry { min-height: 0; margin-top: 22px; }
  .journal-input { min-height: 220px; height: 260px; }
  .panel-bottom { margin-top: 22px; }
  .demo-button { width: auto; gap: 24px; }
  .mix-channel-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .field-meter { grid-column: 1 / -1; }
  .effects-grid { gap: 28px; }
  .effect-parameters { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 680px) {
  :root { --type-hero: 48px; --type-section: 24px; }
  .site-header { flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; padding: 20px 0 12px; }
  .site-header nav { flex-wrap: wrap; gap: 8px 20px; }
  .introduction { padding: 28px 0 32px; }
  .field-notebook { padding-bottom: 24px; }
  .notebook-heading { gap: 12px; }
  .field-tabs { gap: 16px; }
  #field-tabs [role="tab"] { max-width: 210px; }
  .field-metadata { grid-template-columns: minmax(0, 1fr) 145px; gap: 10px 18px; }
  .remove-field { grid-column: 1 / -1; margin: 0; }
  .field-toolbar { gap: 9px; }
  .view-switch { gap: 12px; }
  .view-controls { flex-basis: 100%; justify-content: flex-end; }
  #field, #spatial-field { height: clamp(300px, 75vw, 340px); }
  .transport { flex-wrap: wrap; gap: 8px 20px; padding: 12px 0 22px; }
  .listening-readout { grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: 100%; margin: 4px 0 0; text-align: left; }
  .listening-readout #focus-label { max-width: 100%; }
  .field-controls { gap: 16px 24px; }
  .performance-desk { grid-template-columns: 1fr; gap: 32px; }
  .mixer-transport { gap: 12px; }
  .master-level { width: 100%; }
  .effects-section { padding-top: 0; }
  .effects-grid { grid-template-columns: 1fr; gap: 30px; }
  .effect-heading { align-items: center; flex-direction: row; gap: 24px; margin-bottom: 20px; }
  .effect-return { width: auto; flex: 0 1 180px; }
  .effect-parameters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  #output-scope { height: 100px; }
  .site-footer { justify-content: flex-start; }
  dialog { padding: 22px; }
}

@media (max-width: 480px) {
  .tape-panel { grid-template-columns: 1fr; }
  .tape-panel > .upload-button { margin-top: 8px; }
  .tape-panel > .recording-timer { grid-row: auto; }
  .effect-parameters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  .effect-parameters label:last-child { grid-column: 1 / -1; }
  .effect-return { flex-basis: 150px; }
  .online-join-row, .online-link-row { flex-wrap: wrap; }
  .online-join-row .online-label, .online-link-row .online-label { flex-basis: 100%; }
}

@media (max-width: 380px) {
  .app-shell { padding: 0 14px; }
  .field-metadata { grid-template-columns: minmax(0, 1fr) 138px; gap: 10px 14px; }
  .view-switch { flex-basis: 100%; justify-content: flex-end; }
  .view-controls { flex-wrap: wrap; gap: 4px; }
  .view-controls button { padding-right: 6px; padding-left: 6px; }
  .view-controls output { min-width: 38px; }
  #zoom-in, #zoom-out { min-width: 29px; }
  .listen-button { min-width: 160px; padding-right: 12px; padding-left: 12px; }
  .transport { column-gap: 14px; }
  .site-footer .eyebrow { letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}