:root{
--bg:#FFFFFF;
--bg-alt:#F5F5F7;
--bg-sunken:#FAFAFC;
--ink:#1D1D1F;
--ink-2:#6E6E73;
--ink-3:#86868B;
--line:#D2D2D7;
--line-soft:#E8E8ED;
--brand:#21395B;
--accent:#0071E3;
--accent-hover:#0077ED;
--dark:#0A0A0C;
--dark-2:#1C1C1E;
--dark-line:#2C2C2E;
--dark-txt:#F5F5F7;
--dark-txt-2:#A1A1A6;
--alert:#FF9F0A;
--alert-strong:#FF453A;
--ok:#30D158;
--r-sm:10px;
--r:18px;
--r-lg:28px;
--pill:980px;
--shadow:0 4px 14px rgba(0,0,0,.05),0 18px 50px -24px rgba(0,0,0,.14);
--shadow-lg:0 10px 30px rgba(0,0,0,.08),0 40px 90px -40px rgba(0,0,0,.35);
--f:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang TC","Inter",
"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
--f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
--w:1024px;
--w-text:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
font-size:17px;line-height:1.53;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
p,li,dd,td,th,figcaption,summary{text-wrap:pretty}
.lede,.hero__sub,.phero__h2,.phero__lead,.pain__sub,.sec>.wrap>.note,.post__body>p:last-child,
.stat__l,.faq summary,.xlink p,.cap p,.pain__punch{text-wrap:balance}
.kw,.h2,.pain h2,.pain__punch,.faq summary,.lede,.hero__sub,.phero__h2,.phero__lead,.pain__sub{word-break:keep-all;overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:rgba(0,113,227,.2)}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-sm)}
.sec{padding-block:clamp(74px,9vw,136px)}
.sec--tint{background:var(--bg-alt)}
.sec>.wrap>.eyebrow,.sec>.wrap>.h2,.sec>.wrap>.lede,
.sec>.wrap>.placeholder{text-align:center;margin-inline:auto}
.sec--plain>.wrap>.eyebrow,.sec--plain>.wrap>.h2,.sec--plain>.wrap>.lede{text-align:left;margin-inline:0}
.eyebrow{margin:0 0 14px;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink-3);
text-transform:none}
.h2{font-size:clamp(30px,4.6vw,56px);letter-spacing:-.026em;color:var(--ink)}
.lede{margin-top:20px;max-width:var(--w-text);font-size:clamp(17px,1.6vw,21px);
line-height:1.48;letter-spacing:-.012em;color:var(--ink-2)}
.note{margin-top:22px;font-size:13px;line-height:1.6;color:var(--ink-3)}
.note a{color:var(--accent);text-decoration:none}
.note a:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
font-family:inherit;font-size:17px;font-weight:400;letter-spacing:-.01em;
padding:12px 23px;border:0;border-radius:var(--pill);text-decoration:none;white-space:nowrap;
transition:background .2s ease,opacity .2s ease,color .2s ease}
.btn--hv{background:var(--accent);color:#fff}
.btn--hv:hover{background:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--accent);padding:12px 4px;border-radius:0}
.btn--ghost::after{content:"›";font-size:1.15em;line-height:1;transform:translateY(-1px)}
.btn--ghost:hover{text-decoration:underline}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid var(--line-soft)}
.hdr__in{display:flex;align-items:center;gap:20px;height:52px;max-width:1180px}
.brand{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none;color:var(--ink);
font-size:17px;font-weight:600;letter-spacing:-.015em}
.brand__mark{width:20px;height:20px;flex:none;color:var(--ink)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav>a,.nav__btn{display:flex;align-items:center;gap:5px;font-family:inherit;font-size:13.5px;
font-weight:400;letter-spacing:-.005em;color:var(--ink);opacity:.86;background:none;border:0;
padding:8px 11px;cursor:pointer;text-decoration:none;transition:opacity .16s ease}
.nav>a:hover,.nav__btn:hover,.nav__item[data-open="true"] .nav__btn{opacity:1}
.nav__btn svg{opacity:.55;transition:transform .2s ease;flex:none}
.nav__item[data-open="true"] .nav__btn svg{transform:rotate(180deg)}
.hdr .btn{padding:7px 16px;font-size:13.5px}
.burger{display:none;margin-left:auto;background:none;color:var(--ink);border:0;padding:8px;cursor:pointer}
.nav__item{position:static}
.mega{position:fixed;left:0;right:0;top:52px;display:none;z-index:70;
background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid var(--line-soft);padding:34px 22px 46px;
box-shadow:0 20px 40px -30px rgba(0,0,0,.2)}
.nav__item[data-open="true"] .mega{display:block}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:var(--w);margin-inline:auto}
.mega>ul{max-width:var(--w);margin-inline:auto}
.mega__col h5{margin:0 0 14px;font-size:12px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.mega__col ul{display:grid;gap:2px}
.mega a{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:baseline;
padding:7px 0;text-decoration:none;color:var(--ink);font-size:21px;font-weight:600;
letter-spacing:-.018em;transition:color .16s ease}
.mega a:hover{color:var(--accent)}
.mega a code{font-family:var(--f-mono);font-size:11px;font-weight:400;color:var(--ink-3)}
.mega a small{grid-column:1/-1;font-size:13px;font-weight:400;line-height:1.5;color:var(--ink-3);
letter-spacing:-.005em}
.mega__foot{max-width:var(--w);margin:26px auto 0;padding-top:18px;border-top:1px solid var(--line-soft)}
.mega__foot a{font-size:15px;font-weight:400;color:var(--accent)}
.mega__foot a::after{content:"›";margin-left:5px}
@media (max-width:900px){
.nav{display:none;position:absolute;top:52px;left:0;right:0;flex-direction:column;
align-items:stretch;gap:0;padding:8px 20px 26px;background:rgba(255,255,255,.98);
border-bottom:1px solid var(--line-soft);max-height:calc(100vh - 52px);overflow-y:auto}
.nav.open{display:flex}
.nav>a,.nav__btn{width:100%;justify-content:space-between;font-size:17px;font-weight:600;
letter-spacing:-.015em;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.burger{display:block}
.hdr__cta{display:none}
.mega{position:static;display:none;padding:6px 0 16px 4px;background:transparent;
border:0;box-shadow:none;backdrop-filter:none}
.mega__grid{grid-template-columns:1fr;gap:18px}
.mega a{font-size:16px;font-weight:400}
.mega a small{display:none}
}
.stage{position:relative;background:var(--bg);overflow:hidden}
.hero,.phero{padding-block:clamp(54px,7vw,104px) clamp(38px,5vw,72px);text-align:center}
.hero__grid,.phero__grid{display:block}
.hero__copy,.phero__copy{max-width:860px;margin-inline:auto}
.hero__copy{max-width:880px}
.tagline{display:inline-flex;align-items:center;gap:8px;font-size:19px;font-weight:600;
letter-spacing:-.01em;color:var(--ink-3)}
.dot{display:none}
.hero h1{margin-top:8px;font-size:clamp(34px,7vw,86px);line-height:1.03;letter-spacing:-.035em}
.hero h1 em{font-style:normal}
.hero__sub{margin:22px auto 0;max-width:880px;font-size:clamp(18px,1.9vw,23px);
line-height:1.42;letter-spacing:-.014em;color:var(--ink-2)}
.hero__cta,.phero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:30px}
.phero h1{margin-top:8px;font-size:clamp(36px,6vw,72px);line-height:1.05;letter-spacing:-.032em}
.phero__h2{margin:18px auto 0;max-width:680px;font-size:clamp(19px,2vw,26px);font-weight:600;
line-height:1.3;letter-spacing:-.018em;color:var(--ink)}
.phero__lead{margin:16px auto 0;max-width:620px;font-size:17.5px;line-height:1.5;color:var(--ink-2)}
.specbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
max-width:920px;margin:clamp(40px,5vw,64px) auto 0;padding-top:0;border:0;text-align:center}
@media (max-width:640px){.specbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}}
.spec dt{font-size:13px;color:var(--ink-3);letter-spacing:0}
.spec dd{margin:7px 0 0;font-size:21px;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
.viewer{position:relative;max-width:1080px;margin:clamp(34px,4.4vw,56px) auto 0;
background:var(--dark);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);text-align:left}
.viewer__bar{display:flex;align-items:center;gap:12px;padding:15px 22px;
border-bottom:1px solid var(--dark-line);font-family:var(--f-mono);font-size:12px;
letter-spacing:0;color:var(--dark-txt-2)}
.viewer__bar .live{color:var(--alert-strong)}
.viewer__bar .right{margin-left:auto}
.viewer__frame{position:relative;background:#000}
.scene{position:relative;aspect-ratio:16/9;overflow:hidden}
.scene img{display:block;width:100%;height:100%;object-fit:cover}
.scene__ov{position:absolute;inset:0;width:100%;height:100%;display:block}
.log{border-top:1px solid var(--dark-line);background:#050506;font-family:var(--f-mono);
font-size:12.5px;color:var(--dark-txt-2)}
.log__row{display:grid;grid-template-columns:70px 58px minmax(0,1fr) 52px;gap:14px;align-items:center;
padding:12px 22px;border-bottom:1px solid rgba(255,255,255,.055);font-variant-numeric:tabular-nums}
.log__row:last-child{border-bottom:0}
.log__row b{font-weight:500;color:var(--dark-txt)}
.tag{display:inline-block;padding:2px 9px;border-radius:var(--pill);font-size:11px;letter-spacing:0}
.tag--alert{background:rgba(255,69,58,.18);color:#FF8A80}
.tag--ok{background:rgba(48,209,88,.18);color:#5BE07C}
@media (max-width:520px){
.viewer{border-radius:var(--r)}
.log__row{grid-template-columns:62px 52px minmax(0,1fr);gap:10px;padding:11px 16px;font-size:11.5px}
.log__row .conf{display:none}
.viewer__bar{padding:13px 16px;font-size:11px}
}
.props,.promise,.sol,.certs,.plans,.stats,.cases,.xlinks{display:grid;gap:20px;margin-top:clamp(44px,5vw,66px)}
.prop,.promise__i,.sol__i,.cert,.plan,.stat,.case,.xlink{position:relative;
background:var(--bg-alt);border-radius:var(--r);padding:32px 28px 34px;
transition:background .22s ease,transform .22s ease,box-shadow .22s ease}
.sec--tint .prop,.sec--tint .promise__i,.sec--tint .sol__i,.sec--tint .cert,
.sec--tint .plan,.sec--tint .stat,.sec--tint .case,.sec--tint .xlink{background:var(--bg)}
.xlink:hover,.cap:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.props{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.props{grid-template-columns:1fr}}
.prop{display:flex;flex-direction:column;gap:12px}
.prop__n{font-size:13px;color:var(--ink-3);letter-spacing:0}
.prop h3{font-size:24px;letter-spacing:-.021em}
.prop p{font-size:15.5px;line-height:1.56;color:var(--ink-2)}
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,54px);
margin-top:clamp(44px,5vw,70px)}
@media (max-width:900px){.mods{grid-template-columns:1fr;gap:40px}}
.mod__head{display:flex;align-items:baseline;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mod__head h3{font-size:22px;letter-spacing:-.02em}
.mod__head span{margin-left:auto;font-size:12px;color:var(--ink-3);letter-spacing:0}
.mod li{border-bottom:1px solid var(--line-soft)}
.mod li:last-child{border-bottom:0}
.mod li a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;
padding:16px 0;text-decoration:none;color:inherit}
.mod li a strong{font-size:17px;font-weight:600;letter-spacing:-.016em}
.mod li a:hover strong{color:var(--accent)}
.mod li a code{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.mod li a span{grid-column:1/-1;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.xlinks,.sol{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.xlink{display:grid;gap:9px;text-decoration:none}
.xlink b{font-size:12.5px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.xlink h3{font-size:21px;letter-spacing:-.02em}
.xlink p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.xlink::after{content:"了解更多 ›";font-size:14.5px;color:var(--accent)}
.sol__i{display:flex;flex-direction:column;gap:9px}
.sol__i b{font-size:12.5px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.sol__i h3{font-size:21px;letter-spacing:-.02em}
.sol__i p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.scenes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px}
.chip{padding:9px 18px;font-size:14.5px;color:var(--ink-2);background:var(--bg-alt);border-radius:var(--pill)}
.sec--tint .chip{background:var(--bg)}
.chip em{font-style:normal;font-weight:600;color:var(--ink)}
.pain{background:var(--dark);color:var(--dark-txt);padding-block:clamp(84px,10vw,152px)}
.pain>.wrap>.eyebrow{text-align:center;margin-inline:auto;color:var(--dark-txt-2)}
.pain h2{max-width:900px;margin-inline:auto;text-align:center;font-size:clamp(30px,4.8vw,58px);
letter-spacing:-.028em;color:#F5F5F7}
.pain__sub{max-width:700px;margin:22px auto 0;text-align:center;font-size:clamp(18px,1.9vw,23px);
font-weight:600;line-height:1.4;letter-spacing:-.016em;color:var(--dark-txt-2)}
.pain__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(32px,4.4vw,72px);align-items:start;margin-top:clamp(48px,6vw,86px)}
@media (max-width:900px){.pain__body{grid-template-columns:1fr;gap:34px}}
.pain__body p{font-size:17px;line-height:1.58;color:var(--dark-txt-2)}
.pain__body p+p{margin-top:16px}
.pain__body p.pain__punch{margin-top:30px;padding:0;border:0;font-size:clamp(21px,2.3vw,27px);
font-weight:700;line-height:1.22;letter-spacing:-.024em;color:#F5F5F7}
.pain__figs{display:grid;gap:1px;background:var(--dark-line);border-radius:var(--r);overflow:hidden}
.pfig{display:grid;gap:8px;padding:30px 28px;background:var(--dark-2)}
.pfig b{font-size:clamp(40px,5.4vw,66px);font-weight:700;line-height:1;letter-spacing:-.04em;
color:#F5F5F7;font-variant-numeric:tabular-nums}
.pfig span{font-size:14.5px;line-height:1.5;color:var(--dark-txt-2)}
.pain .note{color:#6E6E73;text-align:center;margin-top:34px}
.promise{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.promise{grid-template-columns:1fr}}
.promise__i{display:flex;flex-direction:column;gap:11px}
.promise__i b{font-size:12.5px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.promise__i h3{font-size:23px;letter-spacing:-.021em}
.promise__i p{font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
gap:20px;margin-top:clamp(44px,5vw,66px)}
.cap{display:flex;flex-direction:column;gap:13px;padding:32px 28px 34px;
background:var(--bg-alt);border-radius:var(--r);transition:transform .22s ease,box-shadow .22s ease}
.sec--tint .cap{background:var(--bg)}
.cap__meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}
.cap h3{font-size:25px;letter-spacing:-.022em}
.cap p{flex:1;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.cap__link{align-self:flex-start;font-size:15.5px;color:var(--accent);text-decoration:none}
.cap__link:hover{text-decoration:underline}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.2vw,40px);
margin-top:clamp(46px,5.4vw,72px);counter-reset:s}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:0;border:0}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;
justify-content:center;width:34px;height:34px;margin-bottom:18px;border-radius:50%;
background:var(--ink);color:#fff;font-size:15px;font-weight:600;letter-spacing:0}
.step h3{font-size:23px;letter-spacing:-.021em}
.step p{margin-top:11px;font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.step ul{display:grid;gap:8px;margin-top:16px}
.step ul li{font-family:var(--f-mono);font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.step__time{display:inline-block;margin-top:18px;padding:5px 14px;border-radius:var(--pill);
background:var(--bg-alt);font-size:13px;color:var(--ink-2)}
.sec--tint .step__time{background:var(--bg)}
.tbl-wrap{max-width:var(--w);margin:clamp(40px,5vw,60px) auto 0;overflow-x:auto;
background:var(--bg);border-radius:var(--r);box-shadow:var(--shadow)}
.sec--tint .tbl-wrap{background:var(--bg)}
table.t{width:100%;min-width:560px;border-collapse:collapse;font-size:15.5px}
table.t th,table.t td{padding:18px 24px;text-align:left;vertical-align:top;
border-bottom:1px solid var(--line-soft);letter-spacing:-.008em}
table.t thead th{font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap;letter-spacing:0}
table.t tbody tr:last-child td{border-bottom:0}
table.t td{color:var(--ink-2);line-height:1.5}
table.t td:first-child{word-break:keep-all;overflow-wrap:anywhere;min-width:9em}
table.t td{text-wrap:balance}
table.t td.hv{word-break:keep-all;overflow-wrap:anywhere;min-width:12.5em}
@media (min-width:1000px){table.t td.nw{white-space:nowrap}}
table.t td:first-child{color:var(--ink);font-weight:600}
table.t td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.t td.hv{color:var(--ink)}
table.t td a{color:var(--accent);text-decoration:none}
.cases{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.case{display:grid;gap:16px;padding:18px 18px 22px}
.case__thumb{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;
background:#000;border-radius:12px}
.case__thumb::after{content:attr(data-label);position:absolute;left:12px;bottom:10px;
font-family:var(--f-mono);font-size:10.5px;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.case__thumb .scene{height:100%;aspect-ratio:auto}
.case p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
gap:clamp(24px,3vw,44px);margin-top:clamp(44px,5vw,64px)}
.quote{padding:0}
.quote p{font-size:21px;line-height:1.42;letter-spacing:-.018em;color:var(--ink)}
.quote cite{display:block;margin-top:16px;font-size:14px;color:var(--ink-3);font-style:normal}
.certs{grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr))}
.cert{display:grid;gap:9px}
.cert b{font-size:12.5px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.cert h3{font-size:20px;letter-spacing:-.02em}
.cert p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.plans{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;gap:16px;padding:36px 30px 38px}
.plan--mid{background:var(--ink);color:#fff}
.sec--tint .plan--mid{background:var(--ink)}
.plan--mid .plan__n{color:var(--ink-3)}
.plan--mid h3,.plan--mid .plan__price{color:#fff}
.plan--mid ul li{color:rgba(255,255,255,.72)}
.plan--mid .plan__price small{color:rgba(255,255,255,.6)}
.plan--mid .btn--ghost{color:#6EB6FF}
.plan__n{font-size:13px;color:var(--ink-3);letter-spacing:0}
.plan h3{font-size:26px;letter-spacing:-.022em}
.plan__price{font-size:clamp(32px,3.6vw,40px);font-weight:700;line-height:1.1;
letter-spacing:-.032em;font-variant-numeric:tabular-nums}
.plan__price small{font-size:14px;font-weight:400;letter-spacing:-.008em;color:var(--ink-3)}
.plan ul{display:grid;gap:11px}
.plan ul li{position:relative;padding-left:24px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.plan ul li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:rotate(-45deg);border-radius:1px}
.plan .btn{margin-top:auto;align-self:flex-start}
.dev{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:clamp(30px,4vw,56px);align-items:start;margin-top:clamp(44px,5vw,64px);text-align:left}
@media (max-width:900px){.dev{grid-template-columns:1fr}}
.dev .lede{margin-top:0;text-align:left;margin-inline:0}
.dev__list{display:grid;gap:18px;margin-top:28px}
.dev__list li{display:grid;gap:4px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.dev__list b{font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.014em}
@media (min-width:1100px){.dev__list span{white-space:nowrap}}
@media (min-width:900px){.h2--one{display:flex;justify-content:center;text-wrap:nowrap;white-space:nowrap;font-size:min(46px,3.5vw)}
.pain h2.h2--one{max-width:none;font-size:min(var(--one),var(--onev))}}
.code{background:var(--dark);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.code__bar{padding:15px 22px;border-bottom:1px solid var(--dark-line);
font-family:var(--f-mono);font-size:12px;color:var(--dark-txt-2)}
.code pre{margin:0;padding:22px;overflow-x:auto;font-family:var(--f-mono);
font-size:12.5px;line-height:1.85;color:#E4E4E7}
.code .k{color:#7FB8FF}
.code .s{color:#8BE0A8}
.code .c{color:#7A7A80}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{display:grid;gap:10px;padding:34px 26px;text-align:center;container-type:inline-size}
@media (max-width:820px){.stat{padding:30px 14px}}
.stat__v{white-space:nowrap;font-size:min(62px,24cqi);font-weight:700;line-height:1;letter-spacing:-.04em;
color:var(--ink);font-variant-numeric:tabular-nums}
.stat__v i{font-style:normal;font-size:.42em;color:var(--ink-3);margin-left:3px;letter-spacing:-.02em}
.stat__l{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.placeholder{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:6px 15px;
border-radius:var(--pill);background:rgba(255,159,10,.14);font-size:13px;color:#96590A}
.faq{max-width:840px;margin:clamp(44px,5vw,64px) auto 0;border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{position:relative;padding:26px 52px 26px 0;cursor:pointer;list-style:none;
font-size:19.5px;font-weight:600;letter-spacing:-.018em;color:var(--ink);transition:color .16s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:8px;top:50%;
background:var(--accent);transition:transform .24s ease,opacity .24s ease}
.faq summary::before{width:15px;height:2px;margin-top:-1px}
.faq summary::after{width:2px;height:15px;margin-top:-7.5px;right:14.5px}
.faq details[open] summary::after{transform:rotate(90deg);opacity:0}
.faq__a{padding:0 0 28px;max-width:74ch}
.faq__a p{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.faq__a strong{color:var(--ink);font-weight:600}
.band{background:var(--bg-alt)}
.band__in{display:flex;flex-wrap:wrap;gap:26px;align-items:center;
padding-block:clamp(56px,6.4vw,88px);text-align:left}
.band h2{flex:1;min-width:min(100%,340px);font-size:clamp(26px,3.4vw,42px);letter-spacing:-.026em}
.band p{margin-top:12px;max-width:58ch;font-size:17px;line-height:1.5;color:var(--ink-2)}
.band .btn{background:var(--accent);color:#fff}
.band .btn:hover{background:var(--accent-hover)}
.cta-sec{background:var(--bg)}
.cta-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(32px,4.4vw,64px);align-items:start;text-align:left}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr}}
.cta-sec .eyebrow,.cta-sec h2,.cta-sec .lede{text-align:left;margin-inline:0}
.cta-sec h2{font-size:clamp(28px,3.6vw,46px)}
.cta-list{display:grid;gap:13px;margin-top:30px}
.cta-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:16px;color:var(--ink-2)}
.cta-list li::before{content:"";width:14px;height:8px;margin-top:7px;
border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:rotate(-45deg);border-radius:1px}
.form{background:var(--bg-alt);border-radius:var(--r-lg);padding:clamp(26px,3vw,40px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:8px}
.f--full{grid-column:1/-1}
.f label{font-size:13px;color:var(--ink-3);letter-spacing:0}
.f label .req{color:var(--alert-strong)}
.f input,.f select,.f textarea{width:100%;padding:14px 16px;font-family:inherit;font-size:16.5px;
letter-spacing:-.01em;color:var(--ink);background:var(--bg);border:1px solid var(--line);
border-radius:12px;transition:border-color .16s ease,box-shadow .16s ease}
.f textarea{min-height:100px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 4px rgba(0,113,227,.16)}
.checks{display:flex;flex-wrap:wrap;gap:9px}
.checks label{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;cursor:pointer;
font-size:15px;letter-spacing:-.01em;color:var(--ink-2);background:var(--bg);
border:1px solid var(--line);border-radius:var(--pill);transition:border-color .16s ease,color .16s ease}
.checks input{width:auto;margin:0;accent-color:var(--accent)}
.checks label:has(input:checked){border-color:var(--accent);color:var(--accent)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}
.form__foot .note{margin:0}
.err{margin-top:14px;font-size:14px;color:var(--alert-strong)}
.done{padding:28px;background:var(--bg);border-radius:var(--r)}
.done h3{font-size:22px;letter-spacing:-.02em}
.done p{margin-top:11px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.done a{color:var(--accent);text-decoration:none}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px);
margin-top:clamp(36px,4vw,54px)}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;gap:18px;text-decoration:none;color:inherit}
.post__img{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);background:var(--bg-alt)}
.post__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post:hover .post__img img{transform:scale(1.04)}
.pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin-top:clamp(44px,5vw,64px)}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
border-radius:999px;font-size:15px;font-variant-numeric:tabular-nums;text-decoration:none;color:var(--ink-2)}
.pager a:hover{background:var(--bg-alt);color:var(--ink)}
.pager .is-cur{background:var(--ink);color:#fff;font-weight:600}
.pager .is-off{color:var(--line)}
.post__meta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-3)}
.post__meta span{color:var(--accent);font-weight:600}
.post__meta time{font-variant-numeric:tabular-nums}
.post h3{margin-top:8px;font-size:20px;line-height:1.4;letter-spacing:-.018em;transition:color .16s ease}
.post:hover h3{color:var(--accent)}
.post__body>p:last-child{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.prose{max-width:var(--w-text);margin-top:clamp(30px,3.4vw,44px)}
.stage--text~.sec .prose,.stage--doc~.sec .prose{margin-inline:auto}
.prose h2{margin-top:56px;font-size:clamp(25px,3vw,34px);letter-spacing:-.024em}
.prose h3{margin-top:34px;font-size:21px;letter-spacing:-.02em}
.prose p{margin-top:18px;font-size:17.5px;line-height:1.66;color:var(--ink-2)}
.prose ul{display:grid;gap:12px;margin-top:20px}
.prose ul li{position:relative;padding-left:26px;font-size:17.5px;line-height:1.62;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
border-radius:50%;background:var(--ink-3)}
.prose strong{color:var(--ink);font-weight:600}
.prose code{font-family:var(--f-mono);font-size:14.5px;padding:2px 7px;border-radius:6px;
background:var(--bg-alt);color:var(--ink)}
.prose a{color:var(--accent);text-decoration:none}
.prose ol{display:grid;gap:12px;margin:20px 0 0;padding:0;list-style:none;counter-reset:ol}
.prose ol>li{position:relative;padding-left:30px;font-size:17.5px;line-height:1.62;color:var(--ink-2);counter-increment:ol}
.prose ol>li::before{content:counter(ol) ".";position:absolute;left:0;top:0;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.prose table{width:100%;margin-top:22px;border-collapse:collapse;font-size:15px;line-height:1.55}
.prose th,.prose td{padding:11px 14px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top;color:var(--ink-2)}
.prose th{background:var(--bg-alt);color:var(--ink);font-weight:600;white-space:nowrap}
.prose td:first-child{color:var(--ink);font-weight:500}
@media (max-width:700px){.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose th,.prose td{padding:9px 11px;min-width:5.5em}}
.prose a:hover{text-decoration:underline}
.ftr{background:var(--bg-alt);padding-block:44px 30px;font-size:12px;color:var(--ink-3)}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));gap:34px;
padding-bottom:26px;border-bottom:1px solid var(--line)}
@media (max-width:880px){.ftr__top{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.ftr__top{grid-template-columns:1fr;gap:26px}}
.ftr .brand{font-size:15px;color:var(--ink)}
.ftr .brand__mark{width:17px;height:17px}
.ftr h4{margin-bottom:12px;font-size:12px;font-weight:600;color:var(--ink);letter-spacing:0}
.ftr ul{display:grid;gap:9px}
.ftr a{font-size:12px;color:var(--ink-2);text-decoration:none}
.ftr a:hover{color:var(--ink);text-decoration:underline}
.ftr__addr{margin-top:14px;font-size:12px;line-height:1.7;color:var(--ink-3)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-top:20px;
font-size:12px;color:var(--ink-3)}
.ftr__bot .right{margin-left:auto;display:flex;flex-wrap:wrap;gap:18px}
:root{--ease:cubic-bezier(.22,.61,.36,1);--rise:26px}
@keyframes enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes enterProduct{from{opacity:0;transform:translateY(38px) scale(.985)}to{opacity:1;transform:none}}
.hero__copy>*,.phero__copy>*{animation:enter .82s var(--ease) both}
.hero__copy>*:nth-child(1),.phero__copy>*:nth-child(1){animation-delay:.04s}
.hero__copy>*:nth-child(2),.phero__copy>*:nth-child(2){animation-delay:.11s}
.hero__copy>*:nth-child(3),.phero__copy>*:nth-child(3){animation-delay:.18s}
.hero__copy>*:nth-child(4),.phero__copy>*:nth-child(4){animation-delay:.25s}
.hero__copy>*:nth-child(5),.phero__copy>*:nth-child(5){animation-delay:.32s}
.stage .viewer{animation:enterProduct .95s var(--ease) backwards;animation-delay:.34s}
.reveal-on .sec .eyebrow,.reveal-on .sec .h2,.reveal-on .sec .lede,
.reveal-on .sec .placeholder,.reveal-on .scenes,
.reveal-on .props>*,.reveal-on .promise>*,.reveal-on .caps>*,.reveal-on .steps>*,
.reveal-on .plans>*,.reveal-on .stats>*,.reveal-on .cases>*,.reveal-on .certs>*,
.reveal-on .quotes>*,.reveal-on .xlinks>*,.reveal-on .sol>*,.reveal-on .mods>*,
.reveal-on .tbl-wrap,.reveal-on .faq details,.reveal-on .posts>*,
.reveal-on .dev>*,.reveal-on .cta-list,.reveal-on .form,
.reveal-on .band__in>*,.reveal-on .pain__body>*,.reveal-on .prose>*{
opacity:0;transform:translateY(var(--rise));
transition:opacity .78s var(--ease),transform .78s var(--ease);
transition-delay:calc(var(--i,0)*70ms);will-change:opacity,transform}
.reveal-on .is-in{opacity:1!important;transform:none!important}
.reveal-on .tbl-wrap,.reveal-on .form{--rise:16px}
.reveal-on .prose>*{--rise:14px;transition-duration:.6s}
.hdr{transition:background .3s var(--ease),border-color .3s var(--ease)}
.hdr.is-scrolled{background:rgba(255,255,255,.92);border-bottom-color:var(--line)}
.stage .viewer{transform-origin:50% 0}
.viewer.is-parallax{transform:translateY(calc(var(--p,0)*-26px)) scale(calc(1 - var(--p,0)*.035))}
.det-rect{stroke-dasharray:var(--peri);stroke-dashoffset:0}
.viewer.is-live .det-rect{stroke-dashoffset:var(--peri);
animation:draw .78s var(--ease) forwards;animation-delay:calc(.28s + var(--i,0)*.22s)}
@keyframes draw{to{stroke-dashoffset:0}}
.viewer.is-live .det-label{opacity:0;animation:pop .42s var(--ease) forwards;
animation-delay:calc(.74s + var(--i,0)*.22s)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.viewer.is-live .log__row{opacity:0;animation:enter .5s var(--ease) forwards;
animation-delay:calc(1.05s + var(--j,0)*.1s)}
.viewer.is-live .viewer__bar .live{animation:rec 2.4s steps(1) infinite;animation-delay:.3s}
@keyframes rec{0%,62%{opacity:1}63%,100%{opacity:.25}}
.btn{transition:background .22s var(--ease),transform .18s var(--ease),opacity .22s var(--ease)}
.btn--hv:active{transform:scale(.97)}
.btn--ghost::after{display:inline-block;transition:transform .22s var(--ease)}
.btn--ghost:hover::after{transform:translate(3px,-1px)}
.cap__link::after{content:" ›";display:inline-block;transition:transform .22s var(--ease)}
.cap__link:hover::after{transform:translateX(3px)}
.xlink::after{transition:transform .22s var(--ease)}
.xlink:hover::after{transform:translateX(3px)}
.mega a{transition:color .16s var(--ease),transform .2s var(--ease)}
.mega a:hover{transform:translateX(3px)}
.mod li a strong{transition:color .16s var(--ease)}
.faq summary::before,.faq summary::after{transition:transform .28s var(--ease),opacity .28s var(--ease)}
@media (prefers-reduced-motion:reduce){
.hero__copy>*,.phero__copy>*,.stage .viewer,
.viewer.is-live .det-rect,.viewer.is-live .det-label,.viewer.is-live .log__row{animation:none!important;opacity:1!important;transform:none!important}
.viewer.is-parallax{transform:none!important}
.det-rect{stroke-dashoffset:0!important}
}
.f__legend{font-size:13px;color:var(--ink-3);letter-spacing:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:2px}
@media (max-width:760px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;padding:20px 8px 16px;cursor:pointer;background:var(--bg);
border:1px solid var(--line);border-radius:14px;text-align:center;
transition:border-color .18s var(--ease),background .18s var(--ease),
transform .18s var(--ease),box-shadow .18s var(--ease)}
.tile:hover{border-color:var(--ink-3);transform:translateY(-2px);box-shadow:var(--shadow)}
.tile input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.tile__ico{width:26px;height:26px;color:var(--ink-2);transition:color .18s var(--ease)}
.tile span{font-size:13.5px;line-height:1.3;letter-spacing:-.01em;color:var(--ink-2);
transition:color .18s var(--ease)}
.tile__on{position:absolute;top:8px;right:8px;width:16px;height:16px;color:var(--accent);
opacity:0;transform:scale(.55);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.tile:has(input:checked){border-color:var(--accent);background:rgba(0,113,227,.05);
box-shadow:inset 0 0 0 1px var(--accent)}
.tile:has(input:checked) .tile__ico,.tile:has(input:checked) span{color:var(--accent)}
.tile:has(input:checked) .tile__on{opacity:1;transform:none}
.tile:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
@supports not selector(:has(*)){
.tile input:checked~.tile__ico,.tile input:checked~span{color:var(--accent)}
.tile input:checked~.tile__on{opacity:1;transform:none}
}
.f input::placeholder,.f textarea::placeholder{color:#B0B0B6}
.form .fgrid{gap:20px}
.f--full .tiles+.note{margin-top:10px}
.cta-grid{display:block;text-align:center}
.cta-sec .eyebrow,.cta-sec h2,.cta-sec .lede{text-align:center;margin-inline:auto}
.cta-sec .lede{max-width:660px}
.cta-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:28px;max-width:780px;margin-inline:auto}
.cta-list li{display:inline-flex;align-items:center;gap:9px;font-size:15.5px}
.cta-list li::before{margin-top:0;flex:none}
.form{max-width:780px;margin:clamp(36px,4.4vw,56px) auto 0;text-align:left}
@media (max-width:560px){
.cta-list{flex-direction:column;align-items:flex-start;gap:11px;
max-width:340px;margin-inline:auto;text-align:left}
}
.sec[id],[id^="specifications"],.stage,main [id]{scroll-margin-top:72px}
.phero__h2{font-weight:500;font-size:clamp(19px,2vw,25px);color:var(--ink-2);letter-spacing:-.014em}
.phero__lead{font-size:17px;color:var(--ink-3);max-width:580px}
.mod li a{padding-inline:14px;margin-inline:-14px;border-radius:12px;
transition:background .16s var(--ease)}
.mod li a:hover{background:var(--bg-alt)}
.sec--tint .mod li a:hover{background:var(--bg)}
.mod li a strong::after{content:"›";display:inline-block;margin-left:7px;color:var(--accent);
opacity:0;transform:translateX(-5px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.mod li a:hover strong::after{opacity:1;transform:none}
.mod__head{padding-bottom:16px;margin-bottom:2px}
.steps{align-items:stretch}
.step{display:flex;flex-direction:column}
.step__time{margin-top:auto;align-self:flex-start}
.step ul{margin-bottom:24px}
.step p:last-of-type{margin-bottom:24px}
.stage--text .phero{padding-block:clamp(44px,5vw,76px) clamp(8px,1.2vw,16px)}
.stage--text+.sec,.stage--doc+.sec{padding-top:clamp(36px,4vw,56px)}
.stage--text+.sec .prose,.stage--text+.sec .posts,.stage--text+.sec .prose>:first-child{margin-top:0}
.stage--doc+.sec .prose,.stage--doc+.sec .prose>:first-child{margin-top:0}
.stage--doc .phero{text-align:left;padding-block:clamp(18px,2.4vw,32px) clamp(18px,2.4vw,30px)}
.stage--doc .phero__copy{max-width:var(--w-text);margin-inline:auto}
.post-cover{margin-block:0;padding-bottom:clamp(18px,2.4vw,30px)}
.post-cover img{display:block;width:100%;max-width:var(--w-text);margin-inline:auto;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.stage--doc .phero h1{font-size:clamp(29px,3.8vw,46px);letter-spacing:-.028em}
.stage--doc .phero__lead{margin-inline:0;max-width:var(--w-text);font-size:18.5px;color:var(--ink-2)}
.stage--doc .tagline{font-size:15px;letter-spacing:.01em}
.stage--doc+.sec{padding-top:clamp(22px,2.8vw,40px)}
.stage--doc+.sec .prose{margin-top:0}
.stage--doc+.sec .prose>h2:first-child{margin-top:0}
.pain .note{max-width:70ch;margin-inline:auto}
.brand--logo{gap:0}
.brand__logo{display:block;height:22px;width:auto;max-width:200px;color:var(--accent)}
.brand__logo *{vector-effect:non-scaling-stroke}
.ftr .brand__logo{height:24px}
@media (max-width:480px){.brand__logo{height:19px;max-width:160px}}
.team{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:center;
max-width:1040px;margin:clamp(40px,5vw,60px) auto 0}
.team__img{margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--bg)}
.team__img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.team__list li{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 0;border-bottom:1px solid var(--line)}
.team__list li:first-child{padding-top:0}
.team__list h3{font-size:17px;letter-spacing:-.016em}
.team__list p{margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.team__list b{flex:none;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.team__list b small{font-size:13px;font-weight:500;color:var(--ink-3)}
.team__list .team__total{border-bottom:0;padding-bottom:0}
.team__list .team__total h3{color:var(--ink-3);font-weight:500}
.team__list .team__total b{color:var(--accent)}
@media (max-width:760px){.team{grid-template-columns:1fr}}
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
gap:20px;margin-top:clamp(40px,5vw,58px)}
.office{background:var(--bg-alt);border-radius:var(--r);padding:30px 26px 32px;display:grid;gap:9px}
.sec--tint .office{background:var(--bg)}
.office b{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--ink-3);font-weight:400}
.office h3{font-size:24px;letter-spacing:-.022em}
.office p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.office a{font-size:14.5px;color:var(--accent);text-decoration:none}
.office a:hover{text-decoration:underline}
.office span{font-size:14.5px;color:var(--ink-3)}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
gap:20px;margin-top:clamp(40px,5vw,58px)}
.photo{margin:0;display:grid;gap:12px}
.photo__slot{aspect-ratio:16/9;max-width:100%;display:flex;align-items:center;justify-content:center;
border:1px dashed var(--line);border-radius:14px;background:var(--bg);
padding:16px;text-align:center}
.sec--tint .photo__slot{background:var(--bg-alt)}
.photo__slot span{font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--ink-3)}
.photo figcaption{font-size:14.5px;color:var(--ink-2)}
.sec>.wrap>.note{text-align:center;max-width:76ch;margin-inline:auto}
.sec--plain>.wrap>.note,.dev .note{text-align:left;margin-inline:0}