/* Discovery app shell, drawn from the live app (captured 2026-10-02 at 1512 × 982) and its source.
   Layout: src/components/studio/StudioShell.tsx:246-553 · sidebar: StudioSidebar.tsx:34-73, App.css:1405-1802
   Topbar: StudioShell.tsx:427, App.css:5529 · Copilot: src/components/ontology/CopilotRail.tsx, ontology.css:248-514
   Page header: StudioPrimitives.tsx:122-151, App.css:57-131 · Seg tabs: StudioSegTabs.tsx, App.css:2312-2398
   Mobile (<900px): MobileTabBar.tsx, MobileCopilotDock.tsx, App.css:4660-4792, 9290. Tokens: captured app.css (dark). */
@font-face{font-family:Satoshi;src:url('../../../../assets/beam/fonts/satoshi-regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url('../../../../assets/beam/fonts/satoshi-medium.woff') format('woff');font-weight:500 600;font-display:swap}
@font-face{font-family:Satoshi;src:url('../../../../assets/beam/fonts/satoshi-bold.woff') format('woff');font-weight:700 900;font-display:swap}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Satoshi,ui-sans-serif,system-ui,sans-serif;color:var(--foreground-100);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45;
  background:radial-gradient(45% 250px at 50% 0%,rgba(59,130,246,.2) 18.31%,rgba(0,4,96,0) 92.85%),var(--background-100)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.lc{flex:none;display:block}

/* Layout: sidebar 270 (collapses to 72) | content column (16px 8px 16px 0): main panel, 8px, Copilot 320. */
.as{height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr)}
.as.side-min{grid-template-columns:72px minmax(0,1fr)}
.as-col{min-width:0;display:flex;padding:16px 8px 16px 0;height:100vh}
.as-main{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid var(--border-100);border-radius:16px;background:var(--muted-10);overflow:hidden;position:relative}
.as-cop{flex:none;width:328px;padding-left:8px;display:flex}
.as.cop-closed .as-cop{display:none}

/* Sidebar */
.as-side{display:flex;flex-direction:column;min-width:0;background:transparent}
.as-ws{display:flex;align-items:center;gap:8px;padding:29px 0 0 29px;color:var(--muted-foreground-100);font-size:14px;line-height:24px}
.as-ws .av16{width:16px;height:16px;border-radius:4px;background:var(--foreground-100);color:var(--background-100);font-size:8px;font-weight:800;display:grid;place-items:center;letter-spacing:-.04em}
.as-ws .lc{padding:4px;width:24px;height:24px}
.as-nav{display:grid;gap:4px;margin-top:8px;padding:0 12px}
.as-link{display:flex;align-items:center;gap:8px;min-height:32px;border-radius:8px;padding:6px 16px;font-size:14px;color:var(--muted-foreground-100)}
.as-link:hover,.as-link.on{background:var(--accent-50,hsl(217 33% 17% / .5));color:var(--foreground-100)}
.as-sub{display:grid;gap:2px;margin:2px 0 4px clamp(12px,8cqi,24px);padding-left:10px;border-left:1px solid var(--border-100)}
.as-sub a{display:flex;align-items:center;gap:8px;min-height:32px;border-radius:8px;padding:0 10px;color:var(--muted-foreground-100);font-size:14px}
.as-sub a:hover,.as-sub a.on{background:var(--accent-50,hsl(217 33% 17% / .5));color:var(--foreground-100)}
.as-div{height:1px;background:var(--border-100);margin:8px 16px}
.as-grp{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 16px 0 28px;color:var(--muted-foreground-100);font-size:14px}
.as-grp button{border:0;background:none;color:inherit;width:24px;height:24px;display:grid;place-items:center;border-radius:6px}
.as-camp{display:flex;align-items:center;gap:8px;margin:0 12px;min-height:32px;padding:6px 16px;border-radius:8px;font-size:14px;font-weight:500;color:var(--foreground-90,var(--foreground-100))}
.as-camp:hover{background:var(--accent-50,hsl(217 33% 17% / .5))}
.as-camp .ci{width:20px;height:20px;border-radius:50%;background:var(--muted-20);display:grid;place-items:center;flex:none;color:var(--muted-foreground-100)}
.as-camp .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-camp .lc:last-child{transform:rotate(-90deg);color:var(--muted-foreground-100)}
.as-foot{margin-top:auto;border-top:1px solid var(--border-100);padding:12px 20px;display:grid;gap:12px;font-size:14px;color:var(--muted-foreground-100)}
.as-foot span{display:flex;align-items:center;gap:8px}
.as-foot .av20{width:20px;height:20px;border-radius:50%;background:var(--muted-40);color:var(--foreground-100);font-size:9px;font-weight:700;display:grid;place-items:center}
.as.side-min .as-ws span,.as.side-min .as-ws .lc,.as.side-min .as-link .lbl,.as.side-min .as-grp,.as.side-min .as-camp,.as.side-min .as-sub,.as.side-min .as-foot .lbl{display:none}
.as.side-min .as-ws{padding:29px 0 0;justify-content:center}
.as.side-min .as-link{justify-content:center;padding:6px 0}

/* Topbar: min-height 52, padding 8px 16px, border-bottom; 28px icon buttons. */
.as-top{flex:none;min-height:52px;display:flex;align-items:center;gap:16px;padding:8px 16px;border-bottom:1px solid var(--border-100)}
.as-ib{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--accent-foreground-100,var(--foreground-100));display:grid;place-items:center;flex:none}
.as-ib:hover{background:var(--muted-30)}
.as-crumbs{display:flex;align-items:center;gap:10px;font-size:14px;min-width:0;color:var(--muted-foreground-100)}
.as-crumbs a{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-crumbs a:hover{color:var(--foreground-100)}
.as-crumbs strong{font-weight:400;color:#eef2f8;max-width:256px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-crumbs .lc{color:var(--muted-foreground-80,var(--muted-foreground-100))}
.as-tr{margin-left:auto;display:flex;gap:4px;align-items:center}
.as-copbtn .disc{width:14px;height:14px;border-radius:50%;background:#f8fafc;display:grid;place-items:center}
.as-copbtn .disc img{width:10.5px;filter:invert(1)}
.as-mws,.as-mlabel,.as-mav{display:none}

/* Workspace body: 24px 16px on desktop. Pages can opt into a full-height body (no scroll) with .fill. */
.as-work{flex:1;min-height:0;overflow:auto;padding:24px 16px}
.as-work.fill{display:flex;flex-direction:column;overflow:hidden}

/* Copilot rail */
.cop{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid var(--border-100);border-radius:16px;background:var(--muted-20);box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden}
.cop-h{min-height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border-100);padding:0 16px}
.cop-h .t{display:flex;align-items:center;gap:7px}
.cop-h .t img{height:13px;opacity:.92}
.cop-h h2{margin:0;font-size:12px;font-weight:640}
.cop-h .acts{display:flex;gap:2px}
.cop-h .acts button{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--muted-foreground-100);display:grid;place-items:center}
.cop-h .acts button.en:hover{background:var(--muted-30);color:var(--foreground-100)}
.cop-s{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.cop-empty{max-width:240px;margin:auto;padding:24px 0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.cop-empty .mk{width:40px;height:40px;border-radius:999px;background:#f8fafc;display:grid;place-items:center;margin-bottom:2px}
.cop-empty .mk img{width:22px;filter:invert(1)}
.cop-empty h3{margin:0;font-size:14px;font-weight:680}
.cop-empty p{margin:0;color:var(--muted-foreground-100);font-size:11.5px;line-height:1.6}
.cop-ctx{display:grid;gap:9px;padding:0 0 14px;border-bottom:1px solid var(--border-100)}
.cop-ctx .hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cop-ctx strong{font-size:14px;font-weight:600}
.cop-ctx p{margin:0;color:var(--muted-foreground-100);font-size:13px;line-height:1.5}
.cop-lbl{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--muted-foreground-100);font-size:12px;font-weight:800}
.cop-pr{display:grid}
.cop-pr button{display:block;width:100%;border:0;border-radius:8px;padding:10px 8px;background:transparent;font-size:13px;font-weight:690;line-height:1.35;text-align:left}
.cop-pr button+button{border-top:1px solid var(--border-100)}
.cop-pr button:hover{background:color-mix(in oklab,var(--primary-100) 8%,transparent)}
.cop-c{margin-top:auto;padding:12px 12px 14px;flex:none}
.cop-c .box{display:flex;min-height:46px;align-items:center;gap:9px;border:1px solid var(--border-100);border-radius:12px;padding:0 8px;background:color-mix(in oklab,var(--background-100) 76%,transparent)}
.cop-c .at{width:26px;height:26px;border:1px solid var(--border-100);border-radius:8px;display:grid;place-items:center;color:var(--muted-foreground-100);opacity:.85;flex:none}
.cop-c .ph{flex:1;min-width:0;overflow:hidden;color:var(--muted-foreground-100);font-size:12.5px;font-weight:550;white-space:nowrap;text-overflow:ellipsis}
.cop-c .sd{width:28px;height:28px;border-radius:999px;background:var(--muted-50);color:var(--muted-foreground-100);display:grid;place-items:center;opacity:.85;flex:none}
/* Depth chip (GraphDepthLegend / ontology-depth-key): pill, 12px/720, 8px dot. */
.dk{display:inline-flex;align-items:center;gap:6px;min-height:24px;border-radius:999px;padding:3px 9px 3px 7px;font-size:12px;font-weight:720;border:1px solid var(--border-100);background:color-mix(in oklab,var(--background-100) 70%,transparent);white-space:nowrap}
.dk i{width:8px;height:8px;border-radius:50%;flex:none}
.dk small{font-size:11px;font-weight:600;opacity:.75}
.dk.strong{color:#4ade80}.dk.strong i{background:#22c55e}
.dk.partial{color:#60a5fa}.dk.partial i{background:#3b82f6}
.dk.thin{color:#facc15}.dk.thin i{background:#eab308}
.dk.unknown{color:var(--muted-foreground-100)}.dk.unknown i{background:var(--muted-foreground-100)}
/* Secondary button (StudioButton variant="secondary") and primary (App.css:180-210): 32px, radius 8, 14px/400. */
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--border-100);background:var(--muted-20);font-size:14px;font-weight:400;white-space:nowrap}
.sbtn:hover{background:var(--muted-30)}
.sbtn.sm{height:28px;padding:0 10px;font-size:13px}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:0;background:var(--primary-100);color:#fff;font-size:14px;font-weight:400;white-space:nowrap}
.pbtn:hover{background:var(--primary-90)}

/* StudioPageHeader */
.sph{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;flex:none}
.sph.tabbed{margin-bottom:0}
.sph h1{margin:0;font-size:20px;font-weight:600;line-height:28px;letter-spacing:-.025em}
.sph p{margin:0;font-size:14px;line-height:20px;color:var(--muted-foreground-100)}
.sph-side{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.prov{display:inline-flex;align-items:center;gap:6px;color:var(--muted-foreground-100);font-size:12.5px}
.prov .dot{width:7px;height:7px;border-radius:50%;background:var(--success-100)}
@media (min-width:900px){.sph{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:20px}.sph-side{justify-content:flex-end}}
/* StudioSegTabs: fit-content, padding 4, radius 8, muted bg, margin 24px 0; tab min-h 28, 0 12px, radius 6. */
.seg2{display:flex;width:fit-content;max-width:100%;overflow-x:auto;padding:4px;border-radius:8px;background:var(--muted-100);margin:24px 0;flex:none}
.seg2 button{min-height:28px;padding:0 12px;border:0;border-radius:6px;background:transparent;font-size:14px;line-height:20px;color:var(--muted-foreground-100);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.seg2 button.on{background:var(--background-100);color:var(--foreground-100);box-shadow:0 1px 2px rgba(0,0,0,.05)}

/* Mobile shell (<900px): no sidebar, no Copilot column; bottom tab bar + Copilot dock. */
.as-tabbar,.as-dock{display:none}
@media (max-width:899px){
  .as,.as.side-min{display:block;height:auto;min-height:100vh}
  .as-side,.as-cop{display:none!important}
  .as-col{padding:0;height:auto;min-height:100vh}
  .as-main{border:0;border-radius:0;overflow:visible}
  .as-top{padding:8px 12px;position:sticky;top:0;z-index:20;background:var(--background-100)}
  .as-top>.as-ib:first-child,.as-crumbs,.as-copbtn{display:none!important}
  .as-mws{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted-foreground-100)}
  .as-mws .av16{width:16px;height:16px;border-radius:4px;background:var(--foreground-100);color:var(--background-100);font-size:8px;font-weight:800;display:grid;place-items:center}
  .as-mlabel{display:block;font-size:14px;color:#eef2f8}
  .as-mav{display:grid;width:24px;height:24px;border-radius:50%;background:var(--muted-40);font-size:9px;font-weight:700;place-items:center}
  .as-work{padding:16px 12px 120px;overflow:visible}
  .as-work.fill{overflow:visible}
  .as-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;border-top:1px solid var(--border-100);background:color-mix(in srgb,var(--background-80) 92%,transparent);backdrop-filter:blur(12px);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .as-tabbar a{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:550;color:var(--muted-foreground-100)}
  .as-tabbar a.on{color:var(--foreground-100)}
  .as-dock{display:inline-flex;align-items:center;gap:8px;position:fixed;right:14px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:31;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--border-100);background:var(--muted-20);backdrop-filter:blur(12px);font-size:13px;font-weight:640;box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .as-dock .disc{width:20px;height:20px;border-radius:50%;background:#f8fafc;display:grid;place-items:center}
  .as-dock .disc img{width:12px;filter:invert(1)}
}
.as-mchips{display:none}
@media (max-width:899px){
  .as-mchips{display:flex;gap:8px;overflow-x:auto;padding:10px 12px 0}
  .as-mchips a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--border-100);background:var(--muted-20);font-size:14px;color:var(--muted-foreground-100)}
  .as-mchips a.on{background:var(--accent-50,hsl(217 33% 17% / .5));color:var(--foreground-100)}
  .ogr>.orgf{top:80px}
}