:root {
  color-scheme: dark;
  --canvas-w: 1672px;
  --canvas-h: 941px;
  --shared-stage-w: 1536px;
  --shared-stage-h: 960px;
  --cyan: #00e8ff;
  --teal: #00f5c8;
  --magenta: #f04dff;
  --panel-bg: #000b19;
  font-family: Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #010814; }
body { color: #e6f8ff; }
#viewport { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
/* The explicit outer stage matches HOME exactly. The approved CHAT artwork keeps its native 16:9 ratio inside it. */
.shared-stage { position: absolute; width: var(--shared-stage-w); height: var(--shared-stage-h); left: 0; top: 0; transform-origin: top left; overflow: hidden; background: #010814; }
.canvas { position: absolute; width: var(--canvas-w); height: var(--canvas-h); left: 0; top: 47.799043px; transform: scale(.9186602871); transform-origin: top left; overflow: hidden; background: #010814; }
.reference-art { position: absolute; z-index: 0; inset: 0; width: var(--canvas-w); height: var(--canvas-h); display: block; user-select: none; pointer-events: none; }

/* Opaque-but-textured masks hide only screenshot text where actual UI data now renders. */
.data-mask, .output-body {
  position: absolute; z-index: 2;
  background-color: #000b19;
  background-image: linear-gradient(rgba(0, 176, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 176, 255, .022) 1px, transparent 1px);
  background-size: 24px 24px;
  color: #dcefff;
}
.host-badge { position: absolute; z-index: 6; left: 1188px; top: 9px; width: 143px; height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 9px; background: rgba(0, 14, 29, .98); border-left: 1px solid rgba(0, 226, 255, .25); color: #00edbf; font-size: 10px; font-weight: 700; letter-spacing: .1px; white-space: nowrap; overflow: hidden; }
.host-led { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #00edbf; box-shadow: 0 0 8px rgba(0, 237, 191, .6); }
.host-badge.not-live .host-led { background: #ffb84d; box-shadow: 0 0 8px rgba(255, 184, 77, .45); }

/* Header clock is live DOM text; the baked timestamp is masked without changing the nav frame. */
.header-clock-mask { position: absolute; z-index: 6; left: 1338px; top: 16px; width: 173px; height: 25px; background: #000a16; }
.header-clock { position: absolute; z-index: 7; left: 1342px; top: 17px; width: 166px; height: 23px; display: flex; align-items: center; justify-content: center; color: #92c8ed; font-size: 11.5px; line-height: 14px; letter-spacing: .1px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Runtime / Identity body: labels and statuses are now supplied values. */
.runtime-layer { left: 25px; top: 104px; width: 409px; height: 122px; padding: 5px 5px 4px; }
.runtime-list { display: grid; gap: 2px; }
.runtime-row { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 17px; font-size: 12.5px; line-height: 16px; }
.runtime-row .led { width: 7px; height: 7px; border-radius: 50%; background: #00edbf; box-shadow: 0 0 6px rgba(0, 237, 191, .4); }
.runtime-row .led.magenta { background: #ed4eff; box-shadow: 0 0 6px rgba(237, 78, 255, .4); }
.runtime-row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runtime-row .value { font-size: 11.5px; font-weight: 700; color: #00edbf; white-space: nowrap; }
.runtime-row .value.warn { color: #ffca6a; }
.runtime-row .value.muted { color: #84a9c2; }
.preflight-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(0, 205, 255, .25); color: #00dfc1; font-size: 10.5px; font-weight: 700; letter-spacing: .1px; }
.preflight-bars { display: flex; flex: none; gap: 3px; }
.preflight-bars i { height: 6px; width: 29px; display: block; flex: none; background: #113345; border: 1px solid #165268; }
#preflightLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preflight-bars i.checked { background: #00dcb9; border-color: #28ffe3; box-shadow: 0 0 5px rgba(0, 220, 185, .22); }

/* Current Task */
.task-layer { left: 26px; top: 284px; width: 408px; height: 119px; padding: 4px 8px 3px; }
.task-title { font-size: 15px; line-height: 19px; font-weight: 700; color: #f1f9ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.task-row { display: grid; grid-template-columns: 49px minmax(0, 1fr); gap: 7px; font-size: 13px; line-height: 17px; }
.task-row span { color: #b7daf2; }
.task-row b { font-weight: 400; color: #d7ecfb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row .state-value { color: #00edbf; font-weight: 700; }
.task-detail { margin-top: 2px; font-size: 11px; line-height: 14px; color: #7da8c0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Execution log */
.log-layer { left: 25px; top: 444px; width: 330px; height: 140px; padding: 5px 6px; overflow: hidden; }
.log-row { display: grid; grid-template-columns: 58px 70px minmax(0,1fr); gap: 6px; align-items: baseline; min-width: 0; font-size: 12px; line-height: 21px; white-space: nowrap; }
.log-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #7dabc8; }
.log-level { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #00d9ff; }
.log-message { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #d5ebfc; }
.log-empty { padding: 8px 4px; color: #8aaec3; font-size: 12px; line-height: 18px; }

/* LLM cards: approved frames, rings and node artwork remain unchanged. The meter strip
   is a functional DOM overlay aligned to the original bottom meter recess, so real Host
   activity can animate the bars instead of leaving the meter as static raster decoration. */
.model-layer { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.model-live-card {
  position: absolute; top: 491px; height: 123px; pointer-events: auto; overflow: hidden;
  color: #f1f9ff; background: transparent; text-align: center; border: 0; padding: 0; margin: 0;
  appearance: none; outline: none; box-shadow: none; display: block; cursor: pointer;
}
.model-live-card::before {
  /* Opaque cover hides the reference artwork's baked-in waveform from its peaks to
     the lower frame. Live labels/meter are explicitly layered above this mask. */
  content: ""; position: absolute; z-index: 0; left: 3px; right: 3px; top: 95px; bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--model-color) 7%, #03050b) 0%, #02040b 45%, #02040b 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--model-color) 76%, #02040b);
  pointer-events: none;
}
.model-live-card .model-name {
  position: absolute; z-index: 1; left: 0; right: 0; top: 67px; height: 18px; min-width: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4px;
  color: #edf8ff; font-size: 15.5px; line-height: 18px; font-weight: 700;
  text-shadow: 0 0 3px color-mix(in srgb, var(--model-color) 28%, transparent);
  white-space: nowrap; overflow: hidden;
}
.model-live-card .model-status {
  position: absolute; z-index: 1; left: 0; right: 0; top: 90px; height: 13px; min-width: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4px;
  font-size: 10px; line-height: 13px; font-weight: 700; color: var(--model-color);
  text-transform: uppercase; white-space: nowrap; overflow: hidden; letter-spacing: .2px;
}
.model-label-text { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.model-live-card.is-focused .model-name { text-shadow: 0 0 5px color-mix(in srgb, var(--model-color) 55%, transparent); }
.model-live-card:focus-visible { outline: 1px solid var(--model-color); outline-offset: -2px; }
.model-live-card .model-meter {
  /* The separate pseudo-element covers the baked waveform without covering status text. */
  position: absolute; left: 3px; right: 3px; top: 101px; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2px;
  overflow: hidden; padding: 1px 2px 2px; background: transparent;
  border-radius: 1px; pointer-events: none;
}
.model-meter-bar {
  display: block; flex: 1 1 0; min-width: 1px; height: var(--bar-height, 4px);
  max-height: 18px; background: var(--model-color); opacity: .43;
  transform: scaleY(.82); transform-origin: center bottom;
  box-shadow: 0 0 2px color-mix(in srgb, var(--model-color) 48%, transparent);
}
.model-live-card.meter-active .model-meter-bar {
  opacity: .98; animation: soraris-llm-meter var(--meter-speed, .68s) ease-in-out var(--bar-delay, 0s) infinite alternate;
  box-shadow: 0 0 4px color-mix(in srgb, var(--model-color) 82%, transparent);
}
@keyframes soraris-llm-meter {
  0% { transform: scaleY(.28); filter: brightness(.88); }
  100% { transform: scaleY(1); filter: brightness(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .model-live-card.meter-active .model-meter-bar { animation: none; transform: scaleY(.72); }
}
.audio.is-playing::after { content: ""; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #00edbf; box-shadow: 0 0 7px rgba(0,237,191,.8); }

/* Visual Message Canvas inner content: ambient user-supplied video by default, relevant Host image when available. */
.visual-ambient-video, .visual-image-overlay {
  position: absolute; left: 1045px; top: 119px; width: 562px; height: 292px;
  object-fit: cover; background: #001023; border: 0;
}
.visual-ambient-video { z-index: 2; display: block; }
.visual-image-overlay { z-index: 3; }
.visual-ambient-video[hidden], .visual-image-overlay[hidden] { display: none; }
.visual-footer-mask {
  position: absolute; z-index: 4; left: 1044px; top: 411px; width: 593px; height: 26px;
  background: #000914; pointer-events: none;
}
/* Cover all baked footer labels, then restore only the narrow cyan frame edge. */
.visual-footer-mask::after {
  content: ""; position: absolute; left: 590px; top: 0; width: 2px; height: 26px;
  background: linear-gradient(90deg, #075a78 0%, #00bfe8 65%, #08769d 100%);
  box-shadow: 0 0 4px rgba(0, 191, 232, .45);
}
.visual-footer-edge { display: none; }
.visual-caption-overlay {
  position: absolute; z-index: 5; left: 1049px; top: 415px; width: 525px; height: 16px;
  overflow: hidden; background: transparent; color: #b4d8ef;
  font-size: 10px; line-height: 16px; padding: 0 7px; white-space: nowrap; text-overflow: ellipsis;
}

/* Question entry and controls: match the lower row of the reference artwork.
   Text baselines use the baked field's native vertical rhythm; action controls are
   opaque live controls so old raster labels cannot bleed through on hover/press. */
.question { position: absolute; z-index: 4; left: 70px; top: 669px; width: 1569px; height: 45px; resize: none; border: 0; border-radius: 1px; padding: 15px 8px 0; background: #000d1c; color: #f1fbff; caret-color: #00f2ff; font: 16px/16px Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; outline: none; overflow: hidden; }
.question::placeholder { color: #9cc7df; opacity: 1; }
.question::selection { background: #00c8f2; color: #00101d; text-shadow: none; }
.question:focus { background-color: #00152a; box-shadow: inset 0 0 0 1.5px rgba(0, 230, 255, .98), inset 0 0 13px rgba(0, 174, 255, .22), 0 0 8px rgba(0, 203, 255, .35); }
.question:focus-visible { box-shadow: inset 0 0 0 2px #00eaff, inset 0 0 15px rgba(0, 174, 255, .24), 0 0 9px rgba(0, 203, 255, .42); }
.question-help-mask { position: absolute; z-index: 4; left: 70px; top: 721px; width: 293px; height: 25px; background: #001124; border: 1px solid #175a77; border-radius: 3px; }
.question-helper { position: absolute; z-index: 5; left: 79px; top: 725px; width: 276px; height: 20px; display: flex; align-items: center; gap: 5px; color: #9fc5da; font-size: 11px; line-height: 14px; white-space: nowrap; pointer-events: none; }
.keyboard-hint-dot { flex: none; width: 9px; height: 9px; border: 1px solid #8abed9; border-radius: 50%; box-shadow: 0 0 3px rgba(90,190,230,.25); }
.hit { position: absolute; z-index: 5; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.hit:focus-visible, .display-mode:focus-visible { outline: 1px solid #49eaff; outline-offset: 1px; }
.attach { left: 30px; top: 660px; width: 35px; height: 45px; border: 0; background: transparent; }
.clear { left: 1224px; top: 719px; width: 106px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #237ca5; border-radius: 4px; color: #eef9ff; background: linear-gradient(180deg, #071a2d 0%, #000e20 100%); font: 700 14px/1 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; box-shadow: inset 0 0 6px rgba(0,166,255,.08); }
.send { left: 1347px; top: 719px; width: 220px; height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #00bbff; border-radius: 4px; color: #effcff; background: linear-gradient(180deg, #0877f5 0%, #00aeea 100%); font: 700 13px/1 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; box-shadow: inset 0 0 8px rgba(255,255,255,.14), 0 0 5px rgba(0,170,255,.18); }
.send-icon { flex: none; color: #f2fdff; font-size: 19px; line-height: 18px; transform: rotate(-15deg); }
.audio { left: 1581px; top: 719px; width: 59px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #20779e; border-radius: 4px; background: linear-gradient(180deg, #03192b 0%, #000e1f 100%); }
.audio-wave { display: flex; align-items: center; justify-content: center; gap: 2px; width: 45px; height: 20px; }
.audio-wave i { display: block; flex: 0 0 2px; border-radius: 1px; background: #8ceeff; box-shadow: 0 0 3px rgba(0,225,255,.32); }
.audio-wave i:nth-child(1) { height: 5px; } .audio-wave i:nth-child(2) { height: 12px; } .audio-wave i:nth-child(3) { height: 8px; } .audio-wave i:nth-child(4) { height: 16px; } .audio-wave i:nth-child(5) { height: 10px; } .audio-wave i:nth-child(6) { height: 13px; } .audio-wave i:nth-child(7) { height: 6px; }
.display-mode { position: absolute; z-index: 5; left: 984px; top: 720px; width: 225px; height: 28px; border: 1px solid #137fa7; border-radius: 4px; color: #d8f4ff; background: #001328; padding: 0 8px; font: 10.5px Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.nav-label-clean-mask { position: absolute; z-index: 4; pointer-events: none; left: 464px; top: 15px; width: 573px; height: 39px; background: #000b18; }
.top-navigation { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.top-tab {
  top: 12px; height: 42px; display: flex; align-items: center; justify-content: center;
  padding: 0 7px; border: 1px solid rgba(0, 174, 235, .46); border-radius: 2px;
  background: #000d1d; background-color: #000d1d; color: #9dcce5; pointer-events: auto;
  font: 700 11.5px/1 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: .55px; white-space: nowrap; text-align: center;
  box-shadow: inset 0 0 8px rgba(0, 166, 255, .07);
}
.top-tab:hover { color: #e8fbff; border-color: rgba(0, 224, 255, .8); background-color: #000d1d; }
.top-tab.is-active { color: #00f0ff; border-color: #00dfff; background: linear-gradient(180deg, #00304e, #001328); background-color: #001328; box-shadow: inset 0 0 12px rgba(0, 207, 255, .14), 0 0 7px rgba(0, 199, 255, .18); }
.tab-home { left: 465px; width: 111px; }
.tab-chat { left: 582px; width: 92px; }
.tab-soraris { left: 679px; width: 105px; }
.tab-pong { left: 790px; width: 132px; }
.tab-dice { left: 929px; width: 105px; }
.icon-settings { left: 1520px; top: 11px; width: 53px; height: 45px; }
.icon-fullscreen { left: 1577px; top: 11px; width: 58px; height: 45px; }
.visual-image-tab { left: 1350px; top: 78px; width: 43px; height: 27px; }
.visual-figure-tab { left: 1401px; top: 78px; width: 49px; height: 27px; }
.visual-graph-tab { left: 1456px; top: 78px; width: 48px; height: 27px; }
.visual-table-tab { left: 1510px; top: 78px; width: 43px; height: 27px; }
.visual-tab-selected { box-shadow: inset 0 -2px 0 #00e5ff; background: rgba(0, 205, 255, .08); }

/* Lower output panels: heading and body share one constrained grid container.
   The background artwork's outer frame remains visible around every overlay. */
.output-panel {
  position: absolute; z-index: 4; top: 770px; height: 152px; min-width: 0; min-height: 0;
  display: grid; grid-template-rows: 24px minmax(0, 1fr); overflow: visible;
  background: transparent; pointer-events: auto;
}
.evidence-panel { left: 27px; width: 491px; }
.response-panel { left: 552px; width: 563px; }
.analogy-panel { left: 1152px; width: 491px; }
.output-panel::after {
  content: ""; position: absolute; left: 6px; top: 100%; width: calc(100% - 12px); height: 6px; z-index: 10;
  background: linear-gradient(180deg, rgba(1, 8, 20, .98), #010814); pointer-events: none;
}
.output-heading {
  position: relative; z-index: 1; top: auto; left: auto; width: 100%; min-width: 0; height: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; column-gap: 8px; padding: 0 8px;
  overflow: hidden; background: linear-gradient(180deg, #000d1c, #000814);
  border-bottom: 1px solid rgba(0, 201, 255, .2); white-space: nowrap;
}
.heading-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #f58aff; font-size: 13.5px; font-weight: 700; line-height: 18px; }
.response-heading .heading-title { color: #00e8ff; }
.analogy-heading .heading-title { font-size: 12px; letter-spacing: -.15px; }
.heading-meta { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; color: #9ec4dc; font-size: 9.2px; line-height: 13px; white-space: nowrap; }
.output-body {
  position: relative; top: auto; left: auto; width: 100%; height: 100%; min-width: 0; min-height: 0;
  padding: 6px 11px; overflow: auto; overscroll-behavior: contain; scrollbar-color: #1e6b9a #06182a; scrollbar-width: thin;
  font-size: 15px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; background-image: none;
}
.output-body::-webkit-scrollbar { width: 7px; }
.output-body::-webkit-scrollbar-track { background: #06182a; }
.output-body::-webkit-scrollbar-thumb { background: #1e6b9a; border-radius: 4px; }
.evidence-body { padding: 4px 7px; }
.output-text { color: #e1f2ff; font-size: 13px; line-height: 16.5px; overflow-wrap: anywhere; white-space: pre-wrap; }
.output-meta { color: #76a5bf; font-size: 11px; line-height: 15px; margin-bottom: 5px; letter-spacing: .1px; }
.empty-note { color: #7ca4bc; font-size: 13px; line-height: 19px; }
.evidence-row { min-height: 22px; display: grid; grid-template-columns: 17px minmax(0,1fr) 57px; gap: 6px; align-items: center; color: #d5edff; font-size: 12.5px; line-height: 18px; white-space: nowrap; }
.file-glyph { position: relative; display: inline-block; width: 12px; height: 16px; border: 1px solid #89cfff; border-radius: 1px; box-shadow: 0 0 4px rgba(57,185,255,.18); }
.file-glyph::before { content: ''; position: absolute; top: 0; right: 0; border-left: 4px solid transparent; border-bottom: 4px solid #89cfff; width: 0; height: 0; }
.file-glyph::after { content: '≡'; position: absolute; left: 1px; bottom: 0; font-size: 8px; color: #89cfff; }
.evidence-name { overflow: hidden; text-overflow: ellipsis; }
.evidence-size { color: #83b8d9; text-align: right; font-size: 12px; }
.toast { position: absolute; z-index: 20; right: 23px; bottom: 22px; max-width: 440px; padding: 11px 15px; color: #e3fbff; background: rgba(0, 16, 34, .98); border: 1px solid #00cfff; box-shadow: 0 0 16px rgba(0, 180, 255, .28); font-size: 13px; line-height: 18px; }
/* Pressed controls must never tint through the reference artwork. Keep each button's opaque cover; use brightness/outline for feedback instead of a translucent wash. */
@media (prefers-reduced-motion: no-preference) {
  .hit:active { filter: brightness(1.08); }
  .top-tab:active { background: linear-gradient(180deg, #00304e, #001328); background-color: #001328; filter: brightness(1.06); }
  .hit:active:not(.top-tab):not(.visual-image-tab):not(.visual-figure-tab):not(.visual-graph-tab):not(.visual-table-tab) { outline: 1px solid rgba(0, 225, 255, .6); outline-offset: -2px; }
}