/* Visible spatial composition: the runtime budget stays small, the objects do not disappear. */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 34px 0 43px;
  isolation: isolate;
}
.intro-copy { min-width: 0; position: relative; z-index: 2; }
.intro-copy > .eyebrow { font: 8px var(--mono); color: var(--cyan); letter-spacing: 1.7px; margin-bottom: 20px; }
.intro h1 { font-size: clamp(47px, 4.8vw, 74px); line-height: 1.04; margin-bottom: 21px; text-shadow: 1px 1px #ff5279, 2px 2px #5d1935, 3px 3px #1e0d20; }
.intro h1 > span { text-shadow: 1px 1px #147f8e, 2px 2px #07515e, 3px 3px #062b3e; }
.intro p { max-width: 390px; margin: 0; font-size: 12px; line-height: 1.85; border-left-color: #66f3ff80; }
.intro::after { bottom: 18px; }
.scene-stage {
  position: relative;
  min-width: 0;
  height: 300px;
  perspective: 700px;
  isolation: isolate;
}
.scene-stage::before {
  content: "";
  position: absolute;
  inset: 25% 6% 10%;
  background: radial-gradient(ellipse, #18c7e519 0, #ee44b009 42%, transparent 72%);
  pointer-events: none;
}
.scene-stage::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: 24px;
  height: 72px;
  background-image: linear-gradient(#66f3ff1a 1px, transparent 1px), linear-gradient(90deg, #66f3ff1a 1px, transparent 1px);
  background-size: 23px 23px;
  transform: rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: radial-gradient(ellipse, black 10%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.scene-stage #depth-accent {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 1;
  contain: strict;
  z-index: 1;
}
.scene-label, .scene-caption { position: absolute; z-index: 2; color: #87a8ba; font: 8px var(--mono); letter-spacing: 1.5px; pointer-events: none; }
.scene-label { top: 6px; right: 12px; color: #9bb7c6; }
.scene-label::before { content: ""; display: inline-block; width: 20px; height: 1px; background: var(--cyan); margin: 0 8px 3px 0; }
.scene-caption { left: 0; right: 0; bottom: 0; text-align: center; font-size: 7px; letter-spacing: 2px; }
.scene-caption b { color: var(--cyan); font-weight: 400; margin: 0 9px; }
.motion-toggle { position: absolute; z-index: 3; top: -6px; left: 0; padding: 8px 10px; min-height: 32px; border: 1px solid #385361; background: #0b1822; color: #adfaff; font: 9px var(--mono); cursor: pointer; }
.motion-toggle:hover { border-color: var(--cyan); background: #16323e; }
.motion-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.workbench { gap: 18px; border: 0; background: transparent; overflow: visible; box-shadow: none; position: relative; }
.brief-panel, .output-panel {
  position: relative;
  border: 1px solid #385361;
  border-top: 2px solid var(--yellow);
  background: linear-gradient(125deg, #17202b, #10151e 42%, #0c121c);
  box-shadow: 5px 6px 0 #040810, 6px 7px 0 #263c49, 0 20px 35px #0007, inset 0 1px #faffff10;
}
.output-panel { border-top-color: var(--cyan); background: linear-gradient(135deg, #142833, #0c1822 50%, #09121c); }
.brief-panel::after, .output-panel::after { content: ""; position: absolute; top: 9px; right: -4px; bottom: -4px; width: 3px; background: linear-gradient(#476272, #1d303e 40%, #101b27); pointer-events: none; }
.bar-card { background: linear-gradient(130deg, #153845, #0c242d); box-shadow: 3px 4px 0 #050d14, inset 0 1px #a8f7ff18; }
textarea, input, select { box-shadow: inset 0 2px 8px #0005; border-bottom-color: #4d6471; }
.primary { box-shadow: inset 0 -3px #a9a000; }
.copy-button { box-shadow: inset 0 -3px #217a83; }
.sidebar { box-shadow: 6px 0 20px #0004; }
.empty-symbol { text-shadow: 1px 1px #087988, 2px 2px #07505e, 3px 3px #0a3041, 0 12px 18px #0008; }
.footer { padding-top: 29px; }
@media (max-width: 1150px) {
  .intro { gap: 18px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .intro h1 { font-size: 51px; }
  .scene-stage { height: 270px; }
  .intro p { font-size: 11px; }
  .workbench { gap: 14px; }
  .brief-panel, .output-panel { padding: 24px 19px; }
}
@media (max-width: 850px) {
  .intro { gap: 12px; padding: 30px 0 36px; }
  .intro h1 { font-size: 48px; }
  .intro-copy > .eyebrow { font-size: 7px; letter-spacing: 1px; margin-bottom: 16px; }
  .scene-stage { height: 265px; }
  .intro p { font-size: 11px; line-height: 1.8; padding-left: 11px; }
  .scene-caption { font-size: 6px; letter-spacing: 1px; }
}
@media (max-width: 640px) {
  .intro { grid-template-columns: 1fr; gap: 8px; padding: 29px 0 35px; }
  .intro h1 { font-size: clamp(43px, 12.8vw, 65px); margin-bottom: 18px; }
  .intro-copy > .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .intro p { max-width: 390px; font-size: 12px; margin: 0; }
  .scene-stage { height: 248px; width: 100%; max-width: 420px; margin: 0 auto; }
  .scene-label { top: 5px; right: 6px; font-size: 7px; }
  .scene-caption { font-size: 7px; }
  .workbench { display: grid; grid-template-columns: 1fr; gap: 22px; }
  .brief-panel, .output-panel { padding: 24px 20px; }
}