@font-face { font-family: ALTMistral; font-weight: 400; font-display: swap; src: url('/assets/ALTMistral-Regular.woff2') format('woff2'); }
@font-face { font-family: ALTMistral; font-weight: 500; font-display: swap; src: url('/assets/ALTMistral-Medium.woff2') format('woff2'); }
@font-face { font-family: ALTMistral; font-weight: 600; font-display: swap; src: url('/assets/ALTMistral-Semibold.woff2') format('woff2'); }
:root { color-scheme: light; --ink: #18181b; --muted: #6d6d78; --accent: #fa500f; --surface-1: #fbfbf8; --surface-2: #f5f4ef; --surface-3: #ebe9e0; --border: #e4e3de; --frame-side: 40px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--surface-1); color: var(--ink); font: 400 14px/1.5 ALTMistral, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
#search-frame { position: relative; display: grid; grid-template-columns: var(--frame-side) minmax(0, 1fr) var(--frame-side); width: min(1280px, calc(100% - 32px)); height: min(760px, calc(100dvh - 48px)); min-height: 480px; margin: 24px auto; }
.frame-body { position: relative; display: grid; grid-template-rows: var(--frame-side) minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--surface-2); }
.frame-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--frame-side); padding: 0 16px; }
.frame-header h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0; }
.frame-play, .frame-help { display: grid; place-items: center; width: var(--frame-side); height: var(--frame-side); padding: 0; border: 0; border-radius: 0; cursor: pointer; }
.frame-play { background: #000; color: #fff; }
.frame-play:hover { background: #2a2a2a; }
#play-icon, #play-icon svg, #play-icon img { display: block; width: 14px; height: 14px; }
#play-icon img, #play-icon-in img { filter: brightness(0) invert(1); transform: scale(.8); }
.play-icon-in, .play-progress { display: none; }
#play-label { display: none; }
.frame-end { display: flex; align-items: flex-end; }
.frame-help { background: var(--surface-3); }
.frame-help:hover { background: #e4e2d6; }
.frame-help img { display: block; width: 14px; height: 14px; image-rendering: pixelated; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.frame-timeline { position: absolute; top: calc(var(--frame-side) - 1px); left: 0; right: 0; height: 2px; z-index: 5; }
input[type="range"] { display: block; appearance: none; width: 100%; min-width: 0; margin: 0; background: transparent; cursor: pointer; }
#turn { height: 18px; margin-top: -8px; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, #000 var(--progress, 0%), #00000022 var(--progress, 0%)); }
input[type="range"]::-moz-range-track { height: 2px; background: #00000022; }
input[type="range"]::-moz-range-progress { height: 2px; background: #000; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; margin-top: -3px; border: 0; border-radius: 0; background: #000; }
input[type="range"]::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 0; background: #000; }
#turn::-webkit-slider-thumb { opacity: 0; }
#turn::-moz-range-thumb { opacity: 0; }
#turn:hover::-webkit-slider-thumb, #turn:focus-visible::-webkit-slider-thumb { opacity: 1; }
#turn:hover::-moz-range-thumb, #turn:focus-visible::-moz-range-thumb { opacity: 1; }
#viewer { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-2); }
#scene { display: block; width: 100%; height: 100%; outline: none; cursor: grab; touch-action: none; }
#scene:active { cursor: grabbing; }
#scene.answer-hover:not(:active) { cursor: pointer; }
#scene:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
#search-frame { -webkit-user-select: none; user-select: none; }
#model-stats { position: absolute; z-index: 4; top: var(--stats-top, 16px); right: var(--stats-right, auto); bottom: var(--stats-bottom, auto); left: var(--stats-left, 16px); width: var(--stats-width, 350px); max-width: calc(100% - var(--stats-inset, 16px) - var(--stats-inset, 16px)); border: 1px solid var(--border); border-collapse: collapse; background: #fff; font-size: 14px; line-height: 20px; letter-spacing: .02em; }
#model-stats th, #model-stats td { padding: 0 12px; border-bottom: 1px solid var(--border); text-align: right; font-weight: 500; }
#model-stats th:first-child { text-align: left; }
#model-stats thead th { height: 30px; color: var(--muted); font-size: 11px; font-weight: 400; }
#model-stats tbody tr:last-child > * { border-bottom: 0; }
.model-stat { height: 38px; color: var(--ink); cursor: pointer; }
.model-label { display: block; width: 100%; color: inherit; font: inherit; text-align: left; }
.model-stat.is-hovered { background: var(--surface-3); }
.model-name { display: inline-flex; align-items: baseline; white-space: nowrap; }
.model-mark { display: block; height: 12px; width: auto; margin-right: 4px; image-rendering: pixelated; flex-shrink: 0; }
.model-turns, .model-documents { white-space: nowrap; font-variant-numeric: tabular-nums; }
#model-stats output.is-zero { opacity: .5; }
.model-trophy { display: inline-block; visibility: hidden; width: 12px; height: 12px; margin-right: 4px; vertical-align: baseline; image-rendering: pixelated; background-color: #ffaf00; background-image: linear-gradient(45deg, #ffaf00 0%, #ffaf00 38%, color-mix(in srgb, #ffd800 65%, #fff) 50%, #ffaf00 62%, #ffaf00 100%); background-size: 250% 250%; background-repeat: no-repeat; -webkit-mask: url('/assets/trophy.svg') center / contain no-repeat; mask: url('/assets/trophy.svg') center / contain no-repeat; animation: model-trophy-shimmer 2.4s ease-in-out infinite; }
.model-trophy.is-visible { visibility: visible; }
@keyframes model-trophy-shimmer { 0% { background-position: 170% -70%; } 100% { background-position: -70% 170%; } }
.model-trophy.is-entering { animation: model-trophy-shimmer 2.4s ease-in-out infinite, model-trophy-enter .45s .35s both; }
@keyframes model-trophy-enter { from { opacity: 0; transform: translateY(35%) scale(.7); } to { opacity: 1; transform: translateY(0) scale(1); } }
.model-stat.is-revealing { --row-shimmer: linear-gradient(90deg, transparent 34%, #FDDD7333 40%, #FDDD73B3 50%, #FDDD7333 60%, transparent 66%); background-image: var(--row-shimmer), var(--row-shimmer); background-size: 300% 100%, 300% 100%; background-repeat: no-repeat; animation: model-row-sweep 1.2s linear both; }
@keyframes model-row-sweep { 0% { background-position: 100% 0, 100% 0; } 50% { background-position: 0% 0, 100% 0; } 100% { background-position: 0% 0, 0% 0; } }
@media (prefers-reduced-motion: reduce) { .model-trophy, .model-trophy.is-entering, .model-stat.is-revealing { animation: none; } .model-trophy { background: #ffaf00; } .model-stat.is-revealing { background-image: none; } }
/* Match the CTF counter's 400 ms spring and preserve the table's text baseline. */
.number-counter { position: relative; display: inline-block; vertical-align: baseline; --counter-ease: linear(0, .143 10%, .391 20%, .613 30%, .776 40%, .88 50%, .941 60%, .975 70%, .991 80%, .998 90%, 1); }
.counter-value { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.counter-digits { display: inline-flex; align-items: baseline; vertical-align: baseline; font: inherit; font-variant-numeric: tabular-nums; overflow: visible; pointer-events: none; }
.counter-column { position: relative; display: inline-block; vertical-align: baseline; width: 1ch; font: inherit; font-variant-numeric: inherit; }
.counter-column::before { content: '0'; display: block; visibility: hidden; font: inherit; pointer-events: none; }
.counter-digit { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; text-align: center; font: inherit; font-variant-numeric: inherit; }
.counter-digit.in-up, .counter-digit.in-down { z-index: 1; }
.counter-digit.in-up { animation: counter-in-up .4s var(--counter-ease) both; }
.counter-digit.out-up { animation: counter-out-up .4s var(--counter-ease) both; }
.counter-digit.in-down { animation: counter-in-down .4s var(--counter-ease) both; }
.counter-digit.out-down { animation: counter-out-down .4s var(--counter-ease) both; }
.counter-column.is-enter { animation: counter-column-in .4s var(--counter-ease) both; }
.counter-column.is-exit { animation: counter-column-out .4s var(--counter-ease) both; }
@keyframes counter-in-up {
  from { transform: translateY(70%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes counter-out-up {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-70%); opacity: 0; }
}
@keyframes counter-in-down {
  from { transform: translateY(-70%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes counter-out-down {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(70%); opacity: 0; }
}
@keyframes counter-column-in {
  from { transform: translateX(-25%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes counter-column-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-25%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .counter-digit, .counter-column { animation: none !important; }
}
#layout-debug { position: absolute; z-index: 5; right: 16px; top: 16px; width: 220px; max-width: calc(100% - 32px); padding: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; }
#scene-intro { display: none; -webkit-user-select: text; user-select: text; }
#scene-intro h2, #scene-intro p { -webkit-user-select: auto; user-select: auto; }
.debug-heading, .debug-scale { display: flex; align-items: center; justify-content: space-between; }
.debug-heading { gap: 16px; margin-bottom: 16px; font-weight: 500; }
.debug-heading strong { font-size: 14px; font-weight: 500; }
.debug-actions { display: flex; align-items: center; gap: 8px; }
#layout-debug button { padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--ink); cursor: pointer; font-size: 12px; }
#layout-debug button:hover { background: var(--surface-3); }
#layout-debug #debug-copy { border-color: var(--ink); background: var(--ink); color: #fff; }
.debug-controls { display: grid; gap: 24px; }
.debug-controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.debug-controls legend { margin-bottom: 10px; padding: 0; font-size: 12px; font-weight: 500; }
#debug-scale { height: 18px; margin-bottom: 5px; }
.debug-offset { display: grid; grid-template-columns: 1fr 74px 16px; align-items: center; gap: 6px; margin-top: 5px; }
.debug-angle { display: grid; grid-template-columns: 40px minmax(0, 1fr) 62px; align-items: center; gap: 8px; margin-bottom: 8px; }
#layout-debug input[type="number"] { width: 100%; min-width: 0; padding: 4px; border: 1px solid var(--border); border-radius: 0; background: #fff; color: var(--ink); text-align: right; font-size: 11px; }
.debug-angle input[type="range"] { height: 24px; }
#layout-debug output, #layout-debug input[type="number"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#debug-key-hint, .debug-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 16px; }
.debug-note { margin-top: 4px; }
#debug-copy-status { margin: 8px 0 0; font-size: 12px; }
#debug-copy-status:empty { display: none; }
#debug-copy-fallback { display: block; width: 100%; height: 180px; margin-top: 8px; padding: 8px; border: 1px solid var(--border); resize: vertical; font: 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; -webkit-user-select: text; user-select: text; }
.endpoint-label { position: absolute; z-index: 1; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; pointer-events: none; text-shadow: 0 0 5px var(--surface-2), 0 0 5px var(--surface-2); }
.annotation { position: absolute; z-index: 7; max-width: min(310px, calc(100vw - 20px)); padding: 7px 10px; border: 1px solid #e6e3df; background: #fff; color: var(--ink); box-shadow: 0 4px 18px #0000000f; font-size: 13px; line-height: 1.4; pointer-events: none; transform: translate(-50%, -100%) scale(var(--label-scale, 1)); transform-origin: 50% 100%; }
.document-annotation { transform: none; max-width: none; padding: 14px 16px; border-radius: 4px; pointer-events: auto; overflow: auto; overscroll-behavior: contain; cursor: auto; overflow-wrap: anywhere; }
.endpoint-label, .document-annotation { left: 0; top: 0; will-change: transform; }
.document-annotation[data-kind="information"], .document-annotation[data-kind="answer"], .document-annotation[data-kind="question"] { padding: 7px; }
.tooltip-copy { padding: 6px; }
.tooltip-copy > .tooltip-heading, .tooltip-copy > .tooltip-eyebrow { margin-bottom: 0; }
.tooltip-copy > p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.tooltip-copy + .tooltip-body:not(:empty) { margin-top: 6px; }
.document-annotation[data-kind="information"] .tooltip-copy > p { font-size: 14px; line-height: 20px; }
.tooltip-heading { font-size: 14px; font-weight: 500; line-height: 1.4; margin-bottom: 10px; }
.tooltip-body { font-size: 12px; line-height: 1.5; }
.tooltip-body p { margin: 0 0 12px; white-space: pre-wrap; }
.tooltip-body > :last-child { margin-bottom: 0; }
.tooltip-body h4 { margin: 16px 0 6px; font-size: 12px; font-weight: 500; }
.tooltip-body strong { font-weight: 500; }
.tooltip-eyebrow { margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.tooltip-retrieval { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 1fr); gap: 16px; padding: 6px 0; border-top: 1px solid #efedeb; }
.tooltip-retrieval span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tooltip-visit + .tooltip-visit { margin-top: 12px; }
.tooltip-visit-chip { display: inline-flex; align-items: stretch; max-width: 100%; border-radius: 0; overflow: hidden; font-size: 11px; line-height: 14px; font-weight: 500; }
.tooltip-chip-model { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 6px; background: var(--surface-2); color: var(--ink); min-width: 0; }
.tooltip-chip-cat { display: block; width: auto; height: 11px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.tooltip-chip-turn, .tooltip-chip-count { display: inline-flex; align-items: center; padding: 3px 6px; white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tooltip-chip-turn { background: var(--model-color); color: #fff; }
.tooltip-chip-count { background: var(--surface-3); color: var(--ink); }
.tooltip-source-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tooltip-body table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 11px; }
.tooltip-body th, .tooltip-body td { padding: 6px; border: 1px solid #efedeb; text-align: left; font-weight: 400; }
.tooltip-body th { font-weight: 500; }
.tooltip-source { color: var(--muted); }
.annotation small { display: block; margin-top: 3px; opacity: .82; font-size: 10px; font-variant-numeric: tabular-nums; }
#help-panel { position: absolute; z-index: 6; right: var(--frame-side); bottom: 0; width: min(290px, calc(100% - var(--frame-side) * 2)); padding: 16px; border: 1px solid var(--border); background: var(--surface-1); font-size: 13px; }
#help-panel p { margin: 0 0 10px; }
#help-panel p:last-child { margin-bottom: 0; }
#error { position: absolute; inset: 20px; display: grid; place-items: center; color: #a43c00; background: var(--surface-2); text-align: center; }
html.embed #search-frame { width: 100%; height: 100%; min-height: 0; max-width: none; margin: 0; }
@media (min-width: 768px) {
  :root { --frame-side: 68px; }
  #play-icon, #play-icon svg, #play-icon img, .frame-help img { width: 23px; height: 23px; }
}
@media (max-width: 600px) {
  #search-frame { width: calc(100% - 16px); margin: 16px auto; height: calc(100dvh - 32px); min-height: 420px; }
  .frame-header { padding: 0 10px; }
  .frame-header h1 { font-size: 20px; line-height: 26px; }
  #model-stats { font-size: 12px; }
  #model-stats th, #model-stats td { padding: 0 8px; }
  #model-stats thead th { font-size: 10px; }
  .model-stat { height: 34px; }
  .model-name { white-space: normal; }
  .endpoint-label { font-size: 12px; }
}

/* Wide is an independent frame; Blocky retains the original square controls. */
html.embed[data-layout="wide"] { overflow: hidden; }
#wide-presentation { display: flow-root; width: min(1280px, calc(100% - 32px)); margin: 24px auto; }
html.embed #wide-presentation { width: 100%; margin: 0; }
html[data-layout="wide"] #search-frame { display: block; width: 100%; height: auto; min-height: 0; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); }
html[data-layout="wide"] .frame-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto; align-items: stretch; gap: 0; width: 100%; height: auto; min-height: 0; }
html[data-layout="wide"] #viewer { width: 100%; height: auto; min-height: 100%; aspect-ratio: 1.83; }
html[data-layout="wide"] #scene-summary { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 24px; height: fit-content; min-width: 0; margin: 8px 0 8px 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--border) 50%, transparent); border-radius: 12px; background: #fff; }
html[data-layout="wide"] #model-stats { position: static; width: 100%; max-width: none; margin: 0; border: 1px solid var(--border); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: transparent; font-size: 12px; }
html[data-layout="wide"] #model-stats th, html[data-layout="wide"] #model-stats td { padding: 7px; border: 0; }
html[data-layout="wide"] #model-stats thead th { padding: 6px; border-bottom: 1px solid var(--border); font-size: 10px; }
html[data-layout="wide"] .model-mark { height: 10px; }
html[data-layout="wide"] .model-trophy { width: 10px; height: 10px; }
html[data-layout="wide"] #model-stats tr > :last-child { padding-inline-end: 14px; }
html[data-layout="wide"] .frame-header,
html[data-layout="wide"] .frame-timeline,
html[data-layout="wide"] .frame-end,
html[data-layout="wide"] #help-panel { display: none; }
/* CTF's compact button, sliding icons and inset playback progress. */
html[data-layout="wide"] .frame-play { position: relative; z-index: 6; margin-top: 16px; display: flex; align-items: center; justify-content: center; width: auto; min-width: 40px; height: 40px; padding: 8px 12px; appearance: none; overflow: hidden; border: 1px solid #09090b1f; border-radius: 6px; background: #09090b; color: #fafafa; cursor: pointer; transition: background-color .15s; }
html[data-layout="wide"] .frame-play:hover { background: #18181b; }
html[data-layout="wide"] .play-content { position: relative; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
html[data-layout="wide"] #play-label { display: inline; margin-top: -1px; font: 500 14px/20px ALTMistral, sans-serif; letter-spacing: .02em; white-space: nowrap; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
html[data-layout="wide"] #play-icon, html[data-layout="wide"] #play-icon-in { display: block; flex: none; width: 20px; height: 20px; transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
html[data-layout="wide"] #play-icon svg, html[data-layout="wide"] #play-icon img,
html[data-layout="wide"] #play-icon-in svg, html[data-layout="wide"] #play-icon-in img { display: block; width: 100%; height: 100%; }
html[data-layout="wide"] #play-icon-in { position: absolute; right: 0; opacity: 0; transform: translateX(28px); }
html[data-layout="wide"] .frame-play:is(:hover, :focus-visible) #play-icon-in { opacity: 1; transform: translateX(0); transition-delay: .1s; }
html[data-layout="wide"] .frame-play:is(:hover, :focus-visible) #play-icon { opacity: 0; transform: translateX(-28px); }
html[data-layout="wide"] .frame-play:is(:hover, :focus-visible) #play-label { transform: translateX(-24px); transition-delay: .075s; }
html[data-layout="wide"] .play-progress { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; background: #ffffff2e; opacity: 1; transition: opacity .45s ease; }
html[data-layout="wide"] .play-progress.is-done { opacity: 0; }
html[data-layout="wide"] .play-progress i { display: block; width: 100%; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; }
@media (max-width: 768px) {
  html[data-layout="wide"] #play-label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-layout="wide"] .frame-play #play-icon,
  html[data-layout="wide"] .frame-play #play-icon-in,
  html[data-layout="wide"] .frame-play #play-label,
  html[data-layout="wide"] .play-progress { transition: none; }
}
html[data-layout="wide"] #layout-debug { position: static; width: 100%; max-width: none; margin-top: 12px; padding: 16px; border-radius: 6px; background: #fff; }
html[data-layout="wide"] .debug-controls { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
html[data-layout="wide"] #scene-intro { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: none; pointer-events: auto; }
/* Match CTF v2 side heading sizes (1rem/1.25rem at a 16px root).
   This widget's html font-size is 14px, so rem would render smaller. */
#scene-intro h2 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: normal; color: #242433; }
#scene-intro .scene-intro-sub { margin: 1px 0 0; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: normal; color: #242433; opacity: .5; }
#scene-intro p:not(.scene-intro-sub) { margin: 8px 0 0; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -.01em; color: #242433; opacity: .75; }
#scene-intro .no-wrap { white-space: nowrap; }
/* Standalone card export: fit the host and allow normal scrolling when opened directly. */
html[data-card-only], html[data-card-only] body { height: auto; background: transparent; }
html[data-card-only] { overflow: visible; }
html[data-card-only] #wide-presentation { width: min(880px, calc(100% - 32px)); max-width: 880px; margin-inline: auto; padding: 24px 0; }
@media (max-width: 700px) {
  html[data-layout="blocky"] #layout-debug { top: 180px; }
  html[data-layout="wide"] .frame-body { grid-template-columns: minmax(0, 1fr); }
  html[data-layout="wide"] #scene-summary { margin: 8px 8px 0; gap: 20px; justify-content: flex-start; }
  html[data-layout="wide"] #viewer { min-height: clamp(280px, 80vw, 360px); }
}
@media (max-width: 600px) {
  html[data-layout="blocky"] #layout-debug { top: 164px; }
  html[data-layout="wide"] #layout-debug { right: 20px; top: 20px; }
}