.route-loading { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:var(--color-kumo-base); color:var(--text-color-kumo-subtle); }
html[data-route-loading] :is(#join,#hub,#studio) { visibility:hidden; }
.loading-mark { width:28px; height:28px; border:2px solid var(--color-kumo-line); border-top-color:var(--color-kumo-brand); border-radius:50%; animation:agent-turn 1s linear infinite; }
.agent-progress,.agent-continuation { flex-shrink:0; padding:12px 16px; border-bottom:1px solid var(--color-kumo-line); background:var(--color-kumo-tint); font-size:var(--text-base); line-height:1.5; }
.agent-progress { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.agent-progress p,.agent-continuation p { margin:0 0 4px; }
.agent-progress span { color:var(--text-color-kumo-subtle); font-variant-numeric:tabular-nums; }
.agent-continuation button { margin-top:8px; }
.action-availability { margin:0 0 10px; color:var(--text-color-kumo-subtle); font-size:var(--text-base); line-height:1.5; }
.export-status { position:fixed; bottom:20px; right:20px; z-index:60; max-width:min(420px,calc(100vw - 32px)); padding:16px 20px; background:var(--color-kumo-overlay); border:1px solid var(--color-kumo-line); box-shadow:var(--shadow-stack); border-radius:12px; font-size:var(--text-base); }
.export-status p { margin:0 0 6px; }
.export-status span { color:var(--text-color-kumo-subtle); font-variant-numeric:tabular-nums; }
dialog .export-status { position:static; max-width:100%; margin-top:16px; box-shadow:none; }
a[aria-disabled=true] { cursor:wait; opacity:.7; }
.mobile-expectation { font-size:var(--text-base); line-height:1.7; color:var(--text-color-kumo-subtle); }
.join-card > .mobile-expectation { margin:0; padding:0 28px 20px; }
.brief-quickstart { display:none; }
.keep-narrow { display:none; }
#workspaceMenuButton,.mobile-lab-name { display:none; }
.workspace-menu h2 { margin:0 0 6px; padding-right:12px; font-size:var(--text-2xl); }
.workspace-menu-header { position:sticky; top:-20px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-20px -20px 16px; padding:8px 20px; z-index:5; background:var(--color-kumo-overlay); }
.workspace-menu-header .close { position:static; flex-shrink:0; }
.workspace-menu #workspaceMenuStatus,.mobile-action-note { margin:0 0 16px; font-size:var(--text-base); line-height:1.6; color:var(--text-color-kumo-subtle); }
.drawer-nav { display:flex; flex-direction:column; gap:4px; }
.drawer-nav :is(button,a) { display:flex; align-items:center; justify-content:flex-start; gap:16px; width:100%; min-height:52px; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:var(--text-color-kumo-default); text-align:left; font-size:18px; font-weight:500; line-height:1.4; text-decoration:none; white-space:normal; }
.drawer-nav :is(button,a):hover,.drawer-nav [aria-current=page] { background:var(--color-kumo-tint); }
.drawer-nav svg { width:24px; height:24px; flex-shrink:0; }
.drawer-library-nav { margin-top:16px; padding-top:16px; border-top:1px solid var(--color-kumo-line); }
.drawer-tools { margin-top:16px; padding-top:8px; border-top:1px solid var(--color-kumo-line); }
.drawer-tools details { border:0; margin:0; padding:0; }
.drawer-tools summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:10px 12px; list-style:none; font-size:var(--text-base); font-weight:500; cursor:pointer; }
.drawer-tools summary::-webkit-details-marker { display:none; }
.drawer-tools summary svg { width:18px; height:18px; transition:transform .18s; }
.drawer-tools details[open] > summary svg { transform:rotate(180deg); }
.drawer-tools .drawer-nav { margin:0 0 12px; }
.drawer-tools .drawer-nav :is(button,a) { min-height:48px; font-size:var(--text-base); }
.mobile-action-note { padding:0 12px; }
@media(max-width:400px) {
 #keepButton .keep-wide { display:none; }
 .actions #keepButton > .keep-narrow { display:inline; }
}
@media(pointer:coarse) {
 button,.button,summary,.view-tabs button,.file-toolbar button,.terminal-title button { min-height:44px; }
 .icon-button,.actions .icon-button { min-width:44px; min-height:44px; }
}
@media(max-width:760px) {
 /* Keep the touch area even when the visual label is compact. */
 button,.button,dialog button,.view-tabs button,.sidebar nav button,.file-toolbar button,.editor-status button,.terminal-title button { min-height:44px; }
 button.icon-button,.actions .icon-button { width:44px; min-width:44px; height:44px; }
 dialog .close { min-width:44px; min-height:44px; }
 :is(.start-header,.portal-header) nav a,.start-footer a,.start-text-link,.build-links a,.app-address a,.preview-footer button,summary { min-height:44px; }
 :is(.start-header,.portal-header) nav a,.start-footer a,.start-text-link,.build-links a,.app-address a { display:inline-flex; align-items:center; }
 .topbar { height:56px; min-height:56px; gap:10px; }
 .topbar .brand { display:none; }
 .actions { gap:6px; }
 .actions > :not(#themeButton) { display:none; }
 #workspaceMenuButton { display:inline-flex; }
 .mobile-lab-name { display:block; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--text-base); color:var(--text-color-kumo-subtle); }
 .app-shell { height:calc(100dvh - 56px); min-height:0; }
 .sidebar,.focus-mode .sidebar,.workspace-heading,.action-availability { display:none; }
 .workspace { padding:8px; }
 body { --workspace-drawer-width:min(328px,84vw); }
 #studio { transition:transform .2s var(--ease-out-strong),border-radius .2s; }
 body.workspace-drawer-open { overflow:hidden; }
 .workspace-drawer-open #studio { transform:translateX(var(--workspace-drawer-width)); border-radius:20px 0 0 20px; overflow:hidden; height:100dvh; box-shadow:-8px 0 32px #0002; }
 .workspace-menu { position:fixed; inset:0 auto 0 0; margin:0; width:var(--workspace-drawer-width); height:100dvh; max-height:100dvh; max-width:100vw; padding:20px 20px calc(24px + env(safe-area-inset-bottom)); border:0; border-radius:0; box-shadow:none; }
 .workspace-menu::backdrop { background:transparent; backdrop-filter:none; }
 .workspace-menu[open] { animation:workspace-menu-in .2s var(--ease-out-strong); }
 .build-actions { gap:8px; }
 .surface-toolbar { display:none; }
 .workbench { grid-template-rows:minmax(0,1fr); }
 .agent-panel,.surface-content { grid-row:1; }
 .view-tabs { gap:0; }
 .view-tabs button { padding:4px 7px; }
 .surface-actions button { padding:5px; }
 .file-toolbar { min-height:52px; height:auto; }
 .file-toolbar #toggleFiles>span { display:inline; }
 .file-path { min-width:0; }
 .file-path > span:first-child { display:none; }
 .file-actions { gap:4px; }
 .editor-body { position:relative; }
 #fileTree { position:absolute; inset:0; width:100%; z-index:3; border-right:0; }
 #fileTree :is(button,summary) { min-height:44px; }
 #fileTree summary { display:flex; align-items:center; }
 .editor-status,.preview-footer,.terminal-title { height:auto; min-height:48px; }
 .terminal-title button { padding:6px 9px; }
 .brief-quickstart { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:24px 0 12px; padding:16px 0; border-block:1px solid var(--color-kumo-line); }
 .brief-quickstart > span { flex:1; font-size:var(--text-base); color:var(--text-color-kumo-subtle); }
 .brief-quickstart button { flex-shrink:0; }
 .brief-start { position:static; }
 .join-card > .mobile-expectation { padding-inline:24px; }
 .lab-menu #endLab { margin-top:10px; }
 .dialog-actions,.finish-actions,#endedActions { gap:12px; }
 .export-status { right:16px; bottom:16px; }
}
@keyframes workspace-menu-in { from { transform:translateX(-100%); } to { transform:translateX(0); } }