:root{--ic-ink:#e8ecef;--ic-mute:#8b98a3;--ic-panel:#1a2229;--ic-line2:#2a343d;--ic-acc:#5ec2a8;--ic-floor:#1b252d;--bg:#0f1418}
@media (prefers-color-scheme:light){:root{--ic-ink:#1d2328;--ic-mute:#5d6870;--ic-panel:#fff;--ic-line2:#d3d9de;--ic-acc:#1f8a6f;--ic-floor:#dfe5e9;--bg:#eef1f3}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ic-ink);font:14px/1.45 system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
header{display:flex;align-items:baseline;gap:14px;padding:12px 20px;background:var(--ic-panel);border-bottom:1px solid var(--ic-line2);flex-wrap:wrap}
.logo{font-weight:700;font-size:16px}.logo span{color:var(--ic-acc)}
.sub{color:var(--ic-mute);font-size:12.5px}
.mock{margin-left:auto;font-size:12px;color:var(--ic-mute)}
main{flex:none;display:grid;grid-template-columns:1fr 380px;grid-template-rows:minmax(0,1fr);gap:14px;padding:14px 20px;height:max(560px,calc(100vh - 110px));min-height:0}
icomm-rooms3d{border:1px solid var(--ic-line2);border-radius:10px;background:radial-gradient(ellipse at 50% 35%,var(--ic-panel),var(--bg) 75%);height:100%;min-height:0;overflow:hidden}
icomm-timeline{height:100%;min-height:0}
footer{color:var(--ic-mute);font-size:11.5px;padding:0 20px 16px}
@media (max-width:980px){main{grid-template-columns:1fr;height:auto}icomm-rooms3d{height:520px}icomm-timeline{height:520px}}