@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:#ffffff; --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; color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
button:disabled { opacity:.36; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,g[role=button]:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
button { border:0; }
a { color:inherit; }
.app-shell { width:min(1440px,100%); margin:auto; padding:0 48px; }
.site-header { display:flex; align-items:center; justify-content:space-between; height:88px; border-bottom:1px solid var(--line); }
.wordmark { display:flex; gap:13px; align-items:center; text-decoration:none; font-family:var(--mono); font-size:16px; letter-spacing:.055em; }
.wordmark svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1; }
.version { font-size:11px; color:var(--muted); margin-left:8px; }
nav { display:flex; gap:30px; }
.text-button { background:none; font-size:12px; padding:5px 0; }
.text-button:hover:not(:disabled) { color:var(--accent); }
.text-button span { margin-left:6px; }
.introduction { padding:38px 0 31px; display:flex; align-items:end; justify-content:space-between; gap:25px; }
.eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.09em; line-height:1.5; font-weight:400; }
.eyebrow.light { color:var(--muted); }
.introduction .eyebrow { margin:0 0 13px; }
h1 { font-family:var(--serif); font-weight:400; font-size:58px; letter-spacing:-.045em; margin:0; line-height:1.02; }
h1 em { font-weight:400; }
.intro-copy { color:#61645e; font-size:13px; line-height:1.8; margin:0 3px 2px; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 286px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.field-section { min-width:0; padding-right:33px; }
.field-meta { display:flex; justify-content:space-between; padding-top:21px; gap:12px; align-items:center; }
.status-dot { display:inline-block; height:5px; width:5px; border-radius:50%; background:#969992; margin-right:9px; vertical-align:middle; }
.status-dot.live { background:var(--accent); box-shadow:0 0 0 3px #20231f0d; }
.field-wrap { width:100%; position:relative; }
#field { width:100%; height:auto; display:block; overflow:hidden; touch-action:none; cursor:grab; aspect-ratio:960/770; }
.field-guides, #mechanism, #listening-beam, #motion-trail, .stage-caption { pointer-events:none; }
.field-guides { stroke:#d8d8d5; stroke-width:.8; fill:none; }
.field-guides circle { stroke-dasharray:2 8; opacity:.65; }
.field-guides path { opacity:.75; }
.motion-trail { stroke:#858982; opacity:.28; stroke-width:1; }
.sound-radius { pointer-events:none; fill:#20231f; fill-opacity:.018; stroke:#20231f; stroke-opacity:.14; stroke-width:.8; stroke-dasharray:2 5; opacity:.35; }
.sound-radius.loaded { opacity:1; }
.sound-radius.targeted { fill-opacity:.07; stroke-opacity:.35; stroke-dasharray:none; }
#beam-center { stroke:#20231f; opacity:.4; stroke-width:1; stroke-dasharray:3 7; fill:none; }
#beam-edges { stroke:#20231f; opacity:.13; stroke-width:.8; fill:none; }
#listening-beam { opacity:0; transition:opacity .3s; }
#listening-beam.visible { opacity:1; }
.arm { stroke:#20231f; stroke-width:4; stroke-linecap:round; }
.arm-shadow { stroke:#20231f; stroke-width:7; opacity:.08; stroke-linecap:round; }
.joint { fill:#ffffff; stroke:#61645e; stroke-width:1.4; }
.pivot-ring { fill:#f5f5f5; stroke:#b7bab3; stroke-width:1; }
.pivot { fill:#20231f; stroke:#61645e; stroke-width:1; }
.stage-caption { font-family:var(--mono); font-size:10.5px; letter-spacing:1.3px; fill:#61645e; }
.cassette { cursor:grab; user-select:none; -webkit-user-select:none; }
.cassette, .cassette * { touch-action:none; }
.cassette.dragging { cursor:grabbing; }
.cassette.dragging .selection-mark { opacity:1; stroke-width:2; }
.cassette[aria-disabled="true"] { cursor:default; }
.tape-body { fill:#f5f5f5; stroke:#a6aaa2; stroke-width:1; transition:fill .2s,stroke .2s; }
.cassette:hover .tape-body { fill:#ffffff; stroke:#61645e; }
.tape-border { fill:none; stroke:#d8d8d5; stroke-width:.7; }
.tape-label { fill:#ffffff; stroke:#d8d8d5; stroke-width:.5; }
.tape-label-rule { stroke:#b7bab3; stroke-width:.6; }
.tape-window { fill:#333831; stroke:#969992; stroke-width:.8; }
.tape-spool { fill:#e1e3dd; stroke:#858982; stroke-width:.6; }
.reel-hub { fill:#61645e; }
.reel-spoke { stroke:#61645e; stroke-width:1.6; }
.cassette .tape-number { font-family:var(--mono); font-size:8px; letter-spacing:.5px; fill:#61645e; }
.cassette .tape-name { font-family:var(--sans); font-size:10px; fill:#20231f; }
.cassette .tape-under { fill:#61645e; font-family:var(--mono); font-size:9px; letter-spacing:.3px; }
.tape-screw { fill:#858982; opacity:.7; }
.tape-trapezoid { fill:#e1e3dd; stroke:#a6aaa2; stroke-width:.6; }
.selection-mark { stroke:#20231f; 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; }
.cassette.targeted .tape-body { fill:#e6e8e2; stroke:#20231f; }
.cassette.targeted .tape-under { fill:var(--accent); }
.cassette.targeted .tape-label-rule { stroke:var(--accent); }
.tape-led { fill:#a6aaa2; }
.cassette.has-audio .tape-led { fill:#61645e; }
.cassette.targeted.has-audio .tape-led { fill:var(--accent); }
.cassette.recording .tape-led { fill:var(--accent); animation:pulse 1s infinite; }
.transport { display:flex; align-items:center; gap:22px; padding:3px 0 23px; border-bottom:1px solid var(--line); }
.listen-button { padding:14px 20px; min-width:173px; background:var(--ink); color:#ffffff; display:flex; gap:11px; align-items:center; justify-content:center; font-size:12px; border-radius:2px; }
.listen-button:hover:not(:disabled) { background:#41483d; }
.listen-button svg { width:14px; height:14px; }
.nudge-button { background:none; font-size:12px; padding:8px 0; white-space:nowrap; }
.nudge-button>span { font-size:20px; vertical-align:-2px; margin-right:5px; }
.nudge-button:hover { color:var(--accent); }
.listening-readout { margin-left:auto; display:grid; gap:5px; text-align:right; min-width:80px; }
#focus-label { font-size:12px; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.field-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:23px; padding:23px 0 18px; }
.radius-hint { font-size:9px; color:#61645e; line-height:1.65; margin:0 0 23px; }
.arrangement-controls { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:0 0 20px; }
.arrangement-controls p { color:#61645e; font-size:10px; line-height:1.6; margin:0; }
.arrangement-controls button { font-size:10px; white-space:nowrap; }
.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; }
.field-controls label { display:grid; gap:10px; font-size:10px; color:#61645e; }
.field-controls label>span { display:flex; justify-content:space-between; gap:5px; }
.field-controls output { font-family:var(--mono); color:var(--ink); font-size:10px; }
input[type=range] { appearance:none; width:100%; height:2px; background:#d8d8d5; cursor:pointer; margin:5px 0; }
input[type=range]::-webkit-slider-thumb { appearance:none; height:8px; width:8px; background:var(--ink); border-radius:50%; }
input[type=range]::-moz-range-thumb { height:8px; width:8px; background:var(--ink); border-radius:50%; border:0; }
.tape-panel { border-left:1px solid var(--line); padding:23px 0 24px 29px; display:flex; flex-direction:column; }
.panel-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.panel-heading .eyebrow { font-size:9px; color:var(--muted); }
.small-index { font-family:var(--mono); color:#858982; font-size:11px; }
h2 { font-family:var(--serif); font-size:31px; font-weight:400; margin:25px 0 7px; letter-spacing:-.03em; }
.panel-description { font-size:11px; color:var(--muted); margin:0; line-height:1.5; min-height:17px; }
.tape-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(30px,1fr)); max-height:180px; overflow-y:auto; gap:5px; margin:25px 0 29px; }
.picker-button { padding:8px 0; font-family:var(--mono); font-size:10px; background:none; border:1px solid var(--line); border-radius:1px; position:relative; }
.picker-button.has-audio:after { content:''; width:3px; height:3px; background:#85795f; border-radius:50%; position:absolute; bottom:3px; left:calc(50% - 1.5px); }
.picker-button.selected { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.picker-button.selected:after { background:var(--paper); }
.picker-button.targeted { border-color:var(--accent); }
.name-label { font-family:var(--mono); font-size:9px; letter-spacing:.05em; color:var(--muted); margin-bottom:9px; }
.name-input { color:var(--ink); border:0; border-bottom:1px solid var(--line); width:100%; border-radius:0; background:none; font-family:var(--serif); font-size:21px; height:36px; padding:0 0 8px; }
.name-input::placeholder { color:#969992; }
.waveform-box { height:90px; display:flex; align-items:center; justify-content:center; position:relative; margin:13px 0 0; }
#waveform { width:100%; height:60px; }
.waveform-empty { font-family:var(--mono); font-size:9px; color:#969992; position:absolute; background:var(--paper); padding:0 7px; }
.tape-detail { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin:0 0 20px; }
#tape-duration { font-family:var(--mono); }
.empty-dot { height:4px; width:4px; display:inline-block; background:#969992; border-radius:50%; margin:0 5px 2px 0; }
.record-button { width:100%; min-height:45px; display:flex; align-items:center; justify-content:center; gap:9px; background:var(--ink); color:var(--paper); font-size:12px; border-radius:2px; }
.record-button:hover:not(:disabled) { background:#41483d; }
.record-symbol { height:8px; width:8px; border-radius:50%; background:#ffffff; }
.record-button.is-recording { background:var(--accent); }
.record-button.is-recording .record-symbol { border-radius:1px; background:var(--paper); animation:pulse 1s infinite; }
.upload-button { display:flex; gap:8px; align-items:center; justify-content:center; min-height:42px; border:1px solid var(--line); margin-top:9px; font-size:11px; background:none; border-radius:2px; }
.upload-button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.2; }
.upload-button:hover:not(:disabled) { border-color:#61645e; }
.tape-actions { display:flex; justify-content:space-between; padding:13px 2px 5px; }
.tape-actions .text-button { font-size:10px; }
.record-hint { font-size:10px; line-height:1.8; color:#61645e; margin:10px 0 30px; }
.panel-bottom { margin-top:auto; }
.demo-prompt { border-top:1px solid var(--line); padding-top:22px; }
.demo-prompt .eyebrow { font-size:8px; letter-spacing:.055em; }
.demo-button { width:100%; background:none; display:flex; justify-content:space-between; font-family:var(--serif); font-size:17px; text-align:left; padding:10px 0 18px; }
.demo-button:hover:not(:disabled) { color:var(--accent); }
.storage-note { font-size:9px; line-height:1.65; color:#61645e; display:flex; gap:7px; margin:7px 0; }
.storage-note svg { fill:none; stroke:currentColor; width:12px; height:12px; margin-top:1px; flex-shrink:0; }
.import-button { color:var(--muted); font-size:9px; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:23px 0 26px; }
.site-footer p { font-family:var(--serif); font-size:14px; font-style:italic; color:#61645e; margin:0; }
.site-footer .eyebrow { font-size:8px; white-space:nowrap; }
.footer-slash { margin:0 7px; color:#b7bab3; }
.recording-timer { display:flex; gap:5px; align-items:center; font-family:var(--mono); font-size:11px; margin-top:13px; color:var(--accent); }
.recording-timer[hidden] { display:none; }
.recording-timer .text-button { margin-left:auto; color:var(--muted); font-family:var(--sans); font-size:10px; }
.recording-pulse { width:5px; height:5px; margin-right:4px; background:var(--accent); border-radius:50%; animation:pulse 1s infinite; }
.toast { background:var(--ink); color:var(--paper); border:1px solid #ffffff22; border-radius:3px; position:fixed; left:50%; transform:translateX(-50%); bottom:22px; max-width:calc(100% - 32px); width:max-content; padding:14px 19px; line-height:1.65; font-size:12px; box-shadow:0 8px 40px #20231f0a; z-index:5; }
.toast[hidden] { display:none; }
dialog { border:1px solid var(--line); background:var(--paper); color:var(--ink); width:min(660px,calc(100vw - 32px)); max-height:calc(100dvh - 50px); overflow:auto; padding:38px; }
dialog::backdrop { background:#20231f66; backdrop-filter:blur(3px); }
dialog h2 { font-size:45px; margin:17px 0; }
dialog p { font-size:13px; line-height:1.85; color:#61645e; }
dialog .eyebrow { font-size:9px; }
.dialog-close { position:absolute; top:12px; right:14px; background:none; font-size:26px; }
.installation-photos { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0; }
.installation-photos img { display:block; width:100%; height:auto; border:1px solid var(--line); }
dialog .about-small { font-size:11px; }
.full-page-link { display:inline-block; font-size:12px; text-decoration:none; border-bottom:1px solid var(--ink); margin-top:7px; padding-bottom:5px; }
.full-page-link:hover { color:var(--accent); }
.noscript { text-align:center; background:var(--wash); padding:20px; }
@keyframes pulse { 50% { opacity:.35; } }
@media(min-width:1500px) { .app-shell { padding:0 65px; } }
@media(max-width:1100px) { .app-shell { padding:0 30px; } .workspace { grid-template-columns:minmax(0,1fr) 258px; } .field-section { padding-right:22px; } .tape-panel { padding-left:23px; } .transport { gap:15px; } .listen-button { padding:13px 14px; min-width:155px; } .field-controls { gap:20px; } h1 { font-size:52px; } .listening-readout .eyebrow { font-size:8px; } }
@media(max-width:850px) { .workspace { grid-template-columns:minmax(0,1fr) 225px; } .app-shell { padding:0 22px; } .tape-panel { padding-left:18px; } .field-section { padding-right:18px; } .transport { flex-wrap:wrap; gap:10px; padding-bottom:17px; } .listening-readout { min-width:100%; text-align:left; grid-template-columns:auto 1fr; align-items:center; gap:12px; margin-top:8px; } #focus-label { max-width:250px; } .field-controls { gap:15px; } .field-controls label>span { flex-wrap:wrap; } .intro-copy { font-size:11px; } h1 { font-size:46px; } .site-footer { align-items:start; } .site-footer p { font-size:12px; max-width:260px; line-height:1.5; } .tape-picker { gap:3px; } .tape-picker button { font-size:9px; } }
@media(max-width:680px) { .app-shell { padding:0 18px; } .site-header { height:68px; } .wordmark { font-size:14px; gap:9px; } .wordmark svg { width:27px; height:27px; } nav { gap:16px; } nav button { font-size:10px!important; } .introduction { padding:27px 0 24px; display:block; } h1 { font-size:45px; } .introduction .eyebrow { font-size:8px; margin-bottom:12px; } .intro-copy { margin-top:17px; font-size:12px; line-height:1.65; } .intro-copy br { display:none; } .workspace { display:block; } .field-section { padding-right:0; } .field-meta { padding-top:17px; } .field-meta .eyebrow { font-size:8px; } .transport { flex-wrap:nowrap; gap:13px; padding:9px 0 18px; } .listen-button { min-width:142px; font-size:11px; padding:13px 12px; } .nudge-button { font-size:10px; } .listening-readout { min-width:0; display:grid; grid-template-columns:1fr; margin:0 0 0 auto; gap:3px; text-align:right; } #focus-label { max-width:105px; font-size:10px; } .listening-readout .eyebrow { font-size:7px; } .field-controls { padding:21px 0 25px; gap:23px; } .field-controls label { font-size:9px; } .field-controls label>span { display:grid; grid-template-columns:1fr; gap:5px; } .tape-panel { border-left:0; border-top:1px solid var(--line); padding:24px 0; display:grid; grid-template-columns:1fr 1fr; column-gap:18px; } .panel-heading,h2,.panel-description,.tape-picker,.name-label,.name-input,.waveform-box,.tape-detail,.recording-timer,.tape-actions,.record-hint,.panel-bottom { grid-column:1/-1; } .tape-panel h2 { margin:17px 0 7px; } .tape-picker { margin:21px 0 23px; gap:8px; } .picker-button { padding:10px 0; font-size:11px; } .waveform-box { height:90px; } .waveform-box svg { max-width:480px; } .upload-button { margin-top:0; min-height:45px; } .record-button { font-size:11px; } .tape-actions { justify-content:start; gap:35px; padding-top:15px; } .record-hint { margin-bottom:25px; font-size:11px; } .panel-bottom { display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; } .demo-prompt { grid-column:1/-1; padding-top:20px; } .demo-button { padding-bottom:15px; } .import-button { text-align:right; } .site-footer { flex-direction:column; gap:12px; padding:22px 0; } .site-footer p { max-width:none; font-size:13px; } .site-footer .eyebrow { font-size:8px; } dialog { padding:28px 22px; } .stage-caption { font-size:13px; letter-spacing:.9px; } }
@media(max-width:380px) { .app-shell { padding:0 12px; } .listen-button { min-width:129px; font-size:10px; padding:12px 10px; } .transport { gap:10px; } .wordmark { font-size:12px; } .version { font-size:9px; margin-left:3px; } nav { gap:11px; } h1 { font-size:41px; } .field-controls { gap:15px; } .listening-readout { display:none; } }
@media(max-width:850px) { .field-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; padding-bottom:18px; } .field-controls label>span { display:flex; flex-wrap:nowrap; } .radius-hint { font-size:10px; margin-bottom:22px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

.field-toolbar { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:18px 0 5px; }
.add-tape { background:var(--ink); color:var(--paper); padding:10px 13px; border-radius:2px; font-size:11px; }
.add-tape:hover:not(:disabled) { background:#41483d; }
.view-controls { display:flex; align-items:center; gap:6px; }
.view-controls button { background:none; border:1px solid var(--line); border-radius:2px; padding:7px 9px; min-height:32px; font-size:10px; }
.view-controls button:hover:not(:disabled) { border-color:var(--muted); }
#zoom-in,#zoom-out { font-size:16px; min-width:32px; padding:3px 6px; }
#zoom-value { font-family:var(--mono); font-size:10px; min-width:40px; text-align:center; color:var(--muted); }
#field.panning { cursor:grabbing; }
.field-wrap > .stage-caption { position:absolute; bottom:20px; left:10px; right:10px; margin:0; text-align:center; color:#61645e; pointer-events:none; font-size:9px; letter-spacing:1px; }
.remove-tape { align-self:start; color:var(--muted); font-size:10px; margin-top:10px; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:680px) { .remove-tape { grid-column:1/-1; justify-self:start; } .field-wrap > .stage-caption { bottom:9px; font-size:7px; letter-spacing:.5px; } .view-controls { gap:4px; } .view-controls button { min-height:36px; } .tape-actions { gap:26px; } }

.field-notebook { padding:1px 0 23px; }
.notebook-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:11px; }
.notebook-heading h2 { margin:0; color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.09em; }
.add-field { border:1px solid var(--line); background:none; border-radius:2px; padding:9px 13px; font-size:11px; white-space:nowrap; }
.add-field:hover:not(:disabled) { border-color:var(--muted); }
.field-tabs { display:flex; gap:7px; overflow-x:auto; overscroll-behavior-x:contain; padding:7px 6px 13px; margin:0 -6px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
#field-tabs [role=tab] { flex:0 0 auto; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:none; border:1px solid var(--line); border-radius:2px; padding:11px 15px; font-size:11px; text-align:left; }
#field-tabs [role=tab]:hover:not(:disabled) { border-color:var(--muted); }
#field-tabs [role=tab][aria-selected=true] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
#field-tabs [role=tab].playing::before { content:''; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--accent); margin-right:7px; vertical-align:2px; }
#field-tabs [role=tab][aria-selected=true].playing::before { background:#ffffff; }
.field-metadata { display:grid; grid-template-columns:minmax(0,1fr) 170px auto; gap:28px; align-items:end; margin-top:3px; }
.field-metadata label { display:grid; gap:8px; min-width:0; }
.field-metadata .eyebrow { font-size:8px; }
.field-metadata input { min-width:0; width:100%; height:34px; padding:0 0 7px; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink); }
#field-name { font-family:var(--serif); font-size:21px; }
#field-name::placeholder { color:#969992; }
#field-date { font-family:var(--mono); font-size:11px; }
.remove-field { justify-self:end; margin-bottom:6px; color:var(--muted); font-size:10px; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.field-mixer { padding:31px 0 27px; border-bottom:1px solid var(--line); }
.mixer-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.mixer-heading .eyebrow { margin:0 0 8px; font-size:8px; }
.mixer-heading h2 { margin:0; font-size:29px; }
.mixer-transport { display:flex; flex-wrap:wrap; align-items:center; gap:17px; }
.mix-all { padding:11px 19px; border-radius:2px; background:var(--ink); color:var(--paper); font-size:11px; }
.mix-all:hover:not(:disabled) { background:#41483d; }
.mixer-transport .text-button { font-size:11px; }
#playing-count { font-family:var(--mono); font-size:9px; color:var(--muted); }
.mixer-note { color:#61645e; font-size:10px; line-height:1.7; margin:15px 0 20px; }
.mix-channels { border-top:1px solid var(--line); }
.mix-channel { display:grid; grid-template-columns:minmax(120px,1fr) 95px 77px minmax(135px,250px) 55px 55px; align-items:center; gap:15px; min-height:77px; padding:16px 0; border-bottom:1px solid var(--line); }
.mix-field-name { overflow-wrap:anywhere; min-width:0; background:none; text-align:left; padding:5px 0; font-family:var(--serif); font-size:18px; line-height:1.3; }
.mix-field-name:hover { color:var(--accent); }
.mix-field-date { font-family:var(--mono); color:var(--muted); font-size:9px; line-height:1.5; }
.mix-play,.mix-toggle { min-height:32px; padding:7px 10px; font-size:10px; background:none; border:1px solid var(--line); border-radius:2px; }
.mix-play:hover:not(:disabled),.mix-toggle:hover:not(:disabled) { border-color:var(--muted); }
.mix-play[aria-pressed=true] { color:var(--accent); border-color:var(--accent); }
.mix-toggle[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.mix-level,.master-level { display:grid; gap:9px; min-width:0; color:#61645e; font-size:10px; }
.mix-level>span,.master-level>span { display:flex; justify-content:space-between; gap:8px; }
.mix-level output,.master-level output { color:var(--ink); font-family:var(--mono); font-size:10px; }
.master-level { width:250px; margin:23px 0 0 auto; }
@media(max-width:1100px) { .mix-channel { gap:12px; grid-template-columns:minmax(100px,1fr) 88px 70px minmax(110px,210px) 49px 49px; } }
@media(max-width:850px) { .mix-channel { grid-template-columns:minmax(0,1fr) auto 55px 55px; gap:12px; padding:17px 0; } .mix-field-name { grid-column:1/4; grid-row:1; } .mix-field-date { grid-column:4; 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:1/-1; grid-row:3; margin-top:3px; } }
@media(max-width:680px) { .field-notebook { padding-bottom:20px; } .notebook-heading { margin-bottom:8px; } .add-field { min-height:38px; font-size:10px; } #field-tabs [role=tab] { max-width:220px; min-height:42px; padding:10px 13px; } .field-metadata { grid-template-columns:minmax(0,1fr) 145px; gap:14px 18px; } .remove-field { grid-column:1/-1; margin:0; font-size:9px; } #field-name { font-size:19px; } #field-date { font-size:10px; } .field-mixer { padding:26px 0 25px; } .mixer-heading { display:block; } .mixer-heading h2 { font-size:27px; } .mixer-transport { margin-top:20px; gap:16px; } .mixer-note { margin:15px 0 17px; } .mix-field-name { font-size:17px; } .mix-play,.mix-toggle { min-height:38px; } .master-level { width:100%; margin-top:22px; } }
@media(max-width:380px) { .field-metadata { grid-template-columns:minmax(0,1fr) 125px; gap:14px 12px; } .mix-channel { grid-template-columns:minmax(0,1fr) auto 48px 48px; gap:10px; } .mix-field-date { font-size:8px; } .mix-play,.mix-toggle { padding:7px 8px; } }

/* Shared with the artist's website: white paper, Times, mono, fine rules. */
:root { --grid-gap:clamp(16px,2.2vw,32px); --baseline:8px; }
body { line-height:1.5; }
button,input,output,.intro-copy,.panel-description,.tape-detail,.record-hint,.storage-note,.radius-hint,.arrangement-controls p,.mixer-note,.field-model-note,.scope-note { font-family:var(--mono); font-weight:400; }
button,input { letter-spacing:0; }
button,dialog,.toast { border-radius:0; }
button:focus-visible,a:focus-visible,input:focus-visible,g[role=button]:focus-visible { outline-width:1px; }
.app-shell { width:min(1600px,100%); padding-left:clamp(20px,4vw,64px); padding-right:clamp(20px,4vw,64px); }
.site-header { height:96px; }
.wordmark { font-size:14px; letter-spacing:0; gap:14px; }
.wordmark svg { width:30px; height:30px; }
.version { font-size:10px; }
nav { gap:32px; }
nav .text-button { font-size:10px; }
.introduction { display:grid; grid-template-columns:8fr 4fr; gap:var(--grid-gap); align-items:end; padding:44px 0 36px; }
.introduction .eyebrow { font-size:9px; letter-spacing:.035em; margin-bottom:24px; }
h1 { font-size:clamp(64px,6.5vw,104px); line-height:.96; letter-spacing:-.025em; }
h1 em { font-style:italic; }
.intro-copy { font-size:11px; line-height:1.8; max-width:330px; color:var(--muted); margin:0 0 3px; }
.field-notebook { padding-bottom:28px; }
.notebook-heading { padding-top:18px; border-top:1px solid var(--ink); margin-bottom:15px; }
.notebook-heading .field-tabs { flex:1; min-width:0; padding:0; margin:0; }
.notebook-heading .add-field { flex-shrink:0; }
.field-tabs { gap:22px; padding-bottom:16px; }
#field-tabs [role=tab] { padding:8px 0 7px; border:0; border-bottom:1px solid var(--line); border-radius:0; font-size:10px; }
#field-tabs [role=tab][aria-selected=true] { background:none; color:var(--ink); border-bottom:1px solid var(--ink); }
#field-tabs [role=tab][aria-selected=true].playing::before { background:var(--ink); }
.field-metadata { gap:var(--grid-gap); margin-top:5px; }
#field-name { font-family:var(--mono); font-size:13px; }
.workspace { grid-template-columns:minmax(0,1fr) 300px; }
.field-section { padding-right:var(--grid-gap); }
.tape-panel { padding-left:var(--grid-gap); }
.field-meta { padding-top:24px; }
.field-meta .eyebrow { letter-spacing:.035em; }
.field-toolbar { padding:20px 0 8px; }
.add-tape,.add-field,.listen-button,.record-button,.upload-button,.mix-all,.view-controls button,.mix-play,.mix-toggle { border-radius:0; }
.add-tape,.add-field,.listen-button,.record-button,.mix-all { font-size:10px; }
.status-dot.live { box-shadow:none; }
.field-guides { stroke:#d8d8d5; stroke-width:.7; }
.field-guides circle { stroke-dasharray:2 9; opacity:.6; }
.motion-trail { stroke:var(--muted); opacity:.3; stroke-width:.8; }
.arm { stroke:var(--ink); stroke-width:3; stroke-linecap:butt; }
.arm-shadow { opacity:0; }
.joint { fill:var(--paper); stroke:var(--ink); stroke-width:1.1; }
.pivot-ring { fill:var(--paper); stroke:#b7bab3; stroke-width:.8; }
.pivot { fill:var(--ink); stroke:var(--ink); stroke-width:.8; }
.mic-cable { stroke:var(--muted); stroke-width:1; fill:none; }
.cable-anchor { fill:var(--paper); stroke:var(--ink); stroke-width:1; }
.microphone-mark { fill:var(--ink); }
.microphone-outline { fill:none; stroke:var(--ink); stroke-width:.75; }
.rig-label { font-family:var(--mono); font-size:10px; fill:var(--muted); }
.field-model-note { margin:0 0 22px; color:var(--muted); font-size:9px; line-height:1.8; }
.motor-hint { margin:0 0 8px; color:var(--muted); font:9px/1.8 var(--mono); }
.cassette .tape-name { font-family:var(--mono); font-size:9px; }
.tape-body { fill:#f5f5f5; stroke:#a6aaa2; }
.cassette:hover .tape-body { fill:var(--paper); stroke:var(--ink); }
.cassette.targeted .tape-body { fill:#e6e8e2; stroke:var(--ink); }
.cassette.targeted .tape-label { fill:var(--paper); }
.tape-label-rule,.cassette.targeted .tape-label-rule { stroke:#969992; }
.tape-label { fill:var(--paper); }
.tape-border { stroke:#d8d8d5; }
.tape-trapezoid { fill:#e1e3dd; stroke:#a6aaa2; }
.sound-radius { fill:var(--ink); stroke:var(--ink); fill-opacity:.012; stroke-opacity:.14; }
.sound-radius.targeted { fill-opacity:.045; stroke-opacity:.32; }
.selection-mark { stroke:var(--ink); }
#beam-center { stroke:var(--ink); opacity:.3; }
#beam-edges { stroke:var(--ink); opacity:.12; }
.transport { gap:24px; padding-bottom:24px; }
.listen-button { min-height:43px; }
.nudge-button { font-size:10px; }
.nudge-button>span { font-size:19px; }
.field-controls { gap:var(--grid-gap); padding-top:24px; }
.field-controls label { font-size:9px; }
.field-controls output { font-size:9px; }
input[type=range] { background:var(--line); height:1px; }
input[type=range]::-webkit-slider-thumb { width:7px; height:7px; border-radius:0; }
input[type=range]::-moz-range-thumb { width:7px; height:7px; border-radius:0; }
.radius-hint,.arrangement-controls p { font-size:9px; line-height:1.8; }
.panel-heading .eyebrow { font-size:8px; letter-spacing:.035em; }
.tape-panel h2 { font-size:38px; letter-spacing:-.025em; margin-top:0; }
.panel-description { font-size:9px; line-height:1.8; }
.tape-picker { margin-top:24px; }
.picker-button { border-radius:0; }
.name-input { font-family:var(--mono); font-size:13px; }
.record-hint { font-size:9px; line-height:1.8; }
.demo-button { font-family:var(--serif); font-size:20px; }
.tape-actions .text-button,.remove-tape { font-size:9px; }
.storage-note { font-size:8px; }
.field-mixer { padding-top:32px; padding-bottom:32px; }
.mixer-heading h2 { font-size:36px; letter-spacing:-.025em; }
.mixer-heading .eyebrow { font-size:8px; letter-spacing:.035em; margin-bottom:12px; }
.mixer-note { font-size:9px; margin:19px 0 24px; }
.mix-field-name { font-family:var(--serif); font-size:22px; }
.mix-channel { padding:18px 0; }
.output-monitor { margin:0; padding:28px 0 24px; border-bottom:1px solid var(--line); }
.scope-heading { display:flex; justify-content:space-between; align-items:baseline; gap:var(--grid-gap); margin-bottom:20px; }
.scope-heading h2 { margin:0; font-family:var(--serif); font-size:30px; letter-spacing:-.025em; }
#scope-status { color:var(--muted); font:9px/1.7 var(--mono); text-align:right; }
#output-scope { display:block; width:100%; height:150px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.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; }
.scope-note { color:var(--muted); font-size:9px; line-height:1.8; margin:12px 0 0; }
.site-footer { padding:28px 0 32px; }
.site-footer p { font-size:16px; color:var(--muted); }
.site-footer .eyebrow { font-size:8px; letter-spacing:.025em; }
dialog { padding:40px; box-shadow:none; }
dialog h2 { font-size:56px; letter-spacing:-.025em; }
dialog p { color:var(--muted); line-height:1.85; }
dialog .about-small { font-family:var(--mono); font-size:10px; line-height:1.8; }
.full-page-link { font-family:var(--mono); font-size:11px; }
.toast { font-family:var(--mono); font-size:10px; box-shadow:none; }
@media(min-width:1500px) { .app-shell { padding-left:64px; padding-right:64px; } }
@media(max-width:1100px) { .workspace { grid-template-columns:minmax(0,1fr) 258px; } .transport { gap:16px; } .tape-panel h2 { font-size:34px; } .listen-button { min-width:155px; } .field-controls { gap:20px; } }
@media(max-width:850px) { .workspace { grid-template-columns:minmax(0,1fr) 225px; } .app-shell { padding-left:24px; padding-right:24px; } .field-section { padding-right:20px; } .tape-panel { padding-left:20px; } .transport { flex-wrap:wrap; gap:12px; } .field-model-note { font-size:8px; } .field-controls { gap:20px 28px; } .intro-copy { font-size:10px; } }
@media(max-width:680px) { .app-shell { padding-left:20px; padding-right:20px; } .site-header { height:76px; } .wordmark { font-size:12px; gap:9px; } .wordmark svg { width:25px; height:25px; } nav { gap:18px; } nav .text-button { font-size:9px!important; } .introduction { display:block; padding-top:36px; padding-bottom:36px; } .introduction .eyebrow { margin-bottom:22px; font-size:8px; } h1 { font-size:clamp(60px,13.5vw,88px); } .intro-copy { max-width:340px; margin-top:25px; font-size:10px; } .workspace { display:block; } .field-section { padding-right:0; } .tape-panel { padding-left:0; } .field-meta { padding-top:20px; } .field-toolbar { padding-top:18px; } .field-model-note { font-size:8px; margin-bottom:20px; max-width:340px; } .transport { flex-wrap:wrap; gap:16px; padding-bottom:22px; } .listen-button { min-width:155px; font-size:10px; } .listening-readout { min-width:100%; display:grid; grid-template-columns:auto 1fr; margin-top:3px; gap:15px; text-align:left; } #focus-label { max-width:none; } .field-controls { gap:24px; } .tape-panel h2 { margin-top:0; font-size:36px; } .panel-description { font-size:10px; } .record-hint { font-size:9px; } .record-button { font-size:10px; } .mixer-heading h2 { font-size:34px; } .mixer-note { font-size:9px; } .mix-field-name { font-size:21px; } .scope-heading { align-items:start; gap:16px; } .scope-heading h2 { font-size:27px; } #scope-status { font-size:8px; max-width:160px; } #output-scope { height:120px; } .scope-note { font-size:8px; } .site-footer { gap:15px; padding-top:24px; } .site-footer p { font-size:15px; } dialog { padding:30px 22px; } dialog h2 { font-size:48px; } }
@media(max-width:380px) { .app-shell { padding-left:14px; padding-right:14px; } .wordmark { font-size:11px; } .version { font-size:8px; } nav { gap:12px; } nav .text-button { font-size:8px!important; } .listening-readout { display:grid; } .scope-heading { display:block; } #scope-status { display:block; text-align:left; max-width:none; margin-top:7px; } }