:root { color-scheme: light; --ink:#10213b; --muted:#5c6878; --line:#d7dfeb; --paper:#f3f6fb; --card:#fff; --green:#a31632; --green2:#7c1028; --gold:#c49432; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { overflow-x:hidden; }
body { margin:0; font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:linear-gradient(135deg,#edf3fc,#fbf8ef); min-height:100vh; }
.entry-screen { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 42%,#124fc9 0,#072b83 50%,#041b52 100%); }
.entry-screen[hidden] { display:none; }
.entry-seal-button { display:grid; justify-items:center; gap:14px; width:min(720px,94vw); padding:0 24px 26px; border:0; border-radius:32px; background:transparent; color:#fff; box-shadow:none; }
.entry-seal-button:hover { background:rgba(255,255,255,.06); }
.entry-seal-button img { display:block; width:min(560px,78vw,68vh); height:auto; border-radius:50%; filter:drop-shadow(0 22px 34px rgba(0,0,0,.38)); transition:transform .18s ease; }
.entry-seal-button:hover img,.entry-seal-button:focus-visible img { transform:scale(1.012); }
.entry-seal-button span { font:700 clamp(22px,3.5vw,38px)/1.1 Georgia,serif; color:#ffd665; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.entry-seal-button small { font-size:clamp(14px,2vw,18px); font-weight:800; letter-spacing:.04em; }
body.entry-open { overflow:hidden; }
.skip-link { position:fixed; z-index:20; top:8px; left:8px; transform:translateY(-160%); padding:10px 14px; border-radius:8px; background:#fff; color:var(--ink); box-shadow:0 4px 18px rgba(0,0,0,.2); }
.skip-link:focus { transform:translateY(0); }
header,main,footer { width:min(1120px,calc(100% - 40px)); margin:auto; }
header { padding:44px 0 26px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:18px; min-width:0; }.brand>div { min-width:0; }.brand img { filter:drop-shadow(0 8px 14px rgba(15,79,168,.2)); flex:0 0 auto; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:7px; font:700 clamp(30px,5vw,52px)/1.05 Georgia,serif; letter-spacing:-.02em; } h2 { margin-bottom:10px; }
.eyebrow { margin-bottom:8px; color:var(--green); text-transform:uppercase; font-weight:800; font-size:12px; letter-spacing:.16em; }
.subtitle,.notice { color:var(--muted); }
.ruby-wordmark { color:#a31632; letter-spacing:.01em; }
button { border:0; border-radius:9px; padding:11px 17px; background:var(--green); color:white; font-weight:750; cursor:pointer; }
button:hover { background:var(--green2); } button.secondary { background:white; color:var(--ink); border:1px solid var(--line); }
button:disabled { cursor:not-allowed; opacity:.58; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #f0b429; outline-offset:3px; }
.actions { display:flex; gap:10px; }
main { padding:28px 0 48px; display:grid; gap:22px; }
.view-navigation { display:flex; flex-wrap:wrap; gap:10px; padding:6px; width:max-content; max-width:100%; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:12px; }
.view-tab { background:transparent; color:var(--ink); }
.view-tab:hover,.view-tab.active { background:var(--green); color:white; }
.view-hidden { display:none !important; }
.status-card,.panel { background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:15px; box-shadow:0 12px 35px rgba(22,58,43,.07); }
.status-card { padding:18px 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.status-card div { display:grid; gap:2px; }.label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.panel { padding:26px; }.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.compact-panel { padding-block:20px; }
.install-help-overlay { position:fixed; z-index:50; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(680px,calc(100% - 28px)); max-height:85vh; overflow:auto; box-shadow:0 24px 80px rgba(16,33,59,.32); }
.workspace-state { display:grid; gap:3px; margin:16px 0 20px; padding:14px; border-left:4px solid var(--gold); border-radius:8px; background:#fff8e8; }
.workspace-state strong,.workspace-state span,.metric,.metric strong,.chat-brandbar>div { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:normal; }
.run-settings { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.conversation { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
#model-workspace { max-width:920px; width:100%; margin-inline:auto; min-height:70vh; display:flex; flex-direction:column; }
#model-workspace .conversation { flex:1; min-height:320px; }
#conversation-output { display:grid; gap:12px; align-content:start; max-height:52vh; overflow-y:auto; overscroll-behavior:contain; overflow-anchor:none; scrollbar-gutter:stable; padding-right:6px; scroll-behavior:auto; }
.chat-brandbar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; }
.chat-brandbar h2,.chat-brandbar .eyebrow { margin-bottom:0; }
.provider-avatar { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#13233c; color:#fff; font-weight:850; font-size:20px; }
.governed-badge { display:inline-flex; align-items:center; gap:7px; border:1px solid #b8c9e2; border-radius:999px; padding:6px 10px; color:#174f98; background:#f4f8ff; font-size:12px; font-weight:800; white-space:nowrap; }
.governed-badge img { width:22px; height:22px; }
.voice-settings { margin:12px 0; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fbfcfe; }
.voice-settings summary { cursor:pointer; color:var(--green2); font-weight:800; }
.voice-controls { display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px; margin-top:12px; }
.voice-controls button { margin-bottom:1px; }
.chat-composer { margin-top:18px; padding:12px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(16,33,59,.08); }
.chat-composer textarea { min-height:72px; border:0; padding:8px; outline:none; box-shadow:none; }
.composer-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.microphone { padding:9px 12px; display:inline-flex; align-items:center; gap:8px; }
.microphone-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.stop-icon { width:12px; height:12px; border-radius:3px; background:currentColor; display:inline-block; flex:none; }
.voice-activity { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; background:#eef5ff; color:#174f98; font-size:13px; font-weight:750; }
.voice-bars { height:25px; display:flex; align-items:center; gap:3px; }
.voice-bars i { display:block; width:4px; height:8px; border-radius:4px; background:#155fc2; animation:voice-wave .8s ease-in-out infinite alternate; }
.voice-bars i:nth-child(2),.voice-bars i:nth-child(4) { animation-delay:.18s; }
.voice-bars i:nth-child(3) { animation-delay:.36s; }
@keyframes voice-wave { from { height:7px; opacity:.55; } to { height:24px; opacity:1; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } .voice-bars i { animation:none; height:14px; } }
.chat-message { max-width:82%; margin:12px 0; padding:13px 16px; border-radius:16px; }
.chat-message strong { display:block; margin-bottom:4px; font-size:12px; color:var(--muted); }
.chat-message p { margin:0; white-space:pre-wrap; font-size:16px; line-height:1.65; }
.user-message { margin-left:auto; background:#155fc2; color:#fff; border-bottom-right-radius:5px; }
.user-message strong { color:#dceaff; }
.assistant-message { margin-right:auto; background:#f0f3f7; border:1px solid var(--line); border-bottom-left-radius:5px; }
.speak-response { margin-top:11px; padding:7px 11px; font-size:13px; }
.conversation-evidence { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:#fbfcfe; font-size:13px; }
.conversation-evidence button { padding:7px 10px; font-size:12px; white-space:nowrap; }
.conversation-timing { margin:.25rem 0 1rem 3rem; max-width:56rem; padding:.75rem 1rem; border-left:4px solid var(--gold); background:#f7f9fc; color:var(--muted); line-height:1.55; }
#model-workspace[data-provider="anthropic"] .provider-avatar { background:#b7653c; }
#model-workspace[data-provider="google"] .provider-avatar { background:#356bcc; }
#model-workspace[data-provider="meta"] .provider-avatar { background:#0866ff; }
#model-workspace[data-provider="xai"] .provider-avatar { background:#111; }
.model-choice { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 0; }
.model-choice strong { color:#52647a; font-size:.86rem; text-align:right; }
.connection-status { border-left:4px solid #2e6bd3; padding-left:12px; }
.normal-user-mode header { padding-block:22px 16px; }
.normal-user-mode header h1 { font-size:clamp(24px,4vw,38px); }
.normal-user-mode .status-card { grid-template-columns:repeat(3,1fr); }
.normal-user-mode .status-card>div:last-child { display:none; }
.normal-user-mode #selected-run { font-size:13px; }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0; }
.metric,.record { border:1px solid var(--line); background:var(--paper); border-radius:11px; padding:15px; }
.evidence-record>summary { cursor:pointer; color:var(--ink); font-weight:800; line-height:1.45; }
.evidence-record[open]>summary { margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.metric strong { display:block; font-size:25px; }.records { display:grid; gap:12px; }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:18px 0 24px; }
.admin-item,.outcome-item { border:1px solid var(--line); background:var(--paper); border-radius:11px; padding:14px; }
.admin-item span { display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.admin-item strong { display:block; margin-top:4px; overflow-wrap:anywhere; }
.outcome-grid { display:flex; flex-wrap:wrap; gap:10px; }.outcome-item { padding:9px 12px; text-transform:capitalize; }
.player-activity { text-align:left; background:var(--paper); color:var(--ink); border:1px solid var(--line); }
.player-activity:hover,.player-activity:focus-visible { background:#e7f0ff; color:var(--ink); }
.operator-role-directory { display:grid; gap:.7rem; }
.operator-role-group { display:grid; gap:.45rem; }
.operator-group-toggle { width:100%; font-weight:700; }
.operator-list { display:grid; gap:.45rem; padding-left:1rem; border-left:3px solid var(--line); }
.operator-person { width:100%; }
.player-record-browser { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.record dl { display:grid; grid-template-columns:150px 1fr; margin:0; gap:5px 14px; }.record dt { color:var(--muted); }.record dd { margin:0; overflow-wrap:anywhere; }
.canonical-record { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.canonical-record>summary { cursor:pointer; color:var(--green2); font-weight:800; }
.timing-breakdown { margin-top:16px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#f7f9fc; }
.timing-breakdown>summary { cursor:pointer; color:var(--green2); font-weight:800; }
.canonical-summary,.canonical-module dl { display:grid; grid-template-columns:minmax(150px,210px) 1fr !important; gap:6px 14px !important; margin-top:12px !important; }
.canonical-modules { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:14px; }
.canonical-module { border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:9px; padding:13px; background:#fff; }
.canonical-module h4,.canonical-record>h4 { margin:0 0 8px; }
form { display:grid; gap:14px; } label { display:grid; gap:5px; font-weight:700; } input,textarea,select { width:100%; border:1px solid #b9c9c1; border-radius:8px; padding:10px; background:#fff; color:var(--ink); font:inherit; } textarea { min-height:76px; resize:vertical; }
footer { padding:0 0 30px; color:var(--muted); font-size:13px; text-align:center; }
@media (max-width:720px) { header,main,footer { width:min(100% - 24px,1120px); } header { align-items:flex-start; flex-direction:column; padding-top:24px; }.brand { align-items:flex-start; gap:12px; }.brand img { width:56px; height:56px; }.actions { width:100%; flex-wrap:wrap; }.status-card,.normal-user-mode .status-card { grid-template-columns:1fr 1fr; }.view-navigation { width:100%; }.view-tab { flex:1 1 120px; }.panel { padding:20px; }.panel-heading { align-items:flex-start; flex-direction:column; }.run-settings,.voice-controls { grid-template-columns:1fr; }.voice-controls button { width:100%; }.record dl { grid-template-columns:1fr; }.record dd { margin-bottom:7px; }.chat-brandbar { grid-template-columns:auto 1fr; }.governed-badge { grid-column:1 / -1; width:max-content; }.chat-message { max-width:92%; }.composer-actions { align-items:stretch; }.composer-actions button { flex:1; }.conversation-evidence { align-items:flex-start; flex-direction:column; }.conversation-evidence button { width:100%; } }
@media (max-width:420px) { h1 { font-size:28px; }.brand img { width:48px; height:48px; }.status-card { grid-template-columns:1fr; }.panel { padding:17px; }.view-tab { flex-basis:100%; } }