:root { color-scheme: light; --paper:#f3f3ed; --ink:#121411; --muted:#a7aaa2; --line:#d7d9d0; --green:#163f33; }
* { box-sizing: border-box; }
body { margin:0; background:#d9dbd4; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; min-height:100vh; }
button { font:inherit; }
.shell { width:min(1180px,calc(100vw - 28px)); min-height:calc(100vh - 28px); margin:14px auto; background:var(--paper); border:1px solid #c5c8be; border-radius:18px; overflow:hidden; display:grid; grid-template-rows:auto auto auto 1fr auto; box-shadow:0 24px 80px rgba(25,30,24,.12); }
.topbar,.session-head,footer { display:flex; align-items:center; justify-content:space-between; }
.topbar { padding:16px 24px; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; }
.brand { display:flex; gap:9px; align-items:center; letter-spacing:-.01em; }
.mark { color:var(--green); font-size:16px; }
.status { display:flex; gap:8px; align-items:center; color:#666b63; font-weight:500; }
.status-dot { width:7px;height:7px;border-radius:50%;background:#8d9389;box-shadow:0 0 0 4px rgba(141,147,137,.12); }
.status.live .status-dot { background:#22a06b; box-shadow:0 0 0 4px rgba(34,160,107,.14); animation:pulse 1.5s infinite; }
.status.error .status-dot { background:#c84b3a; }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(34,160,107,0); } }
.session-head { padding:28px 30px 22px; }
.eyebrow { margin:0 0 8px; color:#7d827a; font-size:10px; font-weight:600; letter-spacing:.16em; }
h1 { margin:0; font-size:26px; letter-spacing:-.04em; font-weight:600; }
.actions { display:flex; gap:9px; }
.button { border-radius:999px; padding:11px 16px; cursor:pointer; border:1px solid var(--line); font-size:13px; font-weight:600; transition:.18s ease; }
.button:hover { transform:translateY(-1px); }
.button.ghost { background:transparent; color:#4d524b; }
.button.primary { border-color:#142d25; background:#173c31; color:white; min-width:144px; }
.button.primary.listening { background:#8a2f2b; border-color:#8a2f2b; }
.mic { display:inline-block; font-size:8px; margin-right:7px; vertical-align:2px; }
.meter-wrap { margin:0 30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); height:58px; position:relative; display:flex;align-items:center; }
#meter { width:100%; height:54px; }
.timer { position:absolute; right:0; background:var(--paper); padding-left:16px; font:500 11px ui-monospace,SFMono-Regular,monospace; color:#73786f; }
.transcript-panel { position:relative; min-height:420px; overflow:hidden; }
.transcript { height:100%; max-height:calc(100vh - 300px); overflow-y:auto; padding:44px 72px 90px; font-size:clamp(30px,4vw,58px); line-height:1.12; letter-spacing:-.055em; font-weight:500; scrollbar-width:none; }
.transcript::-webkit-scrollbar { display:none; }
.turn { color:var(--ink); }
.partial { color:var(--muted); }
.placeholder { color:#b5b8b0; }
.cursor { position:absolute; right:30px; bottom:38px; width:3px; height:64px; border-radius:3px; background:#294e41; opacity:.7; }
footer { padding:14px 24px; border-top:1px solid var(--line); color:#777c74; font-size:11px; }
kbd { border:1px solid #c9ccc3; border-bottom-width:2px; border-radius:5px; padding:2px 6px; background:#ecece6; font:inherit; }
.privacy { color:#475b52; }
@media (max-width:720px){ .shell{width:100%;min-height:100vh;margin:0;border:0;border-radius:0}.session-head{align-items:flex-start;gap:18px;flex-direction:column}.actions{width:100%}.actions .button{flex:1}.transcript{padding:34px 24px 80px;font-size:36px}.meter-wrap{margin:0 24px}footer span:first-child,footer .privacy{display:none} }