/* ============================================================
   SetupBoard — shared styles
   Identity: deep graphite, Fusion-360 orange → Mastercam red
   action gradient, teal precision/dimension color, machinist
   mono for every number. (--amber/--scribe names kept for
   compatibility.)
   ============================================================ */
:root{
  /* the expanded Tools panel — wide enough for the library + cutting-data table side by side */
  --tools-panel-w:min(1340px,88vw);
  /* —— refreshed cool-steel graphite ramp (deeper bg, cleaner elevation) —— */
  --bg:#05070d;
  --bg-deep:#02030a;
  --panel:#0a0e18;        /* elevation 1 — bars, sections */
  --panel-2:#111726;      /* elevation 2 — cards */
  --panel-3:#171f31;      /* elevation 3 — nested cards / inputs (new) */
  --line:#1d2638;         /* visible hairline border */
  --line-soft:#141b29;    /* faint divider */
  --text:#f3f5f8;
  --text-dim:#9aa5b8;
  --text-faint:#606c80;
  /* —— brand accents (identity kept: Fusion orange → Mastercam red, teal precision) —— */
  --amber:#ff6b0f;
  --amber-hi:#ff9046;
  --amber-dim:rgba(255,107,15,.13);
  --mcred:#d9252b;
  --mcred-dim:rgba(217,37,43,.12);
  --scribe:#1ad4e2;
  --scribe-dim:rgba(26,212,226,.13);
  --green:#41c97c;
  --red:#ff5d5d;
  --grad-action:linear-gradient(135deg,var(--amber) 0%,var(--mcred) 100%);
  /* —— radius scale —— */
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:22px;
  --radius:12px;          /* legacy alias */
  /* —— elevation + glow —— */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 24px rgba(0,0,0,.45);
  --sh-3:0 22px 50px rgba(0,0,0,.55);
  --glow-amber:0 0 24px rgba(255,107,15,.32);
  --glow-scribe:0 0 22px rgba(26,212,226,.28);
  /* —— type —— */
  --font-display:'Space Grotesk',sans-serif;
  --font-brand:'Tomorrow',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-data:'JetBrains Mono','IBM Plex Mono',monospace; /* refined numeric/technical accent */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.5}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:inherit;color:var(--text)}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--scribe);outline-offset:2px}
::selection{background:var(--amber);color:#1a0e02}

/* ---------- nav ---------- */
/* Floating glass pill: detached from the edges, rounded, blurred; it strengthens
   on scroll (.scrolled, toggled in i18n.js). */
.nav{
  position:sticky;top:12px;z-index:60;
  display:flex;align-items:center;gap:26px;
  width:calc(100% - 32px);max-width:1320px;margin:12px auto 0;
  padding:11px 12px 11px 20px;border-radius:16px;
  border:1px solid var(--line);
  background:rgba(10,14,24,.38);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
/* The creator (app.html) has a busy toolbar nav — keep it full-width, not a pill. */
.app-body .nav{
  width:100%;max-width:none;margin:0;top:0;border-radius:0;
  border:0;border-bottom:1px solid var(--line);
  padding:12px 20px;box-shadow:0 1px 0 rgba(255,255,255,.03);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-brand)}
.brand .logo{display:block;flex-shrink:0;filter:drop-shadow(0 0 7px rgba(255,107,15,.3))}
.brand .name{font-weight:600;font-style:italic;font-size:19px;letter-spacing:-.02em;color:var(--text)}
.brand .name em{font-weight:600;font-style:italic;color:var(--text)}
.brand .tag{font-size:10px;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:8px}
.nav-links a{font-size:13.5px;color:var(--text-dim);font-weight:500;transition:color .15s;white-space:nowrap}
.nav-links a:hover,.nav-links a.here{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:13px}
/* group the language switcher with the right-side actions, divided by a hairline */
.nav-cta>.lang-switch{padding-right:13px;border-right:1px solid var(--line)}

/* products dropdown */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop-btn{font-family:inherit;font-size:13.5px;color:var(--text-dim);font-weight:500;display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:color .15s}
.nav-drop-btn:hover,.nav-drop:hover .nav-drop-btn,.nav-drop:focus-within .nav-drop-btn{color:var(--text)}
.nav-drop-btn .caret{font-size:9px;opacity:.7;transition:transform .16s}
.nav-drop:hover .nav-drop-btn .caret,.nav-drop:focus-within .nav-drop-btn .caret{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute;top:calc(100% + 9px);left:-14px;min-width:210px;
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:rgba(13,18,28,.97);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.nav-drop-menu::before{content:'';position:absolute;top:-9px;left:0;right:0;height:9px}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* Click/tap toggle (js/nav.js): .open mirrors aria-expanded. In the marketing nav the menu
   no longer opens on focus alone — click/Enter toggles it — so click-close works while the
   button is still focused. App-page drops (.app-drop) keep pure hover/focus-within. */
.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-links .nav-drop:not(.open):not(:hover) .nav-drop-menu{opacity:0;visibility:hidden;transform:translateY(-6px)}
.nav-drop-menu a{display:block;padding:9px 11px;border-radius:8px;font-size:13.5px;color:var(--text-dim);font-weight:600;transition:background .14s,color .14s}
.nav-drop-menu a:hover{background:rgba(255,107,15,.1);color:var(--text)}
.nav-drop-menu a small{display:block;font-size:11px;color:var(--text-faint);font-weight:400;margin-top:2px;font-family:var(--font-mono);letter-spacing:.02em}

/* ---------- mobile hamburger + slide-down panel (built by js/nav.js) ---------- */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--text);cursor:pointer;flex-shrink:0}
.nav-burger span{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav-burger span{transition:none}}
.nav-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;display:none;
  background:#0d0e10;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 44px rgba(0,0,0,.5);padding:14px 16px 16px;
  max-height:calc(100vh - 96px);overflow-y:auto}
.nav-panel.open{display:block}
.nav-panel .np-cta{display:flex;justify-content:center;margin-bottom:12px}
.np-group{border-top:1px solid var(--line);padding:5px 0;margin-top:5px}
.nav-panel>.np-group:first-child,.nav-panel .np-cta+.np-group{border-top:0;margin-top:0}
.np-link{display:block;padding:11px 6px;font-size:15px;font-weight:500;color:var(--text)}
.np-link small{display:block;font-size:11px;font-weight:400;color:var(--text-faint);
  font-family:var(--font-mono);letter-spacing:.02em;margin-top:2px}
.np-link:hover,.np-link.here{color:#fff}
.np-lang{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.np-lang button{font-family:inherit;font-size:13px;padding:8px 16px;border:1px solid var(--line);
  border-radius:9px;background:transparent;color:var(--text-dim);cursor:pointer}
.np-lang button[aria-current="true"]{color:var(--text);border-color:var(--amber)}
/* Nothing in the nav may wrap: at 881-1100px "About us", "Contact us" and "Log in"
   each broke onto two lines and "Open the creator" was clipped off the right edge
   (Rufus, 2026-09-12). nowrap alone would only turn wrapping into overflow, so the
   881-1100 band also drops the amber CTA + language switch — exactly what the <=520px
   rule already does — and tightens the link gap. The hero's own "Upload a STEP file"
   button covers the CTA in that range, and language lives in the hamburger panel. */
.nav-links a,.nav-drop-btn,.nav-cta a,.nav-cta button,#auth-slot .btn{white-space:nowrap}
/* Measured: the full nav (6 links + EN + Log in + CTA) needs ~1200px. At 1130px the amber
   CTA was still clipped, so it drops first; the language switch survives to 1100px. */
@media (max-width:1200px){
  .nav .nav-cta>a.btn-amber{display:none}
}
@media (max-width:1100px){
  .nav-links{gap:15px}
  /* NOTE: do NOT hide .lang-switch here. The hamburger — which carries the language
     options in its panel — only appears at <=880px, so hiding the switch at 1100px left
     881-1100px (i.e. a landscape tablet) with no way to change language at all.
     It is hidden at <=520px instead, where the hamburger definitely exists. */
}
@media (max-width:880px){.nav-burger{display:flex}}
@media (min-width:881px){.nav-panel{display:none!important}}

/* language selector */
.lang-switch{position:relative;display:inline-flex;align-items:center}
.lang-btn{font-family:inherit;font-size:13px;font-weight:600;color:var(--text-dim);display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.02);transition:color .15s,border-color .15s}
.lang-btn:hover,.lang-switch.open .lang-btn{color:var(--text);border-color:var(--text-faint)}
.lang-btn svg{opacity:.82;flex-shrink:0}
.lang-btn .lang-cur{letter-spacing:.04em}
.lang-btn .caret{font-size:9px;opacity:.7;transition:transform .16s}
.lang-switch.open .lang-btn .caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:152px;
  display:flex;flex-direction:column;gap:2px;padding:7px;
  background:rgba(13,18,28,.97);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:60;
}
.lang-menu::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px}
.lang-switch.open .lang-menu,.lang-switch:hover .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu button{font-family:inherit;text-align:left;padding:8px 11px;border-radius:8px;font-size:13.5px;color:var(--text-dim);font-weight:600;cursor:pointer;background:none;border:none;transition:background .14s,color .14s}
.lang-menu button:hover{background:rgba(255,107,15,.1);color:var(--text)}
.lang-menu button[aria-current="true"]{color:var(--amber)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:-.01em;
  padding:10px 20px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.3,.5,1),box-shadow .15s,background .15s,color .15s,border-color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-amber{
  background:var(--grad-action);color:#fff;
  box-shadow:var(--glow-amber),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-amber:hover{
  background:linear-gradient(135deg,var(--amber-hi) 0%,var(--amber) 100%);
  box-shadow:0 0 30px rgba(255,107,15,.5),inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(-1px);
}
.btn-line{border-color:rgba(176,192,214,.30);color:var(--text);background:rgba(255,255,255,.025)}
.btn-line:hover{color:var(--text);border-color:var(--scribe);background:var(--scribe-dim);transform:translateY(-1px)}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:var(--r-sm)}

/* ============================================================
   LANDING
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  min-height:78vh;display:flex;align-items:flex-start;
  border-bottom:1px solid var(--line);
}
/* quiet shop-dark backdrop: faint machined grid + a single warm glow */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 460px at 76% 22%,rgba(255,107,15,.07) 0%,transparent 62%),
    radial-gradient(700px 480px at 10% 88%,rgba(217,37,43,.05) 0%,transparent 62%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(151,161,179,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(151,161,179,.045) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 60%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 60%,#000 0%,transparent 72%);
}
#hero-canvas-sheet{cursor:grab}
.nowrap{white-space:nowrap}
.hero-hint{
  position:absolute;right:26px;bottom:18px;z-index:2;display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-faint);
  pointer-events:none;
}
.hero-hint .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);animation:hintPulse 1.8s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-hint .dot{animation:none}}
@media (max-width:880px){
  .hero-hint{display:none}
}
h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-.015em;margin-bottom:20px;
}
h1 .grad{
  background:linear-gradient(95deg,var(--scribe) 0%,var(--amber) 62%,var(--mcred) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* portal cards */
.portals{max-width:1180px;margin:0 auto;padding:72px 28px}
.section-head{margin-bottom:34px;max-width:600px}
.section-head h2{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.section-head p{color:var(--text-dim)}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.portal{
  position:relative;display:block;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,var(--panel) 0%,var(--bg-deep) 100%);
  overflow:hidden;transition:border-color .2s, transform .25s;
}
.portal:hover{border-color:var(--amber);transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 24px rgba(255,107,15,.16)}
.portal canvas{display:block;width:100%;height:240px;touch-action:none}
.portal h3{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:6px}
.portal p{font-size:13.5px;color:var(--text-dim);line-height:1.55}
.portal .go{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);font-size:16px;background:rgba(7,11,20,.7);transition:all .2s;
}
.portal:hover .go{background:var(--amber);color:#1a0e02;border-color:var(--amber);transform:rotate(45deg)}

/* how it works */
.how{border-top:1px solid var(--line);background:var(--bg-deep)}
.how-inner{max-width:1180px;margin:0 auto;padding:72px 28px}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.how-step{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--panel)}
.how-step .n{
  font-family:var(--font-mono);font-size:12px;color:var(--amber);
  border:1px solid var(--amber);border-radius:6px;padding:3px 9px;display:inline-block;margin-bottom:14px;
}
.how-step h3{font-family:var(--font-display);font-size:17px;margin-bottom:8px}
.how-step p{font-size:13.5px;color:var(--text-dim)}
.how-step .mono{font-family:var(--font-mono);color:var(--scribe);font-size:12.5px}

/* pricing */
.pricing-inner{max-width:980px;margin:0 auto;padding:72px 28px}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.price-card{border:1px solid var(--line);border-radius:16px;padding:28px;background:var(--panel);position:relative}
.price-card.featured{border-color:var(--amber)}
.price-card .badge{
  position:absolute;top:-11px;left:24px;background:var(--amber);color:#1a0e02;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 10px;border-radius:99px;font-weight:600;
}
.price-card h3{font-family:var(--font-display);font-size:18px;margin-bottom:4px}
.price-card .price{font-family:var(--font-mono);font-size:34px;font-weight:600;margin:14px 0 4px}
.price-card .price span{font-size:13px;color:var(--text-faint);font-weight:400}
.price-card ul{list-style:none;margin:18px 0 22px;display:grid;gap:9px}
.price-card li{font-size:13.5px;color:var(--text-dim);padding-left:22px;position:relative}
.price-card li::before{content:"—";position:absolute;left:0;color:var(--amber)}
.price-note{margin-top:18px;font-size:12.5px;color:var(--text-faint);font-family:var(--font-mono)}

footer{position:relative;border-top:0;padding:36px 30px 30px;display:flex;gap:16px 22px;align-items:center;flex-wrap:wrap}
footer .fnote{font-size:12px;color:var(--text-faint);font-family:var(--font-mono)}
footer .fnote b{color:var(--text-dim)}
footer .flinks{display:flex;gap:22px;font-size:11.5px;font-family:var(--font-data,var(--font-mono));text-transform:uppercase;letter-spacing:.06em}
footer .flinks a{position:relative;color:#8a857a;transition:color .18s}
footer .flinks a:hover{color:var(--text)}
footer .fcopy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:10.5px;color:#fff;font-family:var(--font-mono);letter-spacing:.02em;white-space:nowrap}
/* Phones: .fcopy is absolutely centred in the footer, which only works while the brand and the
   links sit comfortably either side of it. Below ~720px the three collide into one crushed line
   (Rufus, 2026-09-12). Drop it back into normal flow and stack the footer centred. */
@media (max-width:720px){
  footer{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:30px 20px 26px}
  footer .flinks{margin-left:0 !important;gap:20px;justify-content:center}
  footer .fcopy{position:static;transform:none;white-space:normal;order:3;line-height:1.5}
}

/* ---------- legal / content pages ---------- */
.legal{max-width:820px;margin:0 auto;padding:56px 28px 84px}
.legal h1{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.015em;margin-bottom:8px}
.legal .updated{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);margin-bottom:18px}
.legal .disclaimer{background:var(--amber-dim);border:1px solid rgba(255,107,15,.3);border-radius:10px;padding:13px 16px;font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:30px}
.legal h2{font-family:var(--font-display);font-size:19px;font-weight:600;margin:30px 0 10px}
.legal p{color:var(--text-dim);font-size:14.5px;line-height:1.7;margin-bottom:12px}
.legal ul{margin:0 0 12px 22px;color:var(--text-dim);font-size:14.5px;line-height:1.7}
.legal li{margin-bottom:6px}
.legal a{color:var(--scribe)}
.legal a:hover{text-decoration:underline}

/* ============================================================
   APP (setup sheet creator)
   ============================================================ */
.app-body{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.app-main{display:flex;flex:1;min-height:0}
#viewport{position:relative;flex:1;min-width:0;background:radial-gradient(1100px 650px at 50% 30%,#0d1526 0%,var(--bg) 72%)}
#viewport canvas{display:block;touch-action:none}
#overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* drop zone — the creator's empty state (premium + animated) */
#dropzone{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(4,7,14,.55);backdrop-filter:blur(2px);overflow:hidden;transition:background .25s}
#dropzone.hidden{display:none}

.dz-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:28px;padding:20px}

/* the card */
/* the empty-state content scales with the viewport height so it never clips on
   short/scaled screens (1080p, OS display scaling); scrolls only as a last resort. */
.dz-content{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2vh,22px);
  width:100%;max-height:calc(100% - 20px);overflow-y:auto;padding:6px 0;
  scrollbar-width:thin}
.dz-content::-webkit-scrollbar{width:7px}
.dz-content::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.drop-card{position:relative;width:min(650px,94vw);border-radius:22px;padding:clamp(18px,2.6vh,34px) clamp(22px,3vw,40px);text-align:center;
  background:linear-gradient(180deg,rgba(20,26,40,.82),rgba(11,15,23,.88));border:1px solid rgba(125,155,205,.16);
  box-shadow:0 26px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(8px);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.dz-cardglow{position:absolute;inset:-2px;border-radius:24px;z-index:-1;pointer-events:none;background:radial-gradient(62% 64% at 50% 38%,rgba(255,107,15,.2),transparent 70%);filter:blur(11px);animation:dzCardGlow 5s ease-in-out infinite}
.drop-card .mono{font-family:var(--font-mono);color:var(--scribe)}
.drop-card h2{font-family:var(--font-display);font-weight:600;font-size:22px;margin-bottom:9px;color:var(--text)}
.dz-lead{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0 auto 22px;max-width:370px}
.dz-actions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.dz-browse{font-size:14px;padding:11px 26px;box-shadow:0 10px 26px rgba(255,107,15,.3)}
.dz-browse:hover{transform:translateY(-1px)}
.dz-sample{font-size:13.5px;padding:11px 18px;display:inline-flex;align-items:center;gap:7px}
.dz-sample svg{flex:none;opacity:.9}
.dz-sample[disabled]{opacity:.6;cursor:progress;pointer-events:none}
.dz-note{margin-top:18px;font-size:11px;color:var(--text-faint);font-family:var(--font-mono);line-height:1.65;max-width:340px;margin-left:auto;margin-right:auto}

/* the interactive 3D vise hero (rendered by js/app.js into the canvas) */
.dz-vise{position:relative;width:100%;height:clamp(170px,27vh,380px);margin:0 auto 14px}
#dz-vise-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#dz-vise-canvas:active{cursor:grabbing}
.dz-vise-hint{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--text-faint);pointer-events:none;display:flex;align-items:center;gap:6px;white-space:nowrap;opacity:.85;transition:opacity .3s}
.dz-vise-hint::before{content:"⇆";color:var(--scribe);font-size:12px}
.dz-vise.grabbed .dz-vise-hint{opacity:0}

/* drag-over state */
#dropzone.drag{background:rgba(4,7,14,.72)}
#dropzone.drag .drop-card{border-color:var(--amber);transform:scale(1.015);box-shadow:0 26px 80px rgba(0,0,0,.55),0 0 0 1px var(--amber),0 0 46px rgba(255,107,15,.32)}
#dropzone.drag .dz-cardglow{animation:none;opacity:1}
.dz-release{position:absolute;bottom:40px;left:50%;transform:translate(-50%,12px);opacity:0;transition:opacity .25s,transform .25s;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--amber);background:rgba(255,107,15,.1);border:1px solid rgba(255,107,15,.4);border-radius:20px;padding:8px 16px;pointer-events:none}
#dropzone.drag .dz-release{opacity:1;transform:translate(-50%,0)}

@keyframes dzCardGlow{0%,100%{opacity:.45}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){#dropzone .dz-cardglow{animation:none!important}}

#loading{
  position:absolute;inset:0;z-index:25;display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;background:rgba(4,7,14,.78);
}
#loading.show{display:flex}
.spinner{width:42px;height:42px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--amber);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.5s}}
#loading p{font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);letter-spacing:.06em}

/* setup rail (multi-setup switcher) */
#setup-rail{position:absolute;top:0;left:0;right:0;z-index:16;display:none;align-items:center;gap:7px;height:46px;padding:0 12px;background:rgba(7,11,20,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden}
.setup-chip{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;height:32px;padding:0 8px 0 11px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-dim);cursor:pointer;transition:all .15s;font-size:12.5px;white-space:nowrap}
.setup-chip:hover{color:var(--text);border-color:var(--text-faint)}
.setup-chip.on{border-color:var(--amber);background:var(--amber-dim);color:var(--text)}
.setup-chip .sc-n{font-family:var(--font-mono);font-weight:600;color:var(--amber)}
.setup-chip .sc-f{max-width:120px;overflow:hidden;text-overflow:ellipsis;color:var(--text-faint)}
.setup-chip.on .sc-f{color:var(--text-dim)}
.setup-chip .sc-x{font-size:11px;color:var(--text-faint);width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}
.setup-chip .sc-x:hover{background:var(--red);color:#fff}
.setup-add{flex-shrink:0;height:32px;padding:0 12px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--text-dim);cursor:pointer;font-size:12.5px;font-weight:500;transition:all .15s}
.setup-add:hover{border-color:var(--amber);color:var(--amber)}
.setup-count{flex-shrink:0;font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.rail-import{display:inline-flex;align-items:center;gap:7px;margin-left:auto;flex-shrink:0}
.rail-info{width:21px;height:21px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text-faint);cursor:help;transition:color .15s,border-color .15s,background .15s,transform .15s}
.rail-info:hover{color:var(--scribe);border-color:var(--scribe);background:var(--scribe-dim);transform:scale(1.12)}
.setup-import{flex-shrink:0;height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--scribe);background:var(--scribe-dim);color:var(--scribe);cursor:pointer;font-size:12.5px;font-weight:600;transition:all .15s}
.setup-import:hover{background:var(--scribe);color:#04181b;box-shadow:0 4px 14px rgba(25,211,224,.3)}
/* animated explainer popover */
.import-tip{position:fixed;z-index:60;width:282px;padding:14px 15px 13px;border-radius:13px;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,26,44,.98),rgba(10,15,26,.98));border:1px solid var(--scribe);
  box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 0 1px rgba(25,211,224,.12);backdrop-filter:blur(9px);
  opacity:0;transform:translateY(-9px) scale(.96);transform-origin:top center;
  transition:opacity .2s ease,transform .28s cubic-bezier(.34,1.45,.5,1)}
.import-tip.show{opacity:1;transform:translateY(0) scale(1)}
.import-tip .it-arrow{position:absolute;top:-6px;width:11px;height:11px;background:rgba(17,26,44,.98);border-left:1px solid var(--scribe);border-top:1px solid var(--scribe);transform:rotate(45deg)}
.import-tip .it-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.import-tip .it-head b{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text)}
.import-tip .it-ico{width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;border-radius:7px;background:linear-gradient(135deg,#19d3e0,#1f6feb);color:#04181b;font-size:14px;font-weight:700}
.import-tip p{font-size:12.5px;line-height:1.55;color:var(--text-dim);margin:0 0 11px}
.import-tip .it-tags{display:flex;gap:6px}
.import-tip .it-tags span{font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;color:var(--scribe);background:rgba(25,211,224,.1);border:1px solid rgba(25,211,224,.32);border-radius:20px;padding:3px 9px}
/* Save-button autosave dropdown — green cloud accent + a live On/Off status row and ✓/● legend */
.save-tip{width:290px;border-color:rgba(63,214,108,.5);box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 0 1px rgba(63,214,108,.12)}
.save-tip.show{pointer-events:auto}          /* interactive: hover it + flip the switch */
.save-tip p{font-size:13.5px;margin-bottom:10px}
.save-tip .it-head b{font-size:15px}
.save-tip .it-arrow{border-left-color:rgba(63,214,108,.5);border-top-color:rgba(63,214,108,.5)}
.save-tip .it-ico{background:linear-gradient(135deg,#3fd66c,#1f9d4f);color:#04160a}
.save-tip .st-toggle{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:4px 0;margin:0 0 10px;cursor:pointer;font:inherit;text-align:left}
.save-tip .st-sw{position:relative;width:34px;height:19px;border-radius:10px;background:var(--text-faint);transition:background .16s;flex-shrink:0}
.save-tip .st-toggle[aria-checked="true"] .st-sw{background:#3fd66c;box-shadow:0 0 0 3px rgba(63,214,108,.16)}
.save-tip .st-sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .16s;box-shadow:0 1px 3px rgba(0,0,0,.45)}
.save-tip .st-toggle[aria-checked="true"] .st-sw::after{transform:translateX(15px)}
.save-tip .st-tlabel{font-family:var(--font-data,var(--font-mono));font-size:12.5px;letter-spacing:.02em;color:var(--text-dim)}
.save-tip .st-tlabel b{color:var(--text)}
.save-tip .st-toggle:hover .st-tlabel b{color:#3fd66c}
.save-tip .st-legend{display:flex;gap:15px;font-size:11.5px;color:var(--text-dim)}
.save-tip .st-legend span{display:flex;align-items:center;gap:5px}
.save-tip .st-ok{color:#3fd66c;font-size:12px}
.save-tip .st-dirty{color:var(--amber);font-size:11px}
/* ---- Import-job review modal (reuses .pdfx overlay) ---- */
.jobx-panel{max-width:680px;width:94vw;display:flex;flex-direction:column;max-height:90vh}
.jobx-body{overflow-y:auto;padding:16px 20px}
.jobx-found{font-size:13px;color:var(--text-dim);margin-bottom:14px}
.jobx-found b{color:var(--text)}
.jobx-opts{display:flex;flex-direction:column;gap:7px;margin-bottom:6px}
.jobx-opts label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);cursor:pointer}
.jobx-opts input{accent-color:var(--amber);width:15px;height:15px;cursor:pointer}
.jobx-note{font-size:12.5px;color:var(--amber);background:var(--panel-2);border:1px solid var(--line-soft);border-radius:8px;padding:9px 11px;margin:10px 0}
.jobx-srow,.jobx-trow{display:flex;align-items:center;gap:10px;padding:6px 0}
.jobx-sn{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--text)}
.jobx-sn small,.jobx-tdesc small{display:block;font-weight:400;font-size:11px;color:var(--text-faint);font-family:var(--font-mono)}
.jobx-arr{color:var(--text-faint)}
.jobx-srow select,.jobx-trow select{flex:1;min-width:0;appearance:none;-webkit-appearance:none;
  background:var(--panel-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa5b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center/10px;
  color:var(--text);border:1px solid var(--line-soft);border-radius:8px;padding:8px 32px 8px 12px;
  font-size:12.5px;font-family:var(--font-mono);cursor:pointer;transition:border-color .15s,background-color .15s}
.jobx-srow select:hover,.jobx-trow select:hover{border-color:#3d4a5c}
.jobx-srow select:focus,.jobx-trow select:focus{outline:none;border-color:var(--scribe);box-shadow:0 0 0 2px rgba(25,211,224,.14)}
.jobx-tnum{flex:0 0 30px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--amber)}
.jobx-tdesc{flex:0 0 200px;font-size:12.5px;color:var(--text);overflow:hidden}

/* Import job — summary-first redesign: plan card, disclosures, triage rails + pills */
.jobx-panel{max-width:1000px;height:auto;max-height:92vh}
.jobx-panel .jobx-body{flex:1 1 auto;min-height:0}
.jobx-plan{background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:10px;
  padding:11px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.jobx-pl{font-size:13px;color:var(--text);padding-left:16px;position:relative;line-height:1.45}
.jobx-pl::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--scribe)}
.jobx-pl.pl-dim{color:var(--text-dim)}
.jobx-pl.pl-dim::before{background:#4a5568}
.jobx-pl.pl-warn::before{background:var(--amber)}
.jobx-pl.pl-miss{color:#b3bdca}
.jobx-pl.pl-miss::before{background:#d9252b}
/* tool picker popover — search-first replacement for the raw option wall */
.jobx-pick{position:fixed;z-index:2147483000;width:470px;max-height:420px;display:flex;flex-direction:column;
  background:var(--panel-2);border:1px solid #333c4c;border-radius:12px;box-shadow:0 22px 60px rgba(0,0,0,.6);
  padding:10px;gap:8px}
.jp-search{background:var(--panel-3);border:1px solid var(--line-soft);border-radius:8px;color:var(--text);
  font:500 13px var(--font-mono);padding:8px 11px;outline:none}
.jp-search:focus{border-color:var(--scribe);box-shadow:0 0 0 2px rgba(25,211,224,.14)}
.jp-quick{display:flex;gap:8px}
.jp-q{flex:1;background:var(--panel-3);border:1px solid var(--line-soft);border-radius:8px;cursor:pointer;
  font:600 12px var(--font-mono);padding:7px 10px;transition:border-color .15s,color .15s}
.jp-add{color:var(--amber)} .jp-add:hover,.jp-add.on{border-color:var(--amber)}
.jp-skip{color:var(--text-dim)} .jp-skip:hover,.jp-skip.on{border-color:#d9252b;color:#e05a5f}
.jp-list{overflow-y:auto;display:flex;flex-direction:column;gap:2px;min-height:0}
.jp-gh{font-family:var(--font-data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8d99ab;
  padding:8px 6px 4px;position:sticky;top:0;background:var(--panel-2);z-index:1}
.jp-row{display:flex;align-items:center;gap:10px;padding:7px 8px;background:none;border:0;border-radius:8px;
  cursor:pointer;text-align:left;width:100%;color:var(--text)}
.jp-row:hover{background:rgba(255,255,255,.05)}
.jp-row.on{background:rgba(25,211,224,.08);box-shadow:inset 3px 0 0 var(--scribe)}
.jp-tn{flex:0 0 34px;font:700 12px var(--font-mono);color:var(--amber)}
.jp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.jp-desc{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-lib{font:400 10.5px var(--font-mono);color:#8d99ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-dia{flex:0 0 auto;font:600 12px var(--font-mono);color:var(--scribe)}
.jp-none{padding:14px;text-align:center;color:var(--text-dim);font-size:12.5px}
/* quick-skip toggle on each tool row */
.jobx-skipb{flex:0 0 auto;background:none;border:0;color:#77839a;cursor:pointer;padding:3px;border-radius:6px;
  display:inline-flex;align-items:center;transition:color .15s}
.jobx-skipb:hover{color:#e05a5f}
.jobx-skipb.on{color:#e05a5f}
.jobx-disc{border:1px solid var(--line-soft);border-radius:10px;margin:0 0 10px}
.jobx-disc>summary{cursor:pointer;list-style:none;padding:10px 14px;font-family:var(--font-data);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
  display:flex;gap:8px;align-items:center;user-select:none}
.jobx-disc>summary::-webkit-details-marker{display:none}
.jobx-disc>summary::before{content:"▸";transition:transform .15s;color:var(--text-faint)}
.jobx-disc[open]>summary::before{transform:rotate(90deg)}
.jobx-cnt{color:var(--text-dim);text-transform:none;letter-spacing:0;font-size:12px;font-family:var(--font-mono)}
.jobx-disc>.jobx-hint,.jobx-disc>.jobx-setups,.jobx-disc>.jobx-tools,.jobx-disc>.jobx-opts{margin:0 14px 12px}
.jobx-sub{border:none;margin:8px 0 0}
.jobx-sub>summary{padding:6px 0;color:var(--text-dim);text-transform:none;letter-spacing:.02em;font-size:12px}
.jobx-hint{font-size:12px;color:var(--text-dim);margin:2px 14px 8px}
.jobx-gh{position:sticky;top:0;z-index:1;background:var(--panel);font-family:var(--font-data);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);
  padding:8px 0 6px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.jobx-bulk{color:var(--text-faint);white-space:nowrap}
.jobx-bulk button{background:none;border:none;color:var(--amber);cursor:pointer;font:inherit;
  letter-spacing:inherit;text-transform:inherit;padding:0}
.jobx-bulk button:hover{text-decoration:underline}
.jobx-trow{border-left:3px solid transparent;border-radius:0 6px 6px 0;padding:7px 8px}
.jobx-trow.is-match{border-left-color:var(--scribe)}
.jobx-trow.is-add{border-left-color:var(--amber)}
.jobx-trow.is-check{border-left-style:dashed;border-left-color:var(--amber)}
.jobx-trow.is-skip,.jobx-srow.is-skip{border-left:3px dashed #3a4150;opacity:.35}
.jobx-pill{flex:0 0 auto;font-family:var(--font-data);font-size:10px;letter-spacing:.1em;
  padding:2px 7px;border-radius:99px;border:1px solid var(--text-dim);color:var(--text-dim)}
.is-match .jobx-pill{color:var(--scribe);border-color:var(--scribe)}
.is-add .jobx-pill{color:var(--amber);border-color:var(--amber)}
.is-check .jobx-pill{color:var(--amber);border-color:var(--amber);background:rgba(255,158,26,.12)}
.jobx-res{font-family:var(--font-mono);font-size:12px;color:var(--scribe);margin-left:auto;
  max-width:470px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jobx-why{display:block;font-size:11px;color:var(--amber);opacity:.8;font-family:var(--font-mono)}
.jobx-edit{flex:0 0 auto;background:none;border:none;color:var(--text-dim);cursor:pointer;
  font-size:12px;text-decoration:underline;text-underline-offset:2px;padding:0}
.jobx-edit:hover{color:var(--text)}
.jobx-trow select{display:none}
.jobx-trow.editing select{display:block}
.jobx-trow.editing .jobx-res,.jobx-trow.editing .jobx-edit{display:none}
.jobx-sn{flex:0 0 190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobx-panel .btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
/* learn cards — narration-language badge on each walkthrough video */
.ls-media{position:relative}
.lv-lang{position:absolute;top:10px;right:10px;z-index:3;cursor:default;
  font-family:var(--font-data);font-size:10px;font-weight:600;letter-spacing:.14em;
  color:#c9d2de;background:rgba(9,13,23,.85);border:1px solid #333c4c;border-radius:6px;
  padding:3px 7px;backdrop-filter:blur(3px)}
.lv-lang::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;width:250px;
  background:var(--panel-2);border:1px solid #333c4c;border-radius:9px;padding:9px 11px;
  font-family:var(--font-body,inherit);font-size:12px;font-weight:400;letter-spacing:0;line-height:1.5;
  color:#c2ccd9;text-transform:none;box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s,transform .15s}
.lv-lang:hover::after{opacity:1;transform:translateY(0)}
/* readability pass — the faint grays were illegible in this dense modal (Rufus):
   secondary text steps up one tone, controls read near-full */
.jobx-found{color:#c6cedb}
.jobx-disc>summary{color:#c9d2de;font-size:11.5px}
.jobx-cnt{color:#c6cedb}
.jobx-hint{color:#c2ccd9;font-size:12.5px}
.jobx-pl.pl-dim{color:#b3bdca}
.jobx-gh{color:#8d99ab}
.jobx-tdesc small{color:var(--text-dim)}
.jobx-opts label{color:#d6dce4}

/* viewport HUD */
.hud-tl{position:absolute;top:56px;left:12px;display:flex;gap:6px;flex-wrap:wrap;max-width:62%;z-index:10}
.hud-tr{position:absolute;top:56px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:10}
/* one cohesive glass panel: cube + rotate arrows + home bar + view buttons.
   Instrument-cluster look: ONE segmented grid + hairline dividers instead of
   a stack of individually-bordered pills. */
/* View-cube panel — Claude-Design instrument card: one 216px glass card with a
   cube stage + soft glow, HOME/SET HOME row, an orange-active view grid, and the
   Mouse-controls / Rotate-around / Background options. */
.vcube-panel{width:216px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#1a2030 0%,#12161f 100%);
  border:1px solid #2a3243;border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05)}
.vcube-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(140,190,220,.35),transparent)}
/* cube stage: the live WebGL cube centered over a soft radial glow */
.vcube{position:relative;width:100%;height:192px;display:grid;place-items:center;
  background:radial-gradient(90% 80% at 50% 42%,rgba(90,140,175,.16) 0%,rgba(90,140,175,0) 62%)}
#vcube-canvas{position:relative;width:128px;height:128px;display:block;cursor:grab;touch-action:none;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
#vcube-canvas:active{cursor:grabbing}
/* Fusion-style rotate arrows: invisible until the cube is hovered, then quiet round ghosts */
.vc-arrow{position:absolute;width:26px;height:26px;display:grid;place-items:center;padding:0;
  background:rgba(20,28,46,.85);border:0;border-radius:50%;color:#c3ccd9;
  cursor:pointer;opacity:0;transition:opacity .18s,color .14s,background .14s,transform .12s,box-shadow .16s}
.vc-arrow svg{width:11px;height:11px;fill:currentColor;display:block}
.vcube:hover .vc-arrow,.vc-arrow:focus-visible{opacity:.92}
.vc-arrow:hover{opacity:1;color:#f6ab55;background:rgba(255,107,15,.16);box-shadow:0 0 12px rgba(255,107,15,.3);transform:scale(1.12)}
.vc-arrow:active{transform:scale(.94)}
.vc-up{top:2px;left:95px}
.vc-down{bottom:2px;left:95px}.vc-down svg{transform:rotate(180deg)}
.vc-left{left:5px;top:83px}.vc-left svg{transform:rotate(-90deg)}
.vc-right{right:5px;top:83px}.vc-right svg{transform:rotate(90deg)}
/* hairline section dividers (the design's inset rules) */
.vc-div{height:1px;margin:0 14px;background:linear-gradient(90deg,transparent,#2c3547 20%,#2c3547 80%,transparent)}
/* HOME / SET HOME row */
.vcube-bar{display:flex;align-items:stretch;gap:8px;padding:9px 10px 9px}
.vcube-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 0;position:relative;
  background:transparent;border:1px solid transparent;color:#c3ccd9;white-space:nowrap;
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  transition:color .15s,background .15s,box-shadow .2s;border-radius:6px}
.vcube-act svg{width:14px;height:14px;flex:none}
.vcube-act:hover{color:#fff}
#vc-set:hover{color:#f6ab55}
.vc-vdiv{width:1px;flex:none;background:linear-gradient(180deg,transparent,#2c3547 30%,#2c3547 70%,transparent)}
.vcube-act.nudge{color:var(--amber);animation:vcNudge 1.5s ease-out 3}
@keyframes vcNudge{0%,100%{box-shadow:0 0 0 0 rgba(255,107,15,0)}45%{box-shadow:0 0 0 5px rgba(255,107,15,.22)}}
/* view grid: 8 cells, orange-active */
.vcube-views{display:grid;grid-template-columns:1fr 1fr;margin:2px 14px 12px;
  border:1px solid #333d50;border-radius:9px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04)}
/* options row */
.vc-opts{display:flex;flex-direction:column;gap:2px;padding:10px 14px 12px}
.vcube-ctrls{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 0;
  background:transparent;border:0;border-radius:6px;color:#c3ccd9;
  font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:color .15s,background .15s}
.vcube-ctrls svg{width:15px;height:15px;flex:none}
.vcube-ctrls:hover{background:#1b2130;color:#fff}
.chip{
  padding:7px 12px;border-radius:8px;font-size:12.5px;font-weight:500;
  background:rgba(13,20,36,.9);border:1px solid var(--line);color:var(--text-dim);
  backdrop-filter:blur(4px);display:inline-flex;align-items:center;gap:7px;transition:all .15s;
}
.chip:hover{color:var(--text)}
.chip.armed-note{border-color:var(--amber);color:var(--amber);background:var(--amber-dim)}
.chip.armed-dim{border-color:var(--scribe);color:var(--scribe);background:var(--scribe-dim)}
.chip.on{color:var(--text);border-color:var(--text-faint)}
/* cells of the segmented grid — dark blue-grey, hairline-divided */
.view-cube{
  background:linear-gradient(180deg,#1e2534 0%,#191f2c 100%);border:0;border-radius:0;
  padding:12px 0;font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:#c3ccd9;text-align:center;cursor:pointer;transition:color .12s,background .12s,box-shadow .12s;
}
.view-cube:nth-child(odd){border-right:1px solid #2d3648}
.view-cube:nth-child(-n+6){border-bottom:1px solid #2d3648}
.view-cube:hover{background:linear-gradient(180deg,#28324a 0%,#212a3c 100%);color:#fff}
.view-cube.vc-prime{font-weight:600}
/* live "you are here" state = the design's orange active cell */
.view-cube.vc-on{background:linear-gradient(180deg,#4a2c11 0%,#301c09 100%);color:#f6ab55;
  box-shadow:inset 0 0 0 1px #b26a1e,inset 0 0 14px rgba(240,160,74,.18);text-shadow:0 0 10px rgba(246,171,85,.4)}
.view-cube.vc-on:hover{background:linear-gradient(180deg,#552f10 0%,#3a2109 100%);color:#ffb765}
/* round the 4 outer cells to match the container's rounded clip — otherwise the orange active
   border's square corner leaks a stray pixel past the clipped corner ("orange dots" bug) */
.vcube-views>.view-cube:nth-child(1){border-top-left-radius:8px}
.vcube-views>.view-cube:nth-child(2){border-top-right-radius:8px}
.vcube-views>.view-cube:nth-child(7){border-bottom-left-radius:8px}
.vcube-views>.view-cube:nth-child(8){border-bottom-right-radius:8px}
/* tactile press feedback so clicks feel responsive */
.view-cube:active,.vcube-act:active,.vcube-ctrls:active{filter:brightness(.86)}
.hint-bar{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  background:rgba(13,20,36,.94);border:1px solid var(--scribe);border-radius:9px;
  padding:9px 16px;font-size:12.5px;color:var(--scribe);font-family:var(--font-mono);
  display:none;white-space:nowrap;z-index:30;
}
.hint-bar.amber{border-color:var(--amber);color:var(--amber)}
.hint-bar.show{display:block}

/* overlay pins + labels */
.pin{
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  width:26px;height:26px;border-radius:50%;
  background:var(--amber);color:#1a0e02;
  font-family:var(--font-display);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #070b14;box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .12s;z-index:10;
}
.pin:hover{transform:translate(-50%,-50%) scale(1.15)}
.dim-label{
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  /* JetBrains Mono renders markedly crisper than Plex Mono at small sizes */
  /* --ts is the tag size in px, set PER DIM and scaled with the zoom in projectOverlay so the
     whole pill (text + padding + chamfer, all in em) resizes from this one property. */
  font-family:var(--font-data,var(--font-mono));font-size:var(--ts,32px);font-weight:700;color:var(--scribe);
  letter-spacing:.04em;-webkit-font-smoothing:antialiased;
  background:none;border:0;
  padding:.5em 1em;white-space:nowrap;z-index:9;
}
/* drafting-tag pill: 45° chamfer on two opposite corners (TL+BR), radius on the other two.
   A bordered chamfer can't be one element (clip-path cuts the border), so the FRAME is a
   currentColor ::after and the dark FILL a ::before — text paints above both, and every
   per-dim colour / hover state keeps working because the frame follows currentColor.
   All in em so the pill scales cleanly with the --ts font-size. */
.dim-label::after{content:"";position:absolute;inset:0;z-index:-2;background:currentColor;
  clip-path:polygon(.625em 0,calc(100% - .625em) 0,100% .625em,100% calc(100% - .625em),calc(100% - .625em) 100%,0 100%,0 .625em);
  border-radius:0 0 0 .5em}
.dim-label::before{content:"";position:absolute;inset:.094em;z-index:-1;background:rgba(5,8,14,.97);
  clip-path:polygon(.531em 0,calc(100% - .531em) 0,100% .531em,100% calc(100% - .531em),calc(100% - .531em) 100%,0 100%,0 .531em);
  border-radius:0 0 0 .406em}
.dim-label.draggable{cursor:grab}
.dim-label.draggable:hover{border-color:var(--amber);color:var(--amber)}
.dim-label.dragging{cursor:grabbing;border-color:var(--amber);color:var(--amber);z-index:11}
/* pull-out leader toggle — a small round button at the tag's top-right corner. Sized in em so it
   scales with the tag; fades in on hover, stays lit (amber, gently pulsing) while the leader is out. */
.dim-label .dl-callout{position:absolute;top:-.85em;right:-.85em;width:1em;height:1em;padding:0;
  font-size:inherit;  /* scale with the tag (--ts), not the UA button default */
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(7,11,20,.98);border:.075em solid currentColor;color:inherit;cursor:pointer;
  opacity:0;transform:scale(.5);transform-origin:center;pointer-events:auto;z-index:3;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .15s ease,transform .16s cubic-bezier(.34,1.55,.5,1),background .12s,box-shadow .15s}
/* :focus-visible reveal matches .vc-arrow — without it Tab lands on an invisible button and the
   focus ring floats beside the tag with no control under it */
.dim-label:hover .dl-callout,.dim-label .dl-callout.on,.dim-label .dl-callout:focus-visible{opacity:1;transform:scale(1)}
.dim-label .dl-callout:hover{transform:scale(1.22);box-shadow:0 0 0 .15em rgba(255,255,255,.08)}
.dim-label .dl-callout:active{transform:scale(.9)}
.dim-label .dl-callout svg{width:.6em;height:.6em;display:block}
.dim-label .dl-callout.on{background:var(--amber);border-color:var(--amber);color:#1a0e02;
  animation:dlCalloutPulse 2s ease-in-out infinite}
.dim-label .dl-callout.on:hover{transform:scale(1.22)}
@keyframes dlCalloutPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,138,60,.5)}50%{box-shadow:0 0 0 .4em rgba(255,138,60,0)}}
@media (prefers-reduced-motion:reduce){.dim-label .dl-callout.on{animation:none}}
/* leader bend handle — a draggable node that rides the middle of a pulled-out tag's leader line.
   Drag it to kink the leader around a body. Editing-only chrome: hidden in shop-floor view, and being
   a DOM overlay it never bakes into the PDF snapshot or the operator .html export (both draw geometry). */
.dl-bend{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(7,11,20,.92);border:1.5px solid var(--amber);color:var(--amber);
  cursor:grab;pointer-events:auto;z-index:4;opacity:.85;-webkit-tap-highlight-color:transparent;
  transition:opacity .15s,transform .14s cubic-bezier(.34,1.55,.5,1),box-shadow .15s,background .12s}
.dl-bend:hover{opacity:1;transform:translate(-50%,-50%) scale(1.18);box-shadow:0 0 0 4px rgba(255,138,60,.14)}
.dl-bend:active,.dl-bend.dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.08);background:var(--amber);color:#1a0e02}
.dl-bend svg{width:12px;height:12px;display:block}
/* line is bent → the node becomes a flashing × you can click to straighten the leader */
.dl-bend.on{opacity:1;background:var(--amber);border-color:var(--amber);color:#1a0e02;cursor:pointer;
  animation:dlCalloutPulse 2s ease-in-out infinite}
.dl-bend.on svg{width:11px;height:11px}
@media (prefers-reduced-motion:reduce){.dl-bend.on{animation:none}}
body.floor .dl-bend{display:none}
.pin-card{
  position:absolute;transform:translate(-50%,calc(-100% - 20px));pointer-events:auto;
  width:240px;background:var(--panel);border:1px solid var(--amber);border-radius:10px;
  padding:11px 13px;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.pin-card .pc-num{width:20px;height:20px;border-radius:50%;background:var(--amber);color:#1a0e02;font-family:var(--font-display);font-weight:700;font-size:11px;display:inline-flex;align-items:center;justify-content:center;margin-right:8px}
.pin-card p{font-size:13px;line-height:1.45;margin-top:6px}
.pin-card .pc-close{position:absolute;top:6px;right:8px;color:var(--text-faint);padding:2px 5px}
.pin-card .pc-close:hover{color:var(--text)}

/* shop floor mode — bigger overlay text, hide editing chrome */
body.floor .pin{width:34px;height:34px;font-size:16px}
body.floor .dim-label{font-size:calc(var(--ts,32px) * 1.25)}
body.floor #panel,body.floor .hud-tl .edit-only{display:none}

/* side panel */
#panel{
  width:430px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;transition:width .22s ease;
}
/* Tools tab expands the panel to fit two panes side by side (library | on-this-setup
   cutting-data table); the viewport shrinks + re-fits. Every other tab returns it to 430px. */
@media (min-width:1040px){ #panel.tools-wide{width:var(--tools-panel-w)} }
#panel.tools-wide .panel-body{padding:0;overflow:hidden;display:flex;flex-direction:column}
.tt-two{display:flex;flex-direction:column;flex:1;min-height:0}
.tt-lib{display:flex;flex-direction:column;min-height:0;padding:14px;border-bottom:1px solid var(--line)}
.tt-lib .ttab-head{position:static}
.tt-lib .tool-list{flex:1;overflow-y:auto;min-height:0;padding-top:10px}
.tt-setup{display:flex;flex-direction:column;min-height:0;flex:1}
.tt-setup-inner{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tt-setup .ws-twrap{overflow:auto}
.ws-empty{padding:44px 20px;text-align:center;color:var(--text-dim);font-size:13px;line-height:1.6}
@media (min-width:1040px){
  .tt-two{flex-direction:row}
  .tt-lib{width:440px;flex-shrink:0;border-bottom:none;border-right:1px solid var(--line)}
  .tt-setup{flex:1;min-width:0}
}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{
  flex:1;padding:12px 2px;font-family:var(--font-display);font-weight:600;font-size:12.5px;
  color:var(--text-faint);border-bottom:2px solid transparent;transition:all .15s;
}
.tabs button.on{color:var(--text);border-bottom-color:var(--amber)}
.tabs button.tab-lock::after{content:"🔒";margin-left:4px;font-size:9px;opacity:.75}
.gc-gate{padding:34px 16px;gap:12px}
.gc-gate .gc-gate-hint{font-size:12px;color:var(--text-faint)}
.gc-gate .gc-link{background:none;border:none;color:var(--scribe);cursor:pointer;font-size:12.5px;padding:0}
.gc-gate .gc-link:hover{text-decoration:underline}
.panel-body{flex:1;overflow-y:auto;padding:14px;min-height:0}
.panel-body::-webkit-scrollbar{width:8px}
.panel-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* empty-state prompt at the bottom of the panel — shown until a STEP file is loaded */
#panel-empty{flex-shrink:0;margin:4px 14px 12px;padding:20px 16px 18px;text-align:center;position:relative;overflow:hidden;border:1px solid var(--line-soft);border-radius:14px;background:linear-gradient(180deg,rgba(255,107,15,.05),rgba(25,211,224,.03))}
#panel-empty::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--amber),var(--scribe),transparent);background-size:200% 100%;animation:peShine 4.5s linear infinite}
.pe-art{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin:2px auto 14px}
.pe-glow{position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,15,.32),rgba(25,211,224,.12) 55%,transparent 72%);filter:blur(7px);animation:pePulse 3.6s ease-in-out infinite}
.pe-icon{position:relative;animation:peFloat 3.6s ease-in-out infinite}
.pe-up{animation:peUp 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.pe-title{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--text);margin-bottom:6px}
.pe-sub{font-size:12px;color:var(--text-dim);line-height:1.55;max-width:232px;margin:0 auto 11px}
.pe-hint{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);letter-spacing:.02em;line-height:1.5}
@keyframes peFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pePulse{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:.82;transform:scale(1.1)}}
@keyframes peUp{0%,100%{transform:translateY(1.5px)}50%{transform:translateY(-2.5px)}}
@keyframes peShine{0%{background-position:150% 0}100%{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){#panel-empty *,#panel-empty::before{animation:none!important}}
/* locked-field nudge (empty state): the clicked field flashes red, the prompt glows brighter then settles */
@keyframes lockFlash{0%{box-shadow:0 0 0 0 rgba(217,37,43,0)}18%{box-shadow:0 0 0 2px rgba(217,37,43,.62),0 0 16px rgba(217,37,43,.45)}100%{box-shadow:0 0 0 0 rgba(217,37,43,0)}}
.lock-flash{animation:lockFlash .62s ease-out}
@keyframes panelEmptyAttn{0%{box-shadow:0 0 0 0 rgba(255,107,15,0);border-color:var(--line-soft);transform:scale(1)}22%{box-shadow:0 0 0 1px rgba(255,107,15,.7),0 0 40px rgba(255,107,15,.5);border-color:rgba(255,107,15,.78);transform:scale(1.018)}100%{box-shadow:0 0 0 0 rgba(255,107,15,0);border-color:var(--line-soft);transform:scale(1)}}
#panel-empty.attn{animation:panelEmptyAttn 1.05s ease-out}

.section-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin:16px 0 8px;font-family:var(--font-mono)}
.section-label:first-child{margin-top:0}

.field{margin-bottom:11px}
.field label{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:5px;font-family:var(--font-mono)}
.field input,.field select{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:13.5px;font-family:var(--font-mono);
}
.field input:hover{border-color:var(--text-faint)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.add-btn{
  width:100%;padding:10px;border:1px dashed var(--line);border-radius:10px;
  font-size:13px;font-weight:500;color:var(--text-dim);transition:all .15s;margin-bottom:12px;
}
.add-btn:hover{color:var(--text);border-color:var(--text-faint)}
.add-btn.armed.note{border-color:var(--amber);color:var(--amber);border-style:solid;background:var(--amber-dim)}
.add-btn.armed.dim{border-color:var(--scribe);color:var(--scribe);border-style:solid;background:var(--scribe-dim)}

.note-item,.dim-item,.mesh-item{
  display:flex;gap:10px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;
  margin-bottom:7px;align-items:flex-start;background:var(--panel-2);transition:border-color .15s;
}
.note-item,.dim-item{cursor:pointer}
.note-item:hover,.dim-item:hover{border-color:var(--text-faint)}
/* Dims row is TWO lines: value + description on top, the action controls (re-anchor / critical /
   style / thickness / tag size / colour / delete) on their own line — as one line they overflowed
   the panel and the colour swatch + delete fell off the right edge. */
.dim-item{flex-direction:column;align-items:stretch;gap:8px}
.dim-top{display:flex;gap:10px;align-items:center;width:100%;min-width:0}
.dim-item input{min-width:0}
.dim-acts{display:flex;gap:6px;align-items:center;width:100%}
.dim-acts .item-del{margin-left:auto}
.note-num{width:21px;height:21px;border-radius:50%;background:var(--amber);color:#1a0e02;font-family:var(--font-display);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.note-item p{font-size:12.5px;line-height:1.45;flex:1;word-break:break-word}
.dim-item .dv{font-family:var(--font-mono);font-weight:600;color:var(--scribe);font-size:13px;flex-shrink:0}
.dim-item input{
  flex:1;background:transparent;border:none;border-bottom:1px dashed var(--line);
  font-size:12.5px;color:var(--text-dim);padding:1px 2px;
}
.dim-item input:hover{border-bottom-color:var(--text-faint)}
.item-del{color:var(--text-faint);font-size:14px;padding:0 3px;flex-shrink:0;border-radius:4px}
.item-del:hover{color:var(--red)}
/* per-dimension "critical" flag — badge on the exported setup sheet */
.dim-item .dim-crit{width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:6px;flex:none;cursor:pointer;background:none;color:var(--text-faint);font-size:12px;display:flex;align-items:center;justify-content:center}
.dim-item .dim-crit:hover{color:var(--red);border-color:var(--red)}
.dim-item .dim-crit.on{color:#fff;background:var(--red);border-color:var(--red)}
/* eye toggle beside the description input — hides the description on the 3D value tag only
   (the setup sheet's dimension list still prints it). Amber "off" state = hidden on the tag. */
.dim-item .dim-lblvis{width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:6px;flex:none;cursor:pointer;background:none;color:var(--text-faint);display:flex;align-items:center;justify-content:center}
.dim-item .dim-lblvis svg{width:14px;height:14px}
.dim-item .dim-lblvis:hover{color:var(--scribe);border-color:var(--scribe)}
.dim-item .dim-lblvis.off{color:var(--amber);border-color:var(--amber)}
.dim-item .dim-lblvis.off:hover{color:var(--amber);border-color:var(--amber);filter:brightness(1.2)}
.dim-item .dim-lblvis.none{display:none}
/* shared empty/loading paragraph — side panel, dialogs, G-code studio. The tools PAGE has its own
   roomier variant scoped to .tl-wrap; keep this one unscoped so panel copy stays compact. */
.empty-msg{font-size:12.5px;color:var(--text-dim);padding:6px 2px;line-height:1.6}
.dim-kinds{display:flex;gap:4px;margin-bottom:9px}
/* per-dimension line-weight: row button (shows the current thickness) + slider popover */
.dim-item .dim-lw-btn{width:24px;height:24px;padding:0 3px;border:1px solid var(--line);
  border-radius:6px;flex:none;cursor:pointer;background:none;display:flex;align-items:center}
.dim-item .dim-lw-btn i{display:block;width:100%;border-radius:2px;background:currentColor}
.dim-item .dim-lw-btn:hover{filter:brightness(1.25)}
.dimlw-menu{min-width:230px}
/* per-dimension VALUE-TAG size: row button (big+small "A" = text size) + slider/default popover */
.dim-item .dim-ts-btn{width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:6px;flex:none;cursor:pointer;background:none;display:flex;align-items:baseline;justify-content:center;gap:1px;line-height:1;color:currentColor}
.dim-item .dim-ts-btn .ts-a1{font:800 13px var(--font-data,var(--font-mono))}
.dim-item .dim-ts-btn .ts-a2{font:800 8px var(--font-data,var(--font-mono))}
.dim-item .dim-ts-btn:hover{filter:brightness(1.25)}
.dimts-menu{min-width:252px}
.piv-menu .pm-note{font:400 11.5px var(--font-data,var(--font-mono));color:var(--text-dim);line-height:1.5;padding:2px 12px 6px;margin:0}
.piv-menu .pm-sub{font:400 11px var(--font-data,var(--font-mono));color:var(--text-faint);line-height:1.45;padding:4px 12px 10px;margin:0}
.tsm-preview{display:flex;justify-content:center;align-items:center;min-height:54px;padding:4px 12px 10px;overflow:hidden}
.tsm-pill{display:inline-block;font-family:var(--font-data,var(--font-mono));font-weight:700;letter-spacing:.04em;background:rgba(5,8,14,.97);border:2px solid currentColor;border-radius:4px;padding:.4em .7em;line-height:1;white-space:nowrap}
.tsm-default{display:block;width:calc(100% - 24px);margin:0 12px 2px;padding:7px 10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:7px;color:var(--text);font:600 12px var(--font-data,var(--font-mono));letter-spacing:.02em;cursor:pointer;text-align:center}
.tsm-default:hover{border-color:var(--amber);color:var(--amber)}
.tsm-default.saved{border-color:#2ea043;color:#3fd66c}
/* WCS panel: slider+number rows, custom-name input, style-chip previews */
.wcs-size .wcs-size-num{width:60px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;
  color:var(--text);font:600 12.5px var(--font-data,var(--font-mono));padding:4px 6px;text-align:center;flex:none}
.wcs-name-in{display:block;width:100%;margin-top:6px;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:7px;color:var(--text);font:600 13px var(--font-data,var(--font-mono));padding:7px 10px;letter-spacing:.04em}
.wcs-name-in:focus{border-color:var(--scribe);outline:none}
.wcs-sty-pick .ws-prev{width:30px;height:16px;flex:none;margin-right:8px;vertical-align:-3px;
  stroke:currentColor;fill:none}
.wcs-sty-pick .ws-prev .f{fill:currentColor;stroke:none}
.wcs-sty.on .wcs-sty-pick .ws-prev{color:var(--scribe)}
.lwm-row{display:flex;align-items:center;gap:9px;padding:8px 12px 4px}
.lwm-range{flex:1;accent-color:var(--dsc,var(--scribe))}
.lwm-num{width:58px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;
  color:var(--text);font:600 13px var(--font-data,var(--font-mono));padding:4px 6px;text-align:center}
.lwm-px{font:500 11px var(--font-data,var(--font-mono));color:var(--text-dim)}
.lwm-sample{padding:6px 12px 11px}
.lwm-sample i{display:block;width:100%;border-radius:2px;background:var(--dsc,var(--scribe))}
.dim-kind{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 1px;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel-2);color:var(--text-dim);cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.dim-kind:hover{border-color:var(--text-faint);color:var(--text)}
.dim-kind.on{border-color:var(--scribe);color:var(--scribe);background:var(--scribe-dim)}
.dim-kind .dk-g{font-size:15px;font-family:var(--font-mono);font-weight:600;line-height:1}
.dim-kind .dk-n{font-size:9.5px;letter-spacing:.02em}
.dim-row-g{font-family:var(--font-mono);color:var(--scribe);opacity:.65;margin-right:5px;font-weight:600}
.dim-item .depth-in{flex:0 0 60px;max-width:60px;font-family:var(--font-mono);font-size:11.5px;color:var(--scribe);background:transparent;border:none;border-bottom:1px dashed var(--line);padding:1px 2px}
.dim-item .depth-in:hover{border-bottom-color:var(--text-faint)}
.wcs-sel{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--line-soft);border-radius:8px;padding:7px 9px;font-family:var(--font-mono);font-size:13px;margin-bottom:4px}
/* work-offset name select + label-colour swatch on one row (the G54 sprite colour) */
.wcs-name-row{display:flex;gap:8px;align-items:center}
.wcs-name-row .wcs-sel{flex:1;min-width:0}
.wcs-name-col{width:31px;height:31px;padding:0;border:1px solid var(--line);border-radius:8px;flex:none;cursor:pointer;margin-bottom:4px}
.wcs-name-col:hover{border-color:var(--scribe)}
.wcs-flips{display:flex;gap:6px;margin-bottom:6px}
.wcs-flip{flex:1;padding:7px 2px;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel-2);color:var(--text-dim);font-size:12px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.wcs-flip:hover{border-color:var(--text-faint);color:var(--text)}
.wcs-flip.on{border-color:var(--scribe);color:var(--scribe);background:var(--scribe-dim)}
.wcs-read{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);line-height:1.7;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px}
.wcs-read b{margin-right:6px}
.wcs-size{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.wcs-size input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--scribe-dim),var(--scribe));outline:none;cursor:pointer}
.wcs-size input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--scribe);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--scribe);cursor:grab}
.wcs-size input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
.wcs-size input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--scribe);border:2px solid var(--panel);cursor:grab}

.note-editor{border:1px solid var(--amber);border-radius:10px;padding:12px;margin-bottom:10px;background:var(--panel-2)}
.note-editor textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:7px;
  font-size:13px;padding:9px;resize:vertical;min-height:60px;
}
.ne-actions{display:flex;gap:8px;margin-top:9px;justify-content:flex-end}
.btn-primary{background:var(--amber);color:#1a0e02;font-weight:600;padding:8px 15px;border-radius:8px;font-size:12.5px}
.btn-plain{color:var(--text-dim);padding:8px 10px;font-size:12.5px}
.btn-plain:hover{color:var(--text)}

.mesh-item{align-items:center;gap:8px}
.mesh-item .body-col{width:22px;height:22px;flex-shrink:0;padding:0;border:1px solid var(--line);border-radius:5px;background:none;cursor:pointer}
.mesh-item .body-col::-webkit-color-swatch-wrapper{padding:2px}
.mesh-item .body-col::-webkit-color-swatch{border:none;border-radius:3px}
.mesh-item .mname{flex:1;font-size:12px;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mesh-item .body-op{width:58px;flex-shrink:0;accent-color:var(--scribe);cursor:pointer}
.mesh-item input[type=checkbox]{accent-color:var(--amber);width:15px;height:15px;cursor:pointer;flex-shrink:0}

.tool-row{display:flex;gap:9px;align-items:center;padding:9px 11px;border:1px solid var(--line-soft);border-radius:10px;margin-bottom:7px;background:var(--panel-2)}
.tool-row input[type=checkbox]{accent-color:var(--amber);width:15px;height:15px;cursor:pointer;flex-shrink:0}
.tool-row .tn{font-family:var(--font-mono);font-weight:600;color:var(--amber);font-size:12.5px;width:30px;flex-shrink:0}
.tool-row .tdesc{flex:1;font-size:12.5px;color:var(--text-dim)}
.tool-row .tdia{font-family:var(--font-mono);font-size:12px;color:var(--scribe);flex-shrink:0}

/* Tools tab: library picker + filter (sticky), then the per-setup summary */
.ttab-head{position:sticky;top:-14px;z-index:2;display:flex;flex-direction:column;gap:8px;background:var(--panel);padding:14px 0 9px;margin-top:-14px;border-bottom:1px solid var(--line-soft)}
.tlib-pick{display:flex;align-items:center;gap:9px}
.tlib-pick>label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-family:var(--font-mono);flex-shrink:0}
.tlib-man{font-size:11px;color:var(--scribe);text-decoration:none;flex-shrink:0;white-space:nowrap}
.tlib-man:hover{text-decoration:underline}
.tlib-filter{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:8px;color:var(--text);font-size:12.5px;padding:7px 10px;font-family:inherit}
.tlib-filter:focus{outline:none;border-color:var(--amber)}
.tlib-filter::placeholder{color:var(--text-faint)}
.tool-list{padding-top:12px}

#toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:12px 17px;font-size:13px;z-index:2147483020;opacity:0;pointer-events:none;
  transition:all .25s;box-shadow:0 8px 28px rgba(0,0,0,.5);max-width:92vw;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast b{color:var(--amber)}

/* ============================================================
   TOOLS PAGE — friendly catalog (redesigned Session 77)
   ============================================================ */
.tl-wrap{max-width:1360px;margin:0 auto;padding:36px 32px 90px}

/* shared: search field, source badge, tag chip, import-logo chips */
.tl-search{position:relative;flex:1;min-width:0}
.tl-search input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);font-size:14.5px;font-family:inherit;padding:11px 14px 11px 38px}
.tl-search input:focus{outline:none;border-color:var(--scribe);box-shadow:0 0 0 3px rgba(25,211,224,.1)}
.tl-search input::placeholder{color:var(--text-faint)}
.tl-search .si{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:15px;pointer-events:none}
.src-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;font-family:var(--font-mono);letter-spacing:.02em;padding:2px 9px 2px 3px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.src-badge .src-tag{font-size:9px;padding:2px 5px;border-radius:5px;line-height:1}
.src-fusion{color:var(--amber)} .src-fusion .src-tag{background:rgba(255,107,15,.16);color:var(--amber)}
.src-mcam{color:var(--scribe)} .src-mcam .src-tag{background:rgba(25,211,224,.16);color:var(--scribe)}
.src-nx{color:var(--green)} .src-nx .src-tag{background:rgba(65,201,124,.16);color:var(--green)}
.src-manual{color:var(--text-dim)} .src-manual .src-tag{background:rgba(255,255,255,.06);color:var(--text-dim)}
.tagchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-dim);background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;padding:4px 11px;font-family:inherit}
.ib-logo{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;padding:2px 6px;border-radius:5px}
.ib-fusion{background:rgba(255,107,15,.15);color:var(--amber)}
.ib-mcam{background:rgba(25,211,224,.15);color:var(--scribe)}
.ib-nx{background:rgba(65,201,124,.15);color:var(--green)}
.ib-fmt{font-family:var(--font-mono);font-size:10px;color:var(--text-faint)}

/* HOME — header + toolbar */
.tl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.tl-head h1{font-family:'Exo 2',var(--font-display);font-weight:600;font-style:italic;font-size:clamp(28px,3.6vw,36px);letter-spacing:-.01em}
.tl-sub{color:var(--text-dim);margin-top:6px;font-size:14px}
.tl-sub b{color:var(--text);font-weight:600;font-family:var(--font-mono);font-size:13px}
.tl-head-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl-imp-group{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel)}
.tl-imp-group .imp-lab{color:var(--text-faint);font-size:12.5px;padding:0 4px 0 8px}
.tl-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tl-sort{display:flex;align-items:center;gap:9px;flex-shrink:0}
.tl-sort .ts-lab{font-size:12.5px;color:var(--text-faint)}
.tl-sort select{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);font-size:13.5px;font-family:inherit;padding:10px 11px;cursor:pointer}
.tl-sort select:focus{outline:none;border-color:var(--scribe)}
.tl-tagbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tl-tagbar .tagfilter{cursor:pointer;transition:border-color .14s,color .14s,background .14s}
.tl-tagbar .tagfilter:hover{border-color:var(--text-faint);color:var(--text)}
.tl-tagbar .tagfilter.on{background:var(--scribe-dim);border-color:rgba(26,212,226,.4);color:var(--scribe)}
.tl-tagbar .tf-n{opacity:.55;font-family:var(--font-mono)}
.tl-tagclear{font-size:12px;color:var(--text-faint);background:none;border:none;cursor:pointer;padding:3px 7px;font-family:inherit}
.tl-tagclear:hover{color:var(--mcred)}
.tl-favfilter{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text-dim);font-size:13.5px;font-family:inherit;padding:10px 14px;cursor:pointer;transition:border-color .14s,color .14s,background .14s}
.tl-favfilter:hover{border-color:var(--text-faint);color:var(--text)}
.tl-favfilter .star{color:var(--amber)}
.tl-favfilter .fc{font-family:var(--font-mono);font-size:12px;background:var(--panel-3);border-radius:10px;padding:1px 7px}
.tl-favfilter.on{background:rgba(255,107,15,.12);border-color:rgba(255,107,15,.5);color:var(--amber)}

/* info popover (ⓘ top right): the workflow, in plain words */
.tl-info{position:relative}
.tl-info-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--text-dim);display:grid;place-items:center;cursor:pointer;background:var(--panel-2);transition:color .14s,border-color .14s,background .14s}
.tl-info-btn svg{display:block}
.tl-info-btn:hover,.tl-info.open .tl-info-btn,.tl-info:focus-within .tl-info-btn{color:var(--scribe);border-color:rgba(26,212,226,.45);background:var(--panel-3)}
.tl-info-pop{position:absolute;right:0;top:calc(100% + 10px);width:min(360px,86vw);z-index:120;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:17px 19px;box-shadow:0 18px 44px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s;text-align:left;cursor:default}
.tl-info:hover .tl-info-pop,.tl-info:focus-within .tl-info-pop,.tl-info.open .tl-info-pop{opacity:1;visibility:visible;transform:none}
.tl-info-pop h4{font-family:var(--font-display);font-weight:600;font-size:15px;margin:0 0 10px;color:var(--text)}
.tl-info-pop ol{margin:0 0 0 19px;padding:0;display:grid;gap:8px;color:var(--text-dim);font-size:13.5px;line-height:1.55}
.tl-info-pop ol li::marker{color:var(--scribe);font-family:var(--font-mono);font-size:12px}
.tl-info-tip{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line-soft);color:var(--text-dim);font-size:13px;line-height:1.55}
.tl-info-tip b{color:var(--text)}

/* HOME — card grid */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px}
/* keyboard path: the card is an <article role="link">, which the global focus-visible
   rule (button/a/input/textarea) doesn't cover — give it the same ring. */
.lib-card:focus-visible{outline:2px solid var(--scribe);outline-offset:2px}
.lib-card{position:relative;display:flex;flex-direction:column;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:0;cursor:pointer;text-align:left;transition:transform .18s,border-color .18s,box-shadow .18s;min-width:0;overflow:hidden}
.lib-card:hover{transform:translateY(-3px);border-color:rgba(26,212,226,.35);box-shadow:var(--sh-2)}
.lib-card.is-fav{border-color:rgba(255,107,15,.25)}
.lib-card.is-fav:hover{border-color:rgba(26,212,226,.35)}
.lc-photo{height:150px;background-size:cover;background-position:center;border-bottom:1px solid var(--line-soft);flex:none}
/* org sharing (Shop+): teal chip = a teammate's shared crib; amber = mine, shared out */
.lc-shared{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-data);font-size:9.5px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--scribe);border:1px solid rgba(25,211,224,.35);padding:2px 7px;border-radius:3px;white-space:nowrap}
.lc-shared.mine{color:var(--amber);border-color:rgba(255,107,15,.4)}
.lc-sharedrow{margin-top:6px}
.lib-card.is-foreign{border-style:dashed}
.ld-name-ro{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-.4px;color:var(--text);padding:2px 1px}
.tlp-shared{color:var(--scribe)}
.lc-body{display:flex;flex-direction:column;gap:9px;padding:16px 18px 14px;flex:1}
.lc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lc-acts{display:flex;align-items:center;gap:1px;flex-shrink:0}
.lc-fav{opacity:0;background:none;border:none;color:var(--text-faint);font-size:16px;line-height:1;cursor:pointer;padding:4px 7px;border-radius:8px;transition:opacity .14s,color .14s,background .14s}
.lib-card:hover .lc-fav,.lc-fav:focus{opacity:1}
.lc-fav:hover{color:var(--amber);background:var(--panel-3)}
.lc-fav.on{opacity:1;color:var(--amber)}
.lc-menu{opacity:0;background:none;border:none;color:var(--text-faint);font-size:18px;line-height:1;cursor:pointer;padding:4px 9px;border-radius:8px;transition:opacity .14s,color .14s,background .14s}
.lib-card:hover .lc-menu,.lc-menu:focus{opacity:1}
.lc-menu:hover{color:var(--text);background:var(--panel-3)}
.lc-name{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.2px;color:var(--text);overflow-wrap:anywhere}
.lc-machine{font-size:13.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-3px}
.lc-tags{display:flex;flex-wrap:wrap;gap:6px}
.lc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft)}
.lc-count{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text)}
.lc-time{font-size:12.5px;color:var(--text-faint)}
.lib-card-new{align-items:center;justify-content:center;flex-direction:column;border-style:dashed;border-width:1.5px;color:var(--text-faint);gap:6px;font-size:13.5px;font-family:inherit;min-height:200px;background:none}
.lib-card-new:hover{color:var(--amber);border-color:var(--amber);box-shadow:none;transform:none}
.lib-card-new .lcn-plus{font-size:28px;line-height:1;color:var(--text-dim)}
.tl-section + .tl-section{margin-top:30px}
.tl-section-head{font-size:13px;font-weight:500;color:var(--text-dim);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.tl-section-head::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.tl-section-head .sh-star{color:var(--amber)}

/* empty / first-run state */
.tl-empty{grid-column:1/-1;text-align:center;padding:58px 22px;border:1.5px dashed var(--line);border-radius:var(--r-lg);background:var(--panel)}
.tl-empty .tle-icon{font-size:32px;opacity:.45;margin-bottom:12px}
.tl-empty h3{font-family:var(--font-display);font-weight:600;font-size:19px;margin-bottom:8px}
.tl-empty p{color:var(--text-dim);font-size:14px;max-width:460px;margin:0 auto 20px;line-height:1.6}
.tl-empty-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* OVERLAY STACKING LADDER — these used to all sit at 200, so ties were broken by DOM-append order
   and whichever overlay was created LAST won regardless of what was opened last:
     200  modal backdrops (.pdfx)          210  .vcap-bar (capture chrome over the modal)
     300  .auth-backdrop (login/account must never end up buried under a modal)
     400  floating menus (.ctx-menu, .piv-menu family, .tlp-menu) — a menu can open from inside a modal
     500  .sheet-zoom       2147483000+  .jobx-pick, #toast
   Keep new overlays inside a band rather than inventing a value. */
/* card ⋯ context menu */
.ctx-menu{position:fixed;z-index:400;min-width:190px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px;box-shadow:0 14px 36px rgba(0,0,0,.55)}
.ctx-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;color:var(--text-dim);font-size:13.5px;font-family:inherit;padding:9px 11px;border-radius:8px;cursor:pointer}
.ctx-item:hover{background:var(--panel-2);color:var(--text)}
.ctx-item.danger{color:#ff6e72}
.ctx-item.danger:hover{background:rgba(217,37,43,.12)}
.ctx-sep{height:1px;background:var(--line-soft);margin:5px 4px}

/* DETAIL — one library */
.tl-crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-faint);margin-bottom:20px}
.tl-crumb a{color:var(--text-dim);text-decoration:none}
.tl-crumb a:hover{color:var(--scribe)}
.tl-crumb .cr-sep{opacity:.45}
.tl-crumb .cr-here{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-card{display:flex;gap:22px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:22px}
.ld-photo{flex:none;width:190px}
.ld-photo img{width:190px;height:120px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);display:block}
.ld-photo-add{width:190px;height:120px;border:1.5px dashed var(--line);border-radius:var(--r);display:grid;place-items:center;color:var(--text-faint);font-size:12.5px;line-height:1.45;cursor:pointer;text-align:center;padding:10px;transition:color .14s,border-color .14s;font-family:inherit;background:none}
.ld-photo-add:hover{color:var(--text-dim);border-color:var(--text-faint)}
.ld-photo-acts{display:flex;gap:10px;margin-top:8px;justify-content:center}
.ld-photo-acts button{background:none;border:none;color:var(--text-faint);font-size:12.5px;cursor:pointer;font-family:inherit;padding:2px 4px}
.ld-photo-acts button:hover{color:var(--text-dim)}
.ld-main{flex:1;min-width:0}
.ld-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ld-name-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ld-name-input{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-.4px;color:var(--text);background:none;border:none;border-bottom:1.5px dashed transparent;padding:2px 1px;min-width:160px;max-width:62vw}
.ld-name-input:hover{border-bottom-color:var(--line)}
.ld-name-input:focus{outline:none;border-bottom-color:var(--scribe)}
.ld-star{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-faint);transition:color .14s;line-height:1}
.ld-star.on,.ld-star:hover{color:var(--amber)}
.ld-meta{font-size:13.5px;color:var(--text-dim);margin-top:8px}
.ld-head-acts{display:flex;gap:8px;flex-shrink:0}
.ld-act{font-size:13.5px;color:var(--text-dim);padding:8px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);cursor:pointer;font-family:inherit;transition:color .14s,border-color .14s}
.ld-act:hover{color:var(--text);border-color:var(--text-faint)}
.ld-act.danger:hover{color:var(--red);border-color:rgba(255,93,93,.4)}
.ld-props{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.ld-prop label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:6px}
.ld-prop>input,.ld-prop textarea{width:100%;background:var(--panel-3);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);font-size:14px;font-family:inherit;padding:9px 12px}
.ld-prop>input:focus,.ld-prop textarea:focus{outline:none;border-color:var(--text-faint)}
.ld-prop textarea{resize:none;overflow:hidden;min-height:41px;line-height:1.5}
.ld-prop-notes{grid-column:auto}
.ld-tagedit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--panel-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px;min-height:41px}
.ld-tagedit:focus-within{border-color:var(--text-faint)}
.ld-tagedit .tagchip{background:var(--scribe-dim);border-color:transparent;color:var(--scribe)}
.ld-tagedit .tag-x{cursor:pointer;opacity:.7;font-size:10px}
.ld-tagedit .tag-x:hover{opacity:1}
.ld-tagedit input{flex:1;min-width:80px;background:none;border:none;color:var(--text);font-size:13.5px;font-family:inherit;padding:3px 2px}
.ld-tagedit input:focus{outline:none}
.tools-bar{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.tools-bar .tools-count{font-family:var(--font-mono);font-size:13px;color:var(--text-faint);flex-shrink:0}

.untag-banner{display:flex;align-items:center;gap:14px;justify-content:space-between;background:var(--amber-dim);border:1px solid rgba(255,107,15,.3);border-radius:var(--r-sm);padding:10px 15px;margin-bottom:12px;font-size:13.5px;color:var(--text)}
.untag-x{flex-shrink:0;font-size:13px;font-weight:600;color:var(--amber);border:none;padding:5px 8px;background:none;cursor:pointer;transition:color .14s;font-family:inherit}
.untag-x:hover{color:var(--amber-hi)}

/* quick-add row, visually docked onto the catalog table below it */
.tool-form{display:grid;grid-template-columns:84px 1fr 116px 132px auto;gap:12px;align-items:end;margin-bottom:0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:1px solid var(--line-soft)}
.tool-form .field{margin:0}
.tool-form .field label{font-family:var(--font-body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--text-dim)}
.tool-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--panel-2);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden}
.tool-table th{font-size:12px;font-weight:500;color:var(--text-faint);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.tool-table td{padding:14px;border-bottom:1px solid var(--line-soft);transition:background .12s}
.tool-table tbody tr:last-child td{border-bottom:0}
.tool-table tbody tr:hover td{background:var(--panel-3)}
.tool-table .tn{font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--text);white-space:nowrap}
.tool-table .td-dia{font-family:var(--font-mono);color:var(--scribe);white-space:nowrap}
.tool-table .item-del{font-size:15px;color:var(--text-faint);border-radius:7px;padding:4px 8px}
.tool-table .item-del:hover{background:rgba(255,93,93,.12);color:var(--red)}
.tool-table tr.tr-untagged td{opacity:.55}
.tool-table tr.tr-untagged .tn{color:var(--text-faint)}
/* scoped: unscoped it also hit the creator panel and every dialog, overriding the compact rule above */
.tl-wrap .empty-msg{color:var(--text-dim);font-size:14px;padding:18px 4px}

@media (max-width:900px){
  .ld-card{flex-direction:column}
  .ld-photo{width:100%}
  .ld-photo img,.ld-photo-add{width:100%}
  .ld-props{grid-template-columns:1fr}
}
@media (max-width:680px){
  .tl-wrap{padding:28px 16px 70px}
  .tl-head-acts{width:100%}
  .tl-imp-group{flex-wrap:wrap}
  .tool-form{grid-template-columns:1fr 1fr}
  .tool-form .btn-amber{grid-column:1/-1}
  .ld-head-acts{width:100%}
}

/* ============================================================
   EXPORTED SETUP SHEET — 10 templates (preview + print)
   Each .sheet-doc is one US-Letter page (content area inside .5"
   margins). build() composes blocks; classes set header / layout
   / accent / orientation. .sheet-fit is auto-scaled by JS so the
   content always fits one page.
   ============================================================ */
.sheet-doc{--accent:#ff6b0f;--ink:#14181e;--sub:#5f6b7e;--faint:#8b94a3;--ln:#cfd4dc;--ln2:#e6e9ef;
  background:#fff;color:var(--ink);font-family:var(--font-body);box-sizing:border-box;overflow:hidden;
  /* FORCE background/accent colours in the saved PDF — browsers default "Background graphics" OFF, which
     otherwise printed Carbon blank (white text on a dropped dark page) and every table's white tool-number
     cells invisible (white-on-accent). */
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.sheet-doc.portrait{width:7.5in;height:10in}
.sheet-doc.landscape{width:10in;height:7.5in}
.sheet-doc.mono{--accent:#2b313b}
.sheet-fit{box-sizing:border-box;height:100%;padding:0.4in 0.44in;transform-origin:top left;display:flex;flex-direction:column}

/* ---- engineering title block (the header on page 1) ---- */
.tb{border:1.4px solid var(--ink);flex-shrink:0}
.tb-top{display:flex;align-items:stretch;border-bottom:1.4px solid var(--ink)}
.tb-brand{display:flex;align-items:center;gap:9px;padding:8px 13px;border-right:1.4px solid var(--ink);flex-shrink:0;font-family:var(--font-brand);font-style:italic;font-weight:600;font-size:18px;line-height:1;color:var(--ink)}
.tb-brand em{font-weight:600}
.tb-brand .s-mark{width:26px;height:24px;display:block;flex-shrink:0}
/* shop logo (Shop+ self-serve branding) — same slot + height budget as the brand mark */
.s-shoplogo{display:block;height:calc(24px * var(--logos,1));width:auto;max-width:calc(130px * var(--logos,1));object-fit:contain;flex-shrink:0}
.s-cont .s-shoplogo,.s-shoplogo-sm{height:calc(17px * var(--logos,1));max-width:calc(96px * var(--logos,1))}
.nt-brand .s-shoplogo{height:calc(24px * var(--logos,1));max-width:calc(130px * var(--logos,1))}
/* accent-band / tinted headers are not white paper — back the logo with a white chip
   so a dark or transparent mark stays legible (no-op look on light logos) */
.band .tb-brand .s-shoplogo,.s-shoplogo.on-tint{background:#fff;box-sizing:border-box;padding:2px 5px;border-radius:2px}
.tb-title{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 14px;min-width:0}
.tb-title .lab{font-family:var(--font-data);font-size:8.5px;letter-spacing:.15em;color:var(--faint);text-transform:uppercase}
.tb-title .part{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.08;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tb-op{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--accent);color:#fff;padding:5px 16px;font-family:var(--font-data);text-align:center}
.tb-op .k{font-size:8px;letter-spacing:.14em;opacity:.85}
.tb-op .v{font-size:20px;font-weight:700;line-height:1}
.tb-grid{display:grid;grid-template-columns:1.7fr .75fr .95fr 1.3fr 1.45fr 1.05fr}
.tb-cell{padding:5px 11px;border-left:1px solid var(--ln);min-width:0}
.tb-cell:first-child{border-left:none}
.tb-cell .k{font-family:var(--font-data);font-size:7.5px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;display:block;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-cell .v{display:block;font-family:var(--font-mono);font-weight:600;font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-cell .v.hi{color:var(--accent)}
/* band variant — coloured top strip */
.band .tb-top{background:var(--accent);border-bottom-color:var(--accent)}
.band .tb-brand{border-right-color:rgba(255,255,255,.35);color:#fff}
.band .tb-title .lab{color:rgba(255,255,255,.82)}
.band .tb-title .part{color:#fff}
.band .tb-op{background:rgba(0,0,0,.17)}
.band .tb-brand .s-mark{display:none}
.mono .tb-op{background:var(--ink)}

/* ---- snapshot panel ---- */
.s-snap{border:1px solid var(--ln);position:relative;background:#fff;margin-top:12px;flex-shrink:0}
.s-snap-bar{display:flex;align-items:center;justify-content:space-between;padding:3px 10px;border-bottom:1px solid var(--ln2);background:#f7f8fb}
.s-snap-bar .t{font-family:var(--font-data);font-size:8px;letter-spacing:.12em;color:var(--sub);text-transform:uppercase}
.s-snap-bar .s{font-family:var(--font-mono);font-size:8px;color:var(--faint)}
.s-snap img{display:block;width:100%;object-fit:contain;background:#fff}
.s-snap::after{content:"";position:absolute;left:-1px;bottom:-1px;width:13px;height:13px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent)}
.s-snap.ph{min-height:2.4in;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;text-align:center;background:#f7f8fb;border-style:dashed}
.s-snap.ph .ph-t{font-family:var(--fd,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7c8592}
.s-snap.ph .ph-h{font-size:10.5px;color:#9aa3af}
.nt-noshot b{display:block;font-size:11px;letter-spacing:.14em;color:#8a93a0;margin-bottom:4px}
.shot-hero img{height:3.35in}

/* dedicated Additional-views page (classic/wide) — full grid, no clipping */
.s-vpage{display:grid;gap:.2in;margin-top:.14in}
.portrait .s-vpage{grid-template-columns:1fr 1fr}
.landscape .s-vpage{grid-template-columns:1fr 1fr 1fr}
.s-vcard{position:relative;background:#f4f6f8;border:1px solid var(--ln);overflow:hidden;display:flex;align-items:center;justify-content:center}
.portrait .s-vcard{height:3.15in}
.landscape .s-vcard{height:2.75in}
.s-vcard .vh{position:absolute;top:7px;left:9px;font-family:var(--font-data);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);z-index:2}
.s-vcard img{max-width:100%;max-height:100%;object-fit:contain}

/* general note */
.gnote{font-size:11px;line-height:1.5;background:#f7f8fb;border-left:3px solid var(--accent);padding:6px 11px;margin-top:11px}
.gnote b{font-family:var(--font-data);font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--sub);display:block;margin-bottom:2px}

/* ---- body flow (paginated sections) ---- */
.s-hero{flex-shrink:0}
.s-flow{display:grid;gap:0 18px;align-items:start;align-content:start;margin-top:2px}
.s-fcol{min-width:0}
/* landscape split — big snapshot left, data right */
.s-split{display:grid;grid-template-columns:1.12fr 1fr;gap:18px;margin-top:12px}
.s-split-left{min-width:0}
.s-split-left .s-snap{margin-top:0;height:4.35in;display:flex;flex-direction:column}
.s-split-left .s-snap img{flex:1;min-height:0;height:auto}
.s-split-right{min-width:0}
.s-split-right .s-flow{margin-top:0}

/* ---- section ---- */
.s-block{margin-top:13px;min-width:0}
.s-fcol > .s-block:first-child,.s-split-right .s-flow .s-fcol > .s-block:first-child{margin-top:0}
.s-sech{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.s-sech .bar{width:4px;height:13px;background:var(--accent);flex-shrink:0}
.s-sech h2{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0;white-space:nowrap}
.s-sech .ln{flex:1;height:1px;background:var(--ln)}
.s-sech .ct{font-weight:400;text-transform:none;letter-spacing:0;font-family:var(--font-data);font-size:8px;color:var(--faint)}
.mono .s-sech .bar{background:var(--ink)}

/* dimension list */
.s-dl{list-style:none;margin:0;padding:0}
.s-dl li{display:flex;align-items:center;gap:9px;font-size:11.5px;line-height:1.3;padding:3px 0;border-bottom:1px solid var(--ln2)}
.s-dl li:last-child{border-bottom:none}
.s-dl .n{flex-shrink:0;width:16px;height:16px;border-radius:3px;background:var(--ink);color:#fff;font-family:var(--font-data);font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center}
.s-dl .val{font-family:var(--font-mono);font-weight:700;font-size:12px;flex-shrink:0}
.s-dl .lab{color:var(--sub);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-dl li.crit .n{background:var(--accent)}
.s-dl li.crit .val{color:var(--accent)}
.s-dl .tag{margin-left:auto;flex-shrink:0;font-family:var(--font-data);font-size:7px;font-weight:700;letter-spacing:.07em;color:#fff;background:#d9252b;padding:2px 5px;border-radius:3px}

/* dimension table */
.s-dt{width:100%;border-collapse:collapse;font-size:10.5px}
.s-dt th{font-family:var(--font-data);font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;padding:4px 8px;border-bottom:1.4px solid var(--ink)}
.s-dt td{padding:4px 8px;border-bottom:1px solid var(--ln2);vertical-align:top}
.s-dt tr:last-child td{border-bottom:none}
.s-dt .m{font-family:var(--font-mono);font-weight:600}
.s-dt .cb{width:1%;white-space:nowrap;color:#d9252b;font-weight:700;font-family:var(--font-data);font-size:8px}
.s-dt tr.crit td{background:rgba(217,37,43,.055)}
.s-dt tr.crit .m{color:var(--accent)}

/* notes list */
.s-nl{list-style:none;margin:0;padding:0}
.s-nl li{position:relative;padding:4px 0 4px 26px;font-size:11.5px;line-height:1.4;border-bottom:1px solid var(--ln2)}
.s-nl li:last-child{border-bottom:none}
.s-nl li .n{position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--font-data);font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* tools table */
.s-tt{width:100%;border-collapse:collapse;font-size:10.5px}
.s-tt th{font-family:var(--font-data);font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;padding:4px 8px;border-bottom:1.4px solid var(--ink)}
.s-tt td{padding:4px 8px;border-bottom:1px solid var(--ln2);vertical-align:middle}
.s-tt tr:last-child td{border-bottom:none}
.s-tt .tn{font-family:var(--font-data);font-weight:600;color:#fff;background:var(--ink);border-radius:3px;padding:1px 6px;font-size:9px;display:inline-block}
.s-tt .m{font-family:var(--font-mono)}
.s-tt .dia{text-align:right;font-family:var(--font-mono);font-weight:600;white-space:nowrap}

/* tools list (compact) */
.s-tl{list-style:none;margin:0;padding:0}
.s-tl li{display:flex;align-items:center;gap:8px;font-size:11px;padding:3px 0;border-bottom:1px solid var(--ln2)}
.s-tl li:last-child{border-bottom:none}
.s-tl .tn{flex-shrink:0;font-family:var(--font-data);font-weight:600;color:#fff;background:var(--ink);border-radius:3px;padding:1px 6px;font-size:8.5px}
.s-tl .desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-tl .m{margin-left:auto;flex-shrink:0;font-family:var(--font-mono);color:var(--sub)}

/* cards flavour — boxed sections */
.cards .s-block{border:1px solid var(--ln);border-radius:6px;padding:9px 11px;box-shadow:0 1px 2px rgba(20,23,28,.05)}
.cards .s-sech{margin-bottom:5px}
.cards .s-sech .ln{display:none}
.s-muted{color:#9aa3af;font-size:11px}

/* ---- footer: sign-off + QR + copyright (last page only) ---- */
.s-footwrap{margin-top:auto;flex-shrink:0;padding-top:12px}
.s-footrow{display:flex;align-items:stretch;gap:14px}
.s-signrow{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--ln)}
.s-signrow .cell{padding:15px 10px 5px;border-left:1px solid var(--ln)}
.s-signrow .cell:first-child{border-left:none}
.s-signrow .cell .k{font-family:var(--font-data);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.s-qr{flex-shrink:0;display:flex;align-items:center;gap:9px;border:1px solid var(--ln);padding:6px 10px}
.s-qr svg,.s-qr img{width:0.62in;height:0.62in;display:block;image-rendering:pixelated}
.s-qr .cap{font-family:var(--font-data);font-size:8px;line-height:1.4;color:var(--sub);max-width:1in}
.s-qr .cap b{color:var(--ink);display:block;font-size:8.5px;letter-spacing:.02em}
.s-copyright{margin-top:7px;display:flex;flex-wrap:wrap;gap:3px 12px;align-items:center;justify-content:space-between;font-family:var(--font-data);font-size:7.5px;color:var(--faint);letter-spacing:.02em}
.s-copyright .s-conf{color:#c0392b;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* ---- continuation running head (page 2+) ---- */
.s-cont{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;border-bottom:1.5px solid var(--accent);padding-bottom:6px;margin-bottom:2px}
.s-cont-id{display:flex;align-items:center;gap:8px;font-family:var(--font-brand);font-style:italic;font-weight:600;font-size:13px;color:var(--ink);line-height:1}
.s-cont-id em{font-weight:600}
.s-cont .s-mark{display:inline-block;width:19px;height:auto;flex-shrink:0}
.s-cont-part{font-style:normal;font-weight:600;font-family:var(--font-mono);font-size:10px;color:var(--sub);border-left:1px solid var(--ln);padding-left:8px}
.s-cont-pg{font-family:var(--font-mono);font-size:10px;color:var(--sub);white-space:nowrap}
.s-pageno{font-weight:600}

/* PDF export chooser modal */
.pdfx{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(3,5,9,.72);backdrop-filter:blur(4px)}
.pdfx.show{display:flex}
.pdfx-panel{width:min(1080px,96vw);height:88vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pdfx-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line)}
.pdfx-head h3{font-family:var(--font-display);font-size:16px;font-weight:600}
.pdfx-body{display:flex;min-height:0;flex:1}
.pdfx-tpls{width:250px;flex-shrink:0;padding:14px;border-right:1px solid var(--line);overflow:auto}
.pdfx-tpl{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:9px;cursor:pointer;background:var(--panel-2);transition:border-color .15s,box-shadow .15s}
.pdfx-tpl:hover{border-color:var(--text-faint)}
.pdfx-tpl.sel{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.pdfx-tpl .tname{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:13.5px;margin-bottom:2px}
.pdfx-tpl .ttag{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.pdfx-tpl .tdesc{display:block;font-size:11px;color:var(--text-dim);line-height:1.35}
/* plan-locked templates (Free = Classic only) — grayed out, amber 🔒 tag, no select affordance */
.pdfx-tpl.locked,.pdfx-v2 .pdfx-tpl.locked{opacity:.5;cursor:not-allowed}
.pdfx-tpl.locked:hover,.pdfx-v2 .pdfx-tpl.locked:hover{border-color:var(--line);background:var(--panel-2);box-shadow:none}
.pdfx-tpl.locked .ttag{color:var(--amber);border-color:rgba(255,107,15,.45)}
.pdfx-preview{flex:1;min-width:0;overflow:auto;background:#565e69;display:flex;justify-content:center;align-items:flex-start;padding:24px}
.pdfx-preview-inner{transform-origin:top center}
.pdfx-page{margin-bottom:24px}
.pdfx-page:last-child{margin-bottom:0}
.pdfx-pglabel{font-family:var(--font-mono);font-size:14px;font-weight:600;color:#e7ecf2;margin-bottom:8px;letter-spacing:.03em}
.pdfx-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:13px 20px;border-top:1px solid var(--line)}
/* ===== PDF chooser v2 — Claude-Design full-screen redesign. Scoped under .pdfx-v2 so the
   generic class names (.head/.body/.rail/.stage/.opts/.grp/.chk/.field/.foot) can't collide
   with the rest of the app. The .sheet mock styles are intentionally dropped — the preview
   shows the app's real .sheet-doc page nodes at true print size. ===== */
.pdfx.pdfx-v2{align-items:stretch;justify-content:stretch;background:var(--panel);backdrop-filter:none}
.pdfx-v2{--fd:var(--font-display);--fm:var(--font-mono);--line-2:#26314a;--red:#d9252b}
.pdfx-v2 .modal{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--panel)}
.pdfx-v2 .head{position:relative;display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);flex-shrink:0}
.pdfx-v2 .head .mark{font-family:var(--fd);font-weight:700;font-style:italic;font-size:15px;letter-spacing:-.01em}
.pdfx-v2 .head .mark span{color:var(--amber)}
/* title block is centered in the header regardless of the brand / close-button widths */
.pdfx-v2 .head .pdfx-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:baseline;gap:11px;white-space:nowrap;pointer-events:none}
.pdfx-v2 .head h1{font-size:15px;font-weight:600;letter-spacing:.01em}
.pdfx-v2 .head .crumb{font-family:var(--fm);font-size:11px;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase}
.pdfx-v2 .head .crumb:not(:empty)::before{content:'·';margin-right:11px;color:var(--line-2)}
.pdfx-v2 .head .x{margin-left:auto;background:none;border:1px solid var(--line);color:var(--text-dim);width:32px;height:32px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.pdfx-v2 .head .x:hover{border-color:var(--line-2);color:var(--text)}
.pdfx-v2 .body{flex:1;min-height:0;display:flex}
.pdfx-v2 .rail{width:264px;flex-shrink:0;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel)}
.pdfx-v2 .rail-h{padding:13px 16px 10px;display:flex;align-items:baseline;justify-content:space-between}
.pdfx-v2 .rail-h .t{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.pdfx-v2 .rail-h .n{font-family:var(--fm);font-size:10px;color:var(--text-faint)}
.pdfx-v2 .rail-filter{display:flex;gap:4px;padding:0 12px 10px}
.pdfx-v2 .rail-filter button{flex:1;padding:5px 4px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-dim);cursor:pointer;font-family:var(--fm);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.pdfx-v2 .rail-filter button:hover{border-color:var(--line-2);color:var(--text)}
.pdfx-v2 .rail-filter button.on{border-color:var(--amber);color:var(--amber);background:rgba(255,107,15,.07)}
.pdfx-v2 .rail-list{flex:1;overflow-y:auto;padding:0 12px 14px}
.pdfx-v2 .pdfx-tpl{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:0;padding:10px 12px;margin-bottom:7px;cursor:pointer;background:var(--panel-2);color:var(--text)}
.pdfx-v2 .pdfx-tpl:hover{border-color:var(--line-2);background:var(--panel-3)}
.pdfx-v2 .pdfx-tpl.sel{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber);background:rgba(255,107,15,.06)}
.pdfx-v2 .pdfx-tpl .tname{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;font-size:13px;margin-bottom:3px}
.pdfx-v2 .pdfx-tpl.sel .tname{color:#fff}
.pdfx-v2 .pdfx-tpl .ttag{margin-left:auto;font-family:var(--fm);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--line);border-radius:0;padding:1px 5px}
.pdfx-v2 .pdfx-tpl.sel .ttag{color:var(--amber);border-color:rgba(255,107,15,.5)}
.pdfx-v2 .pdfx-tpl .tdesc{display:block;font-size:11px;color:var(--text-dim);line-height:1.4}
.pdfx-v2 .stage{flex:1;min-width:0;display:flex;flex-direction:column;background:#05070d}
.pdfx-v2 .stage-bar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--panel)}
.pdfx-v2 .pager{display:flex;align-items:center;gap:4px}
.pdfx-v2 .pager button{background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);width:28px;height:28px;cursor:pointer;font-size:15px;line-height:1}
.pdfx-v2 .pager button:hover{border-color:var(--line-2);color:var(--text)}
.pdfx-v2 .pager .lbl{font-family:var(--fm);font-size:11.5px;color:var(--text);padding:0 8px;white-space:nowrap;min-width:120px;text-align:center}
.pdfx-v2 .pager .lbl b{color:var(--amber);font-weight:600}
.pdfx-v2 .stage-bar .spacer{flex:1}
.pdfx-v2 .stage-bar .truesize{font-family:var(--fm);font-size:10px;color:var(--text-faint);letter-spacing:.03em}
.pdfx-v2 .zoom{display:flex;align-items:center;border:1px solid var(--line);overflow:hidden}
.pdfx-v2 .zoom button{background:var(--panel-2);border:none;border-left:1px solid var(--line);color:var(--text-dim);height:28px;min-width:30px;padding:0 9px;cursor:pointer;font-size:11.5px;font-family:var(--fm)}
.pdfx-v2 .zoom button:first-child{border-left:none}
.pdfx-v2 .zoom button:hover{color:var(--text)}
.pdfx-v2 .zoom button.on{background:var(--amber);color:#0a0e18;font-weight:600}
.pdfx-v2 .pdfx-preview{flex:1;min-height:0;overflow:auto;background:#454c58;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 0);background-size:16px 16px;display:block;padding:34px}
.pdfx-v2 .pdfx-preview-inner{display:flex;flex-direction:column;align-items:center;gap:26px;transform-origin:top center;min-width:min-content;margin:0 auto}
.pdfx-v2 .pdfx-page{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pdfx-v2 .pdfx-pglabel{font-family:var(--fm);font-size:11px;color:#cdd3dd;letter-spacing:.04em}
.pdfx-v2 .opts{width:344px;flex-shrink:0;border-left:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel)}
.pdfx-v2 .opts-scroll{flex:1;overflow-y:auto;padding:6px 0 12px}
.pdfx-v2 .grp{border-bottom:1px solid var(--line);padding:16px 18px}
.pdfx-v2 .grp:last-child{border-bottom:none}
.pdfx-v2 .grp-h{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.pdfx-v2 .grp-h .gt{font-family:var(--fd);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.pdfx-v2 .grp-h .opt-tag{font-family:var(--fm);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--line);padding:1px 6px}
.pdfx-v2 .grp-sub{font-size:11px;color:var(--text-dim);line-height:1.5;margin:-6px 0 12px}
.pdfx-v2 .addview{display:flex;align-items:center;gap:7px;background:var(--panel-2);border:1px dashed var(--line-2);color:var(--text);padding:8px 12px;cursor:pointer;font-size:12px;width:100%;justify-content:center;font-family:var(--fd)}
.pdfx-v2 .addview:hover{border-color:var(--amber);color:var(--amber)}
.pdfx-v2 .views{display:flex;gap:10px;flex-wrap:wrap;margin-top:11px}
.pdfx-v2 .views:empty{margin-top:0}
.pdfx-v2 .view-card{width:88px;position:relative}
.pdfx-v2 .view-thumb{width:88px;height:60px;background:#111726;border:1px solid var(--line);position:relative;display:block;overflow:hidden}
.pdfx-v2 .view-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdfx-v2 .view-thumb .rm{position:absolute;top:3px;right:3px;width:17px;height:17px;background:rgba(5,7,13,.85);border:1px solid var(--line);color:var(--text-dim);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.pdfx-v2 .view-thumb .rm:hover{color:var(--red);border-color:var(--red)}
.pdfx-v2 .view-card input{width:100%;margin-top:5px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-size:10.5px;font-family:var(--fm);padding:4px 6px}
.pdfx-v2 .view-card input:focus{outline:none;border-color:var(--amber)}
.pdfx-v2 .views-empty{font-size:11.5px;color:var(--text-faint);line-height:1.5;margin-top:11px}
.pdfx-v2 .acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pdfx-v2 .sw-wrap{display:flex;gap:8px;flex-wrap:wrap}
.pdfx-v2 .sw{width:26px;height:26px;border:2px solid transparent;cursor:pointer;position:relative;padding:0}
.pdfx-v2 .sw.sel{border-color:#fff;box-shadow:0 0 0 2px var(--scribe)}
.pdfx-v2 .acc-custom{display:flex;align-items:center;gap:6px;margin-left:2px}
.pdfx-v2 .acc-custom label{font-family:var(--fm);font-size:9px;color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase}
.pdfx-v2 input[type=color]{width:28px;height:28px;border:1px solid var(--line);background:none;cursor:pointer;padding:2px}
.pdfx-v2 .acc-reset{margin-left:auto;background:none;border:1px solid var(--line);color:var(--text-dim);font-size:10.5px;padding:5px 10px;cursor:pointer;font-family:var(--fm)}
.pdfx-v2 .acc-reset:hover{border-color:var(--line-2);color:var(--text)}
/* shop-logo option — preview chip on sheet-white so the logo reads as it will print */
.pdfx-v2 .logo-prev{background:#fff;border:1px solid var(--line);padding:9px 12px;display:flex;justify-content:center}
.pdfx-v2 .logo-prev img{display:block;height:28px;max-width:170px;object-fit:contain}
.pdfx-v2 .logo-acts{display:flex;gap:8px;margin-top:8px}
.pdfx-v2 .logo-acts .acc-reset{margin-left:0}
/* per-template logo print-size slider (under the logo preview in the chooser) */
.pdfx-v2 .logo-size{display:flex;align-items:center;gap:8px;margin-top:9px}
.pdfx-v2 .logo-size .ls-lab{font-size:11.5px;color:var(--text-dim);flex-shrink:0}
.pdfx-v2 .logo-size input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--scribe-dim),var(--scribe));outline:none;cursor:pointer}
.pdfx-v2 .logo-size input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--scribe);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--scribe);cursor:grab}
.pdfx-v2 .logo-size input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--scribe);border:2px solid var(--panel);cursor:grab}
.pdfx-v2 .logo-size .ls-val{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);width:44px;text-align:right;flex-shrink:0}
.pdfx-v2 .checks{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.pdfx-v2 .chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text);cursor:pointer}
.pdfx-v2 .chk input{width:16px;height:16px;accent-color:var(--amber);flex-shrink:0}
.pdfx-v2 .chk.wide{grid-column:1/-1}
.pdfx-v2 .qrhint{font-size:10.5px;color:var(--text-dim);line-height:1.5;margin-top:7px}
.pdfx-v2 .qrhint code{font-family:var(--fm);font-size:10px;color:var(--text)}
.pdfx-v2 .field{margin-top:13px}
.pdfx-v2 .field input[type=text]{width:100%;padding:9px 11px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-size:12.5px;font-family:inherit}
.pdfx-v2 .field input[type=text]:focus{outline:none;border-color:var(--amber)}
.pdfx-v2 .field input[type=text]::placeholder{color:var(--text-faint)}
.pdfx-v2 .foot{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--line);flex-shrink:0}
.pdfx-v2 .foot .foot-note{font-family:var(--fm);font-size:11px;color:var(--text-faint)}
.pdfx-v2 .foot .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pdfx-v2 .btn-line2{background:transparent;border:1px solid var(--line);color:var(--text-dim);padding:10px 18px;font-size:13px;cursor:pointer;font-family:var(--fd)}
.pdfx-v2 .btn-line2:hover{border-color:var(--line-2);color:var(--text)}
.pdfx-v2 .btn-export{display:flex;align-items:center;gap:9px;background:var(--amber);color:#0a0e18;border:none;padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fd)}
.pdfx-v2 .btn-export:hover{background:var(--amber-hi)}
.pdfx-v2 .btn-export .n{font-family:var(--fm);font-size:11px;background:rgba(5,7,13,.2);padding:1px 6px}
@media(max-width:1200px){.pdfx-v2 .opts{width:300px}.pdfx-v2 .rail{width:230px}}
@media(max-width:1120px){.pdfx-v2 .stage-bar .truesize{display:none}}
/* "Add view" capture bar (over the live viewport, chooser closed) */
.vcap-bar{position:fixed;left:50%;top:18px;transform:translate(-50%,-14px);z-index:210;display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  box-shadow:0 18px 46px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.vcap-bar.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.vcap-ico{font-size:15px}
.vcap-msg{font-size:13px;color:var(--text);white-space:nowrap}
/* "Frame the 3D view" — guide shaped like the sheet's photo box, over the live viewport */
.sf-guide{position:fixed;z-index:70;pointer-events:none;display:none}
.sf-guide .sf-rect{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1.5px solid rgba(255,255,255,.92);border-radius:2px;box-shadow:0 0 0 9999px rgba(4,6,10,.5)}
.sf-guide .sf-corner{position:absolute;width:16px;height:16px;border:2px solid var(--amber,#ff6b0f)}
.sf-guide .sf-corner.tl{left:-2px;top:-2px;border-right:0;border-bottom:0}
.sf-guide .sf-corner.tr{right:-2px;top:-2px;border-left:0;border-bottom:0}
.sf-guide .sf-corner.bl{left:-2px;bottom:-2px;border-right:0;border-top:0}
.sf-guide .sf-corner.br{right:-2px;bottom:-2px;border-left:0;border-top:0}
.sf-guide .sf-tag{position:absolute;left:0;top:-20px;font-family:var(--fd,monospace);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.pdfx-v2 .frame-sub{font-size:11px;color:var(--text-dim);margin-top:7px;line-height:1.45}
.pdfx-v2 .frame-sub a{color:var(--amber);text-decoration:none}
.pdfx-v2 .frame-sub a:hover{text-decoration:underline}
/* mouse / navigation settings modal */
.ctrlx-body{padding:14px 20px 4px;overflow:auto}
.ctrlx-lead{margin:0 0 12px;font-size:12.5px;color:var(--text-dim);line-height:1.4}
.nav-presets{display:flex;flex-direction:column;gap:9px}
.nav-preset{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;cursor:pointer;background:var(--panel-2);transition:border-color .15s,box-shadow .15s,background .15s}
.nav-preset:hover{border-color:var(--text-faint)}
.nav-preset.sel{border-color:var(--scribe);box-shadow:0 0 0 1px var(--scribe) inset;background:rgba(25,211,224,.06)}
.nav-preset .np-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nav-preset .np-name{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--text)}
.nav-preset .np-check{color:var(--scribe);font-weight:700;font-size:14px;opacity:0;transition:opacity .15s}
.nav-preset.sel .np-check{opacity:1}
.nav-preset .np-like{display:block;font-size:11px;color:var(--text-faint);margin:1px 0 8px}
.nav-preset .np-legend{display:flex;flex-wrap:wrap;gap:5px 6px}
.nav-preset .npl{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;background:rgba(9,14,24,.5)}
.nav-preset .npl b{color:var(--scribe);font-weight:600;margin-right:4px}
.nav-opts{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px;padding-top:13px;border-top:1px solid var(--line)}
.nav-opt{display:flex;align-items:flex-start;gap:9px;cursor:pointer;user-select:none}
.nav-opt input{accent-color:var(--scribe);width:16px;height:16px;margin-top:1px;cursor:pointer;flex:none}
.nav-opt b{display:block;font-size:12.5px;font-weight:600;color:var(--text)}
.nav-opt small{display:block;font-size:11px;color:var(--text-dim)}

/* ============================================================
   PRINT SHEET
   ============================================================ */
/* off-screen but laid out, so the one-page auto-fit can measure it */
#print-sheet{position:absolute;left:-10000px;top:0;z-index:-1}
@media print{
  body{overflow:visible;background:#fff;color:#111}
  body.app-body{height:auto}
  .nav,.app-main,#toast,.pdfx,#sb-measure{display:none!important}
  /* the marketing pages are authored for the dark theme: their explicit light inks (--text on
     .pw-tbl td, headings, teal ticks…) would print near-white on white. Scoped off .app-body so
     the #print-sheet path keeps the ink colors it sets for itself. */
  body:not(.app-body) *,body:not(.app-body) *::before,body:not(.app-body) *::after{
    color:#111!important;-webkit-text-fill-color:currentColor!important;background:transparent!important}
  /* the fixed blueprint grid would tile over page 1 when "background graphics" is on */
  body::before{display:none!important}
  #print-sheet{position:static;left:auto;z-index:auto}
  #print-sheet .sheet-doc{page-break-after:always;break-after:page}
  #print-sheet .sheet-doc:last-child{page-break-after:auto;break-after:auto}
  @page{margin:0.5in}
}

@media (max-width:880px){
  .nav{padding:12px 16px;gap:14px}
  .nav-links{display:none}
  .app-main{flex-direction:column}
  #panel{width:100%;height:44%;border-left:none;border-top:1px solid var(--line)}
}

/* phone-width nav: the amber CTA never fit (it overflowed off-screen and forced horizontal
   page scroll, squeezing "Log in" onto two lines) — hide it until the hamburger nav lands */
@media (max-width:520px){
  .nav{padding:12px 12px;gap:10px}
  .nav .nav-cta>a.btn-amber{display:none}
  #auth-slot{flex-shrink:0}
  #auth-slot .btn{white-space:nowrap;padding-left:8px;padding-right:8px}
  .nav-cta>.lang-switch{display:none} /* language lives in the hamburger panel at phone widths */
  /* body. prefix out-specifies the .home-fs brand sizing that comes later in the file */
  body.home-fs .nav .brand .logo{width:34px;height:32px}
  body.home-fs .nav .brand .name{font-size:21px}
}
@media (max-width:400px){
  .nav{gap:8px}
  body.home-fs .nav .brand .logo{width:30px;height:28px}
  body.home-fs .nav .brand .name{font-size:19px}
}

/* ============================================================
   AUTH (login / account modal — front-end preview, no backend)
   ============================================================ */
.auth-backdrop{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(4,7,14,.72);backdrop-filter:blur(6px);padding:20px;
}
.auth-backdrop.show{display:flex}
.auth-card{
  width:min(420px,100%);background:linear-gradient(165deg,var(--panel) 0%,var(--bg-deep) 100%);
  border:1px solid var(--line);border-radius:18px;padding:30px 28px;position:relative;
  box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 40px rgba(25,211,224,.07);
}
.auth-card .auth-close{position:absolute;top:12px;right:14px;color:var(--text-faint);font-size:18px;padding:4px 8px;border-radius:6px}
.auth-card .auth-close:hover{color:var(--text)}
.auth-card h2{font-family:var(--font-display);font-size:22px;margin-bottom:4px}
.auth-card .auth-sub{font-size:13px;color:var(--text-dim);margin-bottom:20px}
.auth-tabs{display:flex;gap:6px;margin-bottom:20px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:4px}
.auth-tabs button{flex:1;padding:8px;border-radius:7px;font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--text-faint);transition:all .15s}
.auth-tabs button.on{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.auth-card .field input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px}
.auth-card .field input:focus{border-color:var(--scribe)}
.auth-submit{width:100%;justify-content:center;margin-top:6px}
.auth-note{margin-top:16px;font-size:11.5px;color:var(--text-faint);font-family:var(--font-mono);line-height:1.6;text-align:center}
.auth-error{display:none;font-size:12.5px;color:var(--red);margin:-4px 0 10px}
.auth-error.show{display:block}
.auth-ok{display:none;font-size:12.5px;color:var(--green);margin:-4px 0 10px;line-height:1.45}
.auth-ok.show{display:block}
.auth-link{display:inline-block;background:none;border:0;color:var(--scribe);font-size:12.5px;margin:-2px 0 12px;cursor:pointer;text-decoration:none}
.auth-link:hover{text-decoration:underline}
.auth-turnstile{margin:2px 0 12px;min-height:0}
.auth-turnstile .cf-turnstile{display:flex;justify-content:center}
.toast-link{background:none;border:0;color:var(--scribe);text-decoration:underline;cursor:pointer;font:inherit;padding:0;margin-left:6px}
/* button busy/loading spinner (auth + profile submits while a request is in flight) */
.btn.is-loading{color:transparent!important;pointer-events:none;position:relative}
.btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:btnspin .6s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}


/* ============================================================
   BRAND REFRESH (2026-06) — engineering-instrument typography +
   sharper precision accents. Re-points the small uppercase
   technical labels to JetBrains Mono (--font-data) for a crisper
   shop-instrument feel; tuned sheet/number components keep
   IBM Plex Mono. Token palette refresh lives in :root above.
   ============================================================ */.how-step .n,
.price-card .badge,
.hero-hint,
.price-note,
.legal .updated,
footer .fnote,
footer .fcopy,
.nav-drop-menu a small,
.brand .tag {
  font-family:var(--font-data);
}
/* tighten the technical labels — JetBrains Mono sits a touch wider */.price-card .badge {letter-spacing:.14em}

.section-head{position:relative}

/* cards: unify on the refreshed elevation + radius + crisper hover */
.how-step,.price-card{box-shadow:var(--sh-1);transition:border-color .2s,transform .2s,box-shadow .2s}
.how-step:hover{border-color:var(--scribe);transform:translateY(-3px);box-shadow:var(--sh-2),var(--glow-scribe)}
.price-card{border-radius:var(--r-lg)}
.price-card.featured{box-shadow:var(--sh-2),0 0 30px rgba(255,107,15,.14)}
.how-step .n{font-family:var(--font-data);letter-spacing:.06em}

/* floating pill: resting depth, then a stronger lift once the page scrolls under it */
.nav{box-shadow:0 14px 44px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.nav.scrolled{
  background:rgba(8,11,19,.58);border-color:rgba(151,161,179,.16);
  box-shadow:0 18px 54px -16px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-links a{position:relative;letter-spacing:-.005em}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;border-radius:1px;
  background:var(--grad-action);transition:right .22s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover::after,.nav-links a.here::after{right:0}

/* primary action gradient text helper, reusable across pages */
.grad-text{background:linear-gradient(95deg,var(--scribe) 0%,var(--amber) 60%,var(--mcred) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   VISIBLE BACKGROUND UPGRADE (2026-06) — the flat near-black
   page becomes a layered shop-dark with depth; the hero gets a
   live machined backdrop. Marketing pages only (app uses its
   own viewport bg). Motion is reduced-motion guarded.
   ============================================================ */
body{
  /* keep the brand COLOUR (clean corner glows) — the blurry animated clouds (.bg-fx) stay off */
  background:
    radial-gradient(1100px 640px at 84% -8%, rgba(255,107,15,.16), transparent 56%),
    radial-gradient(980px 760px at -10% 6%, rgba(26,212,226,.11), transparent 54%),
    radial-gradient(760px 760px at 18% 48%, rgba(26,212,226,.13), transparent 58%),
    radial-gradient(900px 820px at 50% 118%, rgba(217,37,43,.10), transparent 58%),
    linear-gradient(180deg, #080b13 0%, var(--bg-deep) 62%, #04060d 100%);
  background-attachment:fixed;
}
/* Sticky footer: on pages shorter than the viewport, anchor the footer to the
   bottom so there's no empty band of background below it. Only affects pages that
   have a <footer> (the creator/tools pages are untouched). */
body:has(footer){min-height:100vh;display:flex;flex-direction:column}
body:has(footer) > footer{margin-top:auto}
/* faint full-page blueprint grid behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(120,150,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,150,200,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 0%,transparent 80%);
          mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 0%,transparent 80%);
}
/* keep real content above the fixed grid layer (NOT .nav — it must keep
   its own sticky position + z-index:60 so the Products dropdown stays above
   the hero canvas) */
.hero,.portals,.how,#pricing,footer,.legal{position:relative;z-index:1}
/* lift every marketing page's <main> above the .bg-fx aurora (not the creator app) */
body:not(.app-body) main{position:relative;z-index:1}

/* —— HERO: a live machined backdrop (overrides the quiet original) —— */
/* no border + glow/grid fade out toward the bottom so the hero blends seamlessly
   into the next section (only the continuous site background carries through). */
/* hero fills the viewport below the nav, so "drag to rotate" sits at the bottom of the
   screen and the next section stays below the fold until you scroll */
.hero{min-height:calc(100svh - 58px);border-bottom:0}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 74% 20%, rgba(255,107,15,.18) 0%, transparent 60%),
    radial-gradient(760px 540px at 8% 70%, rgba(217,37,43,.12) 0%, transparent 60%),
    radial-gradient(680px 520px at 30% 46%, rgba(26,212,226,.08) 0%, transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 92%);
  animation:heroGlow 14s ease-in-out infinite;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(rgba(150,170,200,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,170,200,.07) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 92% 70% at 54% 40%,#000 0%,transparent 78%);
          mask-image:radial-gradient(ellipse 92% 70% at 54% 40%,#000 0%,transparent 78%);
}
@keyframes heroGlow{
  0%,100%{opacity:.85;transform:translate3d(0,0,0)}
  50%{opacity:1;transform:translate3d(0,-10px,0)}
}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}

/* ============================================================
   SCROLL REVEAL (2026-06) — sections fade + rise into view as
   you scroll between them; grid cards stagger. JS adds .reveal
   (hidden) on load and .is-visible when the element enters the
   viewport (js/reveal.js). No-JS users see everything normally.
   Reduced-motion shows content with no movement.
   ============================================================ */
.reveal{
  opacity:0;transform:translateY(38px);
  transition:opacity .75s ease,transform .85s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none}
/* reduced-motion: keep a gentle fade (no movement) instead of nothing */
@media (prefers-reduced-motion:reduce){
  .reveal{transform:none;transition:opacity .6s ease}
  .reveal.is-visible{opacity:1}
}

/* WCS arrow visual-style picker + ★ favorite (creator WCS tab) */
.wcs-sty-hint{font-family:var(--font-data);font-size:10px;color:var(--text-faint);letter-spacing:.04em;font-weight:400;text-transform:none}
.wcs-styles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:2px 0 4px}
.wcs-sty{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--panel-2);transition:border-color .15s,background .15s}
.wcs-sty:hover{border-color:var(--text-faint)}
.wcs-sty.on{border-color:var(--scribe);background:var(--scribe-dim)}
.wcs-sty-pick{flex:1;text-align:left;padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--text-dim);cursor:pointer;font-family:var(--font-display)}
.wcs-sty.on .wcs-sty-pick{color:var(--text)}
.wcs-sty-fav{width:30px;flex:none;font-size:14px;line-height:1;color:var(--text-faint);cursor:pointer;border-left:1px solid var(--line);transition:color .15s,background .15s}
.wcs-sty-fav:hover{color:var(--amber-hi);background:var(--amber-dim)}
.wcs-sty.fav .wcs-sty-fav{color:var(--amber)}
.wcs-sty.fav{border-color:var(--amber)}

/* ============================================================
   DROPZONE — empty-state background: falling "G-code rain"
   (Claude-Design). A <canvas id="dz-rain"> paints columns of
   drifting G-code tokens in the brand amber, brighter near the
   cursor, with occasional flares; a soft vignette frames it.
   Drawn by initDropzoneRain() in app.js (empty state only).
   Reduced-motion: JS skips the rAF and paints one static frame.
   ============================================================ */
#dropzone{background:radial-gradient(120% 85% at 50% 30%,#2a1d18 0%,#1c130f 45%,#120b08 100%);backdrop-filter:blur(2px)}
.dz-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#dz-rain{position:absolute;inset:0;width:100%;height:100%;display:block}
.dz-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 220px 60px rgba(5,7,11,.9)}

/* General setup notes — auto-growing textarea (grows down with long text instead
   of a single line scrolling and hiding the start; JS caps height then it scrolls) */
.field textarea.job-notes{
  width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:13.5px;font-family:var(--font-mono);line-height:1.5;
  resize:none;overflow-y:auto;min-height:40px;max-height:280px;display:block;
}
.field textarea.job-notes:hover{border-color:var(--text-faint)}
.field textarea.job-notes:focus{border-color:var(--scribe);outline:none}

/* accepted-format hint inside the F360 / MCAM import buttons (tools.html) */
.ib-fmt{font-family:var(--font-data);font-size:9.5px;letter-spacing:.02em;font-weight:600;padding:2px 6px;border-radius:5px;white-space:nowrap}
.ib-fmt-f{color:var(--amber);background:var(--amber-dim)}
.ib-fmt-m{color:var(--scribe);background:var(--scribe-dim)}
.ib-fmt-n{color:#57e389;background:rgba(87,227,137,.12)}

/* ============================================================
   LEARN / tutorial page (learn.html)
   ============================================================ */
.learn-hero{max-width:880px;margin:0 auto;padding:74px 28px 46px;text-align:center;position:relative;z-index:1}
.learn-hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,5vw,52px);line-height:1.06;letter-spacing:-.02em;margin-bottom:18px}
.learn-sub{font-size:17px;color:var(--text-dim);max-width:620px;margin:0 auto 28px;line-height:1.6}
.learn-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.learn-meta{margin-top:34px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.learn-meta span{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);
  font-family:var(--font-data);font-size:11.5px;color:var(--text-faint);letter-spacing:.02em;box-shadow:var(--sh-1)}
.learn-meta b{color:var(--scribe);font-weight:600}

/* workflow overview */
.learn-overview{max-width:1080px;margin:0 auto;padding:34px 28px 8px;position:relative;z-index:1}

/* step-by-step */
.learn-steps{max-width:1080px;margin:0 auto;padding:40px 28px;display:flex;flex-direction:column;gap:26px;position:relative;z-index:1}
.learn-step{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--panel-2) 0%,var(--panel) 100%);
  padding:30px;box-shadow:var(--sh-1);transition:border-color .2s,box-shadow .2s,transform .2s}
.learn-step:hover{border-color:var(--line);box-shadow:var(--sh-2)}
.learn-step:nth-child(even){grid-template-columns:.95fr 1.05fr}
.learn-step:nth-child(even) .ls-media{order:-1}
.ls-body h3{font-family:var(--font-display);font-size:clamp(20px,2.4vw,25px);font-weight:700;letter-spacing:-.01em;margin-bottom:11px}
.ls-body p{color:var(--text-dim);font-size:15px;line-height:1.65;margin-bottom:16px}
.ls-body .mono{font-family:var(--font-mono);color:var(--scribe);font-size:.92em}
.ls-tips{list-style:none;display:grid;gap:9px}
.ls-tips li{position:relative;padding-left:24px;font-size:13.5px;color:var(--text-dim);line-height:1.5}
.ls-tips li::before{content:"";position:absolute;left:2px;top:7px;width:8px;height:8px;border-radius:2px;background:var(--grad-action)}
.ls-tips b{color:var(--text);font-weight:600}

/* video placeholder — clearly a "coming soon" slot, but premium + alive */
.learn-video{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(120% 120% at 50% 0,#121a2b 0%,#0a0e18 70%);border:1px solid var(--line)}
.learn-video::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(26,212,226,.07) 48%,rgba(255,107,15,.06) 54%,transparent 70%);
  background-size:280% 100%;animation:lvSheen 6s ease-in-out infinite}
@keyframes lvSheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.lv-play{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;color:#fff;background:var(--grad-action);
  box-shadow:var(--glow-amber),inset 0 1px 0 rgba(255,255,255,.25);padding-left:4px}
.learn-video.sm .lv-play{width:48px;height:48px}
.lv-soon{position:relative;z-index:1;font-family:var(--font-data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);border:1px solid var(--line);border-radius:99px;padding:5px 12px;background:rgba(7,11,20,.5)}
@media (prefers-reduced-motion:reduce){.learn-video::after{animation:none}}

/* more walkthroughs grid */
.learn-more{max-width:1080px;margin:0 auto;padding:26px 28px 8px;position:relative;z-index:1}
.learn-vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.learn-vcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel-2);padding:16px;box-shadow:var(--sh-1);
  transition:border-color .2s,transform .2s}
.learn-vcard:hover{border-color:var(--scribe);transform:translateY(-3px)}
.learn-vcard h4{font-family:var(--font-display);font-size:16px;font-weight:600;margin:14px 0 6px}
.learn-vcard p{font-size:13px;color:var(--text-dim);line-height:1.55}
.learn-vcard .mono{font-family:var(--font-mono);color:var(--scribe);font-size:.9em}

/* closing CTA */
.learn-cta{max-width:760px;margin:40px auto 0;padding:54px 28px 70px;text-align:center;position:relative;z-index:1}
.learn-cta h2{font-family:var(--font-display);font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.learn-cta p{color:var(--text-dim);font-size:15.5px;margin-bottom:24px}

@media (max-width:760px){
  .learn-step,.learn-step:nth-child(even){grid-template-columns:1fr}
  .learn-step:nth-child(even) .ls-media{order:0}
}

/* ============================================================
   SITE-WIDE animated background (.bg-fx) — drifting aurora +
   slow light sweep + grain, fixed behind all content. Tuned
   subtle so page text stays readable. Used on the landing.
   ============================================================ */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
@keyframes bgfxA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,8vh) scale(1.18)}}
@keyframes bgfxB{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(7vw,-6vh) scale(.9)}}
@keyframes bgfxC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,-7vh) scale(1.24)}}
@keyframes bgfxSweep{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* scroll parallax for the landing background (--sy = scrollY px, set by reveal.js).
   Offsets compose with the blobs' own drift keyframes; different rates = depth. */
:root{--sy:0}

/* ============================================================
   "CAM to floor" section — branded perspective grid horizon
   bands at the top + bottom edges (glowing, animated, receding).
   ============================================================ */
.how{position:relative;overflow:hidden}
.how-inner{position:relative;z-index:1}
.how::before,.how::after{content:"";position:absolute;left:50%;width:230%;height:150px;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,107,15,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(26,212,226,.28) 1px,transparent 1px);
  background-size:48px 48px;filter:drop-shadow(0 0 5px rgba(255,107,15,.2))}
.how::before{top:0;transform-origin:top center;transform:translateX(-50%) perspective(300px) rotateX(-74deg);
  -webkit-mask-image:linear-gradient(#000 32%,transparent 92%);mask-image:linear-gradient(#000 32%,transparent 92%);animation:howGridTop 16s linear infinite}
.how::after{bottom:0;transform-origin:bottom center;transform:translateX(-50%) perspective(300px) rotateX(74deg);
  -webkit-mask-image:linear-gradient(transparent 8%,#000 64%);mask-image:linear-gradient(transparent 8%,#000 64%);animation:howGridBot 16s linear infinite}
@keyframes howGridTop{to{background-position:0 -48px}}
@keyframes howGridBot{to{background-position:0 48px}}
@media (prefers-reduced-motion:reduce){.how::before,.how::after{animation:none}}

/* landing pricing — 3 plans (matches pricing.html) + animated "see full pricing" CTA */
.pricing-inner{max-width:1040px}
.price-grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.price-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.price-grid-4{grid-template-columns:1fr}}
.price-cta-wrap{display:flex;justify-content:center;margin-top:26px}
.price-allcta{position:relative;overflow:hidden;font-size:15px;padding:13px 30px;animation:priceCtaPulse 3s ease-in-out infinite}
@keyframes priceCtaPulse{
  0%,100%{box-shadow:var(--glow-amber),inset 0 1px 0 rgba(255,255,255,.22)}
  50%{box-shadow:0 0 36px rgba(255,107,15,.55),inset 0 1px 0 rgba(255,255,255,.24)}
}
.price-allcta::after{content:"";position:absolute;top:0;left:-65%;width:42%;height:100%;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);animation:priceCtaShine 3.6s ease-in-out infinite}
@keyframes priceCtaShine{0%{left:-65%}42%,100%{left:135%}}
.price-allcta:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.price-allcta,.price-allcta::after{animation:none}}


/* ============================================================
   CONTACT page (contact.html) — premium glass split layout
   ============================================================ */
.contact{max-width:1080px;margin:0 auto;padding:64px 28px 90px;position:relative;z-index:1}
.ct-lede{font-size:16.5px;color:var(--text-dim);line-height:1.65;max-width:600px}
.ct-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:24px;align-items:start}
/* channels */
.ct-channels{display:flex;flex-direction:column;gap:12px}
.ct-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));box-shadow:var(--sh-1);transition:border-color .2s,transform .2s,box-shadow .2s;color:inherit}
a.ct-card:hover{border-color:var(--scribe);transform:translateY(-2px);box-shadow:var(--sh-2),var(--glow-scribe)}
.ct-ic{flex:none;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--grad-action);box-shadow:var(--glow-amber)}
.ct-ic svg{width:20px;height:20px}
.ct-card-k{font-family:var(--font-data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:3px}
.ct-card-v{font-size:14.5px;color:var(--text);font-weight:500}
.ct-note{font-size:13px;color:var(--text-faint);line-height:1.6;padding:4px 6px;margin-top:4px}
.ct-note b{color:var(--text-dim)}
/* glass form */
.ct-form{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-xl);padding:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));backdrop-filter:blur(12px);
  box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.06)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-field{display:flex;flex-direction:column;margin-bottom:14px}
.ct-field label{font-family:var(--font-data);font-size:11px;letter-spacing:.06em;color:var(--text-dim);margin-bottom:7px}
.ct-opt{color:var(--text-faint);text-transform:none;letter-spacing:0}
.ct-field input,.ct-field select,.ct-field textarea{
  width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font-size:14px;font-family:var(--font-body);transition:border-color .18s,box-shadow .18s}
.ct-field textarea{resize:vertical;min-height:110px;line-height:1.55}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--text-faint)}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{outline:none;border-color:var(--scribe);box-shadow:0 0 0 3px var(--scribe-dim)}
.ct-send{width:100%;justify-content:center;font-size:15px;padding:13px;margin-top:4px}
.ct-sent{margin-top:14px;font-size:13.5px;color:var(--green);background:rgba(65,201,124,.08);border:1px solid rgba(65,201,124,.3);border-radius:var(--r-sm);padding:11px 13px}
.ct-fineprint{margin-top:14px;font-size:11.5px;color:var(--text-faint);line-height:1.55}
@media (max-width:780px){.ct-grid{grid-template-columns:1fr}.ct-row{grid-template-columns:1fr}}

/* aurora restored, but DE-BLURRED — vibrant colour, crisp instead of smoky */

/* ============================================================
   NEWS / changelog page (news.html) — timeline of releases
   ============================================================ */
.news{max-width:860px;margin:0 auto;padding:64px 28px 90px;position:relative;z-index:1}
.news-head{max-width:640px;margin-bottom:44px}
.news-head h1{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5.5vw,56px);line-height:1.04;letter-spacing:-.02em;margin-bottom:14px}
.news-lede{font-size:16.5px;color:var(--text-dim);line-height:1.65;max-width:600px}
/* a release entry, with a timeline rail on the left */
.news-release{display:grid;grid-template-columns:26px 1fr;gap:20px;align-items:start}
.nr-rail{position:relative;height:100%;display:flex;justify-content:center;padding-top:8px}
.nr-rail::before{content:"";position:absolute;top:8px;bottom:-20px;width:2px;background:linear-gradient(var(--line),transparent)}
.nr-dot{position:relative;width:14px;height:14px;border-radius:50%;background:var(--grad-action);box-shadow:var(--glow-amber);flex:none}
.nr-body{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--panel-2),var(--panel));
  padding:24px 26px 22px;box-shadow:var(--sh-1);margin-bottom:26px}
.nr-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.nr-ver{font-family:var(--font-data);font-size:11.5px;font-weight:700;color:#fff;background:var(--grad-action);padding:5px 12px;border-radius:99px;box-shadow:var(--glow-amber)}
.nr-date{font-family:var(--font-data);font-size:12.5px;color:var(--text-faint)}
.nr-body h2{font-family:var(--font-display);font-size:clamp(20px,2.6vw,26px);font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.nr-intro{color:var(--text-dim);font-size:15px;line-height:1.6;margin-bottom:18px}
.nr-sec{margin-top:18px}
.nr-sec h3{font-family:var(--font-data);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--scribe);margin-bottom:11px;
  display:flex;align-items:center;gap:9px}
.nr-sec h3::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--scribe)}
.nr-sec ul{list-style:none;display:grid;gap:9px}
.nr-sec li{position:relative;padding-left:22px;font-size:14.5px;color:var(--text-dim);line-height:1.55}
.nr-sec li::before{content:"";position:absolute;left:3px;top:8px;width:7px;height:7px;border-radius:2px;background:var(--grad-action)}
.nr-sec b{color:var(--text);font-weight:600}
.nr-soon h3{color:var(--amber)}
.nr-soon h3::before{background:var(--amber)}
.nr-soon li::before{background:var(--amber)}
.news-foot{margin:18px 0 0 46px;font-size:14px;color:var(--text-faint)}
.news-foot a{color:var(--scribe)}
.news-foot a:hover{text-decoration:underline}
@media (max-width:600px){.news-release{grid-template-columns:1fr}.nr-rail{display:none}.news-foot{margin-left:0}}

/* ============================================================
   Social links (Contact / About) — icon buttons, platform-tinted on hover
   ============================================================ */
.social-block{margin-top:6px}
.social-label{font-family:var(--font-data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px}
.social-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text-dim);box-shadow:var(--sh-1);
  transition:color .2s,border-color .2s,background .2s,transform .2s}
.social-btn svg{width:21px;height:21px}
.social-btn:hover{transform:translateY(-2px)}
.social-btn.yt:hover{color:#ff3b30;border-color:rgba(255,59,48,.55);background:rgba(255,59,48,.1)}
.social-btn.dc:hover{color:#7a86ff;border-color:rgba(122,134,255,.55);background:rgba(122,134,255,.1)}

/* ---- My Projects modal (cloud project list) ---- */
.proj-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px;background:var(--panel-2)}
.proj-row:hover{border-color:var(--text-faint)}
.proj-info{min-width:0}
.proj-name{font-weight:600;font-size:14px;display:flex;align-items:center}
.proj-meta{font-size:11.5px;color:var(--text-faint);font-family:var(--font-data,monospace);margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
.proj-acts{display:flex;gap:6px;flex-shrink:0}

/* ===== account avatar + menu + profile editor ===== */
.av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  font-family:var(--font-display);font-weight:700;font-size:11px;color:#fff;letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 1px 4px rgba(0,0,0,.35);flex-shrink:0;text-transform:uppercase}
.av-lg{width:38px;height:38px;font-size:14px}
.av-xl{width:60px;height:60px;font-size:22px}
.nav-acct{position:relative}
.nav-avatar{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel-2);transition:border-color .15s,background .15s;max-width:200px}
.nav-avatar:hover{border-color:var(--text-faint)}
.nav-acct-name{font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.acct-menu{position:absolute;top:calc(100% + 8px);right:0;width:248px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2,0 12px 32px rgba(0,0,0,.45));
  padding:8px;z-index:80}
.acct-menu[hidden]{display:none}
.acct-id{display:flex;gap:10px;align-items:center;padding:8px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-id-txt{min-width:0}
.acct-id-name{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-id-email{font-size:11.5px;color:var(--text-dim);font-family:var(--font-mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-id-sub{font-size:10.5px;color:var(--text-faint);font-family:var(--font-data,monospace);
  text-transform:uppercase;letter-spacing:.03em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-mi{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;font-size:13px;
  color:var(--text-dim);font-family:var(--font-display);font-weight:500;transition:background .12s,color .12s}
.acct-mi:hover{background:var(--bg);color:var(--text)}
.prof-card{max-width:480px}
.prof-av-row{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.prof-swatches{display:flex;flex-wrap:wrap;gap:7px}
.prof-sw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;transition:transform .12s,border-color .12s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.prof-sw:hover{transform:scale(1.12)}
.prof-sw.is-sel{border-color:var(--text)}
.prof-sw-auto{background:var(--panel);color:var(--text-faint);font-family:var(--font-mono);font-size:10px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.prof-card textarea.job-notes{width:100%;min-height:48px}

/* ===== "My work" panel — projects + tool libraries (creator) ===== */
.pdfx-panel.mw-panel{width:min(960px,96vw);height:auto;max-height:88vh}
.mw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 14px}
.mw-title{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--text)}
.mw-sub{font-family:var(--font-data,monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:4px}
.mw-x{width:34px;height:34px;border-radius:9px;color:var(--text-faint);font-size:15px;border:1px solid var(--line);flex:none;transition:color .15s,border-color .15s}
.mw-x:hover{color:var(--text);border-color:var(--text-faint)}
.mw-tabs{display:flex;gap:18px;padding:0 24px;border-bottom:1px solid var(--line)}
.mw-tab{padding:10px 2px;margin-bottom:-1px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text-faint);border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.mw-tab:hover{color:var(--text-dim)}
.mw-tab.on{color:var(--text);border-bottom-color:var(--amber)}
.mw-body{overflow:auto;padding:18px 24px 24px;flex:1;min-height:200px}
.mw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.mw-card{position:relative;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:18px 16px 16px;
  display:flex;flex-direction:column;gap:7px;transition:transform .18s,border-color .18s,box-shadow .18s}
.mw-card:hover{transform:translateY(-3px);border-color:rgba(255,107,15,.42);box-shadow:0 12px 28px rgba(0,0,0,.34)}
.mw-card.is-open{border-color:var(--scribe)}
.mw-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mw-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--amber);
  background:linear-gradient(135deg,rgba(255,107,15,.16),rgba(217,37,43,.1));border:1px solid rgba(255,107,15,.3)}
.mw-ic svg{width:20px;height:20px}
.mw-badge{font-size:9.5px;font-family:var(--font-data,monospace);text-transform:uppercase;letter-spacing:.05em;color:var(--scribe);border:1px solid var(--scribe);border-radius:6px;padding:2px 6px}
.mw-src{font-size:9.5px;font-family:var(--font-data,monospace);text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.mw-card-name{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text);line-height:1.25;word-break:break-word}
.mw-card-meta{font-size:12px;color:var(--text-dim)}
.mw-card-time{font-size:10.5px;color:var(--text-faint);font-family:var(--font-data,monospace);text-transform:uppercase;letter-spacing:.03em}
.mw-card-peek{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);letter-spacing:.04em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mw-card-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.mw-card-acts .btn{flex:1 1 auto;justify-content:center;min-width:60px}
.mw-fav{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;font-size:13px;line-height:1;color:var(--text-faint);
  background:var(--panel);border:1px solid var(--line);transition:color .15s,transform .12s,border-color .15s;z-index:2}
.mw-fav:hover{transform:scale(1.12);color:#e0a019}
.mw-fav.on{color:#ffc23d;border-color:rgba(255,194,61,.5);text-shadow:0 0 8px rgba(255,194,61,.45)}
.mw-empty{text-align:center;padding:48px 20px;color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:14px}
.mw-empty-ic{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--text-faint);background:var(--panel-2);border:1px solid var(--line)}
.mw-empty-ic svg{width:26px;height:26px}
.acct-mi-sep{border-top:1px solid var(--line);margin-top:4px;padding-top:11px}
/* Full-page "Projects" home (shown when no STEP is loaded; the modal is for quick-manage while editing) */
.pdfx.mw-full{background:var(--bg)}
.pdfx.mw-full .pdfx-panel.mw-panel{width:100vw;height:100vh;max-width:none;max-height:none;border-radius:0;border:0;background:transparent;box-shadow:none}
.pdfx.mw-full .mw-head,.pdfx.mw-full .mw-tabs,.pdfx.mw-full .mw-body{width:100%;max-width:1160px;margin-left:auto;margin-right:auto}
.pdfx.mw-full .mw-head{padding:30px 28px 16px}
.pdfx.mw-full .mw-tabs{padding:0 28px}
.pdfx.mw-full .mw-body{padding:24px 28px 60px}
.pdfx.mw-full .mw-title{font-size:26px}
.pdfx.mw-full .mw-grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
/* unsaved-changes guard dialog */
.unsaved-panel{width:min(440px,94vw);height:auto;padding:26px 26px 22px}
.unsaved-h{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text);margin-bottom:8px}
.unsaved-p{color:var(--text-dim);font-size:14px;line-height:1.55;margin-bottom:20px}
.unsaved-acts{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
/* My-work toolbar (search + sort + favorites filter) — scales to 1000s of projects */
.mw-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.mw-search{flex:1 1 220px;min-width:160px;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font-size:13.5px;color:var(--text)}
.mw-search:focus{border-color:var(--scribe);outline:none}
.mw-sort{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:13px;color:var(--text-dim);cursor:pointer}
.mw-tb-link{margin-left:auto}
.mw-chip{display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text-dim);font-size:12.5px;font-family:var(--font-display);font-weight:600;transition:all .15s}
.mw-chip:hover{border-color:var(--text-faint);color:var(--text)}
.mw-chip.on{border-color:rgba(255,194,61,.55);color:#ffc23d;background:rgba(255,194,61,.08)}
.mw-more{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.mw-more-count{font-family:var(--font-data,monospace);font-size:11px;letter-spacing:.04em;color:var(--text-faint)}
/* My-work: project download/import bar */
.mw-filebar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
/* "log in to continue" gate (creator Tools tab + tools.html library page) */
.auth-gate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:44px 24px;max-width:440px;margin:0 auto}
.auth-gate-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;color:var(--amber);
  background:linear-gradient(150deg,rgba(255,107,15,.16),rgba(25,211,224,.10));border:1px solid rgba(255,107,15,.3);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.auth-gate-ic svg{width:29px;height:29px}
.auth-gate-h{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--text);letter-spacing:-.01em}
.auth-gate-p{font-size:13.5px;line-height:1.6;color:var(--text-dim);margin:0;max-width:360px}
.auth-gate .btn{margin-top:4px;min-width:160px}
.auth-gate-link{background:none;border:0;color:var(--text-faint);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;padding:2px}
.auth-gate-link:hover{color:var(--scribe)}
.auth-gate-page{min-height:56vh;justify-content:center;padding:70px 24px}
/* creator dropzone: login prompt (logged out) vs upload CTA (logged in); the vise animation stays in both */
#dropzone .dz-login{display:none}
#dropzone.logged-out .dz-login{display:block}
#dropzone.logged-out .dz-upload{display:none}

/* ===== plan badge + subscription / billing ===== */
.plan-badge{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.03em;
  text-transform:uppercase;padding:3px 9px;border-radius:7px;border:1px solid var(--line);color:var(--text-dim);background:var(--panel-2)}
.plan-badge.plan-pro{color:#ffb060;border-color:rgba(255,107,15,.5);background:rgba(255,107,15,.1)}
.plan-badge.plan-shop{color:#5fd6e4;border-color:rgba(25,211,224,.5);background:rgba(25,211,224,.1)}
.plan-badge.plan-custom{color:#c79bef;border-color:rgba(176,106,217,.5);background:rgba(176,106,217,.1)}
.acct-menu .acct-mi{display:flex;align-items:center;gap:8px}
.acct-plan{margin-left:auto;font-family:var(--font-data,monospace);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint)}
.prof-plan{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.prof-plan-k{font-family:var(--font-data,monospace);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:6px}
.prof-plan-name{display:flex;align-items:center;gap:9px}
.prof-plan-price{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text)}
/* cloud-storage meter */
.prof-stg{border:1px solid var(--line);border-radius:12px;padding:13px 16px 15px;margin-bottom:16px;background:var(--panel-2)}
.prof-stg-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.prof-stg-h>span:first-child{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--text)}
.prof-stg-sum{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim)}
.prof-stg-bar{position:relative;display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--panel-3,#20242c)}
.prof-stg-seg{height:100%}
.prof-stg-track{flex:1}
.prof-stg-seg.c-proj{background:var(--amber)}
.prof-stg-seg.c-shr{background:#6f87ff}
.prof-stg-seg.c-lib{background:var(--scribe)}
.prof-stg-legend{margin-top:11px;display:grid;gap:6px}
.prof-stg-row{display:flex;align-items:center;gap:8px;font-size:12px}
.prof-stg-dot{width:8px;height:8px;border-radius:2px;flex:none}
.prof-stg-dot.c-proj{background:var(--amber)}
.prof-stg-dot.c-shr{background:#6f87ff}
.prof-stg-dot.c-lib{background:var(--scribe)}
.prof-stg-lab{color:var(--text-dim)}
.prof-stg-val{margin-left:auto;font-family:var(--font-mono);color:var(--text);font-weight:500}
.prof-stg-hint{margin:11px 0 0;font-size:11.5px;color:var(--amber)}
.prof-stg-hint .prof-stg-up{color:var(--amber);text-decoration:underline}
.sub-card{max-width:560px;max-height:90vh;overflow:auto}
.sub-current{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:22px;background:var(--panel-2)}
.sub-cur-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
/* --text-dim, not --text-faint: this line carries real pricing (annual rate + saving) and faint
   on --panel-2 measures 3.2:1 — under AA for 10.5px text */
.sub-annual{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);margin:-7px 0 11px}
.sub-plan .sub-annual{margin:2px 0 7px}
.sub-cur-price{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text);margin-left:9px}
.sub-status{font-family:var(--font-data,monospace);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;border-radius:7px;white-space:nowrap}
.sub-status.is-active{color:#5fd6e4;background:rgba(25,211,224,.12);border:1px solid rgba(25,211,224,.4)}
.sub-incl{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.sub-incl li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-dim);border-bottom:1px solid var(--line);padding:6px 0}
.sub-incl li b{color:var(--text);font-weight:600}
.sub-plans-h{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text);margin-bottom:12px}
.sub-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:16px}
.sub-plan{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--panel-2)}
.sub-plan.is-cur{border-color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,107,15,.3)}
.sub-plan-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.sub-plan-name{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text)}
.sub-plan-price{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text)}
.sub-plan-price small{font-size:10px;color:var(--text-faint);font-weight:500}
.sub-plan-tag{font-size:11.5px;color:var(--text-dim);line-height:1.45;flex:1}
.sub-plan .btn{width:100%;justify-content:center}
.sub-note{font-size:11.5px;color:var(--text-faint);font-family:var(--font-mono);line-height:1.6;text-align:center;margin-top:4px}
/* owner seat-mode (shop/custom owner only) */
.sub-seat{border:1px solid var(--line);border-radius:14px;padding:14px 16px 12px;margin-bottom:22px;background:var(--panel-2)}
.sub-seat-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.sub-seat-h>span:first-child{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text)}
.sub-seat-count{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint)}
.seat-opts{display:grid;gap:8px}
.seat-opt{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"r t" "r d";gap:1px 10px;align-items:start;
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;background:var(--panel)}
.seat-opt.is-on{border-color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,107,15,.3)}
.seat-opt input{grid-area:r;margin-top:2px;accent-color:var(--amber)}
.seat-opt-t{grid-area:t;font-weight:600;font-size:13px;color:var(--text)}
.seat-opt-d{grid-area:d;font-size:11.5px;color:var(--text-dim);line-height:1.45}
.seat-help{margin-top:10px}
.seat-help summary{font-size:12px;color:var(--scribe);cursor:pointer;list-style:none;font-family:var(--font-mono)}
.seat-help summary::-webkit-details-marker{display:none}
.seat-help summary::before{content:"ⓘ ";opacity:.8}
.seat-help p{font-size:11.5px;color:var(--text-dim);line-height:1.6;margin:8px 2px 2px}
@media (max-width:520px){.sub-incl{grid-template-columns:1fr}}

/* ===================== G-code backplot tab (app.html) ===================== */
.gcode-tab{display:flex;flex-direction:column}
.gc-disclaimer{display:flex;gap:7px;align-items:flex-start;font-size:11px;line-height:1.45;color:var(--text-dim);
  background:rgba(217,37,43,.07);border:1px solid rgba(217,37,43,.28);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:12px}
.gc-file{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px}
.gc-name{font-family:var(--font-mono);font-size:12px;color:var(--text);font-weight:600;word-break:break-all}
.gc-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);white-space:nowrap;flex-shrink:0}
.gc-note{font-size:11px;line-height:1.45;color:var(--text-dim);background:rgba(255,107,15,.07);
  border:1px solid rgba(255,107,15,.25);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:10px}
.gc-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text);cursor:pointer;padding:5px 0}
.gc-toggle input{accent-color:var(--scribe);cursor:pointer}
.gc-sw{width:18px;height:0;border-top-width:3px;border-top-style:solid;border-radius:2px;flex-shrink:0}
.gc-sw.feed{border-top-color:#57e389}
.gc-sw.rapid{border-top-style:dashed;border-top-color:#ff8a3c}
.gc-tools{display:flex;flex-direction:column;gap:5px}
.gc-trow{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:6px 9px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.gc-trow .gc-tk{color:var(--text-dim);line-height:1.4}
.gc-trow .gc-tv{font-family:var(--font-mono);font-weight:600;color:var(--text);white-space:nowrap;flex-shrink:0}
.gc-trow.bad{background:rgba(217,37,43,.09);border-color:rgba(217,37,43,.4)}
.gc-trow.bad .gc-tk{color:#ff8a86}.gc-trow.bad .gc-tv{color:#ff8a86}
.gc-trow.warn{background:rgba(255,107,15,.07);border-color:rgba(255,107,15,.3)}
.gc-trow.warn .gc-tk{color:#ffb24a}
.gc-trow.ok{background:rgba(87,227,137,.07);border-color:rgba(87,227,137,.28)}
.gc-trow.ok .gc-tk{color:#7be8a3}
.gc-warns{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gc-warns li{font-size:11px;line-height:1.45;color:var(--text-dim);padding-left:14px;position:relative}
.gc-warns li::before{content:"›";position:absolute;left:2px;color:var(--text-faint)}
.gc-acts{display:flex;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.gc-link{background:none;border:none;padding:0;font-size:11.5px;color:var(--scribe);cursor:pointer;font-family:inherit}
.gc-link:hover{text-decoration:underline}
.gc-link.danger{color:var(--text-dim)}.gc-link.danger:hover{color:var(--mcred)}
.gc-studio-btn{margin-top:14px;border-color:var(--scribe);color:var(--scribe)}
.gc-studio-btn:hover{background:rgba(25,211,224,.08);border-color:var(--scribe);color:var(--scribe)}
.gc-studio-hint{font-size:10.5px;color:var(--text-faint);margin:6px 2px 0;line-height:1.4}
.hero-video{display:block;width:100%;height:auto;background:#0b0e15}

/* ----- live 3D section (relocated below the video) ----- */
.demo3d{padding:clamp(54px,8vh,100px) 24px}
.demo3d-stage{position:relative;max-width:1140px;margin:0 auto;height:min(64vh,640px);border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:radial-gradient(120% 100% at 50% 0,#0c111b,#06070b);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
.demo3d-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}

/* ── TOUCH SCROLLING (Rufus, 2026-09-13) ──────────────────────────────────────
   `touch-action:none` tells the browser "this element handles ALL gestures", so on a
   phone a vertical swipe over any of these canvases rotated the 3D instead of scrolling
   the page — the vise is full-width, so you could get stuck unable to scroll past it.
   On COARSE pointers (touch) switch to `pan-y`: the browser keeps vertical scrolling,
   the canvas still receives horizontal drags for rotation. Mice are unaffected — a
   fine-pointer device keeps the original free-rotate behaviour. */
@media (pointer:coarse){
  .demo3d-canvas,
  .portal canvas,
  .feat-media canvas,
  #dz-vise-canvas{touch-action:pan-y}
}

/* The vise stage is `height:min(64vh,640px)` with no small-screen override, so on a phone it
   became a ~342x540 PORTRAIT box while the scene is framed for roughly 2:1 landscape — the
   camera fills the tall box and the vise reads as massively zoomed in (Rufus, 2026-09-13).
   Tie the height to the WIDTH on small screens so the framing keeps a landscape aspect. */
@media (max-width:860px){
  .demo3d{padding:clamp(36px,6vh,64px) 16px}
  .demo3d-stage{height:clamp(230px,56vw,380px)}
}
.demo3d-canvas:active{cursor:grabbing}
.demo3d .hero-hint{position:absolute;left:auto;top:auto;right:18px;bottom:16px}
@media (max-width:720px){.demo3d-stage{height:54vh}}

/* auto-hiding header — logo always shown top-left, nav links/CTA reveal when the cursor nears the top */
.home-fs .nav{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
.home-fs .nav-links,.home-fs .nav-cta{opacity:0;transform:translateY(-7px);pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.home-fs.nav-peek .nav{background:rgba(6,7,11,.74);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.home-fs.nav-peek .nav-links,.home-fs.nav-peek .nav-cta{opacity:1;transform:none;pointer-events:auto}
.home-fs .nav .brand{filter:drop-shadow(0 2px 12px rgba(0,0,0,.6))}
/* touch devices can't hover → keep the nav visible */
@media (hover:none){.home-fs .nav-links,.home-fs .nav-cta{opacity:1;transform:none;pointer-events:auto}
  .home-fs .nav{background:rgba(6,7,11,.82);backdrop-filter:blur(10px);border-bottom-color:var(--line)}}

/* 3D scene below the video: frameless + no background + large (per Rufus) */
.demo3d{padding:0;margin:0}
.demo3d-stage{max-width:none;width:100%;height:92vh;min-height:520px;margin:0;
  border:0;border-radius:0;box-shadow:none;background:transparent}
.demo3d .hero-hint{right:24px;bottom:22px}
@media (max-width:720px){.demo3d-stage{height:70vh}}

/* ============================================================
   Landing header + bottom (Rufus): full-width grey rectangle header
   that only appears on mouse-at-top, white nav text always visible,
   buttons pushed to the edges, flat dark-grey bottom (no separations).
   ============================================================ */
/* header: full-width rectangle (kill the floating pill), edge padding */
.home-fs .nav{position:fixed;top:0;left:0;right:0;width:100%;max-width:none;margin:0;
  border-radius:0;border:0;box-shadow:none;padding:15px 36px;gap:26px;
  background:transparent;backdrop-filter:none;transition:background .25s ease}
/* (scrolled state is defined with the v3.5 bone-hero nav further down) */
/* ONLY the grey rectangle appears when the cursor is near the top */
.home-fs.nav-peek .nav{background:#212327;backdrop-filter:none}
/* nav text + buttons ALWAYS visible, white, legible over the video */
.home-fs .nav-links,.home-fs .nav-cta{opacity:1;transform:none;pointer-events:auto}
.home-fs .nav-links a,.home-fs .nav-drop-btn,
.home-fs .nav .name,.home-fs .nav .name em{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.home-fs .nav-links a:hover,.home-fs .nav-drop-btn:hover{color:#fff;opacity:.85}

/* bottom: flat dark grey, no separations / effects (placeholder) */
body.home-fs{background:#121212}
.home-fs .demo3d,.home-fs .portals,.home-fs #pricing,.home-fs footer{background:transparent;border:0}
/* demo zone: EXACTLY the exit-fade's target color — over any other near-black the
   transparent→#0b0c0e fade renders as a 32vh ramp that bands into visible waves
   (Rufus 2026-07-20, confirmed by pixel-scan: 40+ 1-value steps in the fade zone) */
.home-fs .demo-reveal{background:#0b0c0e}
.home-fs .how{border-top:0;background:transparent}
.home-fs footer{border-top:0}
.home-fs .how-step,.home-fs .price-card{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.07);box-shadow:none}

/* landing: kill the blueprint grid squares (body::before) and the two perspective "laser" lines (.how::before/::after) */
body.home-fs::before{content:none;display:none;background:none}
.home-fs .how::before,.home-fs .how::after{content:none;display:none;animation:none}

/* G-code Studio portal: mini editor + toolpath mock (matches the 240px canvas portals) */
.portal-gcode{position:relative;height:240px;overflow:hidden;display:flex;align-items:stretch;
  background:radial-gradient(120% 90% at 50% 0,#11161f 0%,#0a0e16 100%)}
.portal-gcode::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -42px 40px -22px var(--bg-deep)}
.pg-code{flex:1 1 55%;padding:20px 8px 16px 18px;font-family:var(--font-mono);font-size:12.5px;
  line-height:1.85;white-space:nowrap;overflow:hidden}
.pg-code .ln{display:inline-block;width:26px;color:var(--text-faint);opacity:.55;font-size:11px}
.pg-code .tk-g{color:#57e389}
.pg-code .tk-r{color:#ffb257}
.pg-code .tk-t{color:var(--scribe)}
.pg-code .tk-m{color:var(--text-dim)}
.pg-plot{flex:0 0 45%;align-self:center;max-height:190px;padding-right:10px}

/* landing nav: bigger logo/brand/links/CTA; logo stays LEFT, links CENTERED, CTA right */
.home-fs .nav{padding:18px 40px}
.home-fs .nav .brand .logo{width:38px;height:35px}
.home-fs .nav .brand .name{font-size:23px}
/* centered via the standalone `translate` property, NOT transform — the nav-peek
   hover rule sets transform:none (higher specificity), which was un-centering
   the links on hover (they jumped right by half their width). translate is immune. */
.home-fs .nav-links{position:absolute;left:50%;translate:-50% 0;margin-left:0;gap:26px}
.home-fs .nav-links a,.home-fs .nav-drop-btn{font-size:15px}
.home-fs .nav-cta .btn-sm{padding:10px 18px;font-size:14px}
/* not enough room to center on smaller screens — fall back to inline flow */
@media (max-width:1100px){
  .home-fs .nav-links{position:static;translate:none;margin-left:8px;gap:18px}
}

/* view-cube panel: ⌂ Home "you are here" state + Set-home success flash */
.vcube-act{position:relative}
.vcube-act.vc-on{color:#ffb257;background:rgba(255,107,15,.09);border-color:rgba(255,107,15,.42)}
.vcube-act.vc-on:hover{background:rgba(255,107,15,.15);color:#ffb257}
.vc-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;
  border-radius:8px;background:linear-gradient(135deg,#ff8a3c,#d9252b);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;
  animation:vcDonePop 1.6s cubic-bezier(.3,1.35,.45,1) forwards}
.vc-done i{font-style:normal}
.vc-done svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vc-done svg path{stroke-dasharray:26;stroke-dashoffset:26;animation:vcDoneCheck .38s .14s ease-out forwards}
.vc-done::after{content:"";position:absolute;inset:-3px;border-radius:11px;
  box-shadow:0 0 0 0 rgba(255,107,15,.45);animation:vcDoneRing .9s ease-out 1}
@keyframes vcDonePop{0%{opacity:0;transform:scale(.55)}14%{opacity:1;transform:scale(1.06)}26%{transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.97)}}
@keyframes vcDoneCheck{to{stroke-dashoffset:0}}
@keyframes vcDoneRing{to{box-shadow:0 0 0 9px rgba(255,107,15,0)}}

/* creator nav regrouped: [Projects ▾] [Floor] | [Save ●/✓] [⤓ Export ▾] */
.app-drop .nav-drop-menu{left:auto;right:0;min-width:196px}
.app-drop .nav-drop-menu button{display:block;width:100%;text-align:left;padding:9px 11px;border:0;border-radius:8px;
  background:transparent;font-family:inherit;font-size:13px;color:var(--text-dim);font-weight:600;cursor:pointer;
  transition:background .14s,color .14s}
.app-drop .nav-drop-menu button:hover{background:rgba(255,107,15,.1);color:var(--text)}
/* Feature gated to a paid plan (e.g. offline operator-view export on Free): grayed with a
   "🔒 Pro" tag. Still clickable — the click routes to an upgrade toast, not the action. */
.app-drop .nav-drop-menu button.feat-lock{color:var(--text-faint)}
.app-drop .nav-drop-menu button.feat-lock::after{content:"🔒 Pro";float:right;margin-left:10px;
  font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--amber);opacity:.85}
.app-drop .nav-drop-menu button.feat-lock:hover{background:rgba(255,107,15,.08);color:var(--text-dim)}
/* Save state: amber ● while there are unsaved changes, green ✓ once the cloud copy is current */
#btn-save.is-dirty{border-color:rgba(255,107,15,.55);color:#ffb257}
#btn-save.is-dirty::before{content:"●";color:var(--amber);margin-right:6px;font-size:8px;vertical-align:2px;
  animation:savePulse 1.6s ease-in-out infinite}
#btn-save.is-cloud:not(.is-dirty)::before{content:"✓";color:#57e389;margin-right:6px;font-weight:700}
@keyframes savePulse{0%,100%{opacity:.45}50%{opacity:1}}
/* frozen at full opacity the dot still reads as "unsaved", so stopping it costs no meaning */
@media (prefers-reduced-motion:reduce){#btn-save.is-dirty::before{animation:none}}

/* NX (Siemens) import branding — joins Fusion (amber) + Mastercam (teal) */
.ib-nx{background:rgba(87,227,137,.15);color:#57e389}
.src-nx{color:#57e389} .src-nx .src-tag{background:rgba(87,227,137,.16);color:#57e389}

/* ══════════════════════════════════════════════════════════════════════════
   UI v3 — "THE WEBSITE IS AN ENGINEERING DOCUMENT"  (2026-07-13, Session 66)
   One thesis, executed everywhere: ink-on-graphite site, true drawing-paper
   moments for output, ruled frames + title blocks instead of glow + radius.
   Filled controls are MACHINED (chamfered corners); outlined elements are
   DRAWN (square, ruled). No aurora, no particles, no glassmorphism.
   Overrides earlier rules by cascade — the old layer stays for the app.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 1 · TOKENS: drop the blue cast, go warm graphite + paper ---------- */
:root{
  --bg:#0d0e10;            /* neutral graphite, no blue */
  --bg-deep:#08090b;
  --panel:#141518;
  --panel-2:#191a1e;
  --panel-3:#1f2024;
  --line:#26282c;
  --line-soft:#1d1f22;
  --text:#eae8e2;          /* warm paper-tinted white */
  --text-dim:#a49f94;      /* warm grey */
  --text-faint:#6d6960;
  /* brand accents unchanged — the logo owns orange→red; teal = precision only */
  /* paper: the material the product actually produces */
  --paper:#f1eee6;
  --paper-2:#faf8f2;
  --paper-ink:#191a1c;
  --paper-dim:#5c594f;
  --paper-line:#cfcaba;
  --paper-rule:#97927f;
  --chamfer:9px;
}
body{background:var(--bg)}
body.home-fs{background:#121212}

/* kill the AI-era backdrops: aurora blobs, sweeps, grain — flat ink instead */
.bg-fx{display:none!important}
body::before{content:none!important}

/* ---------- 2 · NAV: a ruled bar, not a floating pill ---------- */
body:not(.home-fs):not(.app-body) .nav{
  position:sticky;top:0;width:100%;max-width:none;margin:0;
  padding:15px 36px;border-radius:0;border:0;border-bottom:1px solid var(--line);
  background:rgba(13,14,16,.9);backdrop-filter:blur(12px);box-shadow:none}
body:not(.home-fs):not(.app-body) .nav.scrolled{box-shadow:none;background:rgba(13,14,16,.96)}
.nav-links a{letter-spacing:.01em}
.nav-drop-menu{border-radius:0;border:1px solid var(--line);background:var(--panel);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.nav-drop-menu a{border-radius:0}

/* ---------- 3 · CONTROLS: filled = machined (chamfer), outlined = drawn (square) ---------- */
.btn{border-radius:0}
.btn-amber{clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  box-shadow:none}
.btn-amber:hover{box-shadow:none;transform:none;filter:brightness(1.08)}
.btn-line{border-radius:0;background:transparent}
.btn-line:hover{transform:none}
.btn-sm{border-radius:0}
.chip{border-radius:0}
.lang-switch,.lang-switch *{border-radius:0!important}

/* ---------- 4 · SECTION HEADERS: minimal editorial — the drawing-furniture
   title blocks (numbers / ruled boxes / REV meta) were rejected; .tblock markup
   stays in the pages but renders as a clean kicker-less heading. ---------- */
.tblock{display:block;border:0;margin-bottom:42px}
.tblock .tb-no,.tblock .tb-meta{display:none}
.tblock .tb-main{padding:0}
.tblock .tb-main h2{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);
  font-weight:700;letter-spacing:-.015em;margin:0 0 10px;color:var(--text)}
.tblock .tb-main p{color:var(--text-dim);font-size:15px;max-width:640px;margin:0}
/* homepage: the three section headers (#products / #how / #pricing) sit centered */
.home-fs .tblock .tb-main{text-align:center}
.home-fs .tblock .tb-main p{margin:0 auto}
/* quiet ALL the other decorative drawing-furniture the same way */.lh-meta,
.nf-tag {display:none!important}

/* ---------- 5 · CARDS: drawing frames — square, ruled, quiet ---------- */
.portal,.how-step,.price-card{border-radius:0;background:var(--panel);border:1px solid var(--line);box-shadow:none}
.portal:hover{transform:none;border-color:var(--line);box-shadow:none}
.portal .go{border-radius:0;background:var(--panel-2);border:1px solid var(--line);
  clip-path:polygon(30% 0,100% 0,100% 70%,70% 100%,0 100%,0 30%)}
.portal:hover .go{background:var(--amber);border-color:var(--amber);color:#1a0e02;transform:none}
/* the mini G-code mock + sheet preview keep their own faces */
.how-step{padding:26px 26px 28px}
.how-step:hover{border-color:var(--line-strong,#3a3e45)}
.how-step .n{border:0;border-radius:0;background:transparent;padding:0;margin-bottom:16px;
  font-family:'Barlow Semi Condensed',var(--font-mono);font-weight:600;font-size:30px;color:var(--amber);letter-spacing:.02em}
.how-step h3{border-bottom:1px solid var(--line-soft);padding-bottom:10px;margin-bottom:10px}

/* ---------- 6 · PRICE CARDS: dark ruled panels (the paper experiment was rejected) ---------- */
.price-card{background:var(--panel-2)}
/* cards stretch to equal height in the grid — pin the CTA to the bottom so they line up */
.price-card{display:flex;flex-direction:column}
.price-card>.btn{margin-top:auto;align-self:flex-start}
.price-card .badge{border-radius:0}
.price-card .price{font-family:'Barlow Semi Condensed',var(--font-mono);font-weight:700;font-size:38px}

/* ---------- 7 · FOOTER: the drawing's bottom strip ---------- */
footer{border-top:3px double var(--line-strong,#3a3e45);padding:26px 34px 24px;background:var(--bg-deep)}
.home-fs footer{background:#0e0e0f;border-top:3px double #2c2c2e}
footer .fnote{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
footer .flinks{gap:26px}
footer .fcopy{font-size:10px;letter-spacing:.08em;color:var(--text-dim)}

/* ---------- 8 · MISC ALIGNMENT ---------- */
.portals{padding:88px 32px}
.how-inner,.pricing-inner{padding:88px 32px}
.section-head{max-width:none}
.hero-sample{text-transform:none}
#toast{border-radius:0}

/* ---------- 9 · CREATOR EMPTY STATE: keep the machine ---------- */
/* the interactive vise stays (it's the product); the card sits over the G-code rain background */
.drop-card{border-radius:0;border:1px solid var(--line)}
.dz-cardglow{display:none!important}

/* ══════════ UI v3.1 — Brevo-style landing: text hero, alternating feature
   rows with scroll-in, contained video box (full-screen video hero retired) ══════════ */
/* landing nav: back to a normal, always-visible ruled bar */
.home-fs .nav{position:sticky;top:0;left:auto;right:auto;width:100%;max-width:none;margin:0;
  padding:15px 36px;border-radius:0;border:0;border-bottom:1px solid var(--line);
  background:rgba(13,14,16,.97);backdrop-filter:blur(12px);box-shadow:none;
  opacity:1;pointer-events:auto;transition:none}
.home-fs .nav-links,.home-fs .nav-cta{opacity:1;transform:none;pointer-events:auto}
.home-fs.nav-peek .nav{background:rgba(13,14,16,.9)}
/* the live 3D is the hero now */
.home-fs .demo3d{margin-top:0}
.home-fs .demo3d-stage{height:calc(94vh - 62px);min-height:540px}
/* alternating feature rows */
/* overflow-x:clip (not hidden — keeps sticky working) contains the [data-rv] slide-in
   transforms, which sit ±42px outside the layout box until they reveal. */
.feats{max-width:1180px;margin:0 auto;padding:88px 32px 40px;overflow-x:clip}
.feat{display:grid;grid-template-columns:1fr 1.45fr;gap:clamp(40px,5.5vw,96px);align-items:center;
  margin:0 0 clamp(170px,26vh,300px)}
.feat:last-child{margin-bottom:40px}
/* media always takes the wider column, on both normal and flipped rows */
.feat-flip{grid-template-columns:1.45fr 1fr}
.feat-flip .feat-copy{order:2}
.feat-flip .feat-media{order:1}
.feat-kicker{font-family:var(--font-data,var(--font-mono));font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.feat-copy h3{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:700;
  letter-spacing:-.012em;margin:0 0 12px;color:var(--text)}
.feat-copy p{color:var(--text-dim);font-size:15px;line-height:1.65;max-width:480px;margin:0 0 22px}
.feat-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--text);
  border-bottom:1px solid var(--amber);padding-bottom:3px;transition:color .16s}
.feat-link .fl-arrow{color:var(--amber);transition:transform .18s}
.feat-link:hover{color:var(--amber)}
.feat-link:hover .fl-arrow{transform:translateX(4px)}
.feat-media{border:1px solid var(--line);background:var(--panel);overflow:hidden}
.feat-media canvas{display:block;width:100%;height:660px;touch-action:none}
.feat-media .portal-gcode{height:660px}
.feat-media .pg-code{font-size:21px;line-height:2;padding:24px 16px 24px 38px;align-self:center}
.feat-media .pg-code .ln{width:50px}
.feat-media .pg-plot{max-height:320px;padding-right:18px}
/* setup-sheet PDF — PANEL IS THE SAME SIZE AS THE OTHER FEAT CARDS (660px tall like
   the canvas panels, 440px ≤860px). Inside: one page IN FOCUS front-left (sharp,
   bright, strong shadow), the other BEHIND it to the right (smaller, dimmed,
   soft-blurred); every half-cycle they trade places (real July-2026 export:
   p1 = 4-axis dossier 1650×1260, p2 = tool list 1650×718).
   Both pictures run the SAME pdfSwap keyframes (transform + filter only — all
   compositor-accelerated; shadows live in filter's drop-shadow, NOT animated
   box-shadow, so nothing repaints on the main thread while the three.js scenes run),
   the second offset by -dur/2. Z-ORDER IS ITS OWN PAIR OF ANIMATIONS: pdfZA (3↔1) on
   the first picture, pdfZB (4↔2) on the second. The interleaved values can never tie
   (the old shared z keyframes tied at z:2 mid-crossing and fell back to DOM order,
   which layered the incoming page UNDER the outgoing one on every second swap — the
   incoming sheet then popped to the front at the last instant. That was the bug.) */
.feat-media .pdf-duo{position:relative;width:100%;height:660px;
  container-type:size;overflow:hidden;background:#0a0e16;
  --fw:84cqw;--bx:17cqw;--dur:12s}
.pdf-duo picture{position:absolute;top:50%;left:4cqw;width:var(--fw);display:block;
  user-select:none;will-change:transform,filter;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
  animation:pdfSwap var(--dur) cubic-bezier(.66,0,.34,1) infinite,
            pdfZA var(--dur) cubic-bezier(.66,0,.34,1) infinite}
.pdf-duo picture+picture{animation-name:pdfSwap,pdfZB;
  animation-delay:calc(var(--dur) / -2)}
.pdf-duo img{display:block;width:100%;height:auto}
.pdf-duo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  box-shadow:inset 15px 0 24px -18px rgba(0,0,0,.9),inset -15px 0 24px -18px rgba(0,0,0,.9)}
.pdf-duo:hover picture{animation-play-state:paused}
/* click-to-zoom — hover already pauses the swap, so the click target is stable */
.pdf-duo picture{cursor:zoom-in}
.sheet-zoom{position:fixed;inset:0;z-index:500;display:none;place-items:center;
  background:rgba(6,8,12,.93);cursor:zoom-out}
.sheet-zoom.open{display:grid}
.sheet-zoom img{display:block;max-width:min(96vw,1650px);max-height:92vh;width:auto;height:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.sz-close{position:fixed;top:14px;right:18px;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);
  background:rgba(10,14,22,.7);color:#f2f3f5;font-size:26px;line-height:1;cursor:pointer;border-radius:4px}
.sz-close:hover{background:rgba(255,255,255,.12)}
.sz-lock{overflow:hidden}
/* no prefers-reduced-motion guard here ON PURPOSE — Rufus's OS has reduce-motion ON
   and a guard would freeze this to a static spread for him (see CLAUDE.md gotcha) */
@keyframes pdfSwap{
  0%,38%{transform:translate(0,-50%) scale(1);opacity:1;
    filter:brightness(1) saturate(1) blur(0) drop-shadow(0 16px 22px rgba(0,0,0,.55))}
  /* the 44% waypoint only fires on the OUTGOING page (it sits inside the 38–50
     segment; the incoming page is in its 88–100 segment, which has no waypoint).
     opacity dips to .3 exactly where the z-order flip lands (~43%, the shared
     easing front-loads the z crossover) so the re-stack happens behind a faded
     sheet — a dissolve instead of a visible pop. */
  44%{transform:translate(calc(var(--bx) / 2),calc(-50% + 11cqh)) scale(.89);opacity:.3}
  50%,88%{transform:translate(var(--bx),-50%) scale(.78);opacity:1;
    filter:brightness(.5) saturate(.85) blur(1.2px) drop-shadow(0 8px 12px rgba(0,0,0,.4))}
  100%{transform:translate(0,-50%) scale(1);opacity:1;
    filter:brightness(1) saturate(1) blur(0) drop-shadow(0 16px 22px rgba(0,0,0,.55))}
}
/* z choreography — interleaved integer pairs so the two cards can never tie:
   front hold / back hold = A 3/1, B 4/2. Crossings resolve mid-transition with a
   single clean layer flip instead of the old end-of-transition pop. */
@keyframes pdfZA{
  0%,38%{z-index:3}
  50%,88%{z-index:1}
  100%{z-index:3}
}
@keyframes pdfZB{
  0%,38%{z-index:4}
  50%,88%{z-index:2}
  100%{z-index:4}
}
@media (max-width:860px){
  .feat{grid-template-columns:1fr;gap:22px;margin-bottom:104px}
  .feat-flip .feat-copy{order:1}
  .feat-flip .feat-media{order:2}
  /* phones don't need the desktop 660px media panels. Height now tracks WIDTH: a fixed
     440px box on a ~400px-wide card is mostly empty black around a small subject
     (Rufus, 2026-09-13). */
  .feat-media canvas,.feat-media .portal-gcode{height:clamp(290px,76vw,440px)}
  /* The sheet is a PORTRAIT page, so its width sets its height (~1.29x). Widen it and it
     grows TALLER — at 80cqw it outgrew the panel, and .feat-media is overflow:hidden, so
     it clipped and read as "stuck at the bottom of the window" (Rufus's phone, 2026-09-13).
     Size the panel from the page, not the other way round: 70cqw of a ~358px card is
     ~250px wide => ~323px tall, so the panel needs ~360px to hold it with breathing room. */
  .feat-media .pdf-duo{--fw:70cqw;height:clamp(340px,94vw,470px)}
  /* Belt and braces: never let a page exceed the panel, whatever the card width works out
     to. The swap animation translates by -50%, so an overflowing page clips at BOTH edges. */
  .pdf-duo picture{max-height:88%}
  .pdf-duo img{max-height:100%;width:auto;margin-inline:auto}
  /* The G-code panel kept its desktop 21px type, which on a narrow card overflowed the
     box and pushed the toolpath plot off the right. Scale the whole listing down. */
  .feat-media .pg-code{font-size:14.5px;line-height:1.7;padding:14px 10px 14px 18px}
  .feat-media .pg-code .ln{width:30px}
  .feat-media .pg-plot{max-height:190px;padding-right:10px}
}
/* scroll-in directions (reveal.js drives [data-rv]) */
[data-rv]{opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1)}
[data-rv="left"]{transform:translateX(-42px)}
[data-rv="right"]{transform:translateX(42px)}
[data-rv="up"]{transform:translateY(34px)}
[data-rv].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rv]{transform:none;transition:opacity .5s ease}
}

/* ══════════ UI v3.2 — Brevo-style light hero band + section color separation ══════════ */
/* the page now reads as stacked BANDS: light hero → darkest 3D stage → graphite
   feats → dark video → graphite pricing. Full-width tone changes, not islands. */
.bhero{background:#e4e0d4;border-bottom:0;border-radius:0 0 64px 64px;color:var(--paper-ink);position:relative}
.bhero-inner{max-width:1240px;margin:0 auto;padding:70px 32px 78px;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,60px);align-items:center}
.bhero-copy h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.07;
  font-size:clamp(30px,3.2vw,44px);margin:0 0 18px;color:var(--paper-ink)}
/* the FR headline is longer — size it to hold the same 2 lines as English, so switching
   languages doesn't push the copy block (and the sample-part line) down into the tablet */
/* FR copy block occupies EXACTLY the English height: matched h1/lede box heights (min-height =
   the EN line boxes) + a slightly smaller, wider FR lede that holds 2 lines like the EN one —
   so switching languages moves NOTHING below the text */
html[lang="fr"] .bhero-copy h1{font-size:clamp(30px,2.95vw,44px);max-width:840px;min-height:calc(2.24 * clamp(34px,3.4vw,52px))}
html[lang="fr"] .bhero-copy .lede{max-width:660px;font-size:clamp(14.6px,0.99vw,16.5px);min-height:calc(3.1 * clamp(15.5px,1.05vw,17.5px))}
@media (max-width:2100px){html[lang="fr"] .bhero-copy .hero-sample{max-width:355px}}
.bhero-copy h1 .nowrap{white-space:normal}   /* the narrow column wraps naturally here */
.bhero-copy h1 .grad{background:linear-gradient(95deg,#0e8a94 0%,var(--amber) 62%,var(--mcred) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bhero-copy .lede{color:var(--paper-dim);font-size:clamp(15px,1.4vw,17.5px);line-height:1.6;max-width:500px;margin:0 0 26px}
.bhero-copy .hero-sample{color:var(--paper-dim);text-shadow:none;text-decoration:none;padding-bottom:2px;
  background:linear-gradient(90deg,#d64f00,#ff8a3c) left bottom / 0% 1.5px no-repeat;
  transition:color .25s ease,background-size .38s ease}
.bhero-copy .hero-sample:hover{color:#d64f00;background-size:100% 1.5px}
.bhero-copy .btn-line{border-color:#3a3b3e;color:var(--paper-ink)}
.bhero-copy .btn-line:hover{background:rgba(20,20,20,.05);border-color:var(--paper-ink);color:var(--paper-ink)}
/* the product, on a screen: browser-window mockup with a REAL app screenshot */
.bwin{border:1px solid #26272b;background:#0f1013;box-shadow:0 26px 60px rgba(20,18,12,.28);
  transform:translateY(6px)}
.bwin img,.bwin video{display:block;width:100%;height:auto}
@media (max-width:900px){
  .bhero-inner{grid-template-columns:1fr;padding:56px 24px}
  .bwin{max-width:640px}
}
/* section band separation (Brevo-style stacked tones) */
body.home-fs{background:#0b0c0e}
.home-fs .demo3d{background:#0b0c0e;border-bottom:1px solid var(--line-soft)}
.home-fs .demo3d-stage{height:min(86vh,880px)}
.home-fs .feats{max-width:none;padding:0}
.home-fs .feats{background:#0b0c0e}
.feats > .tblock,.feats > .feat{max-width:1560px;margin-left:auto;margin-right:auto}
/* dark headroom above "Three doors" — trimmed 2026-07-20 (was 114px+11vh ≈ 222px of black;
   with the .feats overlap below, the heading now arrives while the demo is still on screen),
   then +120px (one wheel notch) same day — Rufus: expand the black zone under the demo */
.feats > .tblock{padding:calc(184px + 6vh) 32px 0}
.feats > .feat{padding:0 32px}
.feats > .feat:last-child{padding-bottom:72px}
.home-fs #pricing{background:#0b0c0e}
.home-fs .demo3d{padding-top:26px;border-bottom:0}
.home-fs .demo3d-stage{max-width:1180px;margin:0 auto;height:min(74vh,720px);min-height:480px}
.demo3d-canvas{position:static;top:auto;right:auto;width:100%;height:100%}
.home-fs .demo3d .hero-hint{left:auto;right:30px;transform:none;bottom:20px}

/* ---------- v3.4: Brevo collage hero — centered copy, main window with soft
   chrome + right blur, phone + popup windows overlapping. No text gradients. ---------- *//* flatten ALL gradient text site-wide → solid amber accent */h1 .grad,
.grad-text,
.bhero-copy h1 .grad {
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;
  -webkit-text-fill-color:currentColor;color:var(--amber)!important}
.nf-code{background:none!important;-webkit-text-fill-color:var(--amber)!important;color:var(--amber)!important}
/* On the bone band the brand amber only reaches 2.16:1 — below the 3:1 large-text minimum.
   Deepen it here only; --amber stays as-is on the dark sections (6.86:1, already passes). */
.bhero-copy h1 .grad{color:#d64f00!important}
/* hero group is CENTERED as a unit: the copy's left margin and the laptop's right margin
   are the SAME computed value --herom = (100vw − copy 640 − gap 40 − collage)/2, so the
   white borders match on both sides at every viewport (the user asked for exactly this). */
.bhero{
  /* the LAPTOP TOP sits flush with the h1's first line (y=144): laptop h ≈ 0.515·w+19,
     its bottom is band.b(≈78vh-15) − offset above the band edge → solve for width.
     56vw + (100vw-740px) guard narrower screens (copy column keeps its 640px + margins);
     when they bind the laptop simply rides lower — flush needs the height term to govern. */
  --colw:min(56vw,
    calc((78vh - 178px - clamp(26px,1.6vw,44px)) / 0.515),
    calc(100vw - 740px),
    1750px);
  --herom:max(30px,calc((100vw - 680px - var(--colw))/2))}
.bhero-inner{display:block;max-width:none;margin:0 auto;padding:49px 30px clamp(48px,calc(89vh - 626px),1800px)}   /* band bottom raised one wheel notch (−120px, Rufus 2026-07-20): the rounded demarcation edge now sits ~114px above the fold, dark strip below (demo is .veiled at top, so it reads black). Was calc(89vh − 506px) = band.b ≈ 100vh+6 */
.bhero-copy{text-align:left;max-width:640px;margin:0 0 0 calc(var(--herom) - 30px)}
.bhero-copy h1{font-family:'Exo 2',var(--font-display);font-weight:600;font-style:italic;letter-spacing:-.015em;
  font-size:clamp(34px,3.4vw,52px);line-height:1.12;margin:0 0 24px}
.bhero-copy .lede{margin:0 0 34px;font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.55;max-width:600px;font-weight:600}
.bhero-copy .hero-actions{justify-content:flex-start;gap:10px}
.bhero .hero-actions .btn{height:clamp(50px,3.3vw,64px);padding:0 28px;font-size:16.5px;
  display:inline-flex;align-items:center;justify-content:center}
.bhero .hero-sample{display:inline-block;margin-top:26px}
/* collage — RIGHT of center, overflowing the container toward ~88% viewport (Brevo geometry).
   Sized so the laptop video NEVER exceeds its 1920px-native master at any real viewport/DPR
   (worst case 3440@125%: 1120px collage → ~967 CSS px video × 1.25 DPR ≈ 1209 device px). */
.bcollage{position:absolute;left:auto;right:var(--herom);top:49px;bottom:auto;
  /* TOP-pinned at the h1 line (y=144 = 49px into the band): the band can grow downward
     without moving the devices. Box height = the laptop's real height (0.515·w+19) so the
     bottom-anchored laptop and the tablet (-3% below) sit exactly at the box edge. */
  width:var(--colw);
  height:calc(var(--colw)*0.515 + 19px);max-width:none;margin:0;padding:0}
.bwin{position:absolute;left:0;top:0;width:100%;margin:0;border-radius:20px;overflow:hidden;
  border:1px solid #c9c3b2;background:#101114;box-shadow:0 34px 80px rgba(22,19,12,.28);transform:none}
@media (max-width:1120px){
  /* stacked fallback: collage flows below the copy, centered */
  .bcollage{position:relative;left:0;top:0;width:min(760px,100%);height:auto;margin:44px auto 0;
    padding-bottom:clamp(34px,11vw,86px)}
  .bwin{position:relative;left:0;top:0;width:88%;margin:0 auto}
  .bhero-inner{padding-bottom:96px}
}
@media (max-width:900px){
  .bwin{width:100%}
}

/* ══════════ UI v3.5 — Brevo-exact hero: nav sits ON the light band (index only) ══════════ */
.home-fs .nav{padding:26px 40px;background:#e4e0d4;border-bottom:0;gap:30px;backdrop-filter:none}
/* language switcher on the bone nav: dark chrome + a readable paper menu (the dark-page
   styling floated an unreadable near-black box over the light band) */
.home-fs .lang-btn{color:#2c2d31;border-color:rgba(20,21,25,.38);background:transparent;text-shadow:none}
.home-fs .lang-btn:hover,.home-fs .lang-switch.open .lang-btn{color:#141519;border-color:#141519}
.home-fs .nav-cta>.lang-switch{border-right-color:rgba(20,21,25,.22)}
.home-fs .lang-menu{background:#faf8f2;border-color:#cfcaba;box-shadow:0 14px 34px rgba(31,28,20,.22);backdrop-filter:none}
.home-fs .lang-menu button{color:#45423a}
.home-fs .lang-menu button:hover{background:rgba(214,79,0,.09);color:#141519}
.home-fs .lang-menu button[aria-current="true"]{color:#d64f00}
.home-fs.nav-peek .nav{background:#e4e0d4;box-shadow:none;backdrop-filter:none}
.home-fs .nav .brand{filter:none}
.home-fs .nav .brand .logo{filter:none;width:44px;height:41px}
.home-fs .nav .brand .name{font-size:27px}
/* text-shadow:none kills the dark 12px halo inherited from the old video-hero nav
   (site.css ~1864) — on the bone band it read as blur behind every label */
.home-fs .nav .brand .name,.home-fs .nav .brand .name em{color:#141519;text-shadow:none}
.home-fs .nav-links{position:static;left:auto;translate:none;gap:34px;margin-left:10px}
.home-fs .nav-links a,.home-fs .nav-drop-btn{font-size:17px;color:#33353b;text-shadow:none}
.home-fs .nav-links a:hover,.home-fs .nav-links a.here,.home-fs .nav-drop-btn:hover,
.home-fs .nav-drop:hover .nav-drop-btn,.home-fs .nav-drop:focus-within .nav-drop-btn{color:#101114}
.home-fs .nav-drop-menu{background:#efece1;border-color:#c9c3b2;box-shadow:0 18px 44px rgba(22,19,12,.22)}
.home-fs .nav-drop-menu a{color:#1c1d22}
.home-fs .nav-drop-menu a small{color:#6d6a5e}
.home-fs .nav-drop-menu a:hover{background:rgba(20,20,20,.06)}
.home-fs .nav-cta>.lang-switch{border-right-color:#c6c0ae}
.home-fs .lang-switch button,.home-fs .lang-switch .lang-cur{color:#33353b}
.home-fs #auth-slot .btn{background:none;border:0;clip-path:none;box-shadow:none;color:#141519;
  font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:0 4px;height:auto}
.home-fs #auth-slot .btn:hover{color:#000;transform:none}
.home-fs .nav-cta>.btn-amber{background:#101114;clip-path:none;border-radius:22px;height:43px;
  padding:0 22px;display:inline-flex;align-items:center;font-size:14.5px;color:#fff;border:0}
.home-fs .nav-cta>.btn-amber:hover{background:#26272c;transform:none;box-shadow:none}
/* burger follows the dark-on-bone text context */
.home-fs .nav-burger{color:#141519;border-color:rgba(20,21,25,.28)}
/* Scrolled past the bone hero the nav sits over the dark page, so the dark-on-bone text
   above would be invisible (it measured 1.08 contrast). Flip to the same dark translucent
   bar every other page already uses (body:not(.home-fs) .nav.scrolled). Each selector adds
   .scrolled to out-specify its bone counterpart above. */
.home-fs .nav.scrolled{background:rgba(13,14,16,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);box-shadow:none}
.home-fs.nav-peek .nav.scrolled{background:rgba(13,14,16,.96);box-shadow:none}
.home-fs .nav.scrolled .brand .name,.home-fs .nav.scrolled .brand .name em{color:var(--text)}
.home-fs .nav.scrolled .nav-links a,.home-fs .nav.scrolled .nav-drop-btn{color:var(--text-dim)}
.home-fs .nav.scrolled .nav-links a:hover,.home-fs .nav.scrolled .nav-links a.here,
.home-fs .nav.scrolled .nav-drop-btn:hover,.home-fs .nav.scrolled .nav-drop:hover .nav-drop-btn,
.home-fs .nav.scrolled .nav-drop:focus-within .nav-drop-btn{color:var(--text)}
.home-fs .nav.scrolled .lang-switch button,.home-fs .nav.scrolled .lang-switch .lang-cur{color:var(--text-dim)}
.home-fs .nav.scrolled .nav-cta>.lang-switch{border-right-color:var(--line)}
.home-fs .nav.scrolled #auth-slot .btn{color:var(--text)}
.home-fs .nav.scrolled #auth-slot .btn:hover{color:#fff}
/* the dark pill would vanish on a dark bar — use the brand amber instead */
.home-fs .nav.scrolled .nav-cta>.btn-amber{background:var(--amber);color:#1a0e02}
.home-fs .nav.scrolled .nav-cta>.btn-amber:hover{background:#ff7d2b}
.home-fs .nav.scrolled .nav-burger{color:var(--text);border-color:var(--line)}
.home-fs .nav.scrolled .nav-drop-menu{background:var(--panel-2);border-color:var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.home-fs .nav.scrolled .nav-drop-menu a{color:var(--text)}
.home-fs .nav.scrolled .nav-drop-menu a small{color:var(--text-dim)}
.home-fs .nav.scrolled .nav-drop-menu a:hover{background:rgba(255,255,255,.06)}
@media (max-width:1120px){.home-fs .nav{padding:14px 20px;gap:18px}.home-fs .nav-links{gap:20px}}
/* view-cube ROLL arrows (side-rotate the view ±90° around the view axis) */
.vc-roll-l{left:8px;top:2px;width:30px;height:30px}
.vc-roll-r{right:8px;top:2px;width:30px;height:30px}
.vc-roll-l svg{transform:scaleX(-1)}
.vc-roll-l svg,.vc-roll-r svg{width:22px;height:22px}
/* Model tab: body highlight toggle */
.body-hi{width:26px;height:26px;flex:none;display:grid;place-items:center;padding:0;color:#5b6572;
  background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:color .15s,border-color .15s}
.body-hi svg{width:15px;height:15px;fill:currentColor}
.body-hi:hover{color:var(--scribe)}
.body-hi.on{color:var(--scribe);border-color:var(--scribe);background:rgba(25,211,224,.1);box-shadow:0 0 10px rgba(25,211,224,.25)}
/* "Rotate around" popover (under the view-cube Mouse-controls button) */
.piv-menu{position:fixed;z-index:400;width:262px;background:rgba(16,20,27,.97);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:6px;backdrop-filter:blur(10px)}
.piv-menu .pm-h{font:600 10.5px var(--font-data,var(--font-mono));letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);padding:6px 9px 7px}
.pm-opt{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;padding:8px 9px;border-radius:7px;
  background:none;border:0;cursor:pointer;transition:background .12s}
.pm-opt:hover{background:rgba(255,255,255,.05)}
.pm-opt .pm-check{width:14px;flex:none;color:var(--scribe);opacity:0;font-size:12px;margin-top:1px}
.pm-opt.sel .pm-check{opacity:1}
.pm-opt .pm-txt{display:flex;flex-direction:column;gap:2px}
.pm-opt .pm-txt b{font-size:12.5px;color:var(--text);font-weight:600}
.pm-opt .pm-txt small{font-size:10.5px;color:var(--text-dim);line-height:1.35}
.pm-opt.sel .pm-txt b{color:var(--scribe)}
/* dim labels follow the user's dimension colour */
#overlay{--dimc:#19d3e0}
.dim-label{color:var(--dimc);border-color:var(--dimc)}
.pm-opt .pm-txt b{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pm-opt .pm-fav{font:600 9.5px var(--font-data,var(--font-mono));letter-spacing:.05em;color:var(--amber);
  white-space:nowrap;opacity:.9;font-style:normal}
/* viewport background menu */
.bg-menu .bg-swatches{display:flex;gap:6px;align-items:center;padding:4px 9px 8px;flex-wrap:wrap}
.bg-sw{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);cursor:pointer;padding:0}
.bg-sw:hover{border-color:var(--scribe)}
.bg-sw.sel{border-color:var(--scribe);box-shadow:0 0 0 2px rgba(25,211,224,.25)}
.bg-def{background:radial-gradient(8px 6px at 50% 35%,#0d1526 0%,#0d0e10 80%)}
.bg-custom{width:26px;height:26px;padding:1px;border:1px solid var(--line);border-radius:7px;background:none;cursor:pointer}
.dim-item .dim-col{width:24px;height:24px;padding:1px;border:1px solid var(--line);border-radius:6px;background:none;flex:none;cursor:pointer}
.dim-item .dim-sty{width:24px;height:24px;flex:none;display:grid;place-items:center;font-size:12px;color:var(--text-dim);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.dim-item .dim-sty:hover{color:var(--scribe);border-color:var(--scribe)}
.dimsty-menu{width:210px}
.dimsty-menu .ds-g{display:inline-block;width:16px;color:var(--scribe)}
/* dim style menu + row accents follow the dimension's own colour */
.dimsty-menu .ds-g{color:var(--dsc,var(--scribe))}
.dimsty-menu .pm-check{color:var(--dsc,var(--scribe))}
.dimsty-menu .pm-opt.sel .pm-txt b{color:var(--dsc,var(--scribe))}
/* dim colour popover: favourite swatches + custom picker */
.dimcol-menu{width:216px}
.dc-grid{display:flex;flex-wrap:wrap;gap:7px;padding:4px 9px 8px}
.dc-cell{position:relative;display:inline-block}
.dc-sw{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);cursor:pointer;padding:0;display:block}
.dc-sw:hover{border-color:var(--scribe)}
.dc-sw.sel{border-color:var(--scribe);box-shadow:0 0 0 2px rgba(25,211,224,.28)}
.dc-x{position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;background:#2a2f38;color:#c7ccd4;
  border:1px solid var(--line);font-size:8.5px;line-height:1;display:none;place-items:center;cursor:pointer;padding:0}
.dc-cell:hover .dc-x{display:grid}
.dc-x:hover{background:var(--mcred);color:#fff}
.dc-foot{display:flex;gap:7px;align-items:center;padding:2px 9px 7px;border-top:1px solid var(--line);margin-top:2px;padding-top:9px}
.dc-custom{width:30px;height:26px;padding:1px;border:1px solid var(--line);border-radius:7px;background:none;cursor:pointer;flex:none}
.dc-add{flex:1;font:600 10.5px var(--font-data,var(--font-mono));letter-spacing:.05em;color:var(--amber);
  background:rgba(255,107,15,.07);border:1px solid rgba(255,107,15,.35);border-radius:7px;padding:6px 4px;cursor:pointer}
.dc-add:hover{background:rgba(255,107,15,.14)}
/* the row swatch is a button now */
.dim-item .dim-col{width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:6px;flex:none;cursor:pointer}
.dim-item .dim-col:hover{border-color:var(--scribe)}
/* the 3D viewport is not text — a drag that started on a view button must never
   sweep a text selection across the dim labels (the "ghost blue line" artifact) */
#viewport{-webkit-user-select:none;user-select:none}
/* hero video inside a hand-built CSS laptop (crisp at any DPI, theme-matched) */
.sblap{top:auto;bottom:0;background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;
  filter:drop-shadow(0 30px 54px rgba(22,19,12,.32))}
.sblap-lid{position:relative;margin:0 5.5%;background:#000;
  border:1px solid #131519;border-bottom:0;border-radius:14px 14px 0 0;
  /* hairline aluminum lid wall around the black bezel, like the real machine:
     a bright 2px edge (it must beat the drop-shadowed bone at ~209 luma or it vanishes)
     plus a darker outer seam so the metal reads as an edge, not a glow */
  padding:0.65% 0.65% 0.8%;box-shadow:0 0 0 2px #d3d6db,0 0 0 3px rgba(94,98,106,.55),
  inset 0 1px 0 rgba(255,255,255,.04)}
/* (this pure-black bezel is the shared device tone — the tablet mock will reuse it) */
.sblap-lid video{display:block;width:100%;height:auto;border-radius:6px;background:#05070d}
.sblap-base{position:relative;height:clamp(11px,1.1vw,17px);margin:0;
  background:linear-gradient(180deg,#f0f1f3 0%,#cfd2d7 38%,#a8acb4 82%,#7e828a 100%);
  border-radius:3px 3px 14px 14px;
  box-shadow:0 1px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.85)}
.sblap-base::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.15))}
.sblap-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:13%;height:52%;
  background:linear-gradient(180deg,#9ea2aa,#c4c7cd);border-radius:0 0 10px 10px;
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.18)}
/* landscape tablet — reference styling (silver rim, black front, top pill, side buttons)
   with a UNIFORM bezel and the screen at the video's native 16:9 (no crop, no softness) */
/* Wide AND genuinely SHORT windows only (e.g. an ultrawide with a restored-down window): the
   vh-clamped collage shrinks + slides toward the copy and the tablet's overhang can reach the
   "sample part" line. Keep the tablet's size and left dock — just slide it down past the copy.
   A maximized ultrawide (≥ ~1200px tall) never matches: it keeps the normal layout untouched. */
/* REMOVED 2026-09-12 (Rufus): the old ultrawide-short rule
     @media (min-width:2200px) and (max-height:1150px){ .sbtab{bottom:calc(-3% - clamp(150px,21vh,250px))!important} }
   pushed the tablet 150-250px DOWN and straight out of the cream band onto the black strip, and
   it flipped on a ~20px window-height change (a visible jump on any ultrawide sitting near 1150px).
   Its premise no longer holds: --colw is vh-clamped, so a shorter window NARROWS the collage, and
   because the collage is right-anchored with --herom growing to match, its left edge moves AWAY
   from the copy — the tablet can no longer reach the "sample part" line on its own.
   Verified headless at 3414x950 / 3414x1050 / 3414x1140 / 2250x820 / 2400x900: tablet fully inside
   the band, clear of the lede and the sample line at every one. Do NOT reinstate without re-testing. */
.sbtab{position:absolute;left:calc(-22% - clamp(0px,5vw - 60px,90px));bottom:-3%;width:44%;z-index:3;
  background:linear-gradient(150deg,#e3e6ea,#b6bac1);border:1px solid #7e828a;border-radius:14px;
  padding:3px;
  filter:drop-shadow(0 20px 30px rgba(30,28,22,.30))}
.sbtab-body{position:relative;background:#000;border:1px solid #4c4f56;border-radius:10px;padding:1%}
/* CONCENTRIC CORNERS, outside-in: frame 14px − (1px border + 3px pad) = body 10px −
   (1px border + 2% bezel ≈7-9px) ≈ screen 2px. Any child radius larger than its parent's
   minus the gap pools the parent's colour at the corners — the "off-centre" look. */
/* bezel halved to 1% → concentric screen radius grows to ~4px (10 − 1border − ~4.5pad) */
.sbtab-screen{position:relative;border-radius:4px;overflow:hidden;background:#05070d}
.sbtab-screen video,.sbtab-screen img{display:block;width:100%;height:auto}
/* No inset black ring — .sbtab-body already IS the bezel, and a second dark edge on a
   light screenshot just reads as a double border. */
.sbtab-pill{position:absolute;top:3.2%;left:50%;transform:translateX(-50%);width:8.4%;height:4.4%;
  background:#000;border-radius:999px;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.sbtab-btn{position:absolute;right:-4px;width:4px;background:linear-gradient(90deg,#6a6e76,#53565d);
  border-radius:0 2.5px 2.5px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.sbtab-b1{top:14%;height:19%}
/* NARROW DESKTOP ONLY. min-width:1121px matters: this block sits later in the file than the
   <=1120px stacked-collage block, so without the lower bound it also matched phones and its
   negative left dock overrode the mobile re-dock, keeping the tablet clipped off-screen
   (Rufus, 2026-09-12). Below 1121px the collage is centred and the tablet docks inside it. */
@media (min-width:1121px) and (max-width:1450px){
  /* narrow desktop: the collage rides high — park the tablet lower and pull it back
     so it never reaches the lede/buttons */
  .sbtab{left:-14%;width:38%;bottom:calc(-3% - 90px)}
}
/* STACKED COLLAGE (<=1120px). Must live AFTER the base .sbtab rule and the narrow-desktop
   block — CSS is last-wins at equal specificity, and both of those are declared further down
   the file than the <=1120px collage block, so an override placed up there is ignored.
   The desktop rules dock the tablet OUTSIDE the collage box (left:-22% / -14%), which only
   works while the box is offset right of centre. Once the collage stacks and centres, that
   negative dock drags the tablet off the left edge — on a 390px phone it was a clipped
   sliver (Rufus, 2026-09-12). Re-dock inside the box over the laptop's bottom-left corner. */
@media (max-width:1120px){
  .sbtab{left:clamp(6px,3.5vw,22px);width:clamp(158px,46%,320px);
    bottom:calc(-1 * clamp(16px,4.5vw,40px))}
}
.sbtab-b2{top:38%;height:10%}

/* ===== SBDialog — the site's own prompt/confirm dialogs (js/dialog.js) ===== */
.pdfx-panel.sbdlg{max-width:440px;width:min(440px,92vw);height:auto;max-height:88vh}
.sbd-body{padding:18px 20px 6px}
.sbd-msg{font-size:14.5px;line-height:1.6;color:var(--text);white-space:pre-line;margin:0 0 12px}
.sbd-field{margin-bottom:14px}
.sbd-field label{display:block;font-family:var(--font-data,var(--font-mono));font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin-bottom:8px}
.sbd-field input,.sbd-field textarea{width:100%;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:9px;color:var(--text);font-family:inherit;font-size:14.5px;font-weight:600;padding:11px 13px;transition:border-color .15s,box-shadow .15s;resize:vertical}
.sbd-field input:focus,.sbd-field textarea:focus{outline:none;border-color:var(--scribe);box-shadow:0 0 0 3px rgba(25,211,224,.14)}
.sbd-foot{display:flex;justify-content:flex-end;gap:8px}
.btn.btn-danger{background:linear-gradient(135deg,#e0442c,#c22333);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.btn.btn-danger:hover{filter:brightness(1.08)}

/* f2f re-anchor button on dim rows (same footprint as the style/thickness buttons) */
.dim-item .dim-reanchor{width:24px;height:24px;flex:none;display:grid;place-items:center;font-size:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.dim-item .dim-reanchor:hover{color:var(--amber)!important;border-color:var(--amber)!important}
/* green pulse on the Save button when an autosave lands */
#btn-save.just-autosaved{animation:asPulse 1.6s ease-out}
@keyframes asPulse{0%{box-shadow:0 0 0 0 rgba(63,214,108,.6)}100%{box-shadow:0 0 0 14px rgba(63,214,108,0)}}

/* ===== Display headings site-wide: Exo 2 SemiBold Italic (Rufus, 2026-07-16) =====
   One rule for every marketing-page h1/h2 + the landing portal titles; !important
   deliberately beats the page-local heading styles' family/weight so the whole set
   switches together. The creator app (app-body) keeps its UI fonts. Applies to FR
   automatically — same elements, translated text. */
body:not(.app-body) main h1, body:not(.app-body) main h2,
body:not(.app-body) .feat-copy h3,
body:not(.app-body) .learn-hero h1,
body:not(.app-body) .learn-overview h2, body:not(.app-body) .learn-more h2,
body:not(.app-body) .learn-cta h2{
  font-family:'Exo 2',var(--font-display) !important;
  font-weight:600 !important;
  font-style:italic !important;
}
/* Keep the miniature exported-sheet mock (in the landing portal media) in its
   printed-sheet font — the display-heading rule above must not italicize its
   section labels ("Setup notes", "Tools"). */
body:not(.app-body) .s-block h2{
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  font-style:normal !important;
}

/* ── Model tab: import up-axis + component groups (STEP assembly structure) ── */
.upaxis-row{display:flex;align-items:center;gap:8px;margin:2px 0 12px;flex-wrap:wrap}
.ua-lab{font:600 11px var(--font-data);text-transform:uppercase;letter-spacing:.08em;color:#aab5c4}
.ua-btn{width:34px;height:26px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-dim);font:700 12px var(--font-mono);cursor:pointer;border-radius:6px}
.ua-btn.on{border-color:var(--scribe);color:var(--scribe);background:rgba(25,211,224,.08)}
.ua-btn:not(.on):hover{color:var(--text)}
.ua-hint{flex-basis:100%;font-size:11px;color:#8b96a6;line-height:1.45}
.mesh-group{display:flex;align-items:center;gap:8px;margin:10px 0 4px;padding:7px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px}
.mg-tog{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--text);cursor:pointer;text-align:left;font:600 12.5px var(--font-body);padding:0}
.mg-chev{color:var(--scribe);font-size:11px;width:12px;flex:none}
.mg-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-n{font:600 10.5px var(--font-mono);color:#8b96a6;background:rgba(255,255,255,.05);padding:1px 7px;border-radius:8px;flex:none}
.mesh-item.in-group{margin-left:14px}

/* ============================================================
   CATALOG SHEET TEMPLATES ("nt") — the 11 designs from the
   Claude Design Template Catalog (2026-07). Fixed structure:
   p1 photo+info · p2 extra views · p3+ tool list.
   One --accent recolors every sheet.
   ============================================================ */
.sheet-doc.nt{--nt-ink:#14181D;--nt-sub:#3A414B;--nt-faint:#9AA1AC;--nt-ln:#E6E9EE;--nt-shade:#FAFBFC;
  font-family:'Space Grotesk',var(--font-body),sans-serif;color:var(--nt-ink)}
.sheet-doc.nt .nt-page{height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:.34in .38in;position:relative}
/* --- shared atoms --- */
.nt-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nt-word{font-family:'Archivo',sans-serif;font-style:italic;font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--nt-ink)}
.nt-word em{font-style:italic;font-weight:600}
.nt-brandline{display:flex;align-items:center;gap:12px;min-width:0}
.nt-kick{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--nt-faint);margin-bottom:5px}
.nt-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:29px;letter-spacing:-.025em;line-height:1.02;color:var(--nt-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.nt-title em{font-style:normal;color:var(--accent)}
.nt-title.big{font-size:37px;white-space:normal}
.nt-opchip{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;color:#fff;background:var(--accent);padding:5px 11px;flex-shrink:0}
.nt-tag{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--nt-faint)}
.nt-h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;color:var(--nt-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-width:0}
.nt-h2 em{font-style:normal;color:var(--nt-faint);font-weight:600}
.nt-monometa{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--nt-faint);flex-shrink:0}
.sheet-doc.nt .vdiv{width:1px;height:30px;background:#D6DAE0;flex-shrink:0}
.sheet-doc.nt .nt-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;position:relative;z-index:1}
.nt-noshot{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#B4BCC6;text-align:center;padding:20px;position:relative;z-index:1}
.sheet-doc.nt .ptag{position:absolute;top:9px;left:11px;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);z-index:2}
.sheet-doc.nt .psub{position:absolute;top:9px;right:11px;font-family:'Space Mono',monospace;font-size:8.5px;color:var(--nt-faint);z-index:2}
.nt-sech{display:flex;align-items:center;gap:7px;margin:0 0 7px}
.nt-sech .tick{width:4px;height:13px;background:var(--accent);flex-shrink:0}
.nt-sech span:last-child{font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--nt-ink)}
.nt-dim{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted #D6DAE0;padding:4px 0;font-size:11.5px;color:var(--nt-sub)}
.nt-dim:last-of-type{border-bottom:none}
.nt-dim .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-dim .v{font-weight:600;color:var(--nt-ink);white-space:nowrap;flex-shrink:0}
.nt-dim .v em{font-style:normal;font-family:'Space Mono',monospace;font-size:7.5px;letter-spacing:.08em;color:#fff;background:#D9252B;padding:1.5px 5px;margin-left:6px;vertical-align:1.5px}
.nt-dim.crit .v{color:#D9252B}
.nt-notes{margin:0;padding-left:15px;font-size:11.5px;color:var(--nt-sub);line-height:1.6}
.nt-none{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#B4BCC6;padding:4px 0}
.nt-none.big{padding:70px 0;text-align:center;font-size:11px}
.nt-more{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--nt-faint);margin-top:5px}
/* continuation pages (dims / notes / procedure that overflowed page 1) + copyright stamp */
.nt-lbody{flex:1;min-height:0;display:flex;flex-direction:column}
.nt-lsec{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:5px 0 4px;border-bottom:1px solid var(--nt-ln);margin-bottom:6px;flex-shrink:0}
.nt-lsec:not(:first-child){margin-top:13px}
.nt-note-line{display:flex;gap:11px;padding:6px 0;border-bottom:1px dotted #D6DAE0;font-size:12px;color:var(--nt-sub);line-height:1.45}
.nt-note-line .n{font-family:'Space Mono',monospace;font-size:9px;color:var(--nt-faint);flex-shrink:0;min-width:18px}
.nt-copyright{flex-shrink:0;margin-top:9px;padding-top:7px;border-top:1px solid var(--nt-ln);display:flex;justify-content:space-between;gap:12px;font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.05em;color:var(--nt-faint)}
.nt-copyright .conf{color:#D9252B;font-weight:700}
.nt-gnote{flex-shrink:0;margin-top:9px;padding:8px 11px;background:var(--nt-shade);border-left:2px solid var(--accent);font-size:11px;color:var(--nt-sub);line-height:1.4;
  /* cap it so a long CAM-imported op-list note can't push the sign-off row + QR off the fixed-height page */
  max-height:4.6em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.nt-gnote b{display:block;font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--nt-faint);margin-bottom:3px}
.nt-lab{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.nt-metagrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--nt-ln);border:1px solid var(--nt-ln);margin:13px 0}
.nt-cell{background:#fff;padding:8px 11px;min-width:0}
.nt-cell .k{display:block;font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--nt-faint)}
.nt-cell .v{display:block;font-weight:600;font-size:12px;color:var(--nt-ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-cell.hi .v{color:var(--accent)}
/* footer: sign-off + QR + page no */
.nt-foot{margin-top:auto;display:flex;align-items:flex-end;gap:14px;border-top:2px solid var(--nt-ink);padding-top:9px;flex-shrink:0}
.nt-sign{display:flex;gap:14px;flex:1;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--nt-faint);min-width:0}
.nt-sign span{border-bottom:1px solid var(--nt-ink);padding:0 8px 3px 0;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;white-space:nowrap;overflow:hidden}
.nt-sign span em{font-style:normal;font-size:.8em;letter-spacing:.03em;opacity:.55}
.nt-qr{display:flex;align-items:center;gap:7px;flex-shrink:0}
.nt-qr svg{width:52px;height:52px;display:block}
.nt-qr span{font-family:'Space Mono',monospace;font-size:7.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--nt-faint);max-width:76px;line-height:1.45}
.nt-pgno{font-family:'Space Mono',monospace;font-size:8.5px;color:var(--nt-faint);flex-shrink:0;white-space:nowrap}
.nt-foot.cells{border:1px solid var(--nt-ln);border-top:2px solid var(--nt-ink);padding:0;align-items:center}
.nt-foot.cells .nt-sign{gap:0}
.nt-foot.cells .nt-sign span{border-bottom:none;border-right:1px solid var(--nt-ln);padding:10px 12px}
.nt-foot.cells .nt-qr{padding:5px 10px 5px 0}
.nt-foot.cells .nt-pgno{padding-right:10px}
/* continuation header (views + tool pages) */
.nt-cont{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--nt-ink);padding-bottom:10px;margin-bottom:13px;flex-shrink:0}
.nt-ct{text-align:right;min-width:0}
.nt-ct b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;color:var(--nt-ink)}
.nt-ct span{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--nt-faint)}
.nt-views{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
.sheet-doc.nt.landscape .nt-views{grid-template-rows:repeat(2,1fr)}
.sheet-doc.nt.portrait .nt-views{grid-template-rows:repeat(3,1fr)}
.nt-view{position:relative;background:#F4F6F8;border:1px solid #E1E5EA;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;padding-top:24px}
.nt-view img{max-width:100%;max-height:100%;object-fit:contain}
.nt-view .vh,.ntd-main .vh,.ntd-aux .vh{position:absolute;top:8px;left:10px;display:flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--nt-ink);z-index:2}
.sheet-doc.nt .vh .tick{width:7px;height:7px;background:var(--accent)}
.nt-tbody{flex:1;min-height:0;display:flex;flex-direction:column}
.nt-tbody>.ntx{flex:1}
.nt-tfoot{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--nt-ink);margin-top:10px;padding-top:8px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--nt-faint);flex-shrink:0}
/* --- tool table (shared) --- */
.nt-ttable{width:100%;border-collapse:collapse}
.nt-ttable th{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;text-align:left;background:var(--nt-ink);color:#fff;padding:8px 10px}
.nt-ttable th.r{text-align:right}
.nt-ttable td{padding:8px 10px;font-size:12px;color:var(--nt-sub);border-bottom:1px solid var(--nt-ln)}
.nt-ttable tbody tr:nth-child(even) td{background:var(--nt-shade)}
.nt-ttable tbody tr td.tn{background:var(--accent);width:46px;padding:0;text-align:center}
.nt-ttable tbody td.tn span{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;color:#fff}
.nt-ttable td.d{font-weight:600;color:var(--nt-ink)}
.nt-ttable td.r{text-align:right}
.nt-ttable td.num{color:var(--nt-ink);font-weight:600}
/* --- tool matrix (3c) --- */
.ntx{display:grid;border:1px solid var(--nt-ln);align-content:stretch;grid-auto-rows:auto}
.ntx-corner{border-bottom:1px solid var(--nt-ln)}
.ntx-th{background:var(--nt-ink);color:#fff;padding:10px 8px;text-align:center;border-left:1px solid rgba(255,255,255,.12);min-width:0}
.ntx-th b{display:block;font-family:'Space Mono',monospace;font-weight:700;font-size:15px;color:var(--accent)}
.ntx-th span{display:block;font-size:10.5px;margin-top:3px;line-height:1.28;max-height:68px;overflow:hidden;overflow-wrap:anywhere}
.ntx-lab{padding:10px 12px;border-bottom:1px solid var(--nt-ln);font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--nt-faint);display:flex;align-items:center}
.ntx-lab.acc{color:var(--accent);font-weight:700}
.ntx-lab.shade,.ntx-cell.shade{background:var(--nt-shade)}
.ntx-cell{padding:10px 8px;border-left:1px solid var(--nt-ln);border-bottom:1px solid var(--nt-ln);text-align:center;font-size:12px;font-weight:600;color:var(--nt-ink);display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.ntx-cell.num,.ntx-cell.shade.num{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px}
/* --- tool cards (1d) --- */
.ntk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;align-content:start}
.ntk-tool{background:#fff;border-radius:10px;padding:13px 14px;display:flex;gap:12px;box-shadow:0 2px 8px rgba(20,24,29,.06)}
.ntk-tool .tno{width:40px;height:40px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:12.5px;color:#fff;flex-shrink:0}
.ntk-tool .ti{flex:1;min-width:0}
.ntk-tool .ti>b{display:block;font-weight:700;font-size:13.5px;color:var(--nt-ink);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntk-tool .specs{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;font-size:11px}
.ntk-tool .specs span{color:var(--nt-faint);margin-right:5px}
.ntk-tool .specs b{color:var(--nt-ink);font-weight:600}
/* --- spine tool rows (2c) --- */
.nts-tool{display:flex;align-items:stretch;border:1px solid var(--nt-ln);border-left:4px solid var(--accent);margin-bottom:10px;background:#fff}
.nts-tool .tno{padding:12px 14px;border-right:1px solid var(--nt-ln);display:flex;align-items:center;font-family:'Space Mono',monospace;font-weight:700;font-size:16px;color:var(--nt-ink);min-width:60px;justify-content:center}
.nts-tool .ti{flex:1;padding:9px 14px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.nts-tool .ti b{font-weight:700;font-size:13.5px;color:var(--nt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nts-tool .ti span{font-size:11.5px;color:var(--nt-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nts-tool .nums{display:flex;border-left:1px solid var(--nt-ln);background:#F6F8FA}
.nts-tool .nn{padding:6px 15px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.nts-tool .nn b{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;color:var(--nt-ink)}
.nts-tool .nn span{font-family:'Space Mono',monospace;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--nt-faint);margin-top:1px}
/* ============ 3a — SPLIT BLEED ============ */
.sheet-doc.tpl-bleed.nt-p1 .nt-page{flex-direction:row;padding:0}
.ntb-photo{flex:1.32;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-right:5px solid var(--accent);background-color:#EDF0F3;background-image:linear-gradient(#E2E6EB 1px,transparent 1px),linear-gradient(90deg,#E2E6EB 1px,transparent 1px);background-size:38px 38px;min-width:0}
.tpl-bleed .ntb-photo .ptag{top:0;left:0;background:var(--nt-ink);color:#fff;padding:8px 13px;font-size:9px}
.tpl-bleed .ntb-photo .psub{top:auto;right:auto;bottom:10px;left:12px;color:#8A929E}
.ntb-data{flex:1;display:flex;flex-direction:column;padding:24px 26px;min-width:0}
.ntb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.tpl-bleed .nt-flex{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:hidden}
.tpl-bleed .nt-foot{border-top-width:2px;margin-top:12px}
/* ============ 3b — MULTI-VIEW DOSSIER ============ */
.ntd-head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:2px solid var(--nt-ink);padding-bottom:12px;gap:14px;flex-shrink:0}
.ntd-head .nt-title{margin-top:9px;font-size:25px}
.ntd-meta{display:flex;border:1px solid var(--nt-ln);flex-shrink:0}
.ntd-meta .nt-cell{border-left:1px solid var(--nt-ln);padding:7px 12px}
.ntd-meta .nt-cell:first-child{border-left:none}
.ntd-grid{flex:1;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:12px;margin-top:13px;min-height:0}
.ntd-main{grid-row:span 2}
.ntd-main,.ntd-aux{position:relative;background:#F4F6F8;border:1px solid #E1E5EA;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;padding-top:24px}
.ntd-aux.empty .nt-none{font-size:8.5px;max-width:170px;text-align:center}
.ntd-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-top:12px;border-top:1px solid var(--nt-ln);padding-top:10px;flex-shrink:0}
.ntd-sign{display:flex;align-items:flex-end;gap:10px}
.ntd-sign .nt-sign{flex-direction:column;gap:9px}
.ntd-sign .nt-sign span{padding-right:0}
/* ============ 3c — TOOL MATRIX ============ */
.ntm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:12px;flex-shrink:0}
.ntm-meta{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--nt-ln);margin:0 0 12px;flex-shrink:0}
.ntm-meta .nt-cell{border-right:1px solid var(--nt-ln);padding:8px 10px}
.ntm-meta .nt-cell:last-child{border-right:none}
.ntm-photo{flex:1;position:relative;background:#F4F6F8;border:1px solid #E1E5EA;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
.ntm-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:12px 0 0;min-height:112px;flex-shrink:0}
.tpl-matrix .nt-foot{margin-top:12px}
/* ============ 2a — CARBON DARK ============ */
.sheet-doc.tpl-carbon{background:#14181D;--nt-ink:#fff;--nt-sub:rgba(255,255,255,.8);--nt-faint:rgba(255,255,255,.45);--nt-ln:rgba(255,255,255,.14);--nt-shade:rgba(255,255,255,.05)}
.tpl-carbon .nt-word,.tpl-carbon .nt-title{color:#fff}
.tpl-carbon .vdiv{background:rgba(255,255,255,.15)}
.ntc-head{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.ntc-t{min-width:0}
.ntc-t .k{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ntc-t .p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;color:var(--nt-ink);overflow:hidden;overflow-wrap:anywhere}
.ntc-op{display:flex;align-items:baseline;gap:7px;border:2px solid var(--accent);padding:6px 13px;flex-shrink:0}
.ntc-op span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--accent)}
.ntc-op b{font-family:'Archivo',sans-serif;font-weight:800;font-size:23px;line-height:1;color:#fff}
.ntc-main{flex:1;display:grid;grid-template-columns:1fr 276px;gap:17px;margin-top:15px;min-height:0}
.ntc-photo{position:relative;background:#0D1117;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ntc-photo::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px}
.ntc-photo::after{content:'';position:absolute;left:0;bottom:0;width:80px;height:4px;background:var(--accent);z-index:2}
.ntc-photo .psub{color:rgba(255,255,255,.4)}
.ntc-rail{display:flex;flex-direction:column;gap:11px;min-height:0}
.ntc-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:12px 14px}
.ntc-panel.grow{flex:1;min-height:0;overflow:hidden}
.ntc-panel .nt-lab{color:rgba(255,255,255,.45)}
.ntc-kv{display:flex;flex-direction:column;gap:7px}
.ntc-kv .nt-cell{background:transparent;padding:0;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ntc-kv .nt-cell .k{font-family:'Space Grotesk',sans-serif;font-size:11.5px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.55)}
.ntc-kv .nt-cell .v{margin:0;font-size:12px;color:#fff}
.ntc-kv .nt-cell.hi .v{color:var(--accent)}
.ntc-tools{background:var(--accent);padding:11px 14px}
.ntc-tools .nt-lab{color:rgba(255,255,255,.78)}
.ntc-tools .nt-none,.ntc-tools .nt-more{color:rgba(255,255,255,.75)}
.tpl-carbon .nt-notes{color:rgba(255,255,255,.8)}
.tpl-carbon .nt-dim{border-bottom-color:rgba(255,255,255,.15)}
.tpl-carbon .nt-foot,.tpl-carbon .nt-cont,.tpl-carbon .nt-tfoot{border-top-color:rgba(255,255,255,.18);border-bottom-color:rgba(255,255,255,.18)}
.tpl-carbon .nt-sign span{border-bottom-color:rgba(255,255,255,.4)}
.tpl-carbon .nt-ttable th{background:rgba(255,255,255,.08)}
.tpl-carbon .nt-ct b{color:#fff}
/* ============ 2b — SWISS LEDGER ============ */
.sheet-doc.tpl-ledger{background:#FBFBF9;--nt-ln:#D8D8D2;--nt-shade:#F3F3EE}
.ntl-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:5px solid var(--nt-ink);padding-bottom:13px;gap:14px;flex-shrink:0}
.ntl-head .nt-title.big{font-size:33px;margin-top:10px;line-height:.98}
.ntl-op{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.ntl-op b{font-family:'Archivo',sans-serif;font-weight:800;font-size:42px;line-height:.9;color:var(--accent)}
.ntl-op span{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#6B7280}
.ntl-meta{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--nt-ink);flex-shrink:0}
.ntl-meta .nt-cell{background:transparent;border-left:1px solid #D8D8D2;padding:9px 12px}
.ntl-meta .nt-cell:first-child{border-left:none;padding-left:0}
.ntl-mid{display:grid;grid-template-columns:1fr 168px;gap:15px;margin-top:14px;height:232px;flex-shrink:0}
.ntl-photo{position:relative;background:#EFEFEA;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ntl-photo .ptag{color:var(--nt-ink)}
.ntl-rail{border-top:1px solid var(--nt-ink);display:flex;flex-direction:column;overflow:hidden}
.ntl-rail>div{padding:9px 0;border-bottom:1px solid #D8D8D2}
.ntl-reg{margin-top:13px;flex:1;min-height:0;overflow:hidden}
.tpl-ledger .nt-ttable th{background:transparent;color:var(--nt-faint);border-bottom:1px solid #D8D8D2;padding:6px 8px}
.tpl-ledger .nt-ttable tbody tr td.tn{background:transparent;width:44px;text-align:left;padding:8px 0}
.tpl-ledger .nt-ttable tbody td.tn span{color:var(--accent)}
.tpl-ledger .nt-ttable tbody tr:nth-child(even) td{background:transparent}
.tpl-ledger .nt-foot.rule{border-top:5px solid var(--nt-ink)}
/* ============ 2c — ACCENT SPINE ============ */
.sheet-doc.tpl-spine.nt-p1 .nt-page{flex-direction:row;padding:0}
.nts-spine{width:76px;background:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0;flex-shrink:0}
.nts-spine .vtext{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.92);max-height:430px;overflow:hidden}
.nts-spine .op{display:flex;flex-direction:column;align-items:center;gap:2px}
.nts-spine .op span{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.8)}
.nts-spine .op b{font-family:'Archivo',sans-serif;font-weight:800;font-size:28px;line-height:1;color:#fff}
.nts-content{flex:1;display:flex;flex-direction:column;padding:24px 28px;min-width:0}
.nts-t1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:'Archivo',sans-serif;font-weight:800;font-size:23px;letter-spacing:-.02em;color:var(--nt-ink)}
.nts-t1 em{font-style:normal;color:var(--accent)}
.nts-t1 .right{font-family:'Space Mono',monospace;font-size:9px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--nt-faint);flex-shrink:0}
.nts-sub{font-size:12px;color:#6B7280;margin:4px 0 13px}
.nts-sub b{color:var(--accent)}
.nts-photo{flex:1;position:relative;background:#F4F6F8;border:1px solid #E1E5EA;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
.nts-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:12px 0 0;min-height:104px;flex-shrink:0}
.tpl-spine .nts-content .nt-foot{margin-top:12px}
/* ============ 1a — TECHNICAL BLUEPRINT ============ */
.ntp-head{display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--nt-ink);padding-bottom:12px;gap:12px;flex-shrink:0}
.ntp-op{display:flex;flex-direction:column;align-items:center;background:var(--accent);color:#fff;padding:6px 15px;border-radius:6px;flex-shrink:0}
.ntp-op span{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.16em}
.ntp-op b{font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;line-height:1}
.ntp-meta{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--nt-ln);flex-shrink:0}
.ntp-meta .nt-cell{background:transparent;border-right:1px solid var(--nt-ln);padding:9px 11px}
.ntp-meta .nt-cell:last-child{border-right:none}
.ntp-body{flex:1;display:grid;grid-template-columns:1fr 296px;gap:19px;padding-top:14px;min-height:0}
.ntp-photo{position:relative;border:1.5px solid var(--nt-ink);background:#F6F8FA;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ntp-photo::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#E9EDF2 1px,transparent 1px),linear-gradient(90deg,#E9EDF2 1px,transparent 1px);background-size:30px 30px;opacity:.7}
.ntp-photo .corner{position:absolute;left:8px;bottom:8px;width:20px;height:20px;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);z-index:2}
.ntp-rail{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:hidden}
.tpl-blueprint .nt-foot{margin-top:13px}
/* ============ 1b — BOLD EDITORIAL ============ */
.sheet-doc.tpl-editorial.nt-p1 .nt-page{padding:0}
.nte-band{background:var(--accent);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.nte-band .nt-word{color:#fff}
.nte-bandr{display:flex;align-items:center;gap:12px}
.nte-bandr>span:first-child{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.nte-bandr .op{display:flex;align-items:baseline;gap:5px;background:rgba(0,0,0,.22);padding:5px 12px;border-radius:6px;font-family:'Space Mono',monospace;font-size:10px;color:#fff}
.nte-bandr .op b{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;line-height:1}
.nte-inner{flex:1;display:flex;flex-direction:column;padding:18px 28px 22px;min-height:0}
.nte-photo{position:relative;height:296px;background:#14181D;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-top:11px;flex-shrink:0}
.nte-photo::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px}
.nte-photo .psub{color:rgba(255,255,255,.45)}
.nte-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:14px;flex-shrink:0}
.nte-cards .nt-cell{background:#F6F8FA;border-radius:8px;padding:10px 13px;border:none}
.nte-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:15px;flex:1;min-height:0;overflow:hidden}
.tpl-editorial .nte-inner .nt-foot{margin-top:13px}
/* ============ 1c — DATA TABLE (p1 shared head style) ============ */
.ntt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.ntt-tr{text-align:right;min-width:0}
.ntt-tr b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;color:var(--nt-ink);overflow:hidden;overflow-wrap:anywhere}
.ntt-tr span{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--nt-faint)}
.nt-bar{height:4px;background:var(--accent);margin-top:11px;flex-shrink:0}
.ntt-body{flex:1;display:grid;grid-template-columns:1fr 296px;gap:17px;padding-top:14px;min-height:0}
.ntt-photo{position:relative;background:#F4F6F8;border:1px solid #E1E5EA;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ntt-rail{display:flex;flex-direction:column;gap:13px;min-height:0;overflow:hidden}
.ntt-rail .nt-metagrid{margin:0}
.tpl-datatable .nt-foot{margin-top:13px}
/* ============ 1d — TOOL CARDS ============ */
.sheet-doc.tpl-toolcards{background:#F2F4F7}
.ntk-photo{position:relative;height:296px;background:#fff;border-radius:11px;box-shadow:0 2px 8px rgba(20,24,29,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:13px;flex-shrink:0}
.ntk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:12px;flex-shrink:0}
.ntk-cards .nt-cell{background:#fff;border-radius:8px;padding:10px 13px;border:none}
.ntk-two{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:12px;flex:1;min-height:0;overflow:hidden}
.ntk-card{background:#fff;border-radius:11px;padding:13px 15px;box-shadow:0 2px 8px rgba(20,24,29,.06);overflow:hidden}
.tpl-toolcards .nt-foot{margin-top:13px;border-top-color:#D6DAE0;border-top-width:1px}
/* ============ 1e — SETUP STEPS ============ */
.ntst-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px;flex-shrink:0}
.ntst-strip .nt-cell{background:#F6F8FA;border:none;border-left:3px solid var(--accent);padding:8px 12px}
.ntst-mid{display:grid;grid-template-columns:1fr 218px;gap:14px;margin:13px 0;height:225px;flex-shrink:0}
.ntst-photo{position:relative;background:#F4F6F8;border:1px solid #E1E5EA;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ntst-rail{overflow:hidden}
.ntst-steps{flex:1;min-height:0;overflow:hidden}
.ntst-row{display:flex;gap:13px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--nt-ln)}
.ntst-row .num{width:26px;height:26px;border-radius:50%;background:var(--nt-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;flex-shrink:0}
.ntst-row .tx{font-size:12.5px;color:var(--nt-sub);line-height:1.5;padding-top:3px}
.tpl-steps .nt-foot{margin-top:12px}
/* ---- Tools tab: per-setup cutting params on attached rows ---- */
/* ============ Cutting-data workspace (wide, right-docked over the viewport) ============ */
.cutx .ws{position:fixed;top:70px;bottom:24px;right:20px;width:var(--tools-panel-w);background:var(--panel);border:1px solid var(--line);box-shadow:0 40px 120px -20px rgba(0,0,0,.85);display:flex;flex-direction:column;z-index:1}
.ws-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.ws-head h1{font-family:var(--font-display);font-weight:600;font-size:17px;margin:0;letter-spacing:-.01em}
.ws-head .cnt{font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--scribe)}
.ws-spacer{margin-left:auto}
.ws-imp{font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#fff;background:var(--grad-action);border:none;padding:9px 18px;cursor:pointer;
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:filter .15s}
.ws-imp:hover{filter:brightness(1.08)}
.ws-close{background:none;border:1px solid var(--line);color:var(--text-dim);width:30px;height:30px;cursor:pointer;font-size:14px;flex-shrink:0}
.ws-close:hover{border-color:var(--text-dim);color:var(--text)}
.ws-sub{display:flex;align-items:center;gap:16px;padding:10px 20px;border-bottom:1px solid var(--line)}
.ws-rollup{display:flex;gap:18px;font-family:var(--font-mono);font-size:12px}
.ws-rollup .seg{display:flex;align-items:center;gap:7px;color:var(--text-dim)}
.ws-rollup .n{font-weight:700;font-size:13px}
.ws-rollup .ready .n{color:var(--scribe)}.ws-rollup .miss .n{color:var(--amber)}.ws-rollup .dup .n{color:var(--mcred)}
.ico{width:12px;height:12px;flex-shrink:0;display:inline-block}
.ico.ok{background:var(--scribe)}
.ico.miss{width:0;height:0;background:none;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--amber)}
.ico.dup{background:var(--mcred)}
.ws-filters{margin-left:auto;display:flex;gap:7px}
.ws-filters .chip{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-dim);border:1px solid var(--line);padding:5px 11px;cursor:pointer;background:none;border-radius:6px}
.ws-filters .chip.on{color:var(--text);border-color:var(--text-dim);background:var(--panel-2)}
.ws-filters .chip.miss.on{color:var(--amber);border-color:var(--amber)}
.ws-twrap{flex:1;overflow-y:auto}
.ws-tbl{width:100%;border-collapse:collapse}
.ws-tbl thead th{position:sticky;top:0;z-index:2;background:var(--panel-2);font-family:var(--font-mono);font-weight:600;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-dim);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ws-tbl thead th.edit{color:var(--text);background:var(--panel-3);border-left:1px solid var(--line);text-align:right}
.ws-tbl thead th.rt{text-align:right}
.ws-tbl thead th i{font-style:normal;color:#3f4a60;font-size:9px}
.ws-tbl td{border-bottom:1px solid var(--line);padding:8px 10px;vertical-align:middle;font-size:13px}
.ws-tbl .c-st{width:30px;text-align:center;padding:8px 4px}
.ws-tbl .c-tn{width:46px}
.ws-tbl .c-tn .mono{font-weight:700;color:var(--amber);font-size:12.5px}
.ws-tbl tr.dup .c-tn .mono{color:var(--mcred)}
.ws-tbl .c-desc{color:var(--text);line-height:1.3}
.ws-tbl .c-dia{width:60px;text-align:right}
.ws-tbl .c-dia .mono{color:var(--scribe);font-size:12px}
.ws-tbl .c-hold{width:104px;color:var(--text-dim);font-family:var(--font-mono);font-size:11px}
.ws-tbl .duptag{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.06em;color:var(--mcred);border:1px solid var(--mcred);padding:1px 4px;margin-left:8px;white-space:nowrap}
.ws-tbl .c-edit{width:82px;padding:0;border-left:1px solid var(--line)}
.ws-tbl td.c-edit input{width:100%;height:44px;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-mono);font-size:13px;text-align:right;padding:0 10px}
.ws-tbl td.c-edit.v-cam input{color:var(--scribe)}
.ws-tbl td.c-edit.v-manual input{color:var(--text)}
.ws-tbl td.c-edit input::placeholder{color:#3f4a60}
.ws-tbl td.c-edit.empty input::placeholder{color:var(--amber);opacity:.75}
.ws-tbl td.c-edit.empty{background:rgba(255,107,15,.04)}
.ws-tbl td.c-edit:focus-within{background:rgba(255,107,15,.07);box-shadow:inset 0 0 0 1.6px var(--amber)}
.ws-tbl tr:hover td{background:rgba(255,255,255,.015)}
.ws-tbl tr.dup td{background:rgba(217,37,43,.05)}
.ws-tbl .c-x{width:46px;text-align:center;padding:0;border-left:1px solid var(--line);background:rgba(217,37,43,.04)}
.ws-tbl thead th.c-x{background:var(--panel-3);border-left:1px solid var(--line)}
.ws-tbl .c-x button{width:26px;height:26px;border-radius:50%;border:1px solid #33405c;color:var(--text-dim);background:var(--panel);cursor:pointer;font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s}
.ws-tbl .c-x button:hover{color:#fff;background:var(--mcred);border-color:var(--mcred)}
/* "Clear all" in the header */
.ws-clear{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--text-dim);background:none;border:1px solid var(--line);border-radius:6px;padding:6px 11px;cursor:pointer;margin-right:9px}
.ws-clear:hover{color:#fff;background:var(--mcred);border-color:var(--mcred)}
.ws-clear svg{flex-shrink:0}
.ws-foot{display:flex;align-items:center;gap:18px;padding:11px 20px;border-top:1px solid var(--line);background:var(--panel-2)}
.ws-keys{display:flex;gap:15px;flex-wrap:wrap}
.ws-keys span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-dim)}
.ws-keys kbd{font-family:var(--font-mono);font-size:10.5px;background:var(--panel);border:1px solid var(--line);border-bottom-width:2px;padding:2px 6px;color:var(--text)}
.ws-done{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:600;background:var(--amber);border:1px solid var(--amber);color:#05070d;padding:8px 18px;cursor:pointer}
.ws-done:hover{background:#ff7d2b}
@media (max-width:900px){.cutx .ws{left:12px;right:12px;width:auto}}
.s-tt .tsub,.s-tl .tsub{font-family:var(--font-data);font-size:8px;letter-spacing:.03em;color:var(--faint);margin-top:1px;white-space:normal}
/* carbon dark: views page boxes match the dark photo panel (white labels stay readable) */
.tpl-carbon .nt-view{background:#0D1117;border-color:rgba(255,255,255,.12)}
/* dedicated tool-list pages for the classic-engine templates (Classic / Wide) */
.sheet-doc.tools-pg .sheet-fit>.s-block{margin-top:4px}
.sheet-doc.tools-pg .s-footwrap{margin-top:auto}
/* ledger p1 without the register: the photo + rail fill the page */
.ntl-mid.grow{flex:1;min-height:232px;height:auto}
.ntl-toolptr{padding:9px 0}
/* page-1 "Tool Register → see the tool list page" pointer added to templates that had no tooling slot
   (the flex/grid sections above it absorb the height, so the sign-off row never clips) */
.nt-toolreg{flex-shrink:0;margin-top:11px}
/* tool cards: long holder/spec values ellipsize instead of blowing the card width */
.ntk-tool .specs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ntk-tool .specs>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* ---- My work: Shared 3D views tab ---- */
.mw-shares-hint{font-size:12px;color:var(--text-dim);line-height:1.6;margin:2px 0 14px;max-width:720px}
.mw-shares{display:flex;flex-direction:column;gap:9px}
.mw-share{display:flex;align-items:center;gap:14px;background:var(--panel-2,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.mw-share .ms-main{flex:1;min-width:0}
.mw-share .ms-name{font-weight:600;font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-share .ms-name .ms-op{font-family:var(--font-mono);font-size:11px;color:var(--amber);margin-left:7px}
.mw-share .ms-meta{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-share .ms-acts{display:flex;gap:7px;flex-shrink:0}
/* Import job: "add your posted NC program" panel (speeds & feeds + G-code Studio) */
.jobx-nc{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:12px 0;background:var(--panel-2)}
.jobx-nc.emph{border-color:rgba(255,107,15,.5);background:rgba(255,107,15,.05)}
.jobx-nc.has-nc{border-color:rgba(26,212,226,.5);background:rgba(26,212,226,.05)}
.jobx-nc-top{display:flex;align-items:center;gap:8px;font-size:13.5px}
.jobx-nc-top b{color:var(--text)}
.jobx-nc-ico{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--amber);color:#05070d;border-radius:6px;font-size:12px;font-weight:700}
.jobx-nc.has-nc .jobx-nc-ico{background:var(--scribe)}
.jobx-nc-why{margin:8px 0 6px;font-size:12.5px;color:var(--text-dim);line-height:1.55}
.jobx-nc-list{margin:0 0 11px;padding-left:18px;font-size:12.5px;color:var(--text-dim);line-height:1.7}
.jobx-nc-list li b{color:var(--text)}
.jobx-nc-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.jobx-nc-status{font-size:11.5px;color:var(--text-faint);font-family:var(--font-mono)}
.jobx-nc-ok{color:var(--scribe);font-weight:600}
.jobx-nc-part{color:var(--amber)}
/* ============ Custom library picker (Tools tab left pane) ============ */
.tlp{position:relative;flex:1;min-width:0}
.tlp-control{display:flex;align-items:center;gap:10px;width:100%;background:var(--panel-2);border:1px solid var(--line);padding:8px 10px;cursor:pointer;text-align:left;color:var(--text);border-radius:8px}
.tlp-control:hover{border-color:#2a3547}
.tlp-control.open{border-color:var(--amber)}
.tlp-txt{flex:1;min-width:0}
.tlp-name{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlp-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:2px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlp-curfav{color:var(--amber)}
.tlp-chev{flex-shrink:0;color:var(--text-dim);font-size:11px;transition:transform .12s}
.tlp-control.open .tlp-chev{transform:rotate(180deg)}
.tlp-badge{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 5px;border:1px solid;white-space:nowrap;line-height:1.35;border-radius:4px;flex-shrink:0}
.tlp-badge.shop{color:var(--scribe);border-color:var(--scribe)}
.tlp-badge.fusion{color:var(--amber);border-color:var(--amber)}
.tlp-badge.nx{color:#8fb4ff;border-color:#8fb4ff}
.tlp-badge.mcam{color:#c58cff;border-color:#c58cff}
.tlp-badge.import{color:var(--text-dim);border-color:#2f3a4e}
/* fixed menu (positioned by JS so panel overflow can't clip it) */
.tlp-menu{position:fixed;background:var(--panel);border:1px solid #2a3547;box-shadow:0 30px 80px -18px rgba(0,0,0,.85);z-index:400;display:none;flex-direction:column;max-height:min(60vh,460px);border-radius:8px;overflow:hidden}
.tlp-menu.open{display:flex}
.tlp-search{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tlp-search span{color:#4a5266;font-size:13px}
.tlp-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:13px}
.tlp-search input::placeholder{color:#4a5266}
.tlp-glab{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#5b667d;padding:9px 12px 5px}
.tlp-list{overflow-y:auto}
.tlp-list::-webkit-scrollbar{width:9px}
.tlp-list::-webkit-scrollbar-thumb{background:var(--panel-3);border:2px solid var(--panel)}
.tlp-opt{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;cursor:pointer;border-left:2px solid transparent}
.tlp-opt:hover,.tlp-opt.active{background:var(--panel-2)}
.tlp-opt.active{border-left-color:var(--amber)}
.tlp-opt.current{background:rgba(255,107,15,.06)}
.tlp-opt .o-txt{flex:1;min-width:0}
.tlp-opt .o-name{display:block;font-size:13px;font-weight:500;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlp-opt .o-check{color:var(--amber);font-size:11px;margin-left:8px;white-space:nowrap}
.tlp-opt .o-sub{font-family:var(--font-mono);font-size:10px;line-height:1.3;color:var(--text-dim);margin-top:2px;display:flex;align-items:center;gap:8px}
.tlp-opt .o-count{color:var(--scribe)}
.tlp-opt .o-fav{background:none;border:none;color:#3f4a60;cursor:pointer;font-size:15px;line-height:1;flex-shrink:0;padding:2px}
.tlp-opt .o-fav.on{color:var(--amber)}
.tlp-opt:hover .o-fav{color:var(--text-dim)}
.tlp-opt .o-fav.on{color:var(--amber)}
.tlp-opt .o-fav:hover{color:var(--amber)!important}
.tlp-sep{height:1px;background:var(--line);margin:5px 0}
.tlp-foot{border-top:1px solid var(--line);padding:9px 12px;display:flex;align-items:center;justify-content:space-between}
.tlp-foot .tlp-new{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);background:none;border:none;cursor:pointer}
.tlp-foot .tlp-new:hover{color:var(--text)}
.tlp-foot a{color:var(--scribe);font-size:11.5px;text-decoration:none}
.tlp-foot a:hover{text-decoration:underline}
.tlp-none{padding:16px 12px;color:var(--text-dim);font-size:12.5px}

/* ---------- v4 · HERO REVEAL: the bone card lifts off the pinned 3D demo ----------
   Desktop only — mobile keeps plain flow. The demo wrapper is pulled up behind the
   bone band (band ≈ 100vh+6 by design, see .bhero-inner padding), so the scene sits
   pinned under it from load. Wrapper height = lift (≈100vh) + full-frame dwell
   (≈35vh) + natural exit (100vh). */
@media (min-width:1081px){
  .home-fs .bhero{z-index:2}
  /* 235vh→210vh + stage 100vh→92vh (2026-07-20, Rufus: too much scrolling through the dark
     zone) — cuts ~33vh of scroll between the curtain finishing and "Three doors" arriving */
  .home-fs .demo-reveal{position:relative;z-index:1;height:210vh;margin-top:calc(-100vh - 6px)}
  .home-fs .demo-reveal .demo3d{position:sticky;top:0;height:92vh;padding:0}
  .home-fs .demo-reveal .demo3d-stage{max-width:none;width:100%;height:100%;min-height:0;margin:0;
    border-radius:0;border:0;box-shadow:none}
  /* kill the dead black between the demo and "Three doors": the features band slides up
     OVER the canvas's empty bottom as the demo exits (both are near-black, seamless).
     28vh keeps ~150px of undisturbed full-frame demo after the curtain completes. */
  .home-fs .feats{position:relative;z-index:2;margin-top:-28vh}
  /* the scene dissolves into black at the canvas bottom, so the rising band never
     hard-slices the vise/tablet — the demo visibly "ends" before the next section
     (viewport aspect moves the model around; a gradient is safe at every size) */
  .home-fs .demo-reveal .demo3d::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
    height:32vh;background:linear-gradient(to bottom,transparent,#0b0c0e 82%);
    pointer-events:none;z-index:1}
  .home-fs .demo-reveal .demo3d .hero-hint{z-index:2;transition:opacity .35s}
}
/* nothing of the pinned demo (scene, hint) shows while at the very top — it fades in
   as the bone card starts lifting; .veiled is toggled by the cue listener in landing.js */
.demo-reveal .demo3d{transition:opacity .5s}
.demo-reveal .demo3d.veiled{opacity:0}

/* QR hint when the project is not cloud-saved yet — the QR will be omitted */
.qrhint.qrhint-warn{color:var(--amber)}