:root { color-scheme: light; --paper:#f3f1eb; --card:#fffdf8; --ink:#202a2c; --muted:#687174; --line:#c9cfca; --accent:#17696e; --danger:#9a3412; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 system-ui,sans-serif; }
main { max-width:1100px; margin:auto; padding:24px; }
h1,h2,h3 { margin:0 0 12px; font-family:ui-sans-serif,system-ui,sans-serif; }
.eyebrow { color:var(--accent); letter-spacing:.14em; font-size:.75rem; text-transform:uppercase; }
.panel,.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; box-shadow:0 3px 12px #2030300d; }
.panel { margin:16px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
label { display:grid; gap:5px; color:var(--muted); font-size:.9rem; }
input,select,button { font:inherit; border:1px solid var(--line); border-radius:6px; padding:9px 11px; background:#fff; color:var(--ink); }
button { cursor:pointer; background:var(--accent); color:#fff; border-color:var(--accent); }
button.secondary { background:transparent; color:var(--accent); }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #17696e55; outline-offset:2px; }
.hidden { display:none !important; }
.topbar { display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.scene { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.object { min-height:110px; display:grid; place-items:center; gap:7px; text-align:center; }
.glyph { min-width:60px; min-height:60px; display:grid; place-items:center; color:var(--ink); }
.glyph svg { width:48px; height:48px; }
.notes { display:grid; gap:9px; }
.note { background:#f7f2d5; padding:10px 12px; border-left:4px solid #b4a25b; }
.controls { display:flex; gap:8px; align-items:end; flex-wrap:wrap; }
.chat { display:grid; grid-template-columns:1fr auto; gap:8px; }
.messages { min-height:80px; max-height:220px; overflow:auto; background:#f7f8f6; padding:10px; margin-bottom:8px; }
.message { margin:3px 0; }
.muted { color:var(--muted); }
.error { color:var(--danger); min-height:1.5em; }
.presence { display:flex; gap:8px; flex-wrap:wrap; }
.person { background:#e5ece9; border-radius:999px; padding:3px 10px; }
@media (max-width:600px) { main { padding:14px; } .panel { padding:13px; } }