/* Original visual instruments. Their medium determines their composition. */
.visual-study {
  --study-paper:var(--paper,#eeeae2);
  --study-ink:var(--ink,#171715);
  --study-red:var(--signal,#d52b1e);
  --study-rule:var(--line,#c5c2b9);
  color:var(--study-ink);
  font-family:var(--sans,'Helvetica Neue',Helvetica,Arial,sans-serif);
  margin:0 0 80px;
  font-weight:400;
}
.visual-study h1,.visual-study p { margin:0; }
.visual-study h1 { font-weight:500; letter-spacing:-.075em; line-height:.81; text-transform:uppercase; }
.visual-study button,.visual-study input { font:inherit; border-radius:0; }
.visual-study button { border:0; background:none; color:inherit; cursor:pointer; min-height:48px; }
.visual-study button:disabled,.visual-study input:disabled { cursor:default; opacity:.4; }
.visual-study button:focus-visible,.visual-study input:focus-visible,.visual-study canvas:focus-visible,.visual-study summary:focus-visible { outline:2px solid var(--study-red); outline-offset:5px; }
.visual-study canvas { display:block; width:100%; height:100%; }
.visual-study-stage { width:100%; position:relative; }
.visual-study-control { min-width:0; }
.visual-study-label { display:flex; justify-content:space-between; align-items:baseline; gap:12px; text-transform:uppercase; font:11px/1.3 var(--mono,'Courier New',monospace); }
.visual-study-label output { white-space:nowrap; font-variant-numeric:tabular-nums; }
.visual-study input[type=range] { display:block; appearance:none; -webkit-appearance:none; width:100%; height:36px; background:transparent; margin:9px 0 0; cursor:ew-resize; }
.visual-study input[type=range]::-webkit-slider-runnable-track { height:1px; background:currentColor; }
.visual-study input[type=range]::-moz-range-track { height:1px; background:currentColor; }
.visual-study input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:3px; height:22px; background:var(--study-red); margin-top:-11px; border:0; border-radius:0; }
.visual-study input[type=range]::-moz-range-thumb { width:3px; height:22px; background:var(--study-red); border:0; border-radius:0; }
.visual-study-transport { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; }
.visual-study [data-lab-play] { display:flex; gap:16px; align-items:center; text-transform:uppercase; font-size:22px; letter-spacing:-.035em; }
.visual-study [data-lab-play]::before { content:''; display:block; width:10px; height:10px; background:var(--study-red); }
.visual-study [data-lab-play][aria-pressed=false]::before { width:0; height:0; background:transparent; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid var(--study-red); }
.visual-study [data-lab-state] { font:10px/1.4 var(--mono,'Courier New',monospace); text-transform:uppercase; opacity:.7; }
.visual-study-note { margin-top:24px; border-top:1px solid var(--study-rule); font-size:12px; line-height:1.6; }
.visual-study-note summary { display:inline-flex; gap:20px; align-items:center; min-height:48px; cursor:pointer; list-style:none; }
.visual-study-note summary::-webkit-details-marker { display:none; }
.visual-study-note summary::after { content:'+'; }
.visual-study-note[open] summary::after { content:'−'; }
.visual-study-note p { max-width:670px; padding:0 0 24px; }
.visual-study-description { font-size:12px; padding:20px 0; }

/* FIRE: an interrupted horizon inside a dark chamber. */
.visual-study-rubens { margin-top:32px; }
.rubens-heading { position:absolute; z-index:1; top:35px; right:var(--gutter,3vw); text-align:right; }
.rubens-heading h1 { font-size:clamp(35px,4.6vw,70px); line-height:.88; font-weight:400; }
.study-ident { display:block; margin-top:18px; font:9px/1.4 var(--mono,'Courier New',monospace); text-transform:uppercase; color:#9d998f; }
.rubens-chamber { position:relative; background:#090908; color:var(--study-paper); margin:0 calc(-1 * var(--gutter,3vw)); }
.visual-study-rubens .visual-study-stage { height:clamp(550px,57vw,870px); }
.rubens-readout { position:absolute; top:26px; left:var(--gutter,3vw); display:flex; gap:15px; align-items:baseline; pointer-events:none; }
.rubens-readout>span:first-child { font-size:clamp(108px,16vw,246px); letter-spacing:-.08em; line-height:1; font-weight:400; font-variant-numeric:tabular-nums; }
.rubens-readout>span:last-child { font:14px var(--mono,'Courier New',monospace); }
.rubens-wave-label { position:absolute; bottom:25px; left:var(--gutter,3vw); font:9px var(--mono,'Courier New',monospace); letter-spacing:.07em; color:#99968f; }
.rubens-console { display:grid; grid-template-columns:1fr 2.3fr 1.5fr; gap:3.5vw; border-bottom:1px solid var(--study-rule); padding:24px 0 20px; }
.rubens-ranges { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.rubens-harmonics { display:grid; grid-template-columns:repeat(8,1fr); align-content:center; font:11px var(--mono,'Courier New',monospace); }
.rubens-harmonics>span { grid-column:1/-1; text-transform:uppercase; margin-bottom:10px; }
.rubens-harmonics button { min-height:32px; padding:0; border-bottom:1px solid var(--study-rule); }
.rubens-harmonics button[aria-pressed=true] { border-bottom:3px solid var(--study-red); color:var(--study-red); }

/* LIGHT: the drawing is the room; controls occupy the drafting margin. */
.laser-heading { display:flex; justify-content:space-between; align-items:end; padding:34px 0 35px; }
.laser-heading h1 { font-size:clamp(80px,10.5vw,164px); }
.laser-heading h1 span { color:var(--study-red); font-weight:300; }
.laser-equation { display:flex; flex-direction:column; font:11px/1.8 var(--mono,'Courier New',monospace); padding-bottom:3px; }
.laser-room { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:32px; align-items:stretch; }
.laser-surface { position:relative; background:#0b0b0a; color:#eeeae2; }
.visual-study-laser .visual-study-stage { height:clamp(450px,55vw,860px); }
.laser-surface-register { position:absolute; bottom:22px; left:24px; right:24px; display:flex; justify-content:space-between; font:10px var(--mono,'Courier New',monospace); pointer-events:none; color:#9d9b93; }
.laser-rail { display:flex; flex-direction:column; padding-top:1px; }
.laser-rail-heading { font-size:24px; line-height:.96; letter-spacing:-.05em; margin-bottom:38px; }
.laser-rail .visual-study-control { border-top:1px solid var(--study-rule); padding-top:13px; margin-bottom:18px; }
.laser-rail .visual-study-transport { margin-top:auto; padding:10px 0 26px; }
.visual-study .laser-export { display:flex; justify-content:space-between; align-items:center; text-transform:uppercase; border-top:1px solid var(--study-rule); width:100%; padding:12px 0 0; font-size:12px; }
.laser-export span { font-size:23px; }
.laser-export-kind { font:9px var(--mono,'Courier New',monospace); text-transform:uppercase; padding:0 0 12px; opacity:.65; }
.visual-study-presets { display:flex; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--study-rule); margin-top:16px; gap:0; font:11px var(--mono,'Courier New',monospace); }
.visual-study-presets>span { margin-right:auto; text-transform:uppercase; }
.visual-study-presets button { min-width:88px; padding:0 15px; border-bottom:3px solid transparent; }
.visual-study-presets button[aria-pressed=true] { color:var(--study-red); border-color:var(--study-red); }

/* OBJECT: a geometric specimen suspended over a quiet paper floor. */
.mirror-heading { display:flex; justify-content:space-between; align-items:end; padding:36px 0 0; }
.mirror-heading h1 { font-size:clamp(42px,5.5vw,86px); }
.mirror-heading p { font-size:clamp(17px,2.5vw,38px); line-height:1.04; letter-spacing:-.05em; padding-bottom:4px; }
.mirror-room { position:relative; margin-top:30px; }
.visual-study-mirror .visual-study-stage { height:clamp(450px,59vw,900px); }
.visual-study-mirror canvas { touch-action:pan-y; }
.mirror-catalogue { display:flex; justify-content:space-between; position:absolute; z-index:1; top:5px; left:0; right:0; font:10px var(--mono,'Courier New',monospace); text-transform:uppercase; pointer-events:none; }
.mirror-floor-register { display:flex; justify-content:space-between; position:absolute; bottom:20px; left:0; right:0; font:10px var(--mono,'Courier New',monospace); text-transform:uppercase; pointer-events:none; }
.mirror-console { display:grid; grid-template-columns:1fr 1fr 1fr .65fr; gap:4vw; padding:22px 0 12px; border-top:1px solid var(--study-rule); border-bottom:1px solid var(--study-rule); }
.mirror-console .visual-study-transport { justify-self:end; }
.mirror-console button { text-transform:uppercase; font-size:12px; padding:0; }

@media(max-width:900px) {
  .rubens-console { grid-template-columns:1fr 3fr; gap:20px; }
  .rubens-harmonics { grid-column:2; }
  .laser-room { grid-template-columns:minmax(0,1fr) 190px; gap:22px; }
  .mirror-console { gap:25px; grid-template-columns:1fr 1fr; }
  .mirror-console .visual-study-transport { justify-self:start; }
}
@media(max-width:600px) {
  .visual-study { margin-bottom:48px; }
  .visual-study-label { font-size:10px; }
  .visual-study-note { margin-top:16px; }
  .visual-study-note p { font-size:11px; }
  .rubens-heading { top:24px; }
  .rubens-heading h1 { font-size:9vw; }
  .study-ident { display:none; }
  .visual-study-rubens { margin-top:23px; }
  .visual-study-rubens .visual-study-stage { height:500px; }
  .rubens-readout { top:20px; }
  .rubens-readout { gap:8px; }
  .rubens-readout>span:first-child { font-size:31vw; }
  .rubens-readout>span:last-child { font-size:10px; }
  .rubens-wave-label { bottom:20px; font-size:8px; }
  .rubens-console { grid-template-columns:74px 1fr; padding:20px 0; gap:16px; }
  .rubens-ranges { grid-template-columns:1fr; gap:8px; }
  .rubens-console .visual-study-transport { justify-content:flex-start; }
  .visual-study [data-lab-play] { gap:10px; font-size:19px; }
  .rubens-harmonics { grid-column:1/-1; }
  .rubens-harmonics>span { margin-bottom:3px; }
  .rubens-harmonics button { min-height:44px; }
  .laser-heading { padding:25px 0; align-items:start; }
  .laser-heading h1 { font-size:20vw; }
  .laser-equation { display:none; }
  .laser-room { display:block; }
  .visual-study-laser .visual-study-stage { height:112vw; max-height:620px; min-height:340px; }
  .laser-surface { margin:0 calc(-1 * var(--gutter,18px)); }
  .laser-surface-register { left:var(--gutter,18px); right:var(--gutter,18px); bottom:18px; font-size:9px; }
  .laser-rail { display:grid; grid-template-columns:1fr 1fr; gap:15px 25px; padding:25px 0 0; }
  .laser-rail-heading { display:none; }
  .laser-rail .visual-study-control { margin:0; padding-top:10px; }
  .laser-rail .visual-study-transport { margin:0; padding:0; grid-row:3 / span 2; }
  .visual-study .laser-export { padding:0; }
  .laser-export-kind { grid-column:2; padding:0; margin-top:-15px; }
  .visual-study-presets { margin-top:23px; }
  .visual-study-presets>span { width:100%; margin:0; font-size:10px; }
  .visual-study-presets button { min-width:0; flex:1; padding:0 9px; font-size:10px; }
  .mirror-heading { padding:25px 0 0; display:block; }
  .mirror-heading h1 { font-size:13vw; }
  .mirror-heading p { font-size:18px; line-height:1; margin-top:22px; }
  .mirror-heading p br { display:none; }
  .mirror-room { margin-top:28px; }
  .visual-study-mirror .visual-study-stage { height:340px; }
  .mirror-catalogue { font-size:8px; }
  .mirror-floor-register { bottom:16px; font-size:9px; }
  .mirror-console { gap:12px 24px; padding-top:17px; }
  .mirror-console .visual-study-transport { align-self:center; }
}
@media(prefers-reduced-motion:reduce) { .visual-study * { scroll-behavior:auto; } }