:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#ecece7;background:#0a0b0b;--line:#292c2b;--muted:#979d99;--accent:#d7ff63}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#18211b 0,transparent 32%),#0a0b0b;min-height:100vh}header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line)}.brand{font-weight:800;letter-spacing:.12em}.brand span{font-size:10px;color:var(--muted)}button{background:var(--accent);border:0;padding:13px 18px;border-radius:999px;font-weight:800;cursor:pointer}.ghost{background:transparent;color:#ddd;border:1px solid var(--line)}main{max-width:1200px;margin:auto;padding:5vw}.hero{max-width:900px;padding:4vh 0}.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--accent);font-weight:800}.hero h1{font-size:clamp(36px,5.6vw,70px);line-height:1.18;letter-spacing:-.035em;margin:20px 0}.hero h1 em{font-weight:400;color:var(--accent)}.hero>p{max-width:650px;font-size:20px;line-height:1.55;color:#b9bfbb}.hero small{display:block;margin-top:18px;color:var(--muted)}.hidden{display:none!important}.workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:24px}.chat,.card{border:1px solid var(--line);background:#101211;border-radius:24px;min-height:70vh}.chat{display:flex;flex-direction:column}.progress{padding:20px 24px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.16em;color:var(--muted)}.progress div{height:3px;background:#222;margin-top:12px;border-radius:4px;overflow:hidden}.progress i{display:block;height:100%;width:4%;background:var(--accent);transition:.3s}#messages{padding:24px;flex:1;overflow:auto;max-height:58vh}.msg{max-width:82%;padding:14px 16px;margin:10px 0;border-radius:16px;line-height:1.5;white-space:pre-wrap}.ai{background:#191c1a}.user{margin-left:auto;background:#283126}form{display:flex;gap:10px;padding:18px;border-top:1px solid var(--line)}textarea{flex:1;background:#151816;color:white;border:1px solid var(--line);border-radius:15px;padding:13px;resize:none;font:inherit}.card{padding:26px}.card h2{font-size:26px}.scores{display:flex;align-items:center;justify-content:space-around;padding:20px 0;border-block:1px solid var(--line);margin:20px 0}.scores div{text-align:center;color:var(--muted)}.scores b{display:block;font-size:34px;color:white}.scores span{font-size:9px;letter-spacing:.15em}dt{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:17px}dd{margin:5px 0;line-height:1.4}footer{text-align:center;color:#5f6561;padding:30px;font-size:11px;letter-spacing:.12em}@media(max-width:800px){main{padding:22px}.workspace{grid-template-columns:1fr}.card{min-height:auto}.hero{padding:7vh 0}.hero>p{font-size:17px}header{padding:0 20px}}

.connection-status{font-size:12px;color:var(--muted);margin:12px 24px 0}button:disabled{opacity:.5;cursor:wait}textarea:disabled{opacity:.65}textarea{min-width:0}.msg,dd,.card h2{overflow-wrap:anywhere}button:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.hero small{line-height:1.6;max-width:620px}

/* Vietnamese copy: leave room for diacritics and long labels on small screens. */
button{font:inherit;font-size:14px;font-weight:700;line-height:1.4}
header{gap:12px;min-height:70px;height:auto;padding-block:16px}
.brand{white-space:nowrap}.hero h1 em{font-style:normal}
.hero>.eyebrow{font-size:11px;line-height:1.6;letter-spacing:.16em;color:var(--accent)}
.hero>.principle{font-size:14px;color:var(--muted);margin:0 0 28px}
.hero>.intro{max-width:760px;font-size:19px;line-height:1.7}.intro strong{color:#ecece7;font-weight:500}
.hero>.invitation{font-size:16px;max-width:650px;margin:24px 0 18px}
.hero>.session-note{font-size:13px;max-width:590px;color:var(--muted);margin:14px 0 0}
.hero small{font-size:12px;max-width:650px;margin-top:24px}
.score-caption{font-size:12px;line-height:1.6;color:var(--muted)}
.progress{line-height:1.6;letter-spacing:.1em}dt{line-height:1.6;letter-spacing:.08em}
@media(max-width:800px){.hero{padding:3vh 0}.hero>.intro{font-size:17px}.hero h1{margin:18px 0}.msg{max-width:92%}}
@media(max-width:420px){header{padding:14px 16px}.brand{font-size:13px;letter-spacing:.06em}.brand span{font-size:9px}header button{font-size:12px;padding:10px 12px}main{padding:20px 16px}.card{padding:20px}form{padding:14px;gap:8px}.hero h1{font-size:36px}footer{line-height:1.8;letter-spacing:.06em}}