:root { --muted:#626c60; }
[hidden] { display:none!important; }
body { height:100dvh; overflow:hidden; }
.topbar { height:76px; }
.top-actions { display:flex; gap:22px; }
.top-actions button { white-space:nowrap; }
body:not([data-auth="in"]) .signed-in,body:not([data-auth="in"]) #world-view { display:none; }
body[data-auth="in"] #login-view,body[data-auth="in"] #loading,body[data-auth="out"] #loading { display:none; }
body[data-auth="out"] { overflow-y:auto; }
.portrait-group { display:flex; justify-content:center; margin-bottom:30px; }
.avatar { display:inline-grid; place-items:center; width:60px; height:65px; border-radius:46% 46% 40% 40%; font:34px/1 Georgia,serif; border:5px solid var(--paper); flex:none; }
.avatar.david { background:#dce4cf; color:#38533b; }
.avatar.esther { background:#e9ddd5; color:#795348; }
.avatar.peter { background:#d9e4e9; color:#385d6a; }
.portrait-group .avatar { width:73px; height:80px; margin:0 -4px; }
.avatar.small { width:38px; height:42px; font-size:22px; border-width:3px; }
.world-layout { max-width:1320px; padding:0 32px 24px; margin:auto; height:calc(100dvh - 76px); }
.space-nav { display:flex; align-items:center; gap:20px; min-height:74px; }
.tab-group { display:flex; padding:4px; border:1px solid var(--line); border-radius:11px; gap:3px; }
.tab-group button { background:transparent; border:0; color:var(--muted); padding:9px 17px; border-radius:7px; font-size:12px; }
.tab-group button[aria-pressed="true"] { color:var(--ink); background:var(--white); box-shadow:0 1px 4px #243d3412; }
#session-kind { margin-left:auto; font-size:10px; }
#mobile-history { display:none; }
.workspace-grid { display:grid; grid-template-columns:228px minmax(0,1fr); gap:32px; height:calc(100% - 74px); }
.sidebar { min-height:0; overflow-y:auto; padding:7px 8px 10px 0; }
.persona-list { display:flex; flex-direction:column; gap:6px; margin-top:15px; }
.persona-select { background:transparent; color:var(--ink); border:1px solid transparent; border-radius:10px; width:100%; text-align:left; padding:8px 10px; display:flex; gap:10px; align-items:center; }
.persona-select[aria-pressed="true"] { border-color:var(--line); background:var(--white); }
.persona-select strong { font:19px Georgia,serif; display:block; margin-bottom:4px; }
.persona-select small { font-size:10px; color:var(--muted); }
.sidebar-note { font-size:11px; line-height:1.8; color:var(--muted); padding:5px 3px 15px; }
.sidebar-heading { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:12px; }
.sidebar-heading button { font-size:21px; padding:4px; }
.thread-list { display:flex; flex-direction:column; gap:3px; }
.thread-list button { border:0; background:transparent; text-align:left; color:var(--ink); padding:10px; border-radius:7px; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.thread-list button:hover,.thread-list button.active { background:var(--wash); }
.thread-list small { display:block; font-size:9px; color:var(--muted); margin-top:5px; }
.thread-list p { font-size:11px; line-height:1.7; color:var(--muted); }
.sidebar > .quiet-button { display:block; margin-top:16px; }
.panes { min-height:0; min-width:0; }
.pane { height:100%; }
.who,.chat-actions { display:flex; align-items:center; gap:10px; }
.conversation-header { padding-top:15px; }
.conversation-header strong { font:20px Georgia,serif; }
.conversation-disclosure { font-size:10px; color:#697365; }
.presence { font-size:10px; margin-left:9px; }
#mobile-persona { display:none; }
.branch-banner { background:#eef1e6; padding:11px 25px; font-size:11px; line-height:1.7; border-bottom:1px solid var(--line); }
.welcome { margin-top:clamp(12px,7vh,85px); }
.welcome h2 { font-size:39px; }
.message-text { line-height:1.85; }
.inspect-button { border:0; background:transparent; color:var(--muted); font-size:10px; margin-top:7px; padding:4px 0; }
.composer-notes { font-size:10px; color:var(--muted); }
.feed-pane { border:1px solid var(--line); background:var(--white); border-radius:16px; overflow-y:auto; padding:30px; }
.feed-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.feed-header h1 { font:39px/1.2 Georgia,serif; margin:10px 0; letter-spacing:-.035em; }
.feed-header p:not(.eyebrow) { color:var(--muted); font-size:12px; line-height:1.8; }
.world-disclosure { border-left:2px solid #b5c3a5; padding-left:13px; font-size:10px; line-height:1.8; color:var(--muted); margin:20px 0 25px; }
.event-form { background:var(--paper); padding:18px; border:1px solid var(--line); border-radius:11px; }
.event-form label { font-size:11px; display:block; margin-bottom:9px; }
.event-form > div { display:flex; gap:10px; }
select { background:var(--white); color:var(--ink); border:1px solid #d0d8c9; border-radius:7px; padding:10px; font-size:12px; min-width:0; }
.event-form select { flex:1; }
.event-form button,.primary { background:var(--green); color:#fff; border:0; border-radius:7px; padding:11px 16px; font-size:12px; }
.event-form .small-copy { line-height:1.7; margin-bottom:0; }
#event-source a { text-decoration:underline; text-underline-offset:2px; }
.feed-posts { display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.feed-post { border:1px solid var(--line); border-radius:12px; padding:22px; background:var(--white); }
.post-header { display:flex; align-items:center; gap:9px; }
.post-header strong { font:20px Georgia,serif; }
.post-header small { font-size:10px; color:var(--muted); margin-left:auto; }
.post-context { font-size:10px; color:var(--muted); margin:12px 0; line-height:1.7; }
.post-text { font-size:14px; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; }
.post-actions { display:flex; gap:20px; margin-top:17px; flex-wrap:wrap; }
.post-actions button { background:transparent; border:0; font-size:11px; color:var(--green); padding:4px 0; }
.feed-empty { color:var(--muted); font-size:13px; text-align:center; padding:30px; line-height:1.9; }
.shared-state { margin-top:30px; padding-top:20px; border-top:1px solid var(--line); }
.shared-state summary { cursor:pointer; color:var(--muted); font-size:11px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.65 ui-monospace,monospace; background:var(--paper); padding:15px; border-radius:8px; max-height:50dvh; overflow-y:auto; }
dialog { width:min(650px,calc(100% - 30px)); }
dialog form > label:not(.check-row) { display:block; margin:16px 0 8px; font-size:12px; }
dialog input:not([type="checkbox"]),dialog textarea { width:100%; background:var(--paper); color:var(--ink); padding:12px; border:1px solid #cfd7c8; border-radius:8px; }
dialog textarea { resize:vertical; font-size:13px; line-height:1.7; }
.check-row { display:flex; gap:10px; align-items:flex-start; font-size:12px; line-height:1.8; margin-top:22px; }
.check-row input { flex:none; width:17px; height:17px; margin:3px 0; accent-color:var(--green); }
.account-actions { border-top:1px solid var(--line); padding-top:20px; margin-top:24px; }
.danger { color:#95392f; }
.note-card { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:13px; margin:12px 0; }
.note-card small { color:var(--muted); font-size:10px; }
.note-card p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; margin:5px 0; }
.note-card button { font-size:10px; margin-right:16px; }
.notice { position:fixed; bottom:112px; left:50%; transform:translateX(-50%); background:var(--ink); color:white; padding:13px 20px; border-radius:10px; font-size:12px; width:max-content; max-width:calc(100vw - 30px); line-height:1.6; z-index:10; box-shadow:0 8px 30px #243d3422; }
@media(max-width:900px) { .world-layout { padding:0 15px 15px; } .workspace-grid { grid-template-columns:185px minmax(0,1fr); gap:16px; } .feed-pane { padding:22px; } .event-form > div { flex-direction:column; } .event-form button { width:100%; } .preview-label { font-size:8px; } }
@media(max-width:700px) { .topbar { height:64px; padding:0 18px; } .top-actions { gap:15px; } .top-actions .quiet-button { font-size:11px; } .world-layout { height:calc(100dvh - 64px); padding:0 10px 10px; } .space-nav { min-height:63px; gap:8px; } .tab-group button { padding:8px 12px; font-size:11px; } #session-kind { display:none; } #mobile-history { display:block; margin-left:auto; font-size:11px; } .workspace-grid { display:block; height:calc(100% - 63px); } .sidebar { display:none; } .panes { height:100%; } .conversation { border-radius:12px; } .conversation-header { padding:13px 14px 8px; } .conversation-header .presence { display:block; margin:3px 0 0; font-size:9px; } .conversation-disclosure { padding:0 15px 10px; font-size:9px; } .who { gap:5px; } #mobile-persona { display:block; max-width:95px; font-size:11px; padding:7px; } #another-chat { font-size:10px; } .chat-actions { gap:9px; } .scroll-region { padding:20px; } .welcome { margin:25px auto; } .welcome h2 { font-size:32px; } .welcome p { font-size:12px; } .composer-notes span:first-child { display:block; } .composer-notes { justify-content:space-between; font-size:9px; } .feed-pane { padding:20px 16px; border-radius:12px; } .feed-header h1 { font-size:32px; } .feed-header .eyebrow { font-size:8px; } .feed-post { padding:17px; } .post-text { font-size:13px; } .branch-banner { padding:10px 16px; } .post-header small { font-size:9px; max-width:85px; text-align:right; } dialog { padding:28px 24px; } .login-view { margin-top:38px; } }