:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; background: #0a1020; color: #f8fbff; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body { margin: 0; min-height: 100svh; background: radial-gradient(circle at 50% 18%, #2b4771 0, #121d31 42%, #070b14 100%); }
main { width: min(100%, 540px); min-height: 100svh; margin: auto; padding: max(26px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; }
header { margin-top: 6px; }.eyebrow { margin: 0 0 8px; color: #9ab0ce; font-size: 12px; font-weight: 800; letter-spacing: .18em; }h1 { margin: 0; font-size: clamp(28px, 8vw, 42px); letter-spacing: -.055em; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 300px); margin: 22px 0 12px; padding: 4px; border-radius: 16px; background: #0b1424a8; border: 1px solid #50637e55; position: relative; }.mode-switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: 12px; background: #2d67bd; box-shadow: 0 4px 13px #0006; transition: transform .28s cubic-bezier(.4, 0, .2, 1); }.mode-switch.camera::before { transform: translateX(100%); }.mode { border: 0; border-radius: 12px; padding: 11px 8px; color: #9eb1cc; background: transparent; font-weight: 750; font-size: 13px; position: relative; z-index: 1; transition: color .28s; }.mode.selected { color: #fff; }
.mouse { width: min(100%, 460px); min-height: 410px; margin-top: 34px; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 155px 260px; align-items: end; gap: 8px; }.ear-slot { position: relative; z-index: 1; grid-row: 1; width: min(42vw, 174px); }.ear-slot[hidden] { display: none; }.ear-slot.slot-left { justify-self: start; }.ear-slot.slot-right { justify-self: end; }.ear { position: relative; width: 100%; aspect-ratio: 1; border: 3px solid #171c24; border-radius: 50%; background: linear-gradient(145deg, #232833, #12151b); color: #93a1b3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 800; box-shadow: 0 20px 50px #020617bb, inset 0 2px 1px #ffffff14; }.ear.selected { background: linear-gradient(145deg, #2a3140, #161a21); color: #fff; box-shadow: 0 20px 50px #020617bb, inset 0 0 0 2px #ffffff30, inset 0 2px 1px #ffffff1f; }.ear[hidden] { display: none; }.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: white; font-size: 17px; }.karen { background: #d946ef; }.grace { background: #2563eb; }.living { background: #ef8b2c; }.garage { background: #16a383; }
#talk { grid-column: 1 / 3; grid-row: 2; align-self: start; justify-self: center; position: relative; z-index: 2; margin-top: -84px; width: min(69vw, 295px); aspect-ratio: 1; border: 3px solid #e8354f; border-radius: 50%; background: radial-gradient(circle at 35% 26%, #333947, #181b22 55%, #07080c); color: #fff; box-shadow: 0 20px 50px #020617bb, inset 0 2px 1px #ffffff1f, 0 0 24px #e11d4830; font-weight: 900; letter-spacing: .08em; font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding-top: 46px; touch-action: none; user-select: none; }#talk:active,#talk.recording { transform: scale(.96); border-color: #ff5b74; background: radial-gradient(circle at 35% 26%, #52222c, #2b1017 58%, #12060a); box-shadow: 0 20px 50px #020617bb, inset 0 0 46px #e11d4838, 0 0 36px #e11d4880; }#talk.sending { background: linear-gradient(145deg, #2a303c, #171b23); border-color: #56637a; }.trace { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s; overflow: visible; }.trace path { fill: none; stroke: #9ddcff; stroke-width: 3; stroke-linecap: round; animation: traceflow 3.5s linear infinite; animation-play-state: paused; }.trace.on { opacity: 1; }.trace.on path { animation-play-state: running; }@keyframes traceflow { to { stroke-dashoffset: var(--neglen); } }#talkIcon { font-size: 35px; line-height: 1; color: #ff4560; transition: transform .22s ease; }#talkTimer { margin-top: -4px; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #ff8a99; opacity: 0; transition: opacity .2s; }#talk.recording #talkTimer, #talk.sending #talkTimer { opacity: 1; }
#status { min-height: 24px; margin: 8px 0 0; color: #e5eefb; font-weight: 750; }.hint { max-width: 350px; margin: 8px 0 0; color: #95a9c4; font-size: 12px; line-height: 1.45; }
@media (max-height: 720px) { .mouse { min-height: 340px; grid-template-rows: 128px 230px; }.ear-slot { width: min(35vw, 145px); }#talk { width: min(58vw, 250px); margin-top: -60px; } }

/* Look-in button: one tap grabs ten seconds from that room's camera. */
.avatar-space { width: 40px; height: 40px; }.peek { position: absolute; top: 41%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; box-shadow: 0 4px 12px #0006; }
.peek svg { width: 20px; height: 20px; fill: currentColor; }
.peek:active { transform: translate(-50%, -50%) scale(.9); filter: brightness(1.25); }
.peek.busy { animation: peekpulse 1s ease-in-out infinite; }
@keyframes peekpulse { 50% { box-shadow: 0 4px 12px #0006, 0 0 0 8px #ffffff26; } }

#peekView { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #060a12e0; backdrop-filter: blur(6px); }
#peekView[hidden] { display: none; }
.peek-card { width: min(94%, 430px); padding: 16px; border-radius: 18px; background: #121722; border: 1px solid #2c3646; box-shadow: 0 24px 60px #000a; }
#peekTitle { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: #e8f0fb; }
#peekVideo { width: 100%; aspect-ratio: 16/9; border-radius: 12px; background: #05080e; display: block; }
#peekNote { margin: 10px 0 12px; font-size: 12px; color: #93a5bd; min-height: 16px; }
#peekClose { width: 100%; padding: 12px; border: 0; border-radius: 12px; background: #2d67bd; color: #fff; font-weight: 800; font-size: 14px; }
#peekBar { height: 3px; margin-top: 8px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
#peekBar i { display: block; height: 100%; width: 0; border-radius: 2px; background: #e8354f; }