:root { color-scheme: dark; --bg:#10110f; --card:#1b1d19; --line:rgba(255,255,255,.12); --ink:#f6f7f2; --muted:#a3a79c; --lime:#c7ff41; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 85% -10%,rgba(199,255,65,.13),transparent 32rem),var(--bg); font-family:"Yu Gothic UI","Hiragino Sans",system-ui,sans-serif; }
button { font:inherit; cursor:pointer; }
.webapp-shell { width:min(980px,calc(100% - 36px)); margin:0 auto; padding:24px 0 64px; }
.webapp-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:28px; border-bottom:1px solid var(--line); }
.webapp-brand { color:var(--ink); text-decoration:none; font-weight:900; letter-spacing:.04em; }.webapp-brand:first-letter { color:var(--lime); }.webapp-brand span { margin-left:6px; }
.webapp-actions { display:flex; align-items:center; gap:14px; }.plan-status { color:var(--lime); font-size:12px; }.back-link { color:var(--ink); font-size:13px; text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:9px 13px; }
.hero { padding:72px 0 36px; }.eyebrow,.answer-top { color:var(--lime); font-size:11px; font-weight:900; letter-spacing:.18em; }.hero h1 { margin:12px 0 18px; font-size:clamp(39px,7vw,72px); line-height:1.04; letter-spacing:-.06em; }.hero em { color:var(--lime); font-style:normal; }.hero p:last-child { color:var(--muted); font-size:14px; line-height:1.85; }
.control-card,.answer-card { border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,#20221d,#181916); box-shadow:0 24px 55px rgba(0,0,0,.18); }.control-card { padding:25px; }.source-selector { display:flex; flex-wrap:wrap; gap:10px; }.source-selector label { border:1px solid var(--line); border-radius:999px; padding:10px 14px; color:#e1e4da; font-size:13px; }.source-selector input { accent-color:var(--lime); }
.control-row { display:flex; align-items:center; gap:12px; margin-top:22px; }.start-button,.stop-button { border:0; border-radius:11px; padding:13px 20px; font-weight:900; }.start-button { color:#151710; background:var(--lime); }.start-button:disabled,.stop-button:disabled { cursor:not-allowed; opacity:.45; }.stop-button { color:var(--ink); background:#30332c; }.connection-status { color:var(--muted); font-size:13px; }.hint { margin:17px 0 0; color:var(--muted); font-size:12px; line-height:1.65; }
.mobile-source-note { margin:0; color:#dce0d5; font-size:14px; font-weight:800; }
.answer-card { margin-top:22px; min-height:330px; padding:26px; }.answer-top { display:flex; align-items:center; justify-content:space-between; }.listening-dot { width:9px; height:9px; border-radius:50%; background:#5b5f55; }.listening-dot.active { background:var(--lime); box-shadow:0 0 0 7px rgba(199,255,65,.12); animation:pulse 1.2s infinite; }.answer { padding:26px 0 34px; min-height:170px; font-size:clamp(20px,3vw,31px); font-weight:800; line-height:1.65; white-space:pre-wrap; }.question-label { color:var(--muted); font-size:11px; font-weight:800; }.question { margin-top:8px; color:#d2d5cc; font-size:14px; line-height:1.6; white-space:pre-wrap; }@keyframes pulse { 50% { opacity:.45; } }
@media (max-width:640px) { .webapp-shell { width:min(100% - 26px,980px); }.webapp-header { align-items:flex-start; gap:14px; }.webapp-actions { align-items:flex-end; flex-direction:column; gap:7px; }.plan-status { text-align:right; }.hero { padding-top:54px; }.hero p:last-child br { display:none; }.control-row { flex-wrap:wrap; }.connection-status { width:100%; }.answer-card { min-height:300px; } }