:root { color-scheme: light; --ink:#173042; --muted:#647887; --blue:#176b87; --blue2:#0e526b; --pale:#eaf5f7; --line:#d9e5e9; --white:#fff; --danger:#a33d3d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,Segoe UI,Arial,sans-serif; color:var(--ink); background:radial-gradient(circle at 15% 10%,#dff2f4,transparent 34%),linear-gradient(145deg,#f7fbfb,#eaf2f4); }
button { font:inherit; }
.shell { width:min(920px,calc(100% - 32px)); margin:32px auto; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; color:white; font-weight:800; font-size:22px; background:linear-gradient(135deg,var(--blue),#55aebd); box-shadow:0 10px 25px #176b8730; }
.brand div { display:flex; flex-direction:column; }
.brand div span { color:var(--muted); font-size:14px; }
.status-pill { margin-left:auto; padding:8px 13px; border-radius:999px; background:#daf1e6; color:#26684b; font-size:13px; font-weight:700; }
.card { background:#ffffffed; border:1px solid #fff; border-radius:28px; padding:clamp(28px,5vw,58px); box-shadow:0 24px 70px #4669791c; }
.hero { min-height:560px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; background:linear-gradient(120deg,#ffffffee 55%,#e4f4f4dd); }
.hidden { display:none !important; }
.eyebrow { margin:0 0 14px; color:var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:.09em; font-size:13px; }
h1 { margin:0 0 20px; max-width:760px; font-size:clamp(34px,6vw,64px); line-height:1.03; letter-spacing:-.04em; }
.card > p:not(.eyebrow) { color:var(--muted); font-size:18px; line-height:1.65; max-width:690px; }
.primary,.secondary { border:0; border-radius:14px; padding:15px 22px; cursor:pointer; font-weight:800; }
.primary { margin-top:24px; color:white; background:var(--blue); box-shadow:0 10px 24px #176b8730; }
.primary:hover { background:var(--blue2); transform:translateY(-1px); }
.secondary { background:transparent; color:var(--blue); border:1px solid var(--line); }
.scale-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:28px 0; }
.scale-item { display:flex; align-items:center; gap:16px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fbfefe; }
.scale-item strong { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:white; background:var(--blue); font-size:20px; }
.hint { padding-top:8px; }
.progress-meta { display:flex; justify-content:space-between; font-weight:700; color:var(--muted); }
.progress { height:8px; margin:12px 0 42px; border-radius:10px; overflow:hidden; background:var(--pale); }
.progress span { display:block; height:100%; width:20%; border-radius:10px; background:var(--blue); transition:width .35s ease; }
.question { min-height:120px; margin:0 0 32px !important; color:var(--ink) !important; font-weight:750; font-size:clamp(25px,4vw,40px) !important; line-height:1.25 !important; }
.voice-panel { display:flex; align-items:center; gap:18px; margin:30px 0 20px; padding:18px; border-radius:18px; background:var(--pale); }
.transcript { margin:0; color:var(--muted); }
.voice-pulse,.listening-indicator { display:flex; align-items:center; justify-content:center; gap:5px; min-width:68px; height:48px; }
.voice-pulse span,.listening-indicator span { width:6px; height:12px; border-radius:8px; background:var(--blue); opacity:.35; }
.voice-pulse.active span,.listening-indicator span { animation:wave .8s ease-in-out infinite alternate; }
.voice-pulse span:nth-child(2),.listening-indicator span:nth-child(2){animation-delay:.12s}.voice-pulse span:nth-child(3),.listening-indicator span:nth-child(3){animation-delay:.24s}.voice-pulse span:nth-child(4),.listening-indicator span:nth-child(4){animation-delay:.36s}.voice-pulse span:nth-child(5){animation-delay:.48s}
.center-status { text-align:center; margin-inline:auto; font-size:15px !important; }
.score { display:flex; align-items:baseline; gap:10px; margin:28px 0; }
.score strong { font-size:clamp(64px,13vw,120px); line-height:.8; color:var(--blue); }
.score span { color:var(--muted); font-weight:700; }
.medical-note { padding-top:18px; border-top:1px solid var(--line); font-size:15px !important; }
@keyframes pulse { 50% { opacity:.35; transform:scale(1.5); } }
@keyframes wave { to { height:38px; opacity:1; } }
@media (max-width:650px) { .shell{margin:16px auto}.card{border-radius:20px;padding:26px 20px}.hero{min-height:500px}.scale-grid{grid-template-columns:1fr}.voice-panel{align-items:center}.brand .status-pill{display:none} }