:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#17211b;background:#f2f4ef;--ink:#17211b;--muted:#69736d;--card:#fff;--accent:#236b49}*{box-sizing:border-box}body{margin:0;min-height:100vh}header,main,footer{max-width:1180px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:32px 24px 20px}h1{font-size:clamp(1.35rem,3vw,2rem);margin:.2rem 0}small{font-weight:750;letter-spacing:.12em;color:var(--muted)}.status{display:flex;align-items:center;gap:8px;background:#fff;padding:10px 14px;border-radius:999px}#sse-dot{width:9px;height:9px;border-radius:50%;background:#c18e33}#sse-dot.online{background:#2c9d68}main{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;padding:0 24px 32px}.section-head,article,.canvas{background:var(--card);border:1px solid #dde2da}.section-head{border-radius:18px 18px 0 0;padding:20px;display:flex;justify-content:space-between;align-items:center}.section-head h2{margin:4px 0 0}.canvas{border-top:0;border-radius:0 0 18px 18px;padding:20px;display:grid;grid-template-columns:repeat(12,1fr);gap:14px;min-height:320px}.component{background:#f5f7f3;border-radius:13px;padding:18px;min-width:0}.component-error{border:1px solid #b84141;color:#8d2e2e}.tone-title{font-size:1.4rem;font-weight:700}.metric-value{font-size:3.5rem;font-weight:780;margin-top:8px}.engine-button,.quiet{font:inherit;border:0;border-radius:10px;padding:12px 18px;cursor:pointer}.engine-button{background:var(--accent);color:white;width:100%;min-height:52px}.quiet{background:#edf1eb;color:var(--ink)}aside{display:grid;gap:20px}article{border-radius:18px;padding:20px}.big{font-size:3rem;font-weight:760;margin-top:8px}article p{color:var(--muted);margin-top:0}dl div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #e7eae5;padding:10px 0}dt{color:var(--muted)}dd{margin:0;text-align:right;word-break:break-word}ol{padding-left:20px;margin-bottom:0}li{padding:5px}.gap{background:#fff2e0;color:#75470a;border-radius:8px;padding:10px;margin-top:8px}footer{padding:0 24px 30px;color:var(--muted);font-size:.85rem}@media(max-width:760px){header{padding-top:20px}main{grid-template-columns:1fr}.canvas{gap:10px}.component{grid-column:1/-1!important}header h1{max-width:230px}.status{font-size:.8rem;padding:8px 10px}}