/* PRAG Trinity production polish. Existing world backgrounds intentionally stay unchanged. */

html[data-mode="neutral"] { --faint: #7b8f86; }
html[data-mode="ai"] { --faint: #65919b; }
html[data-mode="strict"] { --faint: #746f64; }
html[data-mode="architect"] { --faint: #7f91ac; }

/* The ambient backdrop is deliberately only the Trinity triangle.
   Mode switching remains available through the three homepage cards. */
.mode-zone { display: none !important; }
#trinity-sigil .sig-line { opacity: .62; }
html[data-mode="neutral"] body:not(.has-results) #rain { opacity: 0 !important; }
html[data-mode="neutral"] body:not(.has-results).architect-signature-active #rain { opacity: 1 !important; }

.btn, .chip, .sec-row, .arch-tab { min-height: 44px; }
.wordmark { appearance: none; border: 0; background: transparent; color: inherit; padding: 6px 0; }
.wordmark:hover { text-decoration: none; }
.top-start { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.app-back { min-height: 44px; padding: .5rem .8rem; white-space: nowrap; }
.overlay-close.page-back {
  width: auto;
  min-width: 4.75rem;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-solid) 88%, transparent);
  font: 600 .78rem/1 var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.overlay-box:has(> .page-back) { padding-top: 4.25rem; }
.ref-head h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
html[data-mode="strict"] .ref-head h1 { font-family: var(--font-display); font-weight: 650; }

/* Cinematic vector Trinity. The articulated SVG is the visible character:
   every blink, glance, stride, dodge, flip and mode pose remains live. */
#trinity-stage { height: 310px; }
#trinity-holder {
  width: 185px; height: 300px; bottom: 7px;
  isolation: isolate;
  transition: filter .5s ease;
  filter: none;
}
#trinity-holder::before {
  content: '';
  position: absolute; z-index: -1; left: 14%; right: 14%; bottom: 1%; height: 16%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(127,216,189,.2), transparent 68%);
  filter: blur(11px); opacity: .8;
  transform: perspective(120px) rotateX(64deg);
  transition: background .45s ease, opacity .45s ease;
}
#trinity-holder > svg {
  opacity: 1; pointer-events: none; overflow: visible;
  transform-origin: 50% 96%;
  animation: trinity-vector-idle 5.2s ease-in-out infinite;
  shape-rendering: geometricPrecision;
  color-interpolation: sRGB;
  color-interpolation-filters: sRGB;
  filter: none;
}
#trinity-holder.trinity-mode-enter > svg { animation: trinity-vector-enter .72s cubic-bezier(.2,.85,.2,1); }
#trinity-holder[data-pose="run"] > svg { animation: trinity-vector-run .32s ease-in-out infinite alternate; }
#trinity-holder[data-pose="dodge"] > svg { animation: trinity-vector-dodge .42s cubic-bezier(.2,.9,.25,1); }
#trinity-holder[data-pose="tuck"] > svg { animation: trinity-vector-tuck .48s cubic-bezier(.3,.8,.2,1) both; }
html[data-mode="strict"] #trinity-holder {
  filter: none;
}
html[data-mode="strict"] #trinity-holder > svg { filter: none; }
html[data-mode="strict"] #trinity-holder::before { background: radial-gradient(ellipse, rgba(181,145,46,.25), transparent 68%); }
html[data-mode="ai"] #trinity-holder {
  filter: none;
}
html[data-mode="ai"] #trinity-holder > svg { filter: none; }
html[data-mode="ai"] #trinity-holder::before { background: radial-gradient(ellipse, rgba(47,212,232,.42), transparent 70%); opacity: 1; }
@keyframes trinity-vector-idle {
  0%,100% { transform: translateY(0) rotate(-.12deg); }
  45% { transform: translateY(-2.5px) rotate(.18deg); }
  72% { transform: translateY(-1px) rotate(0); }
}
@keyframes trinity-vector-enter {
  0% { transform: translateY(8px) scale(.97); opacity: .35; }
  58% { transform: translateY(-4px) scale(1.012); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes trinity-vector-run { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-5px) rotate(1deg); } }
@keyframes trinity-vector-dodge { 0% { transform: skewX(0); } 52% { transform: skewX(-5deg) translateY(-4px); } 100% { transform: skewX(0); } }
@keyframes trinity-vector-tuck { 0% { transform: scaleY(1); } 45% { transform: translateY(7px) scaleY(.93); } 100% { transform: translateY(-2px) scaleY(1); } }

.trinity-scanner {
  position: absolute; z-index: 8; left: calc(50% + 78px); bottom: 168px; width: 90px; height: 116px;
  opacity: 0; pointer-events: none; transform: translate(-50%, -28px) scale(.72) rotate(-3deg);
  transition: opacity .22s ease, transform .55s cubic-bezier(.2,.9,.25,1);
}
.scanner-document {
  position: absolute; inset: 0; padding: 20px 12px 10px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--acc) 65%, white 10%); border-radius: 4px;
  background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 20px var(--glow);
}
.scanner-document::before { content: ''; position: absolute; right: 0; top: 0; border-width: 0 16px 16px 0; border-style: solid; border-color: transparent var(--acc) transparent transparent; opacity: .48; }
.scanner-document b { position: absolute; left: 10px; top: 7px; font: 700 9px/1 var(--font-mono); letter-spacing: .13em; color: var(--acc); }
.scanner-document span { display: block; height: 3px; margin: 9px 0; border-radius: 2px; background: var(--line-strong); }
.scanner-document span:nth-child(2) { width: 72%; }
.scanner-document span:nth-child(3) { width: 86%; }
.scanner-beam { position: absolute; left: -7px; right: -7px; top: 12px; height: 2px; background: var(--acc); box-shadow: 0 0 8px var(--acc), 0 0 22px var(--glow); opacity: 0; }
.trinity-scanner em { position: absolute; left: 50%; bottom: -22px; width: 160px; transform: translateX(-50%); text-align: center; font: normal 8px/1 var(--font-mono); letter-spacing: .09em; color: var(--faint); text-transform: uppercase; }
.trinity-scanner.is-scanning { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
.trinity-scanner.is-scanning .scanner-beam { opacity: 1; animation: scanner-sweep 1s ease-in-out 2; }
.trinity-scanner.is-closing { opacity: 0; transform: translate(-50%, 12px) scale(.84); }
@keyframes scanner-sweep { 0% { transform: translateY(0); } 50% { transform: translateY(82px); } 100% { transform: translateY(0); } }

.oracle-modes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.oracle-modes .chip { min-height: 34px; padding: 5px 11px; font: 11px/1.2 var(--font-mono); }
.oracle-modes .oracle-fast { border-color: rgba(225,199,119,.48); color: #d9c27c; }
.oracle-modes .oracle-fast.is-on { color: #17130a; background: #e1c777; border-color: #e1c777; }
.ai-answer.is-streaming { white-space: pre-wrap; min-height: 84px; }
.coverage-warning { color: #ffb65c !important; }
.home-tools { position: relative; z-index: 3; display: flex; gap: 8px; justify-content: center; margin: 10px 0 0; }
.home-tools .chip { background: color-mix(in srgb, var(--panel-solid) 78%, transparent); backdrop-filter: blur(8px); }
.home-tools #workspace-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--mark-bg); color: var(--mark-ink); font: 10px/1 var(--font-mono); }
html:not([data-mode="neutral"]) .home-tools { display: none; }

.pathway-box, .workspace-box { width: min(760px, calc(100vw - 24px)); max-height: min(86vh, 820px); overflow: auto; }
.tool-kicker { display: block; margin-bottom: 8px; color: var(--acc); font: 10px/1 var(--font-mono); letter-spacing: .18em; }
.pathway-box h2, .workspace-box h2 { font-size: clamp(24px, 4vw, 38px); margin-bottom: 8px; }
.pathway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0; }
.pathway-grid label, .workspace-name { display: grid; gap: 7px; color: var(--dim); font: 11px/1.3 var(--font-mono); letter-spacing: .04em; }
.pathway-grid select, .pathway-grid input, .workspace-name input {
  min-height: 46px; width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel-solid); color: var(--ink); font: 14px/1.3 var(--font-body);
}
.pathway-wide { grid-column: 1 / -1; }
.pathway-actions, .workspace-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.workspace-name { margin: 20px 0 14px; }
.workspace-list { display: grid; gap: 10px; margin-top: 18px; }
.workspace-item { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.workspace-item-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.workspace-item h3 { font-size: 15px; line-height: 1.35; }
.workspace-item time { color: var(--faint); font: 9px/1 var(--font-mono); white-space: nowrap; }
.workspace-item p { margin: 8px 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
.workspace-item-meta { color: var(--acc); font: 9px/1 var(--font-mono); letter-spacing: .06em; }

/* Guided voice pack */
#tour-box { width: min(390px, calc(100vw - 24px)); }
#tour-media { display: grid; grid-template-columns: 6.75rem 1fr; gap: 14px; align-items: center; margin-bottom: 12px; }
.tour-avatar {
  width: 6.75rem; height: 7.75rem; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line-strong); background: #071115; position: relative;
  box-shadow: 0 10px 26px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035);
}
.tour-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 48%; }
.tour-guide-video { z-index: 1; background: #071115; }
.tour-photo-glass {
  position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.08), transparent 27%, transparent 72%, rgba(47,212,232,.06));
  box-shadow: inset 0 0 18px rgba(0,0,0,.2);
}
.tour-avatar[data-tour-mode="strict"] { border-color: rgba(201,161,48,.72); box-shadow: 0 0 18px rgba(201,161,48,.14), 0 10px 26px rgba(0,0,0,.3); }
.tour-avatar[data-tour-mode="ai"] { border-color: rgba(47,212,232,.72); box-shadow: 0 0 20px rgba(47,212,232,.22), 0 10px 26px rgba(0,0,0,.34); }
.tour-vector-avatar { width: 100%; height: 100%; display: block; overflow: visible; }
.tva-aura { fill: var(--acc); opacity: .22; filter: blur(3px); }
.tva-coat { fill: #15212b; stroke: #526678; stroke-width: .8; }
.tva-lapel { fill: #090e13; stroke: #7c94a5; stroke-width: .55; }
.tva-neck, .tva-face { fill: #d7aa88; stroke: #7c5946; stroke-width: .5; }
.tva-hair { fill: #1b2029; stroke: #596474; stroke-width: .65; }
.tva-shades { fill: #090b0e; stroke: #7fd8bd; stroke-width: .45; }
.tva-book { fill: #7a6122; stroke: #e1c777; stroke-width: .7; opacity: 0; transform-origin: 27px 54px; transition: opacity .25s, transform .25s; }
.tva-orb { fill: #63e2f2; stroke: #d9fbff; stroke-width: 1; opacity: 0; filter: drop-shadow(0 0 5px #2fd4e8); transition: opacity .25s; }
.tour-avatar[data-tour-mode="strict"] .tva-book { opacity: 1; transform: rotate(-4deg); }
.tour-avatar[data-tour-mode="ai"] .tva-orb { opacity: 1; animation: tour-orb 1.4s ease-in-out infinite alternate; }
.tour-avatar[data-tour-mode="ai"] .tva-shades { opacity: .18; }
@keyframes tour-orb { from { transform: scale(.82); opacity: .68; } to { transform: scale(1.08); opacity: 1; } }
.tour-avatar.speaking::after {
  content: ''; position: absolute; inset: auto 8px 7px; height: 3px; border-radius: 999px;
  background: var(--acc); box-shadow: 0 0 12px var(--glow); animation: voice-pulse .7s ease-in-out infinite alternate;
}
@keyframes voice-pulse { from { transform: scaleX(.25); opacity: .45; } to { transform: scaleX(1); opacity: 1; } }
.tour-audio { min-width: 0; }
.tour-audio-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tour-audio-row .btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 8px 10px; }
.tour-progress { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.tour-progress > i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .12s linear; }
.tour-voice-name { font: 10px/1.35 var(--font-mono); color: var(--faint); margin-top: 7px; }

/* Clear dialog motion, scroll lock and selected states. */
body.dialog-open { overflow: hidden; }
[aria-pressed="true"], [aria-selected="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.visually-hidden-file {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
.arch-consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px;
  color: var(--dim); font-size: 12.5px; line-height: 1.5;
}
.arch-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--acc); flex: none; }

/* Mobile-first repair: primary navigation becomes a reachable bottom dock. */
@media (max-width: 700px) {
  body.nav-docked { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #topbar { padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  #topbar .wordmark { font-size: 16px; }
  body.has-app-back .top-start { grid-column: 1 / -1; }
  body.has-app-back .top-start .wordmark { display: flex; font-size: .85rem; }
  body.has-app-back .top-mid { display: none; }
  .app-back { min-height: 44px; padding-inline: .65rem; }
  .top-mid { justify-self: end; min-width: 0; }
  .top-mid .badge { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
  .top-actions {
    grid-column: 1 / -1; position: static; width: 100%;
    z-index: 90; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    padding: 5px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  body.nav-docked .top-actions {
    position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto;
    z-index: 90; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    padding: 6px; border: 1px solid var(--line-strong); border-radius: 16px;
    background: color-mix(in srgb, var(--panel-solid) 92%, transparent); box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
  }
  .top-actions .btn { min-width: 0; min-height: 52px; padding: 5px 3px; gap: 3px; flex-direction: column; justify-content: center; font-size: 10px; text-align: center; }
  .top-actions .btn span { display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions .ic { width: 18px; height: 18px; }
  .mode-zone { display: none; }
  .hints-tri { display: none; }
  #hero { width: 100%; padding: 136px 14px 0; min-height: 0; overflow: visible; }
  #mode-head, #searchwrap, #results, .neutral-hints, #split-results { width: 100%; max-width: 100%; }
  #searchwrap { min-width: 0; }
  #search { min-width: 0; }
  #trinity-stage { height: 230px; }
  #trinity-holder { width: 135px; height: 215px; }
  .trinity-scanner { left: calc(50% + 56px); bottom: 122px; width: 70px; height: 90px; }
  .trinity-scanner.is-scanning .scanner-beam { animation-name: scanner-sweep-mobile; }
  #ai-toolbar { align-items: flex-start; gap: 8px; }
  .oracle-modes { width: 100%; }
  .home-tools { flex-wrap: wrap; width: 100%; }
  .home-tools .chip { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .pathway-grid { grid-template-columns: 1fr; }
  .pathway-wide { grid-column: auto; }
  #tour-box { padding: 16px; }
  #tour-media { grid-template-columns: 5.35rem 1fr; gap: 10px; }
  .tour-avatar { width: 5.35rem; height: 6.5rem; }
  #foot { padding-bottom: 18px; }

  #src-topbar { position: fixed; display: grid !important; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 14px !important; }
  #src-topbar .badge { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; text-align: center; }
  #src-topbar .btn { padding: 8px 10px; font-size: 12px; }
  #src-page { padding: 132px 14px 100px !important; }
  #src-page .ref-head h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .ref-filters { gap: 8px; }
  .ref-filters .chip { flex: 1 1 calc(50% - 8px); justify-content: center; }
}

@media (min-width: 701px) and (max-height: 820px) {
  #trinity-stage { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  #trinity-holder > svg, #trinity-holder[data-pose="run"] > svg, .tour-avatar.speaking::after, .tva-orb, .scanner-beam, .architect-signature-trail { animation: none !important; }
}
@keyframes scanner-sweep-mobile { 0% { transform: translateY(0); } 50% { transform: translateY(60px); } 100% { transform: translateY(0); } }

/* Trinity keeps one responsive scale in every world. Neutral-home rules
   below only make an additional reduction on exceptionally short phones. */
#trinity-holder {
  width: 8.25rem;
  height: 13.1rem;
  z-index: 5;
}

/* Mode ledges: Trinity leaves the document flow, lands halfway up the
   viewport, and remains at the relevant screen edge without moving content. */
#trinity-stage.trinity-ledged {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-height: 0;
  margin: 0 !important;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.trinity-ledged #floor,
.trinity-ledged #critters,
.trinity-ledged .architect-signature-trail,
.trinity-ledged .trinity-scanner { display: none; }
.trinity-ledged #trinity-holder {
  width: 8.25rem !important;
  height: 13.1rem !important;
  top: calc(50svh - 13.1rem);
  bottom: auto !important;
}
.trinity-ledged #trinity-holder::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -38%;
  bottom: -.35rem;
  width: 176%;
  height: .72rem;
  border: 1px solid color-mix(in srgb, var(--acc) 62%, var(--line-strong));
  border-top-color: color-mix(in srgb, var(--acc) 82%, white 8%);
  clip-path: polygon(4% 0, 96% 0, 100% 38%, 91% 100%, 9% 100%, 0 38%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 28%, var(--panel-solid)), var(--panel-solid));
  box-shadow: 0 0 14px var(--glow), 0 .7rem 1.4rem rgba(0,0,0,.34);
  opacity: .9;
}
.trinity-ledged #trinity-holder::before {
  bottom: -4%;
  height: 22%;
  opacity: 1;
}
.trinity-ledged #trinity-holder[data-pose="run"] > svg,
.trinity-ledged #trinity-holder[data-pose="tuck"] > svg {
  animation: trinity-vector-idle 5.2s ease-in-out infinite;
}

/* Architect signature: a live vector route, not an image overlay. */
.architect-signature-trail {
  position: absolute;
  z-index: 3;
  left: max(1rem, 5vw);
  right: max(1rem, 5vw);
  bottom: 3.15rem;
  height: min(10rem, 78%);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(225,199,119,.3));
}
.architect-signature-trail svg { width: 100%; height: 100%; overflow: visible; }
.architect-route {
  fill: none;
  stroke: #e1c777;
  stroke-width: .65;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}
.architect-route-echo { stroke: #63e2f2; opacity: .36; stroke-width: 2.2; filter: blur(3px); }
.architect-signature-trail circle { fill: var(--panel-solid); stroke: #e1c777; stroke-width: 1; vector-effect: non-scaling-stroke; }
.architect-signature-trail text {
  fill: #e1c777;
  font: 700 5px/1 var(--font-mono);
  letter-spacing: .2em;
  text-anchor: middle;
}
.architect-signature-trail .architect-mark {
  transform-origin: 50px 43px;
  opacity: 0;
}
.architect-signature-trail.is-active { animation: architect-trail-life 1.95s ease both; }
.architect-signature-trail.is-active .architect-route { animation: architect-route-draw 1.42s cubic-bezier(.2,.75,.2,1) .12s forwards; }
.architect-signature-trail.is-active .architect-route-echo { animation-duration: 1.05s; }
.architect-signature-trail.is-active circle { animation: architect-node-pulse .48s ease-out both; transform-box: fill-box; transform-origin: center; }
.architect-signature-trail.is-active circle:nth-of-type(2) { animation-delay: .55s; }
.architect-signature-trail.is-active circle:nth-of-type(3) { animation-delay: 1.08s; }
.architect-signature-trail.is-active .architect-mark { animation: architect-mark-lock .72s cubic-bezier(.18,.85,.2,1) 1.08s both; }
body.architect-signature-active .hint-card,
body.architect-signature-active .mode-zone,
body.architect-signature-active .wordmark { pointer-events: none; }
@keyframes architect-route-draw { to { stroke-dashoffset: 0; } }
@keyframes architect-trail-life { 0% { opacity: 0; } 8%,82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes architect-node-pulse { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: scale(2.2); } 100% { opacity: .8; transform: scale(1); } }
@keyframes architect-mark-lock {
  0% { opacity: 0; transform: scale(.25) rotate(-120deg); }
  66% { opacity: 1; transform: scale(1.22) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (min-width: 701px) {
  #trinity-holder { width: 10rem; height: 16rem; }
  .trinity-ledged #trinity-holder { width: 10rem !important; height: 16rem !important; top: calc(50svh - 16rem); }
  .architect-signature-trail { bottom: .75rem; height: min(13rem, 94%); }
}

/* Single-screen neutral homepage.
   Results and working modes retain natural document scrolling; the landing
   state alone is composed as one viewport so every primary choice and
   Trinity are visible without a downward scroll. */
html[data-mode="neutral"] body:not(.has-results) {
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  padding-bottom: 0 !important;
}
html[data-mode="neutral"] body:not(.has-results) #stage {
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(10rem, 24svh, 13.5rem);
}
html[data-mode="neutral"] body:not(.has-results) #hero {
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: 3.75rem .875rem 0;
}
html[data-mode="neutral"] body:not(.has-results) #mode-head {
  margin-bottom: .625rem;
}
html[data-mode="neutral"] body:not(.has-results) #mode-title {
  font-size: clamp(1.45rem, 7vw, 1.8rem);
  line-height: 1.05;
}
html[data-mode="neutral"] body:not(.has-results) #mode-sub {
  max-width: 38rem;
  margin-top: .35rem;
  font-size: .78rem;
  line-height: 1.3;
}
html[data-mode="neutral"] body:not(.has-results) #searchwrap {
  padding: .35rem .45rem .35rem .875rem;
}
html[data-mode="neutral"] body:not(.has-results) #search {
  padding: .65rem 0;
}
html[data-mode="neutral"] body:not(.has-results) .home-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
  width: 100%;
  margin-top: .5rem;
}
html[data-mode="neutral"] body:not(.has-results) .home-tools .chip {
  width: 100%;
  min-width: 0;
  padding: .35rem .45rem;
  font-size: .7rem;
  line-height: 1.2;
  justify-content: center;
}
html[data-mode="neutral"] body:not(.has-results) .neutral-hints {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  margin-top: .625rem;
}
html[data-mode="neutral"] body:not(.has-results) .hint-card,
html[data-mode="neutral"] body:not(.has-results) .hint-arch {
  grid-column: auto;
  width: auto;
  min-width: 0;
  min-height: 4.65rem;
  padding: .65rem .5rem;
  gap: .25rem;
  justify-self: stretch;
}
html[data-mode="neutral"] body:not(.has-results) .hint-kicker {
  font-size: .48rem;
  letter-spacing: .12em;
  white-space: nowrap;
}
html[data-mode="neutral"] body:not(.has-results) .hint-name {
  font-size: .76rem;
  line-height: 1.15;
}
html[data-mode="neutral"] body:not(.has-results) .hint-desc {
  display: none;
}
html[data-mode="neutral"] body:not(.has-results) #trinity-stage {
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: visible;
}
html[data-mode="neutral"] body:not(.has-results) #trinity-holder {
  width: 8.25rem;
  height: 13.1rem;
  bottom: 4.2rem;
}
html[data-mode="neutral"] body:not(.has-results) #floor {
  bottom: 4.2rem;
}
html[data-mode="neutral"] body:not(.has-results) #foot {
  display: none;
}
html[data-mode="neutral"] body:not(.has-results) #trinity-sigil {
  top: 58%;
  width: min(25rem, 92vw);
}

@media (max-width: 700px) {
  html[data-mode="neutral"] body:not(.has-results) #topbar {
    padding: .45rem .75rem;
    grid-template-columns: 1fr auto;
  }
  html[data-mode="neutral"] body:not(.has-results) #topbar .wordmark {
    font-size: .9rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .top-mid .eu-badge {
    display: none;
  }
  html[data-mode="neutral"] body:not(.has-results) .top-mid .badge {
    max-width: 11.5rem;
    padding: .28rem .55rem;
    font-size: .62rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .top-actions,
  html[data-mode="neutral"] body:not(.has-results).nav-docked .top-actions {
    position: fixed;
    left: .55rem;
    right: .55rem;
    bottom: calc(.45rem + env(safe-area-inset-bottom));
    width: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .25rem;
    padding: .3rem;
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
  }
  html[data-mode="neutral"] body:not(.has-results) .top-actions .btn {
    min-height: 3rem;
    padding: .25rem .15rem;
    font-size: .58rem;
  }
}

@media (max-width: 350px) {
  html[data-mode="neutral"] body:not(.has-results) #topbar .wordmark {
    font-size: .78rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .top-mid .badge {
    max-width: 10rem;
  }
}

@media (max-width: 700px) and (max-height: 600px) {
  html[data-mode="neutral"] body:not(.has-results) #stage {
    grid-template-rows: minmax(0, 1fr) 10.5rem;
  }
  html[data-mode="neutral"] body:not(.has-results) #trinity-holder {
    width: 6.75rem;
    height: 10.8rem;
  }
}

@media (min-width: 701px) {
  html[data-mode="neutral"] body:not(.has-results) #stage {
    grid-template-rows: minmax(0, 1fr) clamp(11.5rem, 29svh, 15rem) auto;
  }
  html[data-mode="neutral"] body:not(.has-results) #hero {
    padding: 4.15rem 5.5rem 0;
  }
  html[data-mode="neutral"] body:not(.has-results) #mode-title {
    font-size: clamp(1.65rem, 2.5vw, 2.15rem);
  }
  html[data-mode="neutral"] body:not(.has-results) #mode-sub {
    font-size: .82rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .home-tools {
    display: flex;
    width: auto;
  }
  html[data-mode="neutral"] body:not(.has-results) .home-tools .chip {
    width: auto;
    padding-inline: .85rem;
    font-size: .75rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .neutral-hints {
    width: min(51rem, 100%);
    gap: .7rem;
    margin-top: .75rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .hint-card,
  html[data-mode="neutral"] body:not(.has-results) .hint-arch {
    min-height: 5.4rem;
    padding: .75rem .9rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .hint-name {
    font-size: .9rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .hint-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .68rem;
    line-height: 1.35;
  }
  html[data-mode="neutral"] body:not(.has-results) #trinity-holder {
    width: 10rem;
    height: 16rem;
    bottom: .4rem;
  }
  html[data-mode="neutral"] body:not(.has-results) #floor {
    bottom: .45rem;
  }
  html[data-mode="neutral"] body:not(.has-results) #foot {
    display: flex;
    min-height: 2rem;
    padding: .4rem 5.5rem .55rem;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
  }
  html[data-mode="neutral"] body:not(.has-results) #foot .foot-dim {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 701px) and (max-height: 700px) {
  html[data-mode="neutral"] body:not(.has-results) #stage {
    grid-template-rows: minmax(0, 1fr) 10rem auto;
  }
  html[data-mode="neutral"] body:not(.has-results) #topbar {
    padding-block: .5rem;
  }
  html[data-mode="neutral"] body:not(.has-results) #hero {
    padding-top: 3.55rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .neutral-hints {
    margin-top: .55rem;
  }
  html[data-mode="neutral"] body:not(.has-results) .hint-card,
  html[data-mode="neutral"] body:not(.has-results) .hint-arch {
    min-height: 4.55rem;
    padding-block: .55rem;
  }
  html[data-mode="neutral"] body:not(.has-results) #trinity-holder {
    width: 7.4rem;
    height: 11.7rem;
  }
}