@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap');

:root { --ink:#111; --paper:#fff; --fog:#f5f5f3; --line:#d5d5d1; --muted:#777; --mono:"DM Mono",ui-monospace,monospace; --sans:"IBM Plex Sans",ui-sans-serif,sans-serif; --serif:"Source Serif 4",ui-serif,serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); overflow:hidden; }
button,input,textarea,select { font:inherit; color:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.auth-shell { min-height:100svh; padding:clamp(28px,8vw,120px); display:grid; align-content:center; grid-template-columns:minmax(1fr,430px); border-left:16px solid var(--ink); }
.auth-wordmark,.wordmark { font:500 13px/1 var(--mono); letter-spacing:.14em; }.auth-wordmark { margin-bottom:42px; }.auth-wordmark span,.wordmark span { font-weight:400; color:var(--muted); margin-left:4px; }.wordmark i { border:1px solid var(--ink); font-style:normal; font-size:9px; padding:3px 4px; margin-left:12px; vertical-align:middle; }
.auth-panel h1,.dialog h1 { font:600 clamp(34px,4vw,50px)/.95 var(--serif); margin:0 0 16px; letter-spacing:-.04em; }.auth-panel p,.dialog p { color:var(--muted); line-height:1.55; margin:0 0 27px; }
form { display:grid; gap:15px; } label { display:grid; gap:7px; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; } input,textarea,select { width:100%; border:1px solid var(--line); background:var(--paper); padding:12px; border-radius:0; } textarea { min-height:100px; resize:vertical; font:400 14px/1.5 var(--sans); letter-spacing:normal; text-transform:none; }
.auth-footnote { position:fixed; left:clamp(28px,8vw,120px); bottom:28px; color:var(--muted); font:11px/1.4 var(--mono); max-width:330px; }.black-button,.outline-button,.text-button,.square-button { border:1px solid var(--ink); background:var(--paper); min-height:35px; padding:0 13px; font:500 11px var(--mono); letter-spacing:.04em; }.black-button { background:var(--ink); color:var(--paper); }.text-button { border:0; padding:0 6px; min-height:30px; }.square-button { width:31px; min-height:31px; padding:0; font-size:18px; }.outline-button:hover,.text-button:hover,.square-button:hover { background:var(--fog); }
.studio-shell { height:100svh; display:grid; grid-template-rows:56px 44px 1fr; background:var(--paper); }.topbar { height:56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--ink); padding:0 17px; position:relative; z-index:4; }.project-switcher { display:flex; gap:8px; align-items:center; }.project-switcher select { width:min(330px,40vw); height:32px; font:11px var(--mono); padding:0 28px 0 9px; border-color:var(--ink); }.account { justify-self:end; display:flex; gap:13px; align-items:center; font:11px var(--mono); }.account span { max-width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.canvas-toolbar { display:flex; justify-content:space-between; align-items:center; padding:0 16px; border-bottom:1px solid var(--line); position:relative; z-index:3; background:var(--paper); }.tool-group { display:flex; gap:6px; align-items:center; }.tool-group output { width:42px; text-align:center; font:10px var(--mono); }.run-state { font:10px var(--mono); letter-spacing:.12em; padding:5px 8px; border:1px solid var(--ink); }.run-state[data-state="running"] { color:var(--paper); background:var(--ink); }.run-state[data-state="failed"] { border-style:dashed; }.canvas-viewport { position:relative; overflow:hidden; cursor:grab; user-select:none; background:var(--paper); }.canvas-viewport.is-panning { cursor:grabbing; }.canvas-viewport:focus { outline:0; }.canvas-viewport:focus-visible { box-shadow:inset 0 0 0 2px var(--ink); }.canvas-viewport svg { width:100%; height:100%; display:block; color:var(--ink); transform-origin:0 0; }.canvas-hotspots { position:absolute; inset:0; pointer-events:none; z-index:2; }.canvas-hotspots button { position:absolute; translate:-50% -50%; width:36px; height:36px; padding:0; border:0; background:transparent; pointer-events:auto; cursor:pointer; }.canvas-hotspots button.leaf-hit { width:22px; height:22px; }.canvas-hotspots button.branch-hit { width:38px; height:28px; }.canvas-hotspots button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }.canvas-hint { position:absolute; bottom:20px; left:20px; font:10px var(--mono); color:var(--muted); background:rgba(255,255,255,.9); padding:7px 9px; border:1px solid var(--line); }.canvas-hint kbd { border:1px solid var(--line); padding:1px 3px; background:var(--paper); font:inherit; }.empty-canvas { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:18px; font:18px var(--serif); z-index:1; }
.inspector { width:min(420px,94vw); height:calc(100svh - 100px); position:fixed; top:100px; right:0; z-index:5; background:var(--paper); border-left:1px solid var(--ink); padding:31px 26px 28px; overflow:auto; box-shadow:-8px 0 0 rgba(0,0,0,.04); }.close-button { position:absolute; top:10px; right:12px; border:0; background:transparent; font:28px/1 var(--serif); }.inspector h2 { font:600 31px/1 var(--serif); letter-spacing:-.035em; margin:0 0 5px; }.inspector h3 { font:500 11px var(--mono); letter-spacing:.1em; margin:27px 0 11px; }.eyebrow { font:10px var(--mono); letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }.metric-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ink); border-left:1px solid var(--ink); margin-top:20px; }.metric-grid div { min-height:68px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:9px; }.metric-grid label { font:10px var(--mono); color:var(--muted); }.metric-grid strong { display:block; margin-top:7px; font:500 20px var(--serif); }.hypothesis { border-left:2px solid var(--ink); padding:2px 0 2px 13px; color:#333; font:15px/1.55 var(--serif); }.family-table { width:100%; border-collapse:collapse; font:10px/1.3 var(--mono); }.family-table td,.family-table th { padding:8px 4px; border-bottom:1px solid var(--line); text-align:right; }.family-table td:first-child,.family-table th:first-child { text-align:left; max-width:185px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.artifact-list { display:grid; gap:0; }.artifact-button { border:0; border-bottom:1px solid var(--line); background:transparent; padding:11px 0; display:flex; justify-content:space-between; text-align:left; font:12px var(--sans); }.artifact-button small { font:10px var(--mono); color:var(--muted); }.artifact-viewer { white-space:pre-wrap; max-height:42vh; overflow:auto; background:var(--fog); padding:12px; border:1px solid var(--line); font:11px/1.6 var(--mono); }
.branch-fab { position:fixed; right:20px; bottom:19px; z-index:6; display:flex; gap:8px; align-items:center; background:var(--ink); color:var(--paper); border:1px solid var(--ink); padding:10px 13px; font:11px var(--mono); }.branch-fab:first-letter { font-size:18px; }.branch-fab span { letter-spacing:.04em; }.dialog { padding:0; width:min(550px,calc(100vw - 30px)); border:1px solid var(--ink); box-shadow:12px 12px 0 var(--ink); }.dialog::backdrop { background:rgba(255,255,255,.7); }.dialog form { padding:31px; }.dialog-header { position:relative; }.dialog-header .close-button { top:-4px; right:-7px; }.dialog h1 { font-size:34px; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:8px; }.evidence-lock { display:grid; grid-template-columns:105px 1fr; gap:6px 12px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:12px 0; font:11px/1.5 var(--mono); }.evidence-lock strong { font:500 12px var(--sans); }.evidence-lock small { grid-column:2; color:var(--muted); }.branch-types { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--ink); }.branch-types label { display:block; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:10px; cursor:pointer; font:11px var(--mono); letter-spacing:0; text-transform:none; }.branch-types label:nth-child(2n) { border-right:0; }.branch-types label:nth-last-child(-n+2) { border-bottom:0; }.branch-types input { position:absolute; opacity:0; }.branch-types label:has(input:checked) { color:var(--paper); background:var(--ink); }.toast { position:fixed; top:112px; left:50%; translate:-50% -10px; opacity:0; pointer-events:none; z-index:20; border:1px solid var(--ink); padding:10px 14px; background:var(--paper); font:11px var(--mono); transition:.18s ease; }.toast.show { opacity:1; translate:-50% 0; }.toast.error { background:var(--ink); color:var(--paper); }
.invite-output { display:none; word-break:break-all; background:var(--fog); border:1px solid var(--line); padding:10px; font:11px/1.5 var(--mono); letter-spacing:normal; text-transform:none; }.invite-output:not(:empty) { display:block; }
@media (max-width:720px) { .topbar { grid-template-columns:1fr auto; }.project-switcher { grid-column:1 / -1; grid-row:2; display:none; }.wordmark { font-size:11px; }.account span { display:none; }.canvas-toolbar { padding:0 8px; }.canvas-toolbar .tool-group:first-child .text-button { display:none; }.run-controls .text-button { display:none; }.branch-fab span { display:none; }.branch-fab { width:44px; height:44px; border-radius:50%; justify-content:center; padding:0; }.inspector { top:100px; }.canvas-hint { display:none; } }