/* Printara AI 3MF Generator landing page (/ai-3mf-generator/).
   Page-scoped: does not load /css/style.css. Same tokens and section components as the AI 3D Generator page
   (ai-3d-generator/assets/ai3d-landing.css), so the family reads as one: dark field, cyan + violet, Space Grotesk
   headlines, Inter body. Own parts: the filament list beside the stage (rows on desktop, chips on tablets and phones,
   lit one after another while the slots fill), the compare divider, the readout with the file's numbers, the Studio
   controls redrawn in How it works, the slot gallery, the file's numbers and palette table, the 3MF file tree. */
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-wght.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"SG Fallback";src:local("Arial");size-adjust:104%;ascent-override:90%;descent-override:24%}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%}

:root{
  --bg:#07090E;--bg-2:#0C0F15;--surface:#111620;--surface-2:#161B26;--hover:#1C212E;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);--line-accent:rgba(0,229,255,.32);
  --text:#F0F2F5;--text-2:#A3AFC0;--text-3:#8A97A8;
  --cyan:#00E5FF;--cyan-dark:#00A8CC;--cyan-glow:rgba(0,229,255,.14);
  --violet:#7C3AED;--violet-text:#B39DFA;--violet-wash:rgba(124,58,237,.13);--violet-line:rgba(124,58,237,.32);
  --grad:linear-gradient(135deg,#00E5FF 0%,#7C3AED 100%);
  --ink-on-cyan:#07090E;
  --ff-d:"Space Grotesk","SG Fallback",ui-sans-serif,system-ui,sans-serif;
  --ff-b:"Inter","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-m:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
  --nav-h:64px;--gut:clamp(16px,3.4vw,48px);--maxw:1240px;
  --r-s:8px;--r:12px;--r-l:16px;--r-xl:24px;
  --sec-pad:clamp(48px,4.6vw,66px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-b);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
p,h1,h2,h3,ol,ul,dl,dd,figure,table{margin:0}
ol,ul{padding:0}
::selection{background:rgba(0,229,255,.28);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--cyan);color:var(--ink-on-cyan);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.wrap{max-width:calc(var(--maxw) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------- buttons ---------- */
.b{--bh:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--bh);padding:0 20px;border-radius:var(--r);border:0;
  font-family:var(--ff-b);font-size:15.5px;font-weight:600;letter-spacing:-.005em;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s,color .18s,border-color .18s;-webkit-tap-highlight-color:transparent;user-select:none}
.b svg{width:18px;height:18px;flex:none}
.b:active{transform:translateY(1px)}
.b-primary{background:var(--cyan);color:var(--ink-on-cyan);box-shadow:inset 0 -3px 0 0 var(--cyan-dark),0 10px 26px -12px rgba(0,229,255,.55)}
.b-primary:hover{box-shadow:inset 0 -3px 0 0 var(--cyan-dark),0 0 0 4px var(--cyan-glow),0 12px 30px -10px rgba(0,229,255,.6);transform:translateY(-1px)}
.b-primary:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 0 var(--cyan-dark)}
.b-ghost{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -3px 0 0 rgba(255,255,255,.04)}
.b-ghost:hover{background:var(--hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.b-ghost[aria-pressed="true"]{background:rgba(0,229,255,.08);box-shadow:inset 0 0 0 1px var(--cyan),inset 0 -3px 0 0 rgba(0,229,255,.12)}
.b[hidden]{display:none}
.b-sm{--bh:40px;padding:0 16px;font-size:14.5px;border-radius:10px}
.cmp-btn{min-width:226px}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-accent);padding:4px 0;transition:border-color .2s,color .2s}
.link svg{width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.link:hover{border-bottom-color:var(--cyan);color:#fff}
.link:hover svg{transform:translateX(3px)}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:rgba(7,9,14,.82);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.solid{border-bottom-color:var(--line)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gut)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand-mark{width:30px;height:30px}
.brand-name{font-family:var(--ff-d);font-weight:700;font-size:20px;letter-spacing:-.03em}
.nav-links{display:flex;gap:2px;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--text-2);text-decoration:none;padding:10px 14px;border-radius:9px;transition:background .2s,color .2s}
.nav-links a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.nav-acts{display:flex;align-items:center;gap:8px}
.nav-login{background:transparent;box-shadow:none;color:var(--text-2)}
.nav-login:hover{background:rgba(255,255,255,.05);box-shadow:none;color:var(--text)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--bg)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;line-height:24px;color:var(--text-3)}
.crumbs li+li::before{content:"/";margin-right:6px;color:rgba(255,255,255,.22)}
.crumbs a{color:var(--text-2);text-decoration:none;display:inline-block;min-height:24px}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.pill{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 12px;border-radius:999px;background:var(--violet-wash);box-shadow:inset 0 0 0 1px var(--violet-line);
  color:var(--violet-text);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.pill::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--grad)}
.hero-top h1{margin:16px 0 0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.04em;line-height:.98;font-size:clamp(46px,4.5vw,66px);text-wrap:balance}
.dlp .tl-lead{margin:18px 0 0;font-size:clamp(16.5px,1.2vw,18px);line-height:1.58;color:var(--text-2);max-width:42ch;text-wrap:pretty}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;width:100%}
.facts li{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 8px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.02);
  font-family:var(--ff-d);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.12)}
.hero-note{display:none}
.micro{display:flex;align-items:flex-start;gap:8px;margin-top:12px;width:100%;font-size:13.5px;line-height:1.45;color:var(--text-3)}
.micro svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--cyan)}

/* viewer */
.viewer{position:relative;z-index:1}
.hero-top{position:relative;z-index:5}
.stage{position:absolute;inset:0;z-index:1;outline:none;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;container-type:size;
  /* the square frame is fitted into the stage area (frame box insets); the viewer reads the same numbers, so poster and canvas line up.
     --cx/--cy/--cw/--ch = manifest image.content, written into the markup by the generator */
  --cx:.2903;--cy:.0931;--cw:.4319;--ch:.8264}
.stage.dragging{cursor:grabbing}
.stage:focus-visible{box-shadow:inset 0 0 0 2px var(--cyan)}
.poster,.canvas{position:absolute}
.poster{pointer-events:none;transition:opacity .4s;max-width:none;left:50%;top:50%;height:92%;width:auto;aspect-ratio:1/1;transform:translate(-50%,-50%)}
@supports (width:1cqw){
  .poster{transform:none;
    --aw:calc(100cqw - var(--fl) - var(--fr));--ah:calc(100cqh - var(--ft) - var(--fb));
    --d:min(calc(var(--aw) / (var(--cw) * var(--ov))), calc(var(--ah) / var(--ch)));
    width:var(--d);height:var(--d);
    left:calc(var(--fl) + (var(--aw) - var(--cw) * var(--d)) / 2 - var(--cx) * var(--d));
    top:calc(var(--ft) + (var(--ah) - var(--ch) * var(--d)) / 2 - var(--cy) * var(--d))}
}
.poster.gone{opacity:0}
html:not(.js) #poster{display:none}
.canvas{inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s}
.canvas.on{opacity:1}
.frame-box{position:absolute;left:var(--fl);right:var(--fr);top:var(--ft);bottom:var(--fb);pointer-events:none;z-index:2}
.corner{position:absolute;width:20px;height:20px;border:0 solid rgba(255,255,255,.2);transition:opacity .3s}
.corner.tl{left:-10px;top:-6px;border-top-width:1.5px;border-left-width:1.5px}
.corner.tr{right:-10px;top:-6px;border-top-width:1.5px;border-right-width:1.5px}
.corner.bl{left:-10px;bottom:-6px;border-bottom-width:1.5px;border-left-width:1.5px}
.corner.br{right:-10px;bottom:-6px;border-bottom-width:1.5px;border-right-width:1.5px}
.fx{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 70% 42% at 50% 0%,rgba(124,58,237,.10),transparent 70%),radial-gradient(ellipse 50% 30% at 50% 100%,rgba(0,229,255,.035),transparent 70%)}

.spinner{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:rgba(17,22,32,.94);
  box-shadow:inset 0 0 0 1px var(--line-2);padding:9px 13px;border-radius:10px;font-family:var(--ff-d);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.spinner.on{opacity:1;visibility:visible}
.spinner i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--cyan);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* the HUD under the stage: the drag hint, pause and replay, the readout with the file's numbers */
.hud-hint{position:absolute;z-index:5;left:var(--gut);bottom:24px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--text-2);pointer-events:none}
.hud-hint svg{width:24px;height:24px;padding:4px;border-radius:7px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-2)}
.hint-m{display:none}
.hud-btns{position:absolute;z-index:6;left:calc(var(--gut) + 150px);bottom:14px;display:flex;align-items:center;gap:2px}
.hud-btn{height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 11px;border:0;border-radius:10px;background:transparent;color:var(--text-2);
  font-size:13.5px;font-weight:500;cursor:pointer;transition:background .2s,color .2s,opacity .3s}
.hud-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}
.hud-btn svg{width:18px;height:18px;flex:none}
.hud-btn[hidden]{display:none}
#pauseBtn .i-play,#pauseBtn[data-paused="true"] .i-pause{display:none}
#pauseBtn[data-paused="true"] .i-play{display:block}
.readout{position:absolute;z-index:5;bottom:20px;left:calc(var(--fl) + (100% - var(--fl) - var(--fr)) / 2);transform:translate(-50%,6px);display:flex;gap:9px;align-items:center;white-space:nowrap;
  font-family:var(--ff-d);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums;background:rgba(17,22,32,.92);color:var(--text);
  padding:9px 13px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line-2);opacity:0;transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.readout.on{opacity:1;transform:translate(-50%,0)}
.readout .ro-k{color:var(--cyan)}
.ro-sw{display:none;width:10px;height:10px;border-radius:50%;background:var(--c,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.readout.has-sw .ro-sw{display:block}
.ro-v[hidden]{display:none}
.ro-v span+span::before{content:"\00B7";margin:0 7px;color:var(--text-3)}
.ro-hex{font-family:var(--ff-m);letter-spacing:0;text-transform:none}
.hud-static{position:absolute;z-index:5;left:var(--gut);bottom:24px;font-size:13px;color:var(--text-3)}
.hud-hint,.hud-btns,.corner{transition:opacity .3s var(--ease)}
.hero.playing .hud-hint,.hero.playing .hud-btns{opacity:0;pointer-events:none}
html:not(.js) .cmp-btn,html:not(.js) .hud-hint,html:not(.js) .hud-btns{display:none}

/* the state chip on the frame's corner, the dimension rail */
.state-chip{position:absolute;left:12px;top:6px;display:none;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:8px;background:rgba(7,9,14,.8);
  box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap;transition:opacity .3s}
.state-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--chip,var(--violet-text));transition:background .3s}
@media (min-width:900px){html.js .state-chip{display:inline-flex}}
.hero[data-view="compare"] .state-chip{opacity:0}
.measure{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s}
.measure.on{opacity:1}
.m-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-rail,.m-tick{stroke:var(--cyan);stroke-width:1.5px;stroke-linecap:round}
.m-label{position:absolute;left:0;top:0;padding:4px 8px;border-radius:7px;background:rgba(7,9,14,.88);box-shadow:inset 0 0 0 1px rgba(0,229,255,.4);
  font-family:var(--ff-d);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--cyan);white-space:nowrap;font-variant-numeric:tabular-nums}

/* compare: the textured model left of the divider, the 3MF right of it (the viewer draws both; this is the divider) */
.cmp{position:absolute;inset:0;z-index:3;pointer-events:none}
.cmp[hidden]{display:none}
.cmp-line{position:absolute;left:0;top:0;width:2px;height:100px;margin-left:-1px;will-change:transform;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92) 9%,rgba(255,255,255,.92) 91%,rgba(255,255,255,0));box-shadow:0 0 14px rgba(0,229,255,.45)}
.cmp-handle{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:var(--cyan);color:var(--ink-on-cyan);
  display:grid;place-items:center;cursor:ew-resize;pointer-events:auto;touch-action:none;box-shadow:0 0 0 6px rgba(0,229,255,.18),0 10px 26px -8px rgba(0,0,0,.85);transition:box-shadow .2s}
.cmp-handle svg{width:20px;height:20px}
.cmp-handle:hover,.cmp-handle.active{box-shadow:0 0 0 9px rgba(0,229,255,.24),0 10px 26px -8px rgba(0,0,0,.85)}
.cmp-k{position:absolute;top:6px;display:none;align-items:center;gap:7px;padding:5px 10px;border-radius:8px;background:rgba(7,9,14,.84);box-shadow:inset 0 0 0 1px var(--line-2);
  font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.cmp-l{left:0}
.cmp-r{right:0}
.cmp-r::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.cmp-l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet-text)}
.hero[data-view="compare"] .cmp-k{display:inline-flex}

/* the filament list: rows beside the stage on desktop, chips on tablets and phones */
.story-k{margin:0 0 12px;font-family:var(--ff-d);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.slots{list-style:none;display:flex;flex-direction:column;gap:3px}
.slot,.sbtn{display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"sw t pct" "sw hex bar";column-gap:12px;row-gap:3px;align-items:center;
  min-height:52px;padding:7px 10px 7px 8px;border-radius:12px;position:relative}
.slot.has-btn{display:block;padding:0;min-height:0}
.sbtn{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;transition:background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.sbtn:hover{background:rgba(255,255,255,.04)}
.sbtn[aria-pressed="true"]{background:rgba(0,229,255,.06);box-shadow:inset 0 0 0 1px rgba(0,229,255,.24)}
.sw{grid-area:sw;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--ink,#fff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.sw b{font-family:var(--ff-d);font-weight:600;font-size:12px;line-height:1;font-variant-numeric:tabular-nums}
.slot-all .sw{background:var(--pie)}
.sl-t{grid-area:t;font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--text)}
.sl-hex{grid-area:hex;font-family:var(--ff-m);font-size:12px;line-height:1.2;color:var(--text-3)}
.sl-m{grid-area:hex;font-size:12.5px;line-height:1.2;color:var(--text-3)}
.sl-pct{grid-area:pct;justify-self:end;font-family:var(--ff-d);font-weight:500;font-size:13px;line-height:1.2;color:var(--text-2);font-variant-numeric:tabular-nums}
.sl-bar{grid-area:bar;justify-self:end;width:72px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.sl-bar i{display:block;height:100%;width:calc(var(--w,0) * 100%);min-width:2px;border-radius:2px;background:var(--c)}
.sbtn[aria-pressed="true"] .sw{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--cyan)}
/* while the slots fill (and before): an empty slot is a ring of its colour, the filling one fills like a gauge */
.slots-panel.pre .slot:not(.slot-all) .sw{background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1.5px var(--c)}
.slots-panel.pre .slot-all .sw{opacity:.35}
.slots-panel.pre .slot.lit .sw{background:var(--c);color:var(--ink,#fff)}
.slots-panel.pre .slot.filling .sw{background:conic-gradient(var(--c) calc(var(--fp,0) * 1turn),rgba(255,255,255,.04) 0);color:var(--text);transform:scale(1.08);box-shadow:inset 0 0 0 1.5px var(--c),0 0 0 4px rgba(0,229,255,.12)}
.slots-panel.pre .slot.filling .sl-t{color:var(--cyan)}
.slots-panel.pre .slot:not(.lit):not(.filling) .sl-pct,.slots-panel.pre .slot:not(.lit):not(.filling) .sl-bar{opacity:.4}
.slots-hint{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--text-3)}
.sh-m{display:none}
html:not(.js) .slots-hint,html:not(.js) .slot-all{display:none}
.story-note{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--text-3);max-width:32ch}

/* desktop hero: copy left, stage centre, the filament list right */
@media (min-width:1180px){
  .hero{display:grid;--copy-w:min(440px,30vw);--parts-w:252px;
    grid-template-columns:var(--gut) var(--copy-w) minmax(0,1fr) var(--parts-w) var(--gut);grid-template-rows:auto auto minmax(0,1fr);
    height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));min-height:620px;max-height:1060px;
    --fl:calc(var(--gut) + var(--copy-w) + 28px);--fr:calc(var(--gut) + var(--parts-w) + 16px);--ft:22px;--fb:84px;--ov:.95}
  .hero-top{grid-column:2;grid-row:1;position:relative;z-index:5;padding-top:clamp(26px,5vh,60px)}
  .viewer{grid-column:1/-1;grid-row:1/-1;min-height:0}
  .hero-acts{grid-column:2;grid-row:2;align-self:start;position:relative;z-index:5}
  .slots-panel{grid-column:4;grid-row:1/-1;align-self:start;position:relative;z-index:5;padding-top:clamp(26px,6vh,80px)}
  .hero-acts .b-primary{padding:0 18px}
}
@media (min-width:1180px) and (max-height:820px){
  .facts{display:none}
  .hero-top h1{font-size:clamp(42px,4vw,56px)}
  .story-note{display:none}
}
@media (min-width:1180px) and (max-height:740px){
  .slot,.sbtn{min-height:44px;padding-top:4px;padding-bottom:4px}
  .slots-hint{display:none}
  .micro{display:none}
}

/* tablets and small laptops (900 to 1179 px): copy, actions and the filament chips left, the stage right */
@media (min-width:900px) and (max-width:1179px){
  .hero{display:grid;--copy-w:min(420px,41vw);
    grid-template-columns:var(--gut) var(--copy-w) minmax(0,1fr) var(--gut);grid-template-rows:auto auto auto minmax(0,1fr);
    height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));min-height:620px;max-height:940px;
    --fl:calc(var(--gut) + var(--copy-w) + 18px);--fr:var(--gut);--ft:22px;--fb:62px;--ov:1}
  .hero-top{grid-column:2;grid-row:1;padding-top:clamp(18px,3.4vh,40px)}
  .pill{display:none}
  .hero-top h1{margin-top:12px;font-size:clamp(40px,4.6vw,52px)}
  .dlp .tl-lead{font-size:16px;margin-top:12px}
  .viewer{grid-column:1/-1;grid-row:1/-1;min-height:0}
  .hero-acts{grid-column:2;grid-row:3;position:relative;z-index:5;margin-top:16px}
  .hero-acts .b{padding:0 16px}
  .facts{display:none}
  .slots-panel{grid-column:2;grid-row:2;position:relative;z-index:5;margin-top:18px}
  .story-note{display:none}
  .fx{display:none}
}
@media (min-width:900px) and (max-width:1179px) and (max-height:800px){.micro{display:none}}

/* chips: tablets and phones */
@media (max-width:1179px){
  .slots{flex-direction:row;flex-wrap:nowrap;gap:6px}
  .slot,.sbtn{display:block;min-height:0;padding:0;border-radius:50%}
  .slot .sl-t,.slot .sl-hex,.slot .sl-m,.slot .sl-pct,.slot .sl-bar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .sbtn{width:44px;height:44px;display:grid;place-items:center}
  .sbtn:hover{background:transparent}
  .sbtn[aria-pressed="true"]{background:transparent;box-shadow:none}
  .sw{width:36px;height:36px}
  .sbtn[aria-pressed="true"] .sw{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--cyan)}
  html:not(.js) .slot{width:36px;height:36px}
  .sh-d{display:none}.sh-m{display:inline}
  .slots-hint{margin-top:6px}
}

/* stacked hero: phones and narrow tablets, DOM order = visual order */
@media (max-width:899px){
  .hero{display:flex;flex-direction:column;padding-bottom:28px}
  .hero-top{padding:18px var(--gut) 0;max-width:760px;order:1}
  .viewer{order:2}.slots-panel{order:3}.hero-acts{order:4}
  .dlp .tl-lead{max-width:60ch}
  .viewer{height:clamp(340px,60vh,640px);height:clamp(340px,60svh,640px);margin-top:14px;--fl:var(--gut);--fr:var(--gut);--ft:34px;--fb:44px;--ov:1}
  .fx{display:none}
  .stage{overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
  .slots-panel{padding:0 var(--gut);margin-top:10px}
  .story-k{margin-bottom:8px}
  .slots{justify-content:space-between;max-width:420px}
  .story-note{display:none}
  .hero-acts{padding:0 var(--gut);margin-top:18px}
  .facts{margin-top:14px}
  .hud-hint{bottom:12px}
  .hud-btns{bottom:2px}
  .readout{bottom:auto;top:2px;padding:6px 10px;font-size:11px}
  .cmp-k{top:4px}
}
@media (max-width:767px){
  :root{--nav-h:56px}
  .nav-links,.nav-login{display:none}
  .nav .b-sm{--bh:44px}
  .pill{display:none}
  .crumbs ol{font-size:13px}
  .hero-top{padding-top:12px}
  .hero-top h1{margin-top:10px;font-size:clamp(36px,10.4vw,44px)}
  .dlp .tl-lead{font-size:16px;line-height:1.5;margin-top:12px}
  .viewer{height:min(108vw,480px);margin-top:6px;--ft:36px;--fb:40px;--ov:.92}
  .frame-box .corner{display:none}
  .hero-note{display:block;margin-top:14px;font-size:13px;line-height:1.5;color:var(--text-3)}
  .hero-acts{margin-top:14px;gap:8px}
  .hero-acts .b{flex:1 1 100%;padding:0 16px;min-width:0}
  .facts{margin-top:4px}
  .facts li{font-size:11px;padding:5px 8px 5px 7px}
  .hint-d{display:none}.hint-m{display:inline}
  .hud-hint{left:var(--gut);bottom:6px;font-size:12.5px;background:rgba(7,9,14,.82);padding:4px 10px 4px 4px;border-radius:10px}
  .hud-hint svg{width:22px;height:22px;padding:3px}
  .hud-btns{left:auto;right:var(--gut);bottom:0}
  .hud-replay span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .readout .ro-x{display:none}
  .m-label{font-size:11.5px;padding:3px 7px}
  .sw{width:34px;height:34px}
  .sbtn{width:42px;height:44px}
  .cmp-k{font-size:10.5px;padding:4px 8px}
}
@media (max-width:359px){.sw{width:30px;height:30px}.sbtn{width:38px}.slots{gap:2px}}

/* ---------- sections ---------- */
.sec{position:relative;padding:var(--sec-pad) 0}
.sec-alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:760px}
.kicker{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.kicker::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--grad)}
.h2{font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;line-height:1.04;font-size:clamp(30px,3.3vw,48px);text-wrap:balance;max-width:20ch}
.lead{margin-top:18px;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--text-2);max-width:56ch;text-wrap:pretty}
.h3{font-family:var(--ff-d);font-weight:600;letter-spacing:-.015em;line-height:1.2;font-size:clamp(19px,1.6vw,22px)}
.ui{display:inline-block;font-family:var(--ff-d);font-weight:500;font-size:.88em;letter-spacing:0;color:var(--text);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);
  padding:1px 7px;border-radius:6px;white-space:nowrap;line-height:1.5}
.inline{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-accent);text-underline-offset:3px;transition:text-decoration-color .2s}
.inline:hover{text-decoration-color:var(--cyan)}

/* sections below the first screen are laid out and painted only near the viewport; the sizes are the measured content
   heights per breakpoint (tools/seo/multicolor-browser-check.cjs prints them), "auto" keeps the real height once rendered */
.cv{content-visibility:auto;contain-intrinsic-size:auto 800px}
.cv-need{contain-intrinsic-size:auto 528px}.cv-how{contain-intrinsic-size:auto 1264px}.cv-ex{contain-intrinsic-size:auto 1549px}
.cv-out{contain-intrinsic-size:auto 664px}.cv-uses{contain-intrinsic-size:auto 1107px}.cv-faq{contain-intrinsic-size:auto 675px}.cv-cta{contain-intrinsic-size:auto 401px}
@media (max-width:1179px){.cv-need{contain-intrinsic-size:auto 570px}.cv-how{contain-intrinsic-size:auto 1573px}.cv-ex{contain-intrinsic-size:auto 1353px}
  .cv-out{contain-intrinsic-size:auto 692px}.cv-uses{contain-intrinsic-size:auto 1300px}.cv-faq{contain-intrinsic-size:auto 675px}.cv-cta{contain-intrinsic-size:auto 315px}}
@media (min-width:1024px) and (max-width:1179px){.cv-uses{contain-intrinsic-size:auto 1068px}}
@media (max-width:767px){.cv-need{contain-intrinsic-size:auto 1108px}.cv-how{contain-intrinsic-size:auto 1751px}.cv-ex{contain-intrinsic-size:auto 2129px}
  .cv-out{contain-intrinsic-size:auto 1386px}.cv-uses{contain-intrinsic-size:auto 1743px}.cv-faq{contain-intrinsic-size:auto 779px}.cv-cta{contain-intrinsic-size:auto 738px}}

/* reveal on scroll (motion allowed, JS on) */
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0) * 60ms)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none}}

/* S2 what you need */
.need-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(26px,3vw,40px)}
.need{display:flex;flex-direction:column;align-items:flex-start;padding:22px;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.need-i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--cyan);margin-bottom:16px}
.need-i svg{width:22px;height:22px}
.need .h3{font-size:20px}
.need p{margin-top:10px;color:var(--text-2);font-size:15px;line-height:1.6}
.need .link{margin-top:auto;padding-top:14px}
@media (max-width:1023px){.need-grid{grid-template-columns:1fr}.need{padding:18px}}

/* S3 how it works: four steps, each with its Studio controls redrawn; tablets two columns, phones swipe */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.2vw,44px)}
.step{display:flex;flex-direction:column;border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.step-fig{position:relative;height:208px;padding:16px;background:radial-gradient(120% 90% at 50% 0%,#121826,#0B0E15);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.step-b{padding:16px 18px 18px}
.step-n{font-family:var(--ff-d);font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--cyan);font-variant-numeric:tabular-nums}
.step-b .h3{margin-top:4px;font-size:19px}
.step-b p:not(.step-n){margin-top:6px;color:var(--text-2);font-size:14.5px;line-height:1.55}
.how-dots{display:none}
.mock-note{margin-top:14px;font-size:13px;color:var(--text-3)}
/* the redrawn Studio controls: the Studio's labels, its dark panel, nothing clickable */
.mock{width:100%;max-width:260px;display:flex;flex-direction:column;gap:9px;padding:13px;border-radius:12px;background:#0E121A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 18px 40px -24px rgba(0,0,0,.9);
  font-family:var(--ff-b);font-size:11.5px;color:var(--text-2);user-select:none}
.mk-tabs{display:flex;gap:2px;padding:3px;border-radius:9px;background:rgba(255,255,255,.04)}
.mk-tabs span{flex:1 1 auto;text-align:center;padding:5px 2px;border-radius:7px;font-size:10px;color:var(--text-3)}
.mk-tabs .on{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.mk-group{display:flex;align-items:center;gap:8px;margin-top:2px}
.mk-label{font-family:var(--ff-d);font-weight:600;font-size:13px;color:var(--text)}
.mk-badge{padding:2px 7px;border-radius:999px;font-family:var(--ff-d);font-weight:700;font-size:9.5px;letter-spacing:.1em;color:var(--ink-on-cyan);background:var(--cyan)}
.mk-steptag{font-family:var(--ff-d);font-weight:600;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.mk-row{display:flex;align-items:center;justify-content:space-between}
.mk-field{font-weight:600;font-size:11.5px;color:var(--text)}
.mk-num{min-width:38px;padding:3px 8px;border-radius:7px;text-align:center;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--ff-d);font-weight:600;color:var(--text)}
.mk-slider{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.1);margin:4px 0}
.mk-slider::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);border-radius:2px;background:var(--cyan)}
.mk-slider i{position:absolute;top:50%;left:calc(var(--v) * 100%);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(0,229,255,.3)}
.mk-ticks{display:flex;justify-content:space-between;font-size:9.5px;color:var(--text-3)}
.mk-pills{display:flex;gap:4px}
.mk-pills span{flex:1 1 0;text-align:center;padding:6px 2px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:11px;color:var(--text-2)}
.mk-pills .on{background:rgba(0,229,255,.1);box-shadow:inset 0 0 0 1px var(--cyan);color:var(--text)}
.mk-themes span{font-size:9.5px;padding:5px 1px}
.mk-hint{font-size:10.5px;line-height:1.45;color:var(--text-3)}
.mk-go{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-radius:10px;background:var(--grad);color:#fff;font-family:var(--ff-d);font-weight:600;font-size:13px}
.mk-free{padding:2px 7px;border-radius:6px;background:rgba(7,9,14,.38);font-size:10px;letter-spacing:.1em}
.mk-progress{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.mk-progress i{display:block;width:62%;height:100%;background:linear-gradient(90deg,rgba(0,229,255,.2),var(--cyan))}
.mk-prog{color:var(--text-2)}
.mk-result{display:flex;align-items:center;justify-content:space-between}
.mk-rt{font-family:var(--ff-d);font-weight:600;font-size:12.5px;color:var(--text)}
.mk-real{padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#7CF2A0;background:rgba(0,200,100,.12);box-shadow:inset 0 0 0 1px rgba(0,200,100,.3)}
.mk-strip{display:flex;gap:5px}
.mk-sw{flex:1 1 0;height:22px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.mk-dl{padding:9px 12px;border-radius:9px;text-align:center;background:var(--cyan);color:var(--ink-on-cyan);font-family:var(--ff-d);font-weight:600;font-size:12.5px}
@media (max-width:1179px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){
  .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut) 6px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{scroll-snap-align:start}
  html.js .step.rv{opacity:1;transform:none}
  .how-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
  .how-dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .25s var(--ease),background .25s}
  .how-dots i.on{width:18px;background:var(--cyan)}
}

/* S3b tutorial: six short lines, the free note and the Academy lesson */
.tut{margin-top:clamp(36px,3.8vw,56px)}
.tut-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,4vw,56px);row-gap:24px;align-items:start;padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.tut-main .h2{font-size:clamp(24px,2.3vw,34px)}
.tut-list{list-style:none;counter-reset:tut;margin-top:18px;border-top:1px solid var(--line)}
.tut-list li{counter-increment:tut;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--text-2);line-height:1.55;font-size:15px}
.tut-list li::before{content:counter(tut,decimal-leading-zero);font-family:var(--ff-d);font-weight:500;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums;padding-top:3px}
.tut-side{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.how-note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-l);background:rgba(0,229,255,.045);box-shadow:inset 0 0 0 1px rgba(0,229,255,.16);font-size:14.5px;color:var(--text-2);line-height:1.55}
.how-note svg{flex:none;width:18px;height:18px;color:var(--cyan);margin-top:2px}
.lesson-card{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:box-shadow .2s,background .2s}
.lesson-card:hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--line-2)}
.lesson-card>svg{flex:none;width:38px;height:38px;padding:11px 10px 11px 12px;border-radius:50%;background:var(--cyan);color:var(--ink-on-cyan)}
.lesson-card b{display:block;font-family:var(--ff-d);font-weight:600;font-size:15.5px;line-height:1.3;color:var(--text)}
.lesson-card span span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--text-3)}
@media (max-width:1023px){.tut-grid{grid-template-columns:1fr}}

/* S4 the robot in numbers: what each slot prints, the file's numbers, the palette */
.ex-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,3.4vw,48px);row-gap:28px;align-items:start;margin-top:clamp(28px,3.2vw,44px)}
.ex-k{font-size:17px;color:var(--text);margin-bottom:14px}
.slot-gallery{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sg figure{display:flex;flex-direction:column;height:100%;border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.sg-img{position:relative;aspect-ratio:3/4;background:var(--bg);overflow:hidden}
.sg-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:scale(1.12);transform-origin:50% 55%}
.sg figcaption{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;border-top:1px solid var(--line)}
.sg-k{display:flex;align-items:center;gap:7px;font-family:var(--ff-d);font-weight:600;font-size:13.5px;color:var(--text)}
.sg-sw{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.sg-hex{margin-left:auto;font-family:var(--ff-m);font-weight:400;font-size:11.5px;color:var(--text-3)}
.sg-t{font-size:12.5px;line-height:1.4;color:var(--text-2)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border-radius:var(--r-l);overflow:hidden;background:var(--line);box-shadow:inset 0 0 0 1px var(--line)}
.st{padding:14px 16px;background:var(--surface)}
.st dt{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.st dd{margin-top:4px;display:flex;flex-direction:column;gap:2px}
.st-v{font-family:var(--ff-d);font-weight:600;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
.st-s{font-size:12.5px;line-height:1.35;color:var(--text-3)}
.stats-note{margin-top:12px;font-size:13px;line-height:1.5;color:var(--text-3)}
.pal-wrap{margin-top:clamp(28px,3vw,40px);border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);overflow-x:auto}
.pal{width:100%;border-collapse:collapse;font-size:14px;color:var(--text-2);min-width:640px}
.pal caption{text-align:left;padding:14px 16px 4px;font-family:var(--ff-d);font-weight:600;font-size:15px;color:var(--text)}
.pal th,.pal td{padding:10px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.pal thead th{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.pal tbody tr:last-child th,.pal tbody tr:last-child td{border-bottom:0}
.pal tbody th{font-family:var(--ff-d);font-weight:600;color:var(--text)}
.pal td:nth-child(3){white-space:normal;min-width:180px}
.pal .num{text-align:right;font-variant-numeric:tabular-nums}
.pal-hex{font-family:var(--ff-m);font-size:13px;color:var(--text)}
.pal-sw{display:inline-block;vertical-align:-3px;width:16px;height:16px;margin-right:10px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pal-note{margin-top:14px;font-size:14px;line-height:1.6;color:var(--text-2);max-width:80ch}
@media (max-width:1023px){.ex-grid{grid-template-columns:1fr}}
@media (max-width:639px){.pal{min-width:0}.pal th,.pal td{padding:9px 10px;white-space:normal}.pal th:nth-child(3),.pal td:nth-child(3),.pal th:nth-child(5),.pal td:nth-child(5){display:none}.pal-sw{margin-right:6px}
  .slot-gallery{gap:8px}.sg figcaption{padding:8px}.sg-hex{display:none}.sg-t{font-size:11.5px}.sg-k{font-size:12.5px}.st{padding:12px}}

/* S5 the 3MF: its files, what to export, what to check */
.out-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:clamp(28px,4vw,56px);row-gap:24px;align-items:start;margin-top:clamp(28px,3.2vw,44px)}
.tree{border-radius:var(--r-xl);background:#0B0E15;box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -36px rgba(0,0,0,.8);padding:18px 20px 20px}
.tree-k{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);font-family:var(--ff-m);font-size:14px;color:var(--text)}
.tree-k svg{width:18px;height:18px;color:var(--cyan)}
.tree ul{list-style:none;margin-top:6px}
.tree li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line)}
.tree li:last-child{border-bottom:0;padding-bottom:0}
.tree li::before{content:"";position:absolute;left:4px;top:20px;width:10px;height:1px;background:var(--line-2)}
.tree code{display:block;font-family:var(--ff-m);font-size:13px;color:var(--cyan);word-break:break-all}
.tree li span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--text-2)}
.out-side{display:flex;flex-direction:column;gap:18px}
.fmt-list{list-style:none;display:grid;grid-template-columns:1fr;gap:8px}
.fmt-list li{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;color:var(--text-2);line-height:1.4}
.fmt-list li svg{flex:none;width:16px;height:16px;color:var(--text-3)}
.fmt-list .ext{flex:none;min-width:40px;font-family:var(--ff-d);font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--cyan)}
.fmt-colour{padding:14px 16px;border-radius:var(--r);background:var(--violet-wash);box-shadow:inset 0 0 0 1px var(--violet-line);color:var(--text);font-size:14.5px;line-height:1.55}
.review-k{font-family:var(--ff-d);font-weight:600;font-size:17px}
.review{margin-top:10px;display:flex;flex-direction:column;gap:6px;list-style:none;counter-reset:rv}
.review li{counter-increment:rv;padding:9px 12px 9px 44px;position:relative;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2);font-size:14.5px;line-height:1.5}
.review li::before{content:counter(rv);position:absolute;left:12px;top:8px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--ff-d);font-weight:600;font-size:12px;color:var(--text)}
.ready{font-size:14.5px;color:var(--text-2);line-height:1.55}
@media (max-width:1023px){.out-grid{grid-template-columns:1fr}}

/* S6 use cases: the family's bento (a large render tile, three small tiles, the sellers' tile) */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(180px,auto);gap:16px;margin-top:clamp(28px,3.2vw,44px)}
.tile{position:relative;border-radius:var(--r-xl);padding:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;display:flex;flex-direction:column}
.tile .h3{font-size:21px}
.tile p{margin-top:10px;color:var(--text-2);font-size:15px;line-height:1.6;max-width:46ch}
.tile .link{margin-top:16px;align-self:flex-start}
.tile-k{font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.t-paint{grid-column:1/span 6;grid-row:1/span 3;padding:0;background:var(--bg);min-height:540px;justify-content:flex-end}
.t-paint img{position:absolute;left:0;right:0;top:0;width:100%;height:74%;object-fit:contain;object-position:50% 40%;transform:scale(1.04);transition:transform .9s var(--ease)}
.t-paint.in img,html:not(.js) .t-paint img{transform:none}
.t-paint::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,14,0) 58%,rgba(7,9,14,.86) 70%,var(--bg) 78%)}
/* the render tile's 1 px frame is drawn over the picture, so the picture no longer cuts it (its top edge on a desktop,
   the whole picture on a phone) */
.t-paint::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.t-paint .tile-in{position:relative;z-index:1;padding:26px}
.tile-note{font-size:13px!important;color:var(--text-3)!important}
.tile-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 0 16px;border-radius:14px;background:rgba(0,229,255,.06);box-shadow:inset 0 0 0 1px rgba(0,229,255,.22);color:var(--cyan)}
.tile-icon svg{width:26px;height:26px}
.t-etsy{grid-column:1/-1;flex-direction:row;align-items:stretch;gap:24px;padding:24px 28px;background:linear-gradient(135deg,rgba(0,229,255,.06),rgba(124,58,237,.08));box-shadow:inset 0 0 0 1px var(--line-2)}
.t-etsy .tile-main{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:8px 0}
.t-etsy p{max-width:64ch}
.t-etsy .tile-links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:12px}
.t-etsy .tile-links .link{margin-top:0}
/* from 1024 px: the render on the left over three rows, the three short tiles stacked on its right with the icon beside
   the words (side by side they stood half empty next to the 540 px render), the sellers' tile across the full width */
@media (min-width:1024px){
  .t-s1,.t-s2,.t-s3{grid-column:7/span 6;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:20px;align-items:start;align-content:center}
  .t-s1{grid-row:1}.t-s2{grid-row:2}.t-s3{grid-row:3}.t-etsy{grid-row:4}
  .t-s1 .tile-icon,.t-s2 .tile-icon,.t-s3 .tile-icon{grid-row:1/span 3;margin:0}
  .t-s1 p,.t-s2 p,.t-s3 p{max-width:60ch}
  /* the render a little shorter, so a two-line title (de, es, ko) stays clear of the robot's feet */
  .t-paint img{height:70%}
  /* the full-width sellers' tile: the words on the left, its three links stacked on the right */
  .t-etsy .tile-main{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-content:center}
  .t-etsy .tile-main>:not(.tile-links){grid-column:1}
  .t-etsy .tile-links{grid-column:2;grid-row:1/span 3;align-self:center;flex-direction:column;align-items:flex-start;gap:6px;margin-top:0}}
@media (max-width:1023px){.bento{grid-template-columns:1fr}.tile,.t-paint,.t-s1,.t-s2,.t-s3,.t-etsy{grid-column:1/-1;grid-row:auto}.t-paint{min-height:0;aspect-ratio:1/1}.t-etsy{padding:16px}}
@media (min-width:640px) and (max-width:1023px){.t-s1,.t-s2,.t-s3{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;align-items:start}.t-s1 .tile-icon,.t-s2 .tile-icon,.t-s3 .tile-icon{grid-row:1/span 3;margin:0}}
@media (max-width:767px){.tile{padding:18px}.t-paint{padding:0;aspect-ratio:auto}.t-paint .tile-in{padding:18px}
  .bento{grid-auto-rows:auto}
  .t-paint{min-height:0}.t-paint img{position:relative;top:0;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;transform:none}
  .t-paint::after{display:none}.t-paint .tile-in{padding:0 18px 18px}
  .t-s1,.t-s2,.t-s3{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
  .t-s1 .tile-icon,.t-s2 .tile-icon,.t-s3 .tile-icon{grid-row:1/span 3;width:44px;height:44px;margin:0}
  .t-s1 p,.t-s2 p,.t-s3 p{margin-top:6px;font-size:14.5px}.tile .h3{font-size:19px}}

/* S7 FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;row-gap:28px}
.faq-head{grid-column:1/span 4;position:sticky;top:calc(var(--nav-h) + 32px)}
.faq-list{grid-column:6/span 7;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;min-height:44px;
  font-family:var(--ff-d);font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:1.6px solid var(--text-3);border-bottom:1.6px solid var(--text-3);transform:translateY(-3px) rotate(45deg);transition:transform .18s var(--ease)}
.faq-list details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq-list summary:hover::after{border-color:var(--text)}
.faq-list details p{padding:0 0 20px;color:var(--text-2);line-height:1.7;max-width:68ch}
@media (max-width:1023px){.faq-head,.faq-list{grid-column:1/-1}.faq-head{position:relative;top:0}}
@media (max-width:767px){.faq-list summary{font-size:16.5px;padding:16px 0}}

/* S8 CTA: the robot in its states as a collage */
.cta{position:relative;overflow:hidden;padding:clamp(56px,6vw,88px) 0;min-height:420px;display:flex;align-items:center;border-top:1px solid var(--line)}
.cta-collage{position:absolute;right:max(-20px,calc((100vw - 1560px) / 2));top:50%;width:min(720px,54vw);aspect-ratio:6/4;transform:translateY(-50%);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
.cl{position:absolute;top:0;width:34%;aspect-ratio:3/4;overflow:hidden;transition:transform 1.2s var(--ease);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.cl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:scale(1.1)}
.cl-1{left:0;top:8%}
.cl-2{left:23%;top:0}
.cl-3{left:46%;top:6%}
.cl-4{left:69%;top:0}
.cta.in .cl,html:not(.js) .cl{transform:none}
html.js .cta:not(.in) .cl{transform:translateY(14px) scale(.98)}
.cta-in{position:relative;z-index:1;max-width:540px}
.cta-in .h2{max-width:14ch}
.cta-in .lead{margin-top:16px}
.cta-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}
.cta-in .micro{margin-top:14px}
.about{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--text-3);line-height:1.6;max-width:56ch}
.more{border-top:1px solid var(--line);padding:26px 0}
.more-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
.more-k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-right:6px}
.more ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 22px}
.more a{display:inline-block;padding:10px 0;color:var(--text-2);text-decoration:none;font-weight:500;font-size:15px}
.more a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
@media (max-width:1023px){.cta-collage{width:min(560px,60vw);opacity:.75}}
@media (max-width:767px){
  .cta{flex-direction:column;align-items:stretch;padding:0 0 64px;min-height:0}
  .cta-collage{position:relative;right:auto;top:auto;width:100%;transform:none;aspect-ratio:6/4.6;opacity:1;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 62%,transparent 100%)}
  .cta-in{margin-top:-36px}
  .cta-acts .b{flex:1 1 100%}
}

/* footer */
.foot{border-top:1px solid var(--line);padding:30px 0 40px;font-size:14px;color:var(--text-3)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot a{color:var(--text-2);text-decoration:none;display:inline-block;padding:8px 0}
.foot a:hover{color:var(--text)}
.foot p{padding:8px 0;max-width:64ch}

/* LANGUAGE VERSIONS (tools/seo/multicolor-landing.mjs on tools/seo/landing-i18n.mjs, 5 Oct 2026), the block of the other
   landing pages: the latin-ext glyphs of the same font releases for Czech, declared after the latin faces and limited by
   unicode-range, so a browser downloads them only for a page that uses such a letter (the English page loads nothing
   new); the system fonts and line breaking of Japanese and Korean; the footer language switcher. */
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-ext-wght.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-ext-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
html:lang(ja){--ff-d:"Space Grotesk","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;--ff-b:"Inter","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
html:lang(ko){--ff-d:"Space Grotesk","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;--ff-b:"Inter","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
html:lang(ja) body,html:lang(ko) body{line-height:1.75}
html:lang(ja) body{line-break:strict;overflow-wrap:anywhere}
/* Japanese headings break between phrases, not inside a word (タイタ|ン). Chrome 119+; elsewhere the usual breaks */
html:lang(ja) :is(h1,h2,h3){word-break:auto-phrase}
html:lang(ko) body{word-break:keep-all;overflow-wrap:anywhere}
html:lang(ja) :is(h1,h2,h3),html:lang(ko) :is(h1,h2,h3){letter-spacing:0;line-height:1.3}
/* the palette table on a phone (its cells may wrap there): overflow-wrap:anywhere of the body let a cell shrink below its
   words (#669E|AC, 49.7|%, 領|域); the cells keep the normal breaks and the headers stay whole */
html:lang(ja) .pal :is(th,td),html:lang(ko) .pal :is(th,td){overflow-wrap:normal}
html:lang(ja) .pal thead th{word-break:keep-all}
html:lang(ja) .pal tbody th,html:lang(ko) .pal tbody th{white-space:nowrap}
.foot-lang a[aria-current]{color:var(--text)}
/* the drag hint shares its words with the other landing pages (chrome.dragHint) and sits 150 px before pause and
   replay: a longer translation (fr "Faites glisser pour pivoter") wraps to two lines instead of running under them.
   Language versions only: the English page is unchanged */
html:not(:lang(en)) .hint-d{max-width:112px;line-height:1.3}
/* the copy column of a Czech, German, French or Spanish hero is up to about 110 px taller than the English one (longer
   lead, micro line and fact chips one per row), so on a desktop up to 940 px high (1536x864, 1440x900) the fact chips
   reached the drag hint, pause and replay at the bottom of the hero: they go at 940 px instead of the English 820 px
   (the same facts are in the lead and in the structured data). Japanese and Korean fit as English does */
@media (min-width:1180px) and (max-height:940px){html:is(:lang(cs),:lang(de),:lang(fr),:lang(es)) .facts{display:none}}