/* LABS / 001 — type is the image; human time is the score. */
.visual-study-type {
  margin-top:32px;
  --tt-quiet:#8b8984;
  --tt-field:#070707;
  --tt-paper:#f4f3ef;
  --tt-red:#cf291d;
}

.type-techno-field {
  position:relative;
  height:clamp(720px,78vw,1080px);
  margin:0 calc(-1 * var(--gutter,3vw));
  overflow:hidden;
  background:var(--tt-field);
  color:var(--tt-paper);
  cursor:text;
  isolation:isolate;
}

.type-techno-field::after {
  content:'';
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:61.8%;
  width:1px;
  background:rgba(244,243,239,.055);
  pointer-events:none;
}

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

.type-techno-heading>span,
.type-techno-trace-label,
.type-techno-field-register {
  color:var(--tt-quiet);
  font:10px/1.4 var(--mono,'Courier New',monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
}

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

.type-techno-focus {
  position:absolute;
  z-index:6;
  top:41%;
  left:61.8%;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:0;
  color:var(--tt-paper);
  font:11px/1.4 var(--mono,'Courier New',monospace);
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:opacity 260ms cubic-bezier(.22,1,.36,1),transform 420ms cubic-bezier(.22,1,.36,1);
}

.type-techno-focus i {
  display:block;
  width:1px;
  height:16px;
  background:var(--tt-red);
  animation:type-techno-cursor 1s steps(1,end) infinite;
}

.type-techno-field.has-input .type-techno-focus {
  opacity:0;
  transform:translateY(-9px);
  pointer-events:none;
}

.type-techno-input {
  position:absolute;
  z-index:7;
  left:50%;
  top:52%;
  width:2px;
  height:2px;
  padding:0;
  border:0;
  opacity:.01;
  resize:none;
  caret-color:transparent;
  background:transparent;
  color:transparent;
  overflow:hidden;
}

.type-techno-input:focus-visible + .type-techno-composition::after {
  content:'';
  position:absolute;
  inset:-11px;
  border:1px solid rgba(207,41,29,.75);
  pointer-events:none;
}

.type-techno-composition {
  position:absolute;
  z-index:2;
  top:25%;
  right:var(--gutter,3vw);
  bottom:18%;
  left:var(--gutter,3vw);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
  transition:transform 420ms cubic-bezier(.22,1,.36,1);
}

.type-techno-line {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  align-content:center;
  min-height:.82em;
  max-width:92%;
  font-size:clamp(44px,8.25vw,136px);
  font-weight:400;
  line-height:.78;
  letter-spacing:-.075em;
  text-transform:none;
  transform-origin:left center;
  transition:transform 420ms cubic-bezier(.22,1,.36,1),opacity 260ms ease;
}

.type-techno-line:nth-child(even) {
  align-self:flex-end;
  justify-content:flex-end;
  max-width:61.8%;
  text-align:right;
}

.type-techno-line:nth-child(3n) {
  max-width:76.4%;
  transform:translateX(14.6%);
}

.type-techno-word {
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
}

.type-techno-glyph {
  position:relative;
  display:inline-block;
  min-width:.31em;
  transform:translateY(var(--lift,0)) scale(var(--scale,1));
  transform-origin:center bottom;
  transition:transform 160ms cubic-bezier(.22,1,.36,1),opacity 260ms ease,filter 160ms ease;
}

.type-techno-glyph.is-entering {
  opacity:.2;
  transform:translateY(calc(var(--lift,0) + .12em)) scale(.92);
}

.type-techno-glyph.is-space {
  flex:0 0 auto;
  width:var(--space,.38em);
  min-width:var(--space,.38em);
}

.type-techno-glyph.is-accent { color:var(--tt-red); }
.type-techno-glyph.is-caps { font-weight:700; letter-spacing:-.09em; }
.type-techno-glyph.is-repeat::after {
  content:attr(data-char);
  position:absolute;
  left:var(--echo,.055em);
  top:0;
  color:transparent;
  -webkit-text-stroke:1px rgba(244,243,239,.32);
  opacity:.65;
  pointer-events:none;
}
.type-techno-glyph.is-deleting {
  opacity:0;
  filter:blur(2px);
  transform:translateX(-.18em) scaleX(.12);
}

.type-techno-line.is-section {
  transform:translateX(23.6%);
}

.type-techno-field.is-caps .type-techno-composition {
  transform:scale(1.025);
}

.type-techno-field.is-overload .type-techno-composition {
  transform:translateX(-1.4%) scale(1.018);
}

.type-techno-trace {
  position:absolute;
  z-index:1;
  right:var(--gutter,3vw);
  bottom:34px;
  left:var(--gutter,3vw);
  height:108px;
}

.type-techno-trace canvas { display:block; width:100%; height:100%; }
.type-techno-trace-label { position:absolute; z-index:3; bottom:18px; left:var(--gutter,3vw); }
.type-techno-field-register {
  position:absolute;
  z-index:3;
  right:var(--gutter,3vw);
  bottom:18px;
  display:flex;
  gap:24px;
  pointer-events:none;
}

.type-techno-console { border-bottom:1px solid var(--study-rule); }
.type-techno-primary {
  display:grid;
  grid-template-columns:minmax(150px,.7fr) minmax(0,2.6fr);
  gap:clamp(28px,7vw,120px);
  padding:29px 0 24px;
}
.type-techno-primary .visual-study-transport { justify-content:flex-start; }
.visual-study-type [data-tt-audio] {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:48px;
  padding:0;
  font-size:25px;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.visual-study-type [data-tt-audio]::before {
  content:'';
  display:block;
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid var(--tt-red);
}
.visual-study-type [data-tt-audio][aria-pressed=true]::before {
  width:11px;
  height:11px;
  border:0;
  background:var(--tt-red);
}
.type-techno-bpm { align-self:start; padding-top:7px; }
.type-techno-bpm .visual-study-label { font-size:13px; }

.type-techno-worlds {
  margin:0;
  padding:20px 0 15px;
  border:0;
  border-top:1px solid var(--study-rule);
}
.type-techno-worlds legend {
  padding:0 0 12px;
  font:10px/1.4 var(--mono,'Courier New',monospace);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.type-techno-worlds>div { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; }
.type-techno-worlds button {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  min-height:72px;
  padding:8px 10px 10px 0;
  border-top:1px solid var(--study-rule);
  text-align:left;
}
.type-techno-worlds button span { font:10px var(--mono,'Courier New',monospace); }
.type-techno-worlds button strong { font-size:16px; font-weight:400; text-transform:uppercase; }
.type-techno-worlds button[aria-pressed=true] { border-color:var(--tt-red); color:var(--tt-red); }

.type-techno-actions {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--study-rule);
}
.type-techno-actions button {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:62px;
  padding:0 14px 0 0;
  border-right:1px solid var(--study-rule);
  text-transform:uppercase;
  font-size:13px;
}
.type-techno-actions button:last-child { border-right:0; }
.type-techno-actions button span { font-size:22px; }

.type-techno-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;
  white-space:pre;
  font:10px/1.55 var(--mono,'Courier New',monospace);
  pointer-events:none;
}

@keyframes type-techno-cursor { 0%,49%{opacity:1} 50%,100%{opacity:0} }

@media(max-width:760px) {
  .visual-study-type { margin-top:23px; }
  .type-techno-field {
    height:max(620px,calc(var(--tt-viewport,100svh) - 12px));
    min-height:620px;
  }
  .type-techno-heading { top:25px; }
  .type-techno-heading h1 { margin-top:13px; font-size:clamp(43px,13.5vw,64px); }
  .type-techno-field::after { left:61.8%; }
  .type-techno-focus { top:42%; left:38.2%; font-size:10px; }
  .type-techno-composition { top:26%; bottom:21%; }
  .type-techno-line { max-width:100%; font-size:clamp(39px,13vw,64px); line-height:.8; }
  .type-techno-line:nth-child(even) { max-width:76.4%; }
  .type-techno-line:nth-child(3n) { max-width:88%; transform:translateX(6%); }
  .type-techno-trace { bottom:37px; height:88px; }
  .type-techno-field-register { gap:12px; font-size:8px; }
  .type-techno-primary { grid-template-columns:112px minmax(0,1fr); gap:25px; padding:23px 0 21px; }
  .visual-study-type [data-tt-audio] { gap:10px; font-size:19px; line-height:1; }
  .type-techno-bpm .visual-study-label { font-size:11px; }
  .type-techno-worlds>div { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .type-techno-worlds button { min-height:62px; padding-right:4px; }
  .type-techno-worlds button strong { font:9px var(--mono,'Courier New',monospace); overflow-wrap:anywhere; }
  .type-techno-actions { grid-template-columns:1fr; }
  .type-techno-actions button { min-height:50px; border-right:0; border-bottom:1px solid var(--study-rule); padding-right:0; }
  .type-techno-actions button:last-child { border-bottom:0; }
}

@media(max-width:350px) {
  .type-techno-field { height:600px; min-height:600px; }
  .type-techno-heading h1 { font-size:41px; }
  .type-techno-primary { grid-template-columns:98px minmax(0,1fr); gap:18px; }
}

@media(prefers-reduced-motion:reduce) {
  .type-techno-focus,.type-techno-composition,.type-techno-line,.type-techno-glyph { transition-duration:1ms!important; }
  .type-techno-focus i { animation:none; }
  .type-techno-glyph.is-repeat::after { display:none; }
}