@font-face{
  font-family:'Hive Inter';
  src:url('/assets/fonts/google/inter-variable.woff2') format('woff2'),url('/assets/fonts/google/inter-variable.ttf') format('truetype');
  font-style:normal; font-weight:100 900; font-display:swap;
}
@font-face{
  font-family:'Hive Roboto';
  src:url('/assets/fonts/google/roboto-variable.woff2') format('woff2'),url('/assets/fonts/google/roboto-variable.ttf') format('truetype');
  font-style:normal; font-weight:100 900; font-stretch:75% 100%; font-display:swap;
}
@font-face{
  font-family:'Hive Montserrat';
  src:url('/assets/fonts/google/montserrat-variable.woff2') format('woff2'),url('/assets/fonts/google/montserrat-variable.ttf') format('truetype');
  font-style:normal; font-weight:100 900; font-display:swap;
}
@font-face{
  font-family:'Hive Lora';
  src:url('/assets/fonts/google/lora-variable.woff2') format('woff2'),url('/assets/fonts/google/lora-variable.ttf') format('truetype');
  font-style:normal; font-weight:400 700; font-display:swap;
}

/* ══════════════════════════════════════════════════════════════════
   tokens — the light palette from untitled-folder/css/tokens.css :root
   ══════════════════════════════════════════════════════════════════ */
:root{
  --font:'Hive Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --hive-font-sans:var(--font); --hive-font-mono:var(--mono);

  --bg:#f1f2f4; --surface:#ffffff; --raised:#fafbfc; --stage:#ffffff;
  --line:#e2e4e9; --line-soft:#eef0f3; --slot:#f4f5f7;
  --ink:#14171c; --text:#20242c; --dim:#6b7280; --faint:#6f7680;
  --icon-muted:var(--dim); --icon-disabled:var(--faint);
  --accent:#2f6bff; --accent-soft:#eef3ff; --accent-ink:#1d4ed8;
  --on-accent:#fff; --on-accent-ink:#fff;
  --favorite:#be123c; --favorite-soft:#fde7ec;
  --danger:#e5484d;
  --tip-bg:#14171c; --tip-fg:#ffffff;

  /* Semantic surface/canvas tokens. Every interactive overlay and both CAD
     canvases consume these so a theme change reaches rendered pixels as well
     as ordinary DOM panels and text. */
  --control-surface:#fff;
  --glass-surface:rgba(255,255,255,.96);
  --glass-surface-strong:rgba(255,255,255,.97);
  --glass-surface-soft:rgba(255,255,255,.88);
  --surface-hover:#fbfcfd;
  --surface-preview:#f7f9fc;
  --danger-soft:#fff1f2;
  --cad-accent:#d87800;
  --cad-accent-ink:#a85000;
  --cad-accent-soft:#fff2e2;
  --canvas-grid-major:#787878;
  --canvas-grid-minor:#a8a8a8;
  --canvas-grid-opacity:.5;
  --canvas-ink:#20242c;
  --canvas-selection:#1f74ef;
  --canvas-handle:#fff;
  --canvas-extrusion-side:#b9c6d5;
  --canvas-extrusion-shadow:#718094;
  --canvas-extrusion-side-stroke:#738297;
  --canvas-extrusion-top:#eaf0f6;
  --canvas-extrusion-edge:#536276;
  --canvas-extrusion-specular:#ffffff;
  --canvas-object-shadow:rgba(31,45,65,.2);
  --sketch-grid-minor:rgba(108,117,133,.09);
  --sketch-grid-major:rgba(108,117,133,.12);

  /* aliases used by the 3Dhive Mapbox overlays */
  --surface-muted:var(--raised); --text-muted:var(--dim);
  --border-strong:var(--line); --ui-font-scale:1;

  /* Semantic aliases consumed by the shared 3Dhive Seller modules. Keeping
     them mapped to this shell's live tokens lets every local theme/style
     repaint the imported dashboard without copying the donor base sheet. */
  --ui-canvas-bg:var(--bg); --ui-panel-bg:var(--surface);
  --ui-panel-bg-muted:var(--raised); --ui-border:var(--line);
  --ui-border-strong:var(--line); --ui-text-primary:var(--ink);
  --ui-text-secondary:var(--dim); --ui-accent-color:var(--accent);
  --ui-positive:#16865b; --ui-warning:#c97d0e;
  --ui-danger:var(--danger); --ui-info:#2f6bff;

  --radius-ui:10px; --radius-lg:16px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 2px 6px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.07);
  --shadow-lg: 0 4px 12px rgba(16,24,40,.08), 0 22px 60px rgba(16,24,40,.12);
  --top-panel-edge:rgba(15,23,42,.22);
  --top-panel-edge-shadow:rgba(15,23,42,.16);

  /* this layout's own geometry. The workspace preview row is intentionally
     compact so Browse, Design and Build keep more room for their live tools. */
  --top-h:70px; --strip-h:150px; --bottom-h:190px; --gap:8px;
}

/* Appearance follows untitled-folder's executable token contract: theme and
   style are independent root attributes, so every mounted view repaints from
   one state change instead of each icon styling only itself. */
:root[data-theme="dark"]{
  --bg:#000; --surface:#0d0d0e; --raised:#151516; --stage:#070707;
  --line:#272728; --line-soft:#1a1a1b; --slot:#171718;
  --ink:#f4f4f5; --text:#d8d8da; --dim:#96969b; --faint:#7b7b81;
  --icon-muted:#c5c5cc; --icon-disabled:#a8a8b0;
  --accent:#e9e9ec; --accent-soft:rgba(255,255,255,.09); --accent-ink:#f4f4f5;
  --on-accent:#141414; --on-accent-ink:#141414;
  --favorite:#ef8fa7; --favorite-soft:#331f26;
  --tip-bg:#eaeaec; --tip-fg:#0d0d0e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.6);
  --shadow-md:0 2px 6px rgba(0,0,0,.65),0 10px 28px rgba(0,0,0,.55);
  --shadow-lg:0 4px 12px rgba(0,0,0,.7),0 22px 60px rgba(0,0,0,.7);
  --top-panel-edge:rgba(255,255,255,.2);
  --top-panel-edge-shadow:rgba(0,0,0,.68);
  --control-surface:#151516;
  --glass-surface:rgba(18,18,19,.96);
  --glass-surface-strong:rgba(20,20,21,.98);
  --glass-surface-soft:rgba(20,20,21,.9);
  --surface-hover:#18181a;
  --surface-preview:#111113;
  --danger-soft:rgba(229,72,77,.14);
  --cad-accent:#f2a23a;
  --cad-accent-ink:#ffb45f;
  --cad-accent-soft:rgba(216,120,0,.2);
  --canvas-grid-major:#737378;
  --canvas-grid-minor:#414146;
  --canvas-grid-opacity:.72;
  --canvas-ink:#ececef;
  --canvas-selection:#62a3ff;
  --canvas-handle:#101114;
  --canvas-extrusion-side:#8795a8;
  --canvas-extrusion-shadow:#4c596b;
  --canvas-extrusion-side-stroke:#9ca9b9;
  --canvas-extrusion-top:#c4ceda;
  --canvas-extrusion-edge:#d4dbe4;
  --canvas-extrusion-specular:#ffffff;
  --canvas-object-shadow:rgba(0,0,0,.42);
  --sketch-grid-minor:rgba(255,255,255,.045);
  --sketch-grid-major:rgba(255,255,255,.095);
}
:root[data-style="button"]{
  --bg:#e9ebf4; --surface:#e9ebf4; --raised:#e9ebf4; --stage:#e9ebf4; --slot:#e9ebf4;
  --line:rgba(166,178,203,.32); --line-soft:rgba(255,255,255,.72);
  --ink:#4b4a6b; --text:#5c5b7e; --dim:#8987a6; --faint:#a3a1bd;
  --accent:#6b68a8; --accent-soft:rgba(107,104,168,.16); --accent-ink:#5b58a0;
  --radius-ui:14px; --radius-lg:22px;
  --shadow-sm:-3px -3px 6px rgba(255,255,255,.95),3px 3px 6px rgba(166,178,203,.55);
  --shadow-md:-5px -5px 11px rgba(255,255,255,.95),5px 5px 11px rgba(166,178,203,.55);
  --shadow-lg:-9px -9px 20px rgba(255,255,255,.95),11px 11px 24px rgba(166,178,203,.55);
}
:root[data-theme="dark"][data-style="button"]{
  --bg:#22242b; --surface:#22242b; --raised:#22242b; --stage:#22242b; --slot:#22242b;
  --line:rgba(255,255,255,.07); --line-soft:rgba(255,255,255,.05);
  --ink:#e8e9f0; --text:#c9cad6; --dim:#989aa8; --faint:#737583;
  --accent:#9a97e7; --accent-soft:rgba(139,136,216,.18); --accent-ink:#bbb8ff;
  --shadow-sm:-3px -3px 6px rgba(255,255,255,.055),3px 3px 7px rgba(0,0,0,.62);
  --shadow-md:-5px -5px 11px rgba(255,255,255,.055),5px 5px 11px rgba(0,0,0,.62);
  --shadow-lg:-9px -9px 20px rgba(255,255,255,.055),11px 11px 24px rgba(0,0,0,.62);
}
:root[data-style="mono"]{
  --bg:#0b0b0b; --surface:#151515; --raised:#1c1c1c; --stage:#070707; --slot:#1f1f1f;
  --line:#303030; --line-soft:#202020; --ink:#fff; --text:#e4e4e4;
  --dim:#a3a3a3; --faint:#717171; --accent:#fff;
  --accent-soft:rgba(255,255,255,.13); --accent-ink:#fff;
  --tip-bg:#fff; --tip-fg:#0b0b0b;
}
:root[data-style="terminal"]{
  --font:var(--mono); --radius-ui:2px; --radius-lg:3px;
  --bg:#000; --surface:#0a0a0a; --raised:#111; --stage:#050505;
  --line:#2a2211; --line-soft:#1a1509; --slot:#131007;
  --ink:#ffb000; --text:#ffb000; --dim:#b17e28; --faint:#78561b;
  --accent:#ffb000; --accent-soft:rgba(255,176,0,.13); --accent-ink:#ffc247;
  --tip-bg:#ffb000; --tip-fg:#000;
  --shadow-sm:none; --shadow-md:0 0 0 1px #2a2211; --shadow-lg:0 0 0 1px #2a2211;
}
:root[data-style="mono"],
:root[data-style="terminal"]{
  --control-surface:var(--raised);
  --glass-surface:color-mix(in srgb,var(--raised) 96%,transparent);
  --glass-surface-strong:color-mix(in srgb,var(--raised) 98%,transparent);
  --glass-surface-soft:color-mix(in srgb,var(--raised) 90%,transparent);
  --surface-hover:var(--slot); --surface-preview:var(--raised);
  --danger-soft:rgba(229,72,77,.14);
  --cad-accent:var(--accent); --cad-accent-ink:var(--accent-ink); --cad-accent-soft:var(--accent-soft);
  --canvas-grid-major:#737378; --canvas-grid-minor:#414146; --canvas-grid-opacity:.72;
  --canvas-ink:var(--ink); --canvas-selection:var(--accent); --canvas-handle:var(--surface);
  --sketch-grid-minor:rgba(255,255,255,.045); --sketch-grid-major:rgba(255,255,255,.095);
}
:root[data-style="mono"]{
  --canvas-extrusion-side:#747982;
  --canvas-extrusion-shadow:#555a62;
  --canvas-extrusion-side-stroke:#b7bbc1;
  --canvas-extrusion-top:#aeb2b8;
  --canvas-extrusion-edge:#d9dce0;
}
:root[data-style="terminal"]{
  --canvas-extrusion-side:#6f7680;
  --canvas-extrusion-shadow:#505762;
  --canvas-extrusion-side-stroke:#aeb4bd;
  --canvas-extrusion-top:#9ba1aa;
  --canvas-extrusion-edge:#c8cdd4;
}
:root[data-theme="dark"],:root[data-style="mono"],:root[data-style="terminal"]{ color-scheme:dark; }

.profile-auth-frame{
  position:fixed; inset:0; z-index:2147483635; width:100vw; height:100vh; height:100dvh;
  border:0; background:transparent;
}
.profile-auth-frame[hidden]{ display:none; }
:root[data-style="button"] :is(.panel,.command,.watchbar-utility,.watchbar-calendar,.watchbar__popover){
  border-color:transparent; box-shadow:var(--shadow-md);
}
:root[data-style="terminal"] :is(.panel__bar,.tab,.watchbar__chip,.watchbar-utility__head){
  text-transform:uppercase; letter-spacing:.08em;
}
:root[data-style="mono"] img{ filter:grayscale(1); }

/* The interface uses one locally vendored sans face. The other project fonts
   above remain available only to Design's user-authored text geometry. */
:root[data-ui-scale="standard"]{ --ui-base-font-size:13px; }
:root[data-ui-scale="large"]{ --ui-base-font-size:15px; }
:root[data-ui-scale="xlarge"]{ --ui-base-font-size:17px; }

*{ box-sizing:border-box; }
/* The application shell behaves like a native tool: its labels, chips and
   panel copy cannot be selected or receive the browser's blue highlight.
   Actual editing surfaces keep normal text-selection behavior. */
body, body *{
  -webkit-user-select:none;
  user-select:none;
}
body input,
body textarea,
body [contenteditable="true"],
body [contenteditable="plaintext-only"]{
  -webkit-user-select:text;
  user-select:text;
}
body *::selection{ background:transparent; color:inherit; }
body input::selection,
body textarea::selection,
body [contenteditable="true"]::selection,
body [contenteditable="plaintext-only"]::selection{
  background:var(--accent-soft);
  color:inherit;
}
/* Scrolling stays; the bars do not. Every scroll container in this layout is a
   panel with its own edges, and a track drawn inside one both eats padding
   (it took 15px off the tab row's) and reads as a second border. The wheel,
   trackpad, keyboard and touch all still scroll. */
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ width:0; height:0; display:none; }
button{ font:inherit; background:none; border:0; padding:0; cursor:pointer; }
html,body{ height:100%; margin:0; }

body{
  display:flex; flex-direction:column;
  background:var(--bg); color:var(--text);
  font:var(--ui-base-font-size,13px)/1.4 var(--font);
  overflow:hidden;
}

/* One persistent brand mark owns the top-left corner in every view. It is a
   real Home control, not decorative duplicate chrome. */
.app-brand{
  position:fixed; z-index:520; left:14px; top:13px;
  width:44px; height:44px; padding:3px; display:grid; place-items:center;
  border:0; border-radius:12px; background:transparent; cursor:pointer;
  isolation:isolate;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.app-brand::before{
  content:''; position:absolute; z-index:0; inset:5px; pointer-events:none;
  border-radius:50%; opacity:0; transform:scale(.72);
  background:radial-gradient(circle,rgba(255,191,24,.72) 0%,rgba(245,158,11,.38) 44%,rgba(245,158,11,0) 76%);
  filter:blur(7px);
}
.app-brand__mark{ position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:contain; }
.app-brand__wordmark{ display:none; }
.app-brand.is-ambient-pulse::before{ animation:app-brand-random-glow 4.2s ease-in-out 1; }
.app-brand.is-ambient-pulse .app-brand__mark{ animation:app-brand-random-breathe 4.2s ease-in-out 1; }
@keyframes app-brand-random-glow{
  0%,100%{ opacity:0; transform:scale(.72); }
  19%{ opacity:.18; transform:scale(.88); }
  39%{ opacity:.68; transform:scale(1.12); }
  56%{ opacity:.28; transform:scale(.98); }
  72%{ opacity:.78; transform:scale(1.2); }
  87%{ opacity:.16; transform:scale(1.01); }
}
@keyframes app-brand-random-breathe{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(245,158,11,0)); transform:scale(1); }
  39%{ filter:drop-shadow(0 0 5px rgba(255,191,24,.68)); transform:scale(1.035); }
  56%{ filter:drop-shadow(0 0 2px rgba(245,158,11,.26)); transform:scale(1.012); }
  72%{ filter:drop-shadow(0 0 7px rgba(255,191,24,.76)); transform:scale(1.05); }
}
body[data-view="load"] .app-brand{ display:none; }
.app-brand:hover,.app-brand:focus-visible{
  transform:translateY(-1px) scale(1.04); outline:0;
  background:color-mix(in srgb,var(--surface) 74%,transparent);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
@media (prefers-reduced-motion:reduce){
  .app-brand.is-ambient-pulse::before,.app-brand.is-ambient-pulse .app-brand__mark{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════════
   Load view — the real 3Dhive three-door front door
   Source contract: 3d_hive_improve/index.html + app-front-door.css.
   It owns first paint; Browse, Design and Build stay mounted underneath and
   are entered through the three full-height doors.
   ══════════════════════════════════════════════════════════════════ */
.load-view{
  --load-bg:var(--surface); --load-line:var(--line); --load-text:var(--ink);
  --load-muted:var(--dim); --load-quiet:var(--faint); --load-gold:#c97d0e;
  --load-blue:var(--accent); --load-tile:var(--raised); --load-map:var(--slot);
  position:fixed; inset:0; z-index:500; display:none;
  grid-template-rows:minmax(0,1fr);
  background:var(--load-bg); color:var(--load-text);
}
body[data-view="load"] > .load-view{ display:grid; }
body[data-view="load"] > .top-panel,
body[data-view="load"] > .shell,
body[data-view="load"] > .dock,
body[data-view="load"] > .seatzone{ display:none; }

/* Home has no workspace preview panel. Its header remains only as a zero-height
   positioning layer so Sign in can float above the full-height doors. */
.load-view__header{
  position:absolute; z-index:8; inset:0 0 auto; height:0;
  padding:0; border:0; pointer-events:none;
}
/* The wrapper survives because the pop-out pass inserts the Home icon before
   it, but it lays nothing out — Sign in positions against the header itself. */
.load-view__header-actions{ display:contents; }
.load-view__signin,
.top-panel__signin{
  position:absolute; z-index:8; right:16px; top:18px;
  height:29px; padding:0 14px; border:1px solid #1468e8; border-radius:8px;
  color:#fff;
  background:#1f74ef;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(31,116,239,.22);
  font-size:12px; font-weight:600; white-space:nowrap;
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s;
}
.load-view__signin{ pointer-events:auto; }
/* Workspace return and authentication stay grouped at the viewport's top
   right, with Sign in remaining the rightmost action. */
.top-panel__account-actions{
  position:fixed; z-index:80; right:16px; top:18px;
  display:flex; align-items:center; gap:8px;
}
.top-panel__account-actions .top-panel__signin{
  position:static; width:148.25px; height:34.8px; padding:0 16.8px;
  border-width:1.2px; border-radius:9.6px; font-size:14.4px;
}
.top-panel__home{
  width:29px; height:29px; flex:0 0 29px; display:grid; place-items:center;
  padding:0; border:1px solid var(--line); border-radius:8px;
  background:var(--glass-surface-strong); color:var(--icon-muted); cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(2,6,23,.12);
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s;
}
.top-panel__home svg{ width:14px; height:14px; }
/* The three shared workspace actions are exactly 20% larger than their
   original 29px / 14px geometry. Their Load-view counterpart remains at the
   compact base size above. */
.top-panel__account-actions .top-panel__home{
  width:34.8px; height:34.8px; flex-basis:34.8px;
  border-width:1.2px; border-radius:9.6px;
}
.top-panel__account-actions .top-panel__home svg{ width:16.8px; height:16.8px; }
.top-panel__cart{ position:relative; overflow:visible; }
.top-panel__cart-count{
  position:absolute; z-index:2; right:-7px; top:-7px;
  min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center;
  /* The ring is a cutout in the panel behind the badge, so it tracks --surface
     the way .market-rail__count tracks --pf-surface. It named an undefined
     --base before, which made the whole shorthand invalid and left the badge
     with no border at all in either theme. */
  border:2px solid var(--surface); border-radius:999px; background:var(--accent); color:var(--on-accent);
  font:700 12px/1 var(--font); letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  box-shadow:0 3px 9px rgba(31,116,239,.32); pointer-events:none;
}
.top-panel__cart-count[hidden]{ display:none; }
.top-panel__cart[data-cart-bump] > svg{ animation:workspace-cart-icon-bump .42s cubic-bezier(.2,.9,.28,1.45); }
.top-panel__cart[data-cart-bump] .top-panel__cart-count{ animation:workspace-cart-count-bump .5s cubic-bezier(.2,.9,.28,1.45); }
.workspace-cart-flyer{
  position:fixed; z-index:1200; left:0; top:0; width:38px; height:38px;
  display:grid; place-items:center; overflow:hidden; border:2px solid rgba(255,255,255,.92);
  border-radius:12px; background:var(--accent); color:var(--tip-fg); pointer-events:none;
  box-shadow:0 10px 26px rgba(15,23,42,.28),0 0 0 5px color-mix(in srgb,var(--accent) 17%,transparent);
  will-change:transform,opacity;
}
.workspace-cart-flyer svg{ width:19px; height:19px; }
.workspace-cart-flyer img{ width:100%; height:100%; object-fit:contain; background:#f8fafc; }
@keyframes workspace-cart-icon-bump{
  0%,100%{ transform:translateY(0) scale(1); }
  42%{ transform:translateY(-3px) scale(1.2) rotate(-8deg); }
  70%{ transform:translateY(1px) scale(.94) rotate(3deg); }
}
@keyframes workspace-cart-count-bump{
  0%{ transform:scale(.65); opacity:.4; }
  48%{ transform:scale(1.34); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .top-panel__cart[data-cart-bump] > svg,
  .top-panel__cart[data-cart-bump] .top-panel__cart-count{ animation:none; }
}
.top-panel__home:hover,
.top-panel__home:focus-visible{
  color:var(--accent); border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 6px 18px rgba(31,116,239,.18);
}
.top-panel__seller[aria-pressed="true"],
.top-panel__cart[aria-pressed="true"]{
  color:var(--accent-ink); border-color:var(--accent);
  background:var(--accent-soft); box-shadow:0 6px 18px rgba(31,116,239,.18);
}
.load-view__signin:hover,
.load-view__signin:focus-visible,
.top-panel__signin:hover,
.top-panel__signin:focus-visible{
  border-color:#0d55c7; background:#1468e8; color:#fff;
  box-shadow:0 6px 18px rgba(31,116,239,.32);
}

.load-view__doors{ display:flex; min-height:0; }
.load-view__seam{ flex:0 0 1px; background:var(--load-line); }
.load-view__door{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  display:flex; flex-direction:column; gap:8px; padding:58px 32px 34px;
  transition:flex-grow .46s cubic-bezier(.4,0,.2,1),background .46s cubic-bezier(.4,0,.2,1);
}
.load-view__door:hover,
.load-view__door:focus-within{ flex-grow:1.35; background:var(--surface-hover); }
.load-view__eyebrow{
  display:flex; align-items:center; gap:10px; color:var(--load-gold);
  font:600 12px/1.3 var(--mono);
  letter-spacing:.14em;
}
.load-view__eyebrow-copy{ display:inline-flex; align-items:center; white-space:nowrap; }
.load-view__verb{
  display:inline-block; font:inherit; font-weight:inherit; letter-spacing:inherit;
  opacity:1; transform:translateY(0);
  transition:opacity .18s ease,transform .18s ease;
}
.load-view__verb[data-load-verb="browse"]{ min-width:112px; }
.load-view__verb[data-load-verb="design"]{ min-width:102px; }
.load-view__verb[data-load-verb="print"]{ min-width:114px; }
.load-view__verb[data-changing="true"]{ opacity:0; transform:translateY(-3px); }
.load-view__eyebrow::after{
  content:""; flex:1 1 auto; border-top:1px dashed currentColor; opacity:.45;
}
.load-view__title{ margin:0; font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.02em; }
.load-view__title-link{
  position:relative; z-index:6; display:block; width:max-content; max-width:100%; min-width:180px;
  border-radius:4px; color:inherit; text-align:left; cursor:pointer;
  transition:color .16s ease,opacity .16s ease,transform .16s ease;
}
.load-view__title-link:hover,.load-view__title-link:focus-visible{ color:var(--load-gold); }
.load-view__title-link:focus-visible{ outline:2px solid var(--load-gold); outline-offset:3px; }
.load-view__title-link[data-changing="true"]{ opacity:0; transform:translateY(-3px); }
.load-view__blurb{ margin:2px 0 0; max-width:31ch; color:var(--load-muted); font-size:13px; line-height:1.55; }
.load-view__word{
  display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(115deg,#83b7ff,#3b82f6 55%,#6366f1);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.load-view__word svg{ width:.72em; height:.72em; color:#4f8ef7; stroke:currentColor; }
.load-view__go{
  position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end;
  padding:0 32px 25px; border:0; background:transparent; color:#3c4657;
  text-align:left; font-size:12.5px; font-weight:600;
  transition:color .18s;
}
.load-view__door:hover .load-view__go,
.load-view__go:focus-visible{ color:var(--load-gold); }
.load-view__go:focus-visible{ outline:2px solid var(--load-gold); outline-offset:-3px; }
.load-view__art{
  position:absolute; pointer-events:none; opacity:.68;
  transition:opacity .36s ease;
}
.load-view__door:hover .load-view__art,
.load-view__door:focus-within .load-view__art{ opacity:1; }

/* Browse door: verified Benchy video, live catalog context, and true
   orthographic sheets rendered from the shared Benchy and David models. */
.load-view__browse{
  left:32px; right:32px; top:178px; bottom:59px;
  display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:1.05fr minmax(0,1.95fr); gap:10px;
}
.load-view__tile{
  min-width:0; min-height:0; margin:0; padding:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--load-line); border-radius:10px; background:var(--load-tile);
  overflow:hidden;
}
.load-view__video{ grid-column:1/-1; position:relative; padding:0; background:#20252a; }
.load-view__video iframe{
  position:absolute; left:0; top:50%; width:100%; height:auto; aspect-ratio:16/9;
  transform:translateY(-50%); border:0; pointer-events:none;
}
.load-view__browse-cards{
  grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:1.04fr .9fr; gap:10px; min-height:0;
}
.load-view__mini{ align-items:stretch; justify-content:space-between; }
.load-view__mini-head{
  display:flex; align-items:center; gap:7px; padding-bottom:4px; border-bottom:1px solid var(--load-line);
  color:var(--load-quiet); font:500 12px/1.35 var(--mono);
}
.load-view__mini-head-ico{
  display:grid; place-items:center; width:25px; height:25px; flex:0 0 25px;
  border-radius:7px; background:#eaf2ff; color:#1f74ef;
}
.load-view__mini-head-ico svg{ width:13px; height:13px; }
.load-view__mini-head-copy{ display:flex; flex-direction:column; min-width:0; }
.load-view__mini-head b{ color:var(--load-text); font:600 12px/1.3 var(--font); }
.load-view__mini-row{
  display:flex; justify-content:space-between; gap:8px;
  color:var(--load-quiet); font:500 12px/1.25 var(--mono);
  letter-spacing:.06em;
}
.load-view__mini-row b{ color:#526176; font-weight:600; }
.load-view__bars{ display:flex; align-items:flex-end; gap:3px; height:24px; }
.load-view__bars i{ flex:1; height:var(--bar); background:#ddb26a; opacity:.65; }
.load-view__bars i:last-child{ opacity:1; }
.load-view__asset > img{ width:100%; height:calc(100% - 18px); min-height:0; object-fit:contain; }
.load-view__ortho-grid{
  position:relative; flex:1 1 auto; min-width:0; min-height:0; width:100%;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch;
  border-radius:7px; background:color-mix(in srgb,var(--load-tile) 88%,#fff);
  overflow:hidden;
}
.load-view__ortho-view{
  position:relative; min-width:0; min-height:0; display:grid; place-items:center;
  padding:3px 2px 13px; border-left:1px solid color-mix(in srgb,var(--load-line) 68%,transparent);
}
.load-view__ortho-view:first-child{ border-left:0; }
.load-view__ortho-view img{
  display:block; width:100%; height:100%; min-height:0; object-fit:contain;
  opacity:0; transform:scale(.96); transition:opacity .24s ease,transform .28s ease;
}
.load-view__ortho-view small{
  position:absolute; left:2px; right:2px; bottom:3px; color:var(--load-quiet);
  font:600 12px/1 var(--mono); letter-spacing:.08em;
  text-align:center; text-transform:uppercase;
}
.load-view__asset[data-sheet-state="ready"] .load-view__ortho-view img{
  opacity:1; transform:none;
}
.load-view__asset[data-sheet-state="loading"] .load-view__ortho-grid::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 28%,rgba(127,138,153,.10) 50%,transparent 72%);
  background-size:220% 100%; animation:loadOrthoShimmer 1.1s linear infinite;
}
@keyframes loadOrthoShimmer{ to{ background-position:-220% 0; } }
.load-view__asset figcaption{ font-size:12px; }
.load-view__tile figcaption{
  max-width:100%; color:var(--load-quiet); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font:500 12px/1.2 var(--mono);
}

/* Design door: no authored fallback. The real marketplace plate stays hidden
   until its WebGL module confirms that the actual model is ready. */
.load-view__plate{ left:0; right:0; top:142px; bottom:38px; opacity:1; }
.load-view__door[data-load-right-orbiting="true"],
.load-view__door[data-load-right-orbiting="true"] .load-view__go{ cursor:grabbing; }
.load-view__plate > canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity .2s ease;
}
.load-view__plate[data-real-plate="true"] > canvas{ opacity:1; }

/* Print door: a live miniature of Build's Chicago printer map. The authored
   street grid remains underneath as the offline/loading fallback. */
.load-view__map{
  left:0; right:0; top:140px; bottom:0; z-index:3; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 10%,rgba(0,0,0,.85) 20%,#000 32%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 10%,rgba(0,0,0,.85) 20%,#000 32%);
  background:var(--load-map);
}
.load-view__map[data-map-ready="true"]{ pointer-events:auto; cursor:zoom-in; }
.load-view__map[data-map-panning="true"]{ cursor:grabbing; }
.load-view__map[data-map-build-handoff="zooming"]{ cursor:progress; }
.load-view__map[data-map-build-handoff="zooming"]::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border:2px solid color-mix(in srgb,var(--accent) 62%,transparent);
  box-shadow:inset 0 0 42px color-mix(in srgb,var(--accent) 16%,transparent);
  animation:load-map-build-handoff .68s cubic-bezier(.22,.78,.28,1) both;
}
@keyframes load-map-build-handoff{
  from{ opacity:0; transform:scale(.985); }
  28%{ opacity:1; }
  to{ opacity:0; transform:scale(1.02); }
}
@media (prefers-reduced-motion:reduce){
  .load-view__map[data-map-build-handoff="zooming"]::after{ animation:none; }
}
.load-view__map-fallback{
  position:absolute; inset:0;
  background:
    linear-gradient(56deg,transparent 49.72%,rgba(85,100,122,.2) 49.72% 50%,transparent 50%),
    linear-gradient(124deg,transparent 39.8%,rgba(85,100,122,.13) 39.8% 40.05%,transparent 40.05%),
    repeating-linear-gradient(0deg,rgba(100,116,139,.15) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(100,116,139,.15) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(0deg,rgba(71,85,105,.18) 0 1px,transparent 1px 122px),
    repeating-linear-gradient(90deg,rgba(71,85,105,.18) 0 1px,transparent 1px 122px),
    var(--load-map);
  opacity:1; transition:opacity .3s ease;
}
.load-view__map-preview,
.load-view__map-preview.mapboxgl-map{
  position:absolute; inset:0; width:100%; height:100%;
  background:var(--load-map); opacity:0; transition:opacity .32s ease;
}
.load-view__map[data-map-ready="true"] .load-view__map-fallback{ opacity:0; }
.load-view__map[data-map-ready="true"] .load-view__map-preview{ opacity:1; }
.load-view__map-preview .mapboxgl-canvas{ filter:saturate(.72) contrast(.96) brightness(1.04); }
.load-view__map-preview .mapboxgl-ctrl-logo,
.load-view__map-preview .mapboxgl-ctrl-attrib{ transform:scale(.72); transform-origin:0 100%; }
.load-view__map-preview .mapboxgl-ctrl-bottom-left,
.load-view__map-preview .mapboxgl-ctrl-bottom-right{ bottom:58px; }
.load-view__map-preview .mapboxgl-ctrl-group{
  overflow:hidden; border:1px solid rgba(148,156,168,.38); border-radius:8px;
  box-shadow:0 5px 16px rgba(15,23,42,.13);
}
.load-view__map-preview .printer-node-marker{ pointer-events:auto; cursor:pointer; }
.load-view__map-preview .printer-node-marker.status-dot:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px;
}
.load-view__map-preview .printer-node-marker.status-dot.selected{
  --printer-node-border:var(--accent); --printer-node-fill:color-mix(in srgb,var(--accent) 22%,transparent);
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 60%,transparent)) drop-shadow(0 4px 10px rgba(15,23,42,.28));
}
.load-view__map[data-map-state="error"] .load-view__map-fallback{ opacity:1; }
.load-view__map[data-map-state="error"] .load-view__map-preview{ opacity:0; }
.load-view__go--print{ top:auto; height:58px; z-index:5; }
.load-view__printer-card{
  position:absolute; z-index:4; left:16px; bottom:68px; width:min(236px,calc(100% - 84px));
  display:none; grid-template-columns:32px minmax(0,1fr) 20px; gap:8px; align-items:center;
  padding:9px; border:1px solid var(--load-line); border-radius:11px;
  background:color-mix(in srgb,var(--load-bg) 94%,transparent); color:var(--load-text);
  box-shadow:var(--shadow-md); backdrop-filter:blur(12px); pointer-events:auto;
}
.load-view__printer-card[data-open="true"]{ display:grid; }
.load-view__printer-card-mark{ width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:var(--accent-soft); color:var(--accent-ink); }
.load-view__printer-card-mark svg{ width:17px; height:17px; }
.load-view__printer-card-copy{ min-width:0; display:grid; gap:3px; }
.load-view__printer-card-copy strong,.load-view__printer-card-copy span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.load-view__printer-card-copy strong{ font:700 12px/1.15 var(--font); }
.load-view__printer-card-copy span{ color:var(--load-muted); font:550 12px/1.15 var(--font); }
.load-view__printer-card-close{ width:20px; height:20px; display:grid; place-items:center; border-radius:6px; color:var(--load-muted); font-size:16px; }
.load-view__printer-card-close:hover,.load-view__printer-card-close:focus-visible{ background:var(--slot); color:var(--load-text); }
.load-view__printer-card-build{ grid-column:2/4; justify-self:start; color:var(--accent-ink); font:700 12px/1 var(--font); }
.load-view__printer-card-build:hover,.load-view__printer-card-build:focus-visible{ text-decoration:underline; }
.load-view__water{
  position:absolute; top:0; right:0; bottom:0; width:46%;
  clip-path:polygon(34% 0,100% 0,100% 100%,55% 100%,42% 62%,30% 30%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--slot) 86%,var(--surface)),var(--raised) 42%);
}
.load-view__node{
  position:absolute; left:calc(var(--x)*1%); top:calc(var(--y)*1%);
  width:14px; height:13px; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  border:1.5px solid #e8a83c; background:var(--glass-surface-soft);
  filter:drop-shadow(0 0 7px rgba(230,166,55,.16));
}
.load-view__node[data-live="true"]::after{
  content:""; position:absolute; right:-2px; top:-2px; width:5px; height:5px;
  border-radius:50%; background:#47d487; box-shadow:0 0 5px rgba(71,212,135,.65);
}
.load-view__shops{
  position:absolute; z-index:4; right:17px; top:81px; padding:6px 11px;
  display:flex; align-items:center; gap:7px; border:1px solid var(--load-line);
  border-radius:999px; background:color-mix(in srgb,var(--load-bg) 90%,transparent); color:var(--load-muted);
  font:500 12px/1.2 var(--mono); pointer-events:none;
}
.load-view__shops::before{ content:""; width:6px; height:6px; border-radius:50%; background:#42d887; }

.load-view__prompt{
  position:absolute; inset:auto 0 0; z-index:7; height:84px;
  pointer-events:none; display:grid; grid-template-columns:1fr minmax(0,640px) 1fr;
  align-items:center; gap:16px; padding:0 28px;
}
.load-view__command-host{
  grid-column:2; display:flex; align-items:center; justify-content:center;
  width:100%; min-width:0;
}
/* Load and Design share the very same command-panel node. Only the message
   entry is suppressed while that node is mounted on the front door. */
.load-view__command-host > .command{
  position:relative; inset:auto; margin-inline:auto;
  width:min(580px,100%); max-width:580px; pointer-events:auto;
}
.load-view__command-host .command__chat{ display:none; }
.load-view__about{ grid-column:3; justify-self:end; color:var(--load-muted); font-size:12px; }
.load-view__about:hover{ color:var(--load-gold); }
.load-view__notice{
  position:absolute; right:28px; bottom:76px; z-index:8; margin:0; padding:7px 11px;
  border:1px solid var(--load-line); border-radius:8px; background:var(--control-surface);
  color:var(--load-muted); box-shadow:var(--shadow-md); opacity:0; pointer-events:none;
  transform:translateY(4px); transition:opacity .18s,transform .18s;
}
.load-view__notice[data-show="true"]{ opacity:1; transform:none; }

@media (max-width:900px), (max-height:600px){
  :root{ --top-h:55px; }
  .top-panel__account-actions{ top:10.1px; }
  .load-view{ grid-template-rows:minmax(0,1fr); }
  .load-view__doors{ flex-direction:column; }
  .load-view__door{ padding:17px 22px; padding-right:min(42vw,330px); gap:3px; }
  .load-view__door:first-of-type{ padding-top:54px; }
  .load-view__door:hover,.load-view__door:focus-within{ flex-grow:1; }
  .load-view__art{ left:auto; right:0; top:0; bottom:0; width:min(40vw,310px); }
  .load-view__browse{ right:12px; top:8px; bottom:8px; grid-template-rows:1fr 1fr; gap:6px; }
  .load-view__browse-cards{ grid-template-rows:1fr; gap:6px; }
  .load-view__mini{ display:none; }
  .load-view__plate{ top:2px; bottom:2px; }
  .load-view__map{ top:0; }
  .load-view__shops{ top:36px; right:10px; }
  .load-view__go{ padding:0 22px 13px; }
  .load-view__prompt{ grid-template-columns:1fr; padding:0 16px; }
  .load-view__command-host{ grid-column:1; }
  .load-view__about{ display:none; }
}
@media (max-width:520px), (max-height:420px){
  :root{ --top-h:38px; }
  .top-panel__account-actions{ top:1.6px; }
  .load-view__door{ padding-right:20px; }
  .load-view__art,.load-view__shops,.load-view__printer-card{ display:none; }
  .load-view__title{ font-size:18px; }
}

.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; min-height:0; min-width:0; overflow:auto;
}

/* ── workspace switcher: full bleed below the Default Watchlist ── */
.top-panel{
  flex:0 0 var(--top-h);
  order:3;
  position:relative; z-index:60;
  display:none; align-items:stretch;
  background:var(--surface);
  border:0; border-top:1px solid var(--line);
  border-radius:0;
  overflow:visible;
}
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"],[data-view="admin"]) > .top-panel{ display:flex; }

/* ══════════════════════════════════════════════════════════════════
   View preview strip — three equal cells, each a miniature of the door
   it opens, in the order Browse · Design · Build.

   There is one authored strip. It stays below the workspace watchlist and is
   hidden on Home; Browse, Design and Build share the same live node.

   The JS hooks are the ones the text tabs used — .top-view-labels on the
   nav, .top-view-labels__item + data-top-view on each cell — so setView's
   active sync, the click routing and the arrow-key handling all still
   apply without a line of rewiring.
   ══════════════════════════════════════════════════════════════════ */
.view-preview-strip{
  flex:1 1 auto; min-width:0; align-self:stretch;
  display:flex; align-items:stretch;
}
/* The universal pop-out pass wraps every tab in a group. It must not become a
   box of its own here, or the three cells stop dividing the row equally. */
.view-preview-strip .top-view-labels__group{ display:contents; }
/* 1px rules on the same pixels as .load-view__seam, so the previews line up
   with the doors sitting underneath them. */
.view-preview-strip__seam{ flex:0 0 1px; background:var(--line); }
.view-preview-strip__seam[hidden]{ display:none; }

.view-preview{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:0 18px; color:var(--dim); text-align:left; letter-spacing:normal;
  transition:background .22s ease,color .22s ease;
}
.view-preview[data-top-view="browse"]{ padding-left:80px; }
.view-preview:hover{ background:var(--surface-hover); color:var(--text); }
.view-preview[data-active="true"]{ background:var(--surface-hover); color:var(--ink); }
.view-preview[hidden]{ display:none; }
/* Every workspace uses one compact top row in the fixed order Browse, Design,
   Build. Browse expands left, Design expands through the middle and pushes its
   neighbours outward, and Build expands right while pushing both cards left. */
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"],[data-view="admin"]) > .top-panel{
  flex-basis:0; height:0; border:0;
}
/* One continuous lower edge makes the three expanding cells read as a single
   raised workspace panel. Keeping it on the shared shell prevents small gaps
   or doubled borders when the active cell changes width. */
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"],[data-view="admin"]) > .top-panel::after{
  content:''; position:fixed; z-index:79; left:0; right:0;
  top:calc(var(--top-h) - 2px); height:2px; pointer-events:none;
  background:var(--top-panel-edge);
  box-shadow:0 5px 14px var(--top-panel-edge-shadow);
}
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"],[data-view="admin"]) .view-preview-strip__seam{
  display:none;
}
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"],[data-view="admin"]) .view-preview{
  position:fixed; z-index:70; top:0; height:var(--top-h); flex:none; display:flex;
  border-right:1px solid var(--line); border-bottom:0;
  background:var(--surface);
  transition:left .34s cubic-bezier(.22,.9,.24,1),width .34s cubic-bezier(.22,.9,.24,1),
             background .22s ease,color .22s ease;
}
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"],[data-view="admin"]) .view-preview:disabled{
  cursor:default;
}
body[data-view="browse"] .view-preview[data-top-view="browse"]{ left:0; width:50%; }
body[data-view="browse"] .view-preview[data-top-view="design"]{ left:50%; width:25%; }
body[data-view="browse"] .view-preview[data-top-view="build"]{ left:75%; width:25%; border-right:0; }

body[data-view="design"] .view-preview[data-top-view="browse"]{ left:0; width:25%; }
body[data-view="design"] .view-preview[data-top-view="design"]{ left:25%; width:50%; }
body[data-view="design"] .view-preview[data-top-view="build"]{ left:75%; width:25%; border-right:0; }

body[data-view="build"] .view-preview[data-top-view="browse"]{ left:0; width:25%; }
body[data-view="build"] .view-preview[data-top-view="design"]{ left:25%; width:25%; }
body[data-view="build"] .view-preview[data-top-view="build"]{ left:50%; width:50%; border-right:0; }
body:is([data-view="seller"],[data-view="admin"]) .view-preview[data-top-view="browse"]{ left:0; width:33.333%; }
body:is([data-view="seller"],[data-view="admin"]) .view-preview[data-top-view="design"]{ left:33.333%; width:33.334%; }
body:is([data-view="seller"],[data-view="admin"]) .view-preview[data-top-view="build"]{ left:66.667%; width:33.333%; border-right:0; }
.view-preview:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }

.view-preview__verb{
  position:relative; z-index:5; color:var(--load-gold,#c97d0e);
  font:700 13px/1.2 var(--mono);
  letter-spacing:.14em;
}
.view-preview__blurb{
  position:relative; z-index:5; max-width:100%;
  font:600 15.5px/1.25 var(--font); letter-spacing:-.01em;
  padding-bottom:2px; margin-bottom:-2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* The miniature sits on the trailing half of its cell and fades in from behind
   the label, the way each door's own art does. */
.view-preview__art{
  position:absolute; z-index:1; right:0; top:0; bottom:0; width:54%;
  pointer-events:none; opacity:.6; transition:opacity .3s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%);
          mask-image:linear-gradient(90deg,transparent 0,#000 13%);
}
/* The label keeps its own lane: it stops where the miniature starts, so a
   longer blurb clips rather than running underneath the art. */
.view-preview__verb,
.view-preview__blurb{ max-width:calc(52% - 4px); }
.view-preview:hover .view-preview__art,
.view-preview[data-active="true"] .view-preview__art{ opacity:1; }

/* Browse — the Object Insights bars, the trending list and a listing thumb,
   the same three tiles the Browse door builds at full size. */
.view-preview__tiles{
  position:absolute; inset:13px 18px 13px 10px;
  display:grid; grid-template-columns:1.2fr 1fr .74fr; gap:6px;
}
.view-preview__tile{
  min-width:0; min-height:0; display:flex; flex-direction:column;
  justify-content:center; gap:4px; padding:6px 7px;
  border:1px solid var(--line); border-radius:8px; background:var(--raised);
  overflow:hidden;
}
.view-preview__bars{ display:flex; align-items:flex-end; gap:2px; height:23px; }
.view-preview__bars i{
  flex:1; height:var(--bar); background:#ddb26a; opacity:.65;
  transform-origin:50% 100%; will-change:transform;
}
.view-preview__bars i:last-child{ opacity:1; }
.view-preview__bars i:nth-child(1){ --bar-speed:.82s; --bar-delay:-.18s; }
.view-preview__bars i:nth-child(2){ --bar-speed:1.08s; --bar-delay:-.64s; }
.view-preview__bars i:nth-child(3){ --bar-speed:.94s; --bar-delay:-.31s; }
.view-preview__bars i:nth-child(4){ --bar-speed:1.16s; --bar-delay:-.87s; }
.view-preview__bars i:nth-child(5){ --bar-speed:.88s; --bar-delay:-.52s; }
.view-preview__bars i:nth-child(6){ --bar-speed:1.22s; --bar-delay:-.74s; }
.view-preview__bars i:nth-child(7){ --bar-speed:1.01s; --bar-delay:-.43s; }
.view-preview__bars i:nth-child(8){ --bar-speed:.91s; --bar-delay:-.69s; }
.view-preview[data-top-view="browse"]:hover .view-preview__bars i{
  animation:view-preview-bar-dance var(--bar-speed) ease-in-out var(--bar-delay) infinite;
}
@keyframes view-preview-bar-dance{
  0%,100%{ transform:scaleY(.72); }
  30%{ transform:scaleY(1.08); }
  58%{ transform:scaleY(.5); }
  78%{ transform:scaleY(.92); }
}
@media (prefers-reduced-motion:reduce){
  .view-preview[data-top-view="browse"]:hover .view-preview__bars i{ animation:none; }
}
.view-preview__cap{
  color:var(--faint); font:500 10px/1.2 var(--mono);
  letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.view-preview__row{
  display:flex; justify-content:space-between; gap:7px;
  color:var(--faint); font:500 10px/1.3 var(--mono);
}
.view-preview__row b{ color:var(--dim); font-weight:600; }
.view-preview__tile--shot{ padding:5px; }
.view-preview__tile--shot img{ width:100%; height:100%; min-height:0; object-fit:contain; }
.view-preview__ortho-sheet{ padding:4px; }
.view-preview__ortho-sheet .view-preview__ortho-grid{
  width:100%; height:100%; background:transparent; border-radius:4px;
}
.view-preview__ortho-sheet .load-view__ortho-view{
  padding:1px 1px 9px; border-color:color-mix(in srgb,var(--line) 72%,transparent);
}
.view-preview__ortho-sheet .load-view__ortho-view small{
  bottom:1px; color:var(--faint); font-size:7px; letter-spacing:.04em;
}

/* Design — the CAD plate, at the scale the header can carry: the same red X /
   blue Z centre lines and green Y axis, over a 9px ruling instead of 18px. */
.view-preview__plate{ position:absolute; inset:0; overflow:hidden; }
.view-preview__plate-grid{
  position:absolute; left:4%; right:4%; top:18%; bottom:3%;
  transform:perspective(260px) rotateX(58deg); transform-origin:50% 100%;
  background:
    linear-gradient(90deg,transparent calc(50% - .6px),#dc2626 calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px)),
    linear-gradient(0deg,transparent calc(50% - .6px),#2563eb calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px)),
    repeating-linear-gradient(0deg,rgba(148,156,168,.42) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(90deg,rgba(148,156,168,.42) 0 1px,transparent 1px 9px);
  border:1px solid rgba(148,156,168,.35);
  will-change:transform;
}
.view-preview[data-top-view="design"]:hover .view-preview__plate-grid,
.view-preview[data-top-view="design"][data-preview-motion] .view-preview__plate-grid{
  animation:view-preview-design-floor-orbit 8.8s ease-in-out infinite;
}
@keyframes view-preview-design-floor-orbit{
  0%,100%{ transform:perspective(260px) rotateX(58deg) rotateZ(-1.8deg); }
  50%{ transform:perspective(260px) rotateX(58deg) rotateZ(1.8deg); }
}
.view-preview__axis{
  position:absolute; z-index:1; left:50%; top:30%; width:1.5px; height:50%;
  background:#16a34a; transform:translateX(-50%); opacity:.72;
}
/* The header uses the shared marketplace Benchy STL on a transparent WebGL
   canvas, not a symbolic cube. Its larger footprint keeps the hull readable. */
.view-preview__solid{
  position:absolute; z-index:2; left:50%; top:17%; width:78px; height:51px;
  transform:translateX(-50%); opacity:0; transition:opacity .2s ease;
}
.view-preview__solid[data-benchy-ready="true"]{ opacity:1; }
.view-preview__solid canvas{ width:100%; height:100%; display:block; }

/* Build — the authored street grid and hex printer nodes that stand in for
   Chicago underneath the door's live Mapbox miniature. */
.view-preview__map{
  position:absolute; inset:0;
  background:
    linear-gradient(56deg,transparent 49.72%,rgba(85,100,122,.2) 49.72% 50%,transparent 50%),
    linear-gradient(124deg,transparent 39.8%,rgba(85,100,122,.13) 39.8% 40.05%,transparent 40.05%),
    repeating-linear-gradient(0deg,rgba(100,116,139,.15) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(90deg,rgba(100,116,139,.15) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(0deg,rgba(71,85,105,.18) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(90deg,rgba(71,85,105,.18) 0 1px,transparent 1px 52px),
    var(--slot);
  transform-origin:54% 52%; will-change:transform;
  transition:transform .72s cubic-bezier(.22,.9,.24,1);
}
.view-preview[data-top-view="build"]:hover .view-preview__map{
  animation:view-preview-mapbox-zoom 7.2s ease-in-out infinite;
}
@keyframes view-preview-mapbox-zoom{
  0%,100%{ transform:scale(1) translate3d(0,0,0); }
  45%{ transform:scale(1.22) translate3d(-3%,2%,0); }
  62%{ transform:scale(1.16) translate3d(2%,-1%,0); }
}
.view-preview__water{
  position:absolute; top:0; right:0; bottom:0; width:46%;
  clip-path:polygon(34% 0,100% 0,100% 100%,55% 100%,42% 62%,30% 30%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--slot) 86%,var(--surface)),var(--raised) 42%);
}
.view-preview__node{
  position:absolute; left:calc(var(--x)*1%); top:calc(var(--y)*1%);
  width:10px; height:9px; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  border:1.5px solid #e8a83c; background:var(--glass-surface-soft);
  filter:drop-shadow(0 0 6px rgba(230,166,55,.18));
}
.view-preview__node[data-live="true"]::after{
  content:""; position:absolute; right:-2px; top:-2px; width:4px; height:4px;
  border-radius:50%; background:#47d487; box-shadow:none;
}

/* Shallower rows drop the miniature before they drop the label: the strip is
   navigation first and a preview second. */
@media (max-width:900px), (max-height:600px){
  .app-brand{ left:10px; top:9px; width:36px; height:36px; }
  .view-preview{ padding:0 14px; }
  .view-preview[data-top-view="browse"]{ padding-left:64px; }
  .view-preview__art{ width:46%; }
  .view-preview__tiles{ inset:10px 10px 10px 0; grid-template-columns:1.2fr .8fr; }
  .view-preview__tile--shot{ display:none; }
}
@media (max-width:520px), (max-height:420px){
  .app-brand{ left:5px; top:5px; width:28px; height:28px; padding:2px; border-radius:8px; }
  .view-preview{ padding:0 10px; gap:2px; }
  .view-preview[data-top-view="browse"]{ padding-left:46px; }
  .view-preview__art{ display:none; }
  .view-preview__blurb{ display:none; }
  .view-preview__ord{ display:none; }
  /* With the miniature gone the label owns its whole cell; keep a lane for the
     workspace Sign in action on the right. */
  .view-preview__verb{ max-width:none; overflow:hidden; text-overflow:ellipsis; }
  .view-preview-strip{ padding-right:148.8px; }
}
@media (prefers-reduced-motion:reduce){
  .view-preview[data-top-view="design"]:hover .view-preview__plate-grid,
  .view-preview[data-top-view="design"][data-preview-motion] .view-preview__plate-grid,
  .view-preview[data-top-view="build"]:hover .view-preview__map{ animation:none; }
}
/* Before Design mounts, keep the drawing deck dormant in the global header.
   mountDesignWorkspace moves the same live controls into the Sketch pane so
   their state, sub-tools, undo, and redo behavior are not duplicated. */
.top-panel .toptools{
  position:absolute; top:100%; left:50%;
  transform:translate(-50%,-12px); opacity:0; pointer-events:none;
  transition:transform .35s cubic-bezier(.22,.9,.24,1), opacity .3s ease;
}
/* outside Design it is not merely invisible — it is not there to be tabbed to */
body:not([data-view="design"]) .toptools{ visibility:hidden; }

/* The canvas fills the space above the dock, utility row and switcher. */
.shell{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:var(--gap);
  padding:var(--gap);
}
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"],[data-view="admin"]) > .shell{
  /* The fixed view tabs provide the only top offset. Workspace panels are
     full-bleed against that row, the bottom utilities, and both window edges. */
  padding:var(--top-h) 0 0;
}

/* The imported Seller workspace is a real donor surface, not another local
   camera-roll clone. It takes the shell below the shared top row; the donor's
   own tabs, printer controls, and connector dialog provide its UI.

   The dock is NOT excluded here. Seller keeps the same bottom chrome as Browse,
   Design and Build — the command bar on the dock's top edge and the shared
   utility row — so the command input the Seller view itself reaches for
   ("Ask about my shop" writes into .command-input) is actually on screen.
   Only Load excludes the dock, because it hosts the command panel itself. */
body[data-view="seller"] .dock__pane-wrap{
  /* data-pane="seller" is empty and nothing reparents into it, so the band
     would be blank. Collapse it exactly as Browse and Build do. */
  height:0; padding:0; border-top:0;
}
/* The command bar floats over the bottom of the shell. Browse and Build put a
   canvas there and do not care, but Seller is a long scrolling page: without
   this the last ~48px of the dashboard sits behind the bar at full scroll and
   can never be reached. The donor stylesheet cannot know about this shell's
   command panel, so the offset belongs here rather than in seller-view.css. */
body[data-view="seller"] .seller-view .seller-view-shell{
  padding-bottom:64px;
}
.seller-local-view{ min-width:0; min-height:0; overflow:hidden; }
.seller-local-view #sellerView{
  position:relative; flex:1 1 auto; min-width:0; min-height:0;
  overflow:hidden; background:var(--ui-canvas-bg);
  /* Same stage wash as the other views. This rule, not seller-view.css, is
     what paints the seller canvas — its ID selector outranks the vendored
     `.seller-view{background:...}` — so the gradient belongs here. */
  background-image:var(--stage-wash);
}
.seller-local-loading{
  position:absolute; inset:0; display:grid; place-content:center; gap:8px;
  color:var(--ui-text-secondary); text-align:center; font-size:12px;
}
.seller-local-loading strong{ color:var(--ui-text-primary); font-size:14px; font-weight:650; }
.seller-local-error{
  position:absolute; inset:18px; display:grid; place-content:center; gap:8px;
  padding:24px; border:1px solid var(--ui-border); border-radius:10px;
  color:var(--ui-text-secondary); background:var(--ui-panel-bg); text-align:center;
}
.seller-local-error strong{ color:var(--ui-text-primary); }

/* ══════════════════════════════════════════════════════════════════
   top tool bar — css/chrome.css .toptools / .ttools / .ttool / .tsub
   ══════════════════════════════════════════════════════════════════ */
.toptools{ display:flex; align-items:center; gap:9px; max-width:calc(100% - 32px); }
/* the bar matches the utility row: 27px tools + 5px padding + border = 39px */
.ttools{
  display:flex; align-items:center; gap:5px; padding:5px 6px; min-width:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:13px; box-shadow:var(--shadow-md);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
}
.ttools::-webkit-scrollbar{ display:none; width:0; height:0; }
/* a lit tool sits on a soft rounded square */
.ttool{ position:relative; width:27px; height:27px; flex:0 0 27px; border-radius:8px;
        display:grid; place-items:center; color:var(--icon-muted);
        transition:background .15s, color .15s; }
.ttool:hover{ background:var(--slot); color:var(--ink); }
.ttool[aria-pressed="true"]{ background:var(--accent-soft); color:var(--ink); }
.ttool svg{ width:15px; height:15px; }
/* tool families slide out beside their primary icon; one open at a time */
.tsub{ display:flex; align-items:center; gap:2px; overflow:hidden;
       max-width:0; opacity:0;
       transition:max-width .3s cubic-bezier(.22,.9,.24,1), opacity .2s; }
.tsub[data-open="true"]{ max-width:110px; opacity:1; }
.tsub--draw[data-open="true"]{ max-width:228px; }
.text-tool-panel{ gap:5px; }
.text-tool-panel[data-open="true"]{ max-width:690px; overflow:visible; }
.text-tool-field{
  height:27px; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:5px;
  padding:0 6px; border:1px solid var(--line-soft); border-radius:8px; background:var(--raised); color:var(--faint);
}
.text-tool-field > span{ font:700 12px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; }
.text-tool-field :is(select,input){
  height:23px; min-width:0; padding:0 3px; border:0; outline:0; background:transparent; color:var(--ink);
  font:650 12px/1 var(--font);
}
.text-tool-field select{ cursor:pointer; }
.text-tool-field--font{ width:128px; }
.text-tool-field--size{ width:76px; }
.text-tool-field--size input{ width:34px; }
.text-tool-field--weight{ width:126px; }
.text-tool-align{ display:flex; align-items:center; gap:1px; padding-left:4px; border-left:1px solid var(--line-soft); }
.text-tool-format[aria-pressed="true"],.text-tool-align .ttool[aria-pressed="true"]{
  color:var(--accent-ink); background:var(--accent-soft);
}
.text-tool-edit{ margin-left:2px; border-left:1px solid var(--line-soft); border-radius:0 8px 8px 0; }
.ttool[data-tool-group][aria-expanded="true"]{ background:var(--accent-soft); color:var(--ink); }

.rail__arrow{ position:relative; flex:0 0 34px; width:34px; height:34px; border-radius:50%;
              display:grid; place-items:center;
              background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md);
              color:var(--icon-muted);
              opacity:0; transform:scale(.8); pointer-events:none;
              transition:opacity .2s, transform .24s cubic-bezier(.22,.9,.24,1),
                         background .15s, color .15s, border-color .15s; }
.rail__arrow[data-show="true"]{ opacity:1; transform:none; pointer-events:auto; }
.rail__arrow:hover{ background:var(--ink); border-color:var(--ink); color:var(--surface); }
.rail__arrow svg{ width:16px; height:16px; }
.rail__n{ position:absolute; right:-3px; bottom:-3px; min-width:14px; height:14px; padding:0 3px;
          border-radius:999px; background:var(--accent); color:var(--surface);
          font:600 12px/18.667px var(--font); text-align:center; }
.rail__n[data-zero="true"]{ display:none; }

/* ══════════════════════════════════════════════════════════════════
   views — Browse · Design · Build
   Each tab owns a whole view, not just a dock pane: same layout in all
   three (a stage, its arrangement rail, a strip of panels underneath),
   but three separate subtrees, so what one view holds and how it is set
   up is its own. Switching tabs swaps which subtree is mounted; nothing
   is copied between them.
   ══════════════════════════════════════════════════════════════════ */
.views{ position:relative; flex:1 1 auto; min-height:0; display:flex; }
.view{ flex:1 1 auto; min-width:0; min-height:0; display:none; }
.view[data-active="true"]{ display:flex; }
/* Browse and Design keep a quiet 52px structural lane on the left. Seller's
   own icon navigation occupies that outer edge, so only its marketplace proxy
   needs reserved space on the right. */
.view[data-workspace-edge-rails="true"]{
  --workspace-edge-rail-w:52px;
  position:relative; box-sizing:border-box;
}
.view[data-view="browse"][data-workspace-edge-rails="true"]{
  padding-left:var(--workspace-edge-rail-w);
}
.view[data-view="design"][data-workspace-edge-rails="true"]{
  padding-inline:var(--workspace-edge-rail-w);
}
.view[data-view="seller"][data-workspace-edge-rails="true"]{
  padding-right:var(--workspace-edge-rail-w);
}
.workspace-edge-rail{
  position:absolute; z-index:59; top:0; bottom:0; width:var(--workspace-edge-rail-w);
  box-sizing:border-box; background:var(--surface); pointer-events:none;
}
.workspace-edge-rail--left{
  left:0; border-right:1px solid var(--line); border-radius:0 12px 12px 0;
  box-shadow:6px 0 16px rgba(16,24,40,.06);
}
.workspace-edge-rail--right{
  --pf-rail-w:52px; --pf-surface:var(--surface); --pf-drawer-border:var(--line);
  right:0; pointer-events:auto; transition:width .18s ease;
}
.workspace-edge-rail--right[data-market-rail-collapsed="false"]{ width:208px; }
.workspace-edge-rail--right .market-rail{
  inset:0; width:100%; overflow:hidden; border:1px solid var(--line); border-right:0;
  border-radius:12px 0 0 12px; background:var(--surface);
}
/* Mapbox needs a non-zero container to initialize its globe projection and DOM
   marker coordinates. Keep Build laid out invisibly behind Browse/Design while
   it preloads; unlike display:none this gives the real map safe dimensions. */
.view[data-view="build"][data-build-prewarm-layout="true"]{
  position:absolute; inset:0; display:flex; visibility:hidden; pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════════
   middle row
   ══════════════════════════════════════════════════════════════════ */
.middle-row{ flex:1 1 auto; display:flex; gap:var(--gap); min-height:0; min-width:0; }
.work-area{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; gap:var(--gap);
            min-width:0; min-height:0; }
/* the stage: the large blank panel. The arrangement rail and the command
   panel are seated inside it, the way they sit over the stage in the source. */
.center-panel{ flex:1 1 auto; position:relative; overflow:hidden; }
/* The Design stage is a fixed canvas, not a scroll surface. Keeping it clipped
   prevents a focused canvas from scrolling its own title row behind the app
   header when double-click focus mode changes the column geometry. */
body[data-view="design"] .view[data-view="design"] .center-panel{ overflow:clip; }

/* ── the Design view's CAD floor ──
   3d_hive_improve/src/views/design/design-view.js builds this floor with
   Three.js: GridHelper(BUILTIN_PANEL_SIZE=300, 30) — a 300 mm plate at 10 mm
   cells — centre lines in #787878 over #a8a8a8 rulings at 0.5 opacity, with
   the X/Y/Z guides in the workspace's axis colours, seen through a 45° field
   of view at the VIEWCUBE_HOME_ORBIT (θ 0.72, φ 1.08, r 520).
   A single file opened over file:// cannot import that module, so the same
   frozen constants and the same geometry are projected here directly. The
   1 mm fine grid is not drawn: in the real view it is hidden until a sketch
   is active on the top plane. */
.designgrid{ position:absolute; inset:0; display:block;
             width:100%; height:100%; background:var(--surface);
             touch-action:none; cursor:grab; }
.designgrid[data-grid-hover="true"]{ cursor:pointer; }
.designgrid[data-axis-hover]{ cursor:crosshair; }
.designgrid[data-orbiting="true"]{ cursor:grabbing; }
.designgrid__hud{
  position:absolute; z-index:2; left:14px; bottom:11px;
  display:flex; gap:10px; align-items:baseline; pointer-events:none;
  color:var(--faint); font:600 12px/1 var(--font); letter-spacing:.11em;
  text-transform:uppercase;
}
.designgrid__hud b{ color:var(--dim); font-variant-numeric:tabular-nums; }
.designgrid__dimensions{
  position:absolute; z-index:18; left:0; top:0; display:flex; align-items:center; gap:9px;
  min-width:194px; padding:7px 10px; pointer-events:none; opacity:0;
  border:1px solid color-mix(in srgb,var(--line) 78%,transparent); border-radius:11px;
  background:color-mix(in srgb,var(--surface) 91%,transparent); color:var(--ink);
  box-shadow:0 8px 24px rgba(15,23,42,.12); backdrop-filter:blur(14px);
  font:650 12px/1 var(--font); font-variant-numeric:tabular-nums;
  transform:translateY(3px); transition:opacity .12s ease,transform .12s ease;
}
.designgrid__dimensions[aria-hidden="false"]{ opacity:1; transform:translateY(0); }
.designgrid__dimensions strong{
  padding-right:8px; border-right:1px solid var(--line); color:var(--dim);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.designgrid__dimensions span{ display:flex; align-items:baseline; gap:4px; white-space:nowrap; }
.designgrid__dimensions span b{ color:var(--accent); font-size:12px; }
.designgrid__dimensions span em{ color:var(--ink); font-style:normal; }

/* The Design floor owns one continuous, single-row header band. */
.design-pane__chrome{
  position:absolute; z-index:20; left:0; right:0; top:0; min-width:0;
  display:grid; grid-template-columns:minmax(220px,240px) minmax(0,1fr) auto; align-items:center;
  padding:0 10px 0 12px; border-bottom:1px solid var(--line);
  background:var(--glass-surface-strong); backdrop-filter:blur(14px);
}
.design-workspace__model .design-pane__chrome{
  height:40px; grid-template-rows:39px;
}
.design-workspace__sketch .design-pane__chrome{
  height:40px; grid-template-rows:39px;
}
.design-pane__chrome .sketchpad__head{
  position:static; grid-column:1; grid-row:1; min-width:0; padding-left:1px;
}
.design-pane__chrome .design-pane__controls{
  position:static; grid-column:3; grid-row:1; opacity:1; visibility:visible;
  pointer-events:auto; transform:none; background:transparent; backdrop-filter:none;
}
.design-cad-toolbar{
  position:static; z-index:auto; grid-column:1/-1; grid-row:2; align-self:center;
  width:100%; max-width:none; min-width:0; transform:none;
  height:38px; display:flex; align-items:center; justify-content:flex-start;
  padding:3px 2px; overflow-x:auto; scrollbar-width:none;
  border:0; border-radius:0;
  background:transparent; box-shadow:none; backdrop-filter:none;
}
.design-cad-toolbar::-webkit-scrollbar{ display:none; }
.design-cad-toolbar__group{ display:flex; align-items:center; gap:4px; flex:0 0 auto; min-width:0; }
.design-cad-toolbar__group + .design-cad-toolbar__group{
  margin-left:5px; padding-left:6px; border-left:1px solid color-mix(in srgb,var(--line) 82%,transparent);
}
.design-cad-tool{
  position:relative; width:32px; min-width:32px; height:32px; flex:0 0 32px;
  padding:0; display:grid; place-items:center; border:1px solid transparent; border-radius:9px;
  color:var(--icon-muted); background:color-mix(in srgb,var(--control-surface) 48%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line-soft) 62%,transparent);
  transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.design-cad-tool svg{
  width:18px; height:18px; flex:0 0 18px; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}
.design-cad-tool:hover:not(:disabled),.design-cad-tool:focus-visible:not(:disabled){
  transform:translateY(-1px); background:var(--control-surface); color:var(--ink);
  border-color:var(--line); box-shadow:var(--shadow-sm); outline:0;
}
.design-cad-tool:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.design-cad-tool[data-active="true"]{
  background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  color:var(--accent-ink); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
}
.design-cad-tool[data-cad-action="extrude"]{
  color:var(--accent-ink); background:color-mix(in srgb,var(--accent-soft) 76%,var(--control-surface));
  border-color:color-mix(in srgb,var(--accent) 26%,var(--line-soft));
}
.design-cad-tool[data-cad-action="extrude"] svg{ width:19px; height:19px; flex-basis:19px; }
.design-cad-tool:disabled{
  color:color-mix(in srgb,var(--icon-muted) 54%,transparent); background:transparent;
  border-color:transparent; box-shadow:none; opacity:1; cursor:not-allowed;
}
.design-cad-tool[data-cad-action="extrude"]:disabled{
  color:color-mix(in srgb,var(--accent-ink) 58%,var(--icon-disabled));
  background:color-mix(in srgb,var(--accent-soft) 55%,transparent);
  border-color:color-mix(in srgb,var(--accent) 18%,var(--line-soft));
}

.design-layers-panel{
  position:absolute; z-index:13; left:var(--design-layers-left,12px); bottom:34px;
  width:var(--design-layers-width,232px); height:var(--design-layers-height,auto); display:none;
  min-width:220px; min-height:0; max-width:calc(100% - 20px); max-height:calc(100% - 42px);
  overflow:hidden; border:1px solid var(--line); border-radius:10px;
  background:var(--glass-surface); box-shadow:var(--shadow-md);
  backdrop-filter:blur(14px);
}
.design-workspace[data-has-design-content="true"] .design-layers-panel{ display:block; }
.design-layers-panel__head{
  height:38px; padding:0 12px; display:flex; align-items:center; gap:9px;
  border-bottom:1px solid var(--line-soft); color:var(--ink);
  font:750 12px/1 var(--font); letter-spacing:.09em; text-transform:uppercase;
}
.design-layers-panel__head > svg{ width:18px; height:18px; flex:0 0 18px; color:var(--icon-muted); }
.design-layers-panel__head strong{ font:inherit; }
.design-layers-panel__head [data-layer-count]{ margin-left:auto; color:var(--faint); font-size:12px; }
.design-layers-panel__toggle{
  width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:7px; background:var(--glass-surface-strong);
  color:var(--dim); box-shadow:var(--shadow-sm); transition:background .14s,color .14s,border-color .14s,transform .14s;
}
.design-layers-panel__toggle:hover,.design-layers-panel__toggle:focus-visible{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); outline:0;
}
.design-layers-panel__toggle:active{ transform:scale(.9); }
.design-layers-panel__toggle svg{ width:14px; height:14px; pointer-events:none; }
.design-layers-panel__list{ padding:6px; display:grid; align-content:start; gap:2px; max-height:218px; overflow:auto; }
.design-layers-panel[data-layers-resized="true"] .design-layers-panel__list{
  height:calc(100% - 38px); max-height:none;
}
.design-layers-panel[data-layers-panel-state="expanded"]{
  height:calc(100% - 82px) !important; max-height:none;
}
.design-layers-panel[data-layers-panel-state="expanded"] .design-layers-panel__list{
  height:calc(100% - 38px); max-height:none;
}
.design-layers-panel[data-layers-panel-state="minimized"]{
  width:158px !important; height:38px !important; min-width:0; max-width:none;
  border-radius:999px;
}
.design-layers-panel[data-layers-panel-state="minimized"] .design-layers-panel__head{
  border-bottom:0; border-radius:999px; cursor:pointer;
}
.design-layers-panel[data-layers-panel-state="minimized"] .design-layers-panel__list,
.design-layers-panel[data-layers-panel-state="minimized"] .design-layers-panel__resize,
.design-layers-panel[data-layers-panel-state="expanded"] .design-layers-panel__resize{ display:none; }
.design-layer-row{
  width:100%; min-height:35px; padding:5px 7px; display:grid;
  grid-template-columns:28px 24px minmax(0,1fr) 26px; align-items:center; gap:5px;
  border-radius:7px; color:var(--dim); text-align:left; font:600 12px/1.2 var(--font);
}
.design-layer-row:hover,.design-layer-row:focus-visible{ background:var(--slot); color:var(--ink); outline:0; }
.design-layer-row[data-feature-hovered="true"]{ background:var(--accent-soft); color:var(--accent-ink); }
.design-layer-row[data-selected="true"]{ background:var(--accent-soft); color:var(--accent-ink); }
.design-layer-row[data-provisional="true"]{
  border:1px dashed color-mix(in srgb,var(--cad-accent) 42%,var(--line));
  color:var(--cad-accent); cursor:default;
}
.design-layer-row[data-provisional="true"] .design-layer-row__step{ color:var(--cad-accent); }
.design-layer-row[data-provisional="true"] .design-layer-row__remove,
.design-layer-row[data-provisional="true"] .design-layer-row__eye{ display:none; }
.design-layer-row__eye{
  width:26px; height:26px; display:grid; place-items:center; border-radius:6px; color:var(--faint);
}
.design-layer-row__eye:hover{ background:var(--surface-hover); color:var(--ink); }
.design-layer-row__eye svg{ width:17px; height:17px; }
.design-layer-row[data-visible="false"] .design-layer-row__eye svg{ opacity:.34; }
.design-layer-row[data-visible="false"] .design-layer-row__name{ opacity:.48; text-decoration:line-through; }
.design-layer-row__step{
  width:26px; color:var(--faint); font:650 12px/1 var(--font); text-align:center;
  font-variant-numeric:tabular-nums;
}
.design-layer-row__history-control{ position:relative; width:26px; height:26px; display:grid; place-items:center; }
.design-layer-row__history-control .design-layer-row__step,
.design-layer-row__history-control .design-layer-row__eye{ position:absolute; inset:0; transition:opacity .14s ease; }
.design-layer-row__history-control .design-layer-row__eye{ opacity:0; pointer-events:none; }
.design-layer-row.is-history:is(:hover,:focus-within) .design-layer-row__history-control .design-layer-row__step,
.design-layer-row.is-history[data-visible="false"] .design-layer-row__history-control .design-layer-row__step{ opacity:0; }
.design-layer-row.is-history:is(:hover,:focus-within) .design-layer-row__history-control .design-layer-row__eye,
.design-layer-row.is-history[data-visible="false"] .design-layer-row__history-control .design-layer-row__eye{
  opacity:1; pointer-events:auto;
}
.design-layer-row.is-history{ color:var(--dim); }
.design-layer-row.is-history .design-layer-row__glyph{ color:var(--icon-muted); }
.design-layer-row__glyph{ width:21px; height:21px; display:grid; place-items:center; color:var(--cad-accent); }
.design-layer-row__glyph svg{ width:19px; height:19px; }
.design-layer-row__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.design-layer-row__remove{
  width:26px; height:26px; display:grid; place-items:center; border-radius:6px;
  color:var(--faint); opacity:0; pointer-events:none; transition:opacity .14s ease,color .14s ease,background .14s ease;
}
.design-layer-row:is(:hover,:focus-within) .design-layer-row__remove{
  opacity:1; pointer-events:auto;
}
.design-layer-row__remove:hover,.design-layer-row__remove:focus-visible{
  color:var(--danger); background:var(--danger-soft); outline:0;
}
.design-layer-row__remove svg{ width:16px; height:16px; }

.design-layers-panel__resize{
  position:absolute; z-index:246; display:block; margin:0; padding:0; border:0; background:transparent;
  touch-action:none; outline:0; opacity:0;
}
.design-layers-panel__resize--top{ top:0; left:16px; right:16px; height:10px; cursor:n-resize; }
.design-layers-panel__resize--left{ top:16px; bottom:0; left:0; width:12px; cursor:ew-resize; }
.design-layers-panel__resize--right{ top:16px; right:0; bottom:0; width:12px; cursor:ew-resize; }
.design-layers-panel__resize--top-left{ top:0; left:0; width:16px; height:16px; cursor:nwse-resize; }
.design-layers-panel__resize--top-right{ top:0; right:0; width:16px; height:16px; cursor:nesw-resize; }
.design-layers-panel__resize:is(:hover,:focus-visible),
.design-layers-panel[data-layers-resizing] .design-layers-panel__resize{ opacity:0; }
.design-layers-panel__resize:focus-visible{ filter:none; }
body[data-design-layers-resize="top"]{ cursor:n-resize; user-select:none; }
body[data-design-layers-resize="left"],
body[data-design-layers-resize="right"]{ cursor:ew-resize; user-select:none; }
body[data-design-layers-resize="top-left"]{ cursor:nwse-resize; user-select:none; }
body[data-design-layers-resize="top-right"]{ cursor:nesw-resize; user-select:none; }

@keyframes fusion-pulse{ to{ transform:scale(1.45); opacity:.55; } }

/* Design owns one full-width CAD floor. The drawing engine is a transparent
   canvas over that floor instead of a separate sketch pane. */
.design-workspace{
  position:absolute; inset:0; z-index:0;
  display:block;
  background:var(--surface);
}
.design-workspace::before{
  content:''; position:absolute; z-index:19; left:0; right:0; top:0; height:40px;
  pointer-events:none; border-bottom:1px solid var(--line);
  background:var(--glass-surface-strong); backdrop-filter:blur(14px);
}
.design-workspace::after{ display:none; }
.design-workspace__pane:not([data-popped="true"]) > .design-pane__chrome{
  border-bottom:0; background:transparent; backdrop-filter:none;
}
.design-workspace__pane{ position:relative; min-width:0; min-height:0; overflow:hidden; }
.design-workspace__model{
  position:absolute; inset:0; border-right:0;
  container-type:inline-size; container-name:design-toolbar-pane;
}
.design-workspace__model > .designgrid{ top:40px; height:calc(100% - 40px); }
.design-workspace__model > .sketchpad__canvas{
  top:40px; height:calc(100% - 40px);
  z-index:4; background:transparent;
}
.design-workspace__model > .sketchpad__axis-grid{ display:none; }
.design-workspace__sketch,
.design-workspace__splitter,
.design-corner-resize{ display:none !important; }
.design-split-viewport{ position:relative; min-width:0; min-height:0; display:none;
  overflow:hidden; background:var(--surface); }
.design-split-viewport[hidden]{ display:none!important; }
.design-workspace[data-canvas-layout]:not([data-canvas-layout="single"]){
  display:grid; grid-template-rows:minmax(0,1fr); gap:1px; padding-top:40px;
  background:var(--line);
}
.design-workspace[data-canvas-layout="two-columns"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.design-workspace[data-canvas-layout="three-columns"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.design-workspace[data-canvas-layout="focus-rail"]{ grid-template-columns:minmax(0,2.15fr) minmax(240px,.85fr); }
.design-workspace[data-canvas-layout]:not([data-canvas-layout="single"]) > .design-workspace__model{
  position:relative; inset:auto; grid-column:1; grid-row:1; width:auto; height:auto; overflow:visible;
}
.design-workspace[data-canvas-layout]:not([data-canvas-layout="single"]) > .design-workspace__model > .designgrid,
.design-workspace[data-canvas-layout]:not([data-canvas-layout="single"]) > .design-workspace__model > .sketchpad__canvas{
  top:0; height:100%;
}
.design-workspace[data-canvas-layout]:not([data-canvas-layout="single"]) > .design-workspace__model > .design-pane__chrome{
  top:-40px; left:0; right:auto; width:var(--design-split-shell-width,100vw);
}
.design-workspace[data-canvas-layout]:not([data-canvas-layout="single"]) > .design-split-viewport{ display:block; grid-row:1; }
.design-workspace > .design-split-viewport[data-design-view-index="2"]{ grid-column:2; }
.design-workspace > .design-split-viewport[data-design-view-index="3"]{ grid-column:3; }
.design-split-viewport > .sketchpad__axis-grid{ display:none; }
.design-split-viewport > .sketchpad__canvas{ z-index:4; background:transparent; }
.design-split-viewport[data-has-extrudable-sketch="true"]:not([data-model-object]) > .sketchpad__make3d{ display:inline-flex; }
.design-workspace[data-canvas-layout]:not([data-canvas-layout="single"]) > [data-design-view-index]{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 72%,transparent);
}
.design-workspace[data-canvas-layout]:not([data-canvas-layout="single"]) > [data-active-design-view="true"]{
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 72%,transparent);
}
.design-split-viewport__label{
  position:absolute; z-index:18; left:10px; top:10px; display:inline-flex; align-items:center;
  min-height:23px; padding:0 8px; border:1px solid var(--line); border-radius:999px;
  background:var(--glass-surface-strong); color:var(--dim); box-shadow:var(--shadow-sm);
  font:700 12px/1 var(--font); letter-spacing:.05em; text-transform:uppercase;
  pointer-events:none; backdrop-filter:blur(8px);
}
.design-split-viewport__label--primary{ display:none; }
.design-workspace[data-canvas-layout]:not([data-canvas-layout="single"]) .design-split-viewport__label--primary{ display:inline-flex; }
.design-workspace [data-active-design-view="true"] > .design-split-viewport__label{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);
}
body[data-view="design"] .view[data-view="design"] .railwake{ top:40px; }
.design-workspace__splitter{
  position:absolute; z-index:9; top:40px; bottom:0; left:var(--design-split);
  width:13px; transform:translateX(-50%); cursor:col-resize; touch-action:none;
  outline:0;
}
.design-workspace__splitter::after{
  content:''; position:absolute; top:0; bottom:0; left:6px; width:1px;
  background:var(--line); transition:width .14s ease,background .14s ease,box-shadow .14s ease;
}
.design-workspace__splitter:is(:hover,:focus-visible,[data-active="true"])::after{
  width:2px; background:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);
}
.design-corner-resize{
  position:absolute; z-index:12; bottom:5px; width:24px; height:24px;
  border-radius:6px; outline:0; touch-action:none; opacity:.34;
  transition:opacity .14s ease,background .14s ease,box-shadow .14s ease;
}
.design-corner-resize--model{ right:5px; cursor:nwse-resize; }
.design-corner-resize--sketch{ left:5px; cursor:nesw-resize; }
.design-corner-resize::after{
  content:''; position:absolute; bottom:5px; width:10px; height:10px;
  border-bottom:2px solid var(--dim);
}
.design-corner-resize--model::after{ right:5px; border-right:2px solid var(--dim); }
.design-corner-resize--sketch::after{ left:5px; border-left:2px solid var(--dim); }
.design-workspace__pane:hover .design-corner-resize,
.design-corner-resize:is(:hover,:focus-visible,[data-active="true"]){
  opacity:1; background:var(--glass-surface-soft); box-shadow:0 0 0 1px var(--line),var(--shadow-sm);
}
.design-corner-resize:is(:hover,:focus-visible,[data-active="true"])::after{
  border-color:var(--accent);
}
.design-workspace[data-expanded-pane] .design-workspace__splitter,
.design-workspace[data-expanded-pane] .design-corner-resize{ display:none; }
body[data-design-corner-resize="model"]{ cursor:nwse-resize; user-select:none; }
body[data-design-corner-resize="sketch"]{ cursor:nesw-resize; user-select:none; }
.design-workspace__sketch:has(.design-corner-resize) .sketchpad__hint{ left:34px; }
.design-workspace__sketch{
  background-color:var(--surface);
}
.sketchpad__axis-grid,
.sketchpad__canvas{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block;
  cursor:crosshair; touch-action:none;
}
.sketchpad__axis-grid{ z-index:0; pointer-events:none; cursor:default; }
.sketchpad__canvas[data-drawing-enabled="false"]{ cursor:default; }
.sketchpad__canvas[data-drawing-enabled="false"]:not([data-tool="select"]){ pointer-events:none; }
.design-workspace__model:not([data-has-sketch])
  > .sketchpad__canvas[data-drawing-enabled="false"]{ pointer-events:none; }
.design-workspace__model[data-has-sketch][data-sketch-visible="true"]
  > .sketchpad__canvas[data-drawing-enabled="false"]{ pointer-events:auto; }
.design-workspace__model[data-sketch-3d="true"]
  > .sketchpad__canvas[data-drawing-enabled="false"]:not([data-tool="select"]){ pointer-events:none !important; }
.sketchpad__canvas[data-drawing-enabled="true"][data-grid-target="false"]{ cursor:not-allowed; }
.sketchpad__canvas[data-drawing-enabled="true"][data-grid-target="true"]{ cursor:crosshair; }
.design-workspace__model[data-grid-orienting-for-drawing="true"] .sketchpad__canvas{ cursor:progress; }
.design-workspace__model[data-right-orbit="true"] :is(.designgrid,.sketchpad__canvas){ cursor:grabbing !important; }
.design-workspace__model[data-middle-pan="true"] :is(.designgrid,.sketchpad__canvas){ cursor:grabbing !important; }
.sketchpad__canvas[data-tool="erase"][data-drawing-enabled="true"]{ cursor:cell; }
.sketchpad__canvas[data-tool="ruler"][data-drawing-enabled="true"]{ cursor:crosshair; }
.sketchpad__text-editor{
  position:absolute; z-index:24; min-width:110px; min-height:40px; max-width:calc(100% - 16px);
  padding:8px 9px; resize:none; overflow:auto; border:1px solid var(--accent);
  border-radius:9px; outline:0; background:var(--glass-surface-strong); color:var(--ink);
  box-shadow:0 10px 30px rgba(22,31,48,.16),0 0 0 3px var(--accent-soft);
  font-family:var(--font); line-height:1.28;
}
.sketchpad__text-editor[data-text-kind="note"]{ background:color-mix(in srgb,var(--surface) 94%,transparent); }
.design-sticky-note{
  position:absolute; z-index:30; display:grid; grid-template-rows:38px minmax(0,1fr);
  min-width:180px; min-height:150px; overflow:hidden; isolation:isolate;
  border:1px solid color-mix(in srgb,var(--sticky-ink) 23%,transparent); border-radius:4px 4px 12px 4px;
  background:var(--sticky-note)!important; color:var(--sticky-ink);
  box-shadow:0 18px 38px rgba(30,36,46,.18),0 3px 8px rgba(30,36,46,.12);
  font-family:var(--font); pointer-events:auto; touch-action:none;
}
.design-sticky-note::after{
  content:''; position:absolute; pointer-events:none; inset:38px 0 0;
  background:linear-gradient(140deg,rgba(255,255,255,.22),transparent 42%,rgba(79,63,28,.04));
  mix-blend-mode:soft-light;
}
.design-sticky-note:is([data-dragging="true"],[data-resizing="true"]){
  box-shadow:0 24px 52px rgba(30,36,46,.24),0 5px 12px rgba(30,36,46,.14);
}
.design-sticky-note__header{
  position:relative; z-index:2; min-width:0; display:grid; grid-template-columns:25px minmax(0,1fr) 30px;
  align-items:center; gap:4px; padding:4px 4px 4px 7px;
  background:var(--sticky-head)!important; color:var(--sticky-ink); cursor:grab; user-select:none;
  border-bottom:1px solid color-mix(in srgb,var(--sticky-ink) 13%,transparent);
}
.design-sticky-note[data-dragging="true"] .design-sticky-note__header{ cursor:grabbing; }
.design-sticky-note__grip{ display:flex; align-items:center; justify-content:center; gap:2px; height:24px; opacity:.48; }
.design-sticky-note__grip i{ width:3px; height:3px; border-radius:50%; background:currentColor; }
.design-sticky-note__title{
  min-width:0; width:100%; height:28px; padding:0 6px; border:1px solid transparent; border-radius:6px;
  outline:0; background:transparent; color:inherit; font:750 13px/1.15 var(--font); text-overflow:ellipsis;
}
.design-sticky-note__title:is(:hover,:focus){
  border-color:color-mix(in srgb,var(--sticky-ink) 20%,transparent);
  background:rgba(255,255,255,.2);
}
.design-sticky-note__close{
  width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:7px;
  background:transparent; color:inherit; opacity:.58; cursor:pointer;
}
.design-sticky-note__close:is(:hover,:focus-visible){ opacity:1; background:rgba(255,255,255,.27); outline:0; }
.design-sticky-note__close svg{ width:17px; height:17px; }
.design-sticky-note__body{
  position:relative; z-index:1; min-width:0; min-height:0; overflow:auto; padding:14px 15px 25px;
  outline:0; color:inherit; font:550 14px/1.45 var(--font); white-space:pre-wrap; overflow-wrap:anywhere;
  cursor:text; user-select:text; touch-action:auto;
}
.design-sticky-note__body:empty::before{ content:attr(data-placeholder); color:color-mix(in srgb,var(--sticky-ink) 48%,transparent); pointer-events:none; }
.design-sticky-note__resize{
  position:absolute; z-index:4; right:0; bottom:0; width:30px; height:30px; display:grid;
  place-content:end; gap:2px; padding:0 5px 5px 0; cursor:nwse-resize; touch-action:none; outline:0;
}
.design-sticky-note__resize i{
  display:block; justify-self:end; height:1px; background:currentColor; opacity:.36; transform:rotate(-45deg);
  transform-origin:right center;
}
.design-sticky-note__resize i:nth-child(1){ width:5px; }
.design-sticky-note__resize i:nth-child(2){ width:9px; }
.design-sticky-note__resize i:nth-child(3){ width:13px; }
.design-sticky-note__resize:is(:hover,:focus-visible) i{ opacity:.8; }
body:is([data-design-sticky-drag="true"],[data-design-sticky-resize="true"]){ user-select:none; }
.design-combined-toolbar #imgSub{ display:none; }
.design-image-source-menu{
  position:absolute; z-index:45; width:236px; padding:6px; display:grid; gap:3px;
  border:1px solid var(--line); border-radius:12px; background:var(--glass-surface-strong);
  box-shadow:var(--shadow-lg); backdrop-filter:blur(18px) saturate(1.12);
}
.design-image-source-menu[hidden]{ display:none; }
.design-image-source-menu button{
  min-width:0; display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto;
  column-gap:8px; align-items:center; padding:7px 8px; border-radius:8px; text-align:left;
}
.design-image-source-menu button:hover,.design-image-source-menu button:focus-visible{
  background:var(--slot); outline:0;
}
.design-image-source-menu button > span{
  grid-row:1 / 3; width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--line-soft); border-radius:8px; background:var(--surface);
  color:var(--ink); font:650 12px/1 var(--font);
}
.design-image-source-menu button > b{ color:var(--ink); font:650 12px/1.2 var(--font); }
.design-image-source-menu button > small{ color:var(--faint); font:500 12px/1.2 var(--font); }
.design-media-palette{
  position:absolute; z-index:45; width:214px; padding:10px; border:1px solid var(--line);
  border-radius:12px; background:var(--glass-surface-strong); box-shadow:var(--shadow-lg);
  backdrop-filter:blur(18px) saturate(1.12);
}
.design-media-palette[hidden]{ display:none; }
.design-media-palette strong{
  display:block; margin:0 0 8px 2px; color:var(--dim); font:650 12px/1 var(--font);
  letter-spacing:.08em; text-transform:uppercase;
}
.design-media-palette > div{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.design-media-palette button{
  width:28px; height:28px; display:grid; place-items:center; border-radius:7px;
  font-size:17px; transition:background .13s,transform .13s;
}
.design-media-palette button:hover,.design-media-palette button:focus-visible{
  background:var(--slot); outline:0; transform:scale(1.08);
}
/* The drawing deck is part of the continuous Design header instead of
   hovering over the sketch canvas. It occupies the right half of the second
   row, so the divider beneath the titles runs cleanly to the panel edge. */
.design-workspace__sketch .design-pane__chrome > .toptools{
  position:static; z-index:auto; grid-column:1/-1; grid-row:2; align-self:center;
  width:100%; max-width:none; height:35px; padding:3px 0 4px; gap:4px;
  transform:none; opacity:1; visibility:visible; pointer-events:auto;
  overflow:hidden;
}
.design-workspace__sketch .design-pane__chrome > .toptools .ttools{
  flex:1 1 auto; height:27px; padding:0 2px;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
.design-workspace__sketch .design-pane__chrome > .toptools .rail__arrow{
  width:27px; height:27px; flex:0 0 27px; border:0; border-radius:7px;
  background:transparent; box-shadow:none;
}
.design-workspace__sketch .design-pane__chrome > .toptools .rail__arrow:hover{
  background:var(--slot); color:var(--ink);
}
.design-combined-toolbar{
  position:static; z-index:auto; grid-column:2; grid-row:1; align-self:center;
  width:100%; min-width:0; height:39px; display:flex; align-items:center;
  gap:5px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.design-combined-toolbar::-webkit-scrollbar{ height:3px; }
.design-combined-toolbar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.design-combined-toolbar > .design-cad-toolbar{
  flex:0 0 auto; width:max-content; max-width:none; height:39px; padding:3px 0 4px 7px;
  overflow:visible; border-left:1px solid var(--line-soft);
}
.design-combined-toolbar > .toptools{
  position:static; z-index:auto; flex:1 0 300px; min-width:0; max-width:none;
  height:39px; padding:2px 0; gap:4px; transform:none; opacity:1;
  visibility:visible; pointer-events:auto; overflow:hidden;
}
.design-combined-toolbar > .design-toolbar-upload{
  flex:0 0 auto; width:auto; height:27px; margin-left:0; margin-right:1px;
  padding:0 9px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line-soft); border-radius:7px; color:var(--accent-ink); background:var(--accent-soft);
  font:650 12px/1 var(--font); white-space:nowrap;
}
.design-combined-toolbar > .design-toolbar-upload:hover{ color:var(--accent-ink); background:var(--slot); }
.design-toolbar-upload__label{ display:block; }
.design-toolbar-existing{
  flex:0 0 auto; width:auto; height:27px; margin-left:auto; padding:0 9px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--control-surface);
  box-shadow:var(--shadow-xs); font:650 12px/1 var(--font); white-space:nowrap;
  transition:transform .14s ease,border-color .14s ease,background-color .14s ease,color .14s ease;
}
.design-toolbar-existing svg{ width:15px; height:15px; flex:0 0 15px; }
.design-toolbar-existing:hover,.design-toolbar-existing:focus-visible{
  color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  background:var(--accent-soft); outline:0; transform:translateY(-1px);
}
.design-toolbar-existing[aria-expanded="true"]{ color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft); }
.design-combined-toolbar > .toptools .ttools{
  flex:1 1 auto; height:35px; padding:0 2px;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.design-combined-toolbar > .toptools .ttools::-webkit-scrollbar{ display:block; height:3px; }
.design-combined-toolbar > .toptools .ttools::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.design-combined-toolbar > .toptools .tsub{ flex:0 0 auto; }
.design-combined-toolbar > .toptools .tsub--draw:not(.text-tool-panel)[data-open="true"]{ max-width:270px; }
.design-combined-toolbar > .toptools .rail__arrow{
  width:auto; min-width:52px; height:27px; flex:0 0 auto; padding:0 9px;
  display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px;
  background:transparent; box-shadow:none; font:650 12px/1 var(--font); letter-spacing:0;
}
.design-combined-toolbar > .toptools .rail__arrow:hover{ background:var(--slot); color:var(--ink); }
.rail__history-label{ display:block; white-space:nowrap; }
.rail__history-icon{ display:none; }

/* Reserve space for the actual drawing tools before long import/history
   labels. A narrow Design pane scrolls its tools instead of crushing them. */
@container design-toolbar-pane (max-width:1500px){
  .design-pane__chrome{ grid-template-columns:minmax(140px,170px) minmax(0,1fr) auto; }
  .design-combined-toolbar > :is(.design-toolbar-existing,.design-toolbar-upload){ width:30px; padding:0; }
  .design-toolbar-existing span,.design-toolbar-upload__label{ display:none; }
  .design-combined-toolbar > .toptools .rail__history{
    width:30px; min-width:30px; flex:0 0 30px; padding:0;
  }
  .design-combined-toolbar .rail__history-label{ display:none; }
  .design-combined-toolbar .rail__history-icon{ display:block; }
}
@container design-toolbar-pane (max-width:800px){
  .design-pane__chrome{ grid-template-columns:110px minmax(0,1fr) auto; }
}

.design-object-library{
  position:absolute; z-index:80; inset:40px 0 0; display:grid; place-items:center;
  padding:18px; background:color-mix(in srgb,var(--ink) 26%,transparent); backdrop-filter:blur(7px);
}
.design-object-library[hidden]{ display:none; }
.design-object-library__dialog{
  width:min(940px,calc(100vw - 48px)); max-width:100%; height:min(670px,calc(100vh - 104px)); max-height:100%;
  display:grid; grid-template-rows:auto auto auto minmax(0,1fr); overflow:hidden;
  border:1px solid var(--line); border-radius:18px; color:var(--ink); background:var(--surface);
  box-shadow:0 26px 80px rgba(15,23,42,.3),0 2px 10px rgba(15,23,42,.16);
}
.design-object-library__head{
  min-width:0; padding:20px 22px 16px; display:grid; grid-template-columns:42px minmax(0,1fr) 34px; gap:12px; align-items:start;
  border-bottom:1px solid var(--line-soft); background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent-soft) 44%,var(--surface)));
}
.design-object-library__mark{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--accent-ink); background:var(--accent-soft); }
.design-object-library__mark svg{ width:23px; height:23px; }
.design-object-library__head small{ display:block; margin:1px 0 5px; color:var(--accent-ink); font:700 12px/1 var(--mono); letter-spacing:.11em; }
.design-object-library__head h2{ margin:0; font-size:20px; line-height:1.12; letter-spacing:-.02em; }
.design-object-library__head p{ margin:6px 0 0; color:var(--dim); font-size:12.5px; line-height:1.35; }
.design-object-library__close{
  width:32px; height:32px; padding:0; display:grid; place-items:center; border:0; border-radius:9px;
  color:var(--dim); background:transparent; font:400 22px/1 var(--font);
}
.design-object-library__close:hover,.design-object-library__close:focus-visible{ color:var(--ink); background:var(--slot); outline:0; }
.design-object-library__tools{ padding:14px 22px 10px; display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:10px; }
.design-object-library__tools label{ min-width:0; display:grid; gap:5px; color:var(--dim); font:650 12px/1 var(--font); }
.design-object-library__tools :is(input,select){
  width:100%; height:38px; min-width:0; padding:0 11px; border:1px solid var(--line); border-radius:9px;
  color:var(--ink); background:var(--control-surface); font:500 13px/1 var(--font); outline:0;
}
.design-object-library__tools :is(input,select):focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
.design-object-library__status{ min-height:24px; margin:0; padding:0 22px 9px; color:var(--dim); font:600 12px/1.2 var(--font); }
.design-object-library__grid{
  min-height:0; padding:0 22px 22px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px;
  align-content:start; overflow:auto; scrollbar-gutter:stable;
}
.design-object-card{
  min-width:0; display:grid; grid-template-columns:72px minmax(0,1fr); grid-template-rows:minmax(72px,auto) 34px; gap:10px;
  padding:10px; border:1px solid var(--line-soft); border-radius:13px; background:var(--panel);
  box-shadow:0 4px 13px rgba(15,23,42,.045); transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.design-object-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); box-shadow:var(--shadow-md); }
.design-object-card__preview{
  position:relative; grid-row:1; width:72px; min-height:72px; display:grid; place-items:center; overflow:hidden;
  border:1px solid color-mix(in srgb,hsl(var(--catalog-hue) 68% 52%) 18%,var(--line-soft)); border-radius:10px;
  color:hsl(var(--catalog-hue) 65% 42%); background:radial-gradient(circle at 35% 28%,hsl(var(--catalog-hue) 78% 94%),var(--slot));
}
.design-object-card__preview::after{ content:""; position:absolute; left:12px; right:12px; bottom:10px; height:8px; border-radius:50%; background:rgba(15,23,42,.12); filter:blur(5px); }
.design-object-card__preview img{
  position:absolute; z-index:1; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:contain;
  opacity:0; transform:scale(.9); filter:drop-shadow(0 7px 5px rgba(15,23,42,.2));
  transition:opacity .22s ease,transform .3s cubic-bezier(.22,.9,.24,1);
}
.design-object-card__preview[data-preview-state="ready"] img{ opacity:1; transform:scale(1); }
.design-object-card__preview-status{
  position:relative; z-index:1; width:22px; height:22px; border:2px solid color-mix(in srgb,currentColor 24%,transparent);
  border-top-color:currentColor; border-radius:50%; animation:designObjectPreviewSpin .8s linear infinite;
}
.design-object-card__preview[data-preview-state="ready"] .design-object-card__preview-status{ display:none; }
.design-object-card__preview[data-preview-state="error"] .design-object-card__preview-status{
  width:8px; height:8px; border:0; background:currentColor; animation:none;
}
@keyframes designObjectPreviewSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .design-object-card__preview-status{ animation:none; } }
.design-object-card__copy{ min-width:0; display:grid; align-content:center; gap:5px; }
.design-object-card__copy small{ overflow:hidden; color:var(--accent-ink); font:700 12px/1 var(--mono); letter-spacing:.06em; text-overflow:ellipsis; white-space:nowrap; }
.design-object-card__copy strong{ display:-webkit-box; overflow:hidden; font-size:13px; line-height:1.2; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.design-object-card__copy > span{ overflow:hidden; color:var(--dim); font:500 12px/1.2 var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.design-object-card > button{
  grid-column:1/-1; width:100%; height:34px; padding:0 10px; border:1px solid var(--line); border-radius:8px;
  color:var(--ink); background:var(--control-surface); font:700 12px/1 var(--font);
}
.design-object-card > button:hover,.design-object-card > button:focus-visible{ color:#fff; border-color:var(--accent); background:var(--accent); outline:0; }
.design-object-card > button[data-loading="true"]{ color:var(--accent-ink); background:var(--accent-soft); cursor:wait; }
.design-object-card > button[data-loading="true"]::after{ content:" …"; }
.design-object-library__empty{ grid-column:1/-1; margin:30px 0; color:var(--dim); text-align:center; }
@media (max-width:1050px){
  .design-toolbar-existing span,.design-toolbar-upload__label{ display:none; }
  .design-combined-toolbar > :is(.design-toolbar-existing,.design-toolbar-upload){ width:30px; padding:0; }
  .design-object-library__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
  .design-object-library{ padding:8px; }
  .design-object-library__dialog{ width:100%; height:100%; border-radius:12px; }
  .design-object-library__tools{ grid-template-columns:1fr; }
  .design-object-library__grid{ grid-template-columns:1fr; }
}
.sketchpad__head{
  position:absolute; z-index:3; left:12px; right:148px; top:11px;
  display:flex; align-items:center; gap:8px; min-width:0; pointer-events:none;
  color:var(--dim); font:650 12px/1 var(--font); letter-spacing:.11em;
  text-transform:uppercase;
}
.sketchpad__title{
  pointer-events:auto; flex:1 1 auto; width:auto; min-width:0; max-width:none; height:22px;
  margin:-5px 5px -5px -5px; padding:0 5px; border:1px solid transparent; border-radius:5px;
  outline:0; background:transparent; color:inherit;
  font:inherit; letter-spacing:inherit; text-transform:uppercase;
  text-overflow:ellipsis; transition:background .15s,border-color .15s,color .15s;
}
.sketchpad__title:hover{ background:var(--glass-surface-soft); border-color:var(--line-soft); color:var(--ink); }
.sketchpad__title:focus{
  background:var(--control-surface); border-color:var(--accent); color:var(--ink);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.sketchpad__mode{ color:var(--faint); letter-spacing:.08em; }
.sketchpad__hint{
  position:absolute; z-index:2; left:12px; bottom:11px; pointer-events:none;
  color:var(--faint); font:600 12px/1 var(--font); letter-spacing:.09em;
  text-transform:uppercase;
}
.design-workspace__model > .sketchpad__hint{ left:auto; right:12px; }
.sketchpad__make3d{
  position:absolute; z-index:13; right:11px; top:62px;
  display:none; align-items:center; gap:7px; padding:8px 13px;
  border:1px solid rgba(255,255,255,.42); border-radius:999px;
  background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 52%,#7c3aed 100%); color:#fff;
  box-shadow:0 9px 24px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.24);
  font:700 12px/1 var(--font); letter-spacing:.02em;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.design-workspace__model[data-has-extrudable-sketch="true"]:not([data-model-object]) .sketchpad__make3d,
.design-workspace__sketch[data-has-extrudable-sketch="true"]:not([data-model-object]) .sketchpad__make3d{ display:inline-flex; }
.design-workspace__model > .sketchpad__make3d{ right:72px; }
.sketchpad__make3d:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#38bdf8 0%,#3b82f6 50%,#8b5cf6 100%);
  box-shadow:0 12px 30px rgba(37,99,235,.36),inset 0 1px 0 rgba(255,255,255,.3);
}
.sketchpad__make3d:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sketchpad__make3d svg{ width:15px; height:15px; }
.design-workspace__sketch > .sketchpad__viewcube{
  position:absolute; z-index:16; right:72px; bottom:11px;
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px;
  background:var(--glass-surface-strong); color:var(--dim);
  box-shadow:var(--shadow-md); outline:0;
  transition:transform .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,background .16s ease;
}
.sketchpad__viewcube:hover,.sketchpad__viewcube:focus-visible{
  transform:translateY(-2px); border-color:var(--accent); color:var(--ink);
  box-shadow:0 11px 27px color-mix(in srgb,var(--accent) 20%,transparent);
}
.sketchpad__viewcube[aria-pressed="true"]{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);
  box-shadow:0 0 0 2px var(--accent-soft),var(--shadow-md);
}
.sketchpad__viewcube svg{ width:29px; height:29px; display:block; overflow:visible; }
.sketchpad__viewcube .sketchpad__viewcube-cube{
  transform-origin:16px 15px;
}
.sketchpad__viewcube[aria-pressed="true"] .sketchpad__viewcube-cube{
  animation:sketch-viewcube-orbit 2.1s linear infinite;
}
@keyframes sketch-viewcube-orbit{
  0%{ transform:rotate(-8deg) scale(.96); }
  50%{ transform:rotate(172deg) scale(1.04); }
  100%{ transform:rotate(352deg) scale(.96); }
}
@media (prefers-reduced-motion:reduce){
  .sketchpad__viewcube[aria-pressed="true"] .sketchpad__viewcube-cube{ animation-duration:6s; }
}
.design-pane__controls{
  position:absolute; z-index:6; right:12px; top:9px;
  display:flex; align-items:center; gap:4px; padding:3px;
  border:0; border-radius:11px; background:var(--glass-surface-soft); box-shadow:none;
  backdrop-filter:blur(8px); opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-3px);
  transition:opacity .15s ease,visibility .15s ease,transform .18s cubic-bezier(.16,1,.3,1);
}
.design-pane__controls[data-merged-hidden="true"]{ display:none!important; }
/* A detached or full-width Sketch pane still owns its actions. In the normal
   split view those same actions are routed through the one surviving strip. */
.design-workspace__sketch:is([data-popped="true"],:only-child) .design-pane__controls[data-merged-hidden="true"],
.design-workspace[data-expanded-pane="sketch"] .design-workspace__sketch .design-pane__controls[data-merged-hidden="true"]{
  display:flex!important;
}
.design-workspace__pane:is(:hover,:focus-within) .design-pane__controls{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
}
.design-pane__tool{
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  color:var(--icon-muted); transition:background .14s,color .14s;
}
.design-pane__tool:hover{ background:var(--slot); color:var(--ink); }
.design-pane__tool[data-pane-action="remove"]:hover{
  background:var(--danger-soft); color:var(--danger);
}
.design-pane__tool[data-pane-action="back"]{ display:none; }
.design-workspace[data-expanded-pane="model"] .design-workspace__model .design-pane__tool[data-pane-action="expand"],
.design-workspace[data-expanded-pane="sketch"] .design-workspace__sketch .design-pane__tool[data-pane-action="expand"]{
  display:none;
}
.design-workspace[data-expanded-pane="model"] .design-workspace__model .design-pane__tool[data-pane-action="back"],
.design-workspace[data-expanded-pane="sketch"] .design-workspace__sketch .design-pane__tool[data-pane-action="back"]{
  display:grid; color:var(--accent-ink); background:var(--accent-soft);
}
.design-workspace[data-expanded-pane] .design-pane__controls{
  box-shadow:0 0 0 1px var(--line-soft); border-radius:9px;
}
.design-pane__tool[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-ink); }
.design-pane__tool:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.design-pane__tool svg{ width:14px; height:14px; }
.design-pane__input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.design-pane__file{
  position:absolute; z-index:3; right:12px; bottom:11px; max-width:48%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none;
  color:var(--dim); font:600 12px/1 var(--font); letter-spacing:.04em;
}
.design-workspace__sketch .design-pane__file{ right:78px; }
.design-workspace[data-expanded-pane="model"] .design-workspace__model .design-pane__file{ right:78px; }
.design-workspace__sketch[data-grid-visible="false"] .sketchpad__axis-grid{ opacity:0; }
.design-workspace[data-expanded-pane="model"],
.design-workspace[data-expanded-pane="sketch"]{ grid-template-columns:minmax(0,1fr); }
.design-workspace[data-expanded-pane="model"] .design-workspace__sketch,
.design-workspace[data-expanded-pane="sketch"] .design-workspace__model{ display:none; }
.design-workspace[data-expanded-pane] .design-workspace__model{ border-right:0; }

/* Pop-out is separate from expand: the pane becomes a movable, resizable tool
   window while its sibling takes the vacated grid. The same DOM and canvases
   move with the window, so drawings and CAD state never fork into a copy. */
.center-panel:has(.design-workspace[data-popped-pane]),
body[data-view="design"] .view[data-view="design"] .center-panel:has(.design-workspace[data-popped-pane]){ overflow:visible; }
.design-workspace[data-popped-pane]{ z-index:100; grid-template-columns:minmax(0,1fr); }
.design-workspace[data-popped-pane="model"] .design-workspace__sketch,
.design-workspace[data-popped-pane="sketch"] .design-workspace__model{ grid-column:1; }
.design-workspace__pane[data-popped="true"]{
  position:fixed; z-index:122; left:var(--design-pop-left); top:var(--design-pop-top);
  width:var(--design-pop-width); height:var(--design-pop-height); min-width:360px; min-height:240px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.design-workspace__pane[data-popped="true"] > .design-corner-resize{ display:none; }
.design-workspace__pane[data-popped="true"] .design-pane__chrome{
  cursor:move; border-radius:11px 11px 0 0;
}
.design-workspace__pane[data-popped="true"] .design-pane__chrome :is(button,input){ cursor:pointer; }
.design-workspace__pane[data-popped="true"] .design-pane__chrome input{ cursor:text; }
.design-pane__float-resize{
  position:absolute; z-index:30; right:0; bottom:0; width:28px; height:28px;
  display:none; cursor:nwse-resize; touch-action:none; outline:0;
}
.design-workspace__pane[data-popped="true"] .design-pane__float-resize{ display:block; }
.design-pane__float-resize::after{
  content:''; position:absolute; right:6px; bottom:6px; width:10px; height:10px;
  border-right:2px solid var(--dim); border-bottom:2px solid var(--dim);
  transition:border-color .14s,transform .14s;
}
.design-pane__float-resize:is(:hover,:focus-visible,[data-active="true"])::after{
  border-color:var(--accent); transform:translate(-1px,-1px);
}
body[data-design-pane-drag="true"]{ cursor:move; user-select:none; }
body[data-design-pane-float-resize="true"]{ cursor:nwse-resize; user-select:none; }

/* ── the Build view's printer network ──
   Mapbox GL and every overlay below are owned by this layout and its local
   server. No 3Dhive server module is needed to enter Build. */
.layout-build-globe{
  isolation:isolate; background:var(--stage);
}
.layout-build-globe__map,
.layout-build-globe__map.mapboxgl-map{
  position:absolute; inset:0; z-index:0; min-width:0; min-height:0;
}
.layout-build-globe .mapboxgl-ctrl-bottom-left{ z-index:4; }
.layout-build-globe .mapboxgl-ctrl-bottom-right{ z-index:4; }
/* Mapbox GL, its token, and the first tiles all arrive over the network, so
   entering Build cold leaves the stage blank for a beat. This sign owns that
   wait. It sits above the map's own stacking context — the nav and attribution
   controls appear the moment the map object exists, well before the style
   paints — and below the object workbench at z-index 5, so the storefront panel
   keeps its own loading state. The fade-in is delayed so a warm or prewarmed
   globe never flashes it, and 'ready' takes it out of the layer entirely. */
.layout-build-globe__loading{
  position:absolute; inset:0; z-index:1;
  display:grid; align-content:center; justify-items:center; gap:9px;
  padding:24px; text-align:center;
  background-color:var(--stage); background-image:var(--stage-wash);
  animation:build-globe-loading-in .3s ease .25s backwards;
}
.layout-build-globe__loading-title{
  color:var(--ink); font:650 14px/1.2 var(--font); letter-spacing:-.012em;
}
.layout-build-globe__loading-note{
  max-width:34ch; color:var(--dim); font:400 12px/1.4 var(--font);
}
.layout-build-globe[data-build-globe-state="ready"] .layout-build-globe__loading{ display:none; }
.layout-build-globe[data-build-globe-state="error"] .layout-build-globe__loading .hive-loading-animation__motion{
  animation:none !important;
}
.layout-build-globe[data-build-globe-state="error"] .layout-build-globe__loading .hive-loading-animation__bar,
.layout-build-globe[data-build-globe-state="error"] .layout-build-globe__loading .hive-loading-animation__shimmer{ opacity:0; }
.layout-build-globe[data-build-globe-state="error"] .layout-build-globe__loading .hive-loading-animation__wipe{
  opacity:1; transform:none; fill:var(--danger);
}
@keyframes build-globe-loading-in{ from{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .layout-build-globe__loading{ animation-delay:0s; animation-duration:.01ms; }
}
.layout-build-globe[data-build-cart-panel-visible="true"] .mapboxgl-ctrl-bottom-right{
  right:calc(clamp(330px,29vw,400px) + 6px);
  transition:right .2s ease;
}
.build-object-workbench{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  font-family:var(--font); color:var(--ink);
}
/* ══════════════════════════════════════════════════════════════════
   Build's right panel — storefront skin
   ══════════════════════════════════════════════════════════════════
   The panel keeps its live three.js preview pinned at the top, so the David
   still turns up there, and dresses everything under it in the storefront's
   card language: a cream column of flat white cards, pill filters, and a
   purple Print action on every shop row. The palette is panel-scoped rather
   than added to :root so the rest of the shell keeps the shared tokens. */
.build-object-panel{
  --sf-font:var(--font);
  --sf-panel:#fbfaf8; --sf-head:#ffffff; --sf-card:#ffffff; --sf-card-hover:#fffdf9;
  --sf-tile:#f4f1ec; --sf-tile-hover:#ebe7e0; --sf-mark:#efeae3;
  --sf-chip:#f1ede7; --sf-chip-hover:#e9e4dc; --sf-chip-on:#1d1a17; --sf-chip-on-fg:#ffffff;
  --sf-ink:#1d1a17; --sf-body:#6f675e; --sf-muted:#948a7e; --sf-label:#8a8074;
  --sf-note:#7d7367; --sf-glyph:#5a4f43; --sf-box:#c9c1b6;
  --sf-hatch-a:#f4f1ec; --sf-hatch-b:#ebe7e0;
  --sf-brand:#1f74ef; --sf-brand-ink:#1468e8; --sf-ok:#2f9e68; --sf-bad:#c2412f;
  --sf-veil:rgba(255,255,255,.9); --sf-shops-head:50px;
  --sf-panel-edge:rgba(29,26,23,.24); --sf-panel-shadow:rgba(15,23,42,.28);
  position:absolute; top:0; bottom:0; display:flex; min-height:0;
  flex-direction:column; overflow:hidden; pointer-events:auto;
  background:var(--sf-panel); color:var(--sf-ink); font-family:var(--sf-font);
  /* The base surface stays docked for checkout too. The Build browser adds
     its stronger map-facing edge below without turning dialogs into cards. */
  border-left:1px solid var(--line); box-shadow:none;
}
:root[data-theme="dark"] .build-object-panel{
  --sf-panel:#141312; --sf-head:#1a1816; --sf-card:#1c1a18; --sf-card-hover:#232120;
  --sf-tile:#26231f; --sf-tile-hover:#2f2b26; --sf-mark:#26231f;
  --sf-chip:#26231f; --sf-chip-hover:#2f2b26; --sf-chip-on:#f5f2ee; --sf-chip-on-fg:#141312;
  --sf-ink:#f5f2ee; --sf-body:#b3aca3; --sf-muted:#8b8378; --sf-label:#8b8378;
  --sf-note:#9c9488; --sf-glyph:#c3bab0; --sf-box:#4b453e;
  --sf-hatch-a:#221f1c; --sf-hatch-b:#1a1815;
  --sf-brand:#1f74ef; --sf-brand-ink:#1468e8; --sf-ok:#3fb47c; --sf-bad:#e5726a;
  --sf-veil:rgba(20,19,18,.9);
  --sf-panel-edge:rgba(255,255,255,.19); --sf-panel-shadow:rgba(0,0,0,.72);
  box-shadow:none;
}
.build-object-browser{
  right:0; width:clamp(330px,29vw,400px); border-radius:0;
  border-left:2px solid var(--sf-panel-edge);
  box-shadow:-12px 0 28px -14px var(--sf-panel-shadow);
}
.build-object-browser[hidden]{ display:none; }
.build-object-panel__head{
  flex:0 0 auto; padding:18px 20px 16px; display:flex; align-items:center; gap:12px;
  background:var(--sf-head);
}
.build-object-panel__head > span:first-child{
  width:32px; height:32px; flex:none; display:grid; place-items:center;
  border-radius:9px; background:var(--sf-mark); color:var(--sf-glyph);
}
.build-object-panel__head > span:first-child svg{ width:17px; height:17px; }
.build-object-panel__eyebrow{
  display:block; margin-bottom:3px; color:var(--sf-label);
  font:700 12px/1 var(--sf-font); letter-spacing:.1em; text-transform:uppercase;
}
.build-object-panel__head strong{
  display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--sf-ink); font:700 16px/1.15 var(--sf-font); letter-spacing:-.018em;
}
.build-object-panel__subtext{
  display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--sf-body); font:400 12px/1.2 var(--sf-font);
}
.build-object-panel__head-copy{ min-width:0; flex:1; }

.build-video-player{
  position:relative; flex:0 0 auto; aspect-ratio:16/9; background:#050505;
  border-bottom:1px solid var(--line);
}
.build-video-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.build-video-player__placeholder{
  position:absolute; inset:0; display:grid; place-items:center; color:#9ca3af;
  font:650 12px/1.3 var(--font); text-align:center;
}
.build-video-player__placeholder[hidden],
.build-video-player iframe[hidden]{ display:none; }
.build-video-now{
  flex:0 0 auto; padding:10px 12px 9px; border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--glass-surface-soft) 82%,transparent);
}
.build-video-now strong{
  display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  font:700 12px/1.35 var(--font);
}
.build-video-now span{ display:block; margin-top:4px; color:var(--dim); font:600 12px/1.2 var(--font); }
.build-video-list{
  min-height:0; flex:1; overflow:auto; padding:7px; display:flex; flex-direction:column; gap:5px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.build-video-option{
  width:100%; min-width:0; padding:6px; display:grid; grid-template-columns:78px minmax(0,1fr);
  gap:8px; align-items:center; text-align:left; border:1px solid transparent; border-radius:9px;
  background:transparent; color:var(--ink); cursor:pointer; transition:background .14s,border-color .14s,transform .14s;
}
.build-video-option:hover{ background:var(--surface-hover); border-color:var(--line-soft); transform:translateY(-1px); }
.build-video-option[aria-pressed="true"]{ background:var(--surface-preview); border-color:var(--accent); }
.build-video-option img{
  width:78px; aspect-ratio:16/9; display:block; object-fit:cover; border-radius:6px; background:var(--slot);
}
.build-video-option__copy{ min-width:0; }
.build-video-option strong{
  display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  font:680 12px/1.28 var(--font);
}
.build-video-option span{
  display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--dim); font:600 12px/1 var(--font);
}
/* The selected-object video library belongs to Browse's left Object Insights
   panel. Its player and five-result list reuse the same live YouTube behavior
   while the analytics and drawings below remain available in the panel scroll. */
.pfocus__video-library .pfocus__section-title > span:first-child{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pfocus__video-library .build-video-player{
  overflow:hidden; border:1px solid var(--pf-border); border-radius:9px 9px 0 0;
}
.pfocus__video-open{
  position:absolute; z-index:4; top:8px; right:8px; width:30px; height:30px;
  display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.3);
  border-radius:8px; background:rgba(10,10,10,.72); color:#fff; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.28); backdrop-filter:blur(8px);
  transition:background .14s,border-color .14s,transform .14s;
}
/* The resting state is a white glyph on a dark scrim; hover swaps in --accent,
   which is near-white in the dark theme, so the glyph has to swap too. */
.pfocus__video-open:hover{ background:var(--accent); border-color:var(--accent); color:var(--tip-fg); transform:translateY(-1px); }
.pfocus__video-open:active{ transform:scale(.9); }
.pfocus__video-open:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.pfocus__video-open svg{ width:15px; height:15px; pointer-events:none; }
.pfocus__video-library .build-video-now{
  border-inline:1px solid var(--pf-border);
  background:color-mix(in srgb,var(--pf-gold-soft) 42%,var(--pf-surface));
}
.pfocus__video-library .build-video-list{
  max-height:none; overflow:visible; padding:7px 0; gap:4px;
}
.pfocus__video-library .build-video-option{ grid-template-columns:78px minmax(0,1fr); }
/* The one part of the storefront that stays live: the object preview keeps
   its WebGL canvas, so the David the panel opens on is the real model rather
   than the mock's swatch. The hatch is what shows through its alpha. */
.build-object-preview{
  position:relative; flex:0 0 208px; min-height:170px; overflow:hidden;
  background-image:repeating-linear-gradient(135deg,var(--sf-hatch-a) 0 8px,var(--sf-hatch-b) 8px 16px);
}
.build-object-preview canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none; }
.build-object-preview canvas:active{ cursor:grabbing; }
.build-object-preview__expand{
  position:absolute; z-index:3; top:10px; right:10px; width:34px; height:34px;
  display:grid; place-items:center; padding:0; border:1px solid color-mix(in srgb,var(--sf-ink) 18%,transparent);
  border-radius:9px; background:var(--sf-veil); color:var(--sf-ink); cursor:pointer;
  box-shadow:0 8px 22px color-mix(in srgb,var(--sf-ink) 18%,transparent);
  opacity:0; pointer-events:none; transform:translateY(-4px) scale(.94);
  transition:opacity .16s ease,transform .16s ease,background .14s ease,border-color .14s ease;
}
.build-object-preview__expand svg{ width:17px; height:17px; pointer-events:none; }
.build-object-preview:hover .build-object-preview__expand,
.build-object-preview:focus-within .build-object-preview__expand{
  opacity:1; pointer-events:auto; transform:none;
}
.build-object-preview__expand:hover{ background:var(--sf-brand); border-color:var(--sf-brand); color:#fff; }
.build-object-preview__expand:focus-visible{
  opacity:1; pointer-events:auto; transform:none; outline:2px solid var(--sf-brand); outline-offset:2px;
}
.build-object-preview__expand[hidden],
.build-object-preview[data-empty="true"] .build-object-preview__expand,
.build-object-focus .build-object-preview__expand{ display:none; }
.build-object-preview__hint{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); pointer-events:none;
  padding:6px 12px; border-radius:999px; background:var(--sf-veil); color:var(--sf-body);
  font:400 12px/1 var(--sf-font); white-space:nowrap;
}
.build-object-preview__empty{
  position:absolute; inset:0; z-index:2; padding:24px;
  display:grid; place-content:center; justify-items:center; gap:8px;
  text-align:center; color:var(--sf-body); background:transparent;
}
.build-object-preview__empty[hidden]{ display:none; }
.build-object-preview__empty > span{
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  background:var(--sf-mark); color:var(--sf-glyph);
}
.build-object-preview__empty svg{ width:18px; height:18px; }
.build-object-preview__empty strong{ color:var(--sf-ink); font:650 14px/1.2 var(--sf-font); }
.build-object-preview__empty small{ max-width:240px; color:var(--sf-muted); font:400 12px/1.4 var(--sf-font); }
.build-object-preview[data-empty="true"] canvas{ opacity:0; pointer-events:none; }
.build-object-preview-away{
  flex:0 0 208px; min-height:170px; padding:24px; display:grid; place-content:center;
  justify-items:center; gap:8px; text-align:center; color:var(--sf-body);
  background-image:repeating-linear-gradient(135deg,var(--sf-hatch-a) 0 8px,var(--sf-hatch-b) 8px 16px);
}
.build-object-preview-away[hidden]{ display:none; }
.build-object-preview-away > span{
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  background:var(--sf-mark); color:var(--sf-glyph);
}
.build-object-preview-away svg{ width:18px; height:18px; }
.build-object-preview-away strong{ color:var(--sf-ink); font:650 14px/1.2 var(--sf-font); }
.build-object-preview-away small{ max-width:240px; color:var(--sf-muted); font:400 12px/1.4 var(--sf-font); }

/* Object close-up — the live cart canvas moves here so the visible model,
   orientation, and orbit/zoom state remain continuous. The map stays in place
   under a theme-aware blur instead of being replaced by another scene. */
.build-object-focus{
  --sf-font:var(--font,sans-serif); --sf-veil:rgba(255,255,255,.9); --sf-body:#5e5a54;
  position:absolute; z-index:65; inset:0 clamp(330px,29vw,400px) 0 0;
  display:grid; place-items:center; overflow:hidden; pointer-events:auto; isolation:isolate;
  background:rgba(250,249,247,.56); color:var(--ink);
  backdrop-filter:blur(12px) saturate(.72); -webkit-backdrop-filter:blur(12px) saturate(.72);
  animation:build-object-focus-veil-in .24s ease both;
}
:root[data-theme="dark"] .build-object-focus{
  --sf-veil:rgba(20,21,24,.9); --sf-body:#cbc7c0;
  background:rgba(9,11,15,.48);
}
.build-object-focus[hidden]{ display:none; }
.build-object-focus > .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.build-object-focus__stage{ position:absolute; inset:clamp(18px,3.5vw,52px); }
.build-object-focus .build-object-preview{
  position:absolute; inset:0; width:100%; height:100%; min-height:0; flex:none;
  overflow:visible; background:none;
  animation:build-object-focus-model-in .34s cubic-bezier(.2,.86,.28,1) both;
}
.build-object-focus__close{
  position:absolute; z-index:4; top:14px; right:14px; width:38px; height:38px;
  display:grid; place-items:center; padding:0; border:1px solid var(--line);
  border-radius:10px; background:var(--glass-surface-strong); color:var(--ink);
  box-shadow:var(--shadow-md); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  cursor:pointer; transition:background .14s,border-color .14s,transform .14s;
}
.build-object-focus__close:hover{ border-color:var(--accent); background:var(--surface-hover); transform:translateY(-1px); }
.build-object-focus__close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.build-object-focus__close svg{ width:18px; height:18px; pointer-events:none; }
body[data-build-object-focus-open="true"] .hivead-stack,
body[data-build-object-focus-open="true"] .build-home-offer-host,
body[data-build-object-focus-open="true"] #command{
  opacity:0; visibility:hidden; pointer-events:none;
}
@keyframes build-object-focus-veil-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes build-object-focus-model-in{
  from{ opacity:0; transform:translateY(12px) scale(.92); }
  to{ opacity:1; transform:none; }
}
@media (hover:none){
  .build-object-preview__expand:not([hidden]){ opacity:1; pointer-events:auto; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .build-object-focus,.build-object-focus .build-object-preview{ animation-duration:.01ms; }
}
.build-shops__filters[hidden]{ display:none; }
.build-upload{
  position:relative; flex:0 0 auto; min-width:0; padding:11px 14px;
  display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:10px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--sf-head); color:var(--sf-ink);
  transition:background .15s,box-shadow .15s;
}
.build-upload.is-dragover{
  background:color-mix(in srgb,var(--sf-brand) 10%,var(--sf-head));
  box-shadow:inset 0 0 0 2px var(--sf-brand);
}
.build-upload__mark{
  width:32px; height:32px; display:grid; place-items:center; border-radius:9px;
  background:var(--sf-mark); color:var(--sf-glyph);
}
.build-upload__mark svg{ width:16px; height:16px; }
.build-upload__copy{ min-width:0; display:grid; gap:4px; }
.build-upload__copy strong{
  overflow:hidden; color:var(--sf-ink); font:650 12px/1.15 var(--sf-font);
  text-overflow:ellipsis; white-space:nowrap;
}
.build-upload__copy small{
  overflow:hidden; color:var(--sf-muted); font:400 12px/1.2 var(--sf-font);
  text-overflow:ellipsis; white-space:nowrap;
}
.build-upload[data-upload-state="processing"] .build-upload__mark{ color:var(--sf-brand); }
.build-upload[data-upload-state="ready"] .build-upload__mark{ color:var(--sf-ok); }
.build-upload[data-upload-state="error"] .build-upload__mark,
.build-upload[data-upload-state="error"] .build-upload__copy small{ color:var(--sf-bad); }
.build-upload__choose{
  position:relative; min-height:32px; padding:0 11px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--sf-box); border-radius:9px;
  background:var(--sf-card); color:var(--sf-ink); font:650 12px/1 var(--sf-font);
  cursor:pointer; transition:background .14s,border-color .14s,color .14s;
}
.build-upload__choose:hover{ border-color:var(--sf-brand); background:var(--sf-card-hover); color:var(--sf-brand); }
.build-upload__choose:focus-within{ outline:2px solid var(--sf-brand); outline-offset:2px; }
.build-upload__choose input{
  position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.build-upload__choose:has(input:disabled){ opacity:.5; cursor:wait; }
.build-print-queue{
  flex:0 0 auto; padding:14px 14px 4px; display:grid; gap:8px;
}
.build-print-queue__row{
  width:100%; min-width:0; padding:15px 16px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px;
  border:1px solid color-mix(in srgb,var(--sf-box) 52%,transparent); border-radius:12px; text-align:left;
  background:var(--sf-card); color:var(--sf-ink); font-family:var(--sf-font); cursor:pointer;
  transition:background .14s,box-shadow .14s;
}
.build-print-queue__row:hover{ background:var(--sf-card-hover); }
.build-print-queue__row[aria-pressed="true"]{ box-shadow:inset 0 0 0 1.5px var(--sf-brand); }
.build-print-queue__copy{ min-width:0; }
.build-print-queue__copy strong{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 14px/1.2 var(--sf-font); letter-spacing:-.01em;
}
.build-print-queue__copy small{
  min-width:0; margin-top:4px; display:flex; align-items:center; gap:5px;
  color:var(--sf-muted); font:400 12px/1.2 var(--sf-font); white-space:nowrap;
}
.build-print-queue__copy small b{ color:var(--sf-muted); font:400 12px/1.2 var(--sf-font); letter-spacing:0; }
.build-print-queue__copy small span{ overflow:hidden; text-overflow:ellipsis; }
.build-print-queue__actions{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.build-print-queue__save{
  width:24px; height:24px; padding:0; display:grid; place-items:center;
  border:1px solid var(--sf-box); border-radius:7px; background:var(--sf-head); color:var(--sf-muted);
  opacity:0; pointer-events:none; transform:translateX(5px) scale(.94); cursor:pointer;
  transition:opacity .14s,transform .14s,background .14s,border-color .14s,color .14s,box-shadow .14s;
}
.build-print-queue__save svg{ width:14px; height:14px; }
.build-print-queue__row:hover .build-print-queue__save,
.build-print-queue__row:focus-within .build-print-queue__save,
.build-print-queue__save:focus-visible{
  opacity:1; pointer-events:auto; transform:none;
}
.build-print-queue__save:hover,
.build-print-queue__save:focus-visible{
  outline:0; border-color:var(--sf-brand); background:color-mix(in srgb,var(--sf-brand) 9%,var(--sf-head));
  color:var(--sf-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-brand) 12%,transparent);
}
.build-print-queue__check{
  width:20px; height:20px; padding:0; display:grid; place-items:center; border:0;
  border-radius:50%; background:var(--sf-ok); color:#fff; box-shadow:none; cursor:pointer;
  transition:background .14s,transform .14s,box-shadow .14s;
}
.build-print-queue__check svg{ grid-area:1/1; width:11px; height:11px; }
.build-print-queue__check [data-build-queue-remove-icon]{ display:none; }
.build-print-queue__check:hover,
.build-print-queue__check:focus-visible{
  outline:0; background:#dc2626; transform:scale(1.08); box-shadow:0 0 0 3px color-mix(in srgb,#dc2626 18%,transparent);
}
.build-print-queue__check:hover [data-build-queue-included],
.build-print-queue__check:focus-visible [data-build-queue-included]{ display:none; }
.build-print-queue__check:hover [data-build-queue-remove-icon],
.build-print-queue__check:focus-visible [data-build-queue-remove-icon]{ display:block; }
@media (prefers-reduced-motion:reduce){
  .build-print-queue__save{ transition:none; }
}
.build-object-grid{
  padding:0 14px 14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start; gap:8px;
}
.build-object-choice{
  position:relative; min-width:0; aspect-ratio:4/3; padding:7px; display:grid; place-items:center;
  overflow:hidden; border:0; border-radius:12px; background:var(--sf-card); color:var(--sf-ink); cursor:pointer;
  transition:box-shadow .14s;
}
.build-object-choice[aria-pressed="true"]{ box-shadow:inset 0 0 0 1.5px var(--sf-brand); }
.build-object-choice__visual{
  width:100%; height:100%; min-width:0; display:grid; place-items:center; overflow:hidden;
  border-radius:9px; background:var(--sf-tile);
}
.build-object-choice__visual > *{ grid-area:1/1; }
.build-object-choice__visual img{
  width:100%; height:100%; min-width:0; object-fit:contain; opacity:0; transform:scale(.94);
  transition:opacity .18s ease,transform .18s ease;
}
.build-object-choice[data-object-preview-state="ready"] .build-object-choice__visual img{ opacity:1; }
.build-object-choice:hover .build-object-choice__visual img,
.build-object-choice:focus-visible .build-object-choice__visual img{ transform:scale(1); }
.build-object-choice__fallback{
  width:30px; height:30px; display:grid; place-items:center; color:var(--sf-glyph);
  transition:opacity .14s;
}
.build-object-choice__fallback svg{ width:18px; height:18px; }
.build-object-choice[data-object-preview-state="ready"] .build-object-choice__fallback{ opacity:0; }
.build-object-error{ padding:16px 20px; color:var(--sf-bad); font:400 12px/1.5 var(--sf-font); }
/* The print queue, the printer locations and the object chooser share one
   scroller. Two independently scrolling regions inside a 400px column would
   each be a few rows tall and neither would be usable. */
.build-object-scroll{
  min-height:0; flex:1; overflow:auto; display:flex; flex-direction:column;
  background:var(--sf-panel);
  scrollbar-width:thin; scrollbar-color:var(--sf-tile-hover) transparent;
}
/* Checkout is a flex sibling of the row scroller rather than a child of it.
   That keeps the action locked to the panel's bottom edge while every queue,
   shop and catalog row continues to scroll in the space above it. */
.build-checkout{
  position:relative; z-index:4; flex:0 0 auto; padding:12px 14px 14px; display:grid; gap:10px;
  border-top:1px solid var(--line); background:var(--sf-head);
  box-shadow:0 -10px 24px color-mix(in srgb,var(--sf-ink) 7%,transparent);
}
.build-checkout[hidden]{ display:none; }
.build-checkout__summary{ min-width:0; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.build-checkout__summary > span{ min-width:0; display:grid; gap:4px; }
.build-checkout__summary small{
  color:var(--sf-label); font:700 12px/1 var(--sf-font); letter-spacing:.09em; text-transform:uppercase;
}
.build-checkout__summary em{
  overflow:hidden; color:var(--sf-body); font:400 12px/1.2 var(--sf-font); font-style:normal;
  text-overflow:ellipsis; white-space:nowrap;
}
.build-checkout__summary strong{ flex:none; color:var(--sf-ink); font:700 20px/1 var(--sf-font); letter-spacing:-.025em; }
.build-checkout__button{
  position:relative; isolation:isolate; overflow:hidden;
  width:100%; min-height:44px; padding:0 16px; display:flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:12px; background:var(--sf-brand); color:#fff;
  font:700 13px/1 var(--sf-font); cursor:pointer; transition:background .14s,transform .14s,opacity .14s;
}
.build-checkout__button::before{
  content:''; position:absolute; z-index:0; top:-35%; bottom:-35%; left:-42%; width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  transform:skewX(-22deg); opacity:0; pointer-events:none;
}
.build-checkout__button:not(:disabled)::before{ animation:build-checkout-shimmer 6.4s ease-in-out infinite; }
.build-checkout__button > span,.build-checkout__button svg{ position:relative; z-index:1; }
.build-checkout__button svg{ width:16px; height:16px; flex:none; }
.build-checkout__button:hover:not(:disabled){ background:var(--sf-brand-ink); transform:translateY(-1px); }
.build-checkout__button:hover:not(:disabled) svg{ animation:build-checkout-arrow .62s ease-in-out infinite; }
.build-checkout__button:focus-visible{ outline:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-brand) 32%,transparent); }
.build-checkout__button:disabled{ opacity:.42; cursor:not-allowed; }
@keyframes build-checkout-shimmer{
  0%,68%{ left:-42%; opacity:0; }
  70%{ opacity:.85; }
  82%{ left:118%; opacity:.25; }
  83%,100%{ left:118%; opacity:0; }
}
@keyframes build-checkout-arrow{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(4px); }
}
@media (prefers-reduced-motion:reduce){
  .build-checkout__button:not(:disabled)::before,
  .build-checkout__button:hover:not(:disabled) svg{ animation:none; }
}

/* Browse confirms the mutation in green, then sends only its DOM storefront
   toward the right edge. The WebGL object canvas stays untransformed so this
   handoff preserves the compositor-safe view switching contract. */
body[data-browse-cart-transition="confirming"] .pfboard__add.is-added{
  animation:browse-cart-confirm .52s var(--ease-spring) both;
}
body[data-browse-cart-transition="zooming-right"] .market-rail__drawer.is-object-focus{
  transform-origin:right center;
  animation:browse-cart-zoom-right .36s var(--ease-glide) both;
  will-change:transform,opacity;
}
body[data-browse-cart-transition="zooming-right"] .view[data-view="browse"] .center-panel::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(90deg,transparent 20%,color-mix(in srgb,var(--stage) 84%,transparent));
  animation:browse-cart-veil .36s ease both;
}
@keyframes browse-cart-confirm{
  0%{ transform:scale(1); }
  42%{ transform:scale(1.035); box-shadow:0 0 0 5px color-mix(in srgb,#15803d 16%,transparent); }
  100%{ transform:scale(1); }
}
@keyframes browse-cart-zoom-right{
  from{ transform:translateX(0) scale(1); opacity:1; }
  to{ transform:translateX(42%) scale(1.1); opacity:0; }
}
@keyframes browse-cart-veil{ from{ opacity:0; } to{ opacity:1; } }

/* Checkout is the Build storefront panel brought into the middle of the live
   workspace. The translucent backdrop blurs the map and docked panel together,
   while the panel itself enters from the right in a landscape arrangement. */
.build-checkout-overlay{
  position:fixed; inset:0; z-index:1000; padding:clamp(8px,1.2vw,14px);
  display:grid; place-items:center; pointer-events:auto;
  background:rgba(248,247,244,.48); backdrop-filter:blur(13px) saturate(.72);
  -webkit-backdrop-filter:blur(13px) saturate(.72);
  opacity:0; transition:opacity .22s ease;
}
:root[data-theme="dark"] .build-checkout-overlay{ background:rgba(8,8,8,.58); }
body[data-build-checkout-open="true"] .hivead-stack{
  opacity:0; visibility:hidden; pointer-events:none;
}
body[data-build-checkout-open="true"] .build-home-offer-host{
  opacity:0; visibility:hidden; pointer-events:none;
}
body[data-build-checkout-open="true"] #command{
  opacity:0; visibility:hidden; pointer-events:none;
}
.build-checkout-overlay[hidden]{ display:none; }
.build-checkout-overlay[data-open="true"]{ opacity:1; }
.build-checkout-dialog{
  --checkout-border:color-mix(in srgb,var(--sf-box) 58%,transparent);
  --checkout-small-font-size:12px;
  position:relative; inset:auto; top:auto; right:auto; bottom:auto;
  width:min(1240px,100%); height:min(760px,100%); min-height:0;
  border:1px solid var(--checkout-border); border-radius:20px;
  background:var(--sf-panel); color:var(--sf-ink); font-family:var(--sf-font);
  box-shadow:0 30px 90px rgba(15,23,42,.28); overflow:hidden;
  opacity:0; transform:translateX(18%) scale(.86); transform-origin:right center;
  transition:transform .42s var(--ease-glide),opacity .24s ease;
}
:root[data-theme="dark"] .build-checkout-dialog{ box-shadow:0 32px 100px rgba(0,0,0,.72); }
.build-checkout-overlay[data-open="true"] .build-checkout-dialog{ opacity:1; transform:none; }
.build-checkout-dialog__head{
  min-height:82px; padding:19px 22px; border-bottom:1px solid var(--checkout-border);
  background:var(--sf-head);
}
.build-checkout-dialog__head > span:first-child{ width:38px; height:38px; }
.build-checkout-dialog__head > span:first-child svg{ width:19px; height:19px; }
.build-checkout-dialog__head .build-object-panel__subtext{ max-width:60ch; white-space:normal; }
.build-checkout-dialog__head .build-object-panel__eyebrow{ font-size:var(--checkout-small-font-size); }
.build-checkout-dialog__head .build-object-panel__head-copy > strong{ font-size:18px; }
.build-checkout-dialog__head .build-object-panel__subtext{ color:var(--sf-body); font-size:12px; line-height:1.3; }
.build-checkout-dialog__actions{ margin-left:auto; flex:none; display:flex; align-items:center; gap:8px; }
.build-checkout-dialog__save{
  min-height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--checkout-border); border-radius:10px; background:var(--sf-card);
  color:var(--sf-body); cursor:pointer; font:650 var(--checkout-small-font-size)/1 var(--sf-font);
  transition:background .14s,color .14s,border-color .14s,transform .14s;
}
.build-checkout-dialog__save svg{ width:14px; height:14px; }
.build-checkout-dialog__save:hover{ background:var(--sf-tile-hover); border-color:var(--sf-brand); color:var(--sf-ink); transform:translateY(-1px); }
.build-checkout-dialog__save:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:2px; }
.build-checkout-dialog__close{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border:1px solid var(--checkout-border); border-radius:10px; background:var(--sf-card);
  color:var(--sf-glyph); cursor:pointer; transition:background .14s,color .14s,transform .14s;
}
.build-checkout-dialog__close:hover{ background:var(--sf-tile-hover); color:var(--sf-ink); transform:rotate(3deg); }
.build-checkout-dialog__close:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:2px; }
.build-checkout-dialog__close svg{ width:15px; height:15px; }
.build-checkout-form{
  min-height:0; flex:1; display:grid; grid-template-columns:minmax(280px,.82fr) minmax(460px,1.45fr);
  overflow:hidden; background:var(--sf-panel);
}
.build-checkout-order{
  min-height:0; padding:22px; display:flex; flex-direction:column; gap:15px;
  overflow:auto; border-right:1px solid var(--checkout-border); background:var(--sf-panel);
}
.build-checkout-order__heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.build-checkout-order__heading span{
  color:var(--sf-body); font:750 var(--checkout-small-font-size)/1 var(--sf-font); letter-spacing:.1em; text-transform:uppercase;
}
.build-checkout-order__heading strong{
  padding:6px 9px; border-radius:999px; background:var(--sf-tile); color:var(--sf-body);
  font:650 var(--checkout-small-font-size)/1 var(--sf-font);
}
.build-checkout-order__items{ display:grid; gap:10px; }
.build-checkout-order__item{
  min-width:0; min-height:88px; padding:10px; display:grid;
  grid-template-columns:64px minmax(0,1fr); column-gap:14px; row-gap:7px; align-items:center;
  border:1px solid var(--checkout-border); border-radius:12px; background:var(--sf-card);
}
.build-checkout-order__item-mark{
  grid-row:1 / span 2;
  position:relative; width:64px; height:64px; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--checkout-border); border-radius:10px;
  background:var(--sf-tile); color:var(--sf-glyph);
}
.build-checkout-order__item-mark img{
  width:100%; height:100%; display:block; object-fit:contain; padding:4px; box-sizing:border-box;
  opacity:0; transform:scale(.94); transition:opacity .18s ease,transform .22s ease;
}
.build-checkout-order__item-mark[data-preview-state="ready"] img{ opacity:1; transform:scale(1); }
.build-checkout-order__item-fallback{ position:absolute; width:22px; height:22px; }
.build-checkout-order__item-fallback svg{ display:block; width:100%; height:100%; }
.build-checkout-order__item-mark[data-preview-state="ready"] .build-checkout-order__item-fallback{ display:none; }
.build-checkout-order__item-copy{ min-width:0; align-self:end; }
.build-checkout-order__item strong{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--sf-ink); font:650 14px/1.2 var(--sf-font); letter-spacing:-.01em;
}
.build-checkout-order__item small{ display:block; margin-top:6px; color:var(--sf-body); font:600 var(--checkout-small-font-size)/1.3 var(--sf-font); }
.build-checkout-order__controls{
  min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:7px; align-self:start;
}
.build-checkout-order__quantity{
  height:27px; display:inline-grid; grid-template-columns:auto 25px 30px 25px; align-items:center;
  border:1px solid var(--checkout-border); border-radius:8px; overflow:hidden; background:var(--sf-tile);
}
.build-checkout-order__quantity-label{
  padding:0 5px 0 8px; color:var(--sf-body); font:700 var(--checkout-small-font-size)/1 var(--sf-font);
  letter-spacing:.04em; text-transform:uppercase;
}
.build-checkout-order__quantity button,
.build-checkout-order__quantity input,
.build-checkout-order__save-object,
.build-checkout-order__remove{
  height:100%; margin:0; border:0; background:transparent; color:var(--sf-body); font-family:var(--sf-font);
}
.build-checkout-order__quantity button{
  display:grid; place-items:center; padding:0; cursor:pointer; font:700 14px/1 var(--sf-font);
}
.build-checkout-order__quantity button:hover:not(:disabled){ background:var(--sf-tile-hover); color:var(--sf-ink); }
.build-checkout-order__quantity button:disabled{ opacity:.34; cursor:not-allowed; }
.build-checkout-order__quantity input{
  width:30px; padding:0; border-inline:1px solid var(--checkout-border); border-radius:0;
  outline:0; color:var(--sf-ink); text-align:center; font:700 var(--checkout-small-font-size)/1 var(--sf-font); appearance:textfield;
}
.build-checkout-order__quantity input::-webkit-inner-spin-button,
.build-checkout-order__quantity input::-webkit-outer-spin-button{ margin:0; appearance:none; }
.build-checkout-order__quantity button:focus-visible,
.build-checkout-order__quantity input:focus-visible,
.build-checkout-order__save-object:focus-visible,
.build-checkout-order__remove:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:-2px; }
.build-checkout-order__save-object{
  min-height:27px; padding:0 7px; border:1px solid var(--checkout-border); border-radius:8px;
  cursor:pointer; color:var(--sf-brand); font:650 var(--checkout-small-font-size)/1 var(--sf-font);
  transition:background .14s,color .14s,border-color .14s;
}
.build-checkout-order__save-object:hover{
  border-color:var(--sf-brand); background:color-mix(in srgb,var(--sf-brand) 9%,var(--sf-card));
}
.build-checkout-order__remove{
  width:27px; flex:none; display:grid; place-items:center; padding:0;
  border:1px solid var(--checkout-border); border-radius:8px; cursor:pointer;
  transition:background .14s,color .14s,border-color .14s;
}
.build-checkout-order__remove svg{ width:13px; height:13px; }
.build-checkout-order__remove:hover{
  border-color:color-mix(in srgb,#dc2626 52%,var(--checkout-border));
  background:color-mix(in srgb,#dc2626 9%,var(--sf-card)); color:#dc2626;
}
.build-checkout-order__empty{ margin:0; padding:18px; color:var(--sf-body); text-align:center; font:500 12px/1.45 var(--sf-font); }
.build-checkout-order__location-picker{ position:relative; z-index:5; margin-top:auto; }
.build-checkout-order__location{
  width:100%; margin-top:0; color:inherit; text-align:left; cursor:pointer;
  padding:12px; display:grid; grid-template-columns:42px minmax(0,1fr) 18px; gap:13px; align-items:center;
  border:1px solid var(--checkout-border); border-radius:12px; background:var(--sf-card);
}
.build-checkout-order__location:hover{
  border-color:var(--sf-brand); background:var(--sf-tile-hover);
}
.build-checkout-order__location:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:2px; }
.build-checkout-order__location:disabled{ opacity:1; }
.build-checkout-order__mark{
  position:relative; width:48px; height:48px; display:grid; place-items:center; overflow:hidden;
  padding:4px; border:1px solid var(--checkout-border); border-radius:10px;
  background:#f8fafc; color:var(--sf-glyph);
}
.build-checkout-order__mark img{ width:100%; height:100%; display:block; object-fit:contain;
  border-radius:7px; opacity:0; mix-blend-mode:multiply; transition:opacity .16s ease; }
:root[data-theme="dark"] .build-checkout-order__mark img{ mix-blend-mode:normal; }
.build-checkout-order__mark[data-checkout-shop-image-state="ready"] img{ opacity:1; }
.build-checkout-order__mark-fallback{ position:absolute; display:grid; place-items:center; }
.build-checkout-order__mark-fallback svg{ width:19px; height:19px; }
.build-checkout-order__mark[data-checkout-shop-image-state="ready"] .build-checkout-order__mark-fallback{ display:none; }
.build-checkout-order__location small,.build-checkout-order__location strong{ display:block; }
.build-checkout-order__location small{ color:var(--sf-body); font:700 var(--checkout-small-font-size)/1 var(--sf-font); text-transform:uppercase; letter-spacing:.08em; }
.build-checkout-order__location strong{ margin-top:6px; color:var(--sf-ink); font:650 14px/1.15 var(--sf-font); }
.build-checkout-order__location-caret{
  width:9px; height:9px; justify-self:end; border-top:1.5px solid var(--sf-glyph); border-right:1.5px solid var(--sf-glyph);
  transform:rotate(-45deg); opacity:1; transition:transform .16s ease,opacity .16s ease;
}
.build-checkout-order__location-picker[data-open="true"] .build-checkout-order__location-caret{ transform:rotate(135deg); }
.build-checkout-order__location-options{
  position:absolute; z-index:8; left:0; right:0; bottom:calc(100% + 8px); max-height:250px; overflow:auto;
  padding:8px; display:grid; gap:5px; border:1px solid var(--checkout-border); border-radius:12px;
  background:var(--sf-panel); box-shadow:0 -14px 36px rgba(15,23,42,.18);
}
.build-checkout-order__location-options[hidden]{ display:none; }
.build-checkout-order__location-options-title{
  padding:4px 6px 6px; color:var(--sf-body); font:700 var(--checkout-small-font-size)/1 var(--sf-font);
  letter-spacing:.08em; text-transform:uppercase;
}
.build-checkout-order__location-option{
  width:100%; min-height:52px; padding:8px 9px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px;
  align-items:center; border:1px solid transparent; border-radius:8px; background:var(--sf-card); color:inherit;
  cursor:pointer; text-align:left;
}
.build-checkout-order__location-option:hover,.build-checkout-order__location-option:focus-visible{
  border-color:var(--sf-brand); background:var(--sf-tile-hover); outline:0;
}
.build-checkout-order__location-option > span{ min-width:0; display:grid; gap:4px; }
.build-checkout-order__location-option strong{ overflow:hidden; color:var(--sf-ink); font:700 12.5px/1.15 var(--sf-font); text-overflow:ellipsis; white-space:nowrap; }
.build-checkout-order__location-option small{ color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.2 var(--sf-font); }
.build-checkout-order__location-option > b{ color:var(--sf-ink); font:700 var(--checkout-small-font-size)/1 var(--sf-font); }
.build-checkout-order__location-empty{ margin:0; padding:12px; color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.4 var(--sf-font); }
.build-checkout-order__total{
  margin-top:0; padding-top:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  border-top:1px solid var(--checkout-border);
}
.build-checkout-order__total > span{ min-width:0; display:grid; gap:5px; }
.build-checkout-order__total small{ color:var(--sf-body); font:750 var(--checkout-small-font-size)/1 var(--sf-font); letter-spacing:.08em; text-transform:uppercase; }
.build-checkout-order__total em{ color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.35 var(--sf-font); font-style:normal; }
.build-checkout-order__total > strong{ flex:none; color:var(--sf-ink); font:750 23px/1 var(--sf-font); letter-spacing:-.03em; }
.build-checkout-details{ min-height:0; padding:18px; display:flex; flex-direction:column; gap:12px; overflow:auto; background:var(--sf-panel); }
.build-checkout-section{
  padding:16px; border:1px solid var(--checkout-border); border-radius:14px;
  background:var(--sf-card); overflow:hidden;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.build-checkout-section[data-open="true"]{
  border-color:color-mix(in srgb,var(--sf-brand) 42%,var(--checkout-border));
  box-shadow:0 8px 24px color-mix(in srgb,var(--sf-brand) 7%,transparent);
}
.build-checkout-section__heading{
  width:100%; display:flex; align-items:center; gap:11px; margin:0; color:inherit; text-align:left;
}
.build-checkout-section[data-open="true"] .build-checkout-section__heading{ margin-bottom:13px; }
.build-checkout-section__heading:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:5px; border-radius:7px; }
.build-checkout-section__heading > i{
  width:8px; height:8px; margin-left:auto; flex:none; border-right:1.5px solid var(--sf-glyph);
  border-bottom:1.5px solid var(--sf-glyph); transform:rotate(45deg); transition:transform .16s ease;
}
.build-checkout-section[data-open="true"] .build-checkout-section__heading > i{ transform:rotate(225deg); }
.build-checkout-section__body[hidden]{ display:none; }
.build-checkout-section__step{
  width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:color-mix(in srgb,var(--sf-brand) 12%,transparent); color:var(--sf-brand);
  font:700 var(--checkout-small-font-size)/1 var(--sf-font);
}
.build-checkout-section[data-complete="true"] .build-checkout-section__step{
  background:var(--sf-ok); color:#fff;
}
.build-checkout-section__heading > span:nth-child(2){ min-width:0; display:grid; gap:3px; }
.build-checkout-section__heading strong{ color:var(--sf-ink); font:700 15px/1.1 var(--sf-font); }
.build-checkout-section__heading small{ color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.2 var(--sf-font); }
/* The payment step in this build collects nothing and charges nothing; this is
   the notice that says so where the card form used to be. */
.build-checkout-testmode{
  display:grid; gap:5px; padding:13px 15px;
  border:1px solid var(--line); border-left:3px solid var(--cad-accent);
  border-radius:var(--radius-ui); background:var(--cad-accent-soft);
}
.build-checkout-testmode strong{ font:700 12px/1.3 var(--font); color:var(--cad-accent-ink); }
.build-checkout-testmode small{ color:var(--text); font:500 var(--checkout-small-font-size)/1.5 var(--font); }
.build-checkout-card-types{
  margin-left:auto; color:var(--sf-body); font:750 var(--checkout-small-font-size)/1 var(--sf-font); letter-spacing:.04em; white-space:nowrap;
}
.build-checkout-card-types + i{ margin-left:2px; }
.build-checkout-shipping{
  display:grid; grid-template-columns:minmax(140px,.75fr) minmax(0,1.25fr); gap:12px; align-items:stretch;
}
.build-checkout-shipping__zip{ min-width:0; display:grid; align-content:start; gap:5px; }
.build-checkout-shipping__zip > label{ color:var(--sf-body); font:650 var(--checkout-small-font-size)/1 var(--sf-font); }
.build-checkout-shipping__zip > span{ min-width:0; display:flex; gap:7px; }
.build-checkout-shipping__zip > span input{ flex:1; }
.build-checkout-shipping__zip > span button{
  min-width:92px; height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--checkout-border); border-radius:9px; background:var(--sf-card); color:var(--sf-body);
  cursor:pointer; font:700 var(--checkout-small-font-size)/1 var(--sf-font); transition:border-color .14s,background .14s,color .14s,transform .14s;
}
.build-checkout-shipping__zip > span button svg{ width:15px; height:15px; }
.build-checkout-shipping__zip > span button:hover:not(:disabled){ border-color:var(--sf-brand); background:var(--sf-tile-hover); color:var(--sf-brand); transform:translateY(-1px); }
.build-checkout-shipping__zip > span button:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:2px; }
.build-checkout-shipping__zip > span button:disabled{ opacity:.56; cursor:wait; }
.build-checkout-shipping__zip > span button[data-loading="true"] svg{ animation:checkout-find-zip-pulse .8s ease-in-out infinite alternate; }
.build-checkout-shipping__zip > small{ min-height:11px; color:var(--sf-body); font:550 var(--checkout-small-font-size)/1.2 var(--sf-font); }
.build-checkout-shipping__zip > small[data-state="ready"]{ color:var(--sf-ok); }
.build-checkout-shipping__zip > small[data-state="error"]{ color:#ef4444; }
@keyframes checkout-find-zip-pulse{ to{ transform:scale(1.18); color:var(--sf-brand); } }
.build-checkout-shipping input{
  width:100%; min-width:0; height:38px; padding:0 11px; border:1px solid var(--checkout-border); border-radius:9px;
  outline:0; background:var(--sf-tile); color:var(--sf-ink); font:500 12.5px/1 var(--sf-font);
  transition:border-color .14s,box-shadow .14s,background .14s;
}
.build-checkout-shipping input::placeholder{ color:var(--sf-muted); opacity:.75; }
.build-checkout-shipping input:focus{ border-color:var(--sf-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-brand) 14%,transparent); }
.build-checkout-shipping__quote{
  min-width:0; padding:10px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px;
  align-content:center; border:1px solid var(--checkout-border); border-radius:10px; background:var(--sf-tile);
}
.build-checkout-shipping__quote small{ color:var(--sf-body); font:650 var(--checkout-small-font-size)/1 var(--sf-font); }
.build-checkout-shipping__quote strong{ grid-row:span 2; align-self:center; color:var(--sf-ink); font:750 18px/1 var(--sf-font); }
.build-checkout-shipping__quote em{ color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.25 var(--sf-font); font-style:normal; }
.build-checkout-shipping__quote[data-state="ready"]{ border-color:color-mix(in srgb,var(--sf-ok) 45%,var(--checkout-border)); }
.build-checkout-shipping__quote[data-state="loading"]{ border-color:color-mix(in srgb,var(--sf-brand) 45%,var(--checkout-border)); }
.build-checkout-shipping__quote[data-state="loading"] strong{ color:var(--sf-brand); animation:checkout-usps-pulse 1s ease-in-out infinite alternate; }
.build-checkout-shipping__quote[data-state="error"]{ border-color:color-mix(in srgb,#ef4444 50%,var(--checkout-border)); }
@keyframes checkout-usps-pulse{ to{ opacity:.52; } }
.build-checkout-notifications{
  margin-top:12px; padding:11px 12px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(180px,.85fr);
  gap:14px; align-items:center; border:1px solid var(--checkout-border); border-radius:10px; background:var(--sf-tile);
}
.build-checkout-notifications__choice{ min-width:0; display:flex; align-items:center; gap:11px; cursor:pointer; }
.build-checkout-notifications__choice input{
  appearance:none; width:32px; height:18px; flex:none; padding:2px; border:1px solid var(--sf-box);
  border-radius:999px; background:var(--sf-card); cursor:pointer; transition:background .14s,border-color .14s;
}
.build-checkout-notifications__choice input::after{
  content:''; display:block; width:12px; height:12px; border-radius:50%; background:var(--sf-glyph);
  transition:transform .16s ease,background .14s;
}
.build-checkout-notifications__choice input:checked{ border-color:var(--sf-brand); background:var(--sf-brand); }
.build-checkout-notifications__choice input:checked::after{ background:#fff; transform:translateX(14px); }
.build-checkout-notifications__choice input:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:2px; }
.build-checkout-notifications__choice > span{ min-width:0; display:grid; gap:4px; }
.build-checkout-notifications__choice strong{ color:var(--sf-ink); font:650 var(--checkout-small-font-size)/1.2 var(--sf-font); }
.build-checkout-notifications__choice small{ color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.3 var(--sf-font); }
.build-checkout-notifications__phone{ min-width:0; display:grid; gap:5px; }
.build-checkout-notifications__phone > span{ color:var(--sf-body); font:650 var(--checkout-small-font-size)/1 var(--sf-font); }
.build-checkout-notifications__phone input{
  width:100%; min-width:0; height:38px; padding:0 11px; border:1px solid var(--checkout-border); border-radius:9px;
  outline:0; background:var(--sf-card); color:var(--sf-ink); font:500 12.5px/1 var(--sf-font);
}
.build-checkout-notifications__phone input:focus{ border-color:var(--sf-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-brand) 14%,transparent); }
.build-checkout-notifications__phone small{ color:var(--sf-ok); font:600 var(--checkout-small-font-size)/1.2 var(--sf-font); }
.build-checkout-notifications__phone small[hidden]{ display:none; }
.build-checkout-section__next{
  min-height:36px; margin:13px 0 0 auto; padding:0 13px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:9px; background:var(--sf-brand); color:#fff; cursor:pointer;
  font:700 var(--checkout-small-font-size)/1 var(--sf-font); transition:background .14s,transform .14s,opacity .14s;
}
.build-checkout-section__next:hover:not(:disabled){ background:var(--sf-brand-ink); transform:translateY(-1px); }
.build-checkout-section__next:disabled{ opacity:.42; cursor:not-allowed; }
.build-checkout-section__next:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:2px; }
.build-checkout-payment-methods{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.build-checkout-payment-methods button{
  min-height:36px; padding:0 12px; border:1px solid var(--checkout-border); border-radius:9px;
  background:var(--sf-tile); color:var(--sf-body); cursor:pointer;
  font:650 var(--checkout-small-font-size)/1 var(--sf-font); transition:background .14s,color .14s,border-color .14s,box-shadow .14s;
}
.build-checkout-payment-methods button:hover{ background:var(--sf-tile-hover); color:var(--sf-ink); }
.build-checkout-payment-methods button[aria-checked="true"]{
  border-color:var(--sf-brand); background:color-mix(in srgb,var(--sf-brand) 12%,var(--sf-tile));
  color:var(--sf-brand); box-shadow:inset 0 0 0 1px var(--sf-brand);
}
.build-checkout-payment-methods button:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:2px; }
.build-checkout-payment-panel[hidden]{ display:none; }
.build-checkout-payment-panel--wallet{
  min-height:76px; padding:12px 13px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  border:1px solid var(--checkout-border); border-radius:10px; background:var(--sf-tile);
}
.build-checkout-payment-panel--wallet > span{ min-width:0; display:grid; gap:5px; }
.build-checkout-payment-panel--wallet strong{ color:var(--sf-ink); font:750 14px/1 var(--sf-font); }
.build-checkout-payment-panel--wallet small{ color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.35 var(--sf-font); }
.build-checkout-payment-panel--wallet button{
  min-height:38px; padding:0 15px; flex:none; border:0; border-radius:9px;
  background:var(--sf-brand); color:#fff; cursor:pointer; font:700 var(--checkout-small-font-size)/1 var(--sf-font);
}
.build-checkout-payment-panel--wallet button:hover{ background:var(--sf-brand-ink); }
.build-checkout-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.build-checkout-fields label{ min-width:0; display:grid; gap:5px; }
.build-checkout-fields label > span{ color:var(--sf-body); font:650 var(--checkout-small-font-size)/1 var(--sf-font); }
.build-checkout-fields input{
  width:100%; min-width:0; height:38px; padding:0 11px; border:1px solid var(--checkout-border); border-radius:9px;
  outline:0; background:var(--sf-tile); color:var(--sf-ink); font:500 12.5px/1 var(--sf-font);
  transition:border-color .14s,box-shadow .14s,background .14s;
}
.build-checkout-fields input::placeholder{ color:var(--sf-muted); opacity:.75; }
.build-checkout-fields input:focus{ border-color:var(--sf-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-brand) 14%,transparent); }
.build-checkout-field--wide{ grid-column:span 2; }
.build-checkout-fields--payment{ grid-template-columns:1.35fr .7fr .55fr; }
.build-checkout-form__foot{ position:sticky; z-index:2; bottom:-18px; margin-top:13px; padding:12px 0 2px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--sf-panel) 0%,transparent),var(--sf-panel) 22%); }
.build-checkout-form__foot p{ margin:0; max-width:35ch; color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.4 var(--sf-font); }
.build-checkout-form__foot p[data-state="ready"]{ color:var(--sf-ok); font-weight:600; }
.build-checkout-form__submit{
  min-width:210px; min-height:43px; padding:0 15px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:11px; background:var(--sf-brand); color:#fff; cursor:pointer;
  font:700 12.5px/1 var(--sf-font); transition:background .14s,transform .14s,box-shadow .14s;
}
.build-checkout-form__submit strong{ font:750 13px/1 var(--sf-font); }
.build-checkout-form__submit svg{ width:14px; height:14px; }
.build-checkout-form__submit:hover{ background:var(--sf-brand-ink); transform:translateY(-1px); box-shadow:0 8px 20px color-mix(in srgb,var(--sf-brand) 24%,transparent); }
.build-checkout-form__submit:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:3px; }
.build-checkout-confirmation{
  min-height:100%; padding:0 18px; display:grid;
  grid-template-columns:340px minmax(220px,1fr); justify-content:center; align-items:center; gap:18px;
  border:0; border-radius:16px; background:var(--sf-panel);
}
.build-checkout-confirmation[hidden]{ display:none; }
.build-checkout-confirmation > .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.build-checkout-confirmation__preferences{
  width:100%; max-width:440px; padding:22px; border:1px solid var(--checkout-border); border-radius:12px;
  background:var(--sf-card); box-shadow:0 1px 2px rgba(16,18,28,.05);
}
.build-checkout-confirmation__eyebrow{ color:var(--sf-ok); font:800 var(--checkout-small-font-size)/1 var(--sf-font); letter-spacing:.12em; text-transform:uppercase; }
.build-checkout-confirmation__preferences h3{ margin:7px 0 0; color:var(--sf-ink); font:750 20px/1.16 var(--sf-font); letter-spacing:-.025em; }
.build-checkout-confirmation .build-checkout-notifications{ width:100%; margin-top:18px; grid-template-columns:1fr; background:var(--sf-tile); }
.build-checkout-confirmation__status{ margin:12px 0 0; color:var(--sf-body); font:500 12px/1.45 var(--sf-font); }
.build-checkout-confirmation__status[data-state="ready"]{ color:var(--sf-ok); font-weight:650; }
.build-checkout-confirmation__actions{ margin-top:18px; display:flex; justify-content:flex-end; gap:9px; }
.build-checkout-confirmation__actions button{
  min-height:40px; padding:0 15px; border:1px solid var(--checkout-border); border-radius:10px;
  background:var(--sf-card); color:var(--sf-body); cursor:pointer; font:700 var(--checkout-small-font-size)/1 var(--sf-font);
}
.build-checkout-confirmation__actions button:last-child{ border-color:var(--sf-brand); background:var(--sf-brand); color:#fff; }
.build-checkout-confirmation__actions button:hover:not(:disabled){ transform:translateY(-1px); }
.build-checkout-confirmation__actions button:last-child:hover:not(:disabled){ background:var(--sf-brand-ink); }
.build-checkout-confirmation__actions button:disabled{ opacity:.45; cursor:not-allowed; }
.build-checkout-confirmation__actions button:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:2px; }

/* export/order-tracking-4a.html — copied as a real checkout component, with
   the demo values replaced at runtime by the completed cart and selected shop. */
.ordertrack-reference{
  width:340px; display:flex; flex-direction:column; align-items:center; gap:16px;
  color:#16181c; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.ordertrack-tabs{ width:250px; padding:4px; display:flex; gap:4px; border-radius:9px; background:#dededa; }
.ordertrack-tabs button{
  flex:1; height:32px; padding:0; border:0; border-radius:7px; background:transparent; color:#6b7280;
  cursor:pointer; font:600 12.5px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.ordertrack-tabs button[aria-selected="true"]{ background:#16181c; color:#fff; }
.ordertrack-tabs button:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }
.ordertrack-card{
  width:340px; overflow:hidden; border-radius:12px; background:#fff; color:#16181c;
  box-shadow:0 1px 2px rgba(16,18,28,.06),0 14px 30px -12px rgba(16,18,28,.24);
}
.ordertrack-head{ padding:14px 16px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ordertrack-head__copy{ min-width:0; display:grid; gap:4px; }
.ordertrack-head__copy small{
  overflow:hidden; color:#a3a3ac; font:400 10px/1 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap;
}
.ordertrack-head__copy strong{
  display:-webkit-box; overflow:hidden; color:#16181c; font:600 15.5px/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif;
  letter-spacing:-.015em; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.ordertrack-status{
  flex:none; padding:4px 9px; display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  background:#e9f7ee; color:#17794c; font:400 10.5px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.08em;
}
.ordertrack-status i{ width:6px; height:6px; border-radius:999px; background:#1fa463; }
.ordertrack-status b{ font:inherit; }
.ordertrack-steps{ padding:16px 16px 0; display:flex; align-items:center; }
.ordertrack-step{ width:66px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ordertrack-step > i{ width:9px; height:9px; border-radius:999px; background:#dcdce0; }
.ordertrack-step > b{
  color:#a3a3ac; font:400 9.5px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.06em;
}
.ordertrack-step.is-complete > i,.ordertrack-card[data-ordertrack-stage="transit"] [data-ordertrack-ship-step] > i{ background:#1fa463; }
.ordertrack-step.is-complete > b,.ordertrack-card[data-ordertrack-stage="transit"] [data-ordertrack-ship-step] > b{ color:#16181c; }
.ordertrack-line{ flex:1; height:2px; margin-bottom:18px; background:#ececef; }
.ordertrack-line.is-complete,.ordertrack-card[data-ordertrack-stage="transit"] [data-ordertrack-ship-line]{ background:#1fa463; }
.ordertrack-media{ margin:16px 16px 0; overflow:hidden; border:1px solid #ececef; border-radius:10px; }
.ordertrack-media[hidden]{ display:none; }
.ordertrack-media__visual{ position:relative; height:176px; display:flex; align-items:center; justify-content:center; }
.ordertrack-media__visual > span{
  color:#9ca3af; font:400 9.5px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.08em;
}
.ordertrack-media__visual > em{
  position:absolute; top:10px; left:10px; padding:3px 8px; display:inline-flex; align-items:center; gap:5px;
  border-radius:999px; font:400 9.5px/1 ui-monospace,'SF Mono',Menlo,monospace; font-style:normal; letter-spacing:.08em;
}
.ordertrack-media__visual > em i{ width:6px; height:6px; border-radius:999px; }
.ordertrack-media__visual > small{
  position:absolute; right:10px; bottom:10px; color:#9ca3af; font:400 9.5px/1 ui-monospace,'SF Mono',Menlo,monospace;
}
.ordertrack-media__visual--camera{ background:#1b1c20; }
.ordertrack-media__visual--camera > span{ color:#6b7280; }
.ordertrack-live{ background:rgba(0,0,0,.55); color:#fff; }
.ordertrack-live i{ background:#e5484d; }
.ordertrack-media__visual--map{ background:repeating-linear-gradient(135deg,#f7f7f5 0 7px,#efefec 7px 14px); }
.ordertrack-moving{ border:1px solid #e6e6e9; background:rgba(255,255,255,.9); color:#16181c; }
.ordertrack-moving i{ background:#2563eb; }
.ordertrack-media__visual--map > small{ padding:3px 8px; border:1px solid #e6e6e9; border-radius:6px; background:rgba(255,255,255,.9); color:#6b7280; }
.ordertrack-media__foot{ padding:11px 13px; background:#fff; }
.ordertrack-media__foot > span,.ordertrack-media__foot--single{
  display:flex; align-items:baseline; justify-content:space-between; color:#6b7280;
  font:400 10.5px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.06em;
}
.ordertrack-media__foot b{ color:#16181c; font:inherit; }
.ordertrack-media__foot > i{ height:5px; margin-top:8px; display:block; overflow:hidden; border-radius:999px; background:#f1f1ef; }
.ordertrack-media__foot > i b{ display:block; height:100%; background:#e9a020; }
.ordertrack-carrier{
  margin:10px 16px 0; padding:11px 13px; display:grid; grid-template-columns:1fr auto; gap:6px 12px;
  border-radius:9px; background:#f7f7f5; color:#6b7280; font-size:12.5px;
}
.ordertrack-carrier[hidden]{ display:none; }
.ordertrack-carrier dt,.ordertrack-carrier dd{ margin:0; }
.ordertrack-carrier dd{ color:#16181c; font-family:ui-monospace,'SF Mono',Menlo,monospace; }
.ordertrack-cancel{
  margin:12px 16px 0; padding:11px 13px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 12px;
  border:1px dashed #e3c48a; border-radius:9px; background:#fdf7eb;
}
.ordertrack-cancel[hidden]{ display:none; }
.ordertrack-cancel > span{ display:grid; gap:3px; }
.ordertrack-cancel small{ color:#a97520; font:400 10px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.08em; }
.ordertrack-cancel strong{ color:#16181c; font:600 21px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:-.01em; }
.ordertrack-cancel button{
  height:32px; padding:0 13px; border:1px solid #e3c48a; border-radius:8px; background:#fff; color:#a9521f;
  cursor:pointer; font:600 12.5px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.ordertrack-cancel > i{ grid-column:1 / -1; height:4px; overflow:hidden; border-radius:999px; background:#f0e3c6; }
.ordertrack-cancel > i b{ display:block; height:100%; background:#e9a020; }
.ordertrack-cancelled{ margin:12px 16px 0; padding:10px 13px; border-radius:9px; background:#f7f7f5; color:#6b7280; font-size:12.5px; }
.ordertrack-cancelled[hidden]{ display:none; }
.ordertrack-cancelled button{ padding:0; border:0; background:transparent; color:#2563eb; cursor:pointer; font:600 inherit; }
.ordertrack-shop{ margin:14px 16px 0; padding-top:13px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:11px; border-top:1px solid #f1f1ef; }
.ordertrack-shop__mark{ width:34px; height:34px; border:1px solid #ececef; border-radius:999px; background:#f6f6f4; }
.ordertrack-shop > span:nth-child(2){ min-width:0; display:grid; gap:3px; }
.ordertrack-shop strong{ overflow:hidden; font-size:13.5px; font-weight:600; letter-spacing:-.01em; text-overflow:ellipsis; white-space:nowrap; }
.ordertrack-shop small{ color:#6b7280; font:400 10px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.06em; }
.ordertrack-shop button,.ordertrack-actions button{
  height:32px; padding:0 13px; border:1px solid #e0e0e4; border-radius:8px; background:#fff; color:#16181c;
  cursor:pointer; font:600 12.5px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.ordertrack-actions{ padding:13px 16px 16px; display:flex; gap:8px; }
.ordertrack-actions button{ height:40px; border-radius:9px; font-size:13px; }
.ordertrack-actions button:first-child{ flex:1; border-color:#16181c; background:#16181c; color:#fff; }
.ordertrack-actions button:last-child{ flex:none; padding-inline:14px; }
.ordertrack-shop button:hover,.ordertrack-actions button:last-child:hover{ border-color:#16181c; }
.ordertrack-actions button:first-child:hover{ border-color:#2563eb; background:#2563eb; }
:root[data-theme="dark"] .ordertrack-reference{ filter:none; }
@media (max-width:850px){
  .build-checkout-confirmation{ grid-template-columns:1fr; align-content:start; justify-items:center; overflow:auto; }
  .build-checkout-confirmation__preferences{ max-width:340px; }
}
/* end export/order-tracking-4a.html */

/* Checkout v2 follows the supplied Confirm-and-pay reference: a near-full
   workspace sheet, flat order rows, restrained type, and numbered form blocks.
   The existing cart, USPS, payment, and confirmation controls remain live. */
.build-checkout-overlay{
  padding:6px; background:color-mix(in srgb,var(--sf-panel) 82%,transparent);
  backdrop-filter:blur(5px) saturate(.82); -webkit-backdrop-filter:blur(5px) saturate(.82);
}
:root[data-theme="dark"] .build-checkout-overlay{ background:rgba(8,8,8,.72); }
.build-checkout-dialog{
  width:min(1400px,calc(100vw - 12px)); height:calc(100vh - 12px); max-height:980px;
  display:flex; flex-direction:column; border-radius:10px; background:var(--sf-panel);
  box-shadow:0 18px 54px rgba(15,23,42,.18); transform:translateY(14px) scale(.985);
  transform-origin:center bottom;
}
.build-checkout-dialog__head{
  flex:0 0 64px; min-height:64px; height:64px; padding:0 14px 0 20px;
  display:flex; align-items:center; gap:13px; background:var(--sf-panel);
}
.build-checkout-dialog__head > .build-checkout-dialog__brand{
  width:32px; height:32px; padding:3px; display:grid; place-items:center;
}
.build-checkout-dialog__brand img{ width:100%; height:100%; display:block; object-fit:contain; }
.build-checkout-dialog__head .build-object-panel__head-copy{ display:grid; gap:3px; }
.build-checkout-dialog__head .build-object-panel__eyebrow{
  color:#b56700; font:650 var(--checkout-small-font-size)/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
}
.build-checkout-dialog__head .build-object-panel__head-copy > strong{
  color:var(--sf-ink); font:720 15px/1.05 var(--sf-font); letter-spacing:-.01em;
}
.build-checkout-dialog__head .build-object-panel__subtext{ display:none; }
.build-checkout-dialog__actions{ gap:8px; }
.build-checkout-dialog__encrypted{
  display:inline-flex; align-items:center; gap:6px; padding:0 8px; color:var(--sf-body);
  font:650 var(--checkout-small-font-size)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.build-checkout-dialog__encrypted svg{ width:12px; height:12px; }
.build-checkout-dialog__save,.build-checkout-dialog__close{
  min-height:30px; height:30px; border-radius:7px; background:transparent;
  box-shadow:none; font-size:var(--checkout-small-font-size);
}
.build-checkout-dialog__close{ width:30px; }
.build-checkout-form{
  grid-template-columns:minmax(360px,44%) minmax(520px,56%); background:var(--sf-panel);
}
.build-checkout-order{
  padding:24px; gap:0; border-right:1px solid var(--checkout-border); background:var(--sf-panel);
}
.build-checkout-order__heading{ min-height:44px; padding:0 0 12px; border-bottom:1px solid var(--checkout-border); }
.build-checkout-order__heading > span{ min-width:0; display:grid; gap:4px; }
.build-checkout-order__heading > span > small{
  color:#b56700; font:650 var(--checkout-small-font-size)/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
}
.build-checkout-order__heading > span > strong{
  padding:0; border-radius:0; background:transparent; color:var(--sf-ink); font:720 14px/1.1 var(--sf-font);
}
.build-checkout-order__items{ min-height:0; display:grid; gap:0; overflow:auto; }
.build-checkout-order__item{
  min-height:98px; padding:14px; grid-template-columns:56px minmax(0,1fr) auto;
  column-gap:11px; row-gap:6px; border:1px solid var(--checkout-border);
  border-radius:9px; background:var(--sf-card); overflow:hidden;
}
.build-checkout-order__item-mark{
  width:56px; height:56px; border-radius:7px; background:var(--sf-tile);
}
.build-checkout-order__item-copy{ grid-column:2; grid-row:1; align-self:center; }
.build-checkout-order__item strong{ font:700 12.5px/1.2 var(--sf-font); }
.build-checkout-order__item small{
  margin-top:5px; font:500 var(--checkout-small-font-size)/1.25 var(--mono);
}
.build-checkout-order__item-price{
  grid-column:3; grid-row:1; align-self:start; color:var(--sf-ink);
  font:700 var(--checkout-small-font-size)/1.2 var(--mono);
}
.build-checkout-order__controls{
  grid-column:2 / 4; grid-row:2; justify-content:flex-start; gap:9px; align-self:start;
}
.build-checkout-order__quantity{
  height:25px; grid-template-columns:22px 28px 22px; border-radius:5px; background:transparent;
}
.build-checkout-order__quantity-label{ display:none; }
.build-checkout-order__quantity button{ width:22px; }
.build-checkout-order__quantity input{ width:28px; border-inline:1px solid var(--checkout-border); font-size:var(--checkout-small-font-size); }
.build-checkout-order__remove{
  width:auto; height:25px; padding:0 1px; border:0; border-radius:0; background:transparent;
  color:var(--sf-body); font:500 var(--checkout-small-font-size)/1 var(--sf-font); text-decoration:underline; text-underline-offset:3px;
}
.build-checkout-order__save-object{
  width:auto; height:25px; min-height:25px; padding:0 1px; border:0; border-radius:0; background:transparent;
  color:var(--sf-brand); font:600 var(--checkout-small-font-size)/1 var(--sf-font); text-decoration:underline; text-underline-offset:3px;
}
.build-checkout-order__save-object:hover{ border:0; background:transparent; color:var(--sf-brand-ink); }
.build-checkout-order__remove:hover{ border:0; background:transparent; color:#dc2626; }
.build-checkout-order__location-picker{ margin-top:auto; }
.build-checkout-order__location{
  margin-top:0; padding:10px 12px; border:1px solid var(--checkout-border);
  border-radius:9px; background:var(--sf-card);
}
.build-checkout-order__mark{ width:38px; height:38px; border-radius:6px; }
.build-checkout-order__location > span:last-child small{ font-size:var(--checkout-small-font-size); letter-spacing:.1em; text-transform:uppercase; }
.build-checkout-order__location > span:last-child strong{ margin-top:3px; font-size:var(--checkout-small-font-size); }
.build-checkout-order__costs{ padding:12px 0 10px; display:grid; gap:8px; border-bottom:1px solid var(--checkout-border); }
.build-checkout-order__costs > span{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.build-checkout-order__costs small{ color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.2 var(--sf-font); }
.build-checkout-order__costs strong,.build-checkout-order__costs em{
  color:var(--sf-ink); font:650 var(--checkout-small-font-size)/1.2 var(--mono); font-style:normal;
}
.build-checkout-order__costs em{ color:var(--sf-body); }
.build-checkout-order__total{ padding-top:12px; border-top:0; }
.build-checkout-order__total small{ font-size:var(--checkout-small-font-size); }
.build-checkout-order__total em{ margin-top:2px; font-size:var(--checkout-small-font-size); letter-spacing:.06em; text-transform:uppercase; }
.build-checkout-order__total > strong{ font-size:26px; }
.build-checkout-details{
  padding:22px 28px 18px; gap:11px; background:color-mix(in srgb,var(--sf-panel) 97%,var(--sf-tile));
}
.build-checkout-express,.build-checkout-divider,.build-checkout-section,.build-checkout-recommendations{ flex:none; }
.build-checkout-express{
  padding:14px 16px 16px; border:1px solid var(--checkout-border); border-radius:9px; background:var(--sf-card);
}
.build-checkout-express header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.build-checkout-express header > span{
  color:var(--sf-body); font:650 var(--checkout-small-font-size)/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
}
.build-checkout-express header > em{
  padding:4px 7px; border:1px solid color-mix(in srgb,#b56700 48%,var(--checkout-border)); border-radius:4px;
  color:#b56700; font:650 var(--checkout-small-font-size)/1 var(--mono);
  font-style:normal; letter-spacing:.09em; text-transform:uppercase;
}
.build-checkout-express .build-checkout-payment-methods{ margin:11px 0 0; }
.build-checkout-payment-methods{ gap:8px; }
.build-checkout-payment-methods button{
  min-height:40px; border-radius:6px; background:transparent; color:var(--sf-ink); font-size:var(--checkout-small-font-size);
}
.build-checkout-payment-methods button[aria-checked="true"]{
  border-color:var(--sf-ink); background:var(--sf-ink); color:var(--sf-panel); box-shadow:none;
}
.build-checkout-divider{ position:relative; height:32px; display:grid; place-items:center; }
.build-checkout-divider::before{ content:''; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--checkout-border); }
.build-checkout-divider span{
  position:relative; padding:0 12px; color:var(--sf-muted); background:var(--sf-panel);
  font:550 var(--checkout-small-font-size)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
.build-checkout-section{ padding:0; border-radius:9px; background:var(--sf-card); }
.build-checkout-section[data-open="true"]{
  border-color:var(--checkout-border); background:var(--sf-card); box-shadow:none;
}
.build-checkout-section__heading{ min-height:43px; padding:0 16px; gap:9px; }
.build-checkout-section[data-open="true"] .build-checkout-section__heading{ margin-bottom:0; }
.build-checkout-section__step{
  width:19px; height:auto; border-radius:0; background:transparent; color:#b56700;
  font:650 var(--checkout-small-font-size)/1 var(--mono);
}
.build-checkout-section[data-complete="true"] .build-checkout-section__step{ background:transparent; color:var(--sf-ok); }
.build-checkout-section__heading > span:nth-child(2){ display:flex; align-items:center; justify-content:space-between; gap:10px; flex:1; }
.build-checkout-section__heading strong{ font-size:12.5px; }
.build-checkout-section__heading small{
  font:550 var(--checkout-small-font-size)/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
}
.build-checkout-section__heading > i{ width:6px; height:6px; }
.build-checkout-section__body{ padding:16px; border-top:1px solid var(--checkout-border); }
.build-checkout-fields{ gap:9px; }
.build-checkout-fields--contact{ grid-template-columns:1fr; }
.build-checkout-fields--delivery{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.build-checkout-fields label{ gap:5px; }
.build-checkout-fields label > span,.build-checkout-shipping__zip > label,.build-checkout-shipping-method > span:first-child{
  color:var(--sf-body); font:600 var(--checkout-small-font-size)/1 var(--mono);
  letter-spacing:.08em; text-transform:uppercase;
}
.build-checkout-fields input,.build-checkout-shipping input{
  height:40px; border-radius:6px; background:transparent; font-size:var(--checkout-small-font-size);
}
.build-checkout-fields input[readonly]{ background:var(--sf-tile); }
.build-checkout-field--wide{ grid-column:1 / -1; }
.build-checkout-field--half{ grid-column:span 3; }
.build-checkout-field--third{ grid-column:span 2; }
.build-checkout-email-updates{
  display:flex !important; grid-auto-flow:column; grid-template-columns:17px minmax(0,1fr); align-items:center; justify-content:start;
  width:max-content; cursor:pointer;
}
.build-checkout-email-updates input{ width:17px; height:17px; accent-color:var(--sf-brand); }
.build-checkout-email-updates > span{ font:500 var(--checkout-small-font-size)/1.2 var(--sf-font) !important; letter-spacing:0 !important; text-transform:none !important; }
.build-checkout-shipping__zip{ display:grid; gap:5px; }
.build-checkout-shipping__zip > span{ display:flex; gap:5px; }
.build-checkout-shipping__zip > span input{ flex:1; }
.build-checkout-shipping__zip > span button{
  min-width:36px; width:36px; height:40px; padding:0; border-radius:6px;
}
.build-checkout-shipping__zip > span button > span{ display:none; }
.build-checkout-shipping__zip > small{ min-height:0; font-size:var(--checkout-small-font-size); }
.build-checkout-shipping-method{ grid-column:1 / -1; display:grid; gap:7px; margin-top:2px; }
.build-checkout-shipping__quote{
  min-height:64px; padding:10px 12px; border-radius:7px; background:transparent;
  border-color:var(--sf-brand); box-shadow:inset 0 0 0 1px var(--sf-brand);
}
.build-checkout-shipping__quote small{ color:var(--sf-brand); text-transform:uppercase; letter-spacing:.08em; }
.build-checkout-shipping__quote strong{ font-size:14px; }
.build-checkout-shipping__quote em{ font-size:var(--checkout-small-font-size); }
.build-checkout-section__next{
  width:100%; min-height:44px; margin:14px 0 0; border-radius:6px; font-size:var(--checkout-small-font-size);
}
.build-checkout-payment-panel--wallet{ border-radius:7px; background:transparent; }
.build-checkout-fields--payment{ grid-template-columns:1.2fr .7fr .55fr; }
.build-checkout-form__foot{ position:static; bottom:auto; margin-top:14px; padding:0; display:grid; gap:9px; background:none; }
.build-checkout-form__foot p{ max-width:none; text-align:center; font-size:var(--checkout-small-font-size); }
.build-checkout-form__submit{ width:100%; min-height:46px; border-radius:6px; }
.build-checkout-recommendations{
  border:1px solid var(--checkout-border); border-radius:9px; background:var(--sf-card); overflow:hidden;
}
.build-checkout-recommendations[hidden]{ display:none; }
.build-checkout-recommendations > header{
  min-height:58px; padding:12px 16px; display:flex; align-items:center; border-bottom:1px solid var(--checkout-border);
}
.build-checkout-recommendations > header > span{ min-width:0; display:grid; gap:5px; }
.build-checkout-recommendations > header small{
  color:#b56700; font:650 var(--checkout-small-font-size)/1 var(--mono);
  letter-spacing:.1em; text-transform:uppercase;
}
.build-checkout-recommendations > header strong{ color:var(--sf-ink); font:720 14px/1.2 var(--sf-font); }
.build-checkout-recommendations__items{ display:grid; }
.build-checkout-recommendation{
  min-width:0; min-height:76px; padding:10px 16px; display:grid;
  grid-template-columns:52px minmax(0,1fr) auto auto; gap:12px; align-items:center;
  border-bottom:1px solid var(--checkout-border);
}
.build-checkout-recommendation:last-child{ border-bottom:0; }
.build-checkout-recommendation__mark{
  position:relative; width:52px; height:52px; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--checkout-border); border-radius:7px; background:var(--sf-tile); color:var(--sf-glyph);
}
.build-checkout-recommendation__mark img{
  width:100%; height:100%; display:block; object-fit:contain; padding:4px; box-sizing:border-box;
  opacity:0; transform:scale(.94); transition:opacity .18s ease,transform .22s ease;
}
.build-checkout-recommendation[data-preview-state="ready"] .build-checkout-recommendation__mark img{ opacity:1; transform:scale(1); }
.build-checkout-recommendation__fallback{ position:absolute; width:20px; height:20px; }
.build-checkout-recommendation__fallback svg{ display:block; width:100%; height:100%; }
.build-checkout-recommendation[data-preview-state="ready"] .build-checkout-recommendation__fallback{ display:none; }
.build-checkout-recommendation__copy{ min-width:0; display:grid; gap:5px; }
.build-checkout-recommendation__copy strong{
  overflow:hidden; color:var(--sf-ink); font:700 12.5px/1.2 var(--sf-font); text-overflow:ellipsis; white-space:nowrap;
}
.build-checkout-recommendation__copy small{
  color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.2 var(--mono);
}
.build-checkout-recommendation__price{
  color:var(--sf-ink); font:700 var(--checkout-small-font-size)/1 var(--mono);
}
.build-checkout-recommendation__add{
  min-width:54px; min-height:32px; padding:0 10px; border:1px solid var(--checkout-border); border-radius:6px;
  background:transparent; color:var(--sf-ink); cursor:pointer; font:700 var(--checkout-small-font-size)/1 var(--sf-font);
  transition:border-color .14s,background .14s,color .14s,transform .14s;
}
.build-checkout-recommendation__add:hover:not(:disabled){
  border-color:var(--sf-brand); background:var(--sf-brand); color:#fff; transform:translateY(-1px);
}
.build-checkout-recommendation__add:focus-visible{ outline:2px solid var(--sf-brand); outline-offset:2px; }
.build-checkout-recommendation__add:disabled{ opacity:.52; cursor:wait; }
.build-checkout-recommendations__status{
  margin:0; padding:18px 16px; color:var(--sf-body); font:500 var(--checkout-small-font-size)/1.4 var(--sf-font);
}
.build-checkout-confirmation{ border-radius:9px; }
@media (max-width:850px){
  .build-checkout-overlay{ padding:8px; }
  .build-checkout-dialog{ height:min(760px,100%); }
  .build-checkout-form{ grid-template-columns:minmax(220px,.72fr) minmax(380px,1.28fr); }
  .build-checkout-order,.build-checkout-details{ padding:16px; }
}
@media (max-width:680px){
  .build-checkout-dialog{ width:100%; height:100%; border-radius:14px; }
  .build-checkout-form{ grid-template-columns:1fr; overflow:auto; }
  .build-checkout-order{ overflow:visible; border-right:0; border-bottom:1px solid var(--line); }
  .build-checkout-details{ overflow:visible; }
  .build-checkout-dialog__save span{ display:none; }
  .build-checkout-dialog__save{ width:34px; padding:0; justify-content:center; }
  .build-checkout-payment-panel--wallet{ align-items:stretch; flex-direction:column; }
  .build-checkout-shipping,.build-checkout-notifications{ grid-template-columns:1fr; }
  .build-checkout-shipping__zip > span{ flex-wrap:wrap; }
  .build-checkout-shipping__zip > span button{ flex:1 0 92px; }
}
@media (prefers-reduced-motion:reduce){
  body[data-browse-cart-transition] .pfboard__add.is-added,
  body[data-browse-cart-transition] .market-rail__drawer.is-object-focus,
  body[data-browse-cart-transition] .view[data-view="browse"] .center-panel::after{ animation:none; }
  .build-checkout-overlay,.build-checkout-dialog{ transition:none; }
  .build-checkout-shipping__zip > span button[data-loading="true"] svg{ animation:none; }
}
/* Sort and pickup stay reachable through a long shop list, so both bars pin
   to the top of the scroller against the panel's own fill. */
.build-shops__head{
  position:sticky; top:0; z-index:2; height:var(--sf-shops-head); padding:20px 20px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--sf-panel);
}
.build-shops__head strong{
  color:var(--sf-ink); font:700 14.5px/1 var(--sf-font); letter-spacing:-.015em; text-transform:none;
}
.build-shops__head span{ color:var(--sf-note); font:400 12px/1 var(--sf-font); white-space:nowrap; }
.build-shops__filters{
  position:sticky; top:var(--sf-shops-head); z-index:2; padding:0 20px 14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  background:var(--sf-panel);
}
.build-shops__chip{
  padding:8px 13px; border:0; border-radius:999px;
  background:var(--sf-chip); color:var(--sf-body); font:500 12px/1 var(--sf-font);
  font-family:var(--sf-font); cursor:pointer; white-space:nowrap;
  transition:background .14s,color .14s,opacity .14s;
}
.build-shops__chip:hover{ background:var(--sf-chip-hover); }
.build-shops__chip[aria-pressed="true"]{ background:var(--sf-chip-on); color:var(--sf-chip-on-fg); }
.build-shops__chip[aria-pressed="true"]:hover{ background:var(--sf-chip-on); opacity:.85; }
/* Pickup is not a fifth sort option, so it carries a checkbox and sits apart
   from the sort set rather than sharing its selected state. */
.build-shops__chip--toggle{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
}
.build-shops__chip--toggle::before{
  content:''; width:12px; height:12px; flex:none; margin:0; vertical-align:0;
  border:1.4px solid var(--sf-box); border-radius:3px; background:transparent;
  transition:background .14s,border-color .14s;
}
.build-shops__chip--toggle[aria-pressed="true"]::before{
  border-color:var(--sf-chip-on-fg); background:var(--sf-chip-on-fg);
}
.build-shops__rows{
  /* The first recommendation badge straddles its card edge. Keep a lane above
     that edge so the sticky filters never cover the upper half of the pill. */
  padding:11px 14px 14px; display:grid; gap:10px;
}
.build-shops__row{
  position:relative; min-width:0; padding:20px 14px; display:grid; grid-template-columns:54px minmax(0,1fr) 76px;
  align-items:center; gap:8px; border:1px solid color-mix(in srgb,var(--sf-box) 52%,transparent); border-radius:14px;
  background:var(--sf-card); cursor:pointer;
  transform-origin:center; transition:background .14s,box-shadow .14s,transform .14s ease;
}
.build-shops__row:hover,
.build-shops__row:focus-visible{
  z-index:1; background:var(--sf-card-hover); outline:0; transform:scale(1.018);
}
.build-shops__row:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-brand) 26%,transparent);
}
.build-shops__row[data-recommended="true"]{
  background:var(--sf-card-hover); box-shadow:none;
}
.build-shops__row[data-selected="true"]{
  background:var(--sf-card-hover); box-shadow:inset 0 0 0 1.5px var(--sf-brand);
}
.build-shops__row[data-selected="true"]:focus-visible{
  box-shadow:inset 0 0 0 1.5px var(--sf-brand),0 0 0 3px color-mix(in srgb,var(--sf-brand) 26%,transparent);
}
/* Use the same real machine imagery as the corresponding Mapbox markers, so
   each quote row can be recognized before the location name is read. */
.build-shops__mark{
  width:54px; height:54px; display:grid; place-items:center; overflow:hidden;
  padding:4px; border:1px solid color-mix(in srgb,var(--sf-box) 58%,transparent);
  border-radius:12px; background:#f8fafc;
}
.build-shops__mark img{
  display:block; width:100%; height:100%; object-fit:contain; object-position:center;
  border-radius:8px; mix-blend-mode:multiply;
}
:root[data-theme="dark"] .build-shops__mark img{ mix-blend-mode:normal; }
.build-shops__copy{ min-width:0; }
.build-shops__name-line{ min-width:0; display:flex; align-items:center; gap:8px; }
.build-shops__copy strong{
  min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--sf-ink); font:650 16px/1.2 var(--sf-font); letter-spacing:-.012em;
}
.build-shops__recommended{
  position:absolute; z-index:3; top:0; left:50%; transform:translate(-50%,-50%);
  padding:4px 8px; border:1px solid var(--sf-brand); border-radius:999px;
  background:var(--sf-panel); color:var(--sf-brand-ink);
  box-shadow:0 0 0 3px var(--sf-panel);
  font:700 12px/1 var(--sf-font); letter-spacing:.05em; text-transform:uppercase;
}
.build-shops__copy > span{
  display:block; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--sf-body); font:500 13px/1.25 var(--sf-font);
}
.build-shops__copy > .build-shops__stats{
  margin-top:8px; display:flex; align-items:center; gap:16px;
}
.build-shops__stats b{
  min-width:0; flex:1 1 auto; overflow:hidden; color:var(--sf-body);
  font:500 12.5px/1.25 var(--sf-font); text-overflow:ellipsis; white-space:nowrap;
}
.build-shops__rating{
  flex:0 0 auto !important; overflow:visible !important;
  color:var(--sf-body) !important; font-weight:500 !important;
}
.build-shops__busy{ color:var(--sf-note) !important; }
.build-shops__action{
  position:relative; width:76px; min-height:52px; display:grid; place-items:center;
}
.build-shops__price-stack{
  display:grid; place-items:center; gap:4px; transition:opacity .16s,transform .16s;
}
.build-shops__price{
  color:var(--sf-ink); font:750 22px/1 var(--sf-font); letter-spacing:-.025em;
}
/* The quote is an estimate, so the row still says so — quietly, beside the
   figure, rather than as a second stacked line. */
.build-shops__price-stack > span{
  color:var(--sf-body); font:500 12px/1 var(--sf-font);
}
.build-shops__print{
  position:absolute; inset:auto 0; min-height:34px; padding:8px; border:0; border-radius:999px;
  background:var(--sf-brand); color:#fff; font:650 13px/1 var(--sf-font);
  font-family:var(--sf-font); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(4px);
  transition:background .14s,box-shadow .14s,opacity .16s,transform .16s;
}
.build-shops__row:hover .build-shops__price-stack,
.build-shops__row:focus-within .build-shops__price-stack{ opacity:0; transform:translateY(-4px); }
.build-shops__row:hover .build-shops__print,
.build-shops__row:focus-within .build-shops__print{ opacity:1; pointer-events:auto; transform:translateY(0); }
.build-shops__print:hover{ background:var(--sf-brand-ink); }
.build-shops__print:focus-visible{ outline:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-brand) 32%,transparent); }
.build-shops__empty{ margin:0; padding:4px 20px 16px; color:var(--sf-muted); font:400 12px/1.5 var(--sf-font); }


/* The storefront's padding is sized for a 400px column. Narrower than that
   it tightens rather than letting the shop rows lose their price column. */
@media (max-width:900px){
  .build-object-panel{ --sf-shops-head:44px; }
  .build-object-browser{ width:300px; }
  .build-object-focus{ right:300px; }
  .layout-build-globe[data-build-cart-panel-visible="true"] .mapboxgl-ctrl-bottom-right{ right:306px; }
  .build-object-panel__head{ padding:14px 14px 12px; }
  .build-upload{ padding:10px; grid-template-columns:30px minmax(0,1fr) auto; gap:8px; }
  .build-upload__mark{ width:30px; height:30px; }
  .build-upload__choose{ padding-inline:9px; }
  .build-print-queue{ padding:10px 10px 4px; }
  .build-print-queue__row{ padding:12px 13px; }
  .build-checkout{ padding:10px; gap:8px; }
  .build-checkout__button{ min-height:42px; }
  .build-shops__head{ padding:16px 14px 10px; }
  .build-shops__filters{ padding:0 14px 12px; }
  .build-shops__rows{ padding:11px 10px 12px; }
  .build-object-grid{ padding:0 10px 12px; }
  .build-shops__row{ padding:14px 13px; gap:11px; grid-template-columns:48px minmax(0,1fr) auto; }
  .build-shops__mark{ width:48px; height:48px; }
}
@media (max-width:680px){
  .build-object-panel{ top:0; bottom:0; }
  .build-object-browser{ right:0; width:min(52vw,300px); }
  .build-object-focus{ right:0; }
  .layout-build-globe[data-build-cart-panel-visible="true"] .mapboxgl-ctrl-bottom-right{ right:calc(min(52vw,300px) + 6px); }
  .hivead-stack{ width:min(320px,calc(100% - min(52vw,300px) - 26px)); }
  .hivead{ height:auto; min-height:320px; }
  .build-object-grid{ grid-template-columns:1fr; }
  .build-object-preview,.build-object-preview-away{ flex:0 0 180px; }
}
/* Map controls arrive from Mapbox after this document's CSS. Keep their
   chrome in the same appearance contract as every native panel. */
.mapboxgl-ctrl-group{
  background:var(--glass-surface-strong) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-md) !important;
}
.mapboxgl-ctrl-group button + button{ border-top-color:var(--line) !important; }
.mapboxgl-ctrl-attrib{
  background:var(--glass-surface-soft) !important;
  color:var(--dim) !important;
}
.mapboxgl-ctrl-attrib a{ color:var(--ink) !important; }
:root[data-theme="dark"] .mapboxgl-ctrl-icon{
  filter:invert(1) grayscale(1) brightness(1.45);
}
.layout-build-user-location{
  width:18px; height:18px; border:3px solid #fff; border-radius:50%;
  background:#2378ff; box-shadow:0 0 0 7px rgba(35,120,255,.18),0 3px 12px rgba(18,57,118,.42);
}
.layout-build-user-location::after{
  content:''; position:absolute; inset:-8px; border:1px solid rgba(35,120,255,.42); border-radius:50%;
}
/* Exact printer marker shapes from 3d_hive_improve/src/styles/mapbox-globe.css:
   photo card at street zoom, honeycomb status dot at neighborhood zoom, and
   the outlined city hexagon at globe zoom. */
.printer-node-marker{
  width:58px; height:58px; position:absolute; display:grid; place-items:center;
  padding:5px; background:var(--control-surface); border:2px solid color-mix(in srgb,var(--control-surface) 92%,transparent); border-radius:10px;
  box-shadow:0 16px 30px rgba(15,23,42,.35); cursor:pointer; pointer-events:auto;
  transition:width 160ms ease,height 160ms ease,padding 160ms ease,border-radius 160ms ease,
             background 160ms ease,box-shadow 160ms ease;
}
.layout-build-globe .printer-node-marker:not(.is-expanded):hover,
.layout-build-globe .printer-node-marker:not(.is-expanded):focus-visible{
  width:62px; height:62px; outline:0;
}
.printer-node-marker.selected{
  border-color:color-mix(in srgb,var(--accent,#e8971a) 86%,transparent);
  box-shadow:0 18px 36px color-mix(in srgb,var(--accent,#e8971a) 28%,transparent);
}
.printer-node-marker::before{
  content:""; position:absolute; left:50%; bottom:-10px; width:14px; height:14px;
  z-index:-1;
  background:var(--control-surface); border-right:2px solid color-mix(in srgb,var(--control-surface) 92%,transparent); border-bottom:2px solid color-mix(in srgb,var(--control-surface) 92%,transparent);
  box-shadow:8px 8px 16px rgba(15,23,42,.18); transform:translateX(-50%) rotate(45deg);
}
.printer-node-marker::after{
  content:""; position:absolute; inset:-8px; z-index:-1; border-radius:16px;
  background:rgba(208,145,20,.2); animation:printer-node-pulse 1.8s ease-out infinite;
}
.printer-node-marker-image{ display:block; width:100%; height:100%; min-width:0; min-height:0; }
.printer-node-marker img{ width:100%; height:100%; display:block; object-fit:contain; border-radius:6px; }
.printer-node-rating-chip{
  position:absolute; right:-6px; bottom:-6px; min-width:30px; max-width:42px; overflow:hidden;
  padding:3px 6px; color:#fff; background:#101828; border:1px solid rgba(255,255,255,.7);
  border-radius:999px; font-size:max(12px,calc(9px * var(--ui-font-scale,1))); font-weight:800; line-height:1;
  text-align:center; text-overflow:ellipsis; white-space:nowrap;
}
.printer-node-live-chip{
  position:absolute; left:-6px; top:-6px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  max-width:108px; overflow:hidden; padding:3px 7px; color:#fff; background:#101828;
  border:1px solid rgba(255,255,255,.7); border-radius:999px; font-size:max(12px,calc(9px * var(--ui-font-scale,1)));
  font-weight:800; letter-spacing:.04em; line-height:1; white-space:nowrap; text-overflow:ellipsis;
}
.printer-node-live-chip[hidden]{ display:none; }
.printer-node-live-chip.is-printing{ color:#052014; background:#34d399; border-color:rgba(255,255,255,.82); }
.printer-node-live-chip.is-printing::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 0 rgba(5,32,20,.55); animation:printer-node-live-ring 1.6s ease-out infinite;
}
@keyframes printer-node-live-ring{
  0%{ box-shadow:0 0 0 0 rgba(5,32,20,.55); }
  70%{ box-shadow:0 0 0 7px rgba(5,32,20,0); }
  100%{ box-shadow:0 0 0 0 rgba(5,32,20,0); }
}
@media (prefers-reduced-motion:reduce){
  .printer-node-live-chip.is-printing::before{ animation:none; box-shadow:none; }
}
.printer-node-marker.status-dot .printer-node-live-chip{ display:none; }
.layout-build-globe .printer-node-marker.status-dot:hover,
.layout-build-globe .printer-node-marker.status-dot:focus-visible{
  width:22px; height:19.05px;
}
/* export/shop-card-3b.html */
.printer-node-marker.is-expanded{
  --printer-card-paper:#fff; --printer-card-ink:#16181c; --printer-card-muted:#6b7280;
  --printer-card-faint:#a3a3ac; --printer-card-line:#ececef; --printer-card-tile:#f7f7f5;
  display:block; width:320px; height:auto; padding:14px 16px 16px; color:var(--printer-card-ink); background:var(--printer-card-paper);
  border:0; border-radius:12px; box-shadow:0 1px 2px rgba(16,18,28,.06),0 14px 30px -12px rgba(16,18,28,.24); cursor:default;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.printer-node-expanded-rank{
  --printer-card-label:#2378ff; position:relative; z-index:1; justify-self:start; min-height:0; height:auto; margin:0 0 13px;
  display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 28px); overflow:hidden;
  padding:4px 9px; border:0; border-radius:999px;
  color:#fff; background:#16181c;
  font:500 10.5px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.08em; text-transform:uppercase;
  text-overflow:ellipsis; white-space:nowrap; pointer-events:none;
}
.printer-node-expanded-rank-icon{
  flex:0 0 auto; display:inline-grid; place-items:center; min-width:8px; color:var(--printer-card-label);
  font:700 10px/1 ui-monospace,'SF Mono',Menlo,monospace;
}
.printer-node-expanded-rank[data-printer-card-label="recommended"]{ --printer-card-label:#f5b335; }
.printer-node-expanded-rank[data-printer-card-label="top-rated"]{ --printer-card-label:#e8971a; }
.printer-node-expanded-rank[data-printer-card-label="newly-listed"]{ --printer-card-label:#8b5cf6; }
.printer-node-expanded-rank[data-printer-card-label="best-value"]{ --printer-card-label:#16a36a; }
.printer-node-expanded-rank[data-printer-card-label="fast-turnaround"]{ --printer-card-label:#38bdf8; }
.printer-node-expanded-rank[data-printer-card-label="popular"]{ --printer-card-label:#e05a86; }
.printer-node-marker.is-expanded::before{
  display:none;
}
.printer-node-marker.is-expanded .printer-node-marker-image{
  width:56px; height:56px; padding:0; overflow:hidden; background:var(--printer-card-paper); border:1px solid var(--printer-card-line);
  border-radius:8px; box-shadow:none;
}
.printer-node-marker.is-expanded img[data-printer-image-resolution="4k"]{ object-fit:cover; image-rendering:auto; }
.printer-node-marker.is-expanded::after{ display:none; animation:none; }
.printer-node-expanded{ position:relative; display:grid; width:100%; gap:0; min-width:0; text-align:left; }
.printer-node-expanded-header{ display:grid; grid-template-columns:56px minmax(0,1fr) 70px; gap:13px; align-items:start; min-width:0; }
.printer-node-expanded-copy{ display:grid; gap:4px; min-width:0; padding-top:1px; }
.printer-node-expanded-close{
  position:absolute; z-index:2; top:0; right:0; display:grid; place-items:center; width:24px; height:24px; margin:0; padding:0; border:0; border-radius:7px;
  color:var(--printer-card-muted); background:#fff; font-size:15px; font-weight:700;
  line-height:1; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity 120ms ease,color 120ms ease,background-color 120ms ease;
}
.printer-node-marker.is-expanded:hover .printer-node-expanded-close,
.printer-node-marker.is-expanded:focus-within .printer-node-expanded-close,
.printer-node-expanded-close:focus-visible{ opacity:1; pointer-events:auto; }
.printer-node-expanded-close:hover,.printer-node-expanded-close:focus-visible{ color:var(--printer-card-ink); background:var(--printer-card-tile); }
@media (hover:none){ .printer-node-marker.is-expanded .printer-node-expanded-close{ opacity:1; pointer-events:auto; } }
.printer-node-expanded-name{
  display:-webkit-box; overflow:hidden; color:var(--printer-card-ink); font-size:15px; font-weight:600;
  letter-spacing:-.01em; line-height:1.25; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.printer-node-expanded-sub{
  display:block; max-height:2.4em; overflow:hidden; color:var(--printer-card-muted); font-size:12.5px; font-weight:400;
  line-height:1.2; white-space:normal;
}
.printer-node-expanded-distance{ white-space:nowrap; }
.printer-node-marker.is-expanded .printer-node-live-chip{ position:static; justify-self:start; margin-top:2px; }
.printer-node-expanded-total{ display:grid; justify-items:end; gap:2px; min-width:0; padding-top:2px; text-align:right; }
.printer-node-expanded-total span{
  color:var(--printer-card-faint); font:400 10px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.08em; white-space:nowrap;
}
.printer-node-expanded-total strong{ color:var(--printer-card-ink); font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.printer-node-expanded-pricing{
  display:grid; gap:7px; max-height:0; margin-top:0; padding:0 14px; overflow:hidden; opacity:0;
  background:var(--printer-card-tile); border-radius:9px; pointer-events:none; transform:translateY(-4px);
  transition:max-height 220ms ease,margin-top 220ms ease,padding 220ms ease,opacity 160ms ease,transform 220ms ease;
}
.printer-node-marker.is-expanded:hover .printer-node-expanded-pricing,
.printer-node-marker.is-expanded:focus-visible .printer-node-expanded-pricing,
.printer-node-marker.is-expanded:has(:focus-visible) .printer-node-expanded-pricing{
  max-height:128px; margin-top:14px; padding:12px 14px; opacity:1; pointer-events:auto; transform:translateY(0);
}
.printer-node-expanded-pricing > span{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; }
.printer-node-expanded-pricing > span > span{
  overflow:hidden; color:var(--printer-card-muted); font-size:12.5px; font-weight:400; line-height:1.1; text-overflow:ellipsis; white-space:nowrap;
}
.printer-node-expanded-pricing strong{ flex:0 0 auto; color:var(--printer-card-ink); font:400 12.5px/1.1 ui-monospace,'SF Mono',Menlo,monospace; }
.printer-node-expanded-build{
  display:block; margin-top:12px; overflow:hidden; color:var(--printer-card-muted); font:400 11px/1.2 ui-monospace,'SF Mono',Menlo,monospace; text-overflow:ellipsis; white-space:nowrap;
}
.printer-node-expanded-build span{ color:var(--printer-card-muted); }
.printer-node-expanded-actions{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:8px; margin-top:13px; align-items:stretch; }
.printer-node-expanded-actions button{
  display:flex; align-items:center; justify-content:center; min-width:0; min-height:42px; height:42px; margin:0;
  padding:0 12px; border:1px solid #e0e0e4; border-radius:9px; color:var(--printer-card-ink); background:#fff;
  font-size:13px; font-weight:600; line-height:1; text-align:center; white-space:nowrap; cursor:pointer;
}
.printer-node-expanded-actions .printer-node-expanded-button-secondary{
  color:#fff; border-color:#16181c; background:#16181c; box-shadow:none;
}
.printer-node-expanded-actions .printer-node-expanded-button-primary{
  color:#16181c; border-color:#e9a020; background:#e9a020;
}
.printer-node-expanded-actions button:hover,.printer-node-expanded-actions button:focus-visible{ border-color:#16181c; filter:none; }
.printer-node-expanded-actions .printer-node-expanded-button-secondary:hover,
.printer-node-expanded-actions .printer-node-expanded-button-secondary:focus-visible{
  color:#fff; border-color:#1f74ef; background:#1f74ef; filter:none;
}
.printer-node-expanded-actions .printer-node-expanded-button-primary:hover,
.printer-node-expanded-actions .printer-node-expanded-button-primary:focus-visible{ border-color:#d18f16; background:#d18f16; filter:none; }
:root[data-theme="dark"] .printer-node-marker.is-expanded{
  --printer-card-paper:#171719; --printer-card-ink:#f7f7f5; --printer-card-muted:#b6b6bd;
  --printer-card-faint:#8f8f98; --printer-card-line:#35353a; --printer-card-tile:#222225;
}
@media (hover:none){
  .printer-node-marker.is-expanded .printer-node-expanded-pricing{
    max-height:128px; margin-top:14px; padding:12px 14px; opacity:1; pointer-events:auto; transform:translateY(0);
  }
}
@media (prefers-reduced-motion:reduce){
  .printer-node-expanded-pricing{ transition:none; }
}
/* end export/shop-card-3b.html */
.printer-node-marker.status-dot{
  --printer-node-border:rgba(245,182,66,.92); --printer-node-fill:rgba(245,182,66,.06);
  --printer-node-hex:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  --printer-node-border-width:1.2px;
  width:20px; height:17.32px; padding:0; background:transparent; border:0; border-radius:0;
  box-shadow:none; filter:drop-shadow(0 0 4px rgba(245,182,66,.34)) drop-shadow(0 3px 8px rgba(87,54,12,.22));
  isolation:isolate;
}
.printer-node-marker.status-dot::before{
  left:auto; bottom:auto; inset:0; width:auto; height:auto; box-sizing:border-box;
  background:var(--printer-node-border); border:0; box-shadow:none; transform:none;
  clip-path:var(--printer-node-hex); z-index:0;
}
.printer-node-marker.status-dot::after{
  content:""; inset:calc(var(--printer-node-border-width) * 1.15); z-index:1; border-radius:0;
  background:var(--printer-node-fill); clip-path:var(--printer-node-hex); animation:none; display:block;
}
.printer-node-marker.status-dot .printer-node-marker-image,
.printer-node-marker.status-dot .printer-node-rating-chip{ display:none; }
.printer-node-marker.printer-node-cluster{
  --printer-node-border:rgba(245,182,66,.94); --printer-node-fill:rgba(245,182,66,.15);
  --printer-node-hex:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  --printer-node-border-width:1.45px;
  width:88px; height:76.21px; grid-template-rows:auto auto; align-content:center; gap:1px;
  padding:0 10px; background:transparent; border:0; border-radius:0; box-shadow:none;
  filter:drop-shadow(0 0 5px rgba(245,182,66,.34)) drop-shadow(0 10px 18px rgba(87,54,12,.22));
  transition:width 160ms ease,height 160ms ease,padding 160ms ease,filter 160ms ease; isolation:isolate;
}
.printer-node-marker.printer-node-cluster:hover,
.printer-node-marker.printer-node-cluster:focus-visible{
  outline:0; filter:drop-shadow(0 0 8px rgba(245,182,66,.54)) drop-shadow(0 10px 18px rgba(87,54,12,.24));
}
.layout-build-globe .printer-node-marker.printer-node-cluster:hover,
.layout-build-globe .printer-node-marker.printer-node-cluster:focus-visible{
  width:93px; height:80.54px;
}
.printer-node-marker.printer-node-cluster::before{
  left:auto; bottom:auto; inset:0; width:auto; height:auto; box-sizing:border-box;
  background:var(--printer-node-fill); border:0; box-shadow:none; transform:none;
  clip-path:var(--printer-node-hex); z-index:0;
}
.printer-node-marker.printer-node-cluster::after{
  content:""; inset:0; z-index:1; border-radius:0;
  background:center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6' preserveAspectRatio='none'%3E%3Cpolygon points='25.8,0.8 74.2,0.8 99.1,43.3 74.2,85.8 25.8,85.8 0.9,43.3' fill='none' stroke='%23f5b642' stroke-opacity='.94' stroke-width='1.45' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  clip-path:none; animation:none; display:block;
}
.printer-node-cluster-count,.printer-node-cluster-city{ display:none; }
@keyframes printer-node-pulse{
  0%{ transform:scale(.72); opacity:.9; }
  70%{ transform:scale(1.14); opacity:0; }
  100%{ transform:scale(1.16); opacity:0; }
}

.panel-strip{ position:relative; flex:0 0 var(--strip-h); display:flex;
              align-items:flex-end; gap:var(--gap); min-height:0;
              transition:flex-basis .3s cubic-bezier(.22,.9,.24,1); }
.panel-strip .panel{ flex:1 1 0; height:100%;
  transition:height .3s cubic-bezier(.22,.9,.24,1),
             margin-bottom .3s cubic-bezier(.22,.9,.24,1),
             border-color .16s, box-shadow .2s; }

/* ── the vertical dividers, made draggable ──
   One element for every seam the layout has: between the three panels in the
   strip, and down both inner edges of the Object Insights columns. Each
   straddles its line so the target is forgiving without taking width from
   what it separates, and the seam only lights up on intent. */
.vsplit{
  position:absolute; z-index:40; top:0; bottom:0; width:13px; margin-left:-6.5px;
  cursor:col-resize; touch-action:none; opacity:0; transition:opacity .15s ease;
}
.vsplit::after{
  content:''; position:absolute; left:6px; top:50%; width:1px; height:34px;
  transform:translateY(-50%); border-radius:2px; background:var(--dim);
  transition:width .14s ease, height .14s ease, background .14s ease, box-shadow .14s ease;
}
.panel-strip:hover .vsplit, .pfocus:hover .vsplit{ opacity:.4; }
.vsplit:is(:hover,[data-active="true"]){ opacity:1; }
.vsplit:is(:hover,[data-active="true"])::after{
  width:2px; height:52px; background:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);
}
body[data-vsplit="true"]{ cursor:col-resize; user-select:none; }

/* Browse's top/bottom seam is a real horizontal splitter. It is positioned
   over the flex gap, so neither the stage nor the three object panels lose
   content area to the forgiving pointer target. */
.hsplit{
  position:absolute; z-index:76; left:0; right:0; height:13px;
  transform:translateY(-50%); cursor:row-resize; touch-action:none;
  outline:0; opacity:.22; transition:opacity .15s ease;
}
.hsplit::after{
  content:''; position:absolute; left:50%; top:6px; width:54px; height:1px;
  transform:translateX(-50%); border-radius:2px; background:var(--dim);
  transition:width .14s ease,height .14s ease,background .14s ease,box-shadow .14s ease;
}
.work-area:hover .hsplit{ opacity:.58; }
.hsplit:is(:hover,:focus-visible,[data-active="true"]){ opacity:1; }
.hsplit:is(:hover,:focus-visible,[data-active="true"])::after{
  width:86px; height:2px; background:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);
}
body[data-hsplit="true"]{ cursor:row-resize; user-select:none; }

/* Community / Style / Data now float on the Design canvas, so the former
   workspace-to-dock resize seam is retired with its empty lower band. */
.design-dock-resizer{
  position:absolute; z-index:83; left:var(--gap); right:var(--gap); top:-8px;
  height:24px; display:none; cursor:row-resize; touch-action:none; outline:0;
}
body[data-view="design"] .design-dock-resizer{ display:none; }
.design-dock-resizer::after{
  content:''; position:absolute; left:50%; top:50%; width:54px; height:2px;
  transform:translate(-50%,-50%); border-radius:999px; background:var(--dim);
  opacity:0; box-shadow:0 0 0 0 var(--accent-soft);
  transition:width .14s ease,opacity .14s ease,background .14s ease,box-shadow .14s ease;
}
.design-dock-resizer:is(:hover,:focus-visible,[data-active="true"])::after{
  width:86px; opacity:1; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
body[data-design-dock-resize="true"]{ cursor:row-resize; user-select:none; }
body:is([data-design-dock-resize="true"],[data-design-corner-resize]) .dock__pane-wrap{
  transition:none;
}

/* ══════════════════════════════════════════════════════════════════
   arrangement rail — css/panels.css .arail / .sect / .sect__pop
   ══════════════════════════════════════════════════════════════════ */
.arail{ position:absolute; z-index:52; right:14px; top:16px; bottom:16px;
        display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
/* Arrangement is a Design-only editing surface. Removing both the rail and
   its invisible wake strip elsewhere prevents Browse/Build edge hovers and
   keeps the hidden buttons out of keyboard navigation. */
body:not([data-view="design"]) :is(.railwake,.arail){ display:none; }
/* The rail sleeps too. A wake strip down the stage's right edge brings it in;
   it stays while the pointer is on the rail itself, or while one of its
   flyouts is pinned open. The hidden state is panels.css's own — opacity 0
   and a 14px step to the right, so it leaves and returns along the edge. */
.railwake{ position:absolute; z-index:51; top:0; right:0; bottom:0; width:64px; }
.arail{ opacity:0; pointer-events:none; transform:translateX(14px);
        transition:opacity .25s, transform .3s cubic-bezier(.22,.9,.24,1); }
.railwake:hover ~ .arail,
.arail:hover, .arail:focus-within,
.center-panel:has(.sect[data-open="true"]) .arail{
  opacity:1; pointer-events:auto; transform:none;
}
.arail__group{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 3px;
               background:var(--surface); border:1px solid var(--line);
               border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }

.sect{ position:relative; }
.sect__btn{
  width:31px; height:31px; border-radius:var(--radius-ui); border:1px solid transparent;
  color:var(--dim); display:grid; place-items:center;
  transition:background .15s, color .15s, border-color .15s;
}
.sect__btn:hover{ background:var(--slot); color:var(--ink); }
.sect__btn > svg{ width:15px; height:15px; }
.sect[data-open="true"] .sect__btn{ border-color:var(--ink); color:var(--ink); background:var(--surface); }
/* a section moved off its default lights up */
.arail__group .sect__btn[data-alt="true"]{ background:var(--accent-soft); color:var(--accent-ink); }
.sect__btn--dimensions{ grid-template-rows:14px 8px; align-content:center; gap:1px; }
.sect__btn--dimensions > svg{ width:14px; height:14px; transform:translateY(1px); }
.sect__zoom{ color:currentColor; font:700 12px/1 var(--font); letter-spacing:-.04em;
             font-variant-numeric:tabular-nums; }

/* the wall's quick actions, stacked in the rail */
.walltools{ display:flex; flex-direction:column; align-items:center; gap:4px;
            padding:4px 0; margin:2px 0; border-block:1px solid var(--line-soft); }
.walltools__btn{ width:31px; height:31px; border-radius:var(--radius-ui);
                 display:grid; place-items:center; color:var(--dim);
                 transition:background .15s, color .15s; }
.walltools__btn:hover{ background:var(--slot); color:var(--ink); }
.walltools__btn[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-ink); }
.walltools__btn svg{ width:15px; height:15px; }

/* the space cube — a labelled face per mode, rotates on toggle */
.cube-wrap{ display:block; width:20px; height:20px; perspective:100px; }
.cube{ display:block; position:relative; width:20px; height:20px; transform-style:preserve-3d;
       transform:rotateX(-14deg) rotateY(-28deg);
       transition:transform .55s cubic-bezier(.5,.05,.2,1); }
.cube[data-face="2d"]{ transform:rotateX(0deg) rotateY(-90deg); }
.cube__f{ position:absolute; inset:0; display:grid; place-items:center;
          border:1.5px solid currentColor; border-radius:3px;
          background:var(--surface); color:inherit; backface-visibility:hidden;
          font:800 12px/1 var(--font); letter-spacing:.02em; transition:color .3s; }
.cube__f--front{ transform:translateZ(10px); }
.cube__f--side { transform:rotateY(90deg) translateZ(10px); }
.cube__f--top  { transform:rotateX(90deg) translateZ(10px); opacity:.5; }
.cube:not([data-face="2d"]) .cube__f--side{ color:transparent; }
.cube[data-face="2d"] .cube__f--front{ color:transparent; }

/* the flyout opens to the LEFT of the rail */
.sect__pop{
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(6px);
  width:186px; padding:11px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity .15s, transform .18s, visibility .15s;
}
.sect__pop::after{ content:''; position:absolute; left:100%; top:0; width:14px; height:100%; }
.sect:hover .sect__pop, .sect:focus-within .sect__pop, .sect[data-open="true"] .sect__pop{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }
.pop__head{ display:flex; justify-content:space-between; align-items:baseline;
            margin-bottom:9px; font-size:12px; color:var(--dim); }
.pop__head strong{ color:var(--ink); font-size:12px; }
/* icons only — the wording lives in the tooltip */
.opts{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.opt{ display:grid; place-items:center; height:38px; padding:0;
      border:1px solid var(--line); border-radius:var(--radius-ui);
      background:var(--surface); color:var(--faint);
      transition:border-color .15s, background .15s, box-shadow .15s, color .15s; }
.opt:hover{ background:var(--raised); color:var(--dim); }
.opt__ico{ display:grid; place-items:center; }
.opt__ico svg{ width:26px; height:17px; }
.opt[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink); }
.sect__note{ margin:10px 1px 0; color:var(--faint); font-size:12px; line-height:1.35; }
.field{ margin-top:12px; }
.field:first-child{ margin-top:0; }
.field__row{ display:flex; justify-content:space-between; align-items:baseline;
             margin-bottom:6px; font-size:12px; color:var(--dim); }
.field__row b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
input[type=range]{ width:100%; height:4px; appearance:none; background:var(--line);
                   border-radius:4px; outline:none; }
input[type=range]::-webkit-slider-thumb{ appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--surface); border:1px solid var(--dim); box-shadow:var(--shadow-sm); cursor:pointer; }

/* ══════════════════════════════════════════════════════════════════
   command panel — css/panels.css .command + css/dock.css ghost/send
   ══════════════════════════════════════════════════════════════════ */
.command{
  zoom:.95;                       /* the whole panel, icons included, runs 5% smaller */
  /* The view switcher follows directly above this bar, which continues to
     ride just inside the dock's lower edge. */
  position:absolute; z-index:84;
  /* The donor command bar sits above the shared workspace utility row. */
  bottom:calc((var(--watchbar-h, 39px) + 13px) / .95); left:0; right:0;
  margin-inline:auto; max-width:580px; width:min(580px, calc(100% - 32px));
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  transition:box-shadow .2s, max-width .28s cubic-bezier(.22,.9,.24,1);
  transform-origin:50% 100%;
}
/* the chat needs a room, not a bar: the panel widens while the log is open */
.command[data-log="true"]{ max-width:1020px; width:min(1020px, calc(100% - 32px)); }

/* ── picked up off the dock ──
   Parented to <body> and placed by transform from the window's top-left, so
   the only bounds are the window edges. */
.command[data-free="true"]{
  position:fixed; left:0; top:0; right:auto; bottom:auto; margin-inline:0;
  width:min(580px, calc(100vw - 32px));
  transition:box-shadow .2s, border-radius .2s;
}
.command[data-free="true"][data-log="true"]{ width:min(1020px, calc(100vw - 32px)); }
.command.is-dragging{ box-shadow:var(--shadow-lg); cursor:grabbing;
                      transition:none !important; user-select:none; }
.command[data-resizing="true"]{ transition:none !important; user-select:none; }
/* a width the pointer chose outranks both defaults */
.command[data-user-width="true"],
.command[data-free="true"][data-user-width="true"]{
  width:min(var(--cmd-user-width, 580px), calc(100vw - 32px));
  max-width:min(var(--cmd-user-width, 580px), calc(100vw - 32px));
}

/* ── the length handles ──
   Either vertical edge shortens or lengthens the bar. Keep each forgiving hit
   target, but leave the edge visually quiet instead of drawing resize icons. */
.command__resize{
  position:absolute; z-index:12; top:7px; bottom:7px; width:13px;
  cursor:ew-resize; touch-action:none;
}
.command__resize--left{ left:-7px; }
.command__resize--right{ right:-7px; }
.command__resize::after{ content:none; }

/* ── seated against a side: the bar becomes a chat column ──
   Dropped on the left or right edge it takes the full height of the window,
   the log claims everything above the row, and the composer stays pinned at
   the bottom. The layout is pushed aside rather than covered, so the column
   reads as part of the window instead of a sheet laid over it. */
.command[data-seat]{
  position:fixed; top:0; bottom:0; height:auto;
  margin:0; border-radius:0; z-index:90;
  /* /.95 again: the panel is zoomed, so this is what makes the column render
     at exactly --cmd-seat-w and match the margin the layout gives up for it */
  width:calc(var(--cmd-seat-w, 380px) / .95); max-width:60vw;
  box-shadow:var(--shadow-lg);
  transition:box-shadow .2s;
}
.command[data-seat="left"] { left:0;  right:auto; border-top:0; border-bottom:0; border-left:0; }
.command[data-seat="right"]{ right:0; left:auto;  border-top:0; border-bottom:0; border-right:0; }
.command[data-seat] .command__log{
  display:flex; flex:1 1 auto; min-height:0; max-height:none; padding:16px 14px 8px;
}
.command[data-seat] .command__row{ flex:0 0 auto; border-top:1px solid var(--line-soft); }
.command[data-seat] .command__echo{ bottom:auto; top:10px; }
/* the length handle moves to the inner edge and resizes the column */
.command[data-seat="left"]  .command__resize--left,
.command[data-seat="right"] .command__resize--right{ display:none; }
body[data-cmd-seat="left"]  .shell, body[data-cmd-seat="left"]  .top-panel,
body[data-cmd-seat="left"]  .dock{ margin-left:var(--cmd-seat-w, 380px); }
body[data-cmd-seat="right"] .shell, body[data-cmd-seat="right"] .top-panel,
body[data-cmd-seat="right"] .dock{ margin-right:var(--cmd-seat-w, 380px); }

/* ── where it can be dropped ──
   The zones are invisible until something is in flight, then the edge they
   own lights up as the pointer crosses into it. */
.seatzone{
  position:fixed; z-index:88; top:0; bottom:0; width:132px;
  display:grid; place-items:center; pointer-events:none;
  background:linear-gradient(to right, var(--accent-soft), transparent);
  border:1px dashed transparent;
  opacity:0; transition:opacity .18s, border-color .18s, background .18s;
}
.seatzone--left { left:0; }
.seatzone--right{ right:0; background:linear-gradient(to left, var(--accent-soft), transparent); }
body[data-cmd-dragging="true"] .seatzone{ opacity:.75; }
.seatzone[data-hot="true"]{ opacity:1; border-color:var(--accent); }
.seatzone__mark{
  padding:7px 13px; border-radius:999px; background:var(--surface);
  border:1px solid var(--accent); color:var(--accent-ink);
  font:600 12px/1 var(--font); letter-spacing:.08em; text-transform:uppercase;
  box-shadow:var(--shadow-sm); opacity:0; transition:opacity .18s;
}
.seatzone[data-hot="true"] .seatzone__mark{ opacity:1; }

.command__echo{
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
  max-width:100%; width:max-content; margin:0; padding:4px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow-sm);
  font-size:12px; color:var(--dim); white-space:nowrap;
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.command__echo[data-show="true"]{ opacity:1; }

/* The message icon opens the donor's full Community Chat room upward. */
.command__log{ display:none; flex-direction:column; min-height:0; height:min(66vh,600px);
               max-height:66vh; overflow:hidden; padding:12px 16px;
               border-bottom:1px solid var(--line-soft); }
.command[data-log="true"] .command__log{ display:flex; }
.msg{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; }
.msg__who{ flex:0 0 auto; width:52px; color:var(--faint); font-size:12px;
           font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding-top:2px; }
.msg__body{ flex:1 1 auto; min-width:0; color:var(--text); }
.log__empty{ margin:0; padding:4px 2px 8px; color:var(--faint); font-size:12px; }

/* Community Chat: copied from untitled-folder/css/chat.css and tightened only
   where this layout's command panel already supplies the outer chrome. */
.chat{ display:flex; flex-direction:column; height:100%; min-height:0; position:relative;
       color:var(--text); font:13px/1.45 var(--font); }
.chat__top{ display:flex; align-items:center; gap:10px; flex:0 0 auto; position:relative;
            padding:2px 2px 11px; border-bottom:1px solid var(--line-soft); }
.chat__group{ display:flex; align-items:center; gap:9px; padding:5px 8px 5px 5px;
              border-radius:var(--radius-ui); color:var(--ink); }
.chat__group:hover{ background:var(--slot); }
.chat__group svg{ width:13px; height:13px; color:var(--faint); transition:transform .2s; }
.chat__group[aria-expanded="true"] svg{ transform:rotate(180deg); }
.chat__glyph{ width:26px; height:26px; flex:0 0 26px; border-radius:9px; display:grid;
              place-items:center; background:var(--slot); color:var(--gc,var(--ink)); font:700 12px/1 var(--font); }
.chat__gname{ font:600 13.5px/1 var(--font); letter-spacing:-.01em; }
.chat__where{ max-width:44%; overflow:hidden; padding:3px 0 3px 2px; border-left:1px solid var(--line-soft);
              color:var(--faint); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.chat__visibility{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; min-height:26px; padding:0 8px;
  border:1px solid var(--line-soft); border-radius:999px; color:var(--dim); font:600 12px/1 var(--font); }
.chat__visibility:hover,.chat__visibility:focus-visible{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); outline:0; }
.chat__visibility svg{ width:12px; height:12px; }
.chat__visibility[hidden]{ display:none; }
.chat__spacer{ flex:1 1 auto; }
.chat__acts{ display:flex; align-items:center; gap:4px; }
.chat__act{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--dim); }
.chat__act:hover{ background:var(--slot); color:var(--ink); }
.chat__act svg{ width:15px; height:15px; }
.chat__act[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-ink); }
.chat__act[data-chat-action="record"][aria-pressed="true"]{ background:rgba(229,72,77,.16); color:var(--danger); }
.chat__act--close:hover{ background:rgba(229,72,77,.14); color:var(--danger); }
.chat__friend-panel{ position:absolute; z-index:24; right:34px; top:39px; width:min(320px,calc(100vw - 32px));
  display:none; gap:9px; padding:12px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); box-shadow:var(--shadow-lg); }
.chat__friend-panel[data-open="true"]{ display:grid; }
.chat__friend-label{ color:var(--ink); font:700 12px/1 var(--font); }
.chat__friend-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; align-items:center; }
.chat__friend-row input{ min-width:0; height:34px; padding:0 10px; border:1px solid var(--line); border-radius:9px;
  background:var(--slot); color:var(--ink); font:600 12px/1 var(--font); outline:0; }
.chat__friend-row input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.chat__friend-row button{ height:34px; padding:0 10px; border-radius:9px; background:var(--slot); color:var(--ink);
  font:700 12px/1 var(--font); }
.chat__friend-row button:hover,.chat__friend-row button:focus-visible{ background:#1f74ef; color:#fff; outline:0; }
.chat__friend-status{ margin:0; color:var(--dim); font:500 12px/1.35 var(--font); }
.chat__friend-list{ display:flex; flex-wrap:wrap; gap:6px; max-height:86px; overflow:auto; }
.chat__friend-chip{ display:inline-flex; align-items:center; gap:6px; min-width:0; padding:4px 8px 4px 4px;
  border-radius:999px; background:var(--slot); color:var(--text); font:600 12px/1 var(--font); }
.chat__friend-chip .chat__av{ width:18px; height:18px; flex-basis:18px; font-size:12px; }
.chat__recpill{ display:none; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px;
                background:rgba(229,72,77,.14); color:var(--danger); font:700 12px/1 var(--font); letter-spacing:.14em; }
.chat[data-rec="true"] .chat__recpill{ display:inline-flex; }
.chat__recpill i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.chat__groups{ position:absolute; z-index:20; left:0; top:42px; min-width:252px; padding:6px;
               display:none; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--line);
               border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.chat__groups[data-open="true"]{ display:flex; }
.chat__gitem{ display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px;
              border-radius:var(--radius-ui); color:var(--text); text-align:left; }
.chat__gitem:hover{ background:var(--slot); }
.chat__gitem[aria-checked="true"]{ background:var(--accent-soft); }
.chat__gitem b{ display:block; color:var(--ink); font:600 12.5px/1.3 var(--font); }
.chat__gitem em{ display:block; color:var(--faint); font-size:12px; font-style:normal; }
.chat__body{ display:flex; flex:1 1 auto; min-height:0; gap:12px; padding-top:10px; position:relative; }
.chat__side{ flex:0 0 178px; min-width:0; display:flex; flex-direction:column; gap:2px;
             overflow-x:hidden; overflow-y:auto; padding-right:10px; border-right:1px solid var(--line-soft);
             scrollbar-width:none; -ms-overflow-style:none; }
.chat__side::-webkit-scrollbar{ width:0; height:0; display:none; }
.chat__sidehead{ margin:8px 0 5px 8px; color:var(--faint); font:600 12px/1 var(--font);
                 letter-spacing:.14em; text-transform:uppercase; }
.chat__sidehead:first-child{ margin-top:0; }
.chat__sidehead--channels{ display:flex; align-items:center; justify-content:space-between; min-height:24px; margin-right:2px; }
.chat__sidehead--channels > button{ width:22px; height:22px; display:grid; place-items:center; border-radius:7px; color:var(--faint); }
.chat__sidehead--channels > button:hover,.chat__sidehead--channels > button:focus-visible{ background:var(--slot); color:var(--ink); outline:0; }
.chat__sidehead--channels > button svg{ width:13px; height:13px; }
.chat__list{ display:flex; flex-direction:column; gap:1px; }
.chat__chan{ display:flex; align-items:center; gap:7px; width:100%; padding:6px 8px; border-radius:var(--radius-ui);
             color:var(--dim); font-size:12.5px; text-align:left; }
.chat__chan:hover{ background:var(--slot); color:var(--ink); }
.chat__chan[aria-selected="true"]{ background:var(--accent-soft); color:var(--ink); font-weight:600; }
.chat__chan > span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat__chan > svg{ width:13px; height:13px; flex:0 0 13px; opacity:.75; }
.chat__chan[data-channel-visibility="private"] > svg{ color:var(--accent); opacity:1; }
.chat__support{ margin-top:auto; padding-top:9px; border-top:1px solid var(--line-soft); }
.chat__chan--support{ min-height:36px; color:var(--ink); }
.chat__chan--support > svg{ color:var(--accent); opacity:1; }
.chat__chan--support > small{ display:flex; align-items:center; gap:4px; color:#12a15f; font:600 12px/1 var(--font); }
.chat__chan--support > small::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.chat__n{ min-width:17px; height:17px; padding:0 5px; border-radius:999px; background:var(--danger);
          color:#fff; font:700 12px/20.4px var(--font); text-align:center; }
.chat__n[data-zero="true"]{ display:none; }
.chat__av{ position:relative; width:20px; height:20px; flex:0 0 20px; border-radius:50%; display:grid;
           place-items:center; background:var(--pc,var(--dim)); color:#fff; font:700 12px/1 var(--font); font-style:normal; }
.chat__av[data-on="true"]::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:7px; height:7px;
                                  border-radius:50%; background:#12a15f; border:1.5px solid var(--surface); }
.chat__channel-panel{ position:absolute; z-index:27; left:8px; top:46px; width:min(360px,calc(100% - 16px));
  display:grid; gap:13px; padding:15px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg); }
.chat__channel-panel[hidden]{ display:none; }
.chat__channel-panel-head{ display:flex; align-items:flex-start; gap:12px; }
.chat__channel-panel-head > span{ display:grid; gap:4px; min-width:0; }
.chat__channel-panel-head b{ color:var(--ink); font:700 15px/1.2 var(--font); }
.chat__channel-panel-head small{ color:var(--dim); font:500 12px/1.35 var(--font); }
.chat__channel-panel-head > button{ width:28px; height:28px; margin:-4px -4px 0 auto; display:grid; place-items:center; border-radius:8px; color:var(--dim); }
.chat__channel-panel-head > button:hover,.chat__channel-panel-head > button:focus-visible{ background:var(--slot); color:var(--ink); outline:0; }
.chat__channel-panel-head svg{ width:14px; height:14px; }
.chat__channel-fields{ display:grid; gap:7px; }
.chat__channel-fields[hidden]{ display:none; }
.chat__channel-fields label,.chat__channel-privacy legend{ color:var(--ink); font:700 12px/1 var(--font); }
.chat__channel-fields label small{ margin-left:4px; color:var(--faint); font-weight:500; }
.chat__channel-fields > input,.chat__channel-input{ height:36px; border:1px solid var(--line); border-radius:10px; background:var(--slot); }
.chat__channel-fields > input{ width:100%; padding:0 10px; color:var(--ink); font:600 12px/1 var(--font); outline:0; }
.chat__channel-input{ display:flex; align-items:center; padding:0 10px; }
.chat__channel-input i{ color:var(--faint); font:700 13px/1 var(--font); font-style:normal; }
.chat__channel-input input{ flex:1 1 auto; min-width:0; height:100%; padding:0 5px; color:var(--ink); font:600 12px/1 var(--font); outline:0; }
.chat__channel-fields > input:focus,.chat__channel-input:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.chat__channel-privacy{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0; padding:0; border:0; }
.chat__channel-privacy legend{ grid-column:1/-1; margin-bottom:1px; }
.chat__channel-privacy label{ position:relative; min-width:0; cursor:pointer; }
.chat__channel-privacy input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.chat__channel-privacy label > span{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:2px 7px; min-height:60px; padding:10px;
  border:1px solid var(--line); border-radius:11px; background:var(--slot); }
.chat__channel-privacy svg{ grid-row:1/3; width:16px; height:16px; margin-top:1px; color:var(--dim); }
.chat__channel-privacy b{ color:var(--ink); font:700 12px/1.2 var(--font); }
.chat__channel-privacy small{ color:var(--dim); font:500 12px/1.25 var(--font); white-space:normal; }
.chat__channel-privacy input:checked + span{ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent); }
.chat__channel-privacy input:checked + span svg{ color:var(--accent-ink); }
.chat__channel-privacy input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.chat__channel-status{ min-height:16px; margin:-4px 0; color:var(--danger); font:600 12px/1.35 var(--font); }
.chat__channel-actions{ display:flex; justify-content:flex-end; gap:7px; }
.chat__channel-actions button{ height:34px; padding:0 12px; border-radius:9px; background:var(--slot); color:var(--ink); font:700 12px/1 var(--font); }
.chat__channel-actions button[type="submit"]{ background:#1f74ef; color:#fff; }
.chat__channel-actions button:hover,.chat__channel-actions button:focus-visible{ filter:brightness(.96); outline:2px solid var(--accent); outline-offset:1px; }
.chat__friend-menu{ position:absolute; z-index:30; width:210px; display:grid; gap:2px; padding:6px;
  border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:var(--shadow-lg); }
.chat__friend-menu[hidden]{ display:none; }
.chat__friend-menu-person{ display:flex; align-items:center; gap:9px; margin:2px 2px 5px; padding:5px 6px 9px; border-bottom:1px solid var(--line-soft); }
.chat__friend-menu-person > span{ display:grid; gap:2px; min-width:0; }
.chat__friend-menu-person b{ overflow:hidden; color:var(--ink); font:700 12.5px/1.2 var(--font); text-overflow:ellipsis; white-space:nowrap; }
.chat__friend-menu-person small{ color:var(--faint); font:500 12px/1 var(--font); }
.chat__friend-menu > button{ display:flex; align-items:center; gap:9px; width:100%; min-height:34px; padding:0 9px; border-radius:8px;
  color:var(--text); font:600 12.5px/1 var(--font); text-align:left; }
.chat__friend-menu > button:hover,.chat__friend-menu > button:focus-visible{ background:var(--slot); color:var(--ink); outline:0; }
.chat__friend-menu > button svg{ width:15px; height:15px; color:var(--dim); }
.chat__friend-menu > .chat__friend-menu-remove{ color:var(--danger); }
.chat__friend-menu > .chat__friend-menu-remove svg{ color:currentColor; }
.chat__channel-welcome{ align-self:center; width:min(360px,88%); margin:auto; padding:18px; border:1px dashed var(--line); border-radius:14px; text-align:center; }
.chat__channel-welcome svg{ width:22px; height:22px; margin-bottom:7px; color:var(--accent); }
.chat__channel-welcome b{ display:block; color:var(--ink); font:700 14px/1.3 var(--font); }
.chat__channel-welcome p{ margin:5px 0 0; color:var(--dim); font:500 12px/1.4 var(--font); }
.chat__main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.chat__scroll{ flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; display:flex; flex-direction:column; gap:3px; padding:2px 4px 6px;
               scrollbar-width:none; -ms-overflow-style:none; }
.chat__scroll::-webkit-scrollbar{ width:0; height:0; display:none; }
.chat__rule{ align-self:center; margin:2px 0 10px; color:var(--faint); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.chat__rule span{ padding:3px 10px; border-radius:999px; background:var(--slot); }
.chat__message{ display:flex; align-items:flex-end; gap:7px; max-width:100%; }
.chat__message[data-mine="true"]{ flex-direction:row-reverse; }
.chat__stack{ display:flex; flex-direction:column; min-width:0; max-width:min(74%,520px); }
.chat__message[data-mine="true"] .chat__stack{ align-items:flex-end; }
.chat__from{ margin:0 0 4px 11px; color:var(--dim); font:600 12px/1 var(--font); }
.chat__from em{ margin-left:7px; color:var(--faint); font-size:12px; font-style:normal; font-weight:500; }
.chat__bubble{ margin:0; padding:8px 12px; border-radius:16px 16px 16px 5px; background:var(--slot);
               color:var(--text); font-size:13px; line-height:1.42; overflow-wrap:anywhere; }
.chat__message[data-mine="true"] .chat__bubble{ border-radius:16px 16px 5px 16px;
  background:linear-gradient(165deg,#3f8cff,#1d63e6); color:#fff; }
/* Support's bubble while its answer is still in flight. The text is real
   ("Looking that up…") rather than an animated ellipsis, so a screen reader
   announces something meaningful and the reduced-motion path needs no special
   case — only the pulse is motion, and the global reset already covers it. */
.chat__message[data-pending="true"] .chat__bubble{
  color:var(--dim); font-style:italic;
  animation:chat-support-pending 1.4s ease-in-out infinite;
}
@keyframes chat-support-pending{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.chat__meta{ margin:3px 4px 0 0; color:var(--faint); font-size:12px; font-style:normal; }
/* Assistant bubbles (@hive replies) and shared-design attachment cards. */
.chat__message[data-assistant="true"] .chat__bubble{ border-left:3px solid #2f6bff; }
.chat__shared{ margin-top:6px; padding:8px 10px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface); }
.chat__shared-kind{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
.chat__shared-name{ display:block; font-size:13px; }
.chat__shared-summary{ margin:2px 0 0; font-size:12px; color:var(--dim); }
.chat__shared-parts{ margin:4px 0; padding-left:16px; font-size:12px; }
.chat__shared-actions{ display:flex; gap:6px; }
.chat__shared-actions button{ height:26px; padding:0 10px; border:1px solid var(--line-soft); border-radius:999px; background:var(--slot); color:var(--text); font:600 12px/1 var(--font); cursor:pointer; }
.chat__shared-note{ display:block; opacity:.7; font-size:12px; }
.chat__call{ display:flex; align-items:center; gap:10px; flex:0 0 auto; margin:0 0 8px; padding:7px 9px;
             border:1px solid var(--line-soft); border-radius:var(--radius-ui); background:var(--accent-soft); }
.chat__call[hidden]{ display:none; }
.chat__callon{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); font:600 12px/1 var(--font); }
.chat__callon i{ width:7px; height:7px; border-radius:50%; background:#12a15f; }
.chat__seats{ display:flex; align-items:center; }
.chat__seats .chat__av{ margin-left:-6px; box-shadow:0 0 0 2px var(--surface); }
.chat__seats .chat__av:first-child{ margin-left:0; }
.chat__sharing{ color:var(--dim); font-size:12px; }
.chat__leave{ margin-left:auto; height:24px; padding:0 11px; border-radius:999px; background:var(--danger); color:#fff; font:600 12px/1 var(--font); }
.chat[data-buyer-chat="true"] .chat__group{ pointer-events:none; }
.chat[data-buyer-chat="true"] .chat__group svg,
.chat[data-buyer-chat="true"] .chat__sidehead:first-child,
.chat[data-buyer-chat="true"] #chatChannels,
.chat[data-buyer-chat="true"] .chat__support,
.chat[data-buyer-chat="true"] .chat__act:not(.chat__act--close){ display:none; }
.chat[data-buyer-chat="true"] .chat__side{ flex-basis:166px; }
.chat__ai-offer{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; margin:10px 0 2px;
  padding:10px; border:1px solid color-mix(in srgb,#e8971a 36%,var(--line)); border-radius:12px;
  background:color-mix(in srgb,#e8971a 8%,var(--surface));
}
.chat__ai-mark{
  width:30px; height:30px; display:grid; place-items:center; border-radius:9px;
  color:#5b3500; background:linear-gradient(145deg,#ffd978,#e8971a); font:800 12px/1 var(--font); letter-spacing:.04em;
}
.chat__ai-copy{ display:grid; gap:2px; min-width:0; }
.chat__ai-copy strong{ color:var(--ink); font:700 12px/1.25 var(--font); }
.chat__ai-copy small{ color:var(--dim); font-size:12px; line-height:1.3; }
.chat__ai-offer button{
  min-height:30px; padding:0 11px; border:1px solid color-mix(in srgb,#e8971a 50%,var(--line));
  border-radius:8px; color:var(--ink); background:var(--surface); font:700 12px/1 var(--font); white-space:nowrap;
}
.chat__ai-offer button:hover,
.chat__ai-offer button:focus-visible{ border-color:#e8971a; background:color-mix(in srgb,#e8971a 12%,var(--surface)); }
.command[data-buyer-chat="true"] .command__ghost{ display:none; }
@media(max-width:900px){ .chat__side{ flex-basis:132px; } .chat__where{ display:none; } }

.command__row{ display:flex; align-items:center; gap:8px; height:54px; padding:0 8px 0 4px; }
.command__fusion-context{
  flex:0 0 auto; height:30px; padding:0 9px 0 5px; display:none; align-items:center; gap:6px;
  border:1px solid color-mix(in srgb,var(--cad-accent) 32%,transparent); border-radius:999px; background:var(--cad-accent-soft);
  color:var(--cad-accent-ink); font:700 12px/1 var(--font); white-space:nowrap;
}
.command[data-command-context="fusion"] .command__fusion-context{ display:inline-flex; }
.command__fusion-context img{ width:21px; height:21px; object-fit:contain; }
.command__fusion-context i{ width:6px; height:6px; border-radius:50%; background:#f59e0b; }
.command[data-fusion-server="connected"] .command__fusion-context i{ background:#16a568; }
.command__fusion-context:hover,.command__fusion-context:focus-visible{ background:color-mix(in srgb,var(--cad-accent-soft) 75%,var(--cad-accent) 25%); outline:0; }
.command__cad-queue{
  position:absolute; left:0; right:0; bottom:calc(100% + 9px); display:grid; gap:6px;
  max-height:min(34vh,276px); overflow:auto; padding:2px; pointer-events:auto;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.command__cad-queue[hidden]{ display:none; }
.command__cad-job{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:4px 9px; min-width:0;
  padding:9px 9px 8px 11px; border:1px solid var(--line); border-radius:12px;
  color:var(--text); background:color-mix(in srgb,var(--glass-surface) 94%,transparent);
  box-shadow:var(--shadow-md); backdrop-filter:blur(14px);
}
.command__cad-job[data-status="active"]{ border-color:color-mix(in srgb,var(--cad-accent) 58%,var(--line)); }
.command__cad-job[data-status="completed"]{ border-color:color-mix(in srgb,#16a568 44%,var(--line)); }
.command__cad-job[data-status="error"]{ border-color:color-mix(in srgb,var(--danger) 56%,var(--line)); }
.command__cad-job-copy{ display:grid; gap:3px; min-width:0; }
.command__cad-job-prompt{ overflow:hidden; color:var(--ink); font:700 12px/1.2 var(--font); text-overflow:ellipsis; white-space:nowrap; }
.command__cad-job-status{ display:flex; align-items:center; gap:6px; min-width:0; color:var(--dim); font:600 12px/1.2 var(--font); }
.command__cad-job-status i{ flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--faint); }
.command__cad-job[data-status="active"] .command__cad-job-status i{ background:#f59e0b; animation:fusion-pulse .8s ease-in-out infinite alternate; }
.command__cad-job[data-status="completed"] .command__cad-job-status i{ background:#16a568; }
.command__cad-job[data-status="error"] .command__cad-job-status i{ background:var(--danger); }
.command__cad-job-status span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.command__cad-job-cancel{
  grid-column:2; grid-row:1 / span 2; align-self:center; width:24px; height:24px; display:grid; place-items:center;
  border-radius:7px; color:var(--dim); background:var(--slot); font:800 13px/1 var(--font);
}
.command__cad-job-cancel:hover,.command__cad-job-cancel:focus-visible{ color:#fff; background:var(--danger); outline:0; }
.command__cad-progress{ grid-column:1 / -1; height:3px; overflow:hidden; border-radius:999px; background:var(--line-soft); }
.command__cad-progress i{ display:block; width:var(--cad-progress,0%); height:100%; border-radius:inherit; background:var(--ai-gold-gradient,linear-gradient(90deg,#f4bc42,#e8971a)); transition:width .28s ease; }
.command__cad-job[data-status="queued"] .command__cad-progress i{ width:12%; opacity:.42; }
.command__cad-job[data-status="completed"] .command__cad-progress i{ background:#16a568; }
.command__cad-job[data-status="canceled"]{ opacity:.68; }
.command:has(.command__cad-queue:not([hidden])) .command__echo{ display:none; }
.command[data-seat] .command__cad-queue{
  position:static; flex:0 0 auto; max-height:220px; padding:10px 10px 2px; border-bottom:1px solid var(--line-soft);
}
.command__mic{ position:relative; width:42px; height:42px; border-radius:50%; flex:0 0 42px;
               display:grid; place-items:center; color:var(--icon-muted);
               transition:background .15s, color .15s; }
.command__mic:hover{ background:var(--slot); color:var(--ink); }
.command__mic svg{ width:18px; height:18px; }
.command__mic[aria-pressed="true"]{ background:var(--danger); color:#fff; }
.command__mic[aria-pressed="true"]::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--danger); pointer-events:none; animation:micPulse 1.5s ease-out infinite; }
@keyframes micPulse{ from{ transform:scale(1); opacity:.65 } to{ transform:scale(1.75); opacity:0 } }

.command input{ flex:1 1 auto; min-width:0; border:0; outline:none; background:none;
                font:14.5px var(--font); color:var(--ink); }
.command input::placeholder{ color:var(--faint); }
.command__attachment-input{ display:none; }

/* the ghost example prompt: only its final word wakes the Run action */
.command__ghostwrap{ position:relative; flex:1 1 auto; min-width:0; display:flex; }
.command__ghostwrap input{ width:100%; flex:1 1 auto; }
.command__ghost{ position:absolute; inset:0; display:flex; align-items:center; gap:8px;
                 padding:0 2px; pointer-events:none; overflow:hidden; white-space:nowrap;
                 color:var(--faint); font:14.5px var(--font); }
.command__ghost i{ display:flex; flex:1 1 auto; min-width:0; font-style:normal; overflow:hidden; }
.ghost__lead{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:pre; }
.ghost__tailword{ flex:0 0 auto; margin:-2px -1px; padding:2px 1px; border-radius:3px;
                  pointer-events:auto; transition:background .14s, color .14s; }
.ghost__tailword:hover{ background:var(--slot); color:var(--dim); }
.command[data-typed="true"] .command__ghost{ display:none; }
.ghost__go{ position:relative; z-index:2; flex:0 0 auto; padding:3px 9px; border-radius:999px;
            background:var(--accent-soft); color:var(--accent-ink);
            font:600 12px/1 var(--font); letter-spacing:.06em;
            visibility:hidden; pointer-events:none; opacity:0;
            transition:opacity .15s, visibility .15s; }
.ghost__hitbox{ position:absolute; z-index:1; right:2px; top:50%; width:51px; height:30px;
                transform:translateY(-50%); pointer-events:auto; }
.command__ghost:has(.ghost__tailword:hover, .ghost__hitbox:hover, .ghost__go:hover) .ghost__go{
  visibility:visible; pointer-events:auto; opacity:1; }

/* ── the message feature: chat button + unread badge ── */
.command__chat{ position:relative; width:38px; height:38px; border-radius:50%; flex:0 0 38px;
                 display:grid; place-items:center; color:var(--icon-muted); }
.command__chat:hover{ background:var(--slot); color:var(--ink); }
.command[data-log="true"] .command__chat{ background:var(--slot); color:var(--ink); }
.command__chat svg{ width:18px; height:18px; }
.command__chat b{ position:absolute; right:0; bottom:0; min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; box-sizing:border-box; overflow:visible;
  border-radius:999px; background:#1f74ef; color:#fff; font:700 12px/1 var(--font);
  font-variant-numeric:tabular-nums; text-align:center; border:2px solid var(--surface); }
.command__chat b[data-zero="true"],
.command__chat b[hidden]{ display:none; }

/* ── the paperclip: opens attachments, and becomes the send arrow on type ── */
.command__add{ width:40px; height:40px; border-radius:50%; flex:0 0 40px;
               background:var(--slot); color:var(--ink);
               display:grid; place-items:center; transition:background .15s, transform .15s; }
.command__add:hover{ background:var(--line); transform:scale(1.06); }
.command__add svg{ grid-area:1/1; width:19px; height:19px;
                   transition:transform .25s cubic-bezier(.22,.9,.24,1); }
/* typing: the mic steps aside, the paperclip becomes the send arrow */
.command[data-typed="true"] .command__mic{ display:none; }
.command__add .ico-send{ display:none; }
.command__add[data-send="true"] .ico-attach{ display:none; }
.command__add[data-send="true"] .ico-send{ display:block; transform:none; }
/* ══════════════════════════════════════════════════════════════════
   bottom content dock — view switching lives in the top-left header
   ══════════════════════════════════════════════════════════════════ */
.dock{ position:relative; z-index:60; flex:0 0 auto;
       display:flex; flex-direction:column; background:var(--surface); }

/* Compact shared workspace utility row. Because it is inside .dock, Load
   excludes it with the other working surfaces while Browse, Design, and Build
   all share the same live row. */
.watchbar{
  position:relative; z-index:61; display:flex; align-items:center; gap:8px;
  height:var(--watchbar-h,39px); flex:0 0 var(--watchbar-h,39px); min-width:0;
  padding:0 14px; border-top:1px solid var(--line); background:var(--surface);
}
.watchbar__deck{ display:inline-flex; align-items:center; min-width:0; }
.watchbar__chip{
  position:relative; height:28px; min-width:32px; padding:0 9px; display:inline-flex;
  align-items:center; justify-content:center; gap:5px; border:1px solid transparent;
  border-radius:var(--radius-ui); background:var(--slot); color:var(--icon-muted);
  transition:margin .3s cubic-bezier(.22,.9,.24,1),background .15s,color .15s,border-color .15s;
}
.watchbar__chip + .watchbar__chip{ margin-left:4px; }
.watchbar__deck[data-open="false"] .watchbar__chip + .watchbar__chip{ margin-left:-10px; }
.watchbar__deck[data-open="false"] .watchbar__chip{ box-shadow:0 0 0 2px var(--surface); }
.watchbar__chip:hover,.watchbar__chip:focus-visible{ z-index:2; background:var(--raised); border-color:var(--line); color:var(--ink); }
.watchbar__chip[aria-pressed="true"]{ background:var(--surface); border-color:var(--ink); color:var(--ink); }
.watchbar__chip svg{ width:15px; height:15px; flex:0 0 15px; }
.watchbar__about{
  min-width:auto;
  padding:0 10px;
  background:transparent;
  font:600 12px/1 var(--font);
  white-space:nowrap;
}
.watchbar__sep{ flex:0 0 1px; width:1px; height:20px; margin:0 4px; background:var(--line); }
.watchbar__spacer{ flex:1 1 auto; min-width:8px; }
.watchbar__badge{ position:absolute; right:0; bottom:0; min-width:18px; height:18px; padding:0 4px;
                  display:grid; place-items:center; box-sizing:border-box; overflow:visible;
                  border:2px solid var(--surface); border-radius:999px; background:var(--danger);
                  color:#fff; font:700 12px/1 var(--font); font-variant-numeric:tabular-nums;
                  text-align:center; }
.watchbar__badge[data-zero="true"]{ display:none; }

/* Centered settings workspace ------------------------------------------------
   This is intentionally a modal owner rather than another bottom popover: the
   unit, typography, theme, guide and training choices all affect more than one
   panel and need enough room to explain what changes. */
.workspace-settings{
  width:min(850px,calc(100vw - 36px)); max-width:none; height:min(720px,calc(100vh - 52px));
  max-height:none; margin:auto; padding:0; overflow:hidden;
  border:1px solid var(--line); border-radius:20px; color:var(--text);
  background:var(--surface); box-shadow:0 30px 90px rgba(15,23,42,.26);
}
.workspace-settings::backdrop{ background:rgba(20,26,36,.32); backdrop-filter:blur(7px); }
.workspace-settings[open]{ animation:workspace-settings-in .22s cubic-bezier(.16,1,.3,1); }
@keyframes workspace-settings-in{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
.workspace-settings__shell{ height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.workspace-settings__header{
  min-height:74px; padding:14px 18px; display:grid; grid-template-columns:40px minmax(0,1fr) 34px;
  align-items:center; gap:12px; border-bottom:1px solid var(--line); background:var(--raised);
}
.workspace-settings__mark{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); }
.workspace-settings__mark svg{ width:20px; height:20px; }
.workspace-settings__header small{ display:block; margin-bottom:3px; color:var(--cad-accent-ink); font:700 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.workspace-settings__header h2{ margin:0; color:var(--ink); font:750 20px/1.1 var(--font); }
.workspace-settings__close{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--dim); }
.workspace-settings__close:hover,.workspace-settings__close:focus-visible{ background:var(--slot); color:var(--ink); outline:0; }
.workspace-settings__close svg{ width:17px; height:17px; }
.workspace-settings__scroll{ min-height:0; overflow:auto; padding:18px; display:grid; gap:14px; background:color-mix(in srgb,var(--bg) 45%,var(--surface)); }
.workspace-settings__section{ padding:17px; display:grid; gap:14px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); }
.workspace-settings__section > header{ display:grid; grid-template-columns:28px minmax(0,1fr); align-items:start; gap:10px; }
.workspace-settings__ordinal{ padding-top:2px; color:var(--cad-accent-ink); font:700 12px/1 var(--mono); letter-spacing:.08em; }
.workspace-settings__section h3{ margin:0; color:var(--ink); font:740 15px/1.25 var(--font); }
.workspace-settings__section header p{ margin:4px 0 0; color:var(--dim); font:500 12px/1.45 var(--font); }
.workspace-settings__field{ min-height:58px; display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,250px); align-items:center; gap:18px; padding:10px 12px; border:1px solid var(--line-soft); border-radius:11px; background:var(--raised); }
.workspace-settings__field label,.workspace-settings__toggle > span,.workspace-settings__sizes legend{ min-width:0; display:grid; gap:3px; }
.workspace-settings__field strong,.workspace-settings__toggle strong,.workspace-settings__sizes legend strong{ color:var(--ink); font:680 13px/1.25 var(--font); }
.workspace-settings__field small,.workspace-settings__toggle small,.workspace-settings__sizes legend small{ color:var(--dim); font:500 12px/1.35 var(--font); }
.workspace-settings select{ width:100%; height:36px; padding:0 34px 0 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font:650 12px/1 var(--font); outline:0; }
.workspace-settings select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.workspace-settings__toggle{ min-height:54px; display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:center; gap:16px; padding:9px 12px; border:1px solid var(--line-soft); border-radius:11px; cursor:pointer; }
.workspace-settings__toggle input{ position:absolute; opacity:0; pointer-events:none; }
.workspace-settings__toggle i{ position:relative; width:40px; height:23px; border-radius:999px; background:var(--line); transition:background .16s; }
.workspace-settings__toggle i::after{ content:''; position:absolute; left:3px; top:3px; width:17px; height:17px; border-radius:50%; background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .18s cubic-bezier(.16,1,.3,1); }
.workspace-settings__toggle input:checked + i{ background:var(--accent); }
.workspace-settings__toggle input:checked + i::after{ transform:translateX(17px); }
.workspace-settings__toggle input:focus-visible + i{ outline:2px solid var(--accent); outline-offset:2px; }
.workspace-settings__sizes{ min-width:0; margin:0; padding:12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; border:1px solid var(--line-soft); border-radius:11px; }
.workspace-settings__sizes legend{ width:100%; padding:0 0 9px; }
.workspace-settings__sizes label{ min-width:0; cursor:pointer; }
.workspace-settings__sizes input{ position:absolute; opacity:0; pointer-events:none; }
.workspace-settings__sizes label > span{ min-height:52px; padding:9px 10px; display:grid; gap:4px; border:1px solid var(--line); border-radius:9px; color:var(--ink); font:650 12px/1.2 var(--font); background:var(--surface); }
.workspace-settings__sizes label b{ color:var(--dim); font:600 12px/1 var(--mono); }
.workspace-settings__sizes input:checked + span{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.workspace-settings__sizes input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:1px; }
.workspace-settings__courses{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.workspace-settings__courses article{ min-width:0; padding:11px; display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--line-soft); border-radius:11px; background:var(--raised); }
.workspace-settings__courses article > span{ width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:var(--accent-soft); color:var(--accent-ink); font-size:17px; }
.workspace-settings__courses article > div{ min-width:0; display:grid; gap:3px; }
.workspace-settings__courses strong{ color:var(--ink); font:680 12px/1.2 var(--font); }
.workspace-settings__courses small{ color:var(--dim); font:500 12px/1.35 var(--font); }
.workspace-settings__courses button,.workspace-settings__lesson button,.workspace-settings__footer button{ min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface); font:680 12px/1 var(--font); }
.workspace-settings__courses button:hover,.workspace-settings__lesson button:hover,.workspace-settings__footer button:hover{ border-color:var(--accent); color:var(--accent-ink); }
.workspace-settings__footer [data-settings-reset]:hover,
.workspace-settings__footer [data-settings-reset]:focus-visible{
  border-color:#dc2626; background:#dc2626; color:#fff; outline:0;
}
.workspace-settings__lesson{ padding:14px; display:grid; gap:7px; border:1px solid var(--accent); border-radius:12px; background:var(--accent-soft); }
.workspace-settings__lesson[hidden]{ display:none; }
.workspace-settings__lesson > span{ color:var(--accent-ink); font:700 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.workspace-settings__lesson h4{ margin:0; color:var(--ink); font:740 15px/1.3 var(--font); }
.workspace-settings__lesson p{ margin:0; color:var(--text); font:500 12px/1.5 var(--font); }
.workspace-settings__lesson > div{ margin-top:5px; display:flex; justify-content:flex-end; gap:8px; }
.workspace-settings__lesson [data-training-next]{ border-color:var(--accent); background:var(--accent); color:#fff; }
.workspace-settings__connector-list{ display:grid; gap:9px; }
.workspace-settings__connector{
  min-width:0; min-height:70px; padding:11px 12px; display:grid;
  grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px;
  border:1px solid var(--line-soft); border-radius:12px; background:var(--raised);
}
.workspace-settings__connector-icon{
  position:relative; width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:11px; background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.workspace-settings__connector-icon img{ width:30px; height:30px; display:block; object-fit:contain; }
.workspace-settings__connector-icon::after{
  content:''; position:absolute; right:3px; bottom:3px; width:7px; height:7px;
  border:2px solid var(--surface); border-radius:50%; background:#98a0ad;
}
.workspace-settings__connector[data-state="context"] .workspace-settings__connector-icon::after{ background:#f59e0b; }
.workspace-settings__connector[data-state="connecting"] .workspace-settings__connector-icon::after{
  background:#f59e0b; animation:fusion-pulse .9s ease-in-out infinite alternate;
}
.workspace-settings__connector[data-state="connected"] .workspace-settings__connector-icon::after{ background:#16a568; }
.workspace-settings__connector[data-state="error"] .workspace-settings__connector-icon::after{ background:#e5484d; }
.workspace-settings__connector-copy{ min-width:0; display:grid; gap:4px; }
.workspace-settings__connector-copy strong{ color:var(--ink); font:690 13px/1.2 var(--font); }
.workspace-settings__connector-copy small{
  overflow:hidden; color:var(--dim); font:500 12px/1.35 var(--font);
  text-overflow:ellipsis; white-space:nowrap;
}
.design-fusion-connection__button{
  min-width:94px; min-height:36px; padding:0 13px; border:1px solid var(--line);
  border-radius:9px; color:var(--ink); background:var(--surface);
  font:680 12px/1 var(--font); transition:border-color .15s,color .15s,background .15s;
}
.design-fusion-connection__button:hover,.design-fusion-connection__button:focus-visible{
  border-color:#ee8a24; color:#b45309; background:color-mix(in srgb,#ee8a24 8%,var(--surface)); outline:0;
}
.design-fusion-connection[data-state="connecting"] .design-fusion-connection__button{ cursor:wait; }
.design-fusion-connection[data-state="connected"] .design-fusion-connection__button,
.design-fusion-connection[data-state="context"] .design-fusion-connection__button,
.design-fusion-connection[data-state="error"] .design-fusion-connection__button{ color:var(--danger); }
.workspace-settings__footer{ min-height:64px; padding:12px 18px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; border-top:1px solid var(--line); background:var(--raised); }
.workspace-settings__footer span{ color:var(--dim); font:500 12px/1.3 var(--font); text-align:center; }
.workspace-settings__footer [value="done"]{ min-width:90px; border-color:var(--accent); background:var(--accent); color:#fff; }
:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after{
  scroll-behavior:auto!important; animation-duration:.01ms!important; animation-delay:0ms!important;
  animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0ms!important;
}
@media (max-width:720px){
  .workspace-settings{ width:calc(100vw - 18px); height:calc(100vh - 24px); border-radius:15px; }
  .workspace-settings__scroll{ padding:11px; }
  .workspace-settings__section{ padding:13px; }
  .workspace-settings__field{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .workspace-settings__courses{ grid-template-columns:minmax(0,1fr); }
  .workspace-settings__connector{ grid-template-columns:42px minmax(0,1fr); }
  .design-fusion-connection__button{ grid-column:1 / -1; width:100%; }
  .workspace-settings__footer{ grid-template-columns:auto 1fr; }
  .workspace-settings__footer span{ display:none; }
}
/* Untitled-folder community presence: collapsed overlapping circles expand
   into a small, horizontally paged live-crew strip beside the Community icon. */
.watchbar-crew{ display:none; align-items:center; min-width:0; margin:0 3px 0 5px; }
.watchbar-crew[data-on="true"]{ display:inline-flex; }
.watchbar-crew__stack{ display:inline-flex; align-items:center; padding:2px 8px 2px 2px; border-radius:999px; cursor:pointer; }
.watchbar-crew__stack:hover,.watchbar-crew__stack:focus-visible{ background:var(--slot); outline:0; }
.watchbar-crew__avatar{
  width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; margin-right:-6px;
  border:2px solid #12a15f; border-radius:50%; color:#fff; box-shadow:0 0 0 1.5px var(--surface);
  font:700 12px/1 var(--font); cursor:pointer;
}
.watchbar-crew__more{ height:17px; margin-left:10px; padding:0 5px; display:grid; place-items:center;
  border-radius:999px; background:var(--slot); color:var(--dim); font:700 12px/1 var(--font); }
.watchbar-crew__page{ display:none; align-items:center; gap:2px; }
.watchbar-crew[data-open="true"] .watchbar-crew__stack{ display:none; }
.watchbar-crew[data-open="true"] .watchbar-crew__page{ display:inline-flex; }
.watchbar-crew__slots{ display:inline-flex; align-items:center; gap:6px; padding:0 3px; }
.watchbar-crew__person{ display:flex; align-items:center; gap:4px; padding:2px 3px; border-radius:999px; color:var(--faint); }
.watchbar-crew__person:hover,.watchbar-crew__person:focus-visible{ background:var(--slot); color:var(--ink); outline:0; }
.watchbar-crew__person .watchbar-crew__avatar{ margin-right:0; }
.watchbar-crew__person em{ max-width:34px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 12px/1 var(--font); font-style:normal; }
.watchbar-crew__nav{ width:19px; height:19px; display:grid; place-items:center; border-radius:50%; color:var(--icon-muted); }
.watchbar-crew__nav:hover:not(:disabled){ background:var(--slot); color:var(--ink); }
.watchbar-crew__nav:disabled{ opacity:.28; }
.watchbar-crew__nav svg{ width:12px; height:12px; }

/* Shared donor-style utility popover for alerts, history, saved
   panels, layout and appearance controls. Calendar keeps its richer surface. */
.watchbar-utility{
  position:fixed; z-index:120; width:min(326px,calc(100vw - 20px)); display:none;
  padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface);
  box-shadow:var(--shadow-lg);
}
.watchbar-utility[data-open="true"]{ display:block; animation:watchbar-pop-in .18s cubic-bezier(.16,1,.3,1); }
@keyframes watchbar-pop-in{ from{ opacity:0; transform:translateY(7px) scale(.98); } to{ opacity:1; transform:none; } }
.watchbar-utility__head{ display:flex; align-items:center; gap:7px; padding:2px 2px 9px; border-bottom:1px solid var(--line-soft); }
.watchbar-utility__head strong{ color:var(--ink); font:700 12px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; }
.watchbar-utility__head small{ color:var(--faint); font:500 12px/1 var(--font); }
.watchbar-utility__head button{ width:22px; height:22px; margin-left:auto; border-radius:7px; color:var(--icon-muted); }
.watchbar-utility__head button:hover{ background:var(--slot); color:var(--ink); }
.watchbar-utility__body{ display:grid; gap:6px; padding-top:8px; }
.watchbar-utility__row{ display:flex; align-items:center; gap:9px; min-height:42px; padding:7px 8px; border-radius:9px; background:var(--raised); text-align:left; }
.watchbar-utility__row:hover,.watchbar-utility__row:focus-visible{ background:var(--slot); outline:1px solid var(--line); }
.watchbar-utility__mark{ width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:9px; background:var(--surface); color:var(--accent); box-shadow:inset 0 0 0 1px var(--line-soft); }
.watchbar-utility__mark svg{ width:14px; height:14px; }
.watchbar-utility__copy{ min-width:0; display:grid; gap:2px; }
.watchbar-utility__copy b{ overflow:hidden; color:var(--ink); font:650 12px/1.2 var(--font); text-overflow:ellipsis; white-space:nowrap; }
.watchbar-utility__copy span{ overflow:hidden; color:var(--faint); font:500 12px/1.2 var(--font); text-overflow:ellipsis; white-space:nowrap; }
.watchbar-utility__meta{ margin-left:auto; flex:0 0 auto; color:var(--faint); font:650 12px/1 var(--font); }
.watchbar-utility__group{ display:grid; gap:6px; }
.watchbar-utility__group + .watchbar-utility__group{ padding-top:8px; border-top:1px solid var(--line-soft); }
.watchbar-utility__group-label{ color:var(--faint); font:700 12px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; }
.watchbar-utility__choices{ display:flex; flex-wrap:wrap; gap:5px; }
.watchbar-utility__choice{ min-height:30px; padding:0 10px 0 7px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; color:var(--dim); font:650 12px/1 var(--font); }
.watchbar-utility__choice:hover,.watchbar-utility__choice[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.watchbar-utility__choices[data-utility-choice-kind="split"]{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px;
}
.watchbar-utility__choice--layout{
  width:100%; min-width:0; height:48px; padding:0; justify-content:center;
  border-radius:10px;
}
.watchbar-utility__layout-icon{ width:33px; height:28px; }
.watchbar-utility__choice--layout[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 44%,transparent);
}
.watchbar-utility__choice--layout .visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.watchbar-utility__swatch{ width:15px; height:15px; flex:0 0 15px; border:1px solid var(--line); border-radius:50%; background:var(--swatch,#fff); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--surface) 60%,transparent); }
.watchbar-utility__swatch[data-look="default"]{ --swatch:linear-gradient(135deg,#fff 0 48%,#2f6bff 49% 100%); }
.watchbar-utility__swatch[data-look="button"]{ --swatch:linear-gradient(135deg,#f8f9ff,#7772b3); }
.watchbar-utility__swatch[data-look="mono"]{ --swatch:linear-gradient(135deg,#fff 0 48%,#111 49% 100%); }
.watchbar-utility__swatch[data-look="terminal"]{ --swatch:#ffb000; border-radius:2px; }
.watchbar-utility__swatch[data-look="light"]{ --swatch:#fff; }
.watchbar-utility__swatch[data-look="dark"]{ --swatch:#0d0d0e; }
.watchbar-utility__primary{ min-height:31px; border-radius:9px; background:#1f2838; color:#fff; font:700 12px/1 var(--font); }
.watchbar-utility__primary:hover{ background:#101725; }

/* Untitled-folder market calendar, positioned above its watchbar icon. */
.watchbar-calendar{
  position:fixed; z-index:121; width:min(302px,calc(100vw - 20px)); display:none; flex-direction:column; gap:8px;
  padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-lg);
}
.watchbar-calendar[data-open="true"]{ display:flex; animation:watchbar-pop-in .18s cubic-bezier(.16,1,.3,1); }
.watchbar-calendar__head{ display:flex; align-items:center; gap:5px; }
.watchbar-calendar__head strong{ min-width:0; color:var(--ink); font:700 12px/1 var(--font); letter-spacing:.08em; }
.watchbar-calendar__head > button{ width:21px; height:21px; display:grid; place-items:center; border-radius:6px; color:var(--icon-muted); }
.watchbar-calendar__head > button:hover{ background:var(--slot); color:var(--ink); }
.watchbar-calendar__views{ margin-left:auto; display:flex; gap:2px; }
.watchbar-calendar__views button{ padding:4px 6px; border-radius:6px; color:var(--dim); font:650 12px/1 var(--font); }
.watchbar-calendar__views button:hover,.watchbar-calendar__views button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-ink); }
.watchbar-calendar__filters{ display:flex; flex-wrap:wrap; gap:4px; }
.watchbar-calendar__filters button{ display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border:1px solid var(--line); border-radius:999px; color:var(--dim); font:550 12px/1 var(--font); }
.watchbar-calendar__filters button[aria-pressed="false"]{ opacity:.4; }
.watchbar-calendar__filters i,.watchbar-calendar__dot{ width:5px; height:5px; display:inline-block; border-radius:50%; }
.watchbar-calendar__week,.watchbar-calendar__grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.watchbar-calendar__week i{ color:var(--faint); text-align:center; font:650 12px/1 var(--font); font-style:normal; }
.watchbar-calendar__grid{ gap:2px; }
.watchbar-calendar__day{ min-height:34px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0 3px; border-radius:8px; }
.watchbar-calendar__day:hover{ background:var(--slot); }
.watchbar-calendar__day b{ color:var(--ink); font:550 12px/1 var(--font); }
.watchbar-calendar__day[data-out="true"] b{ color:var(--faint); opacity:.55; }
.watchbar-calendar__day[data-today="true"]{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.watchbar-calendar__day span{ display:flex; gap:2px; min-height:5px; }
.watchbar-calendar__list{ max-height:290px; display:grid; gap:3px; overflow-y:auto; }
.watchbar-calendar__event{ display:grid; gap:3px; padding:7px 8px; border-radius:8px; }
.watchbar-calendar__event:hover{ background:var(--slot); }
.watchbar-calendar__event b{ color:var(--faint); font:650 12px/1 var(--font); letter-spacing:.09em; }
.watchbar-calendar__event span{ color:var(--ink); font:550 12px/1.3 var(--font); }
@media(max-width:820px){
  .watchbar-crew__page{ display:none !important; }
  .watchbar-crew[data-open="true"] .watchbar-crew__stack{ display:inline-flex; }
  .watchbar{ padding-inline:8px; gap:5px; }
}

/* The Design panels are reparented onto its canvas at boot. Collapse their old
   dock slot so the full drawing grid reaches the utility-row edge. */
.dock__pane-wrap{ height:clamp(150px, 26vh, 250px); border-top:1px solid var(--line);
                  padding:16px 18px 18px; overflow:hidden;
                  transition:height .3s cubic-bezier(.22,.9,.24,1), padding .3s; }
body[data-view="design"] .dock__pane-wrap{
  height:0; padding:0; border-top:0;
}
.dock__pane{ display:none; height:100%; }
.dock__pane[data-active="true"]{ display:block; }
/* Browse's object cards already sit directly above the dock edge. Its old empty
   dock pane only reserved a blank band beneath them, so remove that band and
   let the stage/strip use the reclaimed height. */
body[data-view="browse"] .dock__pane-wrap{
  height:0; padding:0; border-top:0;
}
/* Build is one uninterrupted printer-network canvas. Its cloned three-panel
   strip and empty dock pane added no Build controls, so the map takes all of
   the reclaimed height. */
body[data-view="build"] .view[data-view="build"] .panel-strip{ display:none; }
body[data-view="build"] .dock__pane-wrap{
  height:0; padding:0; border-top:0;
}
.blank{ height:100%; border:1px dashed var(--line); border-radius:var(--radius-ui);
        background:var(--raised); display:grid; place-items:center;
        color:var(--faint); font-size:12px; letter-spacing:.13em; }
.cols-2{ display:grid; grid-template-columns:1.6fr 1fr; gap:10px; height:100%; }
.cols-3{
  position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px; height:100%; min-height:0;
}

/* Community and Data form a compact card deck over the right-hand sketch
   surface. Each card is narrower and taller than the former three-panel row;
   the stagger leaves both headers reachable while the CAD canvas continues
   underneath the deck. */
.design-workspace > .design-floating-panels{
  position:absolute; z-index:24; right:70px; bottom:86px;
  width:clamp(250px,24vw,310px); height:clamp(250px,43vh,310px);
  min-height:0; display:block;
  pointer-events:none;
}
.design-floating-panels > .design-dock-panel{
  position:absolute; right:0; width:calc(100% - 16px);
  height:calc(100% - 38px);
  pointer-events:auto; background:var(--glass-surface-strong);
  box-shadow:0 14px 36px rgba(2,6,23,.18),0 2px 8px rgba(2,6,23,.08);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .18s ease,box-shadow .18s ease;
}
.design-floating-panels > [data-dock-panel="community"]{
  z-index:1; top:0; right:16px;
}
.design-floating-panels > [data-dock-panel="data"]{
  z-index:2; top:38px; right:0;
}
.design-floating-panels > .design-dock-panel:is(:hover,:focus-within){
  z-index:5; transform:translate(-4px,-4px);
  box-shadow:0 20px 46px rgba(2,6,23,.24),0 3px 10px rgba(2,6,23,.1);
}
.design-floating-panels > .design-dock-panel[data-free-floating="true"]:not([data-panel-expanded="true"]):not([data-popped="true"]){
  left:var(--dock-card-left); top:var(--dock-card-top); right:auto; bottom:auto;
  width:var(--dock-card-width); height:var(--dock-card-height); transform:none;
}
.design-floating-panels > .design-dock-panel[data-front="true"]{ z-index:12; }
.design-floating-panels > .design-dock-panel[data-dragging="true"]{
  z-index:13; transform:none; box-shadow:0 24px 56px rgba(2,6,23,.3),0 4px 12px rgba(2,6,23,.12);
}
.design-floating-panels > .design-dock-vsplit{ display:none !important; }
/* Expanding a deck card still restores the existing full-canvas panel action. */
.design-workspace > .design-floating-panels[data-expanded-panel]{
  left:18px; right:68px; top:18px; bottom:82px; width:auto; height:auto;
}
.design-floating-panels[data-expanded-panel] > .design-dock-panel[data-panel-expanded="true"]{
  inset:0; width:auto; height:auto; transform:none;
}
@media(max-width:900px){
  .design-workspace > .design-floating-panels{
    right:54px; bottom:78px; width:250px; height:250px;
  }
  .design-workspace > .design-floating-panels[data-expanded-panel]{
    left:10px; right:54px; top:10px; bottom:76px; width:auto; height:auto;
  }
}

/* Every lower Design panel uses the same header and window controls. */
.design-dock-panel{
  position:relative; min-width:0; min-height:0; height:100%;
  display:flex; flex-direction:column; border:1px solid var(--line);
  border-radius:var(--radius-ui); background:var(--raised); overflow:hidden;
}
.design-dock-panel__head{
  position:relative; z-index:3; flex:0 0 31px; min-width:0;
  display:flex; align-items:center; gap:7px; padding:0 7px 0 10px;
  border-bottom:1px solid var(--line-soft); background:var(--glass-surface-soft);
  color:var(--dim); font:600 12px/1 var(--font); letter-spacing:.11em;
  text-transform:uppercase;
}
.design-dock-panel__head > svg{ width:13px; height:13px; flex:0 0 13px; color:var(--accent); }
.design-dock-panel__title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.design-dock-panel__actions{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.design-dock-panel__action{
  width:23px; height:23px; flex:0 0 23px; display:grid; place-items:center;
  padding:0; border:1px solid transparent; border-radius:5px;
  background:transparent; color:var(--faint); cursor:pointer;
}
.design-dock-panel__action:hover,
.design-dock-panel__action[aria-pressed="true"]{
  color:var(--ink); border-color:var(--line); background:var(--slot);
}
.design-dock-panel__action:focus-visible{ outline:1px solid var(--accent); outline-offset:1px; }
.design-dock-panel__action svg{ width:12px; height:12px; pointer-events:none; }
.design-dock-panel__body{
  position:relative; flex:1 1 auto; min-height:0; padding:10px;
  overflow:auto; color:var(--dim); font-size:12px;
}
.design-dock-panel[data-compact="true"] .design-dock-panel__body{ padding:6px; }
.design-dock-panel__settings{
  position:absolute; z-index:8; top:34px; right:7px; width:170px;
  display:none; padding:8px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel-solid,var(--surface)); box-shadow:0 14px 34px rgba(15,23,42,.18);
  color:var(--dim); font:500 12px/1.25 var(--font); letter-spacing:0;
  text-transform:none;
}
.design-dock-panel[data-settings-open="true"] .design-dock-panel__settings{ display:grid; gap:7px; }
.design-dock-panel__setting{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.design-dock-panel__setting input{ accent-color:var(--accent); }
.design-dock-panel[data-compact="true"] .community-project{ height:78px; }
.design-dock-panel[data-compact="true"] .community-project__meta{ display:none; }
.design-dock-panel__float-resize{
  position:absolute; z-index:12; right:0; bottom:0; width:18px; height:18px;
  display:none; cursor:nwse-resize; touch-action:none;
}
.design-dock-panel__float-resize::after{
  content:""; position:absolute; right:4px; bottom:4px; width:8px; height:8px;
  border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
}
.design-floating-panels > .design-dock-panel > .design-dock-panel__float-resize{ display:block; }
.design-floating-panels > .design-dock-panel:not([data-panel-expanded="true"]) .design-dock-panel__head{ cursor:grab; }
.design-floating-panels > .design-dock-panel[data-dragging="true"] .design-dock-panel__head{ cursor:grabbing; }
.design-dock-panel[data-popped="true"]{
  position:fixed; z-index:135; left:var(--dock-pop-left); top:var(--dock-pop-top);
  width:var(--dock-pop-width); height:var(--dock-pop-height);
  min-width:240px; min-height:150px; max-width:none; max-height:none;
  box-shadow:0 24px 70px rgba(2,6,23,.34); resize:none;
}
.design-dock-panel[data-popped="true"] .design-dock-panel__head{ cursor:move; }
.design-dock-panel[data-popped="true"] .design-dock-panel__float-resize{ display:block; }
.cols-3[data-expanded-panel]{ grid-template-columns:minmax(0,1fr) !important; }
.cols-3[data-expanded-panel] > .design-dock-panel:not([data-panel-expanded="true"]){ display:none; }
.cols-3[data-expanded-panel] > .design-dock-panel[data-panel-expanded="true"]{ grid-column:1 / -1; }
.cols-3[data-popped-panel]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.design-dock-vsplit{
  position:absolute; z-index:30; top:0; bottom:0; width:10px;
  transform:translateX(-50%); cursor:col-resize; touch-action:none;
}
.design-dock-vsplit::after{
  content:""; position:absolute; left:4px; top:34px; bottom:4px; width:2px;
  border-radius:2px; background:transparent; transition:background .15s,box-shadow .15s;
}
.design-dock-vsplit:hover::after,
.design-dock-vsplit:focus-visible::after,
body[data-design-dock-vsplit="true"] .design-dock-vsplit::after{
  background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.cols-3:is([data-expanded-panel],[data-popped-panel]) .design-dock-vsplit{ display:none; }
body[data-design-dock-vsplit="true"]{ cursor:col-resize; user-select:none; }

.design-data-row{
  margin-top:9px; padding:8px; border:1px solid var(--line-soft); border-radius:7px;
  background:var(--control-surface); color:var(--dim);
}
.design-data-list{ display:grid; gap:6px; }
.design-data-row{ margin:0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.design-data-row b{ color:var(--ink); font-size:12px; }

/* Design dock · community projects -----------------------------------------
   The left Transform placeholder is a compact project table. Each project
   carries a tiny CAD plate/object at rest; authorship and recency surface only
   on hover/focus so the row stays visual rather than metadata-heavy. */
/* Project rows. The dock table that used to hold them is gone; the profile
   panel on the design floor is what scrolls them now. */
.design-community__rows{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; touch-action:pan-y; padding:4px;
  scroll-snap-type:y proximity;
}

/* ══════════════════════════════════════════════════════════════════
   Design projects — the header project mark and the projects it opens
   ══════════════════════════════════════════════════════════════════
   The panel floats over the design floor instead of docking under it, so
   reading your projects costs the floor no height. It reuses the project row
   styling the dock table used, because the rows themselves did not change. */
.design-profile-button{
  flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center;
  pointer-events:auto; border:1px solid var(--line); border-radius:7px;
  background:var(--surface-preview); color:var(--accent);
  transition:background .15s,border-color .15s,color .15s;
}
.design-profile-button svg{ width:14px; height:14px; }
.design-profile-button:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.design-profile-button[aria-expanded="true"]{
  border-color:var(--accent); background:var(--accent); color:var(--tip-fg);
}
.design-profile-panel{
  position:absolute; z-index:60; left:12px; top:46px;
  width:min(380px,calc(100% - 24px)); height:var(--design-profile-height,min(500px,calc(100% - 58px)));
  min-height:min(280px,calc(100% - 58px)); max-height:calc(100% - 58px);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:16px;
  background:var(--glass-surface-strong); box-shadow:var(--shadow-lg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  animation:designProfileIn .16s cubic-bezier(.22,.9,.24,1);
}
.design-profile-panel[hidden]{ display:none; }
@keyframes designProfileIn{ from{ opacity:0; transform:translateY(-6px) scale(.985); } }
.design-profile-panel__head{
  flex:0 0 auto; min-height:56px; padding:10px 11px 10px 12px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--line-soft); background:var(--glass-surface-soft);
}
.design-profile-panel__project-mark{
  width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:9px; background:var(--accent-soft); color:var(--accent-ink);
}
.design-profile-panel__project-mark svg{ width:18px; height:18px; }
.design-profile-panel__copy{ min-width:0; flex:1; }
.design-profile-panel__copy strong{ display:block; color:var(--ink); font:720 14px/1.2 var(--font); letter-spacing:-.01em; }
.design-profile-panel__copy span{
  display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--faint); font:500 12px/1.2 var(--font);
}
.design-profile-panel__close{
  width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid transparent; border-radius:8px; color:var(--dim);
  transition:background .15s,border-color .15s,color .15s;
}
.design-profile-panel__close svg{ width:12px; height:12px; }
.design-profile-panel__close:hover{ border-color:var(--line); background:var(--surface-hover); color:var(--ink); }
.design-profile-panel__tabs{
  flex:0 0 auto; margin:8px 10px; padding:4px; display:flex; gap:4px;
  border:1px solid var(--line-soft); border-radius:10px;
  background:color-mix(in srgb,var(--surface) 91%,var(--ink));
}
.design-profile-panel__tab{
  flex:1 1 0; min-width:0; padding:8px 10px; border:1px solid transparent; border-radius:8px;
  color:var(--dim); font:650 12px/1.1 var(--font); letter-spacing:0; text-transform:none;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.design-profile-panel__tab:hover{ background:var(--slot); color:var(--ink); }
.design-profile-panel__tab[aria-selected="true"]{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); background:var(--surface); color:var(--accent-ink);
  box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 10%,transparent);
}
/* Friend groups are separate rosters rather than one merged feed, so the tab
   opens a picker instead of stacking every group's work together. */
.design-profile-panel__groups{
  flex:0 0 auto; padding:7px 8px; display:flex; flex-wrap:wrap; gap:4px;
  border-bottom:1px solid var(--line-soft); background:var(--glass-surface-soft);
}
.design-profile-panel__groups[hidden]{ display:none; }
.design-profile-panel__group{
  padding:5px 9px; border:1px solid var(--line-soft); border-radius:999px;
  background:var(--surface); color:var(--dim); font:650 12px/1 var(--font); white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.design-profile-panel__group:hover{ border-color:var(--line); color:var(--ink); }
.design-profile-panel__group[aria-pressed="true"]{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);
}
.design-profile-panel__rows{ padding:7px 7px 9px; }
.design-profile-panel__rows:focus-visible{ outline:0; }
.design-profile-panel__resize{
  position:relative; flex:0 0 14px; width:100%; height:14px; display:grid; place-items:center;
  border:0; border-top:1px solid var(--line-soft); background:var(--glass-surface-soft);
  cursor:ns-resize; touch-action:none;
}
.design-profile-panel__resize span{
  width:46px; height:3px; border-radius:999px; background:var(--line);
  transition:width .15s,background .15s;
}
.design-profile-panel__resize:is(:hover,:focus-visible) span,
.design-profile-panel[data-profile-resizing="true"] .design-profile-panel__resize span{
  width:58px; background:var(--accent);
}
.design-profile-panel__resize:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
body[data-design-profile-resize="true"]{ cursor:ns-resize; user-select:none; }

.community-project{
  position:relative; height:100px; display:flex; align-items:stretch; gap:11px;
  padding:7px; border:1px solid transparent; border-radius:10px;
  scroll-snap-align:start; outline:0; transition:background .15s,border-color .15s;
}
.community-project + .community-project{ margin-top:4px; }
.community-project:hover,
.community-project:focus-visible{ background:var(--surface-hover); border-color:var(--line); }
.community-project:hover .community-project__name,
.community-project:focus-visible .community-project__name{ color:var(--ink); }
.community-project:hover .community-project__type,
.community-project:focus-visible .community-project__type{ color:var(--dim); }
.community-project__preview{
  position:relative; flex:0 1 102px; min-width:78px; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:9px;
  background:linear-gradient(180deg,var(--control-surface),var(--surface-preview));
}
.community-project[data-locked="true"] .community-project__preview{
  border-color:color-mix(in srgb,var(--cad-accent) 24%,var(--line-soft));
}
.community-project__grid{
  position:absolute; left:7px; right:7px; bottom:1px; height:47px;
  transform:perspective(130px) rotateX(58deg); transform-origin:50% 100%;
  background:
    linear-gradient(90deg,transparent calc(50% - .55px),rgba(220,38,38,.7) calc(50% - .55px) calc(50% + .55px),transparent calc(50% + .55px)),
    linear-gradient(0deg,transparent calc(50% - .55px),rgba(37,99,235,.72) calc(50% - .55px) calc(50% + .55px),transparent calc(50% + .55px)),
    repeating-linear-gradient(0deg,rgba(148,163,184,.38) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(148,163,184,.38) 0 1px,transparent 1px 7px);
  border:1px solid rgba(148,163,184,.22);
}
.community-project__axis-y{
  position:absolute; z-index:1; left:50%; bottom:17px; width:1px; height:25px;
  background:rgba(22,163,74,.75); transform:translateX(-50%);
}
.community-project__object{
  position:absolute; z-index:2; left:50%; bottom:18px; width:30px; height:29px;
  transform:translateX(-50%) rotate(-4deg);
  background:linear-gradient(145deg,#f4b942,#d68b18); border:1px solid #bd7410;
  box-shadow:5px 7px 10px rgba(67,79,99,.14);
}
.community-project__object[data-shape="bracket"]{
  width:32px; height:29px; background:transparent; border:7px solid #dd951f;
  border-top-width:6px; border-radius:3px 3px 1px 1px;
}
.community-project__object[data-shape="lamp"]{
  width:34px; height:28px; border-radius:50% 50% 30% 30%;
  clip-path:polygon(16% 0,84% 0,100% 72%,62% 72%,62% 100%,38% 100%,38% 72%,0 72%);
}
.community-project__object[data-shape="gearbox"]{ width:31px; height:26px; border-radius:3px; }
.community-project__object[data-shape="mount"]{ width:36px; height:29px; clip-path:polygon(0 100%,48% 0,100% 100%,72% 100%,48% 49%,25% 100%); }
.community-project__object[data-shape="holder"]{ width:35px; height:28px; clip-path:polygon(0 100%,0 36%,18% 36%,18% 0,34% 0,34% 42%,51% 42%,51% 8%,68% 8%,68% 49%,84% 49%,84% 18%,100% 18%,100% 100%); }
.community-project__object[data-shape="phone"]{ width:27px; height:31px; clip-path:polygon(0 100%,12% 35%,25% 35%,32% 82%,100% 82%,100% 100%); }
.community-project__object[data-shape="planter"]{ width:33px; height:29px; clip-path:polygon(10% 0,90% 0,79% 100%,21% 100%); border-radius:2px; }
.community-project__copy{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; padding:3px 0; }
.community-project__titleline{ display:flex; align-items:center; gap:7px; min-width:0; }
.community-project__name{
  display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink); font:650 13px/1.25 var(--font); letter-spacing:-.012em;
}
.community-project__access{
  flex:0 0 22px; width:22px; height:22px; display:inline-grid; place-items:center; padding:0;
  border:1px solid var(--line-soft); border-radius:6px; background:transparent;
  color:var(--faint);
}
.community-project__access svg{ width:11px; height:11px; }
.community-project button.community-project__access{ cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .15s; }
.community-project[data-locked="true"] .community-project__access{ color:var(--cad-accent); border-color:color-mix(in srgb,var(--cad-accent) 28%,var(--line)); }
.community-project[data-locked="true"] button.community-project__access:hover{
  background:color-mix(in srgb,var(--cad-accent) 10%,var(--surface)); border-color:var(--cad-accent); transform:translateY(-1px);
}
.community-project__type{ margin-top:4px; color:var(--dim); font:450 12px/1.25 var(--font); }
.community-project__signals{ margin-top:auto; display:flex; align-items:center; gap:5px; min-width:0; }
.community-project__trend{
  height:24px; min-width:24px; display:inline-grid; place-items:center; padding:0 5px;
  border:1px solid var(--line-soft); border-radius:6px; background:var(--control-surface);
  font-size:12px;
}
.community-project__signal{
  height:24px; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:0 7px; border:1px solid var(--line-soft); border-radius:6px;
  background:var(--control-surface); color:var(--dim); cursor:pointer;
  font:650 12px/1 var(--font); white-space:nowrap;
}
.community-project__signal:hover,
.community-project__signal[aria-pressed="true"]{ color:var(--ink); border-color:var(--accent); background:var(--accent-soft); }
.community-project__signal svg{ width:10px; height:10px; flex:0 0 10px; }
.community-project__share{ width:24px; flex:0 0 24px; padding:0; margin-left:auto; }
.community-project__share[aria-expanded="true"]{ color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft); }
.community-project__signal--cart{
  border-color:color-mix(in srgb,var(--accent) 24%,var(--line));
  background:var(--accent-soft); color:var(--accent-ink);
}
.community-project[data-locked="true"] .community-project__signal--cart{ color:var(--cad-accent); }

.design-project-share-popover{
  position:fixed; z-index:420; width:min(250px,calc(100vw - 20px)); padding:8px;
  border:1px solid var(--line); border-radius:13px; background:var(--raised); color:var(--ink);
  box-shadow:0 18px 48px color-mix(in srgb,var(--ink) 22%,transparent);
  animation:projectShareIn .14s cubic-bezier(.22,.9,.24,1);
}
.design-project-share-popover[hidden]{ display:none; }
@keyframes projectShareIn{ from{ opacity:0; transform:translateY(-4px) scale(.985); } }
.design-project-share-popover > header{ display:flex; align-items:flex-start; gap:8px; padding:2px 2px 7px 4px; }
.design-project-share-popover > header > span{ flex:1; min-width:0; }
.design-project-share-popover > header small{
  display:block; color:var(--accent-ink); font:750 12px/1 var(--font); letter-spacing:.1em;
}
.design-project-share-popover > header strong{
  display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink); font:700 13px/1.2 var(--font);
}
.design-project-share-popover > header button,
.design-project-access__close{
  width:24px; height:24px; display:grid; place-items:center; padding:0; border:1px solid transparent;
  border-radius:7px; background:transparent; color:var(--dim); font:500 18px/1 var(--font); cursor:pointer;
}
.design-project-share-popover > header button:hover,
.design-project-access__close:hover{ border-color:var(--line); background:var(--surface-hover); color:var(--ink); }
.design-project-share-popover__options{ display:grid; gap:5px; }
.design-project-share-popover__options > button{
  min-width:0; display:grid; grid-template-columns:28px minmax(0,1fr) 18px; align-items:center; gap:8px;
  padding:9px; border:1px solid var(--line-soft); border-radius:9px; background:var(--surface); color:var(--ink);
  text-align:left; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s;
}
.design-project-share-popover__options > button:hover{ border-color:var(--accent); background:var(--accent-soft); }
.design-project-share-popover__options > button[aria-checked="true"]{
  border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent);
}
.design-project-share-popover__options svg{ width:18px; height:18px; color:var(--accent-ink); }
.design-project-share-popover__options span{ min-width:0; }
.design-project-share-popover__options strong{ display:block; color:var(--ink); font:700 12px/1.2 var(--font); }
.design-project-share-popover__options small{ display:block; margin-top:3px; color:var(--dim); font:450 12px/1.25 var(--font); }
.design-project-share-popover__options i{ color:var(--accent); font:800 13px/1 var(--font); font-style:normal; opacity:0; }
.design-project-share-popover__options > button[aria-checked="true"] i{ opacity:1; }

.design-project-access-overlay{
  position:fixed; z-index:430; inset:0; display:grid; place-items:center; padding:20px;
  background:color-mix(in srgb,#111827 44%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.design-project-access-overlay[hidden]{ display:none; }
.design-project-access{
  position:relative; width:min(430px,calc(100vw - 28px)); padding:25px;
  border:1px solid var(--line); border-radius:18px; background:var(--raised); color:var(--ink);
  box-shadow:0 28px 80px rgba(15,23,42,.28); text-align:center;
  animation:projectAccessIn .18s cubic-bezier(.22,.9,.24,1);
}
@keyframes projectAccessIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } }
.design-project-access__close{ position:absolute; right:12px; top:12px; }
.design-project-access__icon{
  width:44px; height:44px; display:grid; place-items:center; margin:0 auto 13px;
  border:1px solid color-mix(in srgb,var(--cad-accent) 28%,var(--line)); border-radius:13px;
  background:color-mix(in srgb,var(--cad-accent) 10%,var(--surface)); color:var(--cad-accent);
}
.design-project-access__icon svg{ width:20px; height:20px; }
.design-project-access > small{ color:var(--cad-accent); font:800 12px/1 var(--font); letter-spacing:.13em; }
.design-project-access h2{ margin:7px 26px 8px; color:var(--ink); font:760 20px/1.2 var(--font); letter-spacing:-.025em; }
.design-project-access p{ margin:0 auto 17px; max-width:355px; color:var(--dim); font:450 13px/1.48 var(--font); }
.design-project-access__choices{ display:grid; gap:8px; text-align:left; }
.design-project-access__choices > button{
  min-width:0; display:flex; align-items:center; gap:12px; padding:12px 13px;
  border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
}
.design-project-access__choices > button:hover{
  border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px);
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 12%,transparent);
}
.design-project-access__choices span{ flex:1; min-width:0; }
.design-project-access__choices strong{ display:block; color:var(--ink); font:720 13px/1.2 var(--font); }
.design-project-access__choices small{ display:block; margin-top:3px; color:var(--dim); font:450 12px/1.25 var(--font); }
.design-project-access__choices b{
  flex:0 0 auto; padding:5px 7px; border-radius:999px; background:var(--accent); color:var(--tip-fg);
  font:750 12px/1 var(--font); white-space:nowrap;
}
.design-project-access__later{
  margin-top:13px; padding:6px 10px; border:0; background:transparent; color:var(--dim);
  font:650 12px/1 var(--font); cursor:pointer;
}
.design-project-access__later:hover{ color:var(--ink); text-decoration:underline; }

/* ══════════════════════════════════════════════════════════════════
   the Browse view's Object Insights
   3d_hive_improve/src/views/trending/product-focus-panels.js builds this
   when a product is clicked, styled by .trending-product-focus in
   trending.css: three columns, both sides the SAME width so the middle
   slot lands on the screen's centre line — which is where the scene
   camera puts the model. Left is the Object Insights panel (video,
   engagement, dimensions, 2D drawings); the middle carries the object's
   title block and action rail over the object itself; the right is the
   print cart in its object-focus state.
   ══════════════════════════════════════════════════════════════════ */
.pfocus{
  --pf-gold:#ee9813; --pf-gold-strong:var(--cad-accent); --pf-gold-soft:var(--cad-accent-soft);
  --pf-ink:var(--ink); --pf-muted:var(--dim);
  --pf-border:color-mix(in srgb,var(--cad-accent) 28%,transparent);
  --pf-surface:var(--surface); --pf-drawer-border:var(--line);
  --pf-side:clamp(272px, 25vw, 340px);
  --pf-rail-w:52px;
  --pf-rail-gap:10px;
  --pf-print-w:clamp(272px,25vw,318px);
  --pf-right-w:var(--pf-rail-w);
  position:absolute; inset:0; z-index:1;
  /* Per-side widths, as the source has them: a drag handle writes one of
     these, and a side left alone falls back to the shared responsive value
     so an untouched layout still tracks the breakpoints and stays centred. */
  display:grid;
  grid-template-columns:var(--pf-left-w, var(--pf-side)) minmax(240px,1fr)
                        var(--pf-right-w, var(--pf-side));
  gap:0; overflow:hidden; color:var(--pf-ink); isolation:isolate;
}
.pfocus__column{ position:relative; z-index:1; min-width:0; min-height:0;
                 display:flex; flex-direction:column; }

/* ── left: the Object Insights panel ── */
.pfocus > .pfocus__column:first-of-type{ z-index:6; }
.pfocus__panel{ display:flex; flex-direction:column; min-height:0; height:100%;
                background:var(--pf-surface); border-right:1px solid var(--pf-drawer-border); }
.pfocus .pfocus__panel{
  box-shadow:18px 14px 42px rgba(16,24,40,.16);
}
.pfocus__head{ display:flex; align-items:center; gap:9px; padding:12px 12px 10px;
               border-bottom:1px solid var(--pf-border); }
.pfocus__head-ico{ display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px;
                   border-radius:8px; background:var(--pf-gold-soft); color:var(--pf-gold-strong); }
.pfocus__head-ico svg{ width:15px; height:15px; }
.pfocus__heading{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.pfocus__heading strong{ font-size:12.5px; letter-spacing:-.01em; }
.pfocus__heading small{ color:var(--pf-muted); font-size:12px; }
.pfocus__body{ flex:1 1 auto; min-height:0; overflow:auto; padding:0 12px 14px; }
.pfocus__section{ padding:12px 0; border-bottom:1px dashed var(--pf-border); }
.pfocus__section:last-child{ border-bottom:0; }
.pfocus__section[data-user-height="true"]{ min-height:0; overflow:auto; }
.pfocus__section-resizer{
  position:relative; z-index:5; display:block; height:10px; margin:0 5px -10px;
  cursor:row-resize; touch-action:none; outline:0;
}
.pfocus__section-resizer::after{
  content:""; position:absolute; left:50%; top:50%; width:40px; height:2px;
  border-radius:999px; background:var(--pf-border); transform:translate(-50%,-50%);
  transition:width .14s,background .14s,box-shadow .14s;
}
.pfocus__section-resizer:is(:hover,:focus-visible,[data-active="true"])::after{
  width:56px; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.pfocus__body[data-pfocus-section-resize="true"]{ cursor:row-resize; user-select:none; }
.pfocus__section-title{ display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:8px; color:var(--pf-muted); font:700 12px/1 var(--font); letter-spacing:.13em; }
.pfocus__section-title span:last-child{ color:var(--pf-gold-strong); }

/* video slot + the drop zone that returns a floated player to the panel */
.pfocus__video{ position:relative; aspect-ratio:16/9; border-radius:9px; overflow:hidden;
  background:linear-gradient(140deg,#2a2f38,#12151a); display:grid; place-items:center;
  border:1px solid var(--pf-border); }
.pfocus__video-play{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:#12151a; box-shadow:var(--shadow-sm); }
.pfocus__video-play svg{ width:14px; height:14px; margin-left:2px; }
.pfocus__video-cap{ position:absolute; left:8px; bottom:7px; color:rgba(255,255,255,.86);
  font:600 12px/1 var(--font); letter-spacing:.06em; }

/* engagement: the ANALYTICS eyebrow, the two totals, and the series */
.pfocus__eyebrow{ display:flex; align-items:center; justify-content:space-between; gap:8px;
                  margin-bottom:9px; }
.pfocus__analytics{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  border-radius:999px; border:1px solid var(--pf-border); color:var(--pf-muted);
  background:transparent; font:700 12px/1 var(--font); letter-spacing:.12em; cursor:pointer; }
.pfocus__analytics:hover{ background:var(--pf-gold-soft); color:var(--pf-gold-strong); }
.pfocus__analytics svg{ width:10px; height:10px; }
.pfocus__ranges{ display:inline-flex; gap:3px; }
.pfocus__range{ padding:3px 7px; border-radius:999px; color:var(--pf-muted);
  font:700 12px/1 var(--font); letter-spacing:.06em; }
.pfocus__range[aria-pressed="true"]{ background:var(--pf-ink); color:var(--pf-surface); }
.pfocus__engagement{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:9px; }
.pfocus__engagement span{ display:flex; flex-direction:column; gap:1px; padding:7px 9px;
  border:1px solid var(--pf-border); border-radius:9px; background:var(--pf-gold-soft); }
.pfocus__engagement strong{ font-size:14px; font-variant-numeric:tabular-nums; }
.pfocus__engagement small{ color:var(--pf-muted); font-size:12px; letter-spacing:.06em; }
.pfocus__chart{ position:relative; display:block; width:100%; height:58px; min-height:58px; cursor:pointer; }
.pfocus__chart[data-plotly-state="loading"]::after{
  content:'Loading interactive chart…'; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--pf-muted); font:600 12px/1 var(--font); letter-spacing:.04em;
}
.pfocus__chart[data-plotly-state="ready"]::after{ display:none; }
.pfocus__analytics-card{ cursor:pointer; }
.pfocus__analytics-card:focus-within{ border-color:color-mix(in srgb,var(--pf-gold-strong) 42%,var(--pf-border)); }

/* Browse object analytics expands over the centre workspace while preserving
   the focused object and both side panels behind a quiet scrim. The overlay is
   mounted beside .pfocus, so it owns the storefront tokens its solid sheet and
   raised cards need instead of depending on .pfocus-scoped variables. */
.pfanalytics{
  --pf-surface:#fbfaf8; --pf-header:#fff; --pf-ink:#1d1a17; --pf-muted:#6f675e;
  --pf-border:color-mix(in srgb,#c9c1b6 58%,transparent);
  --pf-gold-strong:#1468e8; --raised:#fff; --slot:#f4f1ec;
  position:fixed; z-index:240; inset:68px 0 42px; display:grid; place-items:center; padding:20px;
}
:root[data-theme="dark"] .pfanalytics{
  --pf-surface:#141312; --pf-header:#1a1816; --pf-ink:#f5f2ee; --pf-muted:#b3aca3;
  --pf-border:color-mix(in srgb,#4b453e 58%,transparent);
  --pf-gold-strong:#1f74ef; --raised:#1c1a18; --slot:#26231f;
}
.pfanalytics[hidden]{ display:none; }
.pfanalytics__scrim{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(15,23,42,.48);
  backdrop-filter:blur(7px); cursor:default;
}
.pfanalytics__dialog{
  position:relative; width:min(960px,calc(100vw - 72px)); max-height:calc(100vh - 142px);
  overflow:auto; overscroll-behavior:contain; border:1px solid var(--pf-border); border-radius:18px;
  background:var(--pf-surface); color:var(--pf-ink); box-shadow:0 28px 80px rgba(15,23,42,.38);
  scrollbar-width:thin;
}
.pfanalytics__header{
  position:sticky; z-index:5; top:0; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 20px 15px; border-bottom:1px solid var(--pf-border);
  background:var(--pf-header); backdrop-filter:none; -webkit-backdrop-filter:none;
}
.pfanalytics__header > span:first-child{ min-width:0; }
.pfanalytics__header small,.pfanalytics__premium-head small{
  display:block; margin-bottom:5px; color:var(--pf-gold-strong); font:800 12px/1 var(--font);
  letter-spacing:.14em;
}
.pfanalytics__header h2{ margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:750 22px/1.15 var(--font); }
.pfanalytics__header p{ margin:5px 0 0; color:var(--pf-muted); font:600 12px/1.35 var(--font); }
.pfanalytics__header-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.pfanalytics__upgrade,.pfanalytics__close{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--pf-border);
  border-radius:10px; background:var(--raised); color:var(--pf-ink); font:700 12px/1 var(--font);
}
.pfanalytics__upgrade{ min-height:38px; padding:0 13px; border-color:#1f74ef; background:#1f74ef; color:#fff; }
.pfanalytics__upgrade:hover,.pfanalytics__upgrade:focus-visible{
  border-color:#1468e8; background:#1468e8; transform:translateY(-1px); box-shadow:0 7px 18px rgba(31,116,239,.28);
}
.pfanalytics__upgrade svg{ width:14px; height:14px; }
.pfanalytics__close{ width:38px; height:38px; padding:0; }
.pfanalytics__close svg{ width:16px; height:16px; }
.pfanalytics__toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px 8px;
}
.pfanalytics__freshness{ color:var(--pf-muted); font:650 12px/1 var(--font); }
.pfanalytics__metrics{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; padding:8px 20px 12px; }
.pfanalytics__metrics article{
  min-width:0; padding:11px 12px; border:1px solid var(--pf-border); border-radius:11px; background:var(--raised);
}
.pfanalytics__metrics small{ display:block; min-height:25px; color:var(--pf-muted); font:650 12px/1.2 var(--font); }
.pfanalytics__metrics strong{ display:block; margin-top:5px; font:750 20px/1 var(--font); font-variant-numeric:tabular-nums; }
.pfanalytics__chart-card{
  margin:0 20px; padding:13px 14px 8px; border:1px solid var(--pf-border); border-radius:13px; background:var(--raised);
}
.pfanalytics__chart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:0 4px; }
.pfanalytics__chart-head span:first-child{ display:flex; flex-direction:column; gap:3px; }
.pfanalytics__chart-head strong{ font:750 13px/1 var(--font); }
.pfanalytics__chart-head small,.pfanalytics__chart-head > span:last-child{ color:var(--pf-muted); font:650 12px/1.2 var(--font); }
.pfanalytics__plot{ position:relative; width:100%; height:330px; min-height:330px; }
.pfanalytics__plot[data-plotly-state="loading"]::after{
  content:'Loading Plotly analytics…'; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--pf-muted); font:650 12px/1 var(--font);
}
.pfanalytics__plot[data-plotly-state="ready"]::after{ display:none; }
.pfanalytics__premium{ margin:14px 20px 20px; padding:15px; border:1px solid color-mix(in srgb,#7c3aed 28%,var(--pf-border));
  border-radius:13px; background:linear-gradient(135deg,color-mix(in srgb,#7c3aed 7%,var(--raised)),var(--raised)); }
.pfanalytics__premium-head{ display:flex; justify-content:space-between; align-items:end; gap:15px; margin-bottom:12px; }
.pfanalytics__premium-head strong{ display:block; font:750 15px/1.2 var(--font); }
.pfanalytics__premium-head > span:last-child{ color:var(--pf-muted); font:650 12px/1.3 var(--font); text-align:right; }
.pfanalytics__locked-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pfanalytics__locked{
  position:relative; min-height:144px; overflow:hidden; border:1px solid var(--pf-border); border-radius:11px; background:var(--pf-surface);
}
.pfanalytics__masked{ display:grid; gap:7px; padding:15px; filter:blur(4px); opacity:.3; user-select:none; }
.pfanalytics__masked strong{ font-size:12px; }
.pfanalytics__masked span{ display:flex; justify-content:space-between; padding:5px 7px; border-radius:5px; background:var(--slot); font-size:12px; }
.pfanalytics__masked--bars span{ display:block; height:10px; width:var(--bar,74%); background:#7c3aed; }
.pfanalytics__masked--bars span:nth-child(2){ --bar:92%; }.pfanalytics__masked--bars span:nth-child(3){ --bar:72%; }
.pfanalytics__masked--bars span:nth-child(4){ --bar:52%; }.pfanalytics__masked--bars span:nth-child(5){ --bar:34%; }
.pfanalytics__lock{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:13px; text-align:center;
  background:linear-gradient(rgba(255,255,255,.3),color-mix(in srgb,var(--pf-surface) 88%,transparent));
}
:root[data-theme="dark"] .pfanalytics__lock{ background:linear-gradient(rgba(10,14,24,.26),color-mix(in srgb,var(--pf-surface) 90%,transparent)); }
.pfanalytics__lock > svg{ width:18px; height:18px; margin-bottom:6px; color:#7c3aed; }
.pfanalytics__lock strong{ font:750 12.5px/1.2 var(--font); }
.pfanalytics__lock p{ max-width:270px; margin:5px 0 9px; color:var(--pf-muted); font:600 12px/1.35 var(--font); }
.pfanalytics__lock button{
  padding:7px 10px; border:1px solid #1f74ef; border-radius:8px; background:#1f74ef; color:#fff; font:700 12px/1 var(--font);
}
.pfanalytics__lock button:hover,.pfanalytics__lock button:focus-visible{ border-color:#1468e8; background:#1468e8; }
.pfanalytics__upgrade-status{ min-height:14px; margin:9px 0 0; color:#7c3aed; font:650 12px/1.3 var(--font); text-align:center; }
@media (max-width:900px){
  .pfanalytics{ padding:10px; }.pfanalytics__dialog{ width:calc(100vw - 20px); max-height:calc(100vh - 124px); }
  .pfanalytics__metrics{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pfanalytics__locked-grid{ grid-template-columns:1fr; }
}

/* dimensions + the orthographic 2D drawings */
.pfocus__specs{ display:grid; gap:4px; margin-bottom:4px; }
.pfocus__specs div{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:12px; color:var(--pf-muted); }
.pfocus__specs b{ color:var(--pf-ink); font-weight:600; font-variant-numeric:tabular-nums; }
/* Four orthographic views now, not three glyphs — two up, two across, so each
   panel keeps a usable size inside the 320px insights column. */
.pfocus__drawings{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.pfocus__drawing img{
  width:88%; height:88%; object-fit:contain; display:block;
  opacity:0; transition:opacity .2s ease;
}
.pfocus__drawings[data-drawing-state="ready"] .pfocus__drawing img{ opacity:1; }
/* Until a render lands the panel is just its label on the placeholder ground;
   an <img> with no src must not draw a broken-image glyph. */
.pfocus__drawing img:not([src]){ visibility:hidden; }
.pfocus__drawings[data-drawing-state="loading"] .pfocus__drawing::after{
  content:''; position:absolute; inset:0; border-radius:8px;
  background:linear-gradient(100deg, transparent 30%,
    color-mix(in srgb,var(--pf-ink) 8%,transparent) 50%, transparent 70%);
  background-size:220% 100%;
  animation:pfDrawingShimmer 1.1s linear infinite;
}
@keyframes pfDrawingShimmer{ to{ background-position:-220% 0; } }
.pfocus__drawing{ position:relative; aspect-ratio:1; border:1px solid var(--pf-border);
  border-radius:8px; background:var(--raised); display:grid; place-items:center;
  /* The tile carries a rendered image now, so its radius has to clip. */
  overflow:hidden; }
.pfocus__drawing span{ position:absolute; left:5px; top:4px; z-index:1; color:var(--pf-muted);
  font:700 12px/1 var(--font); letter-spacing:.1em; }
.pfocus__drawing svg{ width:64%; height:64%; color:var(--pf-ink); }
.pfocus__drawing-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  margin:8px 0 0; padding:0; }
.pfocus__drawing-specs div{ display:flex; flex-direction:column; gap:1px; }
.pfocus__drawing-specs dt{ color:var(--pf-muted); font:700 12px/1 var(--font); letter-spacing:.1em; }
.pfocus__drawing-specs dd{ margin:0; font-size:12px; font-weight:600;
                           font-variant-numeric:tabular-nums; }

/* ── middle: the object, with its title block and action rail over it ── */
.pfocus__object-space{ position:relative; z-index:1; min-width:0; min-height:0; }
.pfocus__object{ position:absolute; inset:0; width:100%; height:100%; display:block;
                 touch-action:none; cursor:grab; }
.pfocus__object[data-orbiting="true"]{ cursor:grabbing; }
.pfocus__object[data-part-hover-state="waiting"]{ cursor:crosshair; }
.pfocus__object[data-part-hover-state="ready"]{ cursor:pointer; }
.pfocus__part-color{
  position:absolute; z-index:8; width:236px; padding:12px;
  border:1px solid color-mix(in srgb,var(--line) 88%,transparent); border-radius:14px;
  color:var(--text); background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 18px 44px -18px rgba(10,17,31,.42),0 4px 12px -7px rgba(10,17,31,.24);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transform-origin:18px 42px; animation:pfPartColorIn .18s cubic-bezier(.22,.9,.24,1) both;
}
.pfocus__part-color[hidden]{ display:none; }
.pfocus__part-color-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pfocus__part-color-head span{ display:grid; gap:3px; min-width:0; }
.pfocus__part-color-head small{
  color:var(--accent); font:750 12px/1 var(--mono);
  letter-spacing:.11em;
}
.pfocus__part-color-head strong{
  overflow:hidden; color:var(--text); font:700 13px/1.25 var(--font);
  text-overflow:ellipsis; white-space:nowrap;
}
.pfocus__part-color-head > button{
  flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center;
  margin:-4px -4px 0 0; border:0; border-radius:8px; color:var(--dim); background:transparent;
}
.pfocus__part-color-head > button:hover{ color:var(--text); background:var(--surface-hover); }
.pfocus__part-color-head svg{ width:14px; height:14px; }
.pfocus__part-swatches{ display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-top:12px; }
.pfocus__part-swatches button{
  position:relative; aspect-ratio:1; min-width:0; border:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  border-radius:9px; background:var(--part-color); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  transition:transform .16s ease,box-shadow .16s ease;
}
.pfocus__part-swatches button:hover{ transform:translateY(-2px) scale(1.04); }
.pfocus__part-swatches button[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent),inset 0 0 0 1px rgba(255,255,255,.34);
}
.pfocus__part-color-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; }
.pfocus__part-color-foot > span{ color:var(--dim); font:650 12px/1.3 var(--font); }
.pfocus__part-color-foot > button{
  min-height:29px; padding:0 10px; border:1px solid var(--line); border-radius:8px;
  color:var(--dim); background:var(--surface); font:650 12px/1 var(--font);
}
.pfocus__part-color-foot > button:hover{ color:var(--text); border-color:var(--accent); }
.pfocus[data-browse-scatter="true"] .pfocus__part-color{ display:none !important; }
@keyframes pfPartColorIn{
  from{ opacity:0; transform:translateY(6px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce){ .pfocus__part-color{ animation:none; } }
.pfocus__object-nav{ position:absolute; z-index:6; inset:50% 0 auto; height:0;
  pointer-events:none; }
.pfocus__object-step{ position:absolute; top:0; width:48px; height:48px;
  display:grid; place-items:center; border:1px solid var(--pf-border); border-radius:50%;
  color:var(--pf-ink); background:color-mix(in srgb,var(--pf-surface) 88%,transparent);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.48); backdrop-filter:blur(10px);
  pointer-events:auto; cursor:pointer; transform:translateY(-50%);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease; }
.pfocus__object-step svg{ width:22px; height:22px; }
.pfocus__object-step:hover,.pfocus__object-step:focus-visible{
  outline:0; color:var(--pf-gold-strong); border-color:var(--pf-gold);
  background:color-mix(in srgb,var(--pf-gold-soft) 82%,var(--pf-surface));
  box-shadow:0 12px 30px -13px rgba(0,0,0,.55),0 0 0 3px color-mix(in srgb,var(--pf-gold) 18%,transparent);
  transform:translateY(-50%) scale(1.07); }
.pfocus__object-step:active{ transform:translateY(-50%) scale(.94); }
.pfocus__object-step:disabled{ opacity:.35; pointer-events:none; }
.pfocus__object-step--previous{ left:calc(var(--pf-left-w,var(--pf-side)) + 22px); }
.pfocus__object-step--next{ right:calc(var(--pf-right-w,var(--pf-side)) + 22px); }
/* the title block keeps identity only: chips, name, creator, credit */
.pfocus__title{ position:absolute; z-index:2; left:20px; top:16px; max-width:54%;
                display:flex; flex-direction:column; gap:5px; }
.pfocus__chips{ display:flex; gap:5px; }
.pfocus__chip{ appearance:none; margin:0; padding:3px 9px; border-radius:999px; border:1px solid var(--pf-border);
  background:var(--pf-surface); color:var(--pf-muted);
  font:700 12px/1 var(--font); letter-spacing:.08em; }
.pfocus__chip--trend{ background:var(--pf-gold-soft); border-color:var(--pf-gold);
  color:var(--pf-gold-strong); cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease; }
.pfocus__chip--trend:hover,
.pfocus__chip--trend:focus-visible{
  border-color:var(--pf-gold-strong);
  background:color-mix(in srgb,var(--pf-gold-soft) 66%,var(--pf-gold) 34%);
  box-shadow:0 6px 16px color-mix(in srgb,var(--pf-gold) 28%,transparent);
  transform:translateY(-1px);
}
.pfocus__chip--trend:focus-visible{ outline:2px solid color-mix(in srgb,var(--pf-gold) 48%,transparent); outline-offset:2px; }
.pfocus__chip--trend:active{ transform:translateY(0) scale(.97); }
.pfocus__chip--trend:disabled{ cursor:wait; opacity:.68; box-shadow:none; transform:none; }
.pfocus__title h1{ margin:0; font-size:21px; line-height:1.15; letter-spacing:-.02em; }
.pfocus__creator{ display:flex; align-items:center; gap:7px; color:var(--pf-muted); font-size:12px; }
.pfocus__avatar{ width:19px; height:19px; border-radius:50%;
  background:linear-gradient(140deg,var(--pf-gold),var(--pf-gold-strong)); }
.pfocus__rating{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:999px; border:1px solid var(--pf-border); cursor:pointer;
  background:var(--pf-surface); color:var(--pf-ink); font:700 12px/1.5 var(--font);
  font-variant-numeric:tabular-nums; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease; }
.pfocus__rating svg{ width:13px; height:13px; color:var(--pf-gold-strong); fill:currentColor; }
.pfocus__rating:hover,.pfocus__rating:focus-visible,.pfocus__rating[aria-expanded="true"]{
  outline:0; background:var(--pf-gold-soft); border-color:var(--pf-gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pf-gold) 16%,transparent); }
.pfocus__reviews{ width:340px; max-width:100%; max-height:0; margin-top:-5px;
  overflow:hidden; visibility:hidden; opacity:0; pointer-events:none; transform:translateY(-7px);
  border:1px solid var(--pf-drawer-border,var(--line)); border-radius:12px;
  background:color-mix(in srgb,var(--pf-surface) 96%,transparent);
  box-shadow:0 18px 42px -24px rgba(0,0,0,.62),var(--shadow-sm);
  transition:max-height .24s cubic-bezier(.2,.75,.2,1),margin .24s ease,
    opacity .16s ease,transform .24s ease,visibility 0s linear .24s; }
.pfocus__reviews[data-open="true"]{ max-height:350px; margin-top:4px; visibility:visible;
  opacity:1; pointer-events:auto; transform:translateY(0);
  transition:max-height .28s cubic-bezier(.2,.75,.2,1),margin .28s ease,
    opacity .18s ease,transform .28s ease,visibility 0s; }
.pfocus__reviews-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 12px 10px; border-bottom:1px solid var(--pf-drawer-border,var(--line)); }
.pfocus__reviews-head > span{ display:flex; flex-direction:column; gap:3px; }
.pfocus__reviews-head small{ color:var(--pf-muted); font:750 12px/1 var(--font); letter-spacing:.1em; }
.pfocus__reviews-head strong{ color:var(--pf-ink); font:750 14px/1.2 var(--font); }
.pfocus__reviews-head button{ width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; color:var(--pf-muted); }
.pfocus__reviews-head button:hover,.pfocus__reviews-head button:focus-visible{
  outline:0; color:var(--pf-ink); background:var(--pf-gold-soft); }
.pfocus__reviews-head button svg{ width:14px; height:14px; }
.pfocus__reviews-list{ max-height:278px; overflow:auto; overscroll-behavior:contain; }
.pfocus__review{ padding:11px 12px; border-bottom:1px solid var(--pf-drawer-border,var(--line)); }
.pfocus__review:last-child{ border-bottom:0; }
.pfocus__review-account{ display:flex; align-items:center; gap:8px; }
.pfocus__review-avatar{ flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%; background:linear-gradient(145deg,var(--pf-gold-soft),var(--pf-gold));
  color:var(--pf-ink); font:800 12px/1 var(--font); }
.pfocus__review-identity{ min-width:0; display:flex; flex:1; flex-direction:column; gap:2px; }
.pfocus__review-identity strong{ overflow:hidden; color:var(--pf-ink); font:700 12px/1.2 var(--font);
  text-overflow:ellipsis; white-space:nowrap; }
.pfocus__review-identity small{ overflow:hidden; color:var(--pf-muted); font:600 12px/1.2 var(--font);
  text-overflow:ellipsis; white-space:nowrap; }
.pfocus__review-score{ display:inline-flex; align-items:center; gap:3px; color:var(--pf-gold-strong);
  font:750 12px/1 var(--font); font-variant-numeric:tabular-nums; }
.pfocus__review-score svg{ width:12px; height:12px; fill:currentColor; }
.pfocus__review p{ margin:8px 0 0 38px; color:var(--pf-ink); font:500 12px/1.45 var(--font); }
/* Popularity and the four object actions share one uninterrupted top-right pill. */
.pfocus__rail{ position:absolute; z-index:2; inset:0; pointer-events:none; }
.pfocus__rail-top{
  position:absolute; right:16px; top:16px;
  display:flex; align-items:center; gap:0; pointer-events:auto;
  border:1px solid var(--pf-border); border-radius:999px;
  background:var(--pf-surface); box-shadow:var(--shadow-sm);
}
.pfocus__actions{
  position:static; right:auto; bottom:auto; display:flex; gap:0; padding:0;
  border:0; border-radius:0 999px 999px 0; pointer-events:auto;
  background:transparent; box-shadow:none; }
.pfocus__actions button{ width:34px; height:32px; border:0; border-radius:0; display:grid;
  place-items:center; color:var(--pf-muted); }
.pfocus__actions button:last-child{ border-radius:0 999px 999px 0; }
.pfocus__actions button:hover{ background:var(--pf-gold-soft); color:var(--pf-gold-strong); }
.pfocus__actions button[aria-pressed="true"]{ background:var(--pf-ink); color:var(--pf-surface); }
.pfocus__actions svg{ width:15px; height:15px; }
.pfocus__boost{ position:relative; isolation:isolate; display:inline-flex; align-items:center;
  height:32px; gap:5px; padding:0 10px; overflow:visible; cursor:pointer;
  border:0; border-radius:999px 0 0 999px; background:transparent;
  color:var(--pf-gold-strong); font:700 12px/1 var(--font);
  transform:translateY(0) scale(1); box-shadow:0 0 0 rgba(240,154,0,0);
  transition:transform .18s ease,box-shadow .2s ease,background .18s ease,
    color .18s ease,border-color .18s ease; }
.pfocus__boost:hover,
.pfocus__boost:focus-visible{ outline:0; transform:translateY(-2px) scale(1.035);
  background:color-mix(in srgb,var(--pf-gold-soft) 72%,var(--pf-gold) 28%);
  box-shadow:0 7px 18px -8px rgba(240,154,0,.72),0 0 0 3px rgba(240,154,0,.1); }
.pfocus__boost:focus-visible{ box-shadow:0 7px 18px -8px rgba(240,154,0,.72),
  0 0 0 3px color-mix(in srgb,var(--pf-gold) 28%,transparent); }
.pfocus__boost:active{ transform:translateY(0) scale(.94); }
.pfocus__boost[aria-pressed="true"]{ color:#fffaf0; border-color:#e58c00;
  background:linear-gradient(135deg,#f4a000,#e97900);
  box-shadow:0 5px 16px -7px rgba(235,126,0,.9); }
.pfocus__boost-flame{ position:relative; display:grid; place-items:center; width:17px; height:17px; }
.pfocus__boost-fire{ display:block; font:normal 13px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  transform-origin:50% 88%; animation:pfBoostFireIdle 1.35s ease-in-out infinite;
  will-change:transform; }
.pfocus__boost-flame::before,
.pfocus__boost-flame::after{ content:""; position:absolute; z-index:-1; width:4px; height:4px;
  border-radius:50%; background:currentColor; opacity:0; pointer-events:none; }
.pfocus__boost-flame::before{ left:-2px; top:7px; }
.pfocus__boost-flame::after{ right:-2px; top:5px; }
.pfocus__boost[data-animate="true"]{ animation:pfBoostPress .68s cubic-bezier(.2,.8,.2,1); }
.pfocus__boost[data-animate="true"] .pfocus__boost-fire{
  animation:pfBoostFireBurst .68s cubic-bezier(.2,.8,.2,1); }
.pfocus__boost[data-animate="true"] .pfocus__boost-flame::before{
  animation:pfBoostSparkLeft .58s ease-out; }
.pfocus__boost[data-animate="true"] .pfocus__boost-flame::after{
  animation:pfBoostSparkRight .58s .04s ease-out; }
@keyframes pfBoostPress{
  0%{ transform:scale(.94); } 36%{ transform:translateY(-2px) scale(1.12); }
  66%{ transform:translateY(-1px) scale(.99); } 100%{ transform:translateY(-2px) scale(1.035); }
}
@keyframes pfBoostFireIdle{
  0%,100%{ transform:translateY(0) scale(1) rotate(-2deg); }
  28%{ transform:translateY(-1px) scale(1.08,.96) rotate(2deg); }
  56%{ transform:translateY(0) scale(.97,1.07) rotate(-1deg); }
  78%{ transform:translateY(-1px) scale(1.04,.99) rotate(1deg); }
}
@keyframes pfBoostFireBurst{
  0%{ transform:scale(.72) rotate(-7deg); } 28%{ transform:scale(1.5) rotate(8deg); }
  52%{ transform:scale(1.08) rotate(-5deg); } 76%{ transform:scale(1.27) rotate(3deg); }
  100%{ transform:scale(1) rotate(0); }
}
@keyframes pfBoostSparkLeft{
  0%{ opacity:0; transform:translate(3px,2px) scale(.5); }
  24%{ opacity:.95; } 100%{ opacity:0; transform:translate(-7px,-10px) scale(0); }
}
@keyframes pfBoostSparkRight{
  0%{ opacity:0; transform:translate(-2px,2px) scale(.5); }
  24%{ opacity:.9; } 100%{ opacity:0; transform:translate(7px,-12px) scale(0); }
}
@media (prefers-reduced-motion:reduce){
  .pfocus__boost,.pfocus__boost-flame::before,.pfocus__boost-flame::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .pfocus__boost-fire{ animation:none !important; transform:none; }
}
.pfocus__hud{ position:absolute; z-index:2; left:50%; bottom:14px; transform:translateX(-50%);
  color:var(--pf-muted); font:600 12px/1 var(--font); letter-spacing:.11em;
  text-transform:uppercase; pointer-events:none; }

/* ── right: donor-style 3Dhive marketplace rail ──
   The former always-open Print Cart remains available from the pinned cart
   icon as an overlay drawer. The narrow rail mirrors 3d_hive_improve's right
   panel: scrollable marketplace categories, More, then Cart / Upload /
   Favorites. */
.pfocus__market-rail-column{
  position:relative; z-index:6; overflow:visible; background:transparent;
}
.market-rail{
  position:absolute; z-index:3; right:0; top:0; bottom:0; width:var(--pf-rail-w); min-width:0;
  display:flex; flex-direction:column; align-items:stretch;
  padding:7px 5px; background:var(--pf-surface);
  border-left:1px solid var(--pf-drawer-border); box-shadow:-6px 0 16px rgba(16,24,40,.08);
}
.market-rail__stack{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  align-items:stretch; gap:3px; overflow:auto; overscroll-behavior:contain;
}
.market-rail__divider{ flex:0 0 1px; height:1px; margin:4px 3px; background:var(--line); }
.market-rail__pinned{ flex:0 0 auto; display:grid; gap:3px; padding-top:4px; }
.market-rail__tool{
  position:relative; flex:0 0 34px; min-width:34px; height:34px; display:flex; align-items:center;
  justify-content:center; gap:9px; padding:0 8px; overflow:hidden;
  border:1px solid transparent; border-radius:8px; color:var(--dim);
  white-space:nowrap; transition:background .14s,color .14s,border-color .14s;
}
.market-rail__tool:hover,
.market-rail__tool:focus-visible{ background:var(--slot); color:var(--ink); border-color:var(--line); outline:0; }
.market-rail__tool[aria-pressed="true"],
.market-rail__tool[data-active="true"]{ background:var(--accent-soft); color:var(--accent-ink); }
.market-rail__tool svg{ width:17px; height:17px; flex:0 0 17px; }
.market-rail__emoji{ width:20px; flex:0 0 20px; font-size:16px; line-height:1; text-align:center; }
.market-rail__label{
  display:none; flex:1 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; text-align:left; font:650 12px/1 var(--font);
}
.market-rail__tool--mapbox{ color:#2167d5; }
.market-rail__tool--mapbox .market-rail__emoji{ filter:saturate(.88); }
.market-rail__more svg{ transition:transform .18s ease; }
.pfocus[data-right-rail-expanded="true"] .market-rail__more svg{ transform:rotate(180deg); }
.pfocus[data-right-rail-expanded="true"]{ --pf-rail-w:184px; }
.pfocus:has(.market-rail__drawer[data-open="true"]){
  --pf-right-w:calc(var(--pf-print-w) + var(--pf-rail-gap) + var(--pf-rail-w));
}
.pfocus[data-right-rail-expanded="true"] .market-rail{ padding-inline:7px; }
.pfocus[data-right-rail-expanded="true"] .market-rail__tool{ justify-content:flex-start; }
.pfocus[data-right-rail-expanded="true"] .market-rail__label{ display:block; }
.market-rail__count{
  position:absolute; right:2px; bottom:1px; min-width:15px; height:15px; padding:0 3px;
  border:1.5px solid var(--pf-surface); border-radius:999px;
  background:var(--pf-gold,#f0a000); color:#17120a;
  box-shadow:0 2px 6px rgba(18,24,34,.2);
  font:850 12px/18px var(--font); text-align:center;
}
/* --muted is not a token in this project; the undefined name left the empty
   badge inheriting its parent's ink instead of receding. --dim is the muted
   text token every other resting label uses. */
.market-rail__count[data-zero="true"]{ background:var(--slot); color:var(--dim); box-shadow:none; }
.market-rail__tool[data-market-drawer="favorites"][data-favorite-arrival="true"]{
  animation:marketFavoriteTarget .86s cubic-bezier(.2,.82,.2,1);
}
.market-rail__tool[data-market-drawer="favorites"][data-favorite-arrival="true"] > svg{
  color:var(--pf-gold-strong,#d97b00); fill:color-mix(in srgb,var(--pf-gold,#f0a000) 34%,transparent);
  animation:marketFavoriteStar .86s cubic-bezier(.16,.82,.22,1);
}
.market-rail__count[data-count-bump="true"]{ animation:marketFavoriteCount .86s cubic-bezier(.16,.82,.22,1); }
.market-favorite-flight{
  position:fixed; z-index:1200; left:var(--favorite-from-x); top:var(--favorite-from-y);
  width:24px; height:24px; display:grid; place-items:center; pointer-events:none;
  color:var(--pf-gold-strong,#d97b00); filter:drop-shadow(0 4px 8px rgba(217,123,0,.35));
  transform:translate(-50%,-50%); transform-origin:center;
  animation:marketFavoriteFlight .88s cubic-bezier(.18,.72,.16,1) forwards;
}
.market-favorite-flight::before,
.market-favorite-flight::after{
  content:""; position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--pf-gold,#f0a000); opacity:0;
}
.market-favorite-flight::before{ left:-3px; top:1px; animation:marketFavoriteFlightSpark .62s .12s ease-out; }
.market-favorite-flight::after{ right:-3px; bottom:1px; animation:marketFavoriteFlightSpark .62s .2s ease-out reverse; }
.market-favorite-flight svg{ width:22px; height:22px; fill:color-mix(in srgb,var(--pf-gold,#f0a000) 46%,transparent); }
@keyframes marketFavoriteFlight{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.45) rotate(-22deg); }
  16%{ opacity:1; transform:translate(-50%,calc(-50% - 18px)) scale(1.12) rotate(5deg); }
  72%{ opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--favorite-flight-x)),calc(-50% + var(--favorite-flight-y))) scale(.55) rotate(28deg); }
}
@keyframes marketFavoriteTarget{
  0%,100%{ background:transparent; box-shadow:none; }
  48%{ background:var(--pf-gold-soft,#fff4d8); box-shadow:0 0 0 5px color-mix(in srgb,var(--pf-gold,#f0a000) 18%,transparent); }
}
@keyframes marketFavoriteStar{
  0%,100%{ transform:scale(1) rotate(0); }
  43%{ transform:scale(1.58) rotate(-14deg); }
  68%{ transform:scale(.9) rotate(8deg); }
}
@keyframes marketFavoriteCount{
  0%,100%{ transform:scale(1); }
  48%{ transform:scale(1.42); }
}
@keyframes marketFavoriteFlightSpark{
  0%{ opacity:0; transform:translate(0,0) scale(.4); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:translate(-9px,-12px) scale(0); }
}
@media (prefers-reduced-motion:reduce){
  .market-favorite-flight{ display:none; }
  .market-rail__tool[data-market-drawer="favorites"],
  .market-rail__tool[data-market-drawer="favorites"] > svg,
  .market-rail__count{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
.market-rail__status{
  position:absolute; z-index:5; right:calc(100% + 8px); bottom:8px;
  max-width:240px; padding:7px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--glass-surface); color:var(--dim);
  box-shadow:var(--shadow-md); font-size:12px; white-space:nowrap;
  opacity:0; transform:translateX(5px); pointer-events:none;
  transition:opacity .16s ease,transform .18s ease;
}
.market-rail__status[data-show="true"]{ opacity:1; transform:none; }
.market-rail__drawer{
  --cart-accent:var(--pf-gold); --cart-on-accent:#fff;
  position:absolute; z-index:2; right:calc(var(--pf-rail-w) + var(--pf-rail-gap)); top:-1px; bottom:-1px; width:var(--pf-print-w);
  display:flex; flex-direction:column; visibility:hidden; opacity:0;
  transform:translateX(12px); pointer-events:none;
  border:1px solid var(--pf-drawer-border); border-radius:0;
  background:var(--pf-surface); box-shadow:-18px 14px 42px rgba(16,24,40,.16);
  transition:opacity .16s ease,transform .2s cubic-bezier(.16,1,.3,1),visibility .16s;
}
.market-rail__drawer[data-open="true"]{
  visibility:visible; opacity:1; transform:none; pointer-events:auto;
}
.market-rail__drawer-head{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:9px; min-height:53px; padding:10px 12px;
  border-bottom:1px solid var(--pf-border);
}
.market-rail__drawer-copy{ flex:1 1 auto; min-width:0; display:grid; gap:2px; }
.market-rail__drawer-copy strong{ font-size:12.5px; }
.market-rail__drawer-copy small{ overflow:hidden; color:var(--pf-muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.market-rail__drawer-close{ width:26px; height:26px; display:grid; place-items:center; border-radius:7px; color:var(--pf-muted); }
.market-rail__drawer-close:hover{ background:var(--slot); color:var(--pf-ink); }
.market-rail__drawer-close svg{ width:13px; height:13px; }
/* Cart is the drawer's resting state in Browse, so it has nothing to close.
   Its subtitle now names the object the board is quoting, which the header
   only had room for once Add to Cart moved down onto the board itself. */
.market-rail__drawer[data-mode="cart"] .market-rail__drawer-close{ display:none; }
.market-rail__drawer-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:12px; }
.market-rail__drawer-panel{ display:none; }
.market-rail__drawer[data-mode="cart"] [data-rail-panel="cart"],
.market-rail__drawer[data-mode="favorites"] [data-rail-panel="favorites"],
.market-rail__drawer[data-mode="category"] [data-rail-panel="category"]{ display:grid; gap:10px; }
.market-rail__drawer[data-mode="cart"] .market-rail__drawer-body{ overflow:hidden; padding:0; }
.market-rail__empty{ margin:0; padding:24px 12px; color:var(--pf-muted); text-align:center; font-size:12px; line-height:1.5; }
.market-rail__favorite{
  display:flex; align-items:center; gap:9px; padding:9px;
  border:1px solid var(--pf-border); border-radius:9px; background:var(--raised);
}
.market-rail__favorite-mark{ width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--pf-gold-soft); color:var(--pf-gold-strong); }
.market-rail__favorite-mark svg{ width:15px; height:15px; }
.market-rail__favorite span{ display:grid; gap:2px; min-width:0; }
.market-rail__favorite strong{ font-size:12px; }
.market-rail__favorite small{ color:var(--pf-muted); font-size:12px; }

/* Browse is one large object canvas with its working panels floating over it.
   The side panels no longer consume grid columns: their inset cards preserve
   the live Insights and Object-in-Focus controls while the model surface owns
   the complete stage underneath. The lower inset clears the command composer. */
body[data-view="browse"] .pfocus{
  --pf-float-inset:14px;
  --pf-float-bottom:64px;
  --pf-edge-shadow:rgba(24,31,42,.26);
  /* Match Build's object storefront width exactly. The marketplace tool rail
     keeps its own lane beside this panel instead of shrinking the panel. The
     donor 3d_hive_improve path docks that rail on the far-right edge, directly
     beside the drawer, so Browse uses the same panel-then-rail order. */
  --pf-print-w:clamp(330px,29vw,400px);
  --pf-left-w:clamp(330px,29vw,400px);
  --pf-rail-gap:0px;
  display:block;
}
body[data-view="browse"] .pfocus > .pfocus__object-space{
  position:absolute; z-index:1; inset:0;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type{
  position:absolute; z-index:7;
  left:0; top:0; bottom:0;
  width:var(--pf-left-w);
  overflow:hidden; border-radius:0;
  box-shadow:10px 0 24px -14px var(--pf-edge-shadow),
             2px 0 7px -5px var(--pf-edge-shadow);
  transition:transform .28s cubic-bezier(.2,.75,.2,1),opacity .2s ease,visibility 0s linear;
}
:root[data-theme="dark"] body[data-view="browse"] .pfocus{
  --pf-edge-shadow:rgba(0,0,0,.62);
}
/* Object Insights mirrors the Object-in-Focus storefront shell: same docked
   width and height, the same cream/white surface hierarchy, and the same
   header scale. Its existing video, analytics and drawings stay live inside
   quiet cards so the two sides read as one balanced workbench. */
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__panel{
  --sf-font:var(--font);
  --sf-panel:#fbfaf8; --sf-head:#ffffff; --sf-card:#ffffff; --sf-tile:#f4f1ec;
  --sf-mark:#efeae3; --sf-ink:#1d1a17; --sf-body:#6f675e; --sf-muted:#948a7e;
  --sf-label:#8a8074; --sf-glyph:#5a4f43; --sf-box:#c9c1b6;
  --sf-brand:#1f74ef; --sf-brand-ink:#1468e8;
  /* Do not point --font back at --sf-font here. --sf-font already inherits
     --font; closing that loop invalidates every weighted font shorthand and
     makes headings, values and metadata all fall back to the same 400 weight. */
  --pf-surface:var(--sf-panel); --pf-ink:var(--sf-ink);
  --pf-muted:var(--sf-body); --pf-drawer-border:var(--line);
  --pf-border:color-mix(in srgb,var(--sf-box) 58%,transparent);
  --pf-gold:var(--sf-brand); --pf-gold-strong:var(--sf-brand-ink);
  --pf-gold-soft:color-mix(in srgb,var(--sf-brand) 11%,transparent);
  --raised:var(--sf-card); --slot:var(--sf-tile);
  background:var(--sf-panel); color:var(--sf-ink); font-family:var(--sf-font);
  box-shadow:none;
}
:root[data-theme="dark"] body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__panel{
  --sf-panel:#141312; --sf-head:#1a1816; --sf-card:#1c1a18; --sf-tile:#26231f;
  --sf-mark:#26231f; --sf-ink:#f5f2ee; --sf-body:#b3aca3; --sf-muted:#8b8378;
  --sf-label:#8b8378; --sf-glyph:#c3bab0; --sf-box:#4b453e;
  --sf-brand:#1f74ef; --sf-brand-ink:#1468e8;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__panel{
  border:0; border-right:1px solid var(--line); border-radius:0;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__head{
  min-height:65px; padding:18px 20px 16px; gap:12px;
  border-bottom:0; background:var(--sf-head);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__head-ico{
  width:32px; height:32px; flex-basis:32px; border-radius:9px;
  background:var(--sf-mark); color:var(--sf-glyph);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__heading{ gap:3px; }
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__heading strong{
  color:var(--sf-label); font:700 9.5px/1 var(--sf-font);
  letter-spacing:.1em; text-transform:uppercase;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__heading small{
  color:var(--sf-ink); font:700 16px/1.15 var(--sf-font); letter-spacing:-.018em;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__body{
  padding:12px 14px 20px; background:var(--sf-panel);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__section{
  margin-top:10px; padding:12px; border:1px solid var(--pf-border);
  border-radius:11px; background:var(--sf-card);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__section:first-child{ margin-top:0; }
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__section-title{
  color:var(--pf-muted); font:750 8.5px/1 var(--sf-font);
  letter-spacing:.12em; text-transform:uppercase;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__section-title span:last-child{
  color:inherit;
}
/* Keep Object Insights on the same storefront type ramp as the quote rail.
   Video rows map to quote rows, metrics map to quote metadata/prices, and the
   blue-tinted legacy cards become the same neutral tiles used on the right. */
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .build-video-now{
  border-color:var(--pf-border); background:var(--sf-card);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .build-video-now strong,
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .build-video-option strong{
  color:var(--pf-ink); font:650 11.5px/1.2 var(--sf-font);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .build-video-now span,
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .build-video-option span{
  color:var(--pf-muted); font:600 11px/1.35 var(--sf-font);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .build-video-option{
  color:var(--pf-ink);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .build-video-option:hover{
  background:var(--sf-tile); border-color:var(--pf-border);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .build-video-option[aria-pressed="true"]{
  background:var(--sf-tile); border-color:var(--sf-brand);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__analytics,
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__range{
  color:var(--pf-muted); font:750 8.5px/1 var(--sf-font);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__engagement span{
  border-color:var(--pf-border); background:var(--sf-tile);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__engagement strong{
  color:var(--pf-ink); font:700 13.5px/1.15 var(--sf-font);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__engagement small,
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__specs div{
  color:var(--pf-muted); font:600 11px/1.35 var(--sf-font);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__specs b{
  color:var(--pf-ink); font:700 11px/1 var(--sf-font);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__drawing{
  border-color:var(--pf-border); background:var(--sf-tile);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__drawing span,
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__drawing-specs dt{
  color:var(--pf-muted); font:750 8.5px/1 var(--sf-font);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__drawing-specs dd{
  color:var(--pf-ink); font:650 11.5px/1.2 var(--sf-font);
}
body[data-view="browse"] .pfocus > .pfocus__market-rail-column{
  position:absolute; z-index:7;
  right:0; top:0; bottom:0;
  width:var(--pf-right-w); overflow:visible;
  transition:transform .28s cubic-bezier(.2,.75,.2,1),opacity .2s ease,visibility 0s linear;
}
body[data-view="browse"] .market-rail{
  left:auto; right:0; top:0; bottom:0;
  border:0; border-left:1px solid var(--pf-drawer-border); border-radius:0;
  overflow:hidden; box-shadow:none;
}
body[data-view="browse"] .market-rail__drawer{
  top:0; bottom:0; border-radius:13px;
  box-shadow:0 18px 48px rgba(16,24,40,.22);
}
/* Browse's manufacturing-locations drawer is the same storefront panel as Build in size and
   visual language: a full-height cream column, square docked edges, shared Inter,
   quiet neutral cards and the same blue primary action as Sign in / Sign up.
   Browse keeps its own live
   printer map, quote winners and print settings inside that shared shell. */
body[data-view="browse"] .market-rail__drawer.is-object-focus{
  --sf-font:var(--font);
  --sf-panel:#fbfaf8; --sf-head:#ffffff; --sf-card:#ffffff; --sf-tile:#f4f1ec;
  --sf-mark:#efeae3; --sf-ink:#1d1a17; --sf-body:#6f675e; --sf-muted:#948a7e;
  --sf-label:#8a8074; --sf-glyph:#5a4f43; --sf-box:#c9c1b6;
  --sf-brand:#1f74ef; --sf-brand-ink:#1468e8;
  /* The right panel follows the same one-way token chain as Object Insights,
     so its selected shop, price and action can stay bold while route and
     shipping metadata remain visually secondary. */
  --pf-surface:var(--sf-panel); --pf-ink:var(--sf-ink);
  --pf-muted:var(--sf-body); --pf-drawer-border:var(--line);
  --pf-border:color-mix(in srgb,var(--sf-box) 58%,transparent);
  --pf-gold:var(--sf-brand); --pf-gold-strong:var(--sf-brand-ink);
  --pf-gold-soft:color-mix(in srgb,var(--sf-brand) 11%,transparent);
  --cart-accent:var(--sf-brand); --cart-on-accent:#fff;
  --raised:var(--sf-card); --slot:var(--sf-tile);
  right:var(--pf-rail-w); top:0; bottom:0; width:var(--pf-print-w);
  border:0; border-left:1px solid var(--line); border-radius:0;
  background:var(--sf-panel); color:var(--sf-ink);
  box-shadow:-10px 0 24px -14px var(--pf-edge-shadow),
             -2px 0 7px -5px var(--pf-edge-shadow);
  font-family:var(--sf-font); overflow:hidden;
}
:root[data-theme="dark"] body[data-view="browse"] .market-rail__drawer.is-object-focus{
  --sf-panel:#141312; --sf-head:#1a1816; --sf-card:#1c1a18; --sf-tile:#26231f;
  --sf-mark:#26231f; --sf-ink:#f5f2ee; --sf-body:#b3aca3; --sf-muted:#8b8378;
  --sf-label:#8b8378; --sf-glyph:#c3bab0; --sf-box:#4b453e;
  --sf-brand:#1f74ef; --sf-brand-ink:#1468e8;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .market-rail__drawer-head{
  min-height:65px; padding:18px 20px 16px; gap:12px;
  border-bottom:0; background:var(--sf-head);
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .pfocus__head-ico{
  width:32px; height:32px; flex-basis:32px; border-radius:9px;
  background:var(--sf-mark); color:var(--sf-glyph);
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .market-rail__drawer-copy{
  gap:3px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .market-rail__drawer-copy strong{
  color:var(--sf-label); font:700 12px/1 var(--sf-font);
  letter-spacing:.1em; text-transform:uppercase;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .market-rail__drawer-copy small{
  color:var(--sf-ink); font:700 16px/1.15 var(--sf-font); letter-spacing:-.018em;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .pfocus__cart{
  border-left:0; background:var(--sf-panel);
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .market-rail__drawer-body,
body[data-view="browse"] .market-rail__drawer.is-object-focus [data-rail-panel="cart"]{
  background:var(--sf-panel);
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .pfboard__winner,
body[data-view="browse"] .market-rail__drawer.is-object-focus .pfboard__pick{
  background:var(--sf-card);
}
@media (max-width:900px){
  body[data-view="browse"] .pfocus{ --pf-print-w:300px; }
  body[data-view="browse"] .market-rail__drawer.is-object-focus .market-rail__drawer-head{
    min-height:55px; padding:14px 14px 12px;
  }
}
@media (max-width:680px){
  body[data-view="browse"] .pfocus{ --pf-print-w:min(52vw,300px); }
}
body[data-view="browse"] .pfocus__title{
  left:calc(var(--pf-float-inset) + var(--pf-left-w,var(--pf-side)) + 20px);
  top:22px;
  max-width:calc(100% - var(--pf-left-w,var(--pf-side)) - var(--pf-right-w) - 94px);
}
body[data-view="browse"] .pfocus__rail-top{
  right:calc(var(--pf-right-w) + 8px);
  top:22px;
}
body[data-view="browse"] .pfocus__rail-top .pfocus__boost{
  height:32px; gap:7px; padding:0 10px; border:0; background:transparent;
  box-shadow:none; font-size:12px; font-weight:800;
}
body[data-view="browse"] .pfocus__boost-fire{ font-size:17px; }
body[data-view="browse"] .pfocus__rail-top .pfocus__actions{
  position:static; right:auto; bottom:auto; padding:0;
  border:0; background:transparent; box-shadow:none;
}
body[data-view="browse"] .pfocus__rail-top .pfocus__boost:hover,
body[data-view="browse"] .pfocus__rail-top .pfocus__boost:focus-visible{
  background:var(--pf-gold-soft); box-shadow:none; transform:none;
}
body[data-view="browse"] .pfocus__rail-top .pfocus__boost[aria-pressed="true"]{
  color:#fffaf0; background:linear-gradient(135deg,#f4a000,#e97900);
}
body[data-view="browse"] .pfocus__hud{ bottom:80px; }
/* ── Browse scatter field ──────────────────────────────────────────────
   The globe swaps the focused object for the whole catalog floating in one
   three.js space. Both canvases live in .pfocus__object-space and are shown
   one at a time; the JS deactivates whichever is hidden so only one renders. */
.pfocus__scatter{
  position:absolute; inset:0; z-index:2; display:none;
  width:100%; height:100%; touch-action:none; cursor:grab;
}
.pfocus__scatter[data-scatter-drag="orbit"]{ cursor:grabbing; }
.pfocus__scatter[data-scatter-drag="pan"]{ cursor:move; }
.pfocus__scatter[data-scatter-hover]{ cursor:pointer; }
.pfocus__scatter-hint{
  position:absolute; z-index:3; left:50%; bottom:22px; transform:translateX(-50%);
  display:none; margin:0; padding:7px 13px; pointer-events:none;
  border:1px solid var(--pf-drawer-border,var(--line)); border-radius:999px;
  background:var(--glass-surface-soft); color:var(--dim);
  font:650 12px/1 var(--font); letter-spacing:.05em; white-space:nowrap;
}
.pfocus[data-browse-scatter="true"] .pfocus__scatter,
.pfocus[data-browse-scatter="true"] .pfocus__scatter-hint{ display:block; }
/* The focused canvas keeps its box so nothing reflows on the way in and out,
   but it must not swallow pointer events aimed at the field above it. */
.pfocus[data-browse-scatter="true"] .pfocus__object{ opacity:0; pointer-events:none; }

/* The scattered catalog is a full-canvas choosing surface. Neither Object
   Insights side describes one object yet, so both collapse off-canvas until a
   floating object has been centred and opened in the focused Browse view. */
.pfocus[data-browse-scatter="true"] > .pfocus__column:first-of-type{
  opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.75,.2,1),opacity .2s ease,visibility 0s linear .28s;
}
.pfocus[data-browse-scatter="true"] > .pfocus__column:first-of-type{ transform:translateX(-102%); }
.pfocus[data-browse-scatter="true"] .pfocus__title,
.pfocus[data-browse-scatter="true"] .pfocus__rail,
.pfocus[data-browse-scatter="true"] .pfocus__object-nav,
.pfocus[data-browse-scatter="true"] .pfocus__hud{ display:none; }

.market-rail__tool[aria-pressed="true"]{
  background:var(--pf-gold-soft,color-mix(in srgb,var(--accent) 14%,transparent));
  color:var(--pf-gold-strong,var(--accent-ink));
}

/* Existing cart cards are reused inside the icon-opened drawer. */
.pfocus__cart{ height:100%; display:flex; flex-direction:column; min-height:0;
  background:var(--pf-surface); border-left:1px solid var(--pf-drawer-border); }
.pfocus__cart-head{ display:flex; align-items:center; gap:9px; padding:12px;
  border-bottom:1px solid var(--pf-border); }
.pfocus__cart-add{
  min-height:31px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  margin-left:auto; padding:7px 11px; border:1px solid transparent; border-radius:8px;
  background:var(--cart-accent); color:var(--cart-on-accent); box-shadow:0 5px 13px rgba(217,130,0,.2);
  font:750 12px/1 var(--font); white-space:nowrap;
}
.pfocus__cart-add svg{ width:13px; height:13px; }
.pfocus__cart-add:hover,.pfocus__cart-add:focus-visible{
  background:var(--pf-gold-strong); outline:0; transform:translateY(-1px);
}
.pfocus__cart-add.is-added{ background:#15803d; box-shadow:0 5px 13px rgba(21,128,61,.2); }
.pfocus__cart-add.is-added:hover{ background:#166534; }
.pfocus__cart-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:12px;
  display:grid; gap:10px; align-content:start; }
.pfocus__quote{ border:1px solid var(--pf-border); border-radius:10px; padding:10px;
                display:grid; gap:7px; }
.pfocus__quote-head{ display:flex; align-items:center; justify-content:space-between; }
.pfocus__quote-head strong{ font-size:12px; }
.pfocus__quote-row{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:12px; color:var(--pf-muted); }
.pfocus__quote-row b{ color:var(--pf-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.pfocus__pill{ padding:2px 8px; border-radius:999px; background:var(--pf-gold-soft);
  color:var(--pf-gold-strong); font:700 12px/1.6 var(--font); letter-spacing:.08em; }

/* Object Insights print settings copied from the donor print cart. The cart
   opens in its focused-object presentation, so settings and live quotes sit
   immediately beside the marketplace emoji rail. */
.print-cart-section{ padding:13px 12px; border-bottom:1px solid var(--pf-border); }
.print-cart-section:last-child{ border-bottom:0; }
.print-cart-section-title{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 10px;
  color:var(--pf-muted); font:750 12px/1 var(--font); letter-spacing:.12em; text-transform:uppercase;
}
.print-cart-color-field{ min-width:0; margin:0; padding:0; border:0; }
.print-cart-color-field legend{
  width:100%; margin:0 0 8px; color:var(--pf-ink); font:700 12px/1.2 var(--font);
}
.print-cart-color-row{ display:flex; align-items:center; gap:6px; min-width:0; }
/* Every filament color stays in view: the row wraps rather than scrolling a
   color out of sight behind a hidden scrollbar. */
.print-cart-color-choices{
  min-width:0; display:flex; flex-wrap:wrap; gap:6px; padding:2px 1px 4px;
}
.print-cart-color-choices::-webkit-scrollbar{ display:none; }
.print-cart-color-choice{
  --print-cart-choice:#eee; position:relative; flex:0 0 27px; width:27px; height:27px;
  border:2px solid var(--pf-surface); border-radius:50%; background:var(--print-cart-choice);
  box-shadow:0 0 0 1px rgba(15,23,42,.2); transition:transform .14s ease,box-shadow .14s ease;
}
.print-cart-color-choice:hover{ transform:scale(1.08); }
.print-cart-color-choice--default{
  display:grid; place-items:center;
  --palette-statue:#d7d3ca; --palette-glasses:#111827; --palette-bubble:#ff2f87;
  background:conic-gradient(var(--palette-bubble) 0 34%,var(--palette-glasses) 0 58%,var(--palette-statue) 0);
}
.print-cart-color-choice--default svg{
  width:17px; height:17px; padding:3px; border-radius:50%;
  background:var(--pf-surface); color:var(--pf-ink); box-sizing:border-box;
}
.print-cart-color-choice.is-active{ box-shadow:0 0 0 2px var(--pf-gold-strong); }
.print-cart-color-choice.is-active::after{
  content:'\2713'; position:absolute; right:-4px; bottom:-4px; width:13px; height:13px;
  border:2px solid var(--pf-surface); border-radius:50%; background:var(--pf-gold-strong); color:#fff;
  font:800 12px/15px var(--font); text-align:center;
}
.print-cart-default-palettes{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
  margin-top:8px; padding:8px; border:1px solid var(--pf-border); border-radius:10px;
  background:color-mix(in srgb,var(--raised) 76%,var(--pf-surface));
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}
.print-cart-default-palettes[hidden]{ display:none; }
.print-cart-default-palette{
  position:relative; display:grid; grid-template-columns:34px minmax(0,1fr) 13px;
  align-items:center; gap:7px; min-width:0; min-height:57px; padding:7px;
  border:1px solid var(--pf-border); border-radius:9px; background:var(--pf-surface);
  color:var(--pf-ink); text-align:left; transition:border-color .14s ease,background .14s ease,transform .14s ease;
}
.print-cart-default-palette:hover{
  transform:translateY(-1px); border-color:var(--pf-gold); background:var(--pf-gold-soft);
}
.print-cart-default-palette.is-active{
  border-color:var(--pf-gold-strong); box-shadow:0 0 0 1px var(--pf-gold-strong);
}
.print-cart-default-palette__swatches{
  position:relative; display:block; width:32px; height:32px; border:2px solid var(--pf-surface);
  border-radius:50%; overflow:hidden; background:var(--palette-statue);
  box-shadow:0 0 0 1px rgba(15,23,42,.18);
}
.print-cart-default-palette__swatches i{ position:absolute; inset:0; }
.print-cart-default-palette__swatches i:nth-child(1){ background:var(--palette-statue); clip-path:polygon(0 0,100% 0,50% 50%,0 100%); }
.print-cart-default-palette__swatches i:nth-child(2){ background:var(--palette-glasses); clip-path:polygon(100% 0,100% 100%,50% 50%); }
.print-cart-default-palette__swatches i:nth-child(3){ background:var(--palette-bubble); clip-path:polygon(0 100%,100% 100%,50% 50%); }
.print-cart-default-palette__copy{ display:grid; gap:3px; min-width:0; }
.print-cart-default-palette__copy strong{ font:750 12px/1.15 var(--font); }
.print-cart-default-palette__copy small{ display:none; color:var(--pf-muted); font:550 12px/1.25 var(--font); }
.print-cart-default-palette__check{
  visibility:hidden; color:var(--pf-gold-strong); font:850 12px/1 var(--font);
}
.print-cart-default-palette.is-active .print-cart-default-palette__check{ visibility:visible; }
.print-cart-color-summary{ margin:5px 0 0; color:var(--pf-muted); font-size:12px; }
.print-cart-color-actions{ display:flex; gap:5px; margin-top:8px; }
.print-cart-color-action{
  flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-width:0; padding:6px 5px; border:1px solid var(--pf-border); border-radius:7px;
  background:var(--raised); color:var(--pf-muted); font:650 12px/1 var(--font);
}
.print-cart-color-action svg{ width:11px; height:11px; }
.print-cart-color-action:hover,.print-cart-color-action.is-active{
  border-color:var(--pf-gold); background:var(--pf-gold-soft); color:var(--pf-gold-strong);
}
.print-cart-advanced{ margin-top:12px; border:1px solid var(--pf-border); border-radius:9px; background:var(--raised); }
.print-cart-advanced summary{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px;
  min-height:36px; padding:8px 9px; cursor:pointer; list-style:none;
}
.print-cart-advanced summary::-webkit-details-marker{ display:none; }
.print-cart-advanced summary > svg{ width:12px; height:12px; color:var(--pf-muted); transition:transform .15s ease; }
.print-cart-advanced[open] summary > svg{ transform:rotate(90deg); }
.print-cart-advanced-label{ color:var(--pf-ink); font:700 12px/1 var(--font); }
.print-cart-advanced-value{ overflow:hidden; color:var(--pf-muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.print-cart-advanced-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 9px 9px; }
.print-cart-field{ display:grid; gap:5px; color:var(--pf-muted); font:700 12px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; }
.print-cart-field select{
  width:100%; min-width:0; height:30px; padding:0 23px 0 8px; border:1px solid var(--pf-border);
  border-radius:7px; background:var(--pf-surface); color:var(--pf-ink); font:600 12px/1 var(--font); text-transform:none;
}
.print-cart-quotes-section{ display:grid; gap:8px; }
.print-cart-quotes-section .print-cart-section-title{ margin-bottom:1px; }

/* ── Manufacturing locations: the winners board ────────────────────────
   The panel reads top to bottom as one answer: the three shops that win on
   speed, rating and distance; the currently picked shop with its cart action;
   the supporting location map; then every remaining quote. The map stays
   full-bleed directly below Add to Cart while the other sections carry their
   own padding and the panel grid contributes no gaps of its own. */
.market-rail__drawer[data-mode="cart"] [data-rail-panel="cart"]{
  height:100%; min-height:0; display:flex; flex-direction:column; gap:0; overflow:hidden;
}
.pfboard__summary{
  position:relative; z-index:1; flex:0 0 auto; background:var(--pf-surface);
  box-shadow:0 8px 18px -20px rgba(16,24,40,.42);
}
.pfboard__map{
  position:relative; height:196px; margin:0 12px 12px; overflow:hidden;
  border:1px solid var(--pf-border); border-radius:13px;
  background:repeating-linear-gradient(135deg,var(--raised) 0 8px,var(--slot) 8px 16px);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 22px rgba(16,24,40,.07);
}
/* Mapbox GL's stylesheet is injected at runtime, after this file, and its
   own .mapboxgl-map rule lands on the same container — so the host is
   addressed through its parent to keep the box this file gives it. */
.pfboard__map > .pfboard__map-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.pfboard__map-canvas canvas{ outline:none; }
.pfboard__map-chip,
.pfboard__map-key{
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:999px; background:var(--glass-surface);
  color:var(--pf-muted); font:650 12px/1 var(--font); white-space:nowrap;
  box-shadow:0 2px 8px rgba(16,24,40,.14); pointer-events:none;
}
.pfboard__map-chip{ left:10px; top:10px; letter-spacing:.06em; text-transform:uppercase; }
.pfboard__map-key{ left:10px; bottom:10px; }
.pfboard__map-locate{
  position:absolute; z-index:4; top:10px; right:10px; display:grid; place-items:center;
  width:34px; height:34px; padding:0; border:1px solid var(--pf-border); border-radius:50%;
  background:var(--glass-surface); color:var(--pf-ink); box-shadow:0 2px 9px rgba(16,24,40,.18);
  transition:transform .14s ease,border-color .14s ease,color .14s ease,background .14s ease;
}
.pfboard__map-locate svg{ width:18px; height:18px; }
.pfboard__map-locate:hover:not(:disabled),.pfboard__map-locate:focus-visible{
  transform:scale(1.06); border-color:#2378ff; color:#2378ff;
}
.pfboard__map[data-map-location-state="found"] .pfboard__map-locate{
  border-color:#2378ff; background:#2378ff; color:#fff;
}
.pfboard__map[data-map-location-state="loading"] .pfboard__map-locate svg{
  animation:pfboardLocateSpin .8s linear infinite;
}
.pfboard__map-locate:disabled{ cursor:wait; opacity:.82; }
.pfboard__map-key i{
  width:8px; height:8px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--pf-gold-strong); display:block;
}
.pfboard__map-note{
  position:absolute; z-index:3; inset:auto 12px 12px 12px; margin:0;
  padding:8px 10px; border-radius:9px; background:var(--glass-surface);
  color:var(--pf-muted); font-size:12px; line-height:1.45; text-align:center;
}
.pfboard__map[data-map-state="ready"] .pfboard__map-note,
.pfboard__map[data-map-state="idle"] .pfboard__map-note{ display:none; }
.pfboard__map[data-map-state="error"] .pfboard__map-key{ display:none; }
.pfboard__map[data-map-state="error"] .pfboard__map-note{ color:var(--danger,#b42318); }
.pfboard__map[data-map-location-state="error"] .pfboard__map-note{
  display:block; color:var(--danger,#b42318);
}
@keyframes pfboardLocateSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .pfboard__map[data-map-location-state="loading"] .pfboard__map-locate svg{ animation:none; }
}

/* Pins carry the same drop shape as the board's place marks. Pickup shops are
   the ones worth walking to, so they take the accent and the rest stay quiet. */
.pfboard__pin{
  width:14px; height:14px; padding:0; border:0; border-radius:50% 50% 50% 0;
  background:var(--pf-muted); transform:rotate(-45deg) translate(3px,-3px);
  box-shadow:0 1px 3px rgba(16,24,40,.35); cursor:pointer;
  transition:width .14s ease,height .14s ease,background .14s ease,box-shadow .14s ease;
}
.pfboard__pin.is-pickup{ background:var(--pf-gold-strong); }
.pfboard__pin:hover{ box-shadow:0 0 0 4px rgba(238,152,19,.22),0 1px 3px rgba(16,24,40,.35); }
.pfboard__pin:focus-visible{ outline:2px solid var(--pf-gold-strong); outline-offset:3px; }
.pfboard__pin.is-selected{
  width:19px; height:19px; background:var(--cad-accent,var(--pf-gold-strong));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pf-gold-strong) 22%,transparent),0 2px 5px rgba(16,24,40,.4);
}

.pfboard__winners{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:13px 12px 0; }
.pfboard__winner{
  display:grid; gap:5px; min-width:0; padding:11px 9px; text-align:left;
  border:1px solid var(--pf-border); border-radius:11px; background:var(--raised);
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.pfboard__winner:hover{ background:var(--pf-surface); border-color:var(--pf-gold); }
.pfboard__winner[aria-pressed="true"]{
  background:var(--pf-surface); border-color:var(--pf-gold-strong);
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 16px rgba(16,24,40,.09);
}
.pfboard__winner-tag{ display:flex; align-items:center; gap:4px; color:var(--pf-muted); font:750 12px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; }
.pfboard__winner-icon{ display:grid; place-items:center; width:12px; height:12px; flex:0 0 12px; }
.pfboard__winner-icon svg{ width:100%; height:100%; }
.pfboard__winner[aria-pressed="true"] .pfboard__winner-tag{ color:var(--pf-gold-strong); }
.pfboard__winner-name,
.pfboard__winner-metric,
.pfboard__winner-price{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfboard__winner-name{ color:var(--pf-ink); font:700 12px/1.2 var(--font); }
.pfboard__winner-metric{ color:var(--pf-ink); font:700 12px/1 var(--font); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pfboard__winner-price{ color:var(--pf-muted); font:600 12px/1 var(--font); font-variant-numeric:tabular-nums; }

.pfboard__pick{
  display:grid; gap:12px; margin:12px; padding:15px 14px;
  border:1px solid var(--pf-border); border-radius:13px; background:var(--pf-surface);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 22px rgba(16,24,40,.07);
}
.pfboard__pick-head{ display:flex; align-items:center; gap:8px; }
.pfboard__pick-tag{
  padding:4px 8px; border-radius:6px; background:var(--pf-gold-soft); color:var(--pf-gold-strong);
  font:750 12px/1 var(--font); letter-spacing:.07em; text-transform:uppercase;
}
.pfboard__pick-tag[hidden]{ display:none; }
.pfboard__pick-rating{ color:var(--pf-muted); font:600 12px/1 var(--font); }
.pfboard__rating-star{ color:var(--gold-ink,var(--pf-gold,#ee9813)); }
.pfboard__pick-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.pfboard__pick-copy{ display:grid; gap:5px; min-width:0; }
.pfboard__pick-copy strong{
  overflow:hidden; color:var(--pf-ink); font:700 13.5px/1.15 var(--font);
  letter-spacing:-.022em; text-overflow:ellipsis; white-space:nowrap;
}
.pfboard__pick-where{ display:flex; align-items:center; gap:6px; min-width:0; color:var(--pf-muted); font-size:12px; }
.pfboard__pick-where > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfboard__drop{
  flex:0 0 8px; width:8px; height:8px; display:block; border-radius:50% 50% 50% 0;
  background:currentColor; transform:rotate(-45deg);
}
.pfboard__pick-price{
  flex:none; color:var(--pf-ink); font:700 20px/1 var(--font);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.pfboard__add{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:12px; border:1px solid transparent; border-radius:10px;
  background:var(--cart-accent); color:var(--cart-on-accent);
  box-shadow:0 5px 13px rgba(31,116,239,.22); font:750 12px/1 var(--font);
}
.pfboard__add svg{ width:14px; height:14px; }
.pfboard__add:hover,.pfboard__add:focus-visible{ background:var(--pf-gold-strong); outline:0; }
.pfboard__add.is-added{ background:#15803d; box-shadow:0 5px 13px rgba(21,128,61,.2); }
.pfboard__add.is-added:hover{ background:#166534; }

.pfboard__quotes{
  --pfboard-quote-row:84px; --pfboard-visible-quotes:5;
  flex:1 1 calc(var(--pfboard-quote-row) * var(--pfboard-visible-quotes) + 32px);
  min-height:0; max-height:calc(var(--pfboard-quote-row) * var(--pfboard-visible-quotes) + 32px);
  display:flex; flex-direction:column; padding-top:16px; background:var(--pf-surface);
}
.pfboard__quote-list{
  min-height:0; max-height:calc(var(--pfboard-quote-row) * var(--pfboard-visible-quotes));
  display:grid; grid-auto-rows:var(--pfboard-quote-row); overflow-y:auto;
  overscroll-behavior:contain; scrollbar-width:none;
  scroll-snap-type:y proximity;
}
.pfboard__quote-list::-webkit-scrollbar{ width:0; height:0; display:none; }
.pfboard__quote{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:76px; margin:4px 0; padding:14px 10px;
  border:1px solid var(--pf-border); border-radius:11px; background:var(--raised); text-align:left;
  scroll-snap-align:start; transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.print-cart-settings{ flex:0 0 auto; background:var(--pf-surface); }
.pfboard__quote:hover{ background:var(--pf-surface); border-color:var(--pf-gold); }
.pfboard__quote:focus-visible{ outline:2px solid var(--pf-gold-strong); outline-offset:-2px; }
.pfboard__quote-logo{
  flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--pf-border); border-radius:10px;
  overflow:hidden; padding:3px; background:#f8fafc;
}
.pfboard__quote-logo img{
  display:block; width:100%; height:100%; object-fit:contain; object-position:center;
  border-radius:6px; mix-blend-mode:multiply;
}
:root[data-theme="dark"] .pfboard__quote-logo img{ mix-blend-mode:normal; }
.pfboard__quote-copy{ display:grid; gap:5px; min-width:0; flex:1 1 auto; }
.pfboard__quote-name{
  display:flex; align-items:center; gap:6px; min-width:0;
  color:var(--pf-ink); font:650 12px/1.2 var(--font);
}
.pfboard__quote-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfboard__quote-pickup{
  flex:none; padding:2px 5px; border-radius:4px; background:var(--slot); color:var(--pf-muted);
  font:750 12px/1.3 var(--font); font-style:normal; letter-spacing:.06em; text-transform:uppercase;
}
.pfboard__quote-meta{
  overflow:hidden; color:var(--pf-muted); font:600 12px/1.35 var(--font);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.pfboard__quote-price{ flex:none; color:var(--pf-ink); font:700 12px/1 var(--font); font-variant-numeric:tabular-nums; }

/* Print customization stays compact enough to remain below five quotes, but
   its cards and type are deliberately larger than the dense marketplace rows. */
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-settings{
  padding:16px 15px 17px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-settings .print-cart-section-title{
  margin-bottom:12px; font-size:12px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-color-field{
  padding:12px; border:1px solid var(--pf-border); border-radius:12px; background:var(--raised);
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-color-field legend{
  width:auto; margin:0 0 10px; padding:0 4px; font-size:12px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-color-choices{ gap:7px; }
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-color-choice{
  flex-basis:31px; width:31px; height:31px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-color-summary{
  margin-top:7px; font-size:12px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-color-actions{
  gap:7px; margin-top:10px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-color-action{
  min-height:34px; padding:8px 6px; border-radius:9px; font-size:12px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-color-action svg{
  width:13px; height:13px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-advanced{
  margin-top:14px; border-radius:11px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-advanced summary{
  min-height:43px; padding:10px 11px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-advanced-label{ font-size:12px; }
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-advanced-value{ font-size:12px; }
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-advanced-grid{
  gap:10px; padding:0 11px 11px;
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-field{ font-size:12px; }
body[data-view="browse"] .market-rail__drawer.is-object-focus .print-cart-field select{
  height:35px; padding-inline:9px 25px; font-size:12px;
}

/* Selected CAD geometry exposes a compact action strip and direct handles.
   The canvas still owns the actual move/resize hit testing; these controls
   make delete/duplicate/reset discoverable and keyboard reachable. */
.geometry-edit-toolbar{
  position:absolute; z-index:8; left:50%; bottom:38px; transform:translateX(-50%);
  display:none; align-items:center; gap:3px; padding:4px;
  border:1px solid var(--line); border-radius:999px; background:var(--glass-surface);
  box-shadow:var(--shadow-md); backdrop-filter:blur(8px);
}
.design-workspace__pane:has(> .designgrid[data-object-selected="true"]) > .geometry-edit-toolbar--model,
.design-workspace__pane:has(> .sketchpad__canvas[data-selection="true"]) > .geometry-edit-toolbar--drawing{ display:flex; }
.geometry-edit-toolbar--model{
  /* The live command panel supplies vertical clearance; wrapping keeps every
     selected-object action reachable inside a narrow Design pane. */
  bottom:auto;top:calc(100% - 96px);width:max-content;max-width:calc(100% - 16px);
  box-sizing:border-box;flex-wrap:wrap;justify-content:center;border-radius:18px;
}
.geometry-edit-toolbar button{
  min-width:29px; height:29px; padding:0 8px; display:flex; align-items:center;
  justify-content:center; gap:5px; border-radius:999px; color:var(--icon-muted);
  font:650 12px/1 var(--font);
}
.geometry-edit-toolbar button:hover,
.geometry-edit-toolbar button:focus-visible{ background:var(--slot); color:var(--ink); outline:0; }
.geometry-edit-toolbar button[data-geometry-action="delete"]:hover{ background:var(--danger-soft); color:var(--danger); }
.geometry-edit-toolbar svg{ width:13px; height:13px; }
.ttool--object-transform[data-object-tool="move"]{ margin-left:2px; box-shadow:inset 1px 0 0 var(--line-soft); }
.ttool--object-transform[aria-pressed="true"]{ color:var(--accent-ink); background:var(--accent-soft); }
.object-transform-gizmo{
  position:absolute; z-index:9; pointer-events:none; min-width:92px; min-height:92px;
}
.object-transform-gizmo[aria-hidden="true"]{ display:none; }
.object-transform-gizmo > svg{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;
}
.object-transform-gizmo__move-cross{
  display:none; color:var(--accent); stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgb(255 255 255 / .92));
}
.object-transform-gizmo[data-mode="move"] .object-transform-gizmo__move-cross{ display:block; }
.object-transform-gizmo__rotate-rings{ display:none; stroke-width:1.65; filter:drop-shadow(0 1px 1px rgb(255 255 255 / .88)); }
.object-transform-gizmo[data-mode="rotate"] .object-transform-gizmo__rotate-rings{ display:block; }
.object-transform-gizmo__ring--x,.object-transform-gizmo__arrow--x{ stroke:#dc2626; }
.object-transform-gizmo__ring--y,.object-transform-gizmo__arrow--y{ stroke:#16a34a; }
.object-transform-gizmo__ring--z,.object-transform-gizmo__arrow--z{ stroke:#2563eb; }
.object-transform-gizmo__ring{ opacity:.76; }
.object-transform-gizmo__arrow{ stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.object-transform-gizmo button{
  position:absolute; width:30px; height:30px; display:grid; place-items:center; padding:0;
  border:1px solid var(--line); border-radius:999px; color:var(--accent-ink);
  background:var(--glass-surface); box-shadow:var(--shadow-sm); pointer-events:auto;
  font:700 15px/1 var(--font); transition:transform .13s,background .13s,color .13s;
}
.object-transform-gizmo button:hover,.object-transform-gizmo button:focus-visible{
  outline:0; color:var(--accent-ink); background:var(--accent-soft); transform:scale(1.08);
}
.object-transform-gizmo button b{
  position:absolute; right:-3px; bottom:-3px; min-width:13px; height:13px; padding:0 2px;
  display:grid; place-items:center; border:1px solid var(--line); border-radius:999px;
  color:var(--dim); background:var(--surface); font:750 12px/1 var(--mono);
}
.object-transform-gizmo button b:empty{ display:none; }
.object-transform-gizmo [data-object-gizmo="top"]{ left:50%; top:0; transform:translate(-50%,-50%); }
.object-transform-gizmo [data-object-gizmo="right"]{ right:0; top:50%; transform:translate(50%,-50%); }
.object-transform-gizmo [data-object-gizmo="bottom"]{ left:50%; bottom:0; transform:translate(-50%,50%); }
.object-transform-gizmo [data-object-gizmo="left"]{ left:0; top:50%; transform:translate(-50%,-50%); }
.object-transform-gizmo [data-object-gizmo="top"]:hover,
.object-transform-gizmo [data-object-gizmo="top"]:focus-visible{ transform:translate(-50%,-50%) scale(1.08); }
.object-transform-gizmo [data-object-gizmo="right"]:hover,
.object-transform-gizmo [data-object-gizmo="right"]:focus-visible{ transform:translate(50%,-50%) scale(1.08); }
.object-transform-gizmo [data-object-gizmo="bottom"]:hover,
.object-transform-gizmo [data-object-gizmo="bottom"]:focus-visible{ transform:translate(-50%,50%) scale(1.08); }
.object-transform-gizmo [data-object-gizmo="left"]:hover,
.object-transform-gizmo [data-object-gizmo="left"]:focus-visible{ transform:translate(-50%,-50%) scale(1.08); }
.object-transform-gizmo [data-object-gizmo="z-negative"],
.object-transform-gizmo [data-object-gizmo="z-positive"]{ display:none; top:7%; color:#2563eb; }
.object-transform-gizmo[data-mode="rotate"] [data-object-gizmo="z-negative"],
.object-transform-gizmo[data-mode="rotate"] [data-object-gizmo="z-positive"]{ display:grid; }
.object-transform-gizmo [data-object-gizmo="z-negative"]{ left:9%; }
.object-transform-gizmo [data-object-gizmo="z-positive"]{ right:9%; }
.object-transform-panel{
  position:absolute; z-index:10; top:92px; right:14px; width:258px; padding:10px;
  border:1px solid var(--line); border-radius:12px; background:var(--glass-surface);
  box-shadow:var(--shadow-md); backdrop-filter:blur(10px);
}
.object-transform-panel[aria-hidden="true"]{ display:none; }
.object-transform-panel header{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; margin-bottom:9px; }
.object-transform-panel header strong{ color:var(--ink); font:700 12px/1 var(--font); }
.object-transform-panel header span{ color:var(--faint); font:650 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.object-transform-panel header button{
  height:23px; padding:0 7px; border:1px solid var(--line-soft); border-radius:6px;
  color:var(--dim); background:var(--surface); font:650 12px/1 var(--font);
}
.object-transform-panel header button:hover,.object-transform-panel header button:focus-visible{ outline:0; color:var(--ink); background:var(--slot); }
.object-transform-panel__angles{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.object-transform-panel__angles label{
  height:33px; display:grid; grid-template-columns:14px 1fr 10px; align-items:center; gap:2px;
  padding:0 6px; border:1px solid var(--line-soft); border-radius:7px; background:var(--surface);
}
.object-transform-panel__angles label:focus-within{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.object-transform-panel__angles b{ font:800 12px/1 var(--mono); }
.object-transform-panel__angles [data-object-angle-axis="x"] b{ color:#dc2626; }
.object-transform-panel__angles [data-object-angle-axis="y"] b{ color:#16a34a; }
.object-transform-panel__angles [data-object-angle-axis="z"] b{ color:#2563eb; }
.object-transform-panel__angles input{
  width:100%; min-width:0; border:0; outline:0; padding:0; color:var(--ink); background:transparent;
  font:650 12px/1 var(--mono); text-align:right; appearance:textfield;
}
.object-transform-panel__angles input::-webkit-inner-spin-button{ margin:0; opacity:.35; }
.object-transform-panel__angles span{ color:var(--faint); font:650 12px/1 var(--mono); }
.object-transform-panel > small{ display:block; margin-top:7px; color:var(--faint); font:600 12px/1.2 var(--font); }
.object-face-actions{
  position:absolute; z-index:12; width:272px; padding:8px;
  border:1px solid var(--line); border-radius:13px; background:var(--glass-surface);
  box-shadow:var(--shadow-lg); backdrop-filter:blur(12px);
}
.object-face-actions[aria-hidden="true"]{ display:none; }
.object-face-actions > header{
  height:40px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 3px 7px 6px; border-bottom:1px solid var(--line-soft);
}
.object-face-actions > header > span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.object-face-actions > header b{ color:var(--ink); font:720 12px/1 var(--font); }
.object-face-actions > header small{ color:var(--faint); font:650 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.object-face-actions > header button{
  width:25px; height:25px; display:grid; place-items:center; border-radius:7px; color:var(--dim);
}
.object-face-actions > header button:hover,.object-face-actions > header button:focus-visible{ outline:0; color:var(--ink); background:var(--slot); }
.object-face-actions > header svg{ width:12px; height:12px; }
.object-face-actions__list{ display:grid; gap:3px; padding-top:6px; }
.object-face-actions__list > button{
  min-height:43px; display:grid; grid-template-columns:31px 1fr auto; align-items:center; gap:8px;
  padding:5px 8px; border:1px solid transparent; border-radius:9px; color:var(--dim);
  text-align:left; transition:background .13s,border-color .13s,color .13s,transform .13s;
}
.object-face-actions__list > button:hover,.object-face-actions__list > button:focus-visible{
  outline:0; color:var(--ink); border-color:var(--line-soft); background:var(--slot); transform:translateX(2px);
}
.object-face-actions__list > button[data-face-action="sketch"]{
  color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 24%,var(--line-soft));
  background:var(--accent-soft);
}
.object-face-actions__icon{
  width:29px; height:29px; display:grid; place-items:center; border:1px solid var(--line-soft);
  border-radius:8px; color:var(--icon-muted); background:var(--surface);
}
.object-face-actions__icon svg{ width:16px; height:16px; }
.object-face-actions__list > button > span:nth-child(2){ display:flex; flex-direction:column; gap:3px; min-width:0; }
.object-face-actions__list > button b{ color:inherit; font:700 12px/1 var(--font); }
.object-face-actions__list > button small{
  overflow:hidden; color:var(--faint); font:600 12px/1 var(--font); white-space:nowrap; text-overflow:ellipsis;
}
.object-face-actions__list > button em{ color:var(--accent); font:700 12px/1 var(--font); font-style:normal; }
.object-face-extrude-gizmo{
  --face-extrude-angle:0deg; --face-extrude-length:78px; --face-extrude-color:#16a34a;
  --extrude-arrow-angle:var(--face-extrude-angle);
  --extrude-arrow-length:var(--face-extrude-length);
  --extrude-arrow-color:var(--face-extrude-color);
}
.sketch-extrude-gizmo{
  --sketch-extrude-angle:0deg; --sketch-extrude-length:64px;
  --sketch-extrude-color:var(--accent);
  --extrude-arrow-angle:var(--sketch-extrude-angle);
  --extrude-arrow-length:var(--sketch-extrude-length);
  --extrude-arrow-color:var(--sketch-extrude-color);
}
.object-face-extrude-gizmo,
.sketch-extrude-gizmo{
  position:absolute; z-index:21; width:48px; height:var(--extrude-arrow-length);
  transform:translate(-50%,-100%) rotate(var(--extrude-arrow-angle));
  transform-origin:50% 100%; pointer-events:none; user-select:none;
}
.object-face-extrude-gizmo[aria-hidden="true"],
.sketch-extrude-gizmo[aria-hidden="true"]{ display:none; }
.object-face-extrude-gizmo > button,
.sketch-extrude-gizmo > button{
  position:relative; width:48px; height:100%; padding:0; border:0; border-radius:24px;
  color:var(--extrude-arrow-color); background:transparent; box-shadow:none; cursor:ns-resize;
  touch-action:none; pointer-events:auto;
}
.object-face-extrude-gizmo > button:hover,.object-face-extrude-gizmo > button:focus-visible,
.sketch-extrude-gizmo > button:hover,.sketch-extrude-gizmo > button:focus-visible{
  outline:0; color:var(--extrude-arrow-color);
}
.object-face-extrude-gizmo > button:focus-visible::after,
.sketch-extrude-gizmo > button:focus-visible::after{
  content:""; position:absolute; inset:1px 5px; border:2px solid var(--extrude-arrow-color);
  border-radius:24px; box-shadow:0 0 0 4px color-mix(in srgb,var(--extrude-arrow-color) 18%,transparent);
}
.object-face-extrude-gizmo svg,
.sketch-extrude-gizmo svg{ width:100%; height:100%; overflow:visible; }
.object-face-extrude-gizmo__banner,
.sketch-extrude-gizmo__banner{
  fill:currentColor; fill-opacity:.42; stroke:currentColor; stroke-width:1.5; stroke-opacity:.72;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 3px 4px rgba(18,28,45,.2));
}
.object-face-extrude-gizmo strong,
.sketch-extrude-gizmo strong{
  position:absolute; left:50%; top:-10px; min-width:68px; padding:6px 9px;
  border:1px solid color-mix(in srgb,var(--extrude-arrow-color) 46%,var(--line)); border-radius:999px;
  color:var(--extrude-arrow-color); background:var(--surface); box-shadow:var(--shadow-sm);
  font:750 12px/1 var(--mono); text-align:center; white-space:nowrap;
  transform:translate(-50%,-100%) rotate(calc(-1 * var(--extrude-arrow-angle)));
}
.object-face-extrude-gizmo[data-dragging="true"] .object-face-extrude-gizmo__banner,
.sketch-extrude-gizmo[data-dragging="true"] .sketch-extrude-gizmo__banner{
  fill-opacity:.62; stroke-opacity:.94;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--extrude-arrow-color) 58%,transparent));
}
.object-face-extrude-gizmo[data-dragging="true"] strong,
.sketch-extrude-gizmo[data-dragging="true"] strong{
  color:#fff; background:var(--extrude-arrow-color); border-color:var(--extrude-arrow-color);
}
.object-face-extrude-gizmo .design-extrude-precision,
.sketch-extrude-gizmo .design-extrude-precision{
  position:absolute; left:50%; top:100%; display:flex; align-items:center; gap:5px;
  padding:5px 7px; border:1px solid var(--line); border-radius:8px; white-space:nowrap;
  color:var(--dim); background:var(--surface); box-shadow:var(--shadow-sm);
  font:600 12px/1 var(--font); pointer-events:auto; user-select:text;
  transform:translate(-50%,8px) rotate(calc(-1 * var(--extrude-arrow-angle))); transform-origin:50% 0;
}
.design-extrude-precision input{
  box-sizing:border-box; width:72px; height:28px; padding:3px 5px;
  border:1px solid var(--line); border-radius:5px; color:var(--text); background:var(--bg);
  font:650 12px/1 var(--mono); text-align:right;
}
.design-extrude-precision input:focus-visible{
  outline:2px solid var(--extrude-arrow-color); outline-offset:1px;
}
.design-extrude-precision input[aria-invalid="true"]{ border-color:#dc2626; }
.sketch-dimension-panel{
  position:absolute; top:92px; right:12px; z-index:28; box-sizing:border-box; width:248px;
  max-height:calc(100% - 116px); overflow:auto; padding:14px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm);
  font:500 12px/1.4 var(--font); pointer-events:auto;
}
.sketch-dimension-panel[hidden],.sketch-dimension-panel [hidden]{ display:none !important; }
.sketch-dimension-panel header{ display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.sketch-dimension-panel header b{ font:700 13px/1.3 var(--font); }
.sketch-dimension-panel header small{ color:var(--dim); font:500 12px/1.3 var(--font); }
.sketch-dimension-panel > label{ display:flex; flex-direction:column; gap:5px; margin-top:10px; }
.sketch-dimension-panel__fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sketch-dimension-panel__fields label{ display:grid; grid-template-columns:1fr 24px; gap:4px; min-width:0; }
.sketch-dimension-panel__fields label > span{ grid-column:1/-1; }
.sketch-dimension-panel input[type="number"],.sketch-dimension-panel select{
  box-sizing:border-box; width:100%; min-width:0; height:30px; padding:4px 6px;
  border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--text); font:500 12px/1.2 var(--font);
}
.sketch-dimension-panel__fields em{ align-self:center; color:var(--dim); font:500 12px/1 var(--font); }
.sketch-dimension-panel > .sketch-dimension-panel__check{ flex-direction:row; align-items:center; gap:7px; }
.sketch-dimension-panel input[type="checkbox"]{ width:15px; height:15px; margin:0; accent-color:var(--accent); }
.sketch-dimension-panel [data-sketch-dimension-status]{ min-height:32px; margin:12px 0; color:var(--dim); }
.sketch-dimension-panel__help{ display:block; margin-top:9px; color:var(--dim); font:400 12px/1.45 var(--font); }
.sketch-dimension-panel[data-error="true"] [data-sketch-dimension-status]{ color:#dc2626; }
.sketch-dimension-panel footer{ display:flex; justify-content:flex-end; gap:8px; }
.sketch-dimension-panel button{ padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--text); font:600 12px/1.3 var(--font); cursor:pointer; }
.sketch-dimension-panel [data-sketch-dimension-apply]{ background:var(--accent); color:#fff; border-color:var(--accent); }
.sketch-dimension-panel input:focus-visible,.sketch-dimension-panel select:focus-visible,.sketch-dimension-panel button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.designgrid[data-object-selected="true"]{ cursor:move; }
.designgrid[data-object-transform-mode="rotate"]{ cursor:default; }
.designgrid[data-object-handle-mode="resize"]{ cursor:nwse-resize; }
.designgrid[data-object-face-hover="true"],
.designgrid[data-object-face-selected="true"]{ cursor:pointer; }
.sketchpad__canvas[data-selection="true"]{ cursor:move; }
.sketchpad__canvas[data-selection-kind="sketch-region"]{ cursor:pointer; }
.design-workspace__pane:has(> .sketchpad__canvas[data-selection-kind="sketch-region"])
  > .geometry-edit-toolbar--drawing{ display:none; }
.sketchpad__canvas[data-selection-handle-mode="resize"]{ cursor:nwse-resize; }
.sketchpad__canvas[data-selection-handle-mode="reshape"]{ cursor:crosshair; }


/* the three prints under the Object Insights, one per panel */
.printcard{ position:relative; overflow:hidden; }
.printcard__canvas{ position:absolute; inset:0; width:100%; height:100%;
                    display:block; touch-action:none; cursor:grab; }
.printcard__canvas[data-orbiting="true"]{ cursor:grabbing; }
.printcard__label{ position:absolute; z-index:2; left:12px; bottom:10px;
                   display:flex; flex-direction:column; gap:1px; pointer-events:none; }
.printcard__label strong{ font-size:12px; letter-spacing:-.01em; color:var(--ink); }
.printcard__label span{ color:var(--faint); font:600 12px/1 var(--font); letter-spacing:.1em; }
.panel-strip[data-carousel]{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  overscroll-behavior-x:contain; touch-action:none; cursor:grab;
}
.panel-strip[data-carousel][data-panning="true"]{
  scroll-snap-type:none; cursor:grabbing;
}
.panel-strip[data-carousel]:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px;
}
.panel-strip[data-carousel][data-panning="true"] .panel,
.panel-strip[data-carousel][data-panning="true"] .printcard__canvas{
  cursor:grabbing;
}
.panel-strip[data-carousel] .panel{
  flex:0 0 calc((100% - (2 * var(--gap))) / 3);
  scroll-snap-align:start; cursor:grab;
  transition:height .3s cubic-bezier(.22,.9,.24,1),
             margin-bottom .3s cubic-bezier(.22,.9,.24,1),
             border-color .16s, box-shadow .2s, background .16s;
}
/* Browse presents five real catalog objects across the bottom row. Remaining
   objects stay in the same horizontal camera roll beyond the fifth slot. */
.view[data-view="browse"] .panel-strip[data-carousel] .panel{
  flex-basis:calc((100% - (4 * var(--gap))) / 5);
}
.panel-strip[data-carousel] .panel:hover{
  border-color:var(--line); box-shadow:none;
}
.panel-strip[data-carousel] .panel:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px;
}
.panel-camera-roll__nav{
  position:absolute; z-index:78; left:13px; right:13px; bottom:12px;
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease,visibility .16s ease;
}
.panel-camera-roll__nav button{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  background:var(--glass-surface); color:var(--ink);
  box-shadow:var(--shadow-md); backdrop-filter:blur(8px);
  pointer-events:auto; transition:transform .14s ease,background .14s ease,opacity .14s ease;
}
.panel-camera-roll__nav button:hover,
.panel-camera-roll__nav button:focus-visible{
  background:var(--control-surface); transform:scale(1.07); outline:2px solid var(--accent); outline-offset:2px;
}
.panel-camera-roll__nav button:disabled{ opacity:.32; cursor:default; transform:none; }
.panel-camera-roll__nav svg{ width:18px; height:18px; }
.view[data-view="browse"] .work-area:has(> .panel-strip[data-camera-roll-controls="true"]:hover) > .panel-camera-roll__nav,
.view[data-view="browse"] .work-area:has(> .panel-strip[data-camera-roll-controls="true"]:focus-visible) > .panel-camera-roll__nav,
.view[data-view="browse"] .work-area:has(> .panel-camera-roll__nav:hover) > .panel-camera-roll__nav,
.view[data-view="browse"] .work-area:has(> .panel-camera-roll__nav:focus-within) > .panel-camera-roll__nav{
  opacity:1; visibility:visible;
}
.view[data-view="browse"] .panel-strip .panel[data-selected="true"]{
  border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
}
/* Browse object hover is immediate and scale-only: the real 3D rendering grows
   slightly without adding a border, glow, tinted card, shadow, or layout jump. */
.view[data-view="browse"] .panel-strip[data-carousel] .panel,
.view[data-view="browse"] .panel-strip[data-carousel] .printcard__canvas{
  cursor:pointer;
}
.view[data-view="browse"] .panel-strip[data-carousel][data-panning="true"] .panel,
.view[data-view="browse"] .panel-strip[data-carousel][data-panning="true"] .printcard__canvas{
  cursor:grabbing;
}
.view[data-view="browse"] .panel-strip .printcard__canvas{
  transform:scale(1); transform-origin:50% 50%;
  transition:transform .2s ease;
}
.view[data-view="browse"] .panel-strip .panel:is(:hover,:focus-visible) .printcard__canvas{
  transform:scale(1.055);
}

/* ── tooltips, driven by data-tip / data-tip-pos ── */
[data-tip]{ position:relative; }
[data-tip]::after{ content:none; }

/* A body-level copy avoids every panel overflow boundary. Script chooses a
   usable side, then clamps the final fixed box to an 8px viewport margin. */
.workspace-tooltip{
  position:fixed; z-index:10000; max-width:min(300px,calc(100vw - 16px)); max-height:calc(100vh - 16px);
  padding:5px 8px; border:1px solid color-mix(in srgb,var(--tip-fg) 15%,transparent);
  border-radius:6px; background:var(--tip-bg); color:var(--tip-fg);
  box-shadow:var(--shadow-md); font:600 12px/1.3 var(--font); white-space:normal; text-align:left; overflow:hidden;
  opacity:0; transform:translateY(-2px); pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
}
.workspace-tooltip[data-open="true"]{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  /* ::before carries as much of the decorative motion here as ::after does —
     the checkout shimmer, the boost spark and the favourite flight all animate
     one. Leaving it out of the safety net meant those kept playing for someone
     who had asked the system for less motion, unless the rule happened to have
     its own local override. */
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}
/* ══════════════════════════ motion ══════════════════════════
   The layout changes in this file are structural, not cosmetic: expanding a
   panel drops its siblings out of the grid, popping one out moves it from a
   grid track to `position:fixed`, and switching views toggles `display`. CSS
   can interpolate none of that, so the `Motion` helper in the script measures
   every box before and after the change and plays the difference back as a
   transform. These tokens and classes are the vocabulary it animates against;
   the rules below are the part of the choreography CSS can own by itself. */
:root{
  --ease-glide:cubic-bezier(.22,.9,.24,1);    /* settling into a new slot */
  --ease-spring:cubic-bezier(.32,1.42,.5,1);  /* a grabbed panel let go of */
  --ease-exit:cubic-bezier(.45,0,.9,.6);      /* on its way out, no lingering */
  --motion-quick:170ms;
  --motion-glide:340ms;
}

/* A panel leaving the grid has already been un-displayed by the rule that
   hides it, so it is pinned to the box it just vacated and animated out from
   there. Fixed positioning needs no positioned ancestor, and animating the
   real element rather than a clone keeps its live canvases painted. */
.motion-exit{
  display:var(--motion-exit-display,block) !important;
  position:fixed !important;
  left:var(--motion-exit-x) !important;  top:var(--motion-exit-y) !important;
  width:var(--motion-exit-w) !important; height:var(--motion-exit-h) !important;
  margin:0 !important; z-index:var(--motion-exit-z,118);
  pointer-events:none; will-change:transform,opacity;
}

/* Grabbing a floating panel lifts it off the surface. The position itself is
   still written straight from the pointer, so the drag stays 1:1 under the
   cursor; only the lift is eased, and releasing springs it back down. */
.design-dock-panel[data-dragging="true"],
body[data-design-pane-drag="true"] .design-workspace__pane[data-popped="true"]{
  transform:scale(1.015);
  box-shadow:0 36px 92px rgba(2,6,23,.42);
}
.design-dock-panel[data-popped="true"],
.design-workspace__pane[data-popped="true"]{
  transition:box-shadow var(--motion-quick) ease,
             transform var(--motion-quick) var(--ease-spring);
}
.design-dock-panel[data-resizing="true"],
.design-workspace__pane[data-popped="true"]:has(.design-pane__float-resize[data-active="true"]){
  box-shadow:0 30px 78px rgba(2,6,23,.38);
}

/* The window controls acknowledge the press before the layout answers it. */
.design-dock-panel__action,
.design-pane__tool{ transition:background .14s,color .14s,transform var(--motion-quick) var(--ease-spring); }
.design-dock-panel__action:active,
.design-pane__tool:active{ transform:scale(.86); }

/* ── shared pop-out chrome ────────────────────────────────────────────────
   Design's authored CAD and lower-dock panels already have their own window
   controls. Every other live panel and every full workspace view uses this
   small shared layer, keeping the original DOM/canvas in place while fixed. */
/* Supply a positioning context without overriding authored layout modes such
   as the load view's fixed, full-viewport grid. */
:where([data-universal-popout-ready="true"]){ position:relative; }
.universal-popout__chrome{
  position:absolute; z-index:240; left:0; right:0; top:0; height:36px;
  display:flex; align-items:center; gap:8px; padding:0 7px 0 12px;
  pointer-events:none; color:var(--dim);
}
.universal-popout__dragbar{
  position:absolute; inset:0 38px 0 0; display:none;
  cursor:move; touch-action:none; pointer-events:auto;
}
.universal-popout__title{
  position:relative; z-index:1; display:none; min-width:0; max-width:calc(100% - 44px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none;
  color:var(--dim); font:700 12px/1 var(--font); letter-spacing:.1em;
  text-transform:uppercase;
}
.universal-popout__toggle{
  position:absolute; z-index:3; right:7px; top:6px; width:25px; height:25px;
  display:grid; place-items:center; padding:0; border:1px solid var(--line);
  border-radius:7px; background:var(--glass-surface-strong); color:var(--dim);
  box-shadow:var(--shadow-sm); cursor:pointer; pointer-events:auto;
  transition:background .14s,color .14s,border-color .14s,transform .14s;
}
.universal-popout__toggle:hover,
.universal-popout__toggle[aria-pressed="true"]{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);
}
.universal-popout__toggle:active{ transform:scale(.88); }
.universal-popout__toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.universal-popout__toggle svg{ width:13px; height:13px; pointer-events:none; }
.universal-popout__toggle[data-universal-dock-only="true"]{ display:none; }
.universal-popout__resize{
  position:absolute; z-index:245; right:0; bottom:0; width:30px; height:30px;
  display:none; cursor:nwse-resize; touch-action:none; pointer-events:auto; outline:0;
}
.universal-popout__resize::after{
  content:""; position:absolute; right:6px; bottom:6px; width:10px; height:10px;
  border-right:2px solid var(--dim); border-bottom:2px solid var(--dim);
  transition:border-color .14s,transform .14s;
}
.universal-popout__resize:is(:hover,:focus-visible,[data-active="true"])::after{
  border-color:var(--accent); transform:translate(-1px,-1px);
}
[data-universal-popout="true"]{
  position:fixed !important; inset:auto !important;
  left:var(--universal-popout-left) !important;
  top:var(--universal-popout-top) !important;
  width:var(--universal-popout-width) !important;
  height:var(--universal-popout-height) !important;
  min-width:0 !important; min-height:0 !important;
  max-width:none !important; max-height:none !important;
  margin:0 !important; transform:none !important; flex:none !important;
  z-index:var(--universal-popout-z,620) !important;
  border:1px solid var(--line) !important; border-radius:12px !important;
  background:var(--surface) !important; box-shadow:0 30px 84px rgba(2,6,23,.38) !important;
  overflow:hidden !important; isolation:isolate;
}
[data-universal-popout="true"] > .universal-popout__chrome{
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--glass-surface-strong) 94%,transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
[data-universal-popout="true"] > .universal-popout__chrome .universal-popout__dragbar,
[data-universal-popout="true"] > .universal-popout__chrome .universal-popout__title,
[data-universal-popout="true"] > .universal-popout__chrome .universal-popout__toggle[data-universal-dock-only="true"],
[data-universal-popout="true"] > .universal-popout__resize{ display:block; }
[data-universal-popout="true"] > .universal-popout__chrome .universal-popout__title{ display:block; }
.pfocus__panel[data-universal-popout="true"],
.build-object-panel[data-universal-popout="true"],
.market-rail__drawer[data-universal-popout="true"]{ padding-top:36px !important; }
.center-panel:has(.pfocus [data-universal-popout="true"]),
.pfocus:has([data-universal-popout="true"]){ overflow:visible; z-index:220; }
.pfocus:has(.pfocus__panel[data-universal-popout="true"]) > .pfocus__column:first-of-type,
.pfocus:has(.pfocus__object-space[data-universal-popout="true"]) > .pfocus__object-space,
.pfocus:has(.market-rail__drawer[data-universal-popout="true"]) > .pfocus__market-rail-column{
  z-index:230;
}
[data-universal-popout="true"][data-universal-dragging="true"]{
  box-shadow:0 38px 96px rgba(2,6,23,.45) !important;
}
[data-universal-popout="true"][data-universal-resizing="true"]{
  box-shadow:0 34px 88px rgba(2,6,23,.42) !important;
}
body[data-universal-window-drag="true"]{ cursor:move; user-select:none; }
body[data-universal-window-resize="true"]{ cursor:nwse-resize; user-select:none; }

/* Leave room for the always-visible panel icon in authored header rows. */
.build-object-panel[data-universal-popout-ready="true"] .build-object-panel__head{ padding-right:44px; }
.market-rail__drawer[data-universal-popout-ready="true"] > .universal-popout__chrome .universal-popout__toggle{ right:39px; }

/* The video expand icon pulls only the live player into a centered landscape
   window. Its heading, metadata and result list remain in Object Insights. */
body[data-view="browse"] .pfocus:has(.build-video-player[data-universal-popout="true"]) > .pfocus__column:first-of-type,
body[data-view="browse"] .pfocus__panel:has(.build-video-player[data-universal-popout="true"]),
body[data-view="browse"] .pfocus__body:has(.build-video-player[data-universal-popout="true"]){
  overflow:visible;
}
body[data-view="browse"] .pfocus:has(.build-video-player[data-universal-popout="true"]) > .pfocus__column:first-of-type{
  z-index:230;
}
body[data-view="browse"] .pfocus__video-library > .build-video-player[data-universal-popout="true"]{
  padding:44px 0 0 !important; aspect-ratio:auto !important;
  border-color:color-mix(in srgb,var(--line) 88%,transparent) !important;
  border-radius:14px !important; background:#050505 !important;
  box-shadow:0 24px 68px rgba(2,6,23,.3),0 5px 18px rgba(2,6,23,.13) !important;
}
body[data-view="browse"] .pfocus__video-library > .build-video-player[data-universal-popout="true"] > iframe,
body[data-view="browse"] .pfocus__video-library > .build-video-player[data-universal-popout="true"] > .build-video-player__placeholder{
  inset:44px 0 0; height:calc(100% - 44px);
}
body[data-view="browse"] .pfocus__video-library > .build-video-player[data-universal-popout="true"] > .pfocus__video-open{
  display:none;
}
body[data-view="browse"] .build-video-player[data-universal-popout="true"] > .universal-popout__chrome{
  height:44px; padding:0 9px 0 14px;
  border-bottom-color:color-mix(in srgb,var(--line-soft) 92%,transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--glass-surface-strong) 98%,var(--raised)) 0%,
    color-mix(in srgb,var(--glass-surface-strong) 94%,var(--surface)) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 58%,transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
body[data-view="browse"] .build-video-player[data-universal-popout="true"] .universal-popout__dragbar{
  inset:0 48px 0 0;
}
body[data-view="browse"] .build-video-player[data-universal-popout="true"] .universal-popout__title{
  max-width:calc(100% - 52px); color:var(--dim);
  font:750 12px/1 var(--font); letter-spacing:.12em;
}
body[data-view="browse"] .build-video-player[data-universal-popout="true"] .universal-popout__toggle{
  right:9px; top:8px; width:28px; height:28px;
  border-color:color-mix(in srgb,var(--line) 92%,transparent); border-radius:9px;
  background:color-mix(in srgb,var(--surface) 94%,var(--raised)); color:var(--dim);
  box-shadow:0 1px 2px rgba(15,23,42,.06),inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent);
}
body[data-view="browse"] .build-video-player[data-universal-popout="true"] .universal-popout__toggle[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--line) 92%,transparent);
  background:color-mix(in srgb,var(--surface) 94%,var(--raised)); color:var(--dim);
}
body[data-view="browse"] .build-video-player[data-universal-popout="true"] .universal-popout__toggle:is(:hover,:focus-visible){
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  background:var(--accent-soft); color:var(--accent-ink);
}
body[data-view="browse"] .build-video-player[data-universal-popout="true"] .universal-popout__toggle svg{
  width:15px; height:15px; stroke-width:2;
}
body[data-view="browse"] .build-video-player[data-universal-popout="true"] > .universal-popout__resize::after{
  right:7px; bottom:7px; width:8px; height:8px;
  border-width:0 1.5px 1.5px 0; opacity:.42;
}

/* A panel that has just taken the whole grid gets a single ring on arrival, so
   an expand reads as claiming the space rather than as a jump cut. */
.cols-3[data-expanded-panel] > .design-dock-panel[data-panel-expanded="true"],
.design-workspace[data-expanded-pane] .design-workspace__pane{
  animation:motion-claim var(--motion-glide) var(--ease-glide);
}
@keyframes motion-claim{
  from{ box-shadow:0 0 0 0 var(--accent-soft); }
  55% { box-shadow:0 0 0 3px var(--accent-soft); }
  to  { box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

/* ══════════════════════════════════════════════════════════════════
   stage wash — gradient ground for the 3D working surfaces
   ══════════════════════════════════════════════════════════════════
   The 3D canvases render with alpha and no clear colour, so whatever sits
   behind them WAS flat fill. These tokens give every stage the same lit-room
   language — a soft key from above, two cool/warm bounces in the lower
   corners, and a vertical settle — instead of each view inventing its own.
   Kept as tokens so a theme swap changes them in one place. */
:root{
  --stage-wash:
    radial-gradient(128% 90% at 50% 4%, color-mix(in srgb,#ffffff 88%,transparent), transparent 58%),
    radial-gradient(88% 76% at 12% 98%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 66%),
    radial-gradient(78% 68% at 94% 92%, color-mix(in srgb,var(--cad-accent) 9%,transparent), transparent 64%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  /* Faint ruling over the wash. Two 1px lines at very low alpha read as
     texture at a glance and as a workbench grid on inspection. */
  --stage-grid:
    linear-gradient(color-mix(in srgb,var(--line) 62%,transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--line) 62%,transparent) 1px, transparent 1px);
  --stage-grid-size:30px 30px;
  --stage-contact:rgba(16,24,40,.30);
  --stage-contact-soft:rgba(16,24,40,.13);
}
:root[data-theme="dark"]{
  --stage-wash:
    radial-gradient(128% 90% at 50% 2%, color-mix(in srgb,#ffffff 8%,transparent), transparent 56%),
    radial-gradient(88% 76% at 12% 98%, color-mix(in srgb,var(--accent) 6%,transparent), transparent 66%),
    radial-gradient(78% 68% at 94% 92%, color-mix(in srgb,var(--cad-accent) 14%,transparent), transparent 62%),
    linear-gradient(180deg, #141416 0%, #08080a 100%);
  --stage-grid:
    linear-gradient(color-mix(in srgb,var(--line) 78%,transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--line) 78%,transparent) 1px, transparent 1px);
  --stage-contact:rgba(0,0,0,.66);
  --stage-contact-soft:rgba(0,0,0,.34);
}

/* Browse: the wash and ruling sit under the transparent object canvas. */
.pfocus__object-space{
  background-image:var(--stage-grid), var(--stage-wash);
  background-size:var(--stage-grid-size), var(--stage-grid-size), auto, auto, auto, auto;
}
.pfocus__object,
.pfocus__scatter{ z-index:1; }
.pfocus__scatter{ z-index:2; }

/* Contact shadow. The focused camera frames the model on the origin, so its
   base lands a little below the vertical centre — that is where this ellipse
   goes. It is decoration under a transparent canvas, hence pointer-events:none
   and a z-index below both canvases. */
.pfocus__object-space::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:15%; transform:translateX(-50%);
  width:min(46%,460px); height:58px; border-radius:50%;
  background:radial-gradient(closest-side,
    var(--stage-contact), var(--stage-contact-soft) 56%, transparent 78%);
  filter:blur(10px);
  transition:opacity .25s ease;
}
/* In the field there is no single object on a floor, so the contact shadow
   would be a shadow of nothing. */
.pfocus[data-browse-scatter="true"] .pfocus__object-space::after{ opacity:0; }

/* Design: the grid canvas clears to transparent every frame, so the wash
   behind it shows through the rulings. No ruling token here — the canvas
   draws its own plate grid and two overlapping grids would moire. */
.designgrid{ background:var(--stage-wash); }

/* Build: the right panel is the storefront now, and it carries its own cream
   fill and hatched preview ground, so the shared wash would only muddy it. */

/* Seller: a dashboard rather than a 3D stage, so it takes the wash without the
   ruling — enough gradient to lift the cards off the canvas, not enough to
   compete with them. Specificity (0,1,1) beats seller-view.css's own
   `.seller-view{background:...}` (0,1,0), so the vendored file stays untouched
   and its hash stays valid. */

/* ── printer store view ────────────────────────────────────────────────
   "See Store" expands the map business card into this. It grows from the
   card's own scale so the gesture reads as the card opening rather than a
   new window appearing over it. */
.printer-store{
  position:absolute; z-index:40; right:12px; top:12px; bottom:12px;
  width:clamp(320px,34vw,460px); display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background-image:var(--stage-wash);
  background-color:var(--surface);
  box-shadow:var(--shadow-lg);
  transform:scale(.94); opacity:0; transform-origin:80% 40%;
  transition:transform .22s cubic-bezier(.22,.9,.24,1), opacity .18s ease;
}
.printer-store[hidden]{ display:none; }
.printer-store[data-open="true"]{ transform:scale(1); opacity:1; }
.printer-store__head{
  flex:0 0 auto; min-height:56px; padding:10px 12px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--line-soft); background:var(--glass-surface-soft);
}
.printer-store__mark{
  width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:9px;
  background:var(--surface-preview); color:var(--accent);
}
.printer-store__mark svg{ width:19px; height:19px; }
.printer-store__copy{ min-width:0; flex:1; }
.printer-store__copy strong{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:750 12px/1.2 var(--font);
}
.printer-store__copy span{
  display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--dim); font:600 12px/1 var(--font);
}
.printer-store__close{
  width:26px; height:26px; flex:0 0 auto; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--dim); font:700 12px/1 var(--font); cursor:pointer;
}
.printer-store__close:hover{ border-color:var(--accent); color:var(--ink); }
.printer-store__stats{
  flex:0 0 auto; padding:10px 12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px; border-bottom:1px solid var(--line-soft);
}
.printer-store__stat{
  min-width:0; padding:7px 9px; border:1px solid var(--line-soft); border-radius:8px;
  background:var(--glass-surface-soft);
}
.printer-store__stat span{
  display:block; color:var(--faint); font:700 12px/1 var(--font);
  letter-spacing:.11em; text-transform:uppercase;
}
.printer-store__stat strong{
  display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:750 12px/1 var(--font);
}
.printer-store__grid{
  min-height:0; flex:1; overflow:auto; padding:9px; display:flex; flex-direction:column; gap:6px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.printer-store__item{
  min-width:0; padding:8px 9px; display:grid; grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center; gap:9px; border:1px solid var(--line-soft); border-radius:10px;
  background:var(--glass-surface-soft);
  transition:border-color .14s, background .14s, transform .14s;
}
.printer-store__item:hover{ transform:translateY(-1px); border-color:var(--line); background:var(--surface-hover); }
.printer-store__item-mark{
  width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:8px; background:var(--surface-preview); color:var(--accent);
}
.printer-store__item-mark svg{ width:17px; height:17px; }
.printer-store__item-copy{ min-width:0; }
.printer-store__item-copy strong{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:700 12px/1.15 var(--font);
}
.printer-store__item-copy span{
  display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--faint); font:650 12px/1 var(--font);
}
.printer-store__item-side{ display:grid; justify-items:end; gap:4px; }
.printer-store__item-side b{ font:750 12px/1 var(--font); letter-spacing:-.02em; }
.printer-store__item-side b.is-free{ color:var(--ui-positive,#16865b); }
.printer-store__item-badge{
  padding:2px 5px; border-radius:4px; background:var(--cad-accent-soft);
  color:var(--cad-accent-ink); font:750 12px/1.4 var(--font); letter-spacing:.08em;
}
.printer-store__item-print{
  padding:4px 10px; border:1px solid var(--accent); border-radius:6px;
  /* --accent is near-white in the dark theme and pure white in the mono style,
     so a literal #fff label was invisible in both. --tip-fg is the on-accent
     foreground this file already pairs with an accent fill (see .ttool active),
     and it is the one that clears 4.5:1 in all eight theme x style combinations. */
  background:var(--accent); color:var(--tip-fg); font:700 12px/1 var(--font); cursor:pointer;
  transition:background .14s, border-color .14s;
}
.printer-store__item-print:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.printer-store__empty{ margin:0; padding:14px; color:var(--dim); font:600 12px/1.45 var(--font); }
/* The store takes the right side, so the object catalog steps aside rather
   than sitting underneath it. */
.layout-build-globe[data-printer-store-open] .build-object-browser{
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
@media (max-width:900px){
  .printer-store{ width:min(88vw,360px); }
  .printer-store__stats{ grid-template-columns:1fr; }
}

/* Rows of the objects in a clicked emoji category. Same row language as the
   favorites list so the drawer reads as one component in every mode. */
.market-rail__object{
  width:100%; min-width:0; min-height:96px; padding:9px 10px; display:grid;
  grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px;
  text-align:left; border:1px solid var(--pf-drawer-border,var(--line)); border-radius:10px;
  background:var(--glass-surface-soft); color:var(--ink);
  transition:background .14s, transform .14s;
}
.market-rail__object:hover{ transform:translateY(-1px); background:var(--surface-hover); }
.market-rail__object[data-selected="true"]{
  border-color:var(--pf-drawer-border,var(--line)); background:var(--glass-surface-soft); box-shadow:none;
}
.market-rail__object-open{
  min-width:0; min-height:76px; display:grid; grid-template-columns:76px minmax(0,1fr);
  align-items:center; gap:12px; padding:0; border:0; background:transparent; color:inherit;
  text-align:left; cursor:pointer;
}
.market-rail__object-open:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:9px;
}
.market-rail__object-preview{
  position:relative; width:76px; height:76px; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--line); border-radius:9px; background:var(--surface-preview); color:var(--accent);
}
.market-rail__object-preview img{
  width:100%; height:100%; display:block; object-fit:contain; padding:3px; box-sizing:border-box;
  opacity:0; transform:scale(.94); transition:opacity .18s ease,transform .22s ease;
}
.market-rail__object-preview-fallback{ position:absolute; width:20px; height:20px; }
.market-rail__object-preview[data-preview-state="ready"] img{ opacity:1; transform:scale(1); }
.market-rail__object-preview[data-preview-state="ready"] .market-rail__object-preview-fallback{ display:none; }
.market-rail__object-zoom{
  position:absolute; left:50%; top:50%; width:31px; height:31px; display:grid; place-items:center;
  border-radius:50%; background:color-mix(in srgb,var(--surface) 88%,transparent); color:var(--ink);
  box-shadow:0 4px 12px rgba(15,23,42,.2); opacity:0; transform:translate(-50%,-50%) scale(.72);
  transition:opacity .16s ease,transform .18s ease; pointer-events:none;
}
.market-rail__object-zoom svg{ width:15px; height:15px; }
.market-rail__object-preview:hover .market-rail__object-zoom,
.market-rail__object-open:focus-visible .market-rail__object-zoom{
  opacity:1; transform:translate(-50%,-50%) scale(1);
}
.market-rail__object-preview:hover img{ transform:scale(1.055); filter:brightness(.88); }
.market-rail__object-copy{ min-width:0; }
.market-rail__object-copy strong{
  display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  font:750 12.5px/1.18 var(--font); letter-spacing:-.01em;
}
.market-rail__object-copy small{
  display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--faint); font:650 12px/1.15 var(--font);
}
.market-rail__object-commerce{
  width:64px; display:grid; grid-template-areas:"action" "boost";
  grid-template-rows:34px auto; justify-items:stretch; align-content:center; gap:7px;
}
.market-rail__object-price{
  grid-area:action; min-width:0; display:grid; place-items:center; text-align:center;
  color:var(--ink); font:850 15px/1 var(--font); letter-spacing:-.015em;
  text-transform:uppercase; transition:opacity .14s ease,transform .16s ease;
}
.market-rail__object-price[data-free="true"]{
  color:#19a860;
}
.market-rail__object-add{
  grid-area:action; min-height:34px; display:flex; align-items:center; justify-content:center; gap:4px; padding:6px 7px;
  border:0; border-radius:8px; background:#1f74ef; color:#fff;
  font:800 12px/1 var(--font); cursor:pointer; opacity:0; pointer-events:none;
  transform:scale(.94); transition:opacity .14s ease,transform .16s ease,background .14s ease;
}
.market-rail__object-add svg{ width:11px; height:11px; }
.market-rail__object-add:hover{ background:#1468e8; }
.market-rail__object:is(:hover,:focus-within) .market-rail__object-price{
  opacity:0; transform:scale(.92);
}
.market-rail__object:is(:hover,:focus-within) .market-rail__object-add{
  opacity:1; pointer-events:auto; transform:scale(1);
}
.market-rail__object-add:disabled{
  background:var(--surface-preview); color:var(--dim); cursor:default;
}
.market-rail__object-boost{
  grid-area:boost; justify-self:center; color:var(--dim); font:700 12px/1 var(--font); font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media (hover:none){
  .market-rail__object-price{ opacity:0; }
  .market-rail__object-add{ opacity:1; pointer-events:auto; transform:none; }
}
/* The header mark carries a plain emoji in category mode, not an SVG icon. */
.market-rail__drawer[data-mode="category"] [data-rail-drawer-icon]{ font-size:17px; line-height:1; }

/* ══════════════════════════════════════════════════════════════════
   Create your home in 3D — Build offer and Design video guide
   ══════════════════════════════════════════════════════════════════
   The house reconstruction preview stays inside the Build offer panel. */
.build-home-offer-host{
  position:absolute; z-index:72; inset:0; overflow:hidden; pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}
.work-area:has(.layout-build-globe[data-printer-store-open]) .build-home-offer-host{
  opacity:0; visibility:hidden; pointer-events:none;
}
.build-home-offer{
  position:absolute; left:14px; top:14px;
  width:min(390px,calc(100% - 28px)); height:180px;
  min-width:0; padding:17px 18px 43px 132px; overflow:hidden; pointer-events:auto;
  border:1px solid var(--line); border-radius:13px;
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg);
  font-family:var(--font); transform-origin:left top;
  opacity:0; transform:translate3d(calc(-100% - 28px),0,0);
  transition:transform .5s cubic-bezier(.22,.9,.24,1),opacity .24s ease;
}
.build-home-offer[hidden]{ display:none; }
.build-home-offer[data-state="expanded"]{
  opacity:1; transform:translate3d(0,0,0) scale(1);
}
.build-home-offer__house{
  position:absolute; left:18px; top:19px; width:98px; height:102px;
  display:block; padding:0; overflow:hidden; border:1px solid var(--line);
  border-radius:14px; background:#172028; color:var(--ink); cursor:pointer;
}
.build-home-offer__house:hover{ border-color:var(--accent); }
.build-home-offer__house:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.build-home-offer__content{ min-width:0; }
.build-home-offer__eyebrow{
  display:block; color:var(--faint); font:700 12px/1 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.16em; text-transform:uppercase;
}
.build-home-offer h2{
  margin:9px 0 0; color:var(--ink); font:720 20px/1.08 var(--font); letter-spacing:-.025em;
}
.build-home-offer p{
  max-width:31ch; margin:8px 0 0; color:var(--dim); font:500 12.5px/1.42 var(--font); text-wrap:pretty;
}
.build-home-offer__footer{
  position:absolute; left:0; right:0; bottom:0; height:40px; padding:0 13px 0 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--line-soft); color:var(--faint);
}
.build-home-offer__footer > span{
  font:700 12px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.1em;
}
.build-home-offer__footer button{
  min-height:30px; padding:0 7px; display:inline-flex; align-items:center; gap:7px;
  border:0; border-radius:8px; background:transparent; color:var(--ink); cursor:pointer;
  font:700 12px/1 var(--font); transition:background .14s,color .14s,transform .14s;
}
.build-home-offer__footer button:hover{
  background:var(--accent-soft); color:var(--accent-ink); transform:translateX(2px);
}
.build-home-offer__footer button:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px; background:var(--accent-soft); color:var(--accent-ink);
}
@media (max-width:600px){
  .build-home-offer{ width:min(390px,calc(100% - 28px)); }
}
@media (prefers-reduced-motion:reduce){
  .build-home-offer,.build-home-offer__house,.build-home-offer__content,
  .build-home-offer__footer button{ animation:none; transition:none; }
}
:root[data-reduce-motion="true"] .build-home-offer,
:root[data-reduce-motion="true"] .build-home-offer__house,
:root[data-reduce-motion="true"] .build-home-offer__content,
:root[data-reduce-motion="true"] .build-home-offer__footer button{
  animation:none; transition:none;
}

/* The printer recommendation keeps its own top-left lane, moving below the
   home card only during the card's full introduction. */
.hivead-stack{ transition:top .42s cubic-bezier(.22,.9,.24,1); }
.work-area:has(.build-home-offer:is([data-state="entering"],[data-state="expanded"])) .hivead-stack{
  top:208px;
}

.design-home-guide-host{
  position:absolute; z-index:470; inset:0; padding:20px; box-sizing:border-box;
  display:grid; place-items:center; pointer-events:none;
  background:color-mix(in srgb,var(--surface) 42%,transparent);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s ease;
}
.design-home-guide-host[hidden]{ display:none; }
.design-home-guide-host[data-open="true"]{ opacity:1; visibility:visible; }
.design-home-guide{
  width:min(620px,calc(100vw - 48px)); max-height:calc(100% - 36px); overflow:auto;
  padding:0 18px 16px; box-sizing:border-box; pointer-events:auto;
  border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink);
  box-shadow:0 24px 70px rgba(7,11,20,.28); font-family:var(--font);
  opacity:0; transform:translateY(14px) scale(.975);
  transition:opacity .2s ease,transform .34s cubic-bezier(.22,.9,.24,1);
}
.design-home-guide-host[data-open="true"] .design-home-guide{ opacity:1; transform:none; }
.design-home-guide__head{
  min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.design-home-guide__head span{ min-width:0; }
.design-home-guide__head small{
  display:block; color:var(--faint); font:700 12px/1 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.15em;
}
.design-home-guide__head h2{ margin:7px 0 0; font:760 21px/1.08 var(--font); letter-spacing:-.025em; }
.design-home-guide__head button{
  flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center;
  border-radius:9px; background:var(--slot); color:var(--dim); font:500 20px/1 var(--font);
}
.design-home-guide__head button:hover,.design-home-guide__head button:focus-visible{
  background:var(--line); color:var(--ink); outline:0;
}
.design-home-guide__video{
  position:relative; min-height:246px; overflow:hidden; padding:48px 24px 28px;
  border-radius:13px; background:#11141a; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.design-home-guide__video::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 22% 36%,rgba(31,116,239,.24),transparent 35%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,24px 24px,24px 24px;
}
.design-home-guide__video-bar{
  position:absolute; z-index:2; left:0; right:0; top:0; height:36px; padding:0 13px;
  display:flex; align-items:center; justify-content:space-between; color:#aeb6c4;
  border-bottom:1px solid rgba(255,255,255,.09); font:700 12px/1 ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:.1em;
}
.design-home-guide__video-bar span{ display:flex; align-items:center; gap:7px; }
.design-home-guide__video-bar span i{ width:7px; height:7px; border-radius:50%; background:#1f74ef; box-shadow:0 0 0 4px rgba(31,116,239,.16); }
.design-home-guide__video-bar b{ color:#fff; font:inherit; letter-spacing:0; }
.design-home-guide__scenes{
  position:relative; z-index:1; min-height:170px; display:grid;
  grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); align-items:center; gap:10px;
}
.design-home-guide__scene{ min-width:0; display:grid; justify-items:center; gap:8px; text-align:center; }
.design-home-guide__scene strong{ font:720 13px/1.2 var(--font); }
.design-home-guide__scene small{ color:#aeb6c4; font:500 12px/1.3 var(--font); }
.design-home-guide__step{
  position:absolute; top:4px; width:22px; height:22px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.1); color:#dce4f0; font:750 12px/1 var(--font);
}
.design-home-guide__scene--attach .design-home-guide__step{ left:8px; }
.design-home-guide__scene--command .design-home-guide__step{ right:8px; }
.design-home-guide__paperclip{
  width:68px; height:68px; display:grid; place-items:center; border-radius:20px;
  background:#1f74ef; color:#fff; box-shadow:0 12px 28px rgba(31,116,239,.32);
}
.design-home-guide__paperclip svg{ width:29px; height:29px; }
.design-home-guide__next{ color:#687386; font:700 22px/1 var(--font); text-align:center; }
.design-home-guide__command{
  width:100%; height:44px; padding:0 12px; display:flex; align-items:center; box-sizing:border-box;
  overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:11px;
  background:rgba(255,255,255,.08); text-align:left;
}
.design-home-guide__command i{
  display:block; width:0; overflow:hidden; color:#fff; font:600 12px/1 var(--font);
  font-style:normal; white-space:nowrap; border-right:1px solid #73a7ff;
}
.design-home-guide__progress{
  position:absolute; z-index:2; left:14px; right:14px; bottom:12px; height:3px;
  overflow:hidden; border-radius:99px; background:rgba(255,255,255,.12);
}
.design-home-guide__progress i{ display:block; width:0; height:100%; border-radius:inherit; background:#1f74ef; }
.design-home-guide__video[data-playing="true"] .design-home-guide__paperclip{
  animation:design-home-attach-cue 1.1s ease-in-out 2;
}
.design-home-guide__video[data-playing="true"] .design-home-guide__command i{
  animation:design-home-command-type 4.6s steps(26,end) .9s both;
}
.design-home-guide__video[data-playing="true"] .design-home-guide__progress i{
  animation:design-home-video-progress 5.5s linear both;
}
.design-home-guide__copy{ margin:14px 2px 0; color:var(--dim); font:500 12.5px/1.5 var(--font); }
.design-home-guide__copy b{ color:var(--ink); }
.design-home-guide__actions{
  min-height:44px; margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.design-home-guide__actions span{ color:var(--accent-ink); font:700 12px/1 var(--font); }
.design-home-guide__actions button{
  min-height:30px; padding:0 11px; border:1px solid var(--line); border-radius:9px;
  background:var(--raised); color:var(--ink); font:700 12px/1 var(--font);
}
.design-home-guide__actions button:hover,.design-home-guide__actions button:focus-visible{
  border-color:var(--accent); color:var(--accent-ink); outline:0;
}
.command__add[data-home-guide-highlight="true"]{
  position:relative; background:#1f74ef; color:#fff; animation:design-home-real-attach 1s ease-in-out infinite;
}
.command__add[data-home-guide-highlight="true"]::before{
  content:""; position:absolute; inset:-4px; border:2px solid #1f74ef; border-radius:50%;
  pointer-events:none; animation:design-home-real-ring 1s ease-out infinite;
}
@keyframes design-home-attach-cue{
  0%,100%{ transform:scale(1); box-shadow:0 12px 28px rgba(31,116,239,.32); }
  50%{ transform:scale(1.09); box-shadow:0 14px 34px rgba(31,116,239,.58); }
}
@keyframes design-home-command-type{
  0%,25%{ width:0; }
  88%,100%{ width:100%; }
}
@keyframes design-home-video-progress{ from{ width:0; } to{ width:100%; } }
@keyframes design-home-real-attach{ 50%{ transform:scale(1.09); background:#1468e8; } }
@keyframes design-home-real-ring{ from{ transform:scale(.9); opacity:.8; } to{ transform:scale(1.28); opacity:0; } }
@media (max-width:680px){
  .design-home-guide__video{ min-height:280px; padding-inline:16px; }
  .design-home-guide__scenes{ grid-template-columns:1fr; gap:12px; }
  .design-home-guide__next{ transform:rotate(90deg); }
  .design-home-guide__step{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .design-home-guide-host,.design-home-guide,.design-home-guide__paperclip,
  .design-home-guide__command i,.design-home-guide__progress i,
  .command__add[data-home-guide-highlight="true"],.command__add[data-home-guide-highlight="true"]::before{
    animation:none; transition:none;
  }
  .design-home-guide__video[data-playing="true"] .design-home-guide__command i{ width:100%; }
  .design-home-guide__video[data-playing="true"] .design-home-guide__progress i{ width:100%; }
}
:root[data-reduce-motion="true"] .design-home-guide-host,
:root[data-reduce-motion="true"] .design-home-guide,
:root[data-reduce-motion="true"] .design-home-guide__paperclip,
:root[data-reduce-motion="true"] .design-home-guide__command i,
:root[data-reduce-motion="true"] .design-home-guide__progress i,
:root[data-reduce-motion="true"] .command__add[data-home-guide-highlight="true"],
:root[data-reduce-motion="true"] .command__add[data-home-guide-highlight="true"]::before{
  animation:none; transition:none;
}
:root[data-reduce-motion="true"] .design-home-guide__video[data-playing="true"] .design-home-guide__command i,
:root[data-reduce-motion="true"] .design-home-guide__video[data-playing="true"] .design-home-guide__progress i{ width:100%; }

/* ══════════════════════════════════════════════════════════════════
   printer recommendation cards — Build only
   ══════════════════════════════════════════════════════════════════
   One reference-sized referral card occupies the stage's top-left corridor
   below the top panel. The catalog advances only when that card is dismissed,
   so the supplied square composition never becomes a clipped vertical stack.
   Anyone who already owns the machine can use the quiet eyebrow door to reach
   Seller View instead of the store link. */
/* export/banner-2c.html and export/banner-2d.html */
.hivead-stack{
  position:absolute; z-index:70; top:14px; left:14px; right:auto; bottom:auto;
  width:min(320px,calc(100% - clamp(330px,29vw,400px) - 42px));
  display:flex; flex-direction:column; align-items:stretch; gap:9px;
  /* Only the notifications take the pointer; the empty stack must not
     steal clicks from the object canvas underneath */
  pointer-events:none;
}
.hivead{
  --hivead-paper:#fff; --hivead-ink:#16181c; --hivead-muted:#6b7280;
  --hivead-copper:#c98a28; --hivead-rule:#e3e3df; --hivead-line:#f1f1ef;
  position:relative; pointer-events:auto; width:100%; height:auto; min-height:320px; min-width:0;
  padding:13px 16px 0; box-sizing:border-box; display:flex; flex-direction:column;
  border:0; border-radius:12px; overflow:hidden;
  background:var(--hivead-paper); color:var(--hivead-ink);
  box-shadow:0 1px 2px rgba(16,18,28,.06),0 14px 30px -12px rgba(16,18,28,.24);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  transform:translate3d(-48px,0,0) scale(.98); opacity:0; filter:blur(1.5px);
  transform-origin:0 0;
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .18s ease, filter .2s ease;
  will-change:transform,opacity;
}
.hivead[hidden]{ display:none; }
.hivead[data-open="true"]{ transform:translate3d(0,0,0) scale(1); opacity:1; filter:none; }
:root[data-theme="dark"] .hivead{
  --hivead-paper:#171719; --hivead-ink:#f7f7f5; --hivead-muted:#b6b6bd;
  --hivead-copper:#e0a452; --hivead-rule:#3b3b40; --hivead-line:#2d2d31;
}

.hivead__topline{
  flex:0 0 13px; min-width:0; display:flex; align-items:baseline; gap:8px;
}
.hivead__eyebrow{
  flex:0 0 auto; padding:0; border:0; background:transparent; color:var(--hivead-copper);
  font:400 10.5px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer;
}
.hivead__eyebrow:hover{ color:color-mix(in srgb,var(--hivead-copper) 72%,var(--hivead-ink)); }
.hivead__eyebrow:focus-visible{ outline:1px solid currentColor; outline-offset:3px; border-radius:2px; }
.hivead__rule{
  min-width:0; flex:1 1 auto; height:1px; margin-left:0;
  border-top:1px dashed var(--hivead-rule);
}
.hivead__headline{
  flex:0 0 auto; max-width:260px; margin:11px 0 0; color:var(--hivead-ink);
  font:600 17px/1.25 'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:-.02em; text-wrap:pretty;
}
.hivead__lede{
  flex:0 0 auto; margin:7px 0 0; color:var(--hivead-muted);
  font:400 12.5px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:0;
}
.hivead__product{
  flex:0 0 72px; min-width:0; margin-top:15px;
  display:grid; grid-template-columns:72px minmax(0,1fr); gap:13px; align-items:center;
}
.hivead__media{
  position:relative; width:72px; height:72px; overflow:hidden;
  border:1px solid #ececef; border-radius:8px;
  background:var(--hivead-paper);
}
.hivead__shot{
  position:absolute; inset:4px 5px 14px; width:calc(100% - 10px); height:calc(100% - 18px);
  display:block; object-fit:contain; mix-blend-mode:multiply;
}
:root[data-theme="dark"] .hivead__shot{ mix-blend-mode:normal; }
.hivead__media-label{
  position:absolute; left:0; right:0; bottom:5px; text-align:center;
  color:#9ca3af; font:400 7px/1 ui-monospace,'SF Mono',Menlo,monospace;
}
.hivead__details{ min-width:0; display:grid; gap:5px; align-content:center; }
.hivead__name{
  min-width:0; color:var(--hivead-ink); font:600 14.5px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif;
  letter-spacing:-.01em;
}
.hivead__code{
  color:var(--hivead-muted); font:400 11px/1 ui-monospace,'SF Mono',Menlo,monospace;
}
.hivead__code b{ color:var(--hivead-ink); font:inherit; }
.hivead__close{
  position:absolute; z-index:2; top:8px; right:8px; width:22px; height:22px;
  padding:0; display:grid; place-items:center; opacity:0;
  border:1px solid transparent; border-radius:7px; background:transparent;
  color:var(--hivead-muted); cursor:pointer;
  transition:opacity .14s,border-color .14s,color .14s,background .14s;
}
.hivead__close svg{ width:12px; height:12px; }
.hivead:hover .hivead__close,.hivead__close:focus-visible{ opacity:1; }
.hivead__close:hover,.hivead__close:focus-visible{
  border-color:var(--line); color:var(--hivead-ink); background:var(--hivead-paper);
}
.hivead__cta{
  position:relative; isolation:isolate; overflow:hidden;
  flex:0 0 42px; width:100%; height:42px; margin-top:16px; padding:0;
  display:flex; align-items:center; justify-content:center; gap:7px;
  border:0; border-radius:9px; cursor:pointer;
  font:600 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:0;
  transition:filter .18s,transform .18s,box-shadow .18s;
}
.hivead__cta > span{ position:relative; z-index:1; }
.hivead__cta:hover,.hivead__cta:focus-visible{
  filter:brightness(1.1); transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(6,9,14,.24);
}
.hivead__cta:active{ transform:translateY(0); box-shadow:0 3px 8px rgba(6,9,14,.18); }
.hivead__cta:focus-visible{
  outline:2px solid color-mix(in srgb,var(--hivead-copper) 78%,white); outline-offset:2px;
}
.hivead__cta--buy{
  background:var(--hivead-ink); border-color:var(--hivead-ink); color:var(--hivead-paper);
  text-decoration:none;
}
.hivead__cta--buy::after{
  content:''; position:absolute; z-index:0; top:-38%; bottom:-38%; left:-34%; width:24%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  opacity:0; pointer-events:none; transform:translateX(0) skewX(-22deg);
}
.hivead__cta--buy[data-shimmer="true"]::after{
  animation:hivead-cta-shimmer .82s cubic-bezier(.2,.7,.25,1) 1;
}
@keyframes hivead-cta-shimmer{
  0%{ opacity:0; transform:translateX(0) skewX(-22deg); }
  18%{ opacity:.78; }
  78%{ opacity:.24; }
  100%{ opacity:0; transform:translateX(610%) skewX(-22deg); }
}
.hivead__external{ font:700 12px/1 var(--font); transform:translateY(-1px); }
.hivead__foot{
  flex:1 1 auto; min-height:31px; margin:16px -16px 0; padding:9px 16px;
  display:flex; align-items:center; gap:7px; border-top:1px solid var(--hivead-line);
  color:var(--hivead-muted); font:400 10.5px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.06em;
  white-space:nowrap;
}

/* export/banner-2d.html — exact compact two-model follow-up. */
.hivead--comparison{ min-height:0; padding:0; }
.hivead-compare__head{ padding:14px 16px 13px; border-bottom:1px solid var(--hivead-line); }
.hivead-compare__title{
  display:block; padding:0; border:0; background:transparent; color:var(--hivead-ink); cursor:pointer;
  font:600 14.5px/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:-.01em; text-align:left;
}
.hivead-compare__title:hover{ color:#2563eb; }
.hivead-compare__title:focus-visible{ outline:2px solid #2563eb; outline-offset:3px; border-radius:3px; }
.hivead-compare__code{
  display:block; margin-top:6px; color:var(--hivead-muted);
  font:400 10.5px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.06em;
}
.hivead-compare__code b{ color:var(--hivead-ink); font:inherit; }
.hivead-compare__products{ display:grid; }
.hivead-compare__product{
  min-width:0; padding:14px 16px 0; display:grid; grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center; gap:13px;
}
.hivead-compare__product:last-child{ padding-bottom:14px; }
.hivead-compare__media{
  width:52px; height:52px; overflow:hidden; border:1px solid #ececef; border-radius:7px; background:var(--hivead-paper);
}
.hivead-compare__media img{ width:100%; height:100%; display:block; padding:4px; object-fit:contain; mix-blend-mode:multiply; }
:root[data-theme="dark"] .hivead-compare__media img{ mix-blend-mode:normal; }
.hivead-compare__copy{ min-width:0; display:grid; gap:3px; }
.hivead-compare__copy strong{
  color:var(--hivead-ink); font:600 14px/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif;
  letter-spacing:-.01em; text-wrap:pretty;
}
.hivead-compare__copy small{ color:var(--hivead-muted); font:400 12px/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif; }
.hivead__cta.hivead-compare__buy{
  width:auto; height:34px; min-width:65px; margin:0; padding:0 14px; flex:none;
  border-radius:8px; background:#2563eb; color:#fff; font-size:12.5px;
}
.hivead__cta.hivead-compare__buy:hover{ background:#1d4fd7; }
.hivead__cta.hivead-compare__buy.is-secondary{ border:1px solid #d8d8dd; background:var(--hivead-paper); color:var(--hivead-ink); }
.hivead__cta.hivead-compare__buy.is-secondary:hover{ border-color:var(--hivead-ink); background:var(--hivead-paper); }
.hivead--comparison .hivead__foot{ min-height:0; margin:0; }

@media (prefers-reduced-motion:reduce){
  .hivead{ transition:opacity .2s ease; transform:none; filter:none; }
  .hivead__cta:hover,.hivead__cta:focus-visible{ transform:none; }
  .hivead__cta--buy[data-shimmer="true"]::after{ animation:none; }
}
:root[data-reduce-motion="true"] .hivead__cta:hover,
:root[data-reduce-motion="true"] .hivead__cta:focus-visible{ transform:none; }
:root[data-reduce-motion="true"] .hivead__cta--buy[data-shimmer="true"]::after{ animation:none; }
@media (hover:none){ .hivead__close{ opacity:.72; } }
/* end export/banner-2c.html and export/banner-2d.html */

/* ══════════════════════════════════════════════════════════ about + contact ══
   The dialog behind both "About Us" chips (the front door's and the
   watchbar's). One sheet, two pages, driven by [data-page] on the dialog. */

.about{
  width:min(920px,calc(100vw - 40px)); max-height:min(86vh,860px); padding:0;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
/* Only the open dialog becomes a flex column — a bare `display:flex` would
   override the UA's `display:none` and leave the sheet on screen when closed.
   The column is what lets the scroll area size itself against the chrome
   instead of subtracting a hand-measured header height. */
.about[open]{ display:flex; flex-direction:column; }
.about::backdrop{ background:rgba(10,12,16,.52); backdrop-filter:blur(3px); }

.about__chrome{
  flex:0 0 auto; z-index:2; display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--line-soft);
  background:var(--glass-surface); backdrop-filter:blur(10px);
}
.about__chrome-title{
  margin:0 0 0 10px; color:var(--ink);
  font:650 15px/1 var(--font); letter-spacing:-.01em;
}
.about__close{
  width:30px; height:30px; margin-left:auto; display:grid; place-items:center;
  border:1px solid transparent; border-radius:8px; background:transparent; color:var(--dim); cursor:pointer;
}
.about__close:hover,.about__close:focus-visible{ border-color:var(--line); background:var(--slot); color:var(--ink); }
.about__close svg{ width:16px; height:16px; }

.about__scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.about__page{ padding:26px 40px 28px; display:grid; gap:20px; }
.about__page[hidden]{ display:none; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.about__hero{ display:grid; gap:8px; max-width:72ch; }
.about__hero--tight{ gap:9px; }
.about__brand-row{ display:flex; align-items:center; }
.about__brand-copy{ width:390px; max-width:100%; display:grid; gap:6px; min-width:0; }
.about__eyebrow{
  color:var(--dim); font:600 12px/1 var(--font); letter-spacing:.16em; text-transform:uppercase;
}
.about__title{ margin:0; color:var(--ink); font:600 34px/1.08 var(--font); letter-spacing:-.02em; }
.about__title em{ font-style:normal; }
.about__title em:nth-of-type(2){ color:var(--dim); }
.about__title em:nth-of-type(3){ color:var(--accent-ink); }
.about__title--wordmark{ width:min(390px,100%); font-size:0; line-height:0; }
.about__wordmark{
  position:relative; width:100%; height:76px; display:block; overflow:hidden;
}
.about__wordmark-image{
  position:absolute; inset:50% 0 auto; width:100%; height:auto; display:block;
  transform:translateY(-50%); object-fit:contain;
}
.about__wordmark-image--light-gold{ clip-path:inset(0 0 0 44%); }
.about__wordmark-image--light-ink{
  clip-path:inset(0 54% 0 0); filter:brightness(.12) contrast(1.22);
}
.about__wordmark-image--dark{ display:none; }
:root[data-theme="dark"] .about__wordmark-image--light-gold,
:root[data-theme="dark"] .about__wordmark-image--light-ink{ display:none; }
:root[data-theme="dark"] .about__wordmark-image--dark{ display:block; }
.about__lede{ margin:0; color:var(--dim); font:400 15px/1.55 var(--font); }

/* ── the three verbs ──────────────────────────────────────────────────── */
.about__steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.about__step{
  position:relative; display:grid; gap:6px; align-content:start; padding:16px 18px 18px;
  border:1px solid var(--line); border-radius:var(--radius-ui); background:var(--raised);
}
.about__step-ord{
  color:var(--faint); font:600 12px/1 var(--mono); letter-spacing:.14em;
}
.about__step h2{ margin:0; color:var(--ink); font:600 17px/1.1 var(--font); letter-spacing:-.01em; }
.about__step p{ margin:0; color:var(--dim); font:400 12.5px/1.6 var(--font); }
.about__step::after{
  content:""; position:absolute; left:18px; right:18px; top:0; height:2px; border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

/* ── belief ───────────────────────────────────────────────────────────── */
/* The panel spans the column so it sits square with the step and figure rows;
   the measure is held on the paragraphs, where it belongs. */
.about__belief{
  display:grid; gap:9px; padding:18px 20px;
  border:1px solid var(--line-soft); border-radius:var(--radius-ui); background:var(--slot);
}
.about__belief h2{ margin:0; color:var(--ink); font:600 13px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; }
.about__belief p{ margin:0; max-width:78ch; color:var(--text); font:400 13.5px/1.55 var(--font); }

/* ── figures ──────────────────────────────────────────────────────────── */
.about__figures{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.about__figure{
  display:grid; gap:4px; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--radius-ui); background:var(--surface); text-align:center;
}
.about__figure b{ color:var(--ink); font:600 19px/1 var(--font); letter-spacing:-.02em; }
.about__figure span{ color:var(--dim); font:500 12px/1.2 var(--font); }

/* ── calls to action ──────────────────────────────────────────────────── */
.about__cta{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--line-soft);
}
.about__cta p{ margin:0; color:var(--dim); font:500 13px/1.4 var(--font); }
.about__cta-button{
  height:36px; padding:0 20px; border:1px solid transparent; border-radius:var(--radius-ui);
  /* One token instead of a literal plus a dark-theme patch: the patch covered
     the dark theme but not the mono style, where --accent is pure white and the
     label disappeared into its own button. */
  background:var(--accent); color:var(--tip-fg); font:600 13px/1 var(--font); cursor:pointer;
}
.about__cta-button:hover{ filter:brightness(1.06); }
.about__cta-button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }

/* ── contact ──────────────────────────────────────────────────────────── */
.about__contact-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.about__contact-card{
  display:grid; gap:5px; padding:18px 18px 19px; border:1px solid var(--line);
  border-radius:var(--radius-ui); background:var(--raised);
}
.about__contact-label{
  color:var(--faint); font:600 12px/1 var(--font); letter-spacing:.14em; text-transform:uppercase;
}
.about__contact-card strong{ color:var(--ink); font:600 15px/1.35 var(--font); }
.about__contact-note{ color:var(--dim); font:400 12px/1.45 var(--font); }

.about__form{ display:grid; gap:13px; padding-top:24px; border-top:1px solid var(--line-soft); }
.about__form-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.about__field{ display:grid; gap:5px; min-width:0; }
.about__field > span{
  color:var(--dim); font:600 12px/1 var(--font); letter-spacing:.09em; text-transform:uppercase;
}
.about__field input,.about__field select,.about__field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  background:var(--raised); color:var(--text); font:400 13px/1.45 var(--font); resize:vertical;
}
.about__field input:focus,.about__field select:focus,.about__field textarea:focus{
  outline:none; border-color:var(--accent); background:var(--surface);
}
.about__form-foot{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:flex-end; }
.about__form-status{ margin:0 auto 0 0; color:var(--dim); font:500 12px/1.4 var(--font); }
.about__form-status[data-tone="error"]{ color:var(--danger); }
.about__form-status[data-tone="ok"]{ color:var(--accent-ink); }

@media (max-width:760px){
  .about__page{ padding:24px 20px 28px; gap:24px; }
  .about__title{ font-size:26px; }
  .about__wordmark{ height:66px; }
  .about__steps,.about__contact-grid,.about__form-row{ grid-template-columns:minmax(0,1fr); }
  .about__figures{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ── the shimmer ──────────────────────────────────────────────────────────
   Both About Us chips sweep a band of light across themselves every so often
   so the door does not go unnoticed on a quiet screen. The sweep is a short
   moment inside a long cycle — the pass finishes by 13% and the chip sits
   still for the remaining ~9.5s — which reads as an occasional glint rather
   than a blinking control. The band rides a ::after overlay so the chip's own
   text colour and hit area are untouched. Pauses on hover/focus and while the
   dialog is open; honours prefers-reduced-motion. */
@keyframes about-shimmer-sweep{
  0%   { background-position:240% 0; opacity:0; }
  2%   { opacity:1; }
  11%  { opacity:1; }
  13%  { background-position:-140% 0; opacity:0; }
  100% { background-position:-140% 0; opacity:0; }
}
.watchbar__about,.load-view__about{
  position:relative; border:0; border-radius:var(--radius-ui); box-shadow:none;
}
.watchbar__about::after,
.load-view__about::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit; opacity:0;
  background-image:linear-gradient(
    102deg,
    transparent 42%,
    color-mix(in srgb,var(--accent) 55%,transparent) 50%,
    transparent 58%
  );
  background-repeat:no-repeat;
  background-size:240% 100%;
  background-position:-140% 0;
  animation:about-shimmer-sweep 11s ease-in-out infinite;
}
/* Offset the front door's chip so the two never glint in lockstep when both
   are on screen during a view transition. */
.load-view__about,
.load-view__about::after{ animation-delay:3.5s; }

.watchbar__about:hover,.watchbar__about:focus-visible,
.load-view__about:hover,.load-view__about:focus-visible,
body[data-about-open="true"] .watchbar__about,
body[data-about-open="true"] .load-view__about,
.watchbar__about:hover::after,.watchbar__about:focus-visible::after,
.load-view__about:hover::after,.load-view__about:focus-visible::after,
body[data-about-open="true"] .watchbar__about::after,
body[data-about-open="true"] .load-view__about::after{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  .watchbar__about,.load-view__about,
  .watchbar__about::after,.load-view__about::after{ animation:none; }
  .watchbar__about::after,.load-view__about::after{ content:none; }
}

[data-project-download-draft][hidden],
[data-project-access-clear][hidden]{display:none!important;}
.community-project[data-project-local-feedback="true"]{height:auto;min-height:100px;}
[data-project-local-status]{margin:6px 0 0;font-size:12px;line-height:1.4;}
[data-project-download-draft]{margin-top:6px;}

/* Source rights stay with each object, including its selected 3D view. */
.browse-object-rights{
  position:absolute; right:12px; bottom:12px; z-index:8; width:28px; height:28px;
  display:grid; place-items:center; padding:0; border:1px solid color-mix(in srgb,var(--dim) 20%,transparent); border-radius:50%;
  background:color-mix(in srgb,var(--surface) 94%,transparent); color:var(--dim); box-shadow:0 2px 8px rgba(15,23,42,.14);
  cursor:pointer; opacity:0; transform:scale(.85); transition:opacity .15s ease,transform .15s ease,color .15s ease;
}
.browse-object-rights svg{ width:17px; height:17px; pointer-events:none; }
.browse-category-item:is(:hover,:focus-within) > .browse-object-rights,
.browse-center-stage:is(:hover,:focus-within) > .browse-object-rights,
.pfocus__object-space:is(:hover,:focus-within) > .browse-object-rights{ opacity:1; transform:none; }
.browse-object-rights:hover{ color:var(--accent-ink); }
.browse-object-rights:focus-visible{ opacity:1; transform:none; outline:2px solid var(--accent-ink); outline-offset:3px; }
.browse-category-item .browse-category-caption{ padding-right:46px; }
.browse-object-rights--center{ right:14px; bottom:14px; }
.browse-object-rights--focused{ right:20px; bottom:132px; }
.pfocus[data-browse-scatter="true"] .browse-object-rights--focused{ display:none; }
.browse-rights-dialog{
  box-sizing:border-box; width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto;
  margin:auto; padding:24px; border:1px solid var(--line); border-radius:18px;
  background:var(--surface); color:var(--ink); box-shadow:0 28px 90px rgba(15,23,42,.26); font:13px/1.55 var(--font);
}
.browse-rights-dialog::backdrop{ background:rgba(15,23,42,.42); backdrop-filter:blur(5px); }
.browse-rights-dialog > header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:18px; }
.browse-rights-dialog h2{ margin:0; font:650 20px/1.3 var(--font); }
.browse-rights-dialog header p{ margin:6px 0 0; color:var(--dim); }
.browse-rights-dialog header button{
  flex:none; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:50%;
  background:var(--raised); color:var(--ink); cursor:pointer; font:22px/1 var(--font);
}
.browse-rights-dialog__facts{ margin:0; }
.browse-rights-dialog__facts > div{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:13px 0; border-top:1px solid var(--line); }
.browse-rights-dialog__facts dt{ color:var(--dim); }
.browse-rights-dialog__facts dd{ margin:0; overflow-wrap:anywhere; }
.browse-rights-dialog__facts p{ margin:6px 0 0; color:var(--dim); font-size:12px; }
.browse-rights-dialog a{ color:var(--accent-ink); text-underline-offset:3px; }
.browse-rights-dialog :is(button,a):focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
@media(hover:none),(pointer:coarse){
  .browse-object-rights{ width:44px; height:44px; opacity:1; transform:none; }
  .browse-category-item .browse-category-caption{ padding-right:58px; }
}
@media(max-width:520px){
  .browse-rights-dialog{ padding:20px; }
  .browse-rights-dialog__facts > div{ grid-template-columns:1fr; gap:4px; }
}
@media(prefers-reduced-motion:reduce){ .browse-object-rights{ transition:none; } }

/* Print-only shops have no store: Print Here takes the whole row. */
.printer-node-expanded-actions[data-print-only]{ grid-template-columns:minmax(0,1fr); }