:root {
  --cobalt-950: #06183d;
  --cobalt-900: #082354;
  --cobalt-800: #0a3477;
  --cobalt-700: #0c438f;
  --paper: #ece7d7;
  --paper-deep: #d9d1bc;
  --ink: #10234a;
  --amber: #ffb957;
  --amber-hot: #ffd88e;
  --mint: #75e5c4;
  --mint-deep: #31b99d;
  --red: #e9785f;
  --serif: "Iowan Old Style", "KoPub Batang", "Nanum Myeongjo", "Batang", Georgia, serif;
  --sans: "Aptos", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; max-width: 100%; overflow-x: clip; color-scheme: dark; }
body { margin: 0; font-family: var(--sans); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.visitor-body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 84% 12%, rgba(69, 125, 198, .42), transparent 23rem),
    linear-gradient(145deg, var(--cobalt-900), var(--cobalt-950) 70%);
  color: #f7f1df;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .13;
  mix-blend-mode: soft-light;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 2px, rgba(255,255,255,.11) 2.5px 3px),
    repeating-linear-gradient(87deg, transparent 0 7px, rgba(3, 14, 42, .14) 8px 9px);
  background-size: 17px 19px, 29px 31px;
}

.visitor-header {
  height: 84px;
  padding: 0 clamp(20px, 3vw, 52px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(221, 235, 248, .18);
  position: relative;
  z-index: 12;
}

.wordmark { display: inline-flex; flex-direction: column; width: fit-content; }
.wordmark-kicker { font: 600 9px/1 var(--mono); letter-spacing: .22em; color: var(--mint); margin-bottom: 4px; }
.wordmark-title { font: 600 26px/1.1 var(--serif); letter-spacing: -.04em; }
.header-weather { display: flex; gap: 10px; align-items: center; font: 600 10px/1 var(--mono); letter-spacing: .12em; color: #b9c8e3; }
.weather-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(117,229,196,.10), 0 0 18px var(--mint); animation: breathe 2.8s ease-in-out infinite; }
.header-divider { width: 1px; height: 14px; background: rgba(255,255,255,.22); }
.ledger-link { justify-self: end; border-bottom: 1px solid rgba(255,255,255,.4); padding: 7px 0; font-size: 12px; letter-spacing: .06em; transition: color .2s, border-color .2s; }
.ledger-link:hover { color: var(--mint); border-color: var(--mint); }

.visitor-shell {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(650px, 1fr);
  gap: clamp(20px, 2.8vw, 46px);
  width: min(1580px, calc(100% - clamp(32px, 6vw, 96px)));
  margin: 0 auto;
  padding: clamp(25px, 3vw, 48px) 0 26px;
}

.dispatch-card {
  align-self: start;
  min-height: 620px;
  padding: 28px 24px 20px;
  background: var(--paper);
  color: var(--ink);
  position: relative;
  box-shadow: 0 24px 50px rgba(0, 7, 27, .32), 8px 9px 0 rgba(7, 22, 55, .5);
  transform: rotate(-.35deg);
  clip-path: polygon(0 0, 96% 0, 100% 3%, 100% 100%, 4% 100%, 0 97%);
}

.dispatch-card::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(16,35,74,.19); }
.dispatch-card::after { content: ""; position: absolute; top: 74px; right: -8px; width: 44px; height: 20px; background: rgba(255, 188, 87, .72); transform: rotate(7deg); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.dispatch-index { position: relative; font: 600 9px/1 var(--mono); letter-spacing: .16em; border-bottom: 1px solid rgba(16,35,74,.25); padding-bottom: 13px; }
.eyebrow { margin: 25px 0 8px; font: 700 10px/1.2 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: #1f5e79; }
.eyebrow.mint { color: var(--mint); margin: 0 0 7px; }
.dispatch-card h1 { margin: 0; font: 700 clamp(27px, 2.3vw, 37px)/1.17 var(--serif); letter-spacing: -.055em; }
.mission-copy { margin: 20px 0 24px; font-size: 13px; line-height: 1.75; color: #394867; word-break: keep-all; }
.mission-copy strong { color: #0b3d77; }
.world-meter { border-top: 1px solid rgba(16,35,74,.2); border-bottom: 1px solid rgba(16,35,74,.2); padding: 18px 0 14px; }
.meter-heading { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; margin-bottom: 7px; }
.meter-heading strong { font: 700 18px/1 var(--serif); }
.meter-heading.muted { margin-top: 13px; }
.meter-track { height: 4px; background: rgba(16,35,74,.14); overflow: hidden; }
.meter-track span { display: block; height: 100%; width: 40%; background: #d68a2c; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.meter-track.agreement span { width: 60%; background: #3a8f85; }
.choice-stamp { margin: 22px 0 14px; border: 1px dashed rgba(16,35,74,.43); padding: 13px; display: grid; grid-template-columns: 1fr auto; align-items: end; transform: rotate(.4deg); }
.choice-stamp span { font: 700 9px/1 var(--mono); letter-spacing: .12em; }
.choice-stamp strong { font: 700 23px/1 var(--serif); color: #d17924; }
.choice-stamp small { grid-column: 1 / -1; margin-top: 7px; color: #5b6680; }
.choice-stamp.committed { border-style: solid; background: rgba(12, 67, 143, .08); }
.text-action { position: relative; z-index: 1; width: 100%; margin-top: 6px; background: none; border: 0; border-bottom: 1px solid rgba(16,35,74,.3); padding: 11px 0; display: flex; justify-content: space-between; font-weight: 700; font-size: 12px; cursor: pointer; }
.text-action:hover { color: #0c5a89; border-color: #0c5a89; }

.district-panel { min-width: 0; }
.map-caption { min-height: 68px; display: flex; align-items: end; justify-content: space-between; gap: 25px; padding: 0 5px 13px; }
.map-caption h2 { margin: 0; font: 500 clamp(18px, 1.7vw, 25px)/1.2 var(--serif); letter-spacing: -.025em; }
.last-change { margin: 0; max-width: 390px; text-align: right; font-size: 11px; line-height: 1.6; color: #a8bada; }

.district-map {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(112deg, rgba(255,255,255,.025), transparent 28%),
    repeating-linear-gradient(2deg, transparent 0 28px, rgba(193,219,238,.035) 29px 30px),
    #092b68;
  border: 1px solid rgba(190, 220, 239, .2);
  border-radius: 3px 3px 22px 3px;
  box-shadow: inset 0 0 80px rgba(0,9,40,.45), 0 28px 55px rgba(0,6,25,.25);
  perspective: 900px;
}

.district-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 13; box-shadow: inset 0 0 0 8px rgba(4,25,62,.18), inset 0 0 80px rgba(3,14,42,.25); }
.map-moon { position: absolute; right: 8%; top: 7%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 38% 37%, rgba(255,240,190,.34), rgba(115,168,217,.1) 35%, transparent 68%); filter: blur(.2px); }
.map-label { position: absolute; font: 600 8px/1 var(--mono); letter-spacing: .16em; color: rgba(194,220,241,.55); }
.north-label { top: 24px; left: 25px; writing-mode: vertical-rl; }
.paper-road { position: absolute; z-index: 0; height: 47px; background: #0b3777; border: 1px solid rgba(153,197,224,.12); box-shadow: inset 0 9px 18px rgba(5,24,61,.25); transform-origin: center; }
.paper-road::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(225,236,221,.16); }
.road-one { width: 78%; left: 10%; top: 52%; transform: rotate(-8deg); }
.road-two { width: 58%; left: 5%; top: 43%; transform: rotate(55deg); }
.road-three { width: 54%; right: 3%; top: 41%; transform: rotate(-62deg); }
.festival-wave { position: absolute; z-index: 1; left: 49%; top: 53%; width: 120px; height: 55px; border: 1px solid rgba(117,229,196,.33); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; animation: wave 4s ease-out infinite; }
.wave-two { animation-delay: 2s; }

.place { position: absolute; z-index: 2; border: 0; background: none; color: white; cursor: pointer; text-align: left; padding: 0; filter: drop-shadow(0 16px 14px rgba(0,8,33,.38)); transition: filter .2s, transform .25s; }
.place:hover, .place:focus-visible { z-index: 4; outline: none; filter: drop-shadow(0 20px 20px rgba(0,8,33,.55)) brightness(1.1); transform: translateY(-4px); }
.place-workshop { width: 150px; height: 126px; left: 10%; top: 18%; }
.place-greenhouse { width: 175px; height: 128px; right: 9%; top: 13%; }
.place-plaza { width: 200px; height: 126px; left: 41%; top: 40%; }
.place-archive { width: 160px; height: 130px; left: 11%; bottom: 9%; }
.building-face { display: block; width: 94px; height: 60px; position: absolute; left: 25px; top: 35px; transform: skewY(-3deg); background: linear-gradient(145deg, #164f91, #0a2d69); border: 1px solid rgba(184,215,235,.35); box-shadow: inset -16px -13px 25px rgba(3,18,48,.3); }
.building-face::after { content: ""; position: absolute; right: -18px; top: 8px; width: 17px; height: 53px; background: #072657; transform: skewY(-39deg); transform-origin: left top; border-right: 1px solid rgba(164,201,229,.2); }
.building-face i { display: inline-block; width: 16px; height: 19px; margin: 15px 5px 0 12px; background: var(--amber); box-shadow: 0 0 15px rgba(255,185,87,.75), inset 0 0 0 3px #825220; }
.roof { position: absolute; left: 15px; top: 18px; width: 112px; height: 38px; background: #0d3977; clip-path: polygon(10% 55%, 54% 0, 100% 62%, 91% 100%, 51% 43%, 17% 100%); border-top: 1px solid rgba(255,255,255,.3); }
.place-copy { position: absolute; left: 21px; bottom: 0; display: flex; flex-direction: column; text-shadow: 0 2px 5px #001238; white-space: nowrap; }
.place-copy b { font: 700 13px/1.2 var(--serif); letter-spacing: -.02em; }
.place-copy small { margin-top: 3px; font-size: 8px; color: #abc0e2; max-width: 145px; overflow: hidden; text-overflow: ellipsis; }
.greenhouse-roof { position: absolute; left: 20px; top: 13px; width: 120px; height: 65px; transform: skewX(-11deg); background: linear-gradient(135deg, rgba(117,229,196,.58), rgba(29,102,132,.55)); border: 2px solid #569c9c; clip-path: polygon(14% 22%, 86% 0, 100% 70%, 8% 100%, 0 44%); }
.greenhouse-roof i { display: block; position: absolute; width: 2px; height: 100%; top: 0; background: rgba(222,255,228,.4); transform: rotate(15deg); }
.greenhouse-roof i:nth-child(1) { left: 25%; }.greenhouse-roof i:nth-child(2) { left: 52%; }.greenhouse-roof i:nth-child(3) { left: 78%; }
.place-greenhouse .building-face { width: 112px; height: 36px; top: 64px; left: 25px; background: #0c4772; }
.place-greenhouse .building-face i { height: 11px; width: 61px; margin: 9px 0 0 22px; background: var(--mint); box-shadow: 0 0 17px rgba(117,229,196,.65); }
.plaza-stage { position: absolute; left: 20px; top: 25px; width: 145px; height: 64px; background: linear-gradient(160deg, #1c5c9c, #08285e); clip-path: polygon(20% 20%, 86% 0, 100% 67%, 49% 100%, 0 65%); border-top: 1px solid rgba(255,255,255,.4); }
.plaza-stage::before { content: ""; position: absolute; left: 30px; top: 15px; width: 80px; height: 24px; border: 2px solid rgba(180,212,233,.47); border-bottom: 0; }
.plaza-stage i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #466491; top: 12px; }
.plaza-stage i:nth-child(1) { left: 25px; }.plaza-stage i:nth-child(2) { left: 56px; }.plaza-stage i:nth-child(3) { left: 86px; }.plaza-stage i:nth-child(4) { left: 116px; }
.place.powered .plaza-stage i, .place.powered .building-face i { background: var(--amber-hot); box-shadow: 0 0 14px var(--amber); }
.archive-roof { background: #183d70; }
.place-archive .building-face { background: linear-gradient(145deg, #e3d8b9, #9aa1a2); }
.place-archive .building-face::after { background: #45617a; }

.resident { position: absolute; z-index: 7; display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 4px; cursor: pointer; transition: left .9s cubic-bezier(.22,.8,.2,1), top .9s cubic-bezier(.22,.8,.2,1), transform .22s; }
.resident:hover, .resident:focus-visible { transform: translateY(-5px) scale(1.04); outline: none; z-index: 10; }
.resident-avatar { width: 35px; height: 41px; display: grid; place-items: center; color: var(--cobalt-950); font: 800 12px/1 var(--serif); background: var(--resident-color, var(--amber)); clip-path: polygon(50% 0, 87% 18%, 100% 65%, 66% 100%, 28% 92%, 0 56%, 11% 18%); filter: drop-shadow(0 5px 5px rgba(1,10,36,.45)); }
.resident-avatar::after { content: ""; position: absolute; width: 23px; height: 10px; border-radius: 50%; background: rgba(1,15,45,.24); transform: translateY(31px); z-index: -1; }
.resident-tag { padding: 5px 8px 5px 7px; display: flex; flex-direction: column; color: #eaf2ed; background: rgba(3,19,53,.86); border-left: 2px solid var(--resident-color, var(--amber)); box-shadow: 0 4px 12px rgba(0,8,31,.28); }
.resident-tag b { font: 700 10px/1.1 var(--serif); }.resident-tag small { margin-top: 2px; font-size: 7px; color: #a9bcdb; white-space: nowrap; }
.resident-mina { --resident-color: #ffbe62; }.resident-theo { --resident-color: #84dbc5; }.resident-sol { --resident-color: #a2de87; }.resident-naru { --resident-color: #f0a6aa; }.resident-yul { --resident-color: #9ec7ff; }
.resident-mina.at-plaza { left: 50%; top: 55%; }.resident-theo.at-plaza { left: 46%; top: 51%; }.resident-sol.at-plaza { left: 54%; top: 58%; }.resident-naru.at-plaza { left: 43%; top: 59%; }.resident-yul.at-plaza { left: 58%; top: 48%; }
.resident-mina.at-greenhouse { left: 76%; top: 28%; }.resident-theo.at-greenhouse { left: 69%; top: 31%; }.resident-sol.at-greenhouse { left: 82%; top: 25%; }.resident-naru.at-greenhouse { left: 72%; top: 22%; }.resident-yul.at-greenhouse { left: 80%; top: 36%; }
.resident-mina.at-workshop { left: 24%; top: 31%; }.resident-theo.at-workshop { left: 18%; top: 36%; }.resident-sol.at-workshop { left: 29%; top: 27%; }.resident-naru.at-workshop { left: 14%; top: 26%; }.resident-yul.at-workshop { left: 31%; top: 39%; }
.resident-mina.at-archive { left: 26%; top: 72%; }.resident-theo.at-archive { left: 18%; top: 68%; }.resident-sol.at-archive { left: 29%; top: 77%; }.resident-naru.at-archive { left: 17%; top: 78%; }.resident-yul.at-archive { left: 32%; top: 68%; }

.map-legend { position: absolute; z-index: 5; right: 18px; bottom: 16px; display: flex; gap: 13px; padding: 8px 10px; background: rgba(2,18,51,.68); font: 600 7px/1 var(--mono); letter-spacing: .06em; color: #a9bedc; }
.map-legend span { display: inline-flex; align-items: center; gap: 4px; }.map-legend i { width: 7px; height: 7px; display: inline-block; }
.legend-resident { background: var(--amber); border-radius: 50%; }.legend-event { border: 1px solid var(--mint); border-radius: 50%; }.legend-window { background: var(--amber); box-shadow: 0 0 5px var(--amber); }

.action-ribbon { min-height: 83px; display: grid; grid-template-columns: minmax(130px,.75fr) 1fr 1fr 90px; background: #e7e1d0; color: var(--ink); box-shadow: 10px 12px 0 rgba(3,16,47,.5); border-top: 4px solid #f6c86a; }
.ribbon-intro { padding: 15px 18px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(16,35,74,.2); }
.ribbon-intro span { font: 700 8px/1 var(--mono); letter-spacing: .1em; color: #68420d; }.ribbon-intro strong { margin-top: 6px; font: 700 14px/1.15 var(--serif); }
.choice-button { border: 0; border-right: 1px solid rgba(16,35,74,.2); background: transparent; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; text-align: left; transition: background .2s, color .2s; }
.choice-button:hover:not(:disabled), .choice-button:focus-visible:not(:disabled) { background: var(--cobalt-800); color: white; outline: none; }
.choice-key { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 700 12px/1 var(--serif); }
.choice-button b { display: block; font-size: 12px; }.choice-button small { display: block; margin-top: 4px; font-size: 8px; opacity: .68; }
.choice-button:disabled { cursor: default; opacity: .45; }.choice-button.selected { opacity: 1; background: #154477; color: white; }
.time-button { border: 0; background: #d3cbb7; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 7px; }
.time-button:hover { background: var(--mint); color: var(--cobalt-950); }.time-button span { font: 700 19px/1 var(--serif); }.time-button small { font-size: 7px; line-height: 1.25; text-align: left; }

.conversation-drawer { position: absolute; z-index: 15; top: 0; right: 0; bottom: 0; width: min(390px, 100%); padding: 29px 25px 22px; background: #ebe5d4; color: var(--ink); box-shadow: -24px 0 50px rgba(0,10,38,.45); transform: translateX(103%); visibility: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), visibility .4s; display: flex; flex-direction: column; }
.conversation-drawer.open { transform: translateX(0); visibility: visible; }
.drawer-close { position: absolute; top: 14px; right: 14px; border: 1px solid rgba(16,35,74,.3); width: 31px; height: 31px; background: transparent; border-radius: 50%; cursor: pointer; font-size: 19px; }
.conversation-person { display: flex; align-items: center; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid rgba(16,35,74,.18); }
.large-avatar { width: 55px; height: 63px; display: grid; place-items: center; background: var(--amber); clip-path: polygon(50% 0, 90% 20%, 100% 65%, 65% 100%, 24% 92%, 0 55%, 12% 17%); font: 800 20px/1 var(--serif); }
.conversation-person .eyebrow { margin: 0 0 4px; }.conversation-person h3 { margin: 0; font: 700 28px/1 var(--serif); }
.provider-route { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; font: 700 8px/1 var(--mono); letter-spacing: .1em; border-bottom: 1px solid rgba(16,35,74,.14); }
.provider-route select { max-width: 170px; color: var(--ink); border: 0; background: rgba(16,35,74,.07); padding: 6px 8px; font: 700 9px/1 var(--mono); }
.speech-history { flex: 1; min-height: 100px; max-height: 240px; overflow-y: auto; padding: 20px 3px; }
.resident-speech, .visitor-speech { margin: 0 0 12px; padding: 12px 13px; font-size: 12px; line-height: 1.7; }
.resident-speech { background: white; border-left: 3px solid #2e9587; }.visitor-speech { margin-left: 25px; background: rgba(13,61,119,.1); }
.dialogue-form { border-top: 1px solid rgba(16,35,74,.2); padding-top: 15px; }
.dialogue-form label { font: 700 9px/1 var(--mono); letter-spacing: .08em; }
.dialogue-form textarea { width: 100%; margin-top: 8px; resize: none; border: 1px solid rgba(16,35,74,.24); background: rgba(255,255,255,.58); color: var(--ink); padding: 11px; line-height: 1.5; outline: none; }
.dialogue-form textarea:focus { border-color: #1b7a79; box-shadow: 0 0 0 3px rgba(49,185,157,.12); }
.dialogue-form button { width: 100%; border: 0; background: var(--cobalt-800); color: white; padding: 12px; display: flex; justify-content: space-between; cursor: pointer; font-weight: 700; }
.dialogue-form button:hover { background: #0d5c85; }.dialogue-form button:disabled { opacity: .55; cursor: wait; }
.dialogue-note { margin: 10px 0 0; font-size: 8px; line-height: 1.4; color: #697288; }

.visitor-footer { display: flex; justify-content: space-between; gap: 20px; padding: 10px clamp(20px, 3vw, 52px) 18px; font: 600 8px/1.3 var(--mono); letter-spacing: .08em; color: #718aad; }
.entry-sheet { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3,15,44,.82); backdrop-filter: blur(8px); transition: opacity .45s, visibility .45s; }
.entry-sheet.hidden { opacity: 0; visibility: hidden; }
.entry-card { width: min(580px, 100%); background: var(--paper); color: var(--ink); padding: clamp(28px, 5vw, 55px); position: relative; box-shadow: 18px 20px 0 rgba(0,8,29,.45); clip-path: polygon(0 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%); }
.entry-card::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(16,35,74,.17); pointer-events: none; }
.entry-number { position: relative; margin: 0 0 23px; font: 700 9px/1 var(--mono); letter-spacing: .14em; color: #377a79; }
.entry-card h2 { position: relative; margin: 0; font: 700 clamp(31px, 5vw, 48px)/1.16 var(--serif); letter-spacing: -.055em; }.entry-card h2 em { color: #0e5681; font-style: normal; }
.entry-card > p:not(.entry-number) { position: relative; margin: 20px 0; color: #536078; line-height: 1.7; font-size: 13px; }
.entry-rules { position: relative; list-style: none; padding: 0; margin: 25px 0; border-top: 1px solid rgba(16,35,74,.18); }
.entry-rules li { display: flex; gap: 13px; border-bottom: 1px solid rgba(16,35,74,.15); padding: 11px 0; font-size: 11px; }.entry-rules span { font: 700 9px/1 var(--mono); color: #2a8a7d; }
.entry-card button { position: relative; width: 100%; border: 0; background: var(--cobalt-800); color: white; padding: 15px 18px; display: flex; justify-content: space-between; cursor: pointer; font-weight: 700; }.entry-card button:hover { background: #0e5b80; }
.entry-card > small { position: relative; display: block; margin-top: 10px; font-size: 8px; color: #737b8b; }
.toast { position: fixed; z-index: 40; left: 50%; bottom: 25px; transform: translate(-50%, 30px); opacity: 0; visibility: hidden; width: min(460px, calc(100% - 30px)); padding: 12px 17px; background: #071c49; border: 1px solid rgba(117,229,196,.5); box-shadow: 0 12px 25px rgba(0,0,0,.35); color: white; font-size: 11px; line-height: 1.5; transition: .25s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* Operator forensic console */
.operator-body { min-height: 100vh; background: #20211d; color: #ddd9cc; font-family: var(--sans); }
.operator-header { min-height: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; padding: 10px 22px; border-bottom: 1px solid #48483f; background: #272822; position: sticky; top: 0; z-index: 20; }
.operator-brand { display: flex; align-items: center; gap: 12px; }.operator-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #8b8d80; font: 700 10px/1 var(--mono); }.operator-brand div { display: flex; flex-direction: column; }.operator-brand small, .console-section-title small, .state-block small { font: 600 8px/1.2 var(--mono); letter-spacing: .13em; color: #8e9084; }.operator-brand strong { margin-top: 3px; font: 650 18px/1 var(--serif); }
.operator-health { display: flex; align-items: center; gap: 8px; font: 600 8px/1 var(--mono); letter-spacing: .08em; color: #939588; border: 1px solid #46483f; padding: 8px 11px; }.operator-health strong { color: #77c49b; }.health-dot { width: 7px; height: 7px; background: #69c994; box-shadow: 0 0 9px #69c994; }.operator-health.bad strong { color: #e8895c; }.operator-health.bad .health-dot { background: #e8895c; box-shadow: 0 0 9px #e8895c; }
.operator-actions { justify-self: end; display: flex; gap: 7px; align-items: center; }.operator-actions button, .operator-actions a { border: 1px solid #55574d; background: transparent; color: #cac7bc; padding: 9px 11px; font: 600 8px/1 var(--mono); letter-spacing: .07em; cursor: pointer; }.operator-actions button:hover, .operator-actions a:hover { border-color: #8d9082; color: white; }.operator-actions .primary-console { background: #4b735d; border-color: #679879; color: white; }
.forensic-grid { display: grid; grid-template-columns: minmax(250px, 300px) minmax(510px, 1fr) minmax(250px, 300px); min-height: calc(100vh - 70px); }
.event-rail, .state-rail { min-width: 0; background: #272822; }.event-rail { border-right: 1px solid #46473f; }.state-rail { border-left: 1px solid #46473f; padding-bottom: 30px; }
.console-section-title { min-height: 68px; display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid #42433b; }.console-section-title > span:first-child { color: #8b8d80; font: 600 9px/1 var(--mono); }.console-section-title div { flex: 1; }.console-section-title h1, .console-section-title h2 { margin: 3px 0 0; font: 600 18px/1 var(--serif); }.console-section-title > b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #383a33; font: 600 9px/1 var(--mono); color: #9d9f93; }
.event-filters { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid #42433b; }.event-filters button { padding: 9px 3px; background: transparent; border: 0; border-right: 1px solid #393a34; color: #818378; font: 600 7px/1 var(--mono); cursor: pointer; }.event-filters button.active { color: #77c49b; background: #30332d; box-shadow: inset 0 -2px #77c49b; }
.event-list { max-height: calc(100vh - 171px); overflow-y: auto; }.event-row { width: 100%; min-height: 76px; display: grid; grid-template-columns: 31px 1fr; gap: 6px; background: transparent; border: 0; border-bottom: 1px solid #3a3b35; color: #c9c6bc; text-align: left; padding: 11px 14px 10px 9px; cursor: pointer; position: relative; }.event-row:hover { background: #2e302a; }.event-row.active { background: #34372f; box-shadow: inset 3px 0 #71c493; }.event-row.blocked { box-shadow: inset 2px 0 #df8e59; }.event-seq { align-self: start; padding-top: 2px; font: 600 8px/1 var(--mono); color: #74766d; text-align: center; }.event-main { min-width: 0; }.event-main strong { display: block; font: 600 10px/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.event-main p { margin: 6px 0 5px; font-size: 9px; line-height: 1.3; color: #97998f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.event-main small { display: flex; justify-content: space-between; font: 500 7px/1 var(--mono); color: #696b63; }.event-status { color: #72c091; }.event-status.blocked { color: #e59360; }
.evidence-board { min-width: 0; padding-bottom: 35px; }.evidence-title { background: #24251f; }.event-id-chip { padding: 6px 8px; border: 1px solid #484a41; font: 600 8px/1 var(--mono); color: #96998d; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.evidence-empty { min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6d6f66; text-align: center; }.evidence-empty span { font-size: 29px; color: #56584f; }.evidence-empty strong { margin-top: 15px; font: 600 20px/1 var(--serif); }.evidence-empty p { max-width: 310px; font-size: 10px; line-height: 1.6; }.hidden { display: none !important; }
.evidence-content { padding: 18px; }.cause-strip { min-height: 110px; display: grid; grid-template-columns: 1fr 22px 1.3fr 22px 1fr; align-items: stretch; background: #292a25; border: 1px solid #484941; }.cause-strip > div { padding: 15px; display: flex; flex-direction: column; min-width: 0; }.cause-strip > i { display: grid; place-items: center; font-style: normal; color: #64665e; border-left: 1px solid #40413a; border-right: 1px solid #40413a; }.cause-strip small { font: 600 7px/1 var(--mono); letter-spacing: .11em; color: #777a70; }.cause-strip strong { margin: 9px 0 7px; font: 600 11px/1.2 var(--mono); color: #dedbd1; overflow-wrap: anywhere; }.cause-strip code, .cause-strip span { font: 500 8px/1.4 var(--mono); color: #898b82; overflow-wrap: anywhere; }
.evidence-columns { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; margin-top: 12px; }.forensic-card { background: #292a25; border: 1px solid #46483f; }.forensic-card > header { min-height: 54px; padding: 12px 14px; border-bottom: 1px solid #3e4038; position: relative; }.forensic-card > header > span { font: 600 7px/1 var(--mono); letter-spacing: .12em; color: #73766c; }.forensic-card > header h3 { margin: 4px 0 0; font: 600 14px/1 var(--serif); }.memory-ids { min-height: 125px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }.memory-id { padding: 7px 8px; border-left: 2px solid #6ebf90; background: #30312b; font: 500 7px/1.3 var(--mono); color: #a9aca0; overflow-wrap: anywhere; }.memory-empty { font-size: 9px; color: #73756d; line-height: 1.5; }
.model-trace { min-height: 125px; margin: 0; padding: 9px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #3b3c35; }.model-trace div { background: #292a25; padding: 8px; min-width: 0; }.model-trace dt { font: 600 7px/1 var(--mono); color: #73766c; }.model-trace dd { margin: 5px 0 0; font: 600 9px/1.25 var(--mono); color: #c3c1b7; overflow-wrap: anywhere; }.model-trace .wide { grid-column: 1 / -1; }
.delta-card { margin-top: 12px; }.delta-card > header { display: flex; align-items: center; }.delta-card > header h3 { flex: 1; }.delta-card > header button { border: 1px solid #8a624a; background: #48372c; color: #e1b090; padding: 7px 9px; font: 600 7px/1 var(--mono); cursor: pointer; }.delta-table { max-height: 305px; overflow: auto; }.delta-row { display: grid; grid-template-columns: minmax(120px,.7fr) 1fr 24px 1fr; border-bottom: 1px solid #3b3c36; font: 500 8px/1.35 var(--mono); }.delta-row > * { padding: 8px 9px; border-right: 1px solid #393a34; overflow-wrap: anywhere; }.delta-path { color: #77c49b; }.delta-before { color: #c08b73; }.delta-after { color: #9dc2aa; }.delta-arrow { color: #66685f; text-align: center; }
.state-block { border-bottom: 1px solid #42433b; padding: 15px 16px; }.festival-state > strong { display: block; margin: 7px 0 16px; font: 600 13px/1.35 var(--serif); color: #e2dfd4; }.console-meter { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; margin-top: 10px; font-size: 8px; color: #96988e; }.console-meter b { font: 600 9px/1 var(--mono); color: #cac8bd; }.console-meter i { grid-column: 1 / -1; display: block; height: 3px; background: #3c3d36; }.console-meter em { display: block; height: 100%; width: 0; background: #71c493; transition: width .4s; }
.state-facts { display: grid; grid-template-columns: 1fr 1fr; padding: 0; background: #3b3c35; gap: 1px; }.state-fact { background: #272822; padding: 12px; }.state-fact span { display: block; font: 600 7px/1 var(--mono); color: #74776d; }.state-fact strong { display: block; margin-top: 6px; font: 600 10px/1.3 var(--mono); color: #c6c4b9; overflow-wrap: anywhere; }
.budget-block { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.budget-block div { min-width: 0; }.budget-block strong { display: block; margin-top: 6px; font: 600 11px/1 var(--mono); color: #d1cec3; }.budget-track { grid-column: 1 / -1; height: 5px; background: #3a3c35; }.budget-track i { display: block; width: 0; height: 100%; background: #71c493; }.budget-block p { grid-column: 1 / -1; margin: -4px 0 0; font-size: 8px; line-height: 1.4; color: #7c7e75; }
.snapshot-block header, .provider-block header { display: flex; justify-content: space-between; align-items: baseline; }.snapshot-block header strong, .provider-block header strong { font: 600 13px/1 var(--serif); }.snapshot-block > div, .provider-block > div { margin-top: 10px; }.snapshot-row, .provider-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #3c3d37; }.snapshot-row code { font: 500 8px/1 var(--mono); color: #a4a69c; }.snapshot-row small { display: block; margin-top: 4px; letter-spacing: 0; }.snapshot-row button { border: 1px solid #536d62; background: transparent; color: #85b79e; padding: 5px 7px; font: 600 7px/1 var(--mono); cursor: pointer; }.provider-row span { font: 600 8px/1 var(--mono); text-transform: uppercase; }.provider-row b { font: 600 7px/1 var(--mono); color: #75c393; }.provider-row b.off { color: #d68a60; }
.console-toast { position: fixed; z-index: 40; right: 20px; bottom: 20px; max-width: 380px; padding: 11px 14px; background: #30342d; border: 1px solid #6db88d; color: #dcd9cf; font-size: 9px; line-height: 1.4; transform: translateY(20px); opacity: 0; visibility: hidden; transition: .2s; }.console-toast.show { transform: translateY(0); opacity: 1; visibility: visible; }

@keyframes breathe { 50% { opacity: .45; transform: scale(.85); } }
@keyframes wave { from { opacity: .65; transform: translate(-50%,-50%) scale(.35); } to { opacity: 0; transform: translate(-50%,-50%) scale(2.2); } }

@media (max-width: 1120px) {
  .visitor-shell { grid-template-columns: 230px minmax(600px,1fr); width: calc(100% - 34px); gap: 20px; }
  .dispatch-card { padding-left: 19px; padding-right: 19px; }
  .forensic-grid { grid-template-columns: 250px minmax(480px,1fr); }.state-rail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #46473f; display: grid; grid-template-columns: repeat(3,1fr); }.state-rail > .console-section-title { grid-column: 1 / -1; }.state-block { border-right: 1px solid #42433b; }.snapshot-block, .provider-block { grid-column: span 1; }
}

@media (max-width: 820px) {
  .visitor-header { grid-template-columns: 1fr auto; height: 72px; padding: 0 18px; }.header-weather { display: none; }.wordmark-title { font-size: 22px; }
  .visitor-shell { display: flex; flex-direction: column; width: calc(100% - 24px); padding-top: 17px; }
  .dispatch-card { min-height: 0; width: 100%; transform: none; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }.dispatch-index, .dispatch-card h1, .mission-copy { grid-column: 1 / -1; }.dispatch-card .eyebrow { margin-top: 17px; }.dispatch-card h1 { font-size: 29px; }.mission-copy { margin: 12px 0 16px; }.world-meter { grid-column: 1; }.choice-stamp { grid-column: 2; margin: 0; align-self: center; }.text-action { grid-column: 1 / -1; }
  .map-caption { align-items: start; }.last-change { max-width: 45%; }.district-map { min-height: 520px; }
  .action-ribbon { grid-template-columns: 1fr 1fr 70px; }.ribbon-intro { grid-column: 1 / -1; min-height: 48px; border-bottom: 1px solid rgba(16,35,74,.2); }.choice-button { min-height: 72px; }.map-legend { display: none; }
  .visitor-footer { flex-direction: column; }
  .operator-header { grid-template-columns: 1fr auto; }.operator-health { display: none; }.operator-actions { grid-column: 1 / -1; justify-self: stretch; overflow-x: auto; }.operator-actions > * { flex: 0 0 auto; }.forensic-grid { display: block; }.event-list { max-height: 290px; }.event-rail { border-right: 0; }.state-rail { display: block; border-top: 1px solid #46473f; }.evidence-board { border-top: 1px solid #46473f; }.evidence-empty { min-height: 280px; }
}

@media (max-width: 560px) {
  .visitor-shell { width: calc(100% - 16px); gap: 15px; }.dispatch-card { display: block; }.world-meter { margin-bottom: 14px; }.choice-stamp { margin: 0; }.map-caption { padding-left: 2px; padding-right: 2px; }.map-caption h2 { font-size: 17px; }.last-change { display: none; }
  .district-map { min-height: 510px; }.place { transform: scale(.8); }.place:hover, .place:focus-visible { transform: scale(.82) translateY(-3px); }.place-workshop { left: 1%; top: 16%; }.place-greenhouse { right: -4%; top: 12%; }.place-plaza { left: 30%; top: 42%; }.place-archive { left: 1%; bottom: 9%; }
  .resident-tag { display: none; }.resident-avatar { width: 35px; height: 40px; }
  .resident-mina.at-plaza { left: 45%; top: 49%; }.resident-theo.at-plaza { left: 43%; top: 65%; }.resident-sol.at-plaza { left: 59%; top: 62%; }.resident-naru.at-plaza { left: 30%; top: 59%; }.resident-yul.at-plaza { left: 61%; top: 49%; }
  .resident-mina.at-greenhouse { left: 65%; top: 18%; }.resident-theo.at-greenhouse { left: 66%; top: 30%; }.resident-sol.at-greenhouse { left: 82%; top: 23%; }.resident-naru.at-greenhouse { left: 61%; top: 40%; }.resident-yul.at-greenhouse { left: 78%; top: 38%; }
  .resident-mina.at-workshop { left: 26%; top: 20%; }.resident-theo.at-workshop { left: 12%; top: 31%; }.resident-sol.at-workshop { left: 29%; top: 33%; }.resident-naru.at-workshop { left: 8%; top: 20%; }.resident-yul.at-workshop { left: 31%; top: 43%; }
  .resident-mina.at-archive { left: 23%; top: 69%; }.resident-theo.at-archive { left: 8%; top: 67%; }.resident-sol.at-archive { left: 29%; top: 81%; }.resident-naru.at-archive { left: 9%; top: 80%; }.resident-yul.at-archive { left: 34%; top: 69%; }
  .action-ribbon { grid-template-columns: 1fr 1fr; }.ribbon-intro { grid-column: 1 / -1; }.time-button { grid-column: 1 / -1; min-height: 49px; }.choice-button { padding: 10px 8px; gap: 7px; }.choice-button small { line-height: 1.3; }.choice-key { width: 26px; height: 26px; }.conversation-drawer { padding: 25px 17px 17px; }
  .entry-sheet { padding: 9px; }.entry-card { padding: 31px 25px; }.entry-card h2 { font-size: 32px; }.entry-card > p:not(.entry-number) { font-size: 12px; }.entry-rules li { font-size: 10px; }
  .operator-header { padding: 10px 12px; }.operator-brand strong { font-size: 16px; }.operator-actions { gap: 4px; }.operator-actions button, .operator-actions a { padding: 8px; }.evidence-content { padding: 10px; }.cause-strip { grid-template-columns: 1fr; }.cause-strip > i { display: none; }.cause-strip > div { border-bottom: 1px solid #40413a; }.evidence-columns { grid-template-columns: 1fr; }.delta-row { grid-template-columns: minmax(90px,.65fr) 1fr 16px 1fr; }.delta-row > * { padding: 7px 5px; }.delta-card > header { flex-wrap: wrap; }.delta-card > header button { margin-top: 8px; width: 100%; }.event-id-chip { max-width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Phase 2 — DIAL-UP TWILIGHT shared accessibility and world map */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; background: #fff4cf; color: #071c49; font-weight: 800; transform: translateY(-150%); transition: transform .15s; }
.skip-link:focus { transform: translateY(0); }
:where(button, a, input, textarea, select):focus-visible { outline: 3px solid #ffd16f; outline-offset: 3px; }

.visitor-header { grid-template-columns: minmax(210px, 1fr) auto minmax(300px, 1fr); }
.view-switch { justify-self: end; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid rgba(210,231,241,.25); background: rgba(3,19,53,.46); }
.view-switch a { padding: 9px 11px; color: #dbe7ee; font: 700 9px/1 var(--mono); letter-spacing: .06em; }
.view-switch a:hover, .view-switch a:focus-visible, .view-switch a.active { background: #fff0c8; color: #10234a; }
.view-switch .operator-entry { margin-left: 3px; border-left: 1px solid rgba(210,231,241,.25); color: #c2d2df; }
.dispatch-channel-link { position: relative; z-index: 1; display: flex; justify-content: space-between; margin-top: 10px; padding: 12px 0 4px; border-bottom: 1px solid #1d4e77; color: #0b4673; font-size: 11px; font-weight: 800; }
.dispatch-channel-link:hover { color: #8b470f; border-color: #8b470f; }

.illustrated-map { min-height: 0; aspect-ratio: 1376 / 768; background: #071b42; perspective: none; }
.map-art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.illustrated-map::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,22,54,.02), rgba(5,18,47,.14)), repeating-linear-gradient(0deg, transparent 0 3px, rgba(7,25,59,.06) 3px 4px); mix-blend-mode: multiply; }
.illustrated-map .north-label { z-index: 3; top: 18px; left: 20px; padding: 7px 9px; writing-mode: initial; background: rgba(4,18,46,.75); color: #d7e7e9; }
.illustrated-map .festival-wave { z-index: 3; left: 50%; top: 48%; border-color: rgba(117,229,196,.7); }
.illustrated-map .place { z-index: 2; width: auto; height: auto; filter: none; border: 1px solid transparent; border-radius: 50%; }
.illustrated-map .place:hover, .illustrated-map .place:focus-visible { z-index: 6; transform: translateY(-2px); filter: none; border-color: #ffd16f; box-shadow: 0 0 0 5px rgba(255,209,111,.22), inset 0 0 35px rgba(255,209,111,.12); }
.illustrated-map .place-copy { left: 50%; bottom: -8px; transform: translateX(-50%); padding: 5px 8px; border-left: 2px solid var(--mint); background: rgba(3,19,53,.88); text-align: center; text-shadow: 0 2px 4px #001238; }
.illustrated-map .place-copy b { font-size: 11px; }
.illustrated-map .place-copy small { display: none; }
.illustrated-map .place-workshop { left: 8%; top: auto; bottom: 6%; width: 28%; height: 37%; }
.illustrated-map .place-greenhouse { left: auto; right: 8%; top: 1%; width: 29%; height: 38%; }
.illustrated-map .place-plaza { left: 34%; top: 27%; width: 32%; height: 44%; }
.illustrated-map .place-archive { left: auto; right: 6%; bottom: 4%; width: 27%; height: 36%; }

.illustrated-map .resident { z-index: 8; padding: 0; gap: 2px; align-items: end; transition: left .9s cubic-bezier(.22,.8,.2,1), top .9s cubic-bezier(.22,.8,.2,1); filter: drop-shadow(0 6px 6px rgba(0,7,28,.5)); }
.illustrated-map .resident:hover, .illustrated-map .resident:focus-visible { transform: translateY(-3px) scale(1.04); }
.resident-sprite { display: block; width: 54px; height: 68px; background-image: url('/assets/resident-sprite-atlas-alpha.png'); background-repeat: no-repeat; background-size: 400% 500%; background-position-x: 0%; image-rendering: pixelated; animation: sprite-bob 2.4s ease-in-out infinite; }
.resident-mina .resident-sprite { background-position-y: 0%; }
.resident-theo .resident-sprite { background-position-y: 25%; animation-delay: -.4s; }
.resident-sol .resident-sprite { background-position-y: 50%; animation-delay: -.8s; }
.resident-naru .resident-sprite { background-position-y: 75%; animation-delay: -1.2s; }
.resident-yul .resident-sprite { background-position-y: 100%; animation-delay: -1.6s; }
.illustrated-map .resident-tag { margin: 0 0 8px -5px; padding: 5px 7px; border-left-width: 3px; }
.resident-progress { position: absolute; top: -2px; left: 43px; min-width: 27px; padding: 3px 4px; border-radius: 8px; background: #071c49; border: 1px solid #75e5c4; color: #eaf9ec; font: 700 7px/1 var(--mono); text-align: center; }
.resident.interaction-complete .resident-progress { background: #f5c66d; border-color: #fff0be; color: #10234a; }
.resident.interaction-complete .resident-sprite { filter: drop-shadow(0 0 8px rgba(117,229,196,.75)); }
.resident-mina.at-plaza { left: 46%; top: 43%; }.resident-theo.at-plaza { left: 42%; top: 50%; }.resident-sol.at-plaza { left: 53%; top: 52%; }.resident-naru.at-plaza { left: 40%; top: 56%; }.resident-yul.at-plaza { left: 56%; top: 42%; }
.resident-mina.at-greenhouse { left: 75%; top: 13%; }.resident-theo.at-greenhouse { left: 68%; top: 21%; }.resident-sol.at-greenhouse { left: 82%; top: 16%; }.resident-naru.at-greenhouse { left: 71%; top: 10%; }.resident-yul.at-greenhouse { left: 79%; top: 27%; }
.resident-mina.at-workshop { left: 20%; top: 58%; }.resident-theo.at-workshop { left: 14%; top: 65%; }.resident-sol.at-workshop { left: 25%; top: 61%; }.resident-naru.at-workshop { left: 11%; top: 55%; }.resident-yul.at-workshop { left: 27%; top: 69%; }
.resident-mina.at-archive { left: 78%; top: 59%; }.resident-theo.at-archive { left: 71%; top: 65%; }.resident-sol.at-archive { left: 83%; top: 67%; }.resident-naru.at-archive { left: 73%; top: 57%; }.resident-yul.at-archive { left: 84%; top: 56%; }
.resident-channel-jump { display: flex; justify-content: space-between; margin-top: 12px; padding: 11px 12px; background: #133b6c; color: #fff8e8; font-size: 11px; font-weight: 800; }
.resident-channel-jump:hover { background: #0c5c6b; }
.dialogue-note { color: #4e586d; font-size: 9px; }

@keyframes sprite-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Character channels — a separate late-night program guide */
.channels-body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: #081532; color: #f2ead6; font-family: var(--sans); }
.channels-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 12%, rgba(53,124,132,.21), transparent 28rem), radial-gradient(circle at 8% 62%, rgba(202,106,70,.10), transparent 25rem); }
.channel-scanlines { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(1,7,24,.22) 3px 4px); }
.channels-header { position: relative; z-index: 25; min-height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 13px clamp(18px,4vw,64px); border-bottom: 1px solid #34486b; background: rgba(7,20,49,.92); }
.channel-brand { display: flex; flex-direction: column; width: fit-content; }
.channel-brand span { color: #7fe2c4; font: 700 8px/1 var(--mono); letter-spacing: .18em; }
.channel-brand strong { margin-top: 5px; color: #fff3d3; font: 700 27px/1 var(--serif); letter-spacing: -.04em; }
.channel-onair { display: flex; align-items: center; gap: 9px; margin: 0; color: #c9d7db; font: 700 9px/1 var(--mono); letter-spacing: .08em; }
.channel-onair span { width: 8px; height: 8px; border-radius: 50%; background: #f08b69; box-shadow: 0 0 12px #f08b69; animation: breathe 2s ease-in-out infinite; }
.channel-nav { justify-self: end; display: flex; gap: 4px; }
.channel-nav a { padding: 10px 12px; border: 1px solid #3c5279; color: #d7e1e5; font: 700 9px/1 var(--mono); }
.channel-nav a:hover, .channel-nav a.active { background: #78ddc1; border-color: #78ddc1; color: #071c3d; }

#channelMain { position: relative; z-index: 2; }
.channels-hero { width: min(1540px, calc(100% - clamp(32px,8vw,120px))); margin: 0 auto; padding: clamp(55px,8vw,110px) 0 clamp(45px,6vw,80px); position: relative; }
.channel-date, .flow-step, .channel-guide > header p:first-child { margin: 0; color: #78ddc1; font: 700 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.channels-hero h1 { max-width: 900px; margin: 18px 0; color: #fff0cb; font: 700 clamp(52px,8vw,118px)/.91 var(--serif); letter-spacing: -.065em; }
.channels-hero h1 em { color: #f0916e; font-style: normal; }
.channels-hero > p:not(.channel-date) { max-width: 620px; margin: 25px 0 0; color: #c0ced2; font-size: 15px; line-height: 1.85; word-break: keep-all; }
.tuner-rule { position: absolute; right: 0; bottom: 80px; width: min(440px,36%); display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; color: #7489a7; font: 700 9px/1 var(--mono); }
.tuner-rule i { height: 1px; background: #43597d; }.tuner-rule b { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #f2c46b; border-radius: 50%; color: #f2c46b; }

.channel-guide { width: min(1540px, calc(100% - clamp(32px,8vw,120px))); margin: 0 auto; padding-bottom: 90px; }
.channel-guide > header { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 20px 0; border-top: 1px solid #3c5074; }
.channel-guide h2 { margin: 7px 0 0; color: #fff0d0; font: 700 clamp(25px,3vw,40px)/1 var(--serif); }
.channel-guide > header > p { margin: 0; color: #afbeca; font-size: 11px; }.channel-guide > header > p strong { color: #f2c46b; font: 700 22px/1 var(--serif); }
.channel-card-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.channel-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid #405478; background: #0d2144; transition: transform .25s, border-color .25s, box-shadow .25s; }
.channel-card:hover, .channel-card:focus-visible { transform: translateY(-8px); border-color: #f2c46b; box-shadow: 0 20px 40px rgba(0,4,18,.42); }
.channel-card.complete { border-color: #5dbba3; }
.channel-card-art, .detail-keyart { background-image: url('/assets/resident-keyart-strip.png'); background-repeat: no-repeat; background-size: 500% auto; background-color: #17365f; }
.channel-card-art { position: relative; display: block; height: clamp(255px,30vw,430px); border-bottom: 1px solid #405478; background-position-y: 15%; overflow: hidden; }
.keyart-mina { background-position-x: 0%; }.keyart-theo { background-position-x: 25%; }.keyart-sol { background-position-x: 50%; }.keyart-naru { background-position-x: 75%; }.keyart-yul { background-position-x: 100%; }
.card-signal { position: absolute; top: 11px; left: 11px; padding: 6px 7px; background: #f1c46d; color: #0b2144; font: 800 7px/1 var(--mono); letter-spacing: .08em; }
.channel-card.complete .card-signal { background: #72ddbd; }
.channel-card-copy { display: flex; flex: 1; flex-direction: column; padding: 17px 14px 15px; }
.channel-card-copy > small { color: #75d7bd; font: 700 7px/1 var(--mono); letter-spacing: .08em; }
.channel-card-copy > strong { margin-top: 7px; color: #fff0d1; font: 700 30px/1 var(--serif); }
.channel-card-copy > em { min-height: 57px; margin-top: 11px; color: #d0d9dc; font-size: 11px; line-height: 1.65; font-style: normal; word-break: keep-all; }
.channel-card-meta { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 14px; border-top: 1px solid #33496e; }
.channel-card-meta span { color: #93a7ba; font: 700 7px/1.3 var(--mono); }
.card-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px; margin-top: 14px; color: #d5e1e1; font: 700 8px/1 var(--mono); }
.card-progress i { height: 3px; background: #283d61; }.card-progress b { display: block; height: 100%; background: #f1c46d; }

.channel-detail { width: min(1380px, calc(100% - clamp(28px,7vw,100px))); margin: 0 auto; padding: 35px 0 100px; }
.detail-back { display: inline-flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid #647796; color: #d2dde0; font: 700 10px/1 var(--mono); }
.detail-stage { min-height: 620px; display: grid; grid-template-columns: minmax(330px,.8fr) 1.2fr; margin-top: 25px; border: 1px solid #405478; background: #0c2042; box-shadow: 18px 20px 0 #05102a; }
.detail-keyart { min-height: 620px; background-position-y: 12%; border-right: 1px solid #405478; }
.detail-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(35px,6vw,90px); background: linear-gradient(120deg, rgba(13,39,74,.96), rgba(7,24,53,.96)); }
.detail-channel { margin: 0; color: #79ddc1; font: 700 9px/1 var(--mono); letter-spacing: .15em; }
.detail-role { margin: 35px 0 7px; color: #a8b9c5; font-size: 12px; }
.detail-copy h1 { margin: 0; color: #fff0ce; font: 700 clamp(65px,9vw,132px)/.8 var(--serif); letter-spacing: -.07em; }
.detail-copy h2 { margin: 28px 0 0; color: #f09671; font: 700 clamp(20px,2.4vw,35px)/1.1 var(--serif); }
.detail-intro { max-width: 620px; margin: 20px 0 35px; color: #c4d0d4; font-size: 14px; line-height: 1.85; word-break: keep-all; }
.detail-progress-copy { display: flex; justify-content: space-between; color: #9fb1bf; font: 700 8px/1 var(--mono); }.detail-progress-copy strong { color: #f2c46b; }
.detail-progress { height: 5px; margin-top: 9px; background: #263d61; }.detail-progress span { display: block; height: 100%; width: 0; background: #72ddbd; transition: width .45s; }
.map-result-link { align-self: flex-start; margin-top: 28px; padding: 12px 15px; border: 1px solid #f2c46b; color: #ffe6ab; font-size: 11px; font-weight: 800; }
.map-result-link:hover { background: #f2c46b; color: #10234a; }
.episode-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 38px; }
.episode-panel { min-width: 0; padding: clamp(25px,4vw,52px); border: 1px solid #405478; background: #0c2042; }
.episode-panel h2 { margin: 10px 0 22px; color: #fff0d0; font: 700 clamp(25px,3vw,40px)/1.08 var(--serif); }
.quick-choice-list, .interaction-options { display: grid; gap: 9px; }
.quick-choice-list { grid-template-columns: 1fr 1fr; }
.quick-choice-list button, .interaction-options button { min-height: 55px; border: 1px solid #52678b; background: #142c51; color: #f0eadc; cursor: pointer; text-align: left; }
.quick-choice-list button { padding: 12px; font-size: 11px; font-weight: 800; }
.quick-choice-list button:hover, .interaction-options button:hover { border-color: #76ddc0; background: #183b5c; }
.channel-dialogue { min-height: 120px; max-height: 220px; overflow-y: auto; margin-top: 15px; padding: 15px; border-left: 3px solid #75ddc0; background: #091832; }
.channel-dialogue p { margin: 0 0 10px; color: #c7d3d6; font-size: 11px; line-height: 1.65; }.channel-dialogue .visitor-line { margin-left: 25px; color: #ffe5aa; }.channel-dialogue .resident-line { color: #d6eee6; }
.channel-dialogue-form { margin-top: 18px; }.channel-dialogue-form label { color: #a8bbc6; font: 700 8px/1 var(--mono); letter-spacing: .08em; }.channel-dialogue-form > div { display: grid; grid-template-columns: 1fr auto; margin-top: 8px; }
.channel-dialogue-form textarea { min-width: 0; resize: vertical; border: 1px solid #52678b; background: #091832; color: #f3ead7; padding: 12px; }.channel-dialogue-form button { border: 0; background: #f0c36c; color: #10234a; padding: 0 19px; font-weight: 900; cursor: pointer; }
.interaction-instruction { color: #becbd0; font-size: 12px; line-height: 1.7; }
.interaction-options button { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; }.interaction-options strong { font-size: 12px; }.interaction-options span { color: #94a8b8; font: 700 8px/1.3 var(--mono); text-align: right; }
.interaction-options button:disabled, .quick-choice-list button:disabled { opacity: .55; cursor: wait; }
.interaction-result { margin-top: 18px; padding: 20px; border: 1px solid #78ddc1; background: #102f4b; }
.interaction-result > span { color: #78ddc1; font: 700 8px/1 var(--mono); letter-spacing: .12em; }.interaction-result strong { display: block; margin-top: 9px; color: #fff0ce; font: 700 21px/1.1 var(--serif); }.interaction-result p { color: #d0dddc; font-size: 11px; line-height: 1.7; }.interaction-result a { display: flex; justify-content: space-between; margin-top: 15px; padding-top: 13px; border-top: 1px solid #477078; color: #ffe19b; font-size: 11px; font-weight: 800; }
.channels-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 30px; padding: 22px clamp(18px,4vw,64px); border-top: 1px solid #34486b; color: #90a4b5; font: 700 8px/1.4 var(--mono); letter-spacing: .07em; }
.channel-toast { background: #0c2042; }

/* Contrast hardening for the forensic console */
.operator-brand small, .console-section-title small, .state-block small, .console-section-title > span:first-child, .event-seq, .event-main small, .forensic-card > header > span, .model-trace dt, .memory-empty, .state-fact span, .budget-block p { color: #aeb0a7; }
.event-main p, .cause-strip code, .cause-strip span, .cause-strip small, .console-meter, .event-id-chip { color: #b5b7ae; }
.event-filters button { color: #b2b4aa; }

/* Local five-person validation layer */
.study-survey { position: fixed; z-index: 90; right: 14px; bottom: 14px; width: min(330px, calc(100vw - 28px)); padding: 16px; border: 1px solid #f1c46d; background: rgba(7,28,73,.97); box-shadow: 8px 9px 0 rgba(3,10,31,.45); color: #f7eed9; font-family: var(--sans); }
.study-survey-code { margin: 0; color: #78ddc1; font: 800 8px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.study-survey h2 { margin: 7px 0 4px; color: #fff0d0; font: 700 21px/1.1 var(--serif); }
.study-survey > p:not(.study-survey-code) { margin: 0 0 11px; color: #c6d3d5; font-size: 10px; }
.study-survey-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.study-survey button { min-height: 38px; border: 1px solid #4d6385; background: #132e57; color: #f6eedc; font-weight: 800; cursor: pointer; }
.study-survey button:hover, .study-survey button:focus-visible { border-color: #78ddc1; background: #1a4962; }
.study-survey[data-submitted="true"] .study-survey-choices { display: none; }

.study-body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: #061735; color: #e8e4d7; font-family: var(--sans); }
.study-header { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 22px clamp(18px,5vw,72px); border-bottom: 1px solid #405478; background: rgba(6,23,53,.94); }
.study-header p { margin: 0 0 6px; color: #77dcc0; font: 800 8px/1 var(--mono); letter-spacing: .14em; }
.study-header h1 { margin: 0; color: #fff0d0; font: 700 30px/1 var(--serif); }
.study-header nav { display: flex; gap: 6px; }.study-header a { padding: 9px 11px; border: 1px solid #4a6084; color: #dae3e4; font: 800 9px/1 var(--mono); }
.study-main { position: relative; z-index: 2; width: min(1380px, calc(100% - clamp(30px,8vw,110px))); margin: 0 auto; padding: 55px 0 100px; }
.study-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 55px; align-items: end; padding-bottom: 45px; }
.study-intro h2 { margin: 11px 0 0; color: #fff0d0; font: 700 clamp(38px,6vw,80px)/.95 var(--serif); letter-spacing: -.045em; }
.study-intro > p { margin: 0; padding-left: 22px; border-left: 2px solid #f1c46d; color: #bccbd0; font-size: 13px; line-height: 1.8; }
.study-launch, .study-cohort, .study-results, .study-definitions { margin-top: 22px; border: 1px solid #405478; background: #0b2043; }
.study-launch > header, .study-cohort > header, .study-results > header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 20px; border-bottom: 1px solid #405478; }
.study-launch h2, .study-cohort h2, .study-results h2 { margin: 0; color: #fff0d0; font: 700 24px/1 var(--serif); }
.study-launch header p, .study-results header p { margin: 0; color: #9eb0bd; font: 700 8px/1 var(--mono); }
.study-launch-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: #405478; }
.study-launch-grid a { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: #102a51; color: #e9e5d8; }
.study-launch-grid a:hover { background: #173b58; }.study-launch-grid strong { color: #79ddc1; font: 700 26px/1 var(--serif); }.study-launch-grid span { font-size: 9px; }
.study-cohort button { border: 1px solid #5c7190; background: transparent; color: #dbe4e3; padding: 8px 10px; font-weight: 800; cursor: pointer; }
.study-cohort-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: #405478; }
.study-cohort-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding: 22px; background: #102a51; }.study-cohort-card span { color: #aebdc5; font-size: 10px; }.study-cohort-card strong { grid-row: 2; color: #fff0d0; font: 700 34px/1 var(--serif); }.study-cohort-card em { grid-column: 2; grid-row: 2; align-self: end; color: #9eafba; font: 800 8px/1 var(--mono); font-style: normal; }.study-cohort-card.pass em { color: #79ddc1; }.study-cohort-card.fail em { color: #f39a76; }
.study-table-wrap { overflow-x: auto; }.study-table-wrap:focus-visible { outline: 3px solid #79ddc1; outline-offset: -3px; }.study-results table { width: 100%; border-collapse: collapse; min-width: 850px; }.study-results th, .study-results td { padding: 15px 13px; border-bottom: 1px solid #31496d; text-align: left; }.study-results thead th { color: #9fb1be; font: 800 8px/1 var(--mono); letter-spacing: .06em; }.study-results tbody th { color: #fff0d0; font: 700 19px/1 var(--serif); }
.study-status { display: inline-block; padding: 6px 8px; border: 1px solid #526989; color: #aebbc2; font: 800 8px/1 var(--mono); white-space: nowrap; }.study-status.pass { border-color: #61bfa7; color: #78ddc1; }.study-status.fail { border-color: #a15f5b; color: #f2a183; }
.study-definitions { padding: 17px 20px; }.study-definitions summary { color: #e7ddb8; font-weight: 800; cursor: pointer; }.study-definitions li { margin: 9px 0; color: #afbec5; font-size: 11px; line-height: 1.5; }

@media (max-width: 1100px) {
  .visitor-header { grid-template-columns: 1fr auto; height: auto; min-height: 82px; }.header-weather { display: none; }.view-switch { grid-column: 2; }
  .channel-card-grid { grid-template-columns: repeat(3,1fr); }.channel-card-art { height: 380px; }
  .channels-header { grid-template-columns: 1fr auto; }.channel-onair { display: none; }
}

@media (max-width: 820px) {
  .visitor-header { padding: 11px 16px; }.view-switch { gap: 2px; }.view-switch a { padding: 8px; font-size: 8px; }.view-switch .operator-entry { display: none; }
  .illustrated-map .resident-tag { display: none; }.resident-progress { left: 36px; }.resident-sprite { width: 47px; height: 59px; }
  .channels-hero, .channel-guide, .channel-detail { width: calc(100% - 30px); }.tuner-rule { display: none; }
  .channel-card-grid { grid-template-columns: repeat(2,1fr); }.channel-card-art { height: 430px; }
  .detail-stage { min-height: 0; grid-template-columns: 1fr; }.detail-keyart { min-height: 520px; border-right: 0; border-bottom: 1px solid #405478; }.detail-copy { padding: 45px 35px; }.detail-copy h1 { font-size: 90px; }
  .episode-flow { grid-template-columns: 1fr; }
  .study-intro { grid-template-columns: 1fr; gap: 25px; }.study-launch-grid { grid-template-columns: repeat(3,1fr); }.study-cohort-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 560px) {
  .wordmark-kicker { max-width: 130px; line-height: 1.35; }.wordmark-title { font-size: 20px; }
  .view-switch a { padding: 8px 6px; letter-spacing: 0; }.view-switch a:first-child { display: none; }
  .illustrated-map { aspect-ratio: 1376 / 768; min-height: 0; border-radius: 2px; }.illustrated-map .north-label { top: 6px; left: 7px; padding: 4px; font-size: 5px; }.illustrated-map .place-copy { bottom: -9px; padding: 3px 5px; }.illustrated-map .place-copy b { font-size: 7px; }.illustrated-map .festival-wave { width: 60px; height: 30px; }
  .resident-sprite { width: 37px; height: 47px; }.resident-progress { top: 0; left: 29px; min-width: 21px; padding: 2px 3px; font-size: 5px; }
  .illustrated-map .resident-mina.at-plaza { left: 45%; top: 39%; }.illustrated-map .resident-theo.at-plaza { left: 40%; top: 48%; }.illustrated-map .resident-sol.at-plaza { left: 53%; top: 49%; }.illustrated-map .resident-naru.at-plaza { left: 38%; top: 54%; }.illustrated-map .resident-yul.at-plaza { left: 57%; top: 38%; }
  .illustrated-map .resident-mina.at-greenhouse { left: 74%; top: 7%; }.illustrated-map .resident-theo.at-greenhouse { left: 66%; top: 17%; }.illustrated-map .resident-sol.at-greenhouse { left: 82%; top: 10%; }.illustrated-map .resident-naru.at-greenhouse { left: 69%; top: 4%; }.illustrated-map .resident-yul.at-greenhouse { left: 79%; top: 23%; }
  .illustrated-map .resident-mina.at-workshop { left: 18%; top: 53%; }.illustrated-map .resident-theo.at-workshop { left: 11%; top: 60%; }.illustrated-map .resident-sol.at-workshop { left: 24%; top: 57%; }.illustrated-map .resident-naru.at-workshop { left: 8%; top: 50%; }.illustrated-map .resident-yul.at-workshop { left: 26%; top: 65%; }
  .illustrated-map .resident-mina.at-archive { left: 77%; top: 55%; }.illustrated-map .resident-theo.at-archive { left: 69%; top: 61%; }.illustrated-map .resident-sol.at-archive { left: 83%; top: 63%; }.illustrated-map .resident-naru.at-archive { left: 71%; top: 52%; }.illustrated-map .resident-yul.at-archive { left: 84%; top: 51%; }
  .channels-header { min-height: 74px; padding: 10px 14px; }.channel-brand strong { font-size: 21px; }.channel-brand span { font-size: 6px; }.channel-nav a { padding: 8px 7px; font-size: 7px; }
  .channels-hero { padding: 50px 0 38px; }.channels-hero h1 { font-size: 52px; }.channels-hero > p:not(.channel-date) { font-size: 13px; }.channel-guide > header { align-items: start; }.channel-guide > header > p { text-align: right; }
  .channel-card-grid { grid-template-columns: 1fr; }.channel-card { display: grid; grid-template-columns: 42% 1fr; }.channel-card-art { height: 270px; border-right: 1px solid #405478; border-bottom: 0; }.channel-card-copy > em { min-height: 0; }.channel-card-meta span:nth-child(3) { display: none; }
  .channel-detail { width: calc(100% - 18px); padding-top: 20px; }.detail-stage { margin-top: 16px; box-shadow: 7px 8px 0 #05102a; }.detail-keyart { min-height: 390px; }.detail-copy { padding: 34px 22px; }.detail-role { margin-top: 25px; }.detail-copy h1 { font-size: 72px; }.detail-intro { font-size: 12px; }.episode-panel { padding: 24px 17px; }.quick-choice-list { grid-template-columns: 1fr; }.interaction-options button { grid-template-columns: 1fr; }.interaction-options span { text-align: left; }.channels-footer { flex-direction: column; }
  .study-header { align-items: flex-start; }.study-header nav { flex-direction: column; }.study-main { width: calc(100% - 24px); padding-top: 35px; }.study-intro h2 { font-size: 43px; }.study-launch-grid, .study-cohort-grid { grid-template-columns: 1fr 1fr; }.study-survey { right: 8px; bottom: 8px; width: calc(100vw - 16px); }
}
.pages-demo-banner {
  position: relative;
  z-index: 1000;
  width: 100%;
  padding: 0.58rem 1rem;
  border-bottom: 1px solid rgba(255, 190, 98, 0.48);
  background: #211b31;
  color: #ffe2a9;
  font: 700 0.76rem/1.35 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.045em;
  text-align: center;
}