/* vtruvian.com, the final option (2026-10-15). Option B's page and words, set in the draft's system: seven type sizes,
   one 8px spacing scale, one button family. The product screen, the feature screens 01-03 and the studio tiles are the
   showcase session's, the real app's pieces, each styling itself in its own shadow root (static/showcase/); the 04 deck
   is the app's benches drawn here in its tokens (Vtruvian_desktop styles/theme.css). Fonts: Inter and Space Grotesk,
   served from this site (static/fonts, SIL Open Font License). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-wght.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#000;--bg-1:#08080a;--bg-2:#101013;--bg-3:#17171b;
  --line:#1c1c21;--line-2:#2a2a31;--line-3:#3b3b44;
  --ink:#fff;--ink-2:#a9a9b2;--ink-3:#8c8c96;--ink-4:#55555e;
  --cobalt:oklch(72% .15 255);--cobalt-soft:oklch(72% .15 255 / .14);--red:#ff6b5e;
  --ember:oklch(76% .15 60);--ember-hi:oklch(90% .09 75);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --text:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* type: 62 · 52 · 44 · 38 · 22 · 19 · 17 · 15 · 13 on a laptop */
  --t-1:clamp(40px,4.4vw,62px);--t-2:clamp(30px,3.3vw,44px);--t-h2:clamp(34px,3.9vw,52px);--t-3:clamp(28px,2.6vw,38px);
  --t-4:clamp(20px,1.6vw,22px);--t-lead:clamp(17px,1.3vw,19px);--t-body:15px;--t-small:13px;
  /* space: 8 · 16 · 24 · 32 · 48 · 64 · 96 · 160 */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:160px;
  --wrap:1200px;--gutter:32px;--r-win:12px;--r-tile:16px;
  --ease:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.65,0,.35,1);
  /* the ground each piece of the app stands on, and the window round a recording */
  --stage-line:rgba(255,255,255,.05);--win-ring:rgba(255,255,255,.11);--win-shadow:0 50px 100px -40px rgba(0,0,0,.95);
  --pane-shadow:0 0 0 1px rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.2);   /* a window in a box, as the studio tiles' (studio.css --v-shadow-card) */
  /* the app's own panels (theme.css, night): grounds, inks, lines, its two meanings of colour and its status colours */
  --ap-canvas:oklch(19% .004 255);--ap-surface:oklch(24.5% .005 258);--ap-inset:oklch(22.6% .005 258);--ap-field:oklch(28% .006 258);
  --ap-hover:oklch(27.5% .006 258);--ap-hover-2:oklch(30.5% .007 258);
  --ap-ink:oklch(96% .003 255);--ap-ink-2:oklch(77% .008 258);--ap-ink-3:oklch(66% .01 258);--ap-ink-4:oklch(52% .01 258);
  --ap-line:oklch(30% .005 258);--ap-line-strong:oklch(35.5% .006 258);
  --ap-accent:oklch(72% .15 255);--ap-accent-tint:oklch(72% .15 255 / .16);--ap-red:#ff6b5e;
  --ap-green:oklch(74% .15 155);--ap-orange:oklch(76% .15 60);--ap-orange-tint:oklch(76% .15 60 / .14);
  --ap-shadow:0 0 0 1px rgba(255,255,255,.13),0 2px 8px rgba(0,0,0,.35),0 34px 80px -24px rgba(0,0,0,.85);
  /* the three agents, as the recordings' cursors colour them */
  --ag-draft:oklch(82% .15 82);--ag-code:oklch(78% .12 298);--ag-model:oklch(80% .12 172);
  /* the primary button: milky glass in either theme with the smoke inside (final.js); only its shadow changes */
  --glass-drop:0 1px 2px rgba(20,24,40,.14),0 16px 30px -14px rgba(70,90,150,.5);
  --glass-drop-hi:0 2px 4px rgba(20,24,40,.16),0 20px 36px -14px rgba(70,90,150,.6);
  --glass-drop-press:0 1px 1px rgba(20,24,40,.2),0 6px 14px -8px rgba(70,90,150,.5);
  --beam-head:#fff4e6;--beam-orange:oklch(76% .15 60);--beam-silver:#c6c9cf;--beam-blue:oklch(68% .15 256);--beam-glow:1;
  --btn-line:var(--line-3);--btn-line-hi:#5a5a64;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#fff;--bg-1:#fafafa;--bg-2:#f3f3f5;--bg-3:#eaeaee;
  --line:#ececf0;--line-2:#dcdce2;--line-3:#c6c6ce;
  --ink:#000;--ink-2:#4a4a52;--ink-3:#63636c;--ink-4:#a3a3ab;
  --cobalt:oklch(52.5% .21 262);--cobalt-soft:oklch(52.5% .21 262 / .1);--red:#d63c30;
  --stage-line:rgba(0,0,0,.055);--win-ring:rgba(0,0,0,.16);--win-shadow:0 44px 90px -40px rgba(20,22,30,.55);
  --pane-shadow:0 0 0 1px oklch(91.5% .004 95),0 1px 2px rgba(20,22,25,.03),0 4px 12px rgba(20,22,25,.04);
  /* the app's own panels (theme.css, day) */
  --ap-canvas:oklch(96.6% .004 95);--ap-surface:#fff;--ap-inset:oklch(97.8% .003 95);--ap-field:oklch(96.8% .003 95);
  --ap-hover:oklch(96.2% .004 95);--ap-hover-2:oklch(93.4% .005 95);
  --ap-ink:oklch(22% .008 258);--ap-ink-2:oklch(42% .012 258);--ap-ink-3:oklch(52% .012 258);--ap-ink-4:oklch(68% .01 258);
  --ap-line:oklch(91.5% .004 95);--ap-line-strong:oklch(86% .005 95);
  --ap-accent:oklch(52.5% .21 262);--ap-accent-tint:oklch(95.5% .022 255);--ap-red:#c52e23;
  --ap-green:oklch(52% .14 152);--ap-orange:oklch(57% .15 55);--ap-orange-tint:oklch(96.4% .022 70);
  --ap-shadow:0 0 0 1px oklch(89% .004 95),0 2px 8px rgba(20,22,25,.07),0 34px 70px -26px rgba(20,22,25,.32);
  /* the glass by day: a hairline round it, so it stands off the white */
  --glass-drop:0 0 0 1px rgba(20,24,40,.06),0 1px 2px rgba(20,24,40,.1),0 16px 30px -14px rgba(70,90,150,.42);
  --glass-drop-hi:0 0 0 1px rgba(20,24,40,.08),0 2px 4px rgba(20,24,40,.12),0 20px 36px -14px rgba(70,90,150,.52);
  --glass-drop-press:0 0 0 1px rgba(20,24,40,.07),0 1px 1px rgba(20,24,40,.14),0 6px 14px -8px rgba(70,90,150,.4);
  /* the tools hub's light by day: the head is a deep orange, as white would not show */
  --beam-head:oklch(60% .2 42);--beam-orange:oklch(72% .16 58);--beam-silver:#9fa4ac;--beam-blue:oklch(56% .19 262);--beam-glow:.7;
  --btn-line:var(--line-3);--btn-line-hi:#a3a3ab;
}
@media (min-width:1600px){:root{--wrap:1320px}}
@media (max-width:1024px){:root{--gutter:24px;--s8:120px}}
@media (max-width:640px){:root{--gutter:20px;--s8:96px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.55 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{overflow-x:clip}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img,video{max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
a:not(.btn):focus-visible{border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:500;transition:top .2s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* ---------- Buttons: one family ----------
   The primary (option C of three, picked 2026-10-16, after the running light round the edge): a capsule of milky glass
   with smoke trapped inside it, wisps of the app's blue, its orange, a peach and a warm white curling and folding into
   one another and never leaving the glass. The smoke is a small shader on a canvas inside each button (final.js),
   drawn only while the button is on screen; with reduced motion it rests on one frame; without WebGL the button keeps
   a still of the colours (.no-gl). Layers, bottom up: the glass (the button's background), the smoke (.smoke), the
   frost and thick rim (::after), the label.
   Hover and press (option A of three, picked the same day): the pointer stirs the smoke (final.js) and the capsule
   lifts a hair; a press (.down, set by final.js for a pointer, a tap or Enter) sinks the glass into the page, its
   shadow tight and its inside shaded like pressed glass, and it springs back on release. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);height:44px;padding:0 20px;border-radius:999px;border:0;
  font:500 15px/1 var(--text);letter-spacing:-.011em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;
  transition:transform .3s var(--ease),background-color .3s,color .3s,box-shadow .3s}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-lg{height:52px;padding:0 26px;font-size:16px}
.btn:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
.btn-primary{isolation:isolate;overflow:hidden;color:#141519;font-weight:560;text-shadow:0 1px 0 rgba(255,255,255,.55);
  background:#f6f7fa;box-shadow:var(--glass-drop);transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.btn-primary.no-gl{background:radial-gradient(60% 120% at 28% 50%,#ffd3ae,transparent),radial-gradient(55% 120% at 78% 50%,oklch(78% .11 256),transparent),#f6f7fa}
.btn-primary .smoke{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none}
/* The glass over the smoke: a broad soft light from the top left and a thick soft rim, no line anywhere */
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 95% at 28% -10%,rgba(255,255,255,.5),transparent 60%);
  box-shadow:inset 0 2px 2px #fff,inset 0 0 0 1px rgba(255,255,255,.85),inset 0 0 12px 3px rgba(255,255,255,.9),inset 0 -6px 12px -5px rgba(30,40,90,.2);
  transition:box-shadow .3s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--glass-drop-hi)}
.btn-primary:active,.btn-primary.down{transform:translateY(1px) scale(.965);box-shadow:var(--glass-drop-press);transition-duration:.12s;transition-timing-function:ease-out}
.btn-primary:active::after,.btn-primary.down::after{transition-duration:.12s;
  box-shadow:inset 0 3px 6px rgba(30,40,90,.25),inset 0 0 0 1px rgba(255,255,255,.8),inset 0 0 10px 3px rgba(255,255,255,.8),inset 0 -2px 6px -4px rgba(30,40,90,.1)}
.btn-primary:disabled{opacity:.8;cursor:progress;transform:none}
/* The secondary: the same shape, no light, no fill until the pointer is on it */
.btn-quiet{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--btn-line)}
.btn-quiet:hover{background:color-mix(in oklab,var(--ink) 6%,transparent);box-shadow:inset 0 0 0 1px var(--btn-line-hi)}
.btn-quiet:active{transform:scale(.985);transition-duration:.1s}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s,backdrop-filter .3s}
.nav.scrolled{background:color-mix(in oklab,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--s5);height:64px}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.brand svg{height:18px;width:auto}
.brand .nav-vt{overflow:visible}   /* /final2's V → Vtruvian: the V rocks a little past its box's left edge */
.nav-end{margin-left:auto;display:flex;align-items:center}

/* ---------- Hero: the whole first screen. Words on the left, the lattice in its own column on the right; the app
   comes after, as the page is scrolled. ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;
  margin-top:calc(-65px - env(safe-area-inset-top,0px));padding-top:calc(65px + env(safe-area-inset-top,0px))}
.hero-gfx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-gfx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-in{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  grid-template-areas:"copy space";column-gap:var(--s5);padding-block:var(--s4) var(--s7)}
/* The headline is sized by its own column, so it is always the same two lines beside the lattice */
.hero-copy{grid-area:copy;align-self:center;position:relative;z-index:1;container-type:inline-size}
/* hero.js draws the cuboid --grow times the size its space alone would give: as tall as the words beside it */
.hero-space{grid-area:space;align-self:stretch;min-height:440px;pointer-events:none;--grow:1.2}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:999px;font-size:13px;color:var(--ink-2);
  box-shadow:0 0 0 1px var(--line-2);background:color-mix(in oklab,var(--bg) 60%,transparent);backdrop-filter:blur(6px)}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember)}
.hero h1{margin-top:28px;font:430 clamp(40px,8.8cqi,64px)/1.03 var(--display);letter-spacing:-.042em;text-wrap:balance}
.lede{margin-top:var(--s3);font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:33em;text-wrap:balance}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* The one moment on load: the headline's words rise, then the rest settles in. Only with motion allowed. */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .w>span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  :root.js .hero h1 .w>span{transform:translateY(105%);animation:rise 1.1s var(--ease) forwards;animation-delay:calc(80ms + var(--i) * 55ms)}
  :root.js .pill,:root.js .lede,:root.js .ctas{opacity:0;transform:translateY(16px);animation:settle 1s var(--ease) forwards}
  :root.js .pill{animation-delay:.05s}:root.js .lede{animation-delay:.42s}:root.js .ctas{animation-delay:.52s}
}
@keyframes rise{to{transform:none}}
@keyframes settle{to{opacity:1;transform:none}}

/* /final2's hero (data-hero="screen", 2026-10-18), to compare with the lattice: no lattice and no line over the
   headline; the words in one column (the headline on one line where it fits) and the product screen straight under
   them, in the first screen. The seam's smoke stays under the window, as on /final */
[data-hero="screen"] .hero{min-height:0}
[data-hero="screen"] .hero-in{display:block;padding-block:var(--s7)}   /* the screen a step lower under the buttons (64 → 96px, the user, 2026-10-18) */
/* its headline at --t-h2, the size the How title had then ("From a folder of files, …"): the user, 2026-10-18 */
[data-hero="screen"] .hero h1{margin-top:0;font-size:var(--t-h2)}
@media (max-width:640px){[data-hero="screen"] .hero-in{padding-block:var(--s5)}}

/* The floor level hero.js marks beside the lattice */
.lvl-tag{position:absolute;left:0;top:0;z-index:0;display:flex;align-items:center;gap:7px;font:500 12px/1 var(--text);color:var(--ink-2);font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;white-space:nowrap;will-change:transform,opacity}
.lvl-tag i{width:0;height:0;border-inline:4px solid transparent;border-top:6px solid var(--cobalt)}

/* ---------- The product: the showcase's main screen, mounted in the column; it styles itself (in its own shadow root).
   A hairline across the page under it, like the tools band's and the footer's (2026-10-17), drawn over the seam's glow */
.product{position:relative;z-index:1;padding-bottom:calc(var(--s7) + 1px)}
.product::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
/* The seam (final.js): the buttons' smoke as a low glow resting on that line under the window (option A). The canvas
   runs from behind the window's foot down to the line and no further: nothing of it shows below the line (the user,
   2026-10-18). The window and the line are drawn over it */
.seam{position:absolute;left:0;bottom:0;z-index:-1;width:100%;height:calc(var(--s7) + 41px);pointer-events:none}

/* ---------- Sections ---------- */
.sec{padding-top:var(--s8)}
.sec-h{font:450 var(--t-2)/1.06 var(--display);letter-spacing:-.034em;text-wrap:balance;max-width:16em}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s3) var(--s6);align-items:end}
.sec-head .sec-h{max-width:12em}
.sec-p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:32em;text-wrap:pretty}

/* ---------- How it works: the four things, text one side and the app the other (option B's layout) ---------- */
/* The features a step closer to each other than the sections are (120 against 160px), and the title as close to them
   as the other titles are to theirs (48px); they were 168px apart, more than the sections, and 120px under the title
   (the user: "check the spacing between these 4 features", "the pacing feels slightly off", 2026-10-18) */
.feats{display:flex;flex-direction:column;gap:clamp(96px,7vw,120px);margin-top:var(--s5)}
.feat{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:var(--s6);align-items:center}
.feat.flip{grid-template-columns:minmax(0,7.8fr) minmax(0,4.2fr)}
.feat.flip .feat-text{order:2}
.feat-text{min-width:0;max-width:440px}
.num{display:block;font:350 clamp(24px,2.2vw,30px)/1 var(--display);letter-spacing:-.02em;color:var(--ink-4);font-variant-numeric:tabular-nums}
.feat-text h3{margin-top:18px;font:460 var(--t-3)/1.08 var(--display);letter-spacing:-.03em;text-wrap:balance}
.feat-text p{margin-top:18px;font-size:17px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.feat-vis{min-width:0}

/* The stage: where a feature screen stands (the showcase's, drawn at 700 x 604 and scaled to the stage's width), on a
   drafting grid that fades out round it */
.stage{position:relative;aspect-ratio:1.16;isolation:isolate}
.stage::before{content:"";position:absolute;inset:-7% -5%;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--stage-line) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--stage-line) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent);mask-image:radial-gradient(closest-side,#000 35%,transparent)}
/* A part of a recording (the 04 deck's cards): --sx --sy --sw --sh is the part, in the pixels of the --vw x --vh recording */
.crop{position:relative;overflow:hidden;aspect-ratio:var(--sw) / var(--sh)}
.crop>video{position:absolute;display:block;max-width:none;height:auto;aspect-ratio:var(--vw,1600) / var(--vh,928);
  width:calc(var(--vw,1600) / var(--sw) * 100%);left:calc(var(--sx) / var(--sw) * -100%);top:calc(var(--sy) / var(--sh) * -100%)}
/* Two of the app's panel pieces (theme.css), in the 04 deck's Lab card: the "indicative" tag and the colour scale */
.a-tag{height:20px;padding:0 7px;border-radius:5px;background:var(--ap-inset);box-shadow:0 0 0 1px var(--ap-line);font-size:11.5px;line-height:20px;color:var(--ap-ink-3)}
.a-scale-bar{display:block;height:8px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,#30123b,#4662d7 10%,#36aaf9 20%,#1ae4b6 30%,#72fe5e 40%,#c8ef34 50%,#faba39 60%,#f66b19 70%,#ca2a04 85%,#7a0403)}

/* ---------- The studio's tools around Vtruvian (its own section, below the studio tiles): a band between two hairlines,
   a little taller than the close, on an isometric drafting grid that fills it from edge to edge and is strongest round
   the V. The heading and the hub are centred on it; final.js draws the hub and sets its height. ---------- */
.sec.tools{position:relative;isolation:isolate;margin-top:var(--s8);padding:var(--s6) 0;border-block:1px solid var(--line);
  --iso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='37'%3E%3Cpath d='M0 18.5L32 0L64 18.5L32 37Z' fill='none' stroke='%23303038'/%3E%3C/svg%3E")}
:root[data-theme="light"] .tools{--iso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='37'%3E%3Cpath d='M0 18.5L32 0L64 18.5L32 37Z' fill='none' stroke='%23d8d8de'/%3E%3C/svg%3E")}
.tools::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--iso) 50% 50%/64px 37px;
  -webkit-mask-image:radial-gradient(62% 140% at 50% 55%,#000 35%,rgba(0,0,0,.35));mask-image:radial-gradient(62% 140% at 50% 55%,#000 35%,rgba(0,0,0,.35))}
.tools .sec-h{max-width:20em;margin-inline:auto;text-align:center}
.hub{position:relative;height:448px;margin-top:var(--s5)}
.hub-list{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;height:100%;padding:32px}
.hub-list li{padding:8px 14px;border-radius:999px;box-shadow:0 0 0 1px var(--line-2);font-size:14px;color:var(--ink-2)}
.hub.drawn .hub-list{display:none}
.hub svg.hub-art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.hub .wire{stroke:var(--line-3);stroke-width:1;fill:none;transition:stroke .3s,stroke-width .3s}
.hub .wire.on{stroke:var(--ink-2);stroke-width:1.5}
/* the light along the wires: the buttons' own (white-hot head, orange, silver, a blue tail) with their warm glow */
.hub .comet-glow{fill:var(--beam-orange);filter:url(#beam-blur);opacity:calc(.45 * var(--beam-glow))}
.hub .comet-head{fill:var(--beam-head)}
.hub .cg-0{stop-color:var(--beam-blue);stop-opacity:0}
.hub .cg-1{stop-color:var(--beam-blue)}
.hub .cg-2{stop-color:var(--beam-silver)}
.hub .cg-3{stop-color:var(--beam-orange)}
.hub .cg-4{stop-color:var(--beam-head)}
.hub .v-edge{fill:var(--bg);stroke:color-mix(in oklab,var(--ink) 34%,transparent);stroke-width:1}
/* the V's face and rim: plain, no light or colour on the V (2026-10-16) */
.hub .v-top{fill:color-mix(in oklab,var(--ink) 92%,transparent)}
.hub .v-rim{fill:none;stroke:color-mix(in oklab,var(--ink) 70%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.node{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;margin-left:-48px;margin-top:-24px;text-align:center;cursor:default}
.node .mk{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--bg-2);color:var(--ink);box-shadow:0 0 0 1px var(--line-2),0 10px 24px -12px rgba(0,0,0,.6);transition:box-shadow .25s,transform .25s var(--ease)}
.node .mk svg{width:24px;height:24px}
.node>span{font-size:12.5px;line-height:1.2;color:var(--ink-2)}
/* on the far half of the orbit the name sits above its tile, so it stays outside the orbit, clear of the wires */
.node.up{flex-direction:column-reverse;margin-top:0;transform:translateY(calc(-100% + 24px))}
.node:hover .mk,.node.on .mk{transform:translateY(-2px);box-shadow:0 0 0 1px var(--cobalt),0 14px 30px -12px rgba(0,0,0,.7)}
.mk-knock{fill:var(--bg-2)}

/* ---------- Your AI. Your project. Your standards.: three moving pieces of the app (static/showcase/js/studio.js) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.tile{min-width:0}
.tile-stage{position:relative;height:452px;border-radius:var(--r-tile);overflow:hidden;background:var(--bg-1);box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;padding:var(--s3)}
.tile-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--stage-line) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--stage-line) 1px,transparent 1px) 0 0/28px 28px;
  background-position:50% 50%}   /* edge to edge (2026-10-16): the grid shows round the app's panel, so the panel stands out */
.tile-stage>[data-studio]{z-index:1}   /* the showcase tile: absolute, inset 0, its own shadow root (static/showcase/) */
.tile>h3{margin-top:var(--s3);font:500 var(--t-4)/1.25 var(--display);letter-spacing:-.02em}

/* ---------- 04: the workspaces, a gallery. One bench at a time in the middle, at work for a few seconds, the ones
   before and after it waiting at the sides; then it slides on to the next (final.js). It moves by itself and nothing
   holds it: its pause button went on 2026-10-18 (the user: the visitor can pick or swipe the benches anyway). The whole
   deck stands in one box, the studio tiles' (.tile-stage: its ground, hairline, radius and drafting grid; 2026-10-18,
   so the stages look alike), in the place of their window; the cards slide in and out at its rounded sides. Each card
   is a pane of the app, ringed as the studio's windows are (--pane-shadow): its header (the bench, the file, the
   bench's own tools, as ViewTabs and each bench draw them) over what the bench shows, with the bench's rails and side
   panel round it. --o is a card's place, 0 in the middle; the ones further than one away wait out of sight. ---------- */
/* in its half of the step, as every other stage. The neighbours show plainly, as they are: no haze over them and no
   fade at its edges (the user, 2026-10-17: "no need to sides blurry") */
.gal{position:relative;container-type:inline-size;margin-top:var(--s5);padding:20px 0;border-radius:var(--r-tile);overflow:hidden;background:var(--bg-1);
  box-shadow:0 0 0 1px var(--line);touch-action:pan-y}
.gal::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--stage-line) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--stage-line) 1px,transparent 1px) 0 0/28px 28px;
  background-position:50% 50%}
.gal-track{--cw:min(580px,74cqw);--gap:14px;--ss:.85;--hh:36px;position:relative;height:calc(var(--hh) + var(--cw) / 1.3)}
.card{position:absolute;left:50%;top:0;width:var(--cw);margin:0 0 0 calc(var(--cw) / -2);border-radius:var(--r-win);overflow:hidden;background:var(--ap-surface);
  container-type:inline-size;z-index:1;opacity:0;visibility:hidden;--sc:var(--ss);
  transform:translateX(calc(var(--o,0) * (var(--cw) * (1 + var(--ss)) / 2 + var(--gap)))) scale(var(--sc));
  box-shadow:var(--pane-shadow);
  transition:transform .6s var(--ease-io),opacity .6s var(--ease),visibility 0s .6s}
.card.near,.card.on,:root:not(.js) .card:first-child{opacity:1;visibility:visible;transition:transform .6s var(--ease-io),opacity .6s var(--ease),visibility 0s}
:root:not(.js) .card:first-child{--sc:1}
.card.near{z-index:2;cursor:pointer}
.card.on{z-index:3;--sc:1}
.card.jump{transition:none!important}

/* the benches by name, beside it; the one in the middle lit, a line filling while it is at work */
.bench-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s4)}
.bench-tabs button{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px 0 12px;border-radius:999px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-2);font:500 14px/1 var(--text);color:var(--ink-3);white-space:nowrap;cursor:pointer;transition:color .25s,background-color .25s,box-shadow .25s}
.bench-tabs button:hover{color:var(--ink-2);background:var(--bg-1)}
.bench-tabs svg{flex:none;width:16px;height:16px}
.bench-tabs button[aria-selected="true"]{color:var(--ink);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-3)}
.bench-tabs button[aria-selected="true"] svg{color:var(--cobalt)}
.bench-tabs button:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.prog{position:absolute;left:14px;right:14px;bottom:5px;height:2px;overflow:hidden;border-radius:2px;opacity:0;transition:opacity .25s}
.prog i{display:block;height:100%;background:var(--ink-2);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.bench-tabs button[aria-selected="true"] .prog{opacity:1}
.feat-text .bench-now{min-height:3em;margin-top:var(--s2);font-size:15px;line-height:1.5;color:var(--ink-2)}
/* the files' credit under the benches (CC BY asks for it): small print in the faintest ink, so it doesn't pop (2026-10-18) */
.gal-note{margin-top:20px;font-size:11px;line-height:1.5;color:var(--ink-4)}

.card-h{position:relative;z-index:2;display:flex;align-items:center;gap:10px;height:var(--hh);padding:0 10px 0 8px;background:var(--ap-surface);border-bottom:1px solid var(--ap-line);
  font-size:13px;color:var(--ap-ink);white-space:nowrap}
.card-h .bn{flex:none;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--ap-line-strong);
  font:600 10.5px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-ink-2)}
.card-h .bn svg{width:14px;height:14px}
.card-h b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;letter-spacing:-.005em}
.card-h .tl{flex:none;margin-left:auto;display:flex;align-items:center;gap:2px;font-size:12px;color:var(--ap-ink-3)}
.card-h .tl>span{padding:0 6px;line-height:24px;border-radius:6px}
.card-h .tl{font-size:11.5px}
.card-h .tl b{font-weight:500;color:var(--ap-ink-2)}
.card-h .sg{display:inline-flex;gap:2px;padding:2px!important;margin-inline:3px;background:var(--ap-inset);box-shadow:inset 0 0 0 1px var(--ap-line)}
.card-h .sg span{padding:0 7px;line-height:20px;border-radius:5px}
.card-h .sg .on{background:var(--ap-surface);color:var(--ap-ink);box-shadow:0 0 0 1px var(--ap-line-strong)}
.card-h .clipbox{transition:background-color .3s,color .3s}
.card-h .clipbox.on{background:var(--ap-accent-tint);color:var(--ap-ink)}
.card-s{position:relative;aspect-ratio:13/10;overflow:hidden;background:#141518}
.card-s>.crop{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.card-s>img,.card-s>video.fill{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
@container (max-width:430px){.card-h .tl{display:none}}

/* ---------- A bench with its tools round it, as the app lays it out (desktop styles/panes.css): the rail of tools down
   the left, what the bench shows, its dock or panel on the right, and its footers along the bottom. Tools, titles and
   glyphs are the app's (scratchpad bench/chrome.md, read from Vtruvian_desktop dev 518c758d); what the bench shows is
   the recording or the project's file. ---------- */
.card-h .hm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--ap-ink-3);font-variant-numeric:tabular-nums}
.card-h .tl .off{opacity:.42}
.card-h .zm span{padding:0 6px}
.card-h .dd{display:inline-flex;align-items:center;gap:5px}
.card-h .dd svg,.mp-row .dd svg{width:13px;height:13px}
.card-h .srch{min-width:150px;height:26px;line-height:26px!important;padding:0 10px!important;border-radius:7px!important;background:var(--ap-inset);box-shadow:inset 0 0 0 1px var(--ap-line);color:var(--ap-ink-4)}
.card-h .ico{display:grid;place-items:center;width:26px;height:26px;padding:0!important;opacity:.45}
.card-h .ico svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@container (max-width:540px){.card-h .hm{display:none}}

.bench{position:relative;display:grid;grid-template-columns:var(--cols);grid-template-rows:minmax(0,1fr) auto;aspect-ratio:13/10;overflow:hidden;background:var(--ap-canvas)}
.b-model,.b-drawing{--cols:40px minmax(0,1fr) 40px}
.b-drawing{grid-template-rows:minmax(0,1fr) auto auto}
.b-render{--cols:40px minmax(0,1fr) 92px}
.b-lab{--cols:40px minmax(0,1fr) clamp(186px,37%,232px)}
.rail{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:7px 0;background:var(--ap-surface);border-right:1px solid var(--ap-line)}
.rail.r-right{border-right:0;border-left:1px solid var(--ap-line)}
.rail i{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:7px;color:var(--ap-ink-2)}
.rail i.on{background:var(--ap-hover-2);color:var(--ap-ink)}
.rail i.off{opacity:.38}
.rail i.fly::after{content:"";position:absolute;right:3px;bottom:3px;border:2.5px solid transparent;border-right-color:currentColor;border-bottom-color:currentColor;opacity:.7}
.rail svg{width:16px;height:16px}
.rail hr{flex:none;width:16px;margin:3px 0;border:0;border-top:1px solid var(--ap-line)}
.cv{position:relative;min-width:0;min-height:0;overflow:hidden;container-type:size;background:#141518}
.cv>.crop{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(100cqw,calc(100cqh * var(--sw) / var(--sh)));aspect-ratio:var(--sw) / var(--sh)}
.cv>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* the hint chip in the stage's bottom-right corner, as the app puts it */
.cv-hint{position:absolute;right:8px;bottom:8px;z-index:2;max-width:min(300px,calc(100% - 16px));padding:5px 9px;border-radius:7px;
  background:color-mix(in oklab,var(--ap-surface) 86%,transparent);box-shadow:0 0 0 1px var(--ap-line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:10.5px;line-height:1.4;color:var(--ap-ink-3)}
.card-s>.cv-hint .cl{display:none}
.card.clipping .cv-hint .cl{display:inline}
@container (max-width:460px){.cv-hint{display:none}}
.b-foot{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-width:0;height:26px;padding:0 10px;background:var(--ap-surface);border-top:1px solid var(--ap-line);font-size:11.5px;color:var(--ap-ink-3);white-space:nowrap;overflow:hidden}
.b-foot .gap{flex:1}
.b-status{font:500 10.5px/1 ui-monospace,"Cascadia Mono",Consolas,monospace}
.b-status .chip em,.b-status .tg{font-weight:600;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase}
.b-status .chip{display:inline-flex;align-items:center;gap:6px;color:var(--ap-ink);font-weight:600}
.b-status .chip em{font-style:normal;color:var(--ap-ink-4)}
.b-status .chip span{font-weight:500;color:var(--ap-ink-3)}
.b-status .xy{color:var(--ap-ink-3)}
.b-status .xy b{display:inline-block;min-width:5.6ch;margin:0 4px;font-weight:500;color:var(--ap-ink-2);text-align:right;font-variant-numeric:tabular-nums}
.b-status .tg{padding:0 5px;line-height:18px;border-radius:4px;color:var(--ap-ink-4)}
.b-status .tg.on{background:var(--ap-hover-2);color:var(--ap-ink)}
.b-status .caret{margin:0 2px 0 -4px;color:var(--ap-ink-3)}
.b-tabs span{padding:0 9px;line-height:20px;border-radius:5px}
.b-tabs span.on{background:var(--ap-hover-2);color:var(--ap-ink);font-weight:600}
.b-tabs em{margin-left:auto;font:500 10px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;font-style:normal;color:var(--ap-ink-4)}
@container (max-width:560px){.b-status .tg:nth-of-type(3),.b-status .tg:nth-of-type(5){display:none}}

/* Model: Leo's own frame of the model, coming slowly closer; the view cube in the corner, as the app draws it */
@media (prefers-reduced-motion:no-preference){.card.on .cv-model img{animation:push 14s var(--ease-io) infinite alternate}}
@keyframes push{to{transform:scale(1.07)}}
.vcube{position:absolute;top:8px;right:8px;z-index:2;width:56px;height:56px;overflow:visible}
.vcube path{stroke:var(--ap-line-strong);stroke-width:.9;stroke-linejoin:round}
.vcube .f-t{fill:var(--ap-surface)}
.vcube .f-l{fill:color-mix(in oklab,var(--ap-surface) 88%,#000)}
.vcube .f-r{fill:color-mix(in oklab,var(--ap-surface) 80%,#000)}
.vcube text{font:700 7px/1 var(--text);fill:var(--ap-ink-2);text-anchor:middle}

/* Document: the page in the bench, the lines you marked, which Leo sees */
.s-doc{background:var(--ap-canvas)}
.paper{position:absolute;left:5%;top:5%;width:120%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 14px 34px -14px rgba(0,0,0,.5)}
.paper img{display:block;width:100%;height:auto}
.dmark{position:absolute;left:2.3%;top:70.3%;width:65.5%;height:7.6%;border-radius:3px;background:color-mix(in oklab,var(--ap-accent) 12%,transparent);box-shadow:0 0 0 1.5px var(--ap-accent)}
.dmark-tag{position:absolute;left:-1.5px;bottom:calc(100% + 6px);padding:3px 8px;border-radius:5px;background:var(--ap-accent);color:#fff;font:500 11.5px/1.4 var(--text);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.card.on .dmark{animation:mark-in .7s .4s var(--ease) both}}
@keyframes mark-in{from{opacity:0;transform:scale(.98)}}

/* Table: the project's event log, filtered to what ran late */
.s-table{display:flex;flex-direction:column;background:var(--ap-surface);color:var(--ap-ink);font-size:12.5px}
.tb-bar{flex:none;display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-bottom:1px solid var(--ap-line);white-space:nowrap}
.tb-filter{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px 0 8px;border-radius:7px;background:var(--ap-inset);box-shadow:inset 0 0 0 1px var(--ap-line);color:var(--ap-ink-3)}
.tb-filter svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.tb-filter b{font-weight:500;color:var(--ap-orange)}
.tb-n{margin-left:auto;font-size:12px;color:var(--ap-ink-3)}
.tb-wrap{flex:1;min-height:0;overflow:hidden}
.s-table table{width:100%;border-collapse:collapse;table-layout:fixed}
.s-table th,.s-table td{height:32px;padding:0 10px;border-bottom:1px solid var(--ap-line);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-table th{height:30px;background:var(--ap-inset);font-weight:500;font-size:12px;color:var(--ap-ink-3)}
.s-table th:nth-child(1){width:24%}.s-table th:nth-child(2){width:12%}.s-table th:nth-child(3){width:23%}
.s-table th:nth-child(4),.s-table th:nth-child(5){width:12.5%}.s-table th:nth-child(6){width:16%}
.s-table th.srt{color:var(--ap-ink)}
.s-table th.srt::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:translateY(1px) rotate(45deg)}
.s-table td{color:var(--ap-ink-2);font-variant-numeric:tabular-nums}
.s-table td:first-child{color:var(--ap-ink)}
.s-table td i{font-style:normal;color:var(--ap-orange)}
.tb-foot{flex:none;display:flex;gap:18px;align-items:center;height:36px;padding:0 12px;border-top:1px solid var(--ap-line);font-size:12px;color:var(--ap-ink-3);white-space:nowrap;overflow:hidden}
.tb-foot b{margin-left:5px;font-weight:600;color:var(--ap-ink);font-variant-numeric:tabular-nums}
@container (max-width:600px){
  .s-table th:nth-child(3),.s-table td:nth-child(3),.s-table th:nth-child(5),.s-table td:nth-child(5){display:none}
  .s-table th:nth-child(1){width:40%}.s-table th:nth-child(6){width:22%}
  .tb-foot span:nth-child(n+3){display:none}
}

/* Map: the streets and buildings round the site, as the app fetched them for it (OpenStreetMap), in its Light basemap,
   which is the same paper by day and by night; its second row of tools, the Site panel, the readout and the scale */
.s-map{--mp-ground:#f3f2ee;--mp-bldg:#e2e1dc;--mp-bldg-line:#d3d2cc;--mp-road:#fff;--mp-case:#dcdad3;--mp-foot:#c9c7c0;display:flex;flex-direction:column;background:var(--mp-ground)}
.mp-row{flex:none;display:flex;align-items:center;gap:2px;height:32px;padding:0 6px;background:var(--ap-surface);border-bottom:1px solid var(--ap-line);font-size:11.5px;color:var(--ap-ink-2);white-space:nowrap;overflow:hidden}
.mp-row>span{padding:0 7px;line-height:24px;border-radius:6px}
.mp-row .on{background:var(--ap-hover-2);color:var(--ap-ink)}
.mp-row .gap{flex:none;width:6px;padding:0}
.mp-row .dd{display:inline-flex;align-items:center;gap:5px}
.mp-row .dd em{font-style:normal;color:var(--ap-ink-3)}
.mp-map{position:relative;flex:1;min-height:0;overflow:hidden}
.map-svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.m-ground{fill:var(--mp-ground)}
.m-case,.m-road,.m-foot{fill:none;stroke-linecap:round;stroke-linejoin:round}
.m-case{stroke:var(--mp-case);stroke-width:74}
.m-road{stroke:var(--mp-road);stroke-width:56}
.m-foot{stroke:var(--mp-foot);stroke-width:9;stroke-dasharray:26 18}
.m-bldg{fill:var(--mp-bldg);stroke:var(--mp-bldg-line);stroke-width:5}
/* a drawn area, as the map draws one: a 16% fill and a 1.75 px line in the architect's blue */
.m-site{fill:rgb(47 111 228 / .16);stroke:#2F6FE4;stroke-width:1.75px;vector-effect:non-scaling-stroke}
.m-pin{display:none}
.mp-panel{position:absolute;top:8px;right:8px;width:min(190px,48%);padding:0 10px 4px;border-radius:9px;background:var(--ap-surface);box-shadow:var(--ap-shadow);font-size:12px;color:var(--ap-ink)}
.mp-ph{display:flex;align-items:center;justify-content:space-between;height:32px;border-bottom:1px solid var(--ap-line)}
.mp-ph b{font-weight:600;font-size:12.5px}
.mp-ph em{font-style:normal;font-size:11.5px;color:var(--ap-ink-3)}
.mp-li{display:flex;align-items:center;gap:8px;height:30px}
.mp-li i{flex:none;width:10px;height:10px;border-radius:3px;background:rgb(47 111 228 / .16);box-shadow:inset 0 0 0 1.5px #2F6FE4}
.mp-li b{margin-left:auto;font-weight:400;font-size:11.5px;color:var(--ap-ink-3);font-variant-numeric:tabular-nums}
.mp-read{position:absolute;left:8px;bottom:30px;padding:4px 8px;border-radius:6px;background:color-mix(in oklab,var(--ap-surface) 88%,transparent);box-shadow:0 0 0 1px var(--ap-line);
  font:500 10px/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--ap-ink-2);white-space:nowrap}
.mp-read small{display:block;font:400 10px/1.4 var(--text);color:var(--ap-ink-3)}
.mp-scale{position:absolute;left:8px;bottom:8px;width:15.6%;padding:0 0 2px 4px;border:1.5px solid #66665f;border-top:0;font-size:10px;line-height:1;color:#45453f;background:rgb(255 255 255 / .6)}
.mp-scale i{display:none}
.mp-attr{position:absolute;right:8px;bottom:6px;font-size:10px;color:#6c6c66}
@container (max-width:460px){.mp-read{display:none}.mp-row>span:nth-child(n+7){display:none}}

/* Render: the frame the session started from at 150%, the part marked to redo (drawn as the bench draws a mark), the
   References tray, the ask bar and the Versions column */
.r-stage{background:var(--ap-canvas)}
.r-frame{position:absolute;left:50%;top:44%;translate:-50% -50%;width:calc(min(92cqw,92cqh * 1.6) * 1.5);aspect-ratio:1.6;box-shadow:0 0 0 1px var(--ap-line)}
.r-frame img{display:block;width:100%;height:100%}
.rmask{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rmask path{fill:#2F6FE4;fill-opacity:.13;stroke:#2F6FE4;stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rmask text{font:600 2.6px/1 var(--text);fill:#2F6FE4}
@media (prefers-reduced-motion:no-preference){.card.on .rmask{animation:paint .9s .4s var(--ease) both}}
@keyframes paint{from{opacity:0}}
.r-refs{position:absolute;left:10px;bottom:62px;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 10px;border-radius:9px;background:var(--ap-surface);box-shadow:0 0 0 1px var(--ap-line);font-size:11px;color:var(--ap-ink-3)}
.r-refs em{font-style:normal}
.r-refs span{padding:0 8px;line-height:20px;border-radius:5px;background:var(--ap-inset);box-shadow:inset 0 0 0 1px var(--ap-line);color:var(--ap-ink-2)}
.r-ask{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:10px;height:42px;padding:0 6px 0 12px;border-radius:12px;background:var(--ap-surface);box-shadow:var(--ap-shadow);font-size:12px;white-space:nowrap}
.r-ask .ph{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ap-ink-3)}
.r-str{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--ap-ink-3);font-variant-numeric:tabular-nums}
.r-str i{width:46px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ap-accent) 0 55%,var(--ap-line-strong) 55%)}
.r-go{height:30px;padding:0 12px;border-radius:8px;background:var(--ap-ink);color:var(--ap-surface);font-weight:500;line-height:30px;opacity:.45}
.vers{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px 8px;background:var(--ap-surface);border-left:1px solid var(--ap-line);font-size:11px;color:var(--ap-ink-3)}
.vers>em{font-style:normal;font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--ap-ink-3)}
.v-card{display:block;padding:4px;border-radius:8px;box-shadow:0 0 0 1.5px var(--ap-accent)}
.v-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:5px}
.v-card b{display:block;margin-top:5px;font-weight:500;font-size:11px;color:var(--ap-ink)}
.v-acts{display:flex;gap:2px;margin-top:3px}
.v-acts i{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;color:var(--ap-ink-3)}
.v-acts svg{width:13px;height:13px}
.vers small{margin-top:auto;font-size:10px;line-height:1.35;color:var(--ap-ink-4)}
@container (max-width:380px){.r-str{display:none}.r-refs{display:none}}

/* Lab: the Information dock, as the recording shows it; Section and the scale follow the recording indoors */
.side{min-width:0;overflow:hidden;background:var(--ap-surface);border-left:1px solid var(--ap-line);font-size:12px;line-height:1.4;color:var(--ap-ink)}
.sd-h{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 12px;border-bottom:1px solid var(--ap-line);font-weight:600;font-size:12.5px}
.sd-h svg{width:14px;height:14px;color:var(--ap-ink-3)}
.sd-b{padding:8px 12px 12px}
.sd-sec{display:flex;align-items:center;gap:7px;margin:10px -12px 0;padding:8px 12px 0;border-top:1px solid var(--ap-line);font-weight:600;font-size:12px}
.sd-sec::before{content:"";width:4px;height:4px;border-right:1.4px solid var(--ap-ink-3);border-bottom:1.4px solid var(--ap-ink-3);transform:translateY(-1px) rotate(45deg)}
.sd-lbl{margin-top:8px;font-size:11px;color:var(--ap-ink-3)}
.sd-kv{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--ap-ink-3)}
.seg3{display:flex;gap:2px;padding:2px;border-radius:6px;background:var(--ap-inset);box-shadow:inset 0 0 0 1px var(--ap-line)}
.seg3 span{flex:1;min-width:0;padding:0 3px;border-radius:4px;line-height:19px;text-align:center;font-size:10.5px;color:var(--ap-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .3s,color .3s,box-shadow .3s}
.seg3 .on{background:var(--ap-surface);color:var(--ap-ink);box-shadow:0 0 0 1px var(--ap-accent)}
.seg3.mini{flex:none;margin-left:auto}
.seg3.mini span{flex:none;padding:0 5px}
.fld{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 8px;border-radius:6px;background:var(--ap-inset);box-shadow:inset 0 0 0 1px var(--ap-line);font-size:11px;color:var(--ap-ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.info .sd-when{display:flex;align-items:center;gap:9px}
.info .sd-when svg{flex:none;width:13px;height:13px;color:var(--ap-ink-2)}
.info .sd-when b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.info .sd-when em{display:block;font-style:normal;font-size:10.5px;color:var(--ap-ink-3)}
.sd-2{display:grid;grid-template-columns:1.25fr 1fr;gap:5px;margin-top:7px}
.sd-sl{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:5px;margin-top:5px;font-size:10.5px;color:var(--ap-ink-3)}
.sd-sl i{position:relative;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ap-accent) 0 calc(var(--v) * 100%),var(--ap-line-strong) 0)}
.sd-sl i::after{content:"";position:absolute;left:calc(var(--v) * 100%);top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ap-accent);box-shadow:0 0 0 2px var(--ap-surface)}
.sd-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:7px;font-size:10.5px;color:var(--ap-ink-3)}
.sd-dl{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px;margin-top:5px;font-size:11px}
.sd-dl dt{color:var(--ap-ink-3)}
.sd-dl dd b{display:block;font-weight:600}
.sd-dl dd span{display:block;margin-top:1px;font-size:10px;color:var(--ap-ink-3)}
.sd-checks{display:grid;gap:4px;margin-top:5px}
.sd-checks li{display:flex;align-items:center;gap:7px;min-height:19px;font-size:11px}
.sd-checks li::before{content:"";flex:none;width:11px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ap-line-strong)}
.sd-checks li.on::before{box-shadow:none;background:var(--ap-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.9' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px}
.info .a-scale-bar{height:6px;margin-top:8px}

#studio .sec-head{display:block}
#studio .sec-h{max-width:none;text-align:center}   /* centred like the sections under it (2026-10-16) */

/* ---------- The close: heading and form ---------- */
.close{position:relative;margin-top:var(--s8);padding:var(--s8) 0 140px;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.tools+.close{margin-top:0;border-top:0}   /* right under the tools band (2026-10-16): one hairline between them, the band's own */
.close-glow{position:absolute;left:50%;bottom:-420px;width:1100px;height:700px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,color-mix(in oklab,var(--ember) 9%,transparent),transparent)}
.close h2{position:relative;font:430 clamp(36px,4.6vw,60px)/1.04 var(--display);letter-spacing:-.036em;text-wrap:balance}
.form{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s4);max-width:640px;margin:var(--s6) auto 0}
.fields{display:flex;width:100%;border-radius:999px;background:#121212;box-shadow:0 0 0 1px #5c5c5c;transition:box-shadow .25s}
:root[data-theme="light"] .fields{background:#fff;box-shadow:0 0 0 1px #949494}
.fields:focus-within{box-shadow:0 0 0 1px var(--cobalt),0 0 0 5px color-mix(in oklab,var(--cobalt) 22%,transparent)}
.fields input{flex:1;min-width:0;height:56px;border:0;background:none;color:var(--ink);font:16px var(--text);padding:0 22px;outline:none;text-align:center}
.fields input::placeholder{color:#a3a3a3;opacity:1}
:root[data-theme="light"] .fields input::placeholder{color:#5c5c5c}
.fields input+input{background:linear-gradient(#5c5c5c,#5c5c5c) 0 50%/1px 52% no-repeat}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-msg{position:relative;margin-top:var(--s2);font-size:14px;color:var(--red);min-height:22px}
.form-msg:empty{min-height:0;margin-top:0}
.thanks{position:relative;display:flex;flex-direction:column;align-items:center;max-width:560px;margin:var(--s6) auto 0;padding:40px 32px 38px;border-radius:24px;background:var(--bg-2);box-shadow:0 0 0 1px var(--line-2);animation:thanks-in .6s var(--ease) both}
.thanks[hidden]{display:none}
.thanks:focus{outline:none}
.tick{width:56px;height:56px;margin-bottom:22px}
.tick circle{fill:var(--cobalt-soft);stroke:var(--cobalt);stroke-width:2}
.tick path{fill:none;stroke:var(--cobalt);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;animation:tick-draw .5s .3s var(--ease-io) forwards}
.thanks-title{font:430 clamp(22px,2.2vw,28px)/1.25 var(--display);letter-spacing:-.02em;text-wrap:balance}
.thanks .small{margin-top:10px;font-size:16px;color:var(--ink-2)}
@keyframes thanks-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes tick-draw{to{stroke-dashoffset:0}}

/* ---------- Footer (the shared _footer.html) ---------- */
footer{border-top:1px solid var(--line);padding:var(--s6) 0 calc(var(--s5) + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--ink-3);overflow:hidden}
/* the V with the theme switch at the top; the line and where it is made beside contact and social; the small print */
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.foot-v{display:inline-flex;color:var(--ink);border-radius:4px}
.foot-v svg{display:block;height:18px;width:auto;fill:currentColor}
.foot-v .foot-eyes{height:32px;width:auto;overflow:visible;fill:currentColor}
.foot-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3) var(--s6);flex-wrap:wrap;margin-top:var(--s4)}
.foot-about p{max-width:34em;color:var(--ink-2)}
.foot-about p+p{margin-top:6px;color:var(--ink-3)}
.foot-contact{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2)}
.foot-mail{color:var(--ink);text-decoration:none}
.foot-mail:hover{text-decoration:underline;text-underline-offset:3px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{text-decoration:none;padding:4px 0}
.foot-links a:hover{color:var(--ink)}
.foot-social{display:flex;gap:4px;margin-right:-11px}
.foot-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--ink-3);transition:color .2s,background-color .2s}
.foot-social a:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent)}
.foot-social svg{width:22px;height:22px;fill:currentColor}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s6);font-size:13px}
footer .seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;box-shadow:0 0 0 1px var(--line-2)}
footer .seg button{all:unset;box-sizing:border-box;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;cursor:pointer;color:var(--ink-3)}
footer .seg button[aria-pressed="true"]{color:var(--ink);background:color-mix(in oklab,var(--ink) 10%,transparent)}
footer .seg button:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

/* ---------- Cookie banner (the shared _analytics.html). Accept and Decline look the same on purpose ---------- */
.consent{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;width:min(760px,calc(100% - 32px));display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 14px 14px 20px;border-radius:16px;background:color-mix(in oklab,var(--bg) 90%,transparent);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 0 0 1px var(--line-2),0 24px 60px -28px rgba(0,0,0,.5);color:var(--ink)}
.consent[hidden]{display:none}
.consent p{flex:1 1 280px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.consent a{color:var(--ink);text-underline-offset:3px}
.consent-actions{display:flex;gap:8px;margin-left:auto}
.c-btn{height:38px;padding:0 20px;border-radius:999px;border:0;box-shadow:0 0 0 1px var(--line-2);background:transparent;color:var(--ink);font:500 13.5px/1 var(--text);cursor:pointer;transition:background-color .2s,box-shadow .2s}
.c-btn:hover{background:color-mix(in oklab,var(--ink) 8%,transparent);box-shadow:0 0 0 1px var(--line-3)}
footer [data-cookie-settings]{cursor:pointer}

/* ---------- Tablet: one column. The text comes first, then its stage at full width ---------- */
@media (max-width:1100px){
  .hero-in{grid-template-columns:1fr;grid-template-rows:auto auto;grid-template-areas:"space" "copy";align-content:center;padding-block:0 var(--s6)}
  .hero-space{min-height:0;height:min(400px,56vw);--grow:1}
  .hero-copy{align-self:start}
  .sec-head{grid-template-columns:1fr;gap:var(--s2)}
  .feat,.feat.flip{grid-template-columns:1fr;gap:var(--s5)}
  .feat.flip .feat-text{order:0}
  .feat-text{max-width:620px}
  .tiles{grid-template-columns:1fr;max-width:560px}
  /* the workspaces: the heading over its line; the cards wider, the neighbours a sliver at each side */
  .gal-track{--cw:min(600px,74cqw)}
}

/* ---------- Phone: the stages come apart into a column, each panel laid over the one before it ---------- */
@media (max-width:640px){
  .nav-in{height:60px}
  .brand svg{height:16px}
  /* The bar's button waits until the hero's own has scrolled away: never the same button twice on one screen */
  .nav-end{transition:opacity .3s,visibility .3s}
  :root.js .nav.cta-off .nav-end{opacity:0;visibility:hidden}
  .hero-space{height:290px}
  .hero h1{margin-top:22px}
  .ctas{margin-top:28px}
  .ctas .btn{flex:1 1 100%}
  .feat p,.sec-p{font-size:16px}
  .sec.tools{padding-block:var(--s5)}
  .hub{height:640px;margin-top:var(--s3)}
  .tile-stage{height:auto;min-height:440px;padding:var(--s3) var(--s2)}
  .gal{padding-block:14px}   /* the box's margin narrower, as the studio tiles' on a phone */
  .gal-track{--cw:86cqw;--gap:10px;--hh:36px}
  .bench-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter)}
  .bench-tabs::-webkit-scrollbar{display:none}
  .bench-tabs button{flex:none;height:36px;font-size:13.5px}
  .close{padding:var(--s7) 0 var(--s7)}
  .form{gap:var(--s3);margin-top:var(--s4)}
  .fields{flex-direction:column;border-radius:20px;padding:0 8px}
  .fields input{flex:none;height:52px}
  .fields input+input{background:none;border-top:1px solid #5c5c5c}
  .form .btn{width:100%}
  .thanks{margin-top:36px;padding:32px 22px 30px}
  .consent{padding:14px}
  .consent-actions{width:100%}
  .c-btn{flex:1}
}

/* ---------- Motion off: everything rests, nothing loops by itself ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
}