:root{color:#213e35;font-synthesis:none;background:#f6f5ef;font-family:system-ui,-apple-system,Segoe UI,Microsoft YaHei,sans-serif;font-size:15px;line-height:1.6}*{box-sizing:border-box}body{margin:0}main{max-width:1030px;margin:auto;padding:32px 30px 24px}header,.panel-heading,.toolbar,.input-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.brand{color:#173e35;letter-spacing:2px;font-size:23px;font-weight:800;text-decoration:none}.mark{color:#f1cb80;background:#173e35;border-radius:10px;place-items:center;width:40px;height:44px;margin-right:8px;display:inline-grid;transform:rotate(-8deg)}.tag,.eyebrow{letter-spacing:2px;color:#718178;font-size:12px}.intro{padding:56px 0 28px}.eyebrow{color:#8b6832;font-weight:650}h1{letter-spacing:-1px;margin:12px 0 18px;font-size:clamp(28px,4.6vw,46px);line-height:1.35}h2{margin:0 0 20px;font-size:18px;font-weight:700}.muted{color:#6a786f;line-height:1.9}.columns{grid-template-columns:1.05fr 1fr;gap:22px;display:grid}.panel{background:#fff;border:1px solid #e1e5dc;border-radius:20px;padding:26px;box-shadow:0 8px 30px #193c2c04}.panel-heading h2{margin:0}.panel-heading{margin-bottom:24px}.status{color:#66756b;background:#eff1ec;border-radius:20px;padding:4px 10px;font-size:12px}.status[data-state=connected]{color:#24613d;background:#e3f1e8}.status[data-state=error]{color:#9f4124;background:#fff0e8}label{margin-bottom:8px;font-size:13px;font-weight:650;display:block}input{width:100%;min-width:0;font:inherit;color:#183d32;background:#fafbf8;border:1px solid #d8dfd5;border-radius:10px;padding:12px 14px}#room{letter-spacing:7px;font-size:24px;font-weight:750}.hint{color:#758176;margin:8px 0 18px;font-size:12px;line-height:1.8}button{font:inherit;cursor:pointer;touch-action:manipulation;white-space:nowrap;border:0;border-radius:10px;padding:12px 16px;font-weight:650}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #d49e40}button:disabled{opacity:.45;cursor:default}.primary{color:#fff;background:#214f3f;width:100%}.primary:hover:enabled{background:#173d30}.secondary{color:#3d5546;background:#f0f2eb;border:1px solid #e1e5da}.text-button{color:#738074;background:0 0;padding:10px 0;font-size:13px}.toolbar{margin-top:14px}.feedback{color:#93632f;min-height:20px;margin:12px 0 0;font-size:13px}#copy-fallback{margin-top:16px}#invite-url{font-size:12px}.metrics{grid-template-columns:1fr 1fr;gap:18px 30px;margin:0 0 14px;display:grid}.metrics dt{color:#7b857c;font-size:12px}.metrics dd{color:#234f3e;margin:1px 0;font-size:27px;font-weight:700}.messages{color:#65796a;max-height:115px;margin:12px 0 0;padding:0;font-size:12px;list-style:none;overflow:auto}.messages li{border-bottom:1px solid #f0f2eb;padding:4px 0}.steps{margin-top:38px;padding:0 3px}.steps>ol{grid-template-columns:repeat(3,1fr);gap:24px;padding:0;list-style:none;display:grid}.steps li{gap:12px;display:flex}.steps li>span{color:#ad8a4b;padding-top:2px;font-size:13px;font-weight:700}.steps strong{font-size:14px}.steps li p{color:#7a847b;margin:5px 0 18px;font-size:12px}footer{color:#7b857b;border-top:1px solid #e4e6dd;margin-top:34px;padding:24px 0 0;font-size:12px}footer span{color:#91998e;font-size:11px}@media (width<=650px){main{padding:22px 18px}.tag{letter-spacing:0;font-size:10px}.intro{padding:34px 2px 18px}.columns{grid-template-columns:1fr;gap:16px}.panel{padding:22px}.steps>ol{grid-template-columns:1fr;gap:4px}.steps{margin-top:28px}.steps li p{margin-bottom:12px}.metrics-panel h2{margin-bottom:18px}}@media (prefers-reduced-motion:no-preference){button{transition:background .15s}}