/* LABS / 063 — one dark instrument field and one quiet control plane. */
.visual-study-anxious {
  margin-top:32px;
}

.anxious-field {
  position:relative;
  height:clamp(720px,78vw,1040px);
  margin:0 calc(-1 * var(--gutter,3vw));
  overflow:hidden;
  background:#070707;
  color:#f4f3ef;
}

.anxious-heading {
  position:absolute;
  z-index:3;
  top:30px;
  left:var(--gutter,3vw);
  pointer-events:none;
}

.anxious-heading>span,
.anxious-trace-label {
  color:#8b8984;
  font:10px/1.4 var(--mono,'Courier New',monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.anxious-heading h1 {
  margin-top:16px;
  font-size:clamp(48px,6vw,92px);
  font-weight:400;
  line-height:.83;
}

.anxious-readout {
  position:absolute;
  z-index:3;
  top:41px;
  right:var(--gutter,3vw);
  display:flex;
  align-items:flex-start;
  gap:13px;
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}

.anxious-readout>span:first-child {
  font-size:clamp(82px,11vw,170px);
  font-weight:300;
  letter-spacing:-.075em;
  line-height:.78;
}

.anxious-readout>span:last-child {
  padding-top:7px;
  font:11px var(--mono,'Courier New',monospace);
}

.anxious-instrument {
  position:absolute;
  inset:14% 8% 18%;
}

.anxious-timeline {
  position:absolute;
  z-index:2;
  right:var(--gutter,3vw);
  bottom:38px;
  left:var(--gutter,3vw);
  height:128px;
}

.anxious-trace-label {
  position:absolute;
  z-index:3;
  bottom:20px;
  left:var(--gutter,3vw);
}

.anxious-console {
  display:grid;
  grid-template-columns:minmax(130px,.7fr) minmax(0,2.6fr);
  gap:clamp(28px,7vw,120px);
  padding:30px 0 27px;
  border-bottom:1px solid var(--study-rule);
}

.anxious-console .visual-study-transport {
  justify-content:flex-start;
}

.visual-study-anxious [data-anxious-play] {
  display:flex;
  align-items:center;
  gap:16px;
  padding:0;
  font-size:25px;
  letter-spacing:-.035em;
  text-transform:uppercase;
}

.visual-study-anxious [data-anxious-play]::before {
  content:'';
  display:block;
  width:11px;
  height:11px;
  background:var(--study-red);
}

.visual-study-anxious [data-anxious-play][aria-pressed=false]::before {
  width:0;
  height:0;
  background:transparent;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid var(--study-red);
}

.anxious-bpm {
  align-self:start;
  padding-top:7px;
}

.anxious-bpm .visual-study-label {
  font-size:13px;
}

.anxious-debug {
  position:fixed;
  z-index:80;
  right:12px;
  bottom:12px;
  max-width:calc(100vw - 24px);
  margin:0;
  padding:10px 12px;
  border:1px solid #555;
  background:#080808e8;
  color:#e4e2dc;
  font:10px/1.55 var(--mono,'Courier New',monospace);
  pointer-events:none;
}

@media(max-width:760px) {
  .visual-study-anxious { margin-top:23px; }
  .anxious-field { height:clamp(650px,176vw,790px); }
  .anxious-heading { top:25px; }
  .anxious-heading h1 { margin-top:13px; font-size:clamp(43px,13.5vw,64px); }
  .anxious-readout { top:146px; gap:8px; }
  .anxious-readout>span:first-child { font-size:clamp(58px,20vw,92px); }
  .anxious-readout>span:last-child { padding-top:3px; font-size:9px; }
  .anxious-instrument { inset:26% 1% 20%; }
  .anxious-timeline { bottom:39px; height:106px; }
  .anxious-console { grid-template-columns:112px minmax(0,1fr); gap:25px; padding:24px 0 22px; }
  .visual-study-anxious [data-anxious-play] { gap:10px; font-size:20px; }
  .anxious-bpm { padding-top:5px; }
  .anxious-bpm .visual-study-label { font-size:11px; }
}

@media(max-width:350px) {
  .anxious-field { height:640px; }
  .anxious-heading h1 { font-size:41px; }
  .anxious-readout { top:139px; }
  .anxious-readout>span:first-child { font-size:57px; }
  .anxious-console { grid-template-columns:98px minmax(0,1fr); gap:18px; }
}

@media(min-width:1200px) {
  .anxious-instrument { inset:12% 14% 17%; }
}

@media(prefers-reduced-motion:reduce) {
  .anxious-field canvas { scroll-behavior:auto; }
}