@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --bg: #07090d;
  --panel: rgba(17, 20, 27, .78);
  --panel-2: #11151d;
  --line: rgba(255,255,255,.09);
  --text: #f5f4ef;
  --muted: #89909c;
  --acid: #c8ff48;
  --violet: #9b7bff;
  --cyan: #59e6d4;
  --radius: 24px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}
.ambient { position: fixed; width: 460px; height: 460px; border-radius: 50%; filter: blur(120px); opacity: .11; pointer-events: none; }
.ambient-one { background: var(--violet); top: 140px; left: -220px; }
.ambient-two { background: var(--acid); right: -280px; top: 360px; }

.topbar {
  position: relative; z-index: 2;
  max-width: 1220px; margin: auto; padding: 28px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 17px; font-weight: 700; letter-spacing: -.4px; }
.brand-dot { color: var(--acid); }
.brand-mark { display: flex; align-items: center; justify-content: center; gap: 2px; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.03); }
.brand-mark i { display: block; width: 2px; border-radius: 3px; background: var(--acid); }
.brand-mark i:nth-child(1), .brand-mark i:nth-child(5) { height: 7px; opacity: .55; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 14px; }
.brand-mark i:nth-child(3) { height: 21px; }
.status-pill { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: "DM Mono"; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; background: rgba(15,17,23,.65); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #f0b845; box-shadow: 0 0 10px #f0b845; }
.status-pill.ready .status-dot { background: var(--acid); box-shadow: 0 0 10px var(--acid); }

main { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; padding: 0 28px 40px; }
.hero { max-width: 790px; padding: 70px 0 74px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--acid); font: 500 10px/1 "DM Mono"; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { width: 20px; height: 1px; background: var(--acid); }
h1 { margin: 24px 0 24px; font-size: clamp(50px, 7vw, 91px); line-height: .98; letter-spacing: -.065em; font-weight: 500; }
h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px rgba(245,244,239,.55); }
.hero p { max-width: 610px; margin: 0; color: #a4a9b2; font-size: 16px; line-height: 1.8; }
.tech-row { display: flex; align-items: center; gap: 12px; margin-top: 34px; font: 500 9px "DM Mono"; letter-spacing: .12em; color: #626874; }
.tech-row b { display: block; width: 3px; height: 3px; background: #424650; border-radius: 50%; }

.workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.card { position: relative; overflow: hidden; min-height: 690px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(20,23,31,.92), rgba(12,15,20,.95)); box-shadow: 0 24px 80px rgba(0,0,0,.18); }
.card::before { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; filter: blur(90px); opacity: .06; top: -100px; right: -70px; }
.card-stt::before { background: var(--acid); }
.card-tts::before { background: var(--violet); }
.card-heading { position: relative; display: flex; align-items: center; justify-content: space-between; }
.card-heading > div { display: flex; align-items: center; gap: 12px; }
.step { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #363b46; border-radius: 8px; color: var(--muted); font: 500 9px "DM Mono"; }
h2 { margin: 0; font-size: 22px; letter-spacing: -.04em; }
.engine { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: #747b87; font: 9px "DM Mono"; text-transform: uppercase; }
.card-intro { margin: 14px 0 26px 38px; color: var(--muted); font-size: 12px; }

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 18px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0,0,0,.18); }
.mode-switch button { height: 34px; border: 0; border-radius: 8px; color: #6f7681; background: transparent; font: 600 10px "Manrope"; cursor: pointer; }
.mode-switch button.active { color: #e7e8e2; background: #20242d; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #666c75; }
.mode-switch button.active .live-dot { background: #ff6f70; box-shadow: 0 0 8px rgba(255,111,112,.7); }
.live-stage { position: relative; height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: radial-gradient(circle at center, rgba(200,255,72,.035), transparent 55%), rgba(255,255,255,.012); }
.live-orbit { position: relative; display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid rgba(200,255,72,.08); border-radius: 50%; z-index: 2; }
.live-orbit::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(200,255,72,.11); border-radius: 50%; }
.live-button { position: relative; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--acid); cursor: pointer; transition: .2s; }
.live-button:hover { transform: scale(1.05); }
.live-button .stop-icon { width: 12px; height: 12px; background: #190c0c; border-radius: 3px; }
.live-stage.listening .mic-icon { display: none; }
.live-stage.listening .stop-icon { display: block; }
.live-stage:not(.listening) .stop-icon { display: none; }
.live-stage.listening .live-button { background: #ff6f70; box-shadow: 0 0 0 8px rgba(255,111,112,.07), 0 0 30px rgba(255,111,112,.12); }
.live-stage.listening .live-orbit { border-color: rgba(255,111,112,.18); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .8; } }
.live-heading { z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 10px; }
.live-heading strong { font-size: 11px; }
.live-heading span { color: #686f7a; font-size: 9px; }
.live-bars { position: absolute; inset: auto 0 0; height: 55px; display: flex; align-items: end; justify-content: center; gap: 3px; opacity: .12; }
.live-bars i { display: block; width: 2px; height: 4px; border-radius: 3px 3px 0 0; background: var(--acid); transition: height .08s; }
.live-stage.listening .live-bars { opacity: .25; }
.live-transcript { min-height: 252px; margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(0,0,0,.13); }
.live-transcript-head { display: flex; align-items: center; justify-content: space-between; color: #777e89; font: 9px "DM Mono"; text-transform: uppercase; letter-spacing: .06em; }
.live-transcript-head > span { display: flex; align-items: center; gap: 7px; }
.live-transcript-head > span i { width: 5px; height: 5px; border-radius: 50%; background: #59606b; }
.live-stage.listening + .live-transcript .live-transcript-head > span i { background: #ff6f70; box-shadow: 0 0 7px #ff6f70; }
.live-transcript-head > div { display: flex; align-items: center; gap: 5px; }
.text-button { border: 0; color: #656c77; background: transparent; font: 9px "DM Mono"; cursor: pointer; }
.text-button:hover { color: #afb4bc; }
.live-copy { min-height: 164px; max-height: 164px; overflow-y: auto; padding: 17px 3px 10px; color: #e4e4df; font-size: 15px; line-height: 1.75; }
.live-copy.empty { display: flex; align-items: center; justify-content: center; }
.live-placeholder { color: #4e545e; font-size: 11px; }
.live-copy:not(.empty) .live-placeholder { display: none; }
.partial-text { color: #89919c; }
.partial-text:not(:empty)::after { content: "▋"; margin-left: 2px; color: var(--acid); animation: blink .8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.whisper-pending { color: #aeb3bb; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #626975; text-underline-offset: 4px; }
.live-legend { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: #555c66; font: 7px "DM Mono"; text-transform: uppercase; }
.live-legend span { display: flex; align-items: center; gap: 4px; }
.live-legend i { width: 4px; height: 4px; border-radius: 50%; }
.legend-live { background: #89919c; }
.legend-final { background: var(--acid); }
.live-legend b { margin-left: auto; color: #686f79; font-weight: 400; }
.pipeline-toggle { display: flex; align-items: center; gap: 8px; margin-top: 11px; color: #777e89; font: 8px "DM Mono"; text-transform: uppercase; cursor: pointer; }
.pipeline-toggle input, .assistant-options input { display: none; }
.pipeline-toggle > span, .assistant-options label > span { position: relative; width: 25px; height: 14px; border-radius: 10px; background: #2b3038; transition: .2s; }
.pipeline-toggle > span::after, .assistant-options label > span::after { content: ""; position: absolute; width: 8px; height: 8px; left: 3px; top: 3px; border-radius: 50%; background: #717985; transition: .2s; }
.pipeline-toggle input:checked + span, .assistant-options input:checked + span { background: rgba(200,255,72,.18); }
.pipeline-toggle input:checked + span::after, .assistant-options input:checked + span::after { left: 14px; background: var(--acid); }

.recorder { height: 150px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.018); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: .25s ease; }
.recorder.drag { border-color: var(--acid); background: rgba(200,255,72,.04); }
.record-button { position: relative; display: grid; place-items: center; width: 53px; height: 53px; border: 0; border-radius: 50%; background: var(--acid); cursor: pointer; box-shadow: 0 0 0 7px rgba(200,255,72,.07), 0 8px 25px rgba(200,255,72,.12); transition: .2s ease; z-index: 2; }
.record-button:hover { transform: scale(1.05); }
.mic-icon { width: 13px; height: 19px; border: 2px solid #101408; border-radius: 8px; position: relative; }
.mic-icon::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 17px; height: 9px; transform: translateX(-50%); border: solid #101408; border-width: 0 2px 2px; border-radius: 0 0 10px 10px; }
.stop-icon { display: none; width: 13px; height: 13px; background: #13170c; border-radius: 3px; }
.recorder.recording .mic-icon { display: none; }
.recorder.recording .stop-icon { display: block; }
.recorder.recording .record-button { background: #ff6c6c; box-shadow: 0 0 0 8px rgba(255,108,108,.08); }
.record-copy { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 15px; z-index: 2; }
.record-copy strong { font-size: 12px; }
.record-copy span { color: #69707b; font-size: 10px; }
.timer { position: absolute; right: 14px; top: 13px; color: #656c78; font: 10px "DM Mono"; }
.waveform { position: absolute; inset: 0; display: flex; gap: 3px; align-items: center; justify-content: center; opacity: .15; overflow: hidden; }
.waveform i { display: block; width: 2px; background: var(--acid); border-radius: 3px; transition: height .08s; }
.recorder.recording .waveform { opacity: .28; }

.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #505661; font: 9px "DM Mono"; text-transform: uppercase; }
.divider::before,.divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.upload { min-height: 68px; display: flex; align-items: center; gap: 13px; padding: 13px 16px; border: 1px dashed #343944; border-radius: 14px; cursor: pointer; transition: .2s; }
.upload:hover { border-color: #68707d; background: rgba(255,255,255,.02); }
.upload svg { width: 20px; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.upload > span { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.upload strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload small { color: #676e79; font-size: 9px; }
.upload input { display: none; }
.control-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 14px; margin-top: 22px; }
label, .voice-label { color: #7d8490; font: 9px "DM Mono"; text-transform: uppercase; letter-spacing: .08em; }
select { width: 100%; margin-top: 8px; appearance: none; color: var(--text); background: #171b23 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237d8490'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat calc(100% - 13px) center; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: 11px "Manrope"; outline: none; }
.primary { height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; background: var(--acid); color: #11150a; font: 700 11px "Manrope"; cursor: pointer; transition: .2s; }
.primary:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.08); }
.primary:disabled { opacity: .32; cursor: not-allowed; }
.primary svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.primary.loading span { opacity: .7; }
.primary.loading::after { content: ""; width: 12px; height: 12px; border: 2px solid rgba(0,0,0,.3); border-top-color: #0c0f07; border-radius: 50%; animation: spin .7s linear infinite; }
.primary.loading svg, .primary.loading .play-triangle { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.result { margin-top: 18px; padding: 15px; border-radius: 13px; border: 1px solid rgba(200,255,72,.15); background: rgba(200,255,72,.035); animation: rise .35s ease; }
.result-head { display: flex; align-items: center; justify-content: space-between; color: var(--acid); font: 9px "DM Mono"; text-transform: uppercase; }
.result p { max-height: 112px; overflow: auto; margin: 9px 0 0; color: #d7d8d4; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.icon-button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); color: #9299a3; cursor: pointer; }
.icon-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.text-wrap { position: relative; }
textarea { display: block; resize: vertical; width: 100%; min-height: 160px; padding: 17px 17px 34px; color: #e9e8e3; background: rgba(255,255,255,.018); border: 1px solid var(--line); border-radius: 15px; outline: none; font: 13px/1.75 "Manrope"; transition: border-color .2s; }
textarea:focus { border-color: rgba(155,123,255,.55); }
.counter { position: absolute; right: 13px; bottom: 11px; color: #575e69; font: 9px "DM Mono"; }
.counter b { font-weight: 400; }
.voice-label { margin: 22px 0 9px; }
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.voice-option { position: relative; display: flex; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); color: var(--text); text-align: left; cursor: pointer; }
.voice-option.active { border-color: rgba(155,123,255,.5); background: rgba(155,123,255,.055); }
.voice-option > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.voice-option strong { font-size: 10px; }
.voice-option small { color: #626975; font-size: 8px; }
.voice-option i { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 1px solid #525965; border-radius: 50%; }
.voice-option.active i { border: 2px solid #17141f; background: var(--violet); box-shadow: 0 0 0 1px var(--violet); }
.avatar { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; font: 600 11px "DM Mono"; }
.avatar-a { color: #c9bbff; background: linear-gradient(145deg,#3e335e,#231d36); }
.avatar-b { color: #9eeae1; background: linear-gradient(145deg,#244e4c,#172e2e); }
.speed-control { margin-top: 22px; }
.speed-control > div:first-child { display: flex; justify-content: space-between; color: #7d8490; font: 9px "DM Mono"; text-transform: uppercase; letter-spacing: .08em; }
.speed-control strong { color: #b7bcc4; font-weight: 500; }
input[type="range"] { width: 100%; height: 3px; margin: 14px 0 6px; appearance: none; border-radius: 3px; background: #2b3038; accent-color: var(--violet); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; border: 3px solid #191c23; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 1px var(--violet); }
.range-labels { display: flex; justify-content: space-between; color: #515762; font: 8px "DM Mono"; }
.tts-submit { width: 100%; height: 43px; margin-top: 24px; background: var(--violet); color: white; }
.play-triangle { display: block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.player { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border: 1px solid rgba(155,123,255,.18); background: rgba(155,123,255,.045); border-radius: 13px; animation: rise .35s ease; }
.player-play { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border: 0; border-radius: 50%; color: white; background: var(--violet); cursor: pointer; }
.player-play .play-triangle { margin-left: 2px; }
.pause-icon { display: none; width: 10px; height: 13px; border-left: 3px solid white; border-right: 3px solid white; }
.player-play.playing .play-triangle { display: none; }
.player-play.playing .pause-icon { display: block; }
.player-main { flex: 1; }
.player-main input { margin: 6px 0 0; height: 2px; }
.player-line { display: flex; justify-content: space-between; color: #7c8390; font: 8px "DM Mono"; }

.assistant-card { position: relative; margin-top: 18px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,21,29,.95), rgba(10,13,18,.97)); }
.assistant-card::before { content: ""; position: absolute; width: 360px; height: 260px; right: -120px; top: -150px; border-radius: 50%; background: var(--cyan); opacity: .05; filter: blur(90px); pointer-events: none; }
.assistant-header { position: relative; display: flex; align-items: center; justify-content: space-between; }
.assistant-title { display: flex; align-items: center; gap: 12px; }
.assistant-title > div { display: flex; flex-direction: column; gap: 4px; }
.assistant-title p { margin: 0; color: var(--muted); font-size: 10px; }
.assistant-engine { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(89,230,212,.15); border-radius: 8px; color: #75aaa5; background: rgba(89,230,212,.035); font: 8px "DM Mono"; text-transform: uppercase; }
.assistant-engine .status-dot { background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.pipeline-visual { display: flex; align-items: center; max-width: 680px; margin: 25px auto 22px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.16); }
.pipeline-visual span { display: flex; align-items: center; gap: 6px; color: #626974; font: 8px "DM Mono"; text-transform: uppercase; white-space: nowrap; }
.pipeline-visual span b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #737b87; background: #22262e; font-weight: 500; }
.pipeline-visual span.active { color: #a8b5b3; }
.pipeline-visual span.active b { color: #0e1715; background: var(--cyan); }
.pipeline-visual i { flex: 1; height: 1px; min-width: 25px; margin: 0 10px; background: linear-gradient(90deg,#303640,#3d5755); }
.conversation { min-height: 250px; max-height: 480px; overflow-y: auto; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: rgba(0,0,0,.14); scroll-behavior: smooth; }
.welcome-message { display: flex; gap: 13px; align-items: flex-start; max-width: 600px; margin: 55px auto; color: #6e7580; }
.welcome-message > div { padding-top: 2px; }
.welcome-message strong { color: #aeb4b9; font-size: 11px; }
.welcome-message p { margin: 5px 0 0; font-size: 10px; line-height: 1.65; }
.assistant-avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid rgba(89,230,212,.2); border-radius: 10px; color: var(--cyan); background: rgba(89,230,212,.06); font: 600 11px "DM Mono"; }
.chat-message { display: flex; gap: 11px; max-width: 78%; margin-bottom: 15px; animation: rise .25s ease; }
.chat-message.user { margin-left: auto; flex-direction: row-reverse; }
.chat-avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; color: #9aa1ab; background: #252a33; font: 600 9px "DM Mono"; }
.chat-message.assistant .chat-avatar { color: var(--cyan); background: rgba(89,230,212,.08); }
.chat-bubble { padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px 13px 13px; color: #d7d8d4; background: rgba(255,255,255,.025); font-size: 11px; line-height: 1.7; white-space: pre-wrap; }
.chat-message.user .chat-bubble { border-color: rgba(200,255,72,.12); border-radius: 13px 4px 13px 13px; background: rgba(200,255,72,.045); }
.chat-meta { margin-top: 5px; color: #545b65; font: 7px "DM Mono"; text-transform: uppercase; }
.typing-cursor::after { content: "▋"; margin-left: 2px; color: var(--cyan); animation: blink .7s step-end infinite; }
.assistant-composer { display: flex; gap: 9px; align-items: flex-end; margin-top: 12px; }
.assistant-composer textarea { min-height: 45px; max-height: 110px; resize: none; padding: 13px 15px; border-radius: 12px; line-height: 1.5; }
.assistant-composer button { display: grid; place-items: center; flex: 0 0 45px; width: 45px; height: 45px; border: 0; border-radius: 12px; color: #10201d; background: var(--cyan); cursor: pointer; }
.assistant-composer button:disabled { opacity: .3; cursor: wait; }
.assistant-composer svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.assistant-options { display: flex; align-items: center; gap: 17px; margin-top: 11px; color: #5e6570; font: 8px "DM Mono"; text-transform: uppercase; }
.assistant-options label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.assistant-options button { margin-left: auto; border: 0; color: #5e6570; background: transparent; font: inherit; text-transform: uppercase; cursor: pointer; }
.assistant-options button:hover { color: #a0a6af; }
.assistant-speaking { color: var(--cyan) !important; }
.assistant-audio { width: 100%; height: 34px; margin-top: 12px; opacity: .72; }

footer { display: flex; justify-content: space-between; padding: 34px 4px 0; color: #4e535d; font: 9px "DM Mono"; text-transform: uppercase; letter-spacing: .06em; }
footer b { color: #6c737e; font-weight: 500; }
.toast { position: fixed; z-index: 10; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 11px 16px; border: 1px solid var(--line); border-radius: 10px; color: #dadcd5; background: #171b22; box-shadow: 0 12px 40px #0008; font-size: 11px; opacity: 0; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.toast.error { border-color: rgba(255,100,100,.3); color: #ffb1b1; }
.hidden { display: none !important; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 820px) {
  .hero { padding: 48px 0 52px; }
  .workspace { grid-template-columns: 1fr; }
  .card { min-height: auto; }
  .chat-message { max-width: 92%; }
}
@media (max-width: 520px) {
  .topbar, main { padding-left: 16px; padding-right: 16px; }
  .status-pill span:last-child { display: none; }
  .hero { padding-top: 38px; }
  h1 { font-size: 50px; }
  .card { padding: 22px; border-radius: 20px; }
  .card-intro { margin-left: 0; }
  .engine { display: none; }
  .control-row, .voice-grid { grid-template-columns: 1fr; }
  .assistant-card { padding: 21px; }
  .assistant-header { align-items: flex-start; }
  .assistant-engine { display: none; }
  .pipeline-visual { overflow-x: auto; justify-content: flex-start; border-radius: 12px; }
  .pipeline-visual i { flex: 0 0 18px; min-width: 18px; margin: 0 6px; }
  .assistant-options { flex-wrap: wrap; }
  .assistant-options button { margin-left: 0; }
  footer { gap: 15px; flex-direction: column; }
}