/* Independent stage and inspector: UI never covers the workpiece. */
:root { --studio-dock: 340px; }
body { background: #000000; }
.studio-stage { position: fixed; inset: 216px calc(var(--studio-dock) + 48px) 88px 24px; overflow: hidden; border: 1px solid #d5dde521; border-radius: 4px; background: #000000; }
.studio-stage #viewport { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.blueprint-measures { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 10px 12px; color: #eaf7ff; background: #071b31e9; border: 1px solid #8bcaff88; box-shadow: 0 12px 32px #0008; pointer-events: none; }
.blueprint-measures[hidden] { display: none; }
.blueprint-measures div { min-width: 0; padding-left: 8px; border-left: 1px solid #87c9f576; }
.blueprint-measures span { display: block; color: #9ccbe5; font: 600 11px/1.2 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.blueprint-measures strong { display: block; margin-top: 4px; color: #fff; font: 700 14px/1.15 'Barlow Condensed', sans-serif; white-space: nowrap; }
.blueprint-measures small { grid-column: 1/-1; color: #a6cfe6; font: 500 11px/1.4 'IBM Plex Mono', monospace; letter-spacing: .03em; }
.section-title, .racetrack-proof-mode .section-title { top: 108px; left: 24px; max-width: calc(100vw - var(--studio-dock) - 80px); }
.section-tag { font-size: 11px; margin-bottom: 9px; }
.section-h1 { font-size: clamp(30px, 3.3vw, 48px); margin-bottom: 10px; }
.section-lede { max-width: 660px; font-size: 13px; line-height: 1.4; }
.controls { top: 108px; left: auto; right: 24px; bottom: 24px; width: var(--studio-dock); max-height: none; background: #101010f5; border-color: #c2cbd52e; }
.topnav { height: 104px; padding: 12px 24px; }
.topnav-logo img { width: 112px; height: 62px; object-fit: contain; }
.topnav-logo { --mark-width: 160px; }
.ctrl-section { padding: 20px; }
.hint { bottom: 24px; left: 24px; right: calc(var(--studio-dock) + 48px); transform: none; justify-content: center; flex-wrap: wrap; font-size: 11px; gap: 5px; padding: 9px; border: 1px solid #c2cbd52e; border-radius: 4px; background: #101010; }
.hint.fade { opacity: 1; }
.hint-reset { min-height: 34px; padding: 8px 11px; letter-spacing: .06em; }
.hint-reset.is-active { color: var(--gold-bright); border-color: var(--gold); background: #ed302919; }
.status { display: none; }
.racetrack-proof-mode .proof-evidence { position: static; width: auto; max-height: none; margin: 0; padding: 20px; box-shadow: none; background: #0e171e; }
.proof-evidence h2 { font-size: 27px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #ff6b64; outline-offset: 3px; }
@media (max-width: 980px) {
  :root { --studio-dock: 300px; }
  .section-tag { display: none; }
  .section-title { top: 95px; }
  .section-h1 { font-size: 31px; }
  .studio-stage { top: 197px; }
  .hint-reset { padding: 6px 8px; font-size: 11px; }
}
@media (max-width: 700px) {
  .blueprint-measures { left: 4px; right: 4px; bottom: 4px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 5px; }
  .blueprint-measures div { padding-left: 4px; }
  .blueprint-measures span { font-size: 11px; }
  .blueprint-measures strong { font-size: 12px; }
  .blueprint-measures small { font-size: 11px; }
  .topnav{height:84px;padding:10px 20px}.topnav-logo{--mark-width:128px}
  .section-title, .racetrack-proof-mode .section-title { top: 94px; left: 14px; right: 14px; max-width: none; }
  .section-h1 { font-size: 29px; margin-bottom: 6px; }
  .section-lede { font-size: 12px; line-height: 1.3; }
  .studio-stage { inset: 188px 12px calc(34dvh + 86px) 12px; }
  .controls { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 34dvh; max-height: none; border-top: 1px solid #65707e; }
  .hint { left: 12px; right: 12px; bottom: calc(34dvh + 8px); padding: 6px; gap: 4px; }
  .hint-reset { min-height: 30px; padding: 5px 8px; font-size: 11px; }
  .ctrl-section { padding: 16px; }
}
@media (max-width: 700px) and (max-height: 680px) {
  .section-lede { display: none; }
  .studio-stage { top: 118px; }
  .controls { height: 32dvh; }
  .studio-stage { bottom: calc(32dvh + 82px); }
  .hint { bottom: calc(32dvh + 6px); }
}
@media (min-width: 701px) and (max-height: 540px) {
  .topnav { height: 65px; }
  .topnav-logo img { height: 46px; }
  .topnav-logo { --mark-width: 120px; }
  .section-title, .racetrack-proof-mode .section-title { top: 74px; }
  .section-tag, .section-lede { display: none; }
  .section-h1 { font-size: 27px; }
  .studio-stage { top: 116px; bottom: 104px; }
  .controls { top: 74px; bottom: 12px; }
  .hint { bottom: 12px; padding: 5px; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 700px) {
  :root { --studio-dock: 240px; }
  .topnav { height: 64px; padding: 6px 12px; }
  .topnav-logo img { height: 40px; width: 80px; }
  .topnav-logo { --mark-width: 104px; }
  .section-title, .racetrack-proof-mode .section-title { top: 71px; left: 12px; right: auto; max-width: calc(100vw - 276px); }
  .section-h1 { font-size: 24px; }
  .section-tag, .section-lede { display: none; }
  .studio-stage { inset: 112px 264px 104px 12px; }
  .controls { top: 71px; bottom: 10px; left: auto; right: 12px; width: 240px; height: auto; }
  .hint { left: 12px; right: 264px; bottom: 10px; padding: 4px; }
  .hint-reset { min-height: 26px; padding: 4px 5px; font-size: 11px; }
}