html[data-theme="sherlock"] {
  --font-ui: "Segoe UI", "Aptos", system-ui, sans-serif;
  --font-display: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --background: #101923;
  --text: #f5f0e8;
  --text-muted: #c0c4c5;
  --text-faint: #8e9ba0;
  --accent: #c99d6b;
  --accent-strong: #f0c78e;
  --accent-on: #202024;
  --danger: #f4a59d;
  --success: #b3ddc1;
  --glass: rgba(14, 22, 30, .7);
  --glass-strong: rgba(11, 18, 25, .94);
  --glass-light: rgba(34, 41, 48, .78);
  --stroke: rgba(230, 199, 157, .26);
  --stroke-strong: rgba(238, 204, 163, .53);
  --shadow: 0 26px 70px rgba(0, 0, 0, .6);
  --room-image: url('/assets/sherlock-room.png');
}

.room-backdrop { position: fixed; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(7, 13, 19, .37), rgba(8, 13, 22, .18) 50%, rgba(8, 13, 23, .28)), var(--room-image) center center/cover no-repeat, var(--background); }
.room-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 17, .5), transparent 23%, transparent 64%, rgba(4, 10, 16, .75)); }
.brand-seal { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--accent-strong); border-radius: 50%; color: var(--accent-strong); font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; box-shadow: inset 0 0 12px rgba(218, 158, 83, .18), 0 0 14px rgba(218, 158, 83, .14); }
.brand-lockup { display: inline-flex; align-items: center; gap: .72rem; color: var(--text); font-family: var(--font-display); font-size: 1.34rem; letter-spacing: .1em; font-weight: 650; }
.brand-os { color: var(--accent); font-size: .73em; letter-spacing: .06em; }

.living-watson, .watson-companion { --orb-glow: var(--orb-idle); }
.living-watson[data-state="listening"], .watson-companion[data-state="listening"] { --orb-glow: var(--orb-listening); }
.living-watson[data-state="thinking"], .watson-companion[data-state="thinking"] { --orb-glow: var(--orb-thinking); }
.living-watson[data-state="speaking"], .watson-companion[data-state="speaking"] { --orb-glow: var(--orb-speaking); }
.living-watson[data-state="waiting_hitl"], .watson-companion[data-state="waiting_hitl"] { --orb-glow: var(--orb-waiting); }
.living-watson[data-state="alert"], .watson-companion[data-state="alert"] { --orb-glow: var(--orb-alert); }
.living-watson[data-state="voice_off"], .watson-companion[data-state="voice_off"] { --orb-glow: var(--orb-off); filter: grayscale(.9); }
.living-watson img, .watson-companion img { filter: drop-shadow(0 0 38px var(--orb-glow)); }
.living-watson[data-state="thinking"] img { animation: watson-think 2.7s ease-in-out infinite; }
.living-watson[data-state="listening"] img { animation: watson-listen 1.6s ease-in-out infinite; }
.living-watson[data-state="speaking"] img { animation: watson-speak 1.1s ease-in-out infinite; }
.living-watson[data-state="waiting_hitl"] img { animation: watson-wait 2s ease-in-out infinite; }
.living-watson[data-state="alert"] img { animation: watson-alert 1s ease-in-out infinite; }
.presence-aura { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, var(--orb-glow), transparent 65%); filter: blur(26px); opacity: calc(.55 + var(--voice-level, 0) * .35); transition: background var(--motion-slow), opacity var(--motion-fast); }
.presence-ring { position: absolute; inset: 9%; border-radius: 50%; border: 1px solid var(--orb-glow); opacity: .48; animation: watson-ring 6s ease-in-out infinite; }
@keyframes watson-ring { 0%,100% { transform: scale(.96); opacity: .28; } 50% { transform: scale(1.06); opacity: .62; } }
@keyframes watson-listen { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes watson-think { 0%,100% { transform: rotate(-3deg) scale(.99); } 50% { transform: rotate(4deg) scale(1.03); } }
@keyframes watson-speak { 0%,100% { transform: scale(1); } 50% { transform: scale(1.065); } }
@keyframes watson-wait { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes watson-alert { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (max-width: 760px) { .room-backdrop { background-position: 61% center; } .room-backdrop::after { background: linear-gradient(180deg, rgba(5, 11, 17, .55), rgba(5, 11, 17, .1) 45%, rgba(4, 10, 16, .84)); } }