#zata3d{display:block;position:relative;overflow-x:clip;text-align:left;letter-spacing:normal;word-spacing:normal;text-transform:none}
#zata3d h1,#zata3d h2,#zata3d h3,#zata3d p,#zata3d ol,#zata3d li,#zata3d figure,#zata3d figcaption{margin:0;padding:0;border:0;background:none;text-transform:none;font-family:inherit;color:inherit}
#zata3d h1,#zata3d h2{font-family:var(--serif);line-height:1.02}
#zata3d h1:before,#zata3d h2:before,#zata3d h3:before,#zata3d h1:after,#zata3d h2:after,#zata3d h3:after{content:none;display:none}
#zata3d li:before{content:none}
#zata3d a{text-decoration:none;box-shadow:none;border-bottom:0}
#zata3d button{text-transform:none;letter-spacing:normal;box-shadow:none;margin:0;line-height:1}
#zata3d img,#zata3d video{max-width:100%;height:auto;margin:0;border:0;box-shadow:none}
#zata3d svg{max-width:none}
#zata3d details,#zata3d summary{margin:0}
#zata3d{
  color-scheme: light;
  --plaster:#ECEDEA;
  --paper:#F7F7F4;
  --ink:#141414;
  --graphite:#5A5E5C;
  --line:#CCCFCA;
  --oak:#A6733F;
  --serif:"Noto Serif Display", "Times New Roman", Georgia, serif;
  --sans:"Commissioner", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap:1240px;
  --gut:clamp(16px,4vw,48px);
}
#zata3d, #zata3d *{box-sizing:border-box}
#zata3d{margin:0;background:var(--plaster);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#zata3d a{color:inherit}
#zata3d :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
#zata3d .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
#zata3d h1,#zata3d h2,#zata3d h3{font-weight:300;text-wrap:balance;margin:0}
#zata3d h2{font-family:var(--serif);font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.01em}
#zata3d h2 em,#zata3d h1 em{font-style:italic}
#zata3d p{margin:0}
#zata3d .eyebrow{display:flex;align-items:center;gap:12px;font:500 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
#zata3d .roof{width:22px;height:10px;flex:none}
#zata3d .lead{font-size:clamp(17px,1.5vw,19px);color:var(--graphite);max-width:34em}
#zata3d /* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 28px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 17px/1 var(--sans);text-decoration:none;border:1px solid var(--ink);cursor:pointer;transition:background .2s, color .2s}
#zata3d .btn svg{transition:transform .25s}
#zata3d .btn:hover{background:#000}
#zata3d .btn:hover svg{transform:translateX(4px)}
#zata3d .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
#zata3d .btn-ghost:hover{background:var(--paper);border-color:var(--ink)}
#zata3d .btn-sm{min-height:44px;padding:0 20px;font-size:15px}
#zata3d /* ---------- hero ---------- */
.hero{padding-block:clamp(28px,5vw,64px) clamp(48px,6vw,88px)}
#zata3d .hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center}
#zata3d .hero h1{font-family:var(--serif);font-size:clamp(44px,6.4vw,92px);line-height:.98;letter-spacing:-.02em;margin-block:22px 26px}
#zata3d .hero h1 em{display:block;color:var(--graphite)}
#zata3d .hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
#zata3d .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);max-width:34em}
#zata3d .facts div{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--graphite)}
#zata3d .facts b{font:500 12px/1 var(--mono);color:var(--oak);letter-spacing:.02em;min-width:26px}
@media (max-width:960px){#zata3d .hero .wrap{grid-template-columns:minmax(0,1fr)}
#zata3d .hero .copy{order:0}
#zata3d .hero .stagecol{order:1}
}
#zata3d /* ---------- drawing stage ---------- */
.sheet{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden}
#zata3d .sheet:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--plaster) 1px,transparent 1px),linear-gradient(90deg,var(--plaster) 1px,transparent 1px);background-size:32px 32px;opacity:.9;pointer-events:none}
#zata3d .sheet .corner{position:absolute;width:14px;height:14px;border-color:var(--ink);border-style:solid;opacity:.55;pointer-events:none}
#zata3d .corner.tl{top:12px;left:12px;border-width:1px 0 0 1px}
#zata3d .corner.tr{top:12px;right:12px;border-width:1px 1px 0 0}
#zata3d .corner.bl{bottom:12px;left:12px;border-width:0 0 1px 1px}
#zata3d .corner.br{bottom:12px;right:12px;border-width:0 1px 1px 0}
#zata3d .stage{position:relative;height:clamp(420px,46vw,600px)}
#zata3d .stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
#zata3d .dims{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#zata3d .dims line{stroke:var(--oak);stroke-width:1}
#zata3d .dims text{font:500 13px var(--mono);fill:var(--oak)}
#zata3d .dims rect{fill:var(--paper)}
#zata3d .stamp{position:absolute;left:24px;bottom:18px;font:500 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--graphite);text-transform:uppercase}
#zata3d .stamp span{display:block;color:var(--ink)}
#zata3d .hint{position:absolute;right:24px;top:22px;font:400 12px/1.4 var(--mono);color:var(--graphite)}
#zata3d .controls{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px 20px;align-items:center;padding:18px 22px 22px;border-top:1px solid var(--line);background:var(--paper)}
#zata3d .controls .k{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
#zata3d .sw{display:flex;flex-wrap:wrap;gap:10px}
#zata3d .sw button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);padding:4px;background:var(--paper);cursor:pointer}
#zata3d .sw button i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
#zata3d .sw button[aria-pressed="true"]{border:2px solid var(--ink);padding:3px}
#zata3d .stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#zata3d .stepper button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font:400 22px/1 var(--sans);cursor:pointer;color:var(--ink)}
#zata3d .stepper button:hover{border-color:var(--ink)}
#zata3d .stepper output{font:500 16px/1 var(--mono);min-width:86px;text-align:center}
#zata3d .stepper small{color:var(--graphite);font-size:13px}
#zata3d .openbtn{grid-column:1 / -1;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:6px}
#zata3d .openbtn p{font-size:13px;color:var(--graphite)}
@media (max-width:520px){#zata3d .controls{grid-template-columns:1fr}
#zata3d .hint{display:none}
}
#zata3d /* ---------- sections ---------- */
section{scroll-margin-top:120px}
#zata3d .sec{padding-block:clamp(72px,9vw,128px);border-top:1px solid var(--line)}
#zata3d .sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
#zata3d .sec-head .eyebrow{margin-bottom:18px}
@media (max-width:860px){#zata3d .sec-head{grid-template-columns:minmax(0,1fr)}
}
#zata3d /* can-do */
.can{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
#zata3d .can article{padding:28px 28px 8px 0;display:flex;flex-direction:column;gap:14px}
#zata3d .can article + article{padding-left:28px;border-left:1px solid var(--line)}
#zata3d .can svg{width:40px;height:40px;stroke:var(--ink);fill:none;stroke-width:1.2}
#zata3d .can h3{font:500 20px/1.25 var(--sans)}
#zata3d .can p{color:var(--graphite);font-size:16px}
@media (max-width:1000px){#zata3d .can{grid-template-columns:repeat(2,minmax(0,1fr))}
#zata3d .can article:nth-child(3){border-left:0;padding-left:0}
#zata3d .can article:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){#zata3d .can{grid-template-columns:minmax(0,1fr)}
#zata3d .can article + article{border-left:0;padding-left:0;border-top:1px solid var(--line)}
}
#zata3d /* steps */
.how{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
#zata3d .steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
#zata3d .steps li{border-bottom:1px solid var(--line)}
#zata3d .steps button.s{all:unset;box-sizing:border-box;display:grid;grid-template-columns:48px 1fr;gap:4px 12px;width:100%;padding:22px 0;cursor:pointer}
#zata3d .steps .n{font:400 30px/1 var(--serif);color:var(--line);grid-row:span 2;transition:color .2s}
#zata3d .steps .t{font:500 19px/1.3 var(--sans);color:var(--graphite);transition:color .2s}
#zata3d .steps .d{grid-column:2;font-size:15.5px;color:var(--graphite);max-height:0;overflow:hidden;transition:max-height .35s ease}
#zata3d .steps .bar{grid-column:2;height:2px;background:var(--line);margin-top:10px;display:none}
#zata3d .steps .bar i{display:block;height:100%;width:0;background:var(--ink)}
#zata3d .steps li.on .n{color:var(--ink)}
#zata3d .steps li.on .t{color:var(--ink)}
#zata3d .steps li.on .d{max-height:200px}
#zata3d .steps li.on .bar{display:block}
#zata3d .steps button.s:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#zata3d .screen{position:sticky;top:120px;background:var(--ink);border-radius:14px;padding:10px;box-shadow:0 30px 60px -30px rgba(20,20,20,.45)}
#zata3d .screen .chrome{display:flex;align-items:center;gap:7px;padding:4px 6px 10px}
#zata3d .screen .chrome i{width:9px;height:9px;border-radius:50%;background:#3b3d3c}
#zata3d .screen .chrome span{margin-left:14px;font:400 12px/1 var(--mono);color:#9a9e9c;background:#232524;padding:6px 12px;border-radius:999px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#zata3d .screen video{display:block;width:100%;aspect-ratio:16/10;height:auto;border-radius:6px;background:#fff}
#zata3d .screen .cap{display:flex;justify-content:space-between;gap:12px;padding:12px 6px 2px;font:400 12px/1.4 var(--mono);color:#9a9e9c}
#zata3d .mvid{display:none}
@media (max-width:900px){#zata3d .how{grid-template-columns:minmax(0,1fr)}
#zata3d .screen{display:none}
#zata3d .steps .d{max-height:none}
#zata3d .steps .n{color:var(--ink)}
#zata3d .steps .t{color:var(--ink)}
#zata3d .steps button.s{cursor:default}
#zata3d .mvid{display:block;grid-column:1 / -1;margin-top:14px;width:100%;aspect-ratio:16/10;height:auto;border-radius:8px;border:1px solid var(--line);background:#fff}
#zata3d .steps li.on .bar{display:none}

}
#zata3d /* keep */
.keep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
#zata3d .keep article{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:14px}
#zata3d .keep .ic{width:52px;height:52px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center}
#zata3d .keep .ic svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.4}
#zata3d .keep h3{font:500 20px/1.25 var(--sans)}
#zata3d .keep p{color:var(--graphite);font-size:16px}
#zata3d .keep .ui{margin-top:auto;align-self:flex-start;font:500 13px/1 var(--sans);border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:#fff;color:var(--ink)}
@media (max-width:900px){#zata3d .keep{grid-template-columns:minmax(0,1fr)}
}
#zata3d /* models */
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
#zata3d .models a{background:var(--paper);display:grid;grid-template-rows:auto auto auto;gap:6px;padding:24px 24px 26px;text-decoration:none;transition:background .2s}
#zata3d .models a:hover{background:#fff}
#zata3d .models img{width:100%;max-width:100%;aspect-ratio:1/1;object-fit:contain;margin-bottom:8px;mix-blend-mode:multiply}
#zata3d .models h3{font:500 18px/1.3 var(--sans)}
#zata3d .models .sz{font:400 13px/1 var(--mono);color:var(--oak)}
#zata3d .models .go{margin-top:10px;font-size:15px;color:var(--graphite);display:flex;gap:8px;align-items:center}
#zata3d .models a:hover .go{color:var(--ink)}
@media (max-width:900px){#zata3d .models{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){#zata3d .models{grid-template-columns:minmax(0,1fr)}
}
#zata3d /* faq */
.faq{border-top:1px solid var(--ink);max-width:880px}
#zata3d .faq details{border-bottom:1px solid var(--line)}
#zata3d .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font:500 19px/1.35 var(--sans)}
#zata3d .faq summary::-webkit-details-marker{display:none}
#zata3d .faq summary .pm{flex:none;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;position:relative}
#zata3d .faq summary .pm:before,#zata3d .faq summary .pm:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
#zata3d .faq summary .pm:after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
#zata3d .faq details[open] .pm:after{transform:translate(-50%,-50%) rotate(0)}
#zata3d .faq details p{padding:0 56px 26px 0;color:var(--graphite);max-width:40em}
#zata3d /* help */
.help{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:start}
#zata3d .contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink)}
#zata3d .contacts a{display:flex;flex-direction:column;gap:6px;padding:22px 20px 22px 0;border-bottom:1px solid var(--line);text-decoration:none}
#zata3d .contacts a:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
#zata3d .contacts span{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
#zata3d .contacts b{font:400 clamp(20px,2.2vw,26px)/1.2 var(--mono);letter-spacing:-.01em;user-select:all}
#zata3d .contacts a:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media (max-width:860px){#zata3d .help{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){#zata3d .contacts{grid-template-columns:minmax(0,1fr)}
#zata3d .contacts a:nth-child(even){padding-left:0;border-left:0}
}
#zata3d /* final */
.final{background:var(--ink);color:var(--paper);padding-block:clamp(80px,10vw,140px)}
#zata3d .final .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:36px}
#zata3d .final h2{font-size:clamp(44px,7vw,104px);line-height:.98;max-width:12em}
#zata3d .final h2 em{color:#8f9391}
#zata3d .final .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
#zata3d .final .btn:hover{background:#fff}
#zata3d .final .eyebrow{color:#8f9391}
#zata3d /* mobile sticky cta */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--plaster) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);display:none}
#zata3d .dock .btn{width:100%;justify-content:center}
@media (max-width:860px){#zata3d .dock{display:block}
#zata3d{padding-bottom:84px}
}