:root{color-scheme:dark;--bg:#001419;--surface:#001419;--raised:#00202a;--selected:#002c38;--text:#adb7b7;--bright:#fdf5e2;--muted:#7d949a;--line:#23434a;--accent:#29a298;--pink:#d23681;--yellow:#b28500;--blue:#79acd0;--green:#849900;font-family:'DejaVu Sans Mono','Liberation Mono',monospace;font-size:12px;background:var(--bg);color:var(--text);--split-x:62%;--split-y:50%}
:root[data-palette=wisp]{--bg:#151821;--surface:#1c202b;--raised:#212735;--selected:#263b56;--text:#b8c3d6;--bright:#e8ecf3;--muted:#8d96a8;--line:#354052;--accent:#61a7ff;--pink:#df8ac9;--yellow:#f5b94c;--blue:#8dc5eb;--green:#4bd38a}
:root[data-palette=olive]{--bg:#000;--surface:#080908;--raised:#171914;--selected:#242a1d;--text:#bdc2b7;--bright:#d3d5cf;--muted:#92988f;--line:#34382f;--accent:#a2b586;--pink:#a291d4;--yellow:#c9b458;--blue:#b5c3a4;--green:#79b88a}
:root[data-palette=violet]{--bg:#191722;--surface:#201c2a;--raised:#292336;--selected:#39304c;--text:#c8bdd9;--bright:#eee7fa;--muted:#a49bb6;--line:#443651;--accent:#b79aff;--pink:#df91bb;--yellow:#d6b983;--blue:#a0bcf1;--green:#96b78e}
:root[data-palette=graphite]{--bg:#191b20;--surface:#23262d;--raised:#292f38;--selected:#303e50;--text:#c0c6d1;--bright:#e8ecf3;--muted:#a1a8b4;--line:#3c4350;--accent:#9bb9df;--pink:#c79eb7;--yellow:#cbbb8b;--blue:#8dbccb;--green:#91bca2}
:root[data-palette=ember]{--bg:#211a18;--surface:#2c2421;--raised:#382b25;--selected:#49362a;--text:#d1bbb0;--bright:#f4e9df;--muted:#b2a299;--line:#524039;--accent:#eeb17b;--pink:#dc939b;--yellow:#d6bb79;--blue:#9ebbbd;--green:#a4b98f}
*{box-sizing:border-box}body{margin:0;height:100svh;display:flex;flex-direction:column;overflow:hidden}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:var(--muted);border:1px solid transparent;background:transparent;padding:6px 8px;cursor:pointer}button:hover{color:var(--bright);background:var(--raised)}button:disabled{opacity:.45;cursor:default}a{color:var(--accent);text-underline-offset:4px}a:hover{color:var(--bright)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--accent);outline-offset:3px}button[aria-pressed=true]{background:var(--selected);color:var(--bright);border-color:var(--line)}[hidden]{display:none!important}h1,h2,h3,p,figure{margin:0}i{display:inline-block;width:7px;height:7px;background:var(--green);margin-right:7px;font-style:normal}.dim{color:var(--muted)}.skip-link{position:fixed;top:-60px;left:15px;z-index:10;background:var(--bg);padding:12px}.skip-link:focus{top:8px}.app-bar{display:flex;align-items:center;gap:12px;padding:9px 13px;border-bottom:1px solid var(--line);min-height:61px;flex-shrink:0}.wordmark{display:block;width:118px;flex-shrink:0}.wordmark img{display:block;width:100%;height:42px;object-fit:contain;object-position:left}.app-presence{font-size:10px;color:var(--muted);white-space:nowrap}.appearance{display:flex;gap:20px;align-items:center;margin-left:auto}.style-toggle{display:flex;gap:3px}.style-toggle button{padding:8px 10px;white-space:nowrap}.palette-label{display:flex;gap:8px;align-items:center}.palette-label>span{color:var(--muted);font-size:10px}select{background:var(--bg);color:var(--text);border:1px solid var(--line);padding:7px;max-width:180px}.preview-tag{color:var(--yellow);font-size:10px;white-space:nowrap}.app-body{display:grid;grid-template-columns:215px minmax(0,1fr);gap:12px;padding:12px 12px 0;flex:1;min-height:0}#sidebar{display:flex;flex-direction:column;gap:20px;padding-top:7px;min-height:0;overflow:auto}.side-panel{border:1px solid var(--line);position:relative;padding:19px 8px 9px}.side-panel h2{position:absolute;top:-8px;left:7px;font-size:10px;line-height:14px;font-weight:400;background:var(--bg);padding:0 6px;color:var(--yellow)}.nav-panel{border-color:var(--yellow)}.server-name{font-size:9px;padding:4px 5px 15px;color:var(--muted)}nav{display:flex;flex-direction:column;gap:5px}nav a{padding:10px 8px;text-decoration:none;color:var(--text);font-size:12px}nav a span{color:var(--muted);margin-right:9px;font-size:10px}nav a[aria-current=page]{background:var(--selected);color:var(--bright);border-left:2px solid var(--accent)}.rooms-panel{border-color:var(--pink)}.rooms-panel h2{color:var(--pink)}.side-label{font-size:10px;color:var(--accent);padding:6px 4px 10px}.rooms-panel button{width:100%;display:flex;justify-content:space-between;text-align:left;padding:9px 4px;font-size:11px;color:var(--text)}.rooms-panel button>span:last-child{color:var(--muted);font-size:10px}.rooms-panel button i{width:6px;height:6px}.offline{padding:9px 4px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between}.playground-help h2{color:var(--blue);font-size:9px}.playground-help p{font-size:10px;line-height:1.8;margin-bottom:10px;color:var(--muted)}.playground-help b{font-size:15px;color:var(--bright)}#reset{font-size:10px;padding:6px 0;color:var(--accent)}.sidebar-bottom{margin-top:auto;padding:10px 6px 20px;font-size:10px;line-height:1.9;color:var(--muted)}.sidebar-bottom b{color:var(--accent)}.sidebar-bottom small{display:block;font-size:9px;margin-top:9px;color:var(--muted)}.workspace-shell{min-width:0;min-height:0;display:flex;flex-direction:column}.workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 1px 13px;min-height:37px;flex-shrink:0}.workspace-path{font-size:10px;color:var(--accent)}.workspace-path .dim{font-size:9px}.workspace-bar>div{white-space:nowrap}.workspace-bar button{font-size:10px}.workspace{position:relative;display:grid;grid-template-columns:minmax(0,var(--split-x)) minmax(0,1fr);grid-template-rows:minmax(0,var(--split-y)) minmax(0,1fr);gap:12px;flex:1;min-height:0;padding-bottom:12px}.tile{min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid var(--tile-color,var(--line));position:relative;background:var(--surface)}.tile[data-slot="0"]{grid-column:1;grid-row:1/3}.tile[data-slot="1"]{grid-column:2;grid-row:1}.tile[data-slot="2"]{grid-column:2;grid-row:2}.tile-bar{height:34px;display:flex;align-items:center;flex-shrink:0;border-bottom:1px solid var(--line);gap:2px;padding:0 4px}.tile-title{color:var(--tile-color,var(--accent));font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.tile-grip{touch-action:none;cursor:grab;font-size:17px;padding:1px 6px;color:var(--muted);user-select:none}.tile-move,.tile-focus,.tile-close{font-size:10px;padding:4px}.tile-scroll{overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain}.story-tile{--tile-color:var(--yellow)}.chat-tile{--tile-color:var(--pink)}.chat-tile:nth-of-type(3){--tile-color:var(--blue)}.workspace-note{height:28px;font-size:9px;display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--muted);flex-shrink:0}.workspace-note #feedback{color:var(--accent);text-align:right}.status-line{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);font-size:9px;min-height:25px;padding:4px 10px;color:var(--muted);flex-shrink:0}.status-line i{width:5px;height:5px;background:var(--accent)}.status-right{margin-left:auto}.resize-handle{position:absolute;z-index:3;touch-action:none}.resize-x{left:var(--split-x);top:0;bottom:12px;width:12px;cursor:col-resize}.resize-y{left:calc(var(--split-x) + 12px);right:0;top:var(--split-y);height:12px;cursor:row-resize}.resize-handle:hover,.resize-handle:focus-visible{background:color-mix(in srgb,var(--accent) 20%,transparent)}.tile.is-dragging{opacity:.5}.tile.drop-target{outline:2px solid var(--accent);outline-offset:-3px}.workspace.is-focused .tile:not(.is-focused),.workspace.is-focused .resize-handle{display:none}.workspace.is-focused .tile.is-focused{grid-column:1/3;grid-row:1/3}.workspace.is-columns{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}.workspace.is-columns .tile{grid-row:1;grid-column:auto}.workspace.is-columns .resize-handle{display:none}.workspace.two-tiles{grid-template-rows:minmax(0,1fr)}.workspace.two-tiles .tile{grid-row:1;grid-column:auto}.workspace.two-tiles .resize-y{display:none}.workspace.one-tile .tile{grid-column:1/3;grid-row:1/3}.workspace.one-tile .resize-handle{display:none}.workspace.is-focused.is-columns .tile.is-focused{grid-column:1/4;grid-row:1}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-size:10px;color:var(--text);gap:8px}.chat-head .encryption{font-size:9px;color:var(--accent)}.chat-log{padding:7px 14px 12px;flex:1;min-height:0}.message{margin-bottom:15px;font-size:11px;line-height:1.75;overflow-wrap:anywhere}.message-meta{margin-bottom:4px;color:var(--muted);font-size:9px;display:flex;gap:8px}.sender{font-weight:600;color:var(--pink);font-size:10px}.sender.self{color:var(--accent)}.sender.jules{color:var(--blue)}.message p{white-space:pre-wrap}.chat-compose{padding:7px 10px 11px}.chat-compose label{display:block;font-size:9px;color:var(--accent);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compose-row{display:flex;align-items:center;border:1px solid var(--line);padding:4px;gap:7px}.compose-row>span{color:var(--accent);padding-left:4px}.compose-row input{background:none;border:0;color:var(--bright);font-size:10px;min-width:0;flex:1;padding:6px 0}.compose-row input::placeholder{color:var(--muted)}.compose-row button{background:var(--raised);font-size:9px;padding:7px;color:var(--text)}.page-content{padding:27px 27px 36px;line-height:1.8;font-size:12px}.eyebrow{font-size:10px;color:var(--muted)}.page-intro{margin-bottom:24px}.page-content h1{font-size:clamp(25px,2.4vw,40px);font-weight:400;letter-spacing:-1.5px;line-height:1.3;margin:9px 0 13px;color:var(--bright)}.cursor{color:var(--accent)}.brand-slogan{font-size:11px!important;color:var(--bright)!important;line-height:1.9!important}.brand-slogan>span{color:var(--pink)}.brand-slogan b{font-weight:400;color:var(--accent)}.intro{margin-top:16px!important;color:var(--text);font-size:13px!important;line-height:1.9!important}.page-content p{margin-bottom:15px;color:var(--text)}.page-content h2{font-size:19px;font-weight:400;line-height:1.4;color:var(--bright);letter-spacing:-.5px;margin:0 0 15px}.page-content h3{font-size:16px;line-height:1.4;font-weight:400;color:var(--bright);margin:0 0 12px}.selling-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:19px 0 15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:26px}.feature-symbol{display:block;color:var(--accent);font-size:10px;margin-bottom:8px}.selling-points>div:nth-child(2) .feature-symbol{color:var(--pink)}.selling-points>div:nth-child(3) .feature-symbol{color:var(--yellow)}.selling-points strong{font-size:11px;font-weight:400;color:var(--bright)}.selling-points p{font-size:10px;line-height:1.8;margin:7px 0 0;color:var(--muted)}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}.section-heading h2{font-size:16px}.section-heading>span{font-size:8px;color:var(--muted)}.product-tabs{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:10px}.product-tabs button{font-size:9px;padding:7px}.page-content video,.page-content img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--bg)}.page-content figure{margin:20px 0}.page-content .real-product figure{margin:0}.page-content figcaption{color:var(--muted);font-size:9px;line-height:1.8;margin-top:9px}.home-links{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:25px 0 16px;font-size:11px}.primary-link{padding:10px 12px;background:var(--selected);color:var(--bright);text-decoration:none;border:1px solid var(--accent)}.page-content .small{font-size:10px;line-height:1.8;color:var(--muted)}.page-content .index{font-size:10px;color:var(--accent);margin-bottom:11px}.page-content .principles,.page-content .feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 22px;margin:28px 0}.page-content .principles{border-top:1px solid var(--line);padding-top:24px}.page-content .feature,.page-content .support-gallery,.page-content .merch,.page-content .beta-section{margin-top:28px;padding-top:25px;border-top:1px solid var(--line)}.page-content .theme-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.page-content .capacity{border-left:1px solid var(--pink);padding-left:12px}.page-content .terminal-roots{border-left:1px solid var(--accent);padding-left:17px;margin-top:30px}.page-content .terminal-roots h2{font-size:16px}.page-content .terminal-roots p{font-size:11px;color:var(--muted)}.page-content .tray-demo{display:grid;grid-template-columns:1fr 145px;gap:20px;align-items:start}.page-content .tray-demo figure{margin:0}.page-content .privacy-details{padding:16px 0;border-top:1px solid var(--line);margin-top:25px;font-size:10px}.privacy-details summary{cursor:pointer;color:var(--accent)}.privacy-details p{margin-top:15px}.planned{color:var(--pink);font-size:10px;border:1px solid var(--line);padding:3px 5px;display:inline-block}.page-content strong{color:var(--bright);font-weight:500}.page-content .terminal{border:1px solid var(--line);margin:20px 0}.terminal-bar{padding:10px 14px;border-bottom:1px solid var(--line);background:var(--raised);display:flex;gap:10px;font-size:10px}.terminal-bar h2{font-size:12px;margin:0}.terminal-icon{color:var(--accent)}.page-content form,.payment-content{padding:15px}.page-content label{display:block;font-size:10px;margin-bottom:10px}.terminal-input{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);padding:7px}.terminal-input input{width:120px;min-width:0;flex:1;background:transparent;border:0;padding:8px 0;color:var(--bright);font-size:11px}.terminal-input button{background:var(--selected);color:var(--bright);font-size:10px}.terminal-input .prompt{color:var(--accent)}.page-content form .small{margin-top:12px;margin-bottom:0}.page-content [role=status]{font-size:10px;color:var(--accent);margin:10px 0 0}.page-content .support-benefits{padding-left:17px;line-height:1.9}.support-benefits li{margin:10px 0}.support-benefits li::marker{color:var(--pink)}.support-reward{border-top:1px solid var(--line);padding-top:24px}.page-content .support-brand{max-width:340px;padding:0 15px 12px;margin:0 auto 20px}.page-content .support-brand img{border:0;background:transparent}.merch-product{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.merch-description h3{font-size:16px}.page-content .first-product{margin-bottom:25px}.value-promise{padding:22px 18px;margin:25px 0;border:1px solid var(--accent);background:var(--raised)}.page-content .value-promise h2{font-size:23px;color:var(--bright)}.page-content .value-promise h2 em{font-style:normal;color:var(--accent)}.value-benefits{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.value-benefits span{font-size:10px;color:var(--bright);border:1px solid var(--line);padding:5px 8px}.page-content .value-promise p{font-size:11px}.page-content .value-promise .small{font-size:9px;margin-bottom:0}.home-hosting{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:25px 0}.home-hosting h3{font-size:13px}.home-hosting p{font-size:11px;color:var(--muted)}
/* Clean TUI removes the frame treatment, keeping the same layout and palette. */
:root[data-style=clean] .side-panel,:root[data-style=clean] .tile{border-color:var(--line);border-left:0;border-right:0;border-bottom:0}:root[data-style=clean] .side-panel h2{padding-left:0;left:0}:root[data-style=clean] .tile-bar{border-bottom:0}:root[data-style=clean] .tile-title{color:var(--muted)}:root[data-style=clean] .tile{background:var(--bg)}:root[data-style=clean] .side-panel{padding-left:4px;padding-right:4px}:root[data-style=clean] .tile-focus,:root[data-style=clean] .tile-move{color:var(--muted)}:root[data-style=clean] .message-meta .sender:before,:root[data-style=clean] .message-meta .sender:after{content:''}:root[data-style=performative] .sender:before{content:'<'}:root[data-style=performative] .sender:after{content:'>'}:root[data-style=performative] .tile-bar{background:color-mix(in srgb,var(--tile-color) 4%,var(--bg))}
@media(min-width:1500px){.app-body{grid-template-columns:240px minmax(0,1fr)}.page-content{padding:32px 40px}.chat-log{padding:15px 22px}.message{font-size:12px}.page-content h1{font-size:41px}}
@media(max-width:1150px){.app-presence{display:none}.app-body{grid-template-columns:175px minmax(0,1fr);gap:9px}.appearance{gap:10px}.page-content{padding:22px 18px}.server-name{font-size:8px}.workspace-path .dim{display:none}.selling-points{gap:12px}.tile-title{font-size:9px}.chat-log{padding:8px 10px}.workspace-note>span:first-child{display:none}.preview-tag{display:none}}
@media(max-width:850px){.app-body{grid-template-columns:1fr}.app-bar{flex-wrap:wrap;gap:5px;padding:6px 10px}.wordmark{width:95px}.wordmark img{height:34px}.appearance{gap:6px}.style-toggle button{font-size:10px;padding:6px}.palette-label>span{display:none}.palette-label select{font-size:10px;padding:6px;max-width:145px}#sidebar{display:none}body.nav-open #sidebar{display:flex;position:absolute;top:70px;bottom:30px;left:10px;width:220px;z-index:9;background:var(--bg);padding:13px;box-shadow:0 0 0 1px var(--line)}.status-right{display:none}.workspace-note{height:25px}.page-content h1{font-size:29px}}
@media(max-width:620px){body{height:auto;min-height:100svh;overflow:auto}.app-bar{position:sticky;top:0;z-index:8;background:var(--bg)}.appearance{width:100%;justify-content:space-between;order:3}.app-body{padding:8px 8px 0}.workspace{display:flex;flex-direction:column;gap:15px;padding:0}.tile{min-height:310px;max-height:440px}.story-tile{min-height:0;height:65svh;max-height:none}.workspace .tile{order:var(--slot)}.workspace-shell{overflow:visible}.resize-handle,#layout{display:none}.workspace-bar{position:relative;padding:0 0 8px;min-height:34px}.workspace-path{font-size:9px}.workspace.is-focused .tile.is-focused{height:75svh;max-height:none}.status-line{flex-wrap:wrap;font-size:8px;gap:5px 15px;margin-top:10px}.workspace-note{height:auto;padding:10px 0;line-height:1.7}.page-content{padding:22px 17px}.selling-points{gap:10px}.selling-points strong{font-size:10px}.selling-points p{font-size:9px}.feature-symbol{font-size:9px}.page-content .principles,.page-content .feature-grid{grid-template-columns:1fr}.page-content .tray-demo{grid-template-columns:1fr}.page-content .tray-demo figure{max-width:210px;margin:auto}.page-content .theme-examples{grid-template-columns:1fr}.merch-product{grid-template-columns:1fr}.merch-product figure{max-width:280px;margin:auto}.page-content .home-hosting{grid-template-columns:1fr;gap:4px}.page-content h1{font-size:28px}.brand-slogan{font-size:9px!important}.page-content .value-promise h2{font-size:22px}.workspace-note #feedback{font-size:9px;text-align:left}.sidebar-bottom{padding-bottom:0}.page-content .section-heading>span{font-size:8px}}
@media(prefers-reduced-motion:no-preference){button,a{transition:background-color 120ms,color 120ms}.tile.drop-target{transition:outline-color 100ms}}
/* v2: real nested splits, Clean TUI accent settings, presence, voice, and intro. */
.workspace{display:block;padding:0;margin-bottom:10px;min-height:180px;container-type:size}
.workspace>.tile{position:absolute;min-width:0;min-height:0;overflow:hidden}
.workspace .tile-bar{overflow:hidden;min-height:34px}
.tile-split{font-size:10px;padding:4px 3px;white-space:nowrap}
.tile.active-tile .tile-bar{box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--accent) 45%,transparent)}
.tree-divider{position:absolute;z-index:4;touch-action:none;outline-offset:-2px}
.tree-divider.axis-x{cursor:col-resize}.tree-divider.axis-y{cursor:row-resize}
.tree-divider:hover,.tree-divider:focus-visible{background:color-mix(in srgb,var(--accent) 35%,transparent)}
.tile.drop-target:after{content:'swap tiles';position:absolute;inset:0;display:grid;place-items:center;z-index:5;pointer-events:none;background:color-mix(in srgb,var(--accent) 25%,var(--bg));color:var(--bright);border:2px solid var(--accent);font-size:12px}
.tile[data-drop=left]:after{right:50%;content:'dock left'}.tile[data-drop=right]:after{left:50%;content:'dock right'}.tile[data-drop=top]:after{bottom:50%;content:'dock above'}.tile[data-drop=bottom]:after{top:50%;content:'dock below'}
:root[data-style=clean] .tile{border-top:1px solid var(--tile-color);border-left:0;border-right:0;border-bottom:0}
:root[data-style=clean] .tile-title{color:var(--tile-color)}
:root[data-style=clean] .side-panel{border-color:var(--line)}
:root[data-style=clean] .side-panel h2,:root[data-style=clean] .side-label{color:var(--muted)}
:root[data-style=clean] .rooms-panel button[data-chat=mira]>span:first-child,:root[data-style=clean] .rooms-panel button[data-chat=jules]>span:first-child{color:var(--accent)}
.presence-bar{display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line);padding:6px 12px;flex-shrink:0;min-height:40px}
.presence-options{display:flex;gap:5px}.presence-options button{font-size:11px;padding:7px 9px}.presence-options button[aria-pressed=true]{background:var(--selected);border-color:transparent}
.presence-bar>button{font-size:11px}.presence-hint{color:var(--muted);font-size:9px;margin-left:10px}.presence-bar #replay-intro{margin-left:auto;color:var(--accent);font-size:10px}
#top-mute[aria-pressed=true],#top-deafen[aria-pressed=true]{color:var(--yellow);background:transparent;border:0}
#presence-tip{position:fixed;z-index:50;padding:12px 14px;background:var(--raised);border:1px solid var(--accent);color:var(--bright);box-shadow:0 8px 25px #0005;font-size:11px;line-height:1.7;pointer-events:none}
.voice-room-row{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:0 4px 10px;font-size:11px}.rooms-panel .voice-room-row button{width:auto;padding:4px;color:var(--accent);font-size:10px}.voice-members{display:grid;gap:9px;padding:0 10px 15px;font-size:10px}.voice-members small{color:var(--muted)}
.voice-controls{flex-shrink:0;border:1px solid var(--accent);padding:9px 12px;margin:2px 0 5px;background:var(--raised)}.call-description{display:flex;align-items:center;gap:8px;font-size:11px}.call-description strong{color:var(--bright);font-weight:400}.call-description>span{color:var(--muted);font-size:9px}.voice-buttons{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 3px}.voice-buttons button{font-size:10px;border:1px solid var(--line)}.voice-buttons #leave-voice{color:var(--pink);margin-left:auto}.voice-controls>p{font-size:9px;color:var(--muted);margin-top:5px}#mock-video{display:flex;gap:10px;margin-top:9px}#mock-video>div{height:82px;flex:1;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}#mock-video span{color:var(--accent);font-size:17px}#mock-video small{font-size:8px;color:var(--muted)}
.knock-card{position:fixed;right:22px;top:118px;z-index:20;width:280px;padding:20px;border:1px solid var(--pink);background:var(--bg);box-shadow:0 10px 40px #0006;font-size:12px}.knock-card strong{color:var(--pink);font-weight:400}.knock-card p{margin:12px 0;line-height:1.8}.knock-card button{border:1px solid var(--line);color:var(--accent)}.knock-card small{display:block;color:var(--muted);margin-top:12px;font-size:9px}
#intro-dialog{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#0c0f18;color:#dfe5ef;overflow:auto;font-family:inherit}
#intro-dialog[open]{display:flex;flex-direction:column}#intro-dialog::backdrop{background:#0c0f18}.intro-top,.intro-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 32px;font-size:11px;color:#9ba5b8;flex-shrink:0}.intro-top{border-bottom:1px solid #262e4044}.intro-top button,.intro-bottom button{color:#7cddd6;font-size:12px;padding:9px 12px;border:1px solid #262e40;white-space:nowrap}.intro-bottom{margin-top:auto;border-top:1px solid #262e4044}.intro-canvas{display:grid;place-items:center;flex:1;min-height:0;padding:22px 40px}.intro-stage{width:100%;max-width:1120px;margin:auto}#intro-brand img{width:100%;max-height:45svh;object-fit:contain}#intro-brand p{text-align:center;color:#dfe5ef;font-size:clamp(11px,2vw,18px);margin-top:20px}#intro-brand b{color:#59cbd5;font-weight:400}.intro-eyebrow{color:#ac8ee7;font-size:12px;margin-bottom:20px}#intro-values h2{font-weight:400;font-size:clamp(28px,4vw,52px);letter-spacing:-1.7px;line-height:1.35;margin-bottom:45px}#intro-values h2>span{color:#59cbd5}.intro-values-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}.intro-values-grid article{border-top:1px solid #59cbd555;padding-top:24px}.intro-values-grid article:nth-child(2){border-color:#ac8ee755}.intro-values-grid article:nth-child(3){border-color:#d982bb55}.intro-values-grid article:nth-child(4){border-color:#79acd055}.value-art{font-size:36px;color:#59cbd5;display:block;margin-bottom:22px}.intro-values-grid article:nth-child(2) .value-art{color:#ac8ee7}.intro-values-grid article:nth-child(3) .value-art{color:#d982bb}.intro-values-grid article:nth-child(4) .value-art{color:#79acd0}.intro-values-grid h3{font-size:16px;line-height:1.65;font-weight:400;color:#dfe5ef;margin-bottom:13px}.intro-values-grid p{font-size:11px;line-height:1.8;color:#9ba5b8}.intro-product-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 22px;margin-bottom:15px}.intro-product-heading>span{color:#ac8ee7;font-size:12px}.intro-product-heading h2{font-size:clamp(18px,2.5vw,26px);font-weight:400}.intro-product-heading p{font-size:10px;color:#9ba5b8}#intro-demo{display:block;width:100%;max-height:65svh;object-fit:contain;background:#001419;border:1px solid #23434a}.intro-footnote{font-size:9px;text-align:center;color:#9ba5b8;margin-top:10px}
@media(prefers-reduced-motion:no-preference){.intro-stage:not([hidden]){animation:intro-arrive .5s ease-out both}.intro-values-grid article{animation:intro-arrive .6s ease-out both}.intro-values-grid article:nth-child(2){animation-delay:.2s}.intro-values-grid article:nth-child(3){animation-delay:.4s}.intro-values-grid article:nth-child(4){animation-delay:.6s}@keyframes intro-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
@media(max-width:1150px){.presence-hint{display:none}.tile-bar .tile-move{display:none}.presence-bar{gap:3px}.presence-options{gap:1px}.presence-options button{padding:7px;font-size:10px}}
@media(max-width:850px){body.nav-open #sidebar{top:135px}.presence-bar{overflow:auto}.presence-options button{font-size:10px}.presence-bar>button{font-size:10px;white-space:nowrap}.intro-values-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.intro-canvas{padding:20px 28px}.intro-values-grid h3{font-size:14px}.value-art{font-size:25px;margin-bottom:10px}.intro-values-grid article{padding-top:15px}#intro-values h2{margin-bottom:25px}}
@media(max-width:620px){.presence-bar{position:sticky;top:84px;background:var(--bg);z-index:7;padding:4px 7px;min-height:37px}.presence-bar #replay-intro{font-size:9px}.presence-bar #top-add-chat{display:none}.workspace.mobile-layout{display:flex;flex-direction:column;container-type:normal;min-height:0;gap:15px}.workspace.mobile-layout>.tile{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:360px!important;max-height:none;flex-shrink:0}.workspace.mobile-layout>.story-tile{height:65svh!important}.workspace.mobile-layout .tree-divider{display:none!important}.workspace.mobile-layout.is-focused>.tile.is-focused{height:75svh!important}.voice-controls{position:sticky;bottom:0;z-index:6}.voice-buttons button{font-size:9px;padding:7px 5px}.call-description{flex-wrap:wrap}.intro-top,.intro-bottom{padding:13px 16px;font-size:9px}.intro-top>span{max-width:160px;line-height:1.7}.intro-top button,.intro-bottom button{font-size:10px;padding:8px}.intro-canvas{padding:24px 20px}.intro-values-grid{gap:20px 15px}.intro-values-grid h3{font-size:12px}.intro-values-grid p{font-size:9px}#intro-values h2{font-size:28px}.intro-eyebrow{font-size:10px}.intro-product-heading h2{font-size:18px}#intro-demo{max-height:55svh}.intro-footnote{font-size:8px}.intro-bottom #intro-progress{font-size:9px;line-height:1.7}.knock-card{right:12px;top:145px;width:min(280px,calc(100vw - 24px))}}
.workspace{overflow:hidden;isolation:isolate}
.workspace.mobile-layout{overflow:visible}
/* Size page content to its tile, including when the page moves into a smaller split. */
.story-tile{container-type:inline-size}
@container(max-width:500px){.page-content{padding:20px 16px}.page-content h1{font-size:27px}.page-content .selling-points{grid-template-columns:1fr;gap:12px}.page-content .selling-points>div{display:grid;grid-template-columns:110px 1fr}.page-content .selling-points p{grid-column:2;margin:3px 0}.page-content .principles,.page-content .feature-grid,.page-content .home-hosting{grid-template-columns:1fr}.page-content .tray-demo{grid-template-columns:1fr}.page-content .tray-demo figure{max-width:200px;margin:auto}.page-content .merch-product{grid-template-columns:1fr}.page-content .theme-examples{grid-template-columns:1fr}.page-content .brand-slogan{font-size:9px!important}}

.value-art svg{display:block;width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:miter}

/* Joined-room controls belong to the activity rail, beneath rooms and above friends. */
#sidebar .voice-controls{position:static;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 3px;margin:9px 0 14px;background:transparent}
#sidebar .call-description{display:flex;flex-wrap:wrap;gap:4px;font-size:10px}
#sidebar .call-description i{display:none}#sidebar .call-description strong{color:var(--accent)}
#sidebar .call-description>span{font-size:9px}#sidebar #leave-voice{width:auto;color:var(--pink);margin-left:auto;padding:3px;font-size:10px}
#sidebar .voice-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px}
#sidebar .voice-buttons button{width:auto;border:0;padding:6px 2px;font-size:9px;justify-content:flex-start;color:var(--text)}
#sidebar .voice-controls>p{font-size:8px;line-height:1.7;margin:8px 0 0;color:var(--muted)}
#sidebar #mock-video{flex-direction:column}#sidebar #mock-video>div{min-height:68px;flex:auto}#sidebar #mock-video span{font-size:12px}

/* A visible roadmap keeps the final product demonstration from being a surprise. */
#intro-dialog .intro-bottom{display:block;padding:16px 32px 18px;background:#0c0f18}
.intro-roadmap{max-width:1120px;margin:auto}.intro-roadmap-heading{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#9ba5b8;margin-bottom:12px;line-height:1.6}#intro-up-next{color:#ac8ee7;text-align:right}
.intro-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#intro-dialog .intro-chapters button{--chapter-color:#59cbd5;border:0;text-align:left;padding:9px 0;color:#9ba5b8;white-space:normal;background:transparent}
#intro-dialog .intro-chapters button:nth-child(2){--chapter-color:#ac8ee7}#intro-dialog .intro-chapters button:nth-child(3){--chapter-color:#d982bb}
#intro-dialog .intro-chapters button:hover,#intro-dialog .intro-chapters button[aria-current=step]{color:#f3f4f8}.chapter-name{display:block;font-size:12px;line-height:1.7}.chapter-name b{color:var(--chapter-color);font-weight:400;margin-right:7px}.chapter-detail{display:block;color:#9ba5b8;font-size:9px;line-height:1.8;margin:3px 0 9px}
.chapter-track{display:block;height:3px;background:#262e40;overflow:hidden}.chapter-track>span{display:block;width:0;height:100%;background:var(--chapter-color)}.intro-chapters [aria-current=step] .chapter-track{box-shadow:0 0 0 1px #9ba5b822}
.intro-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1120px;margin:14px auto 0}.intro-navigation #intro-progress{font-size:10px;text-align:center;line-height:1.7}.intro-navigation button{font-size:10px!important}.intro-navigation #intro-previous{color:#9ba5b8}.intro-navigation #intro-previous:disabled{opacity:.35;cursor:default}
.screen-reader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#intro-demo{max-height:calc(100svh - 340px)}
@media(max-width:620px){#intro-dialog .intro-bottom{padding:12px 16px}.intro-roadmap-heading{font-size:9px;gap:7px;flex-wrap:wrap}.intro-roadmap-heading #intro-up-next{text-align:left}.intro-chapters{gap:10px}.chapter-name{font-size:10px}.chapter-name b{margin-right:3px}.chapter-detail{font-size:8px;line-height:1.6;min-height:26px}.intro-navigation{flex-wrap:wrap;gap:8px;margin-top:8px}.intro-navigation #intro-progress{order:-1;width:100%;text-align:left;font-size:9px}.intro-navigation button{font-size:9px!important}#intro-demo{max-height:calc(100svh - 380px);min-height:120px}}
@media(max-height:600px){#intro-dialog .intro-canvas{min-height:230px}.intro-bottom{flex-shrink:0}}

#intro-dialog .intro-bottom{position:sticky;bottom:0;z-index:2}

/* Only the short homepage arrival sequence animates layout changes. */
@media(prefers-reduced-motion:no-preference){
  .workspace.welcome-motion>.tile{transition:left 760ms cubic-bezier(.22,.7,.2,1),top 760ms cubic-bezier(.22,.7,.2,1),width 760ms cubic-bezier(.22,.7,.2,1),height 760ms cubic-bezier(.22,.7,.2,1),opacity 240ms ease,transform 240ms ease}
  .workspace.welcome-motion>.tile.is-departing{opacity:0;transform:translateY(8px);pointer-events:none}
  .workspace.welcome-motion .tree-divider{pointer-events:none;opacity:.35}
}

/* Home returns to a quiet announcement and signup inside the Wisp workspace. */
body[data-page=home] #page-copy{display:flex;flex-direction:column;padding:30px 24px;flex:1}
.page-content .home-welcome{width:100%;max-width:530px;margin:auto;flex-shrink:0;padding:12px 0 24px}
.page-content .home-brand{width:100%;max-width:475px;margin:0 auto 38px;border:0;background:transparent;object-fit:contain}
.page-content .home-announcement{margin:0 0 25px}.page-content .home-announcement h1{font-size:clamp(25px,3vw,34px);letter-spacing:-1px;line-height:1.5;margin:0 0 9px}
.home-announcement .comment-prefix{color:var(--muted);font-size:.8em;margin-right:5px}
.page-content .home-announcement p{font-size:11px;color:var(--muted);margin:0;line-height:1.8}
.page-content .home-welcome .terminal{margin:0 0 18px}.home-welcome .terminal-bar{padding:13px 18px}.home-welcome .terminal-bar h2{font-size:11px}.page-content .home-welcome form{padding:20px 18px}
.page-content .home-welcome label{font-size:11px;margin-bottom:12px}.home-welcome .terminal-input{padding:7px 8px}.home-welcome .terminal-input input{font-size:12px}.home-welcome .terminal-input button{padding:10px 12px}
.home-beta-link{display:inline-block;font-size:10px;text-decoration:none;line-height:1.8}
@container(max-width:420px){body[data-page=home] #page-copy{padding:22px 16px}.page-content .home-brand{margin-bottom:25px}.page-content .home-welcome form{padding:16px 13px}.home-welcome .terminal-input button{padding:9px}.page-content .home-announcement p{font-size:10px}}

/* The navigation folds away after the arrival, leaving a quiet home tile. */
#sidebar-toggle{font-size:22px;padding:0 9px;line-height:28px;flex-shrink:0}
.presence-drawer{flex-shrink:0;background:var(--bg);z-index:7}
.presence-clip{max-height:130px;overflow:hidden;opacity:1}
#presence-reveal{display:flex;align-items:center;justify-content:center;width:100%;height:14px;padding:0;border:0;color:var(--muted);font-size:11px;line-height:1;background:var(--bg)}
#presence-reveal::before,#presence-reveal::after{content:"";width:24px;height:1px;background:var(--line);margin:0 6px}
#presence-reveal:hover,#presence-reveal:focus-visible{color:var(--accent);background:var(--raised)}
body.presence-hidden .presence-clip{max-height:0;opacity:0;visibility:hidden}
@media(min-width:851px){
 .app-body{--rail-width:215px;grid-template-columns:minmax(0,var(--rail-width)) minmax(0,1fr)}
 #sidebar{min-width:0;overflow-x:hidden}
 body.sidebar-collapsed .app-body{grid-template-columns:minmax(0,0px) minmax(0,1fr);column-gap:0}
 body.sidebar-collapsed #sidebar{opacity:0;visibility:hidden;pointer-events:none}
}
@media(min-width:1500px){.app-body{--rail-width:240px}}
@media(min-width:851px) and (max-width:1150px){.app-body{--rail-width:175px}}
@media(max-width:850px){#presence-reveal{height:24px}body.nav-open #sidebar{top:145px}}
@media(max-width:620px){.presence-drawer{position:sticky;top:84px}.presence-drawer .presence-bar{position:static}}
@media(prefers-reduced-motion:no-preference){
 .app-body{transition:grid-template-columns 700ms cubic-bezier(.22,.7,.2,1),column-gap 700ms cubic-bezier(.22,.7,.2,1)}
 #sidebar{transition:opacity 250ms ease,visibility 250ms}
 .presence-clip{transition:max-height 440ms cubic-bezier(.22,.7,.2,1),opacity 300ms ease,visibility 440ms}
}

/* Website navigation stays visible while the playground controls fold away. */
.app-bar{min-height:62px;flex-wrap:nowrap}
.top-navigation{flex-direction:row;align-items:center;gap:9px;margin-left:12px}
.top-navigation a{font-size:11px;padding:8px 10px;white-space:nowrap}
.top-navigation a[aria-current=page]{border-left:0;color:var(--accent)}
.app-bar .preview-tag{margin-left:auto}
.presence-bar{flex-wrap:wrap}
.presence-bar .appearance{gap:8px;margin-left:auto}
.presence-bar .style-toggle button{font-size:10px;padding:6px}
.presence-bar .palette-label{gap:4px}
.presence-bar .palette-label select{font-size:10px;max-width:145px}
.presence-bar #replay-intro{margin-left:5px}
.page-content .home-dev-update{margin:28px 0 24px}
.page-content .home-dev-update h2{font-size:12px;color:var(--accent);letter-spacing:0;margin-bottom:14px}
.page-content .home-dev-update p{font-size:12px;line-height:1.9;margin-bottom:14px}
.page-content .home-dev-update strong{color:var(--bright);font-weight:600}
.page-content .home-welcome .terminal{background:none;border:0;box-shadow:none}
.home-welcome .terminal-bar{padding:0;border:0;background:none}
.page-content .home-welcome form{padding:14px 0 0}
@media(max-width:1200px){.presence-bar .appearance{width:100%;order:2;justify-content:flex-start;margin:2px 0 0 32px}.presence-bar #replay-intro{margin-left:auto}}
@media(max-width:620px){
 .app-bar{height:62px;gap:5px;padding:6px 8px}.app-bar .wordmark{width:70px}
 .top-navigation{margin-left:auto;gap:0}.top-navigation a{font-size:10px;padding:8px 5px}
 .presence-drawer{top:62px}.presence-bar{overflow:visible}
 .presence-bar .appearance{margin-left:0;gap:3px;justify-content:space-between}
 .presence-bar .palette-label select{max-width:128px}
 .page-content .home-welcome form{padding:14px 0 0}
}

@media(max-width:850px){body.nav-open #sidebar{top:var(--navigation-top,180px)}}

/* Keep the reading pages comfortable when the home tile expands to full width. */
body:is([data-page=why-wisp],[data-page=support-wisp]) #page-copy{
 padding-block:24px 36px;
 padding-inline:max(24px,calc((100% - 860px)/2));
 font-size:12px;
}
body:is([data-page=why-wisp],[data-page=support-wisp]) #page-copy h1{font-size:clamp(24px,3.5cqi,30px);letter-spacing:-1px}
body:is([data-page=why-wisp],[data-page=support-wisp]) #page-copy h2{font-size:16px;letter-spacing:-.3px}
body:is([data-page=why-wisp],[data-page=support-wisp]) #page-copy h3{font-size:14px;letter-spacing:0}
body:is([data-page=why-wisp],[data-page=support-wisp]) #page-copy :is(img,video){max-height:360px;object-fit:contain}
body[data-page=why-wisp] #page-copy .first-product{max-width:560px;margin:18px auto 24px}
body[data-page=support-wisp] #page-copy .support-brand{max-width:260px;margin:16px auto 22px}
body[data-page=support-wisp] #page-copy .merch-product figure{width:100%;max-width:260px;margin-inline:auto}
@container(max-width:500px){
 body:is([data-page=why-wisp],[data-page=support-wisp]) #page-copy{padding:20px 16px 28px}
}

/* Reading pages show the arrival; Demo owns the interactive playground. */
body:not([data-page=demo]) .workspace-bar>div{visibility:hidden}
body:not([data-page=demo]) .tile-bar button:disabled{opacity:.65;cursor:default}
body.reading-settled .story-tile .tile-bar button{visibility:hidden}
body[data-page=demo] .open-demo{display:none}
.open-demo{font-size:10px;white-space:nowrap;padding:6px;text-decoration:none}
.demo-guide{max-width:560px}.demo-guide h2{font-size:17px}.demo-guide p{line-height:1.9}
@media(prefers-reduced-motion:no-preference){.workspace.welcome-motion>.tile.is-arriving{opacity:0;transform:translateY(8px)}}
@media(max-width:620px){.top-navigation a{font-size:9px;padding:8px 4px}.app-bar .wordmark{width:60px}}

body:not([data-page=demo]) #presence-reveal{display:none}
@media(prefers-reduced-motion:no-preference){
 body.fast-exit .workspace.welcome-motion>.tile{transition-duration:300ms,300ms,300ms,300ms,120ms,120ms}
 body.fast-exit .app-body{transition-duration:350ms}
 body.fast-exit .presence-clip{transition-duration:220ms}
}

/* Home's introduction is an ordinary, theme-aware part of the reading page. */
body:not([data-page=demo]) .story-tile>.tile-bar{display:none}
body:not([data-page=demo]) .story-tile{border:0}
body[data-page=home] #page-copy{padding-top:22px}
.page-content .home-welcome{max-width:700px;margin:0 auto}
.page-content .home-announcement{margin-bottom:22px}
.home-carousel{margin:0 0 32px;font-size:11px}
.carousel-heading{display:flex;align-items:center;justify-content:space-between;color:var(--muted);border-bottom:1px solid var(--line);padding:0 0 8px}
.carousel-heading button,.carousel-navigation button{font-size:10px;color:var(--accent)}
.carousel-canvas{padding:18px 0 14px;min-height:360px;display:grid;align-items:center}
.carousel-stage{width:100%;min-width:0}
#home-carousel #intro-brand img{border:0;background:transparent;max-height:260px;object-fit:contain}
#home-carousel #intro-brand p{font-size:11px;color:var(--bright);text-align:center;margin:14px 0 0}
#home-carousel #intro-brand b{color:var(--accent)}
#home-carousel .intro-eyebrow{font-size:10px;color:var(--muted);margin:0 0 10px}
#home-carousel #intro-values h2{font-size:22px;letter-spacing:-.6px;line-height:1.4;margin:0 0 22px;color:var(--bright)}
#home-carousel #intro-values h2>span{color:var(--accent)}
#home-carousel .intro-values-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
#home-carousel .intro-values-grid article{border:0;padding:0}
#home-carousel .value-art{font-size:24px;color:var(--accent);margin-bottom:8px;line-height:1.2}
#home-carousel .value-art svg{display:block;width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5}
#home-carousel .intro-values-grid article:nth-child(2) .value-art{color:var(--blue)}
#home-carousel .intro-values-grid article:nth-child(3) .value-art{color:var(--yellow)}
#home-carousel .intro-values-grid article:nth-child(4) .value-art{color:var(--pink)}
#home-carousel .intro-values-grid h3{font-size:13px;color:var(--bright);line-height:1.5;margin:0 0 5px;letter-spacing:0}
#home-carousel .intro-values-grid p{font-size:10px;color:var(--muted);line-height:1.7;margin:0}
#home-carousel .intro-product-heading{display:block;margin:0 0 12px}
#home-carousel .intro-product-heading>span{display:none}
#home-carousel .intro-product-heading h2{font-size:17px;color:var(--bright);margin:0 0 5px}
#home-carousel .intro-product-heading p{font-size:10px;color:var(--muted);margin:0}
#home-carousel #intro-demo{display:block;width:100%;height:auto;min-height:0;max-height:300px;object-fit:contain;border:0;background:var(--bg)}
#home-carousel .intro-footnote{font-size:9px;color:var(--muted);text-align:left;margin:9px 0 0}
.carousel-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.carousel-chapters button{text-align:left;font-size:10px;padding:8px 0;color:var(--muted)}
.carousel-chapters button[aria-current=step]{color:var(--accent)}
.carousel-chapters .chapter-track{display:block;height:2px;margin-top:10px;background:var(--line);overflow:hidden}
.carousel-chapters .chapter-track>span{display:block;height:100%;width:0;background:var(--accent)}
.carousel-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 16px}
#home-carousel #intro-progress{font-size:9px;color:var(--muted);text-align:center;margin:0}
.carousel-demo-link,.carousel-home-link{font-size:10px;text-decoration:none}
.page-content .why-overview>section{margin:28px 0 0;border:0;padding:0}
.page-content .why-overview>section h2{margin-bottom:10px}
.page-content .why-overview p{line-height:1.85}
.page-content .why-product{max-width:560px;margin:20px auto 26px}
.why-privacy{font-size:10px;color:var(--muted)}.why-privacy summary{color:var(--accent);cursor:pointer}.why-privacy p{margin-top:12px}
.why-overview .terminal{border:0;background:none}.why-overview .terminal-bar{display:none}.page-content .why-overview form{padding:0}
@container(max-width:480px){
 .carousel-canvas{min-height:350px}.carousel-chapters{gap:8px}.carousel-chapters button{font-size:9px}
 .carousel-navigation{flex-wrap:wrap}#home-carousel #intro-progress{order:3;width:100%;text-align:left}
 #home-carousel .intro-values-grid{gap:18px 14px}#home-carousel .intro-values-grid h3{font-size:12px}
 #home-carousel #intro-values h2{font-size:20px}
}

.page-content .support-focused>section{border:0;padding:0;margin:28px 0}
.page-content .support-focused>.support-reward{margin-top:0}
.support-focused .terminal-bar{border:0;background:none;padding:0 0 12px}
.support-focused .terminal-icon{display:none}
.page-content .support-focused form,.support-focused .payment-content{padding:0}
.page-content .support-focused .merch{padding-top:12px}

/* Reading pages use Wisp's logo palette; Demo keeps the app's selected palette. */
:root:has(body:not([data-page=demo])){background:#151821}
body:not([data-page=demo]){
 --bg:#151821;--surface:#151821;--raised:#1c202b;--selected:#263b56;
 --text:#c0c7d5;--bright:#f1edf7;--muted:#929db2;--line:#283145;
 --accent:#59cbd5;--pink:#d982bb;--violet:#ac8ee7;--blue:#8abfda;
 --yellow:#ac8ee7;--green:#59cbd5;
 background:var(--bg);color:var(--text);
}
:root[data-style] body:not([data-page=demo]) .story-tile{border:0;box-shadow:none;--tile-color:var(--accent)}
body:not([data-page=demo]) .workspace-bar,
body:not([data-page=demo]) .workspace-note,
body:not([data-page=demo]) .status-line{display:none}
body:not([data-page=demo]) .top-navigation a[aria-current=page]{background:transparent;color:var(--accent)}
body:not([data-page=demo]) .page-content h1 .cursor{color:var(--violet)}
body:not([data-page=demo]) .carousel-chapters button:nth-child(2) .chapter-track>span{background:var(--violet)}
body:not([data-page=demo]) .carousel-chapters button:nth-child(3) .chapter-track>span{background:var(--pink)}
body:not([data-page=demo]) .page-content .small{color:var(--muted)}

/* Desktop themes mapped from WispTheme.qml (Classic is the current code default). */
:root[data-palette=wisp]{--bg:#151821;--surface:#1c202b;--raised:#232630;--selected:#2f8cff;--text:#e8ecf3;--bright:#e8ecf3;--muted:#8d96a8;--line:#2b2d36;--accent:#2f8cff;--pink:#d58b9f;--yellow:#f5b94c;--blue:#79acd0;--green:#4bd38a}
:root[data-palette=soft_graphite]{--bg:#181e25;--surface:#222b34;--raised:#2b3540;--selected:#8ec5ee;--text:#e8ecf3;--bright:#e8ecf3;--muted:#a8b6c6;--line:#343d45;--accent:#8ec5ee;--pink:#d58b9f;--yellow:#f5b94c;--blue:#8ec5ee;--green:#4bd38a}
:root[data-palette=astra]{--bg:#0c1224;--surface:#1c2843;--raised:#1c2843;--selected:#343e68;--text:#bac7df;--bright:#d6e2f5;--muted:#8795b5;--line:#2b385a;--accent:#a397ec;--pink:#ba91d9;--yellow:#d6bd80;--blue:#9eb3dc;--green:#7ebbac}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]){font-family:"Noto Sans","DejaVu Sans",sans-serif;font-size:14px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) button,
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) select,
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .terminal-input{border-radius:5px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .app-bar{min-height:64px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .top-navigation a{font-size:13px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .presence-bar button{font-size:12px;background:var(--raised)}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .presence-bar .appearance{gap:10px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .style-toggle button{font-size:11px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .page-content{font-size:14px;line-height:1.8}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .page-content .home-dev-update p{font-size:14px;line-height:1.8}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .page-content .intro{font-size:14px!important}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .tile{border:1px solid var(--line);border-radius:5px;background:var(--bg)}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .tile-bar{height:43px;min-height:43px;padding:4px 7px;border:0;gap:4px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .tile-title{font-size:13px;font-weight:500}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .tile-bar button{background:var(--raised);padding:5px;font-size:11px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .chat-head{padding:8px 12px;font-size:12px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .chat-log{margin:0 10px;padding:14px;background:var(--surface);border-radius:5px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .message{font-size:14px;line-height:1.55;margin-bottom:20px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .message-meta{font-size:11px;margin-bottom:8px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .sender{font-size:12px;color:var(--text)}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .sender.self{color:var(--accent)}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .chat-compose label{display:none}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .compose-row{background:var(--surface);border:0;border-radius:5px;padding:8px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .compose-row>span{display:none}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .compose-row input{font-size:13px;padding:8px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .compose-row button{background:var(--accent);color:var(--bg);border-radius:4px;font-size:12px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .side-panel{background:var(--surface);border:0;border-radius:5px;padding:20px 10px 12px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .side-panel h2{position:static;background:none;font-size:12px;padding:0;margin:0 0 12px;color:var(--muted)}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .side-label{font-size:12px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .rooms-panel button{font-size:12px;padding:10px 5px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .rooms-panel button>span:last-child{font-size:11px}
:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .playground-help p{font-size:11px}
:root[data-style=soft] .tile,:root[data-style=soft] .side-panel,:root[data-style=soft] .compose-row{border-radius:8px}
:root[data-style=soft] .chat-tile{background:var(--surface)}
:root[data-style=soft] .chat-log{background:transparent}
:root[data-style=soft] .chat-tile .message{position:relative;padding-left:40px}
:root[data-style=soft] .chat-tile .message:before{content:attr(data-avatar);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--muted) 22%,var(--surface));font-size:12px}
body:not([data-page=demo]){--bg:#151821;--surface:#1c202b;--raised:#232630;--selected:#263b56;--text:#e8ecf3;--bright:#e8ecf3;--muted:#8d96a8;--line:#2b2d36;--accent:#2f8cff;--pink:#d58b9f;--blue:#79acd0;--violet:#ac8ee7}
:root[data-style] body:not([data-page=demo]) .story-tile{border:0;border-radius:0;background:var(--bg)}
@media(max-width:1200px){:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .presence-bar .appearance{flex-wrap:wrap;margin-left:0}}
@media(max-width:620px){:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .top-navigation a{font-size:11px;padding:8px 4px}:root:is([data-style=classic],[data-style=soft],[data-style=daylight],[data-style=hearth]) .presence-drawer{top:64px}.presence-clip{max-height:185px}}

/* Friendly client presentation: Soft Graphite is the website's reference. */
:root[data-palette=soft_graphite]{--bg:#181e25;--surface:#222b34;--raised:#29333d;--selected:#354a5c;--line:#343d45;--accent:#8ec5ee}
:root[data-palette=daylight]{color-scheme:light;--bg:#f7f6f1;--surface:#fffdf8;--raised:#e8ece5;--selected:#d3e1d7;--text:#24372f;--bright:#24372f;--muted:#59665f;--line:#ccd3cb;--accent:#3e6b5a;--blue:#3e6b5a;--pink:#995d7a}
:root[data-palette=hearth]{--bg:#24212d;--surface:#302b3c;--raised:#3d3549;--selected:#574450;--text:#f4edf6;--bright:#f4edf6;--muted:#b8adc8;--line:#494050;--accent:#f0b898;--blue:#f0b898;--pink:#d79db7}
:root:has(body:not([data-page=demo])),body:not([data-page=demo]){--bg:#181e25;--surface:#222b34;--raised:#29333d;--selected:#354a5c;--text:#e8ecf3;--bright:#e8ecf3;--muted:#a8b6c6;--line:#343d45;--accent:#8ec5ee;--blue:#8ec5ee;background:#181e25;color:#e8ecf3;font-family:"Noto Sans","DejaVu Sans",sans-serif}
button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex-shrink:0}
.top-navigation a[aria-current=page]{background:var(--selected)!important;color:var(--text)!important;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line)}
.app-bar{padding:8px 16px;gap:24px}.preview-tag{font-size:11px;color:var(--muted)}.wordmark{width:122px}
.presence-options[hidden]{display:none!important}.presence-select-label{display:flex;align-items:center;gap:6px;background:var(--raised);border:1px solid var(--line);padding:4px 10px;border-radius:7px;white-space:nowrap;font-size:12px}
.presence-select-label select{border:0;background:transparent;color:var(--text);font:inherit;padding:4px;max-width:120px}
.presence-bar{gap:7px;padding:8px 16px;min-height:54px;flex-wrap:wrap}.presence-bar>button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;padding:7px 10px;color:var(--text)}
.presence-bar #appearance-open{margin-left:auto}.presence-bar .open-demo,.presence-bar .carousel-home-link{display:none}
.workspace-bar .workspace-path{visibility:hidden}.workspace-bar{min-height:34px}.workspace-bar button{display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:6px 10px;border-radius:7px;background:var(--raised)}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .tile{border-radius:8px;border:1px solid color-mix(in srgb,var(--pink) 45%,var(--line));background:color-mix(in srgb,var(--surface) 55%,var(--bg));overflow:hidden}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .tile-bar{height:48px;min-height:48px;padding:6px;gap:4px;border:0;box-shadow:none}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .tile-title{color:var(--text)!important;background:var(--raised);border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:14px;min-width:45px;flex:1}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .tile-bar button{height:32px;min-width:28px;display:grid;place-items:center;border:1px solid var(--line);background:var(--raised);border-radius:7px;padding:4px;color:var(--text)}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .tile-bar .tile-move{display:none}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .chat-head{display:none}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .chat-log{padding:26px 16px 14px;margin:0;background:transparent;border:0;overflow:auto;flex:1}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .message{position:relative;padding-left:42px;line-height:1.6;margin-bottom:22px;font-size:14px}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .message:before{content:attr(data-avatar);position:absolute;left:0;top:0;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;background:color-mix(in srgb,var(--muted) 26%,var(--surface));color:var(--text)}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .message-meta{font-size:12px;align-items:center;gap:8px;margin-bottom:5px}.message .sender{color:var(--accent)!important;font-weight:600;font-size:13px}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .chat-compose{padding:7px}.compose-row{display:flex;align-items:center;gap:5px}.compose-row input{min-width:0}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .compose-row{padding:5px;background:var(--raised);border-radius:8px;min-height:47px}.compose-row button{min-width:34px;min-height:32px}.chat-compose label{position:absolute;left:-10000px}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) #sidebar{width:255px;padding:10px 8px 10px 16px;gap:0}.rooms-panel{flex:1}.server-picker{display:flex;justify-content:space-between;padding:10px 12px;background:var(--raised);border:1px solid var(--line);border-radius:7px;margin-bottom:20px;font-size:14px}
:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .side-panel{background:var(--surface);padding:10px;border-radius:8px}.rooms-panel h2,.rooms-panel .side-label{font-weight:600;font-size:13px;color:var(--muted);padding:5px 3px;margin:14px 0 7px}
.voice-room-row{flex-wrap:wrap;background:var(--raised);padding:10px;border-radius:7px;gap:8px;font-size:13px}.voice-room-row small{color:var(--muted)}.voice-room-row #join-voice{background:var(--accent);color:var(--bg);border-radius:6px;padding:6px 10px;font-size:12px}
.rooms-panel>button{min-height:42px;border-radius:6px}.rooms-panel>button:hover{background:var(--raised)}.friends-label{border-top:1px solid var(--line);padding-top:20px!important;margin-top:34px!important}.friend-person{display:flex;align-items:center;gap:10px}.person-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#544e3d;color:#f1ecd9;position:relative}.person-avatar i{position:absolute;bottom:-1px;right:-1px;width:9px!important;height:9px!important;border-radius:50%;background:var(--green);border:2px solid var(--surface)}.person-avatar.away{background:#45515c;color:#e8ecf3}.offline{display:flex;align-items:center;justify-content:space-between;padding:8px 5px}
#sidebar .playground-help,#sidebar .sidebar-bottom{display:none}.status-line,.workspace-note{font-size:10px}.workspace-note{padding-top:9px}.status-right{color:var(--muted)}
.appearance-panel,.message-overlay{position:fixed;z-index:90;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 32px));max-height:85svh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:0 0 0 100vmax #0008;color:var(--text);font:14px/1.6 "Noto Sans","DejaVu Sans",sans-serif}
.appearance-panel[hidden]{display:none}.appearance-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.appearance-heading h2{font-size:20px;font-weight:500;margin:0}.appearance-heading button{font-size:23px;line-height:1;min-width:32px;min-height:32px}.appearance-panel>p{color:var(--muted);margin:0 0 20px}.appearance-panel .appearance{display:block;margin:0}.theme-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.theme-cards button{display:flex;flex-direction:column;text-align:left;gap:9px;padding:10px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:var(--bg);min-width:0}.theme-cards button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:0;background:var(--raised)}.theme-cards strong{font-weight:500}.theme-cards small{font-size:11px;color:var(--muted)}.theme-sample{width:100%;height:92px;display:flex;gap:7px;background:#181e25;border-radius:8px;padding:9px}.theme-sample>i{width:32%;border-radius:5px;background:#29333d;border-top:12px solid #8ec5ee}.theme-sample>span{flex:1;background:#222b34;padding:10px;border-radius:5px}.theme-sample b{display:block;height:4px;margin:4px 0 10px;background:#9ba6b1;border-radius:3px}.theme-sample b:nth-child(2){width:70%}.sample-daylight{background:#f7f6f1}.sample-daylight>i{background:#e3e9e1;border-color:#3e6b5a}.sample-daylight>span{background:#edf0e8}.sample-daylight b{background:#81928a}.sample-hearth{background:#24212d}.sample-hearth>i{background:#40364a;border-color:#f0b898}.sample-hearth>span{background:#302b3c}.sample-hearth b{background:#b8adc8}.more-styles{margin:24px 0;cursor:pointer}.more-styles>div{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.more-styles button{padding:8px 12px;background:var(--raised);border-radius:6px}.appearance-panel .palette-label{display:flex;justify-content:space-between;gap:16px}.appearance-panel select{font:inherit;background:var(--raised);color:var(--text);border:1px solid var(--line);padding:8px 12px;border-radius:6px}
.message-menu{position:relative;margin-left:0;display:inline-block}.message-menu summary{list-style:none;cursor:pointer;background:var(--raised);border:1px solid var(--line);border-radius:14px;width:27px;line-height:17px;text-align:center;font-weight:bold}.message-menu summary::-webkit-details-marker{display:none}.message-menu>div{position:absolute;top:24px;right:0;z-index:12;width:120px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:5px;box-shadow:0 7px 20px #0006}.message-menu button{display:block;text-align:left;width:100%;padding:6px 10px;font:inherit;border-radius:4px}.message-menu button:hover{background:var(--raised)}.message.is-pinned>.message-meta::after{content:'Pinned';color:var(--accent);font-size:10px}.message-highlight{outline:2px solid var(--accent);outline-offset:5px;border-radius:5px}.reply-draft{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--raised);padding:8px 12px;border-left:2px solid var(--accent);margin-bottom:5px;font-size:12px}.reply-draft span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-draft button{padding:4px 8px}.reply-quote{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:2px solid var(--accent);padding:7px 10px;font-size:12px;background:var(--raised);color:var(--muted);margin-bottom:8px}.forwarded-label{display:block;color:var(--muted);font-size:11px;margin-bottom:8px}.message-overlay{max-width:520px}.message-overlay input{width:100%;background:var(--bg);color:var(--text);font:inherit;border:1px solid var(--line);border-radius:6px;padding:9px 12px}.forward-preview{padding:12px;border-left:2px solid var(--accent);background:var(--raised);max-height:120px;overflow:auto;white-space:pre-wrap}.forward-destinations{display:grid;gap:5px;margin:14px 0}.forward-destinations button{padding:9px;text-align:left;border:1px solid var(--line);border-radius:6px}.forward-destinations button[aria-pressed=true]{background:var(--selected);outline:1px solid var(--accent)}.primary-action,.pins-list button{padding:8px 12px;border-radius:6px;background:var(--raised);margin:4px 8px 4px 0}.primary-action{background:var(--accent);color:var(--bg)}.primary-action:disabled{opacity:.45}.pins-list article{padding:16px 0;border-bottom:1px solid var(--line)}.pins-list p{white-space:pre-wrap;overflow-wrap:anywhere}
body:not([data-page=demo]) .page-content .eyebrow,body:not([data-page=demo]) .comment-prefix,body:not([data-page=demo]) .cursor,.demo-guide+.brand-slogan{display:none}.page-content .terminal-input{background:var(--surface);border:1px solid var(--line);padding:6px;border-radius:8px}.terminal-input .prompt{display:none}.page-content h1{font-weight:500;letter-spacing:-.8px}.page-content .small{font-size:12px}.page-content .terminal-input input{font-family:inherit}.page-content .terminal-input button{border-radius:6px;background:var(--accent);color:var(--bg);padding:10px}.page-content .home-dev-update h2{font-weight:500}.page-content .page-intro .eyebrow{display:none}
body[data-page=demo] .page-content{padding:28px 24px}body[data-page=demo] .page-content h1{font-size:28px;line-height:1.3}body[data-page=demo] .brand-slogan,body[data-page=demo] .cursor{display:none}body[data-page=demo] .demo-guide h2{font-size:18px}body[data-page=demo] .demo-guide p{font-size:13px}.page-content .carousel-chapters button{font-size:12px}#home-carousel .intro-values-grid h3{font-size:14px}#home-carousel .intro-values-grid p{font-size:12px}#home-carousel .intro-footnote{font-size:11px}
@media(max-width:620px){.app-bar{gap:12px;padding:8px}.wordmark{width:90px}.preview-tag{display:none}.presence-bar{padding:7px;gap:5px}.presence-bar #appearance-open{margin-left:0}.theme-cards{grid-template-columns:1fr}.theme-sample{height:70px}.theme-cards button{display:grid;grid-template-columns:100px 1fr}.theme-sample{grid-row:span 2}.appearance-panel,.message-overlay{padding:16px}.appearance-panel .palette-label{flex-direction:column}.chat-log{padding:16px 10px!important}}
@media(min-width:851px){:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) .app-body{--rail-width:255px}:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) #sidebar{width:100%;padding:0}}
@media(max-width:850px){:root:is([data-style=soft],[data-style=daylight],[data-style=hearth]) body.nav-open #sidebar{width:min(255px,calc(100vw - 24px));padding:8px}}
.tile-tools{position:relative;flex-shrink:0}.tile-tools>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:7px;background:var(--raised);font-size:18px}.tile-tools>summary::-webkit-details-marker{display:none}.tile-tools>div{position:absolute;right:0;top:38px;width:180px;z-index:30;background:var(--surface);border:1px solid var(--line);padding:5px;border-radius:8px;box-shadow:0 8px 24px #0007}.tile-bar .tile-tools button{display:flex!important;align-items:center;justify-content:flex-start;gap:10px;min-height:36px;height:auto!important;width:100%;border:0!important;background:transparent!important;text-align:left;padding:8px!important}.tile-tools button:hover{background:var(--raised)!important}.tile-tools button span{font-size:12px}.tile-tools button:focus-visible,.message-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Mirror the client activity rail, rather than a website list of links. */
.client-activity svg,.client-identity svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#sidebar .client-activity{padding:10px;background:var(--surface);overflow:auto}.server-row{display:flex;gap:5px;align-items:stretch}.server-row .server-picker{flex:1;min-width:0;margin:0;padding:9px 5px;font-size:14px;gap:8px}.server-picker strong{overflow:hidden;text-overflow:ellipsis}.server-row>button{width:34px;padding:5px;border:1px solid var(--line);background:var(--raised);border-radius:6px}.client-activity button{font:inherit;color:var(--text)}
.client-activity .server-invite{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:32px;padding:6px;margin:5px 0 16px;background:var(--raised);border:1px solid var(--line);border-radius:6px;font-size:13px}
#sidebar .client-activity h2{font-size:13px;font-weight:600;line-height:1.5;padding:0;margin:16px 3px 8px;color:var(--muted)}.client-room{border-radius:7px;padding:6px;background:transparent}.client-room.current-room{background:color-mix(in srgb,var(--accent) 8%,var(--surface));box-shadow:inset 2px 0 var(--accent)}.room-heading{display:flex;align-items:center;gap:4px}.room-heading .room-open{display:flex;align-items:center;gap:7px;min-width:0;flex:1;text-align:left;padding:6px 2px;font-size:13px;font-weight:500}.room-open span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-open b{font-weight:400}.room-heading .join-room{flex-shrink:0;width:auto;min-width:39px;min-height:32px;padding:6px 9px;border-radius:6px;background:var(--accent);color:var(--bg);font-size:12px}.room-heading .join-room.in-room{min-width:32px;width:32px;padding:6px;background:var(--raised);color:var(--text);border:1px solid var(--line)}.room-heading #room-more{width:30px;min-height:32px;padding:5px;border-radius:6px;background:var(--raised);border:1px solid var(--line)}
#voice-members{display:flex;flex-direction:column;gap:1px;padding:5px 2px 3px;margin:0;font-size:13px}.voice-members .room-person{display:flex;align-items:center;gap:8px;min-height:36px;text-align:left;width:100%;padding:3px 0;font:13px/1.4 "Noto Sans","DejaVu Sans",sans-serif}.room-person .person-avatar{display:grid;width:28px;height:28px;flex-shrink:0;font-size:12px;border-radius:50%;background:#45515c;color:#e8ecf3}.room-person small{font-size:10px;color:var(--muted)}.room-person[hidden]{display:none!important}.room-person #self-voice-state{margin-left:auto;color:var(--yellow)}.room-person.participant-muted:after{content:'muted';font-size:10px;color:var(--muted);margin-left:auto}
#sidebar .client-activity #voice-controls{border:0;border-top:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--accent) 4%,var(--surface));padding:8px;margin:10px 0 18px}#voice-controls .call-description{display:flex;flex-wrap:nowrap;align-items:center;gap:5px;padding:0;margin:0 0 7px;min-height:32px;font-size:12px}#voice-controls .call-description strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--accent)}#voice-controls .call-description>span{color:var(--muted);font-size:10px;white-space:nowrap}#voice-controls #leave-voice{display:grid;place-items:center;min-width:32px;min-height:32px;padding:5px;margin-left:auto;border:1px solid var(--line);border-radius:6px;color:var(--pink);background:var(--raised)}
#voice-controls .voice-buttons{display:flex;flex-wrap:wrap;gap:5px;margin:0}#voice-controls .voice-buttons button{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;min-width:0;padding:5px;font-size:0;border:1px solid var(--line);border-radius:6px;background:var(--raised);color:var(--text)}#voice-controls .voice-buttons button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--raised))}#voice-controls #voice-mute[aria-pressed=true]{color:var(--yellow);border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 12%,var(--raised))}
.client-channels{margin:18px 0}.client-channels>button{display:flex;align-items:center;gap:8px;min-height:34px;width:100%;text-align:left;padding:6px;background:var(--raised);border:1px solid var(--line);border-radius:6px;font-size:13px}.client-friends{border-top:1px solid var(--line);padding-top:5px;margin-top:24px}.client-friend{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:5px 3px;font-size:13px}.client-friend>svg,.client-friend>small{margin-left:auto}.client-friend>svg{width:30px;height:30px;border:1px solid var(--line);border-radius:6px;padding:5px;background:var(--raised)}.client-friend>span:nth-child(2){color:var(--accent)}.client-friend>small{font-size:10px;color:var(--muted)}
.client-identity{width:230px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:11px;color:var(--muted);line-height:1.2}.client-identity img{width:125px;height:31px;object-fit:contain;object-position:left}.client-identity>span:before{content:'';display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-right:4px}.presence-bar #appearance-open{margin-left:0}.presence-bar #demo-layout{margin-left:auto}.presence-bar #top-mute,.presence-bar #top-deafen{width:32px;height:32px;padding:5px}.presence-bar #top-mute[aria-pressed=true]{color:var(--yellow);border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 12%,var(--surface))}body[data-page=demo] .workspace-bar{display:none}.chat-selector{font-family:inherit;min-width:0}.chat-voice{flex-shrink:0}.compose-row .attach-demo,.compose-row .emoji-demo{background:var(--raised)!important;color:var(--text)!important;border:1px solid var(--line)!important;min-width:32px;padding:5px}.compose-row .attach-demo{margin-right:5px}.participant-control{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.participant-control label{flex:1}.participant-control input[type=range]{width:100%;padding:0}.participant-control button{border:1px solid var(--line);padding:7px 10px;border-radius:6px}.sample-file{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;text-align:left;border:1px solid var(--line);border-radius:7px;margin:7px 0}.emoji-choice{font-size:25px;padding:10px;border-radius:5px}.emoji-choice:hover,.sample-file:hover{background:var(--raised)}
@media(max-width:1100px){.client-identity{width:170px}.presence-bar{gap:5px}}@media(max-width:850px){.client-identity{display:none}.presence-bar #demo-layout{margin-left:0}.presence-bar{flex-wrap:wrap}#top-soundboard{font-size:11px}}
.tile[hidden]{display:none!important}.client-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:60vh;color:var(--muted);gap:12px}.client-empty h2{font-size:22px;color:var(--text)}.client-empty button{padding:10px 18px;border-radius:7px;background:var(--accent);color:var(--bg)}body[data-page=demo] .story-tile>.tile-bar{display:none}body[data-page=demo] .story-tile{border:0!important;background:transparent!important}
.message-reactions{display:flex;gap:5px;margin-top:7px}.message-reactions button{display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:7px;border:1px solid var(--line);background:var(--raised);font-size:12px;min-height:27px}.message-reactions button svg{width:16px;height:16px}.message-reactions button[aria-label^=Remove]{background:var(--accent);color:var(--bg)}
#sidebar .client-activity .room-open>span,#sidebar .client-activity .room-person>span:not(.person-avatar),#sidebar .client-activity .client-friend>span:not(.person-avatar){font-size:13px}#sidebar .client-activity .client-channels>button>span{font-size:13px}#sidebar .client-activity .room-person small{font-size:10px}

/* One public social link; no embedded feed or third-party scripts. */
.app-bar .social-link{margin-left:auto;flex-shrink:0;color:var(--muted);font-size:12px;text-decoration:none;white-space:nowrap;padding:8px 0}.app-bar .social-link:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}.app-bar .social-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
@media(max-width:700px){.app-bar{display:grid;grid-template-columns:90px minmax(0,1fr);gap:0 10px;padding:8px 10px}.app-bar .wordmark{grid-column:1;grid-row:1 / span 2;width:90px}.app-bar .top-navigation{grid-column:2;display:flex;justify-content:space-between;gap:2px;min-width:0}.app-bar .top-navigation a{font-size:11px!important;padding:7px 3px!important;white-space:nowrap}.app-bar .social-link{grid-column:2;justify-self:start;margin:0;font-size:12px;padding:3px}.presence-drawer{top:80px!important}}

/* Mobile reading surface: native page scroll, no desktop tile viewport. */
.mobile-demo-notice{display:none}
:root[data-device=mobile]{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root[data-device=mobile] body{display:block;height:auto;min-height:100svh;overflow:visible}
:root[data-device=mobile] .app-bar{position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;min-height:0;gap:4px 10px;padding:10px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));background:var(--bg)}
:root[data-device=mobile] .app-bar .wordmark{grid-column:1;grid-row:1;width:116px;padding:0}
:root[data-device=mobile] .app-bar .wordmark img{height:42px}
:root[data-device=mobile] .app-bar .social-link{grid-column:2;grid-row:1;margin:0;justify-self:end;display:flex;align-items:center;min-height:44px;font-size:12px;padding:5px 0}
:root[data-device=mobile] .app-bar .top-navigation{grid-column:1 / -1;grid-row:2;width:100%;margin:0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:2px;min-width:0}
:root[data-device=mobile] .app-bar .top-navigation a{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px!important;padding:8px 4px!important;border-radius:6px;white-space:normal}
:root[data-device=mobile] :is(.presence-drawer,#sidebar,.status-line,.workspace-bar,.workspace-note,.tree-divider,.tile-bar,.chat-tile,#knock-card,#presence-tip){display:none!important}
:root[data-device=mobile] .app-body{display:block;min-height:0;padding:0;overflow:visible}
:root[data-device=mobile] .workspace-shell{display:block;overflow:visible}
:root[data-device=mobile] #workspace{display:block;container-type:normal;min-height:0;height:auto;overflow:visible;margin:0;padding:0}
:root[data-device=mobile] #workspace>.story-tile{display:block!important;position:static!important;width:100%!important;height:auto!important;min-height:0;max-height:none;transform:none!important;border:0!important;background:transparent;overflow:visible}
:root[data-device=mobile] #page-copy{display:block;position:static;overflow:visible;overscroll-behavior:auto;container-type:normal;height:auto;max-height:none;width:100%;max-width:760px;margin:0 auto;padding:28px max(20px,env(safe-area-inset-right)) max(48px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));font-size:16px;line-height:1.75;overflow-wrap:anywhere}
:root[data-device=mobile] #page-copy :is(p,li){font-size:16px;line-height:1.75}
:root[data-device=mobile] #page-copy h1{font-size:30px;line-height:1.3;letter-spacing:-.7px}
:root[data-device=mobile] #page-copy h2{font-size:21px;line-height:1.4}
:root[data-device=mobile] #page-copy h3{font-size:18px;line-height:1.5}
:root[data-device=mobile] #page-copy :is(.small,figcaption,.planned){font-size:14px;line-height:1.65}
:root[data-device=mobile] #page-copy :is(img,video){max-width:100%;height:auto}
:root[data-device=mobile] #page-copy :is(.feature-grid,.principles,.theme-examples,.tray-demo,.merch-product,.home-hosting){grid-template-columns:1fr}
:root[data-device=mobile] #page-copy .section-heading{flex-wrap:wrap}
:root[data-device=mobile] #page-copy .section-heading>span{font-size:14px}
:root[data-device=mobile] #page-copy form{padding:16px}
:root[data-device=mobile] #page-copy label{font-size:16px;line-height:1.5}
:root[data-device=mobile] #page-copy .terminal-input{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:8px}
:root[data-device=mobile] #page-copy .terminal-input .prompt{display:none}
:root[data-device=mobile] #page-copy input{font-size:16px;width:100%;min-width:0;min-height:44px;padding:10px 8px}
:root[data-device=mobile] #page-copy button{min-height:44px;font-size:14px;line-height:1.5}
:root[data-device=mobile] #page-copy .terminal-input button{width:100%;min-height:46px;font-size:16px}
:root[data-device=mobile] #page-copy [role=status]{font-size:14px}
:root[data-device=mobile] #page-copy :is(.home-beta-link,.carousel-demo-link){display:inline-flex;align-items:center;min-height:44px;font-size:14px}
:root[data-device=mobile] #page-copy .terminal-bar{align-items:center;padding:12px 16px}
:root[data-device=mobile] #page-copy .terminal-bar h2{font-size:18px}
:root[data-device=mobile] .home-carousel{margin:16px 0 30px}
:root[data-device=mobile] .carousel-canvas{min-height:400px;padding:16px 0;align-items:center}
:root[data-device=mobile] #home-carousel #intro-brand p{font-size:12px;line-height:1.7}
:root[data-device=mobile] #home-carousel .intro-values-grid{grid-template-columns:1fr 1fr;gap:22px 16px}
:root[data-device=mobile] #home-carousel .intro-values-grid h3{font-size:15px}
:root[data-device=mobile] #home-carousel .intro-values-grid p{font-size:14px;line-height:1.5}
:root[data-device=mobile] #home-carousel #intro-values h2{font-size:22px}
:root[data-device=mobile] #home-carousel .intro-product-heading p{font-size:14px}
:root[data-device=mobile] #home-carousel #intro-demo{max-height:none;min-height:0;width:100%;height:auto}
:root[data-device=mobile] #home-carousel .intro-footnote{font-size:12px}
:root[data-device=mobile] .carousel-chapters{gap:8px}
:root[data-device=mobile] #page-copy .carousel-chapters button{font-size:12px;text-align:left;padding:8px 0}
:root[data-device=mobile] .carousel-navigation{gap:4px}
:root[data-device=mobile] #intro-progress{font-size:12px;line-height:1.4;text-align:center}
:root[data-device=mobile] .carousel-heading{font-size:14px}
:root[data-device=mobile] body[data-page=demo] .app-body{display:none!important}
:root[data-device=mobile] body[data-page=demo] .mobile-demo-notice{display:block;max-width:620px;margin:0 auto;padding:56px max(24px,env(safe-area-inset-right)) 60px max(24px,env(safe-area-inset-left));font-size:16px;line-height:1.75}
.mobile-demo-notice img{display:block;width:220px;max-width:100%;height:auto;margin:0 0 36px}
.mobile-demo-notice h1{font-size:28px;font-weight:500;line-height:1.35;color:var(--bright);margin:0 0 18px}
.mobile-demo-notice p{margin:0 0 24px}
.mobile-demo-notice a{display:flex;align-items:center;min-height:48px;width:fit-content}

:root[data-device=mobile] #page-copy summary{font-size:14px;min-height:44px;padding-block:10px}

/* One clear signup entry, using the same calm client palette. */
.app-bar .signup-link{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 17px;border-radius:7px;background:var(--accent);color:var(--bg);font-size:14px;font-weight:600;text-decoration:none}
.app-bar .signup-link:hover{background:var(--bright);color:var(--bg)}
body[data-page=sign-up] #page-copy{padding-inline:max(24px,calc((100% - 640px)/2));padding-block:36px 50px;font-size:16px}
.signup-page>p{line-height:1.8}.page-content .signup-page form{padding:20px 0}
.page-content .signup-page label{font-size:15px}
.page-content .signup-page input[type=email]{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--bright);font-size:16px}
.page-content .signup-page .small{font-size:13px;line-height:1.7;margin:12px 0 20px}
.signup-options{padding:0;border:0;margin:25px 0}.signup-options legend{font-size:14px;color:var(--muted);margin-bottom:10px}
.page-content .signup-option{display:flex;align-items:flex-start;gap:12px;min-height:44px;line-height:1.6;cursor:pointer;padding:8px 0;margin:0}
.page-content .signup-option input[type=checkbox]{appearance:auto;width:19px;height:19px;min-height:0;flex:0 0 19px;padding:0;margin:3px 0 0;accent-color:var(--accent)}
.page-content .signup-submit{background:var(--accent);color:var(--bg);border-radius:7px;padding:11px 26px;min-height:46px;font-size:16px;font-weight:600}
.page-content [role=status].signup-feedback{font-size:15px;line-height:1.7;padding:16px 18px;margin-top:20px;border-left:3px solid var(--accent);background:var(--raised);color:var(--bright);border-radius:0 6px 6px 0;scroll-margin:20px}
.page-content [role=status].signup-feedback[data-error=true]{border-color:var(--pink)}
:root[data-device=mobile] .app-bar .signup-link{grid-row:3;grid-column:1 / -1;width:100%;min-height:44px;margin:4px 0}
:root[data-device=mobile] body[data-page=sign-up] #page-copy{padding:28px 20px 48px}
:root[data-device=mobile] #page-copy .signup-option input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0;flex-basis:20px}

/* Development news archive entry. */
.home-dev-update .button{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border:1px solid var(--line);border-radius:7px;background:var(--raised);color:var(--bright);font-size:14px;text-decoration:none}.home-dev-update .button:hover{border-color:var(--accent);background:var(--selected)}