:root { color-scheme: dark; font-family: "DM Sans", "Noto Sans JP", sans-serif; background: #0d0f13; color: #f4f2ea; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0%, #27352e 0, transparent 38%), #0d0f13; }
button { font: inherit; }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.app { width: min(720px, 100%); }
.eyebrow { color: #a9c2ad; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }
h1 { font-family: "Noto Sans JP", sans-serif; font-size: clamp(38px, 8vw, 76px); margin: 8px 0 10px; line-height: 1; font-weight: 500; }
.lede { color: #b7b8b6; font-size: 18px; max-width: 560px; line-height: 1.55; }
.panel { margin-top: 34px; padding: 26px; border: 1px solid #30352f; background: rgba(18, 21, 20, .88); border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.status { display: flex; align-items: center; gap: 10px; color: #c8ccc8; font-size: 14px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #697069; }
.dot.live { background: #73d18a; box-shadow: 0 0 0 6px rgba(115,209,138,.12); }
.transcript { min-height: 210px; display: grid; align-content: center; gap: 18px; padding: 24px 0; }
.line { border-left: 2px solid #394239; padding-left: 16px; }
.line span { display: block; color: #8e958e; font-size: 12px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .12em; }
.line p { margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 20px; line-height: 1.6; }
.empty { color: #777d78; text-align: center; line-height: 1.6; }
.controls { display: flex; gap: 12px; }
.primary, .secondary { border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer; transition: transform .15s, opacity .15s; }
.primary { background: #eff3e9; color: #151915; font-weight: 600; flex: 1; }
.secondary { background: #292e2a; color: #e8ebe6; }
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.error { margin-top: 16px; padding: 12px 14px; background: #3b2020; color: #ffc9c9; border-radius: 12px; font-size: 14px; }
.note { color: #737873; font-size: 12px; margin-top: 18px; text-align: center; }
@media (max-width: 520px) { .shell { padding: 16px; } .panel { padding: 20px; } .controls { flex-direction: column; } }