@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#f1efe7;--paper-2:#e8e5dc;--paper-3:#dedbd1;--ink:#181916;--ink-2:#42443f;--muted:#74756e;--line:#ceccc2;--red:#05AD98;--white:#fffdf7;--serif:'Instrument Serif',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--mono:'DM Mono',monospace;color-scheme:light}
html{background:var(--paper);scroll-behavior:smooth;scroll-padding-top:82px;scrollbar-color:#b5b0a4 var(--paper)}
html[data-theme="dark"]{--paper:#171815;--paper-2:#22231f;--paper-3:#2d2e28;--ink:#f0eee6;--ink-2:#c4c2b9;--muted:#9d9c92;--line:#393a34;--red:#05AD98;--white:#1c1d19;color-scheme:dark;scrollbar-color:#4d4d45 #171815}
body.met-site{margin:0;background:transparent!important;color:var(--ink)!important;font-family:var(--sans)!important;font-size:15px;line-height:1.55;overflow-x:hidden;isolation:isolate}
body.met-site::after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.12;background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(70,60,45,.09) 4px),radial-gradient(rgba(40,35,25,.15) .5px,transparent .75px);background-size:auto,4px 4px;mix-blend-mode:multiply}
body.met-site #bg{display:none!important}body.met-site #bg3d{opacity:.10!important;mix-blend-mode:multiply;filter:grayscale(1)}body.met-site #bg3d.orbfx{opacity:.22!important}body.met-site a{color:inherit;text-decoration:none}body.met-site button{font-family:var(--mono)}body.met-site ::selection{background:var(--red);color:#fff}body.met-site :focus-visible{outline:2px solid var(--red);outline-offset:4px}
body.met-site .w{max-width:1320px;padding-left:clamp(20px,4.2vw,64px);padding-right:clamp(20px,4.2vw,64px)}
body.met-site .met-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body.met-site .met-nav{min-height:72px;height:auto;gap:26px;display:flex;align-items:center;padding-top:12px;padding-bottom:12px}
body.met-site .met-brand{flex:0 0 auto;display:flex;align-items:center;min-width:145px}body.met-site .met-brand img{width:124px;height:auto;max-height:32px;object-fit:contain;filter:brightness(0);transition:opacity .2s}html[data-theme="dark"] body.met-site .met-brand img,html[data-theme="dark"] body.met-site .met-footer-logo img{filter:brightness(0) invert(1)}
body.met-site .met-location{font:12px/1.4 var(--mono);letter-spacing:.045em;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:8px;margin-right:auto}body.met-site .met-location i,body.met-site .met-status i,body.met-site .met-build-live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red)}body.met-site .met-location span{color:var(--red)}
body.met-site .met-links{display:flex;align-items:center;gap:clamp(8px,1.6vw,24px);background:none;padding:0;position:static;flex-direction:row;border:0}body.met-site .met-links a{padding:8px 0;border-radius:0;color:var(--ink-2);font:12px var(--mono);letter-spacing:.02em;position:relative}body.met-site .met-links a::after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:1px;background:var(--red);transition:right .25s}body.met-site .met-links a:hover,body.met-site .met-links a.on{background:none;color:var(--ink)}body.met-site .met-links a:hover::after,body.met-site .met-links a.on::after{right:0}
body.met-site .met-controls{display:flex;align-items:center;gap:12px}body.met-site .met-lang{margin:0;padding:2px;gap:1px;border-radius:2px;background:transparent;border:1px solid var(--line)}body.met-site .met-lang button{background:transparent;border:0;border-radius:1px;color:var(--muted);font:12px var(--mono);padding:5px 6px;cursor:pointer}body.met-site .met-lang button.on{background:var(--ink);color:var(--paper)}body.met-site .met-theme{width:28px;height:28px;border:1px solid var(--line);background:transparent;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer}body.met-site .met-theme span{height:11px;width:11px;border-radius:50%;background:var(--ink);box-shadow:inset -4px 0 0 var(--paper)}body.met-site .met-start{white-space:nowrap;display:inline-flex;align-items:center;gap:20px;background:var(--ink);color:var(--paper);font:12px var(--mono);padding:11px 13px;transition:background .2s,color .2s}body.met-site .met-start span{color:var(--red);font-size:14px}body.met-site .met-start:hover{background:var(--red);color:#fff}body.met-site .met-menu{display:none;background:transparent;border:1px solid var(--line);padding:7px 10px;color:var(--ink);cursor:pointer}
body.met-site .met-shell{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4.2vw,64px)}
body.met-site .met-hero{padding-top:22px;padding-bottom:40px;min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative}
body.met-site .met-hero-meta,body.met-site .met-section-bar,body.met-site .met-hero-foot,body.met-site .met-hero-bottom,body.met-site .met-visual-top,body.met-site .met-visual-bottom,body.met-site .met-workbench-head,body.met-site .met-service-tag,body.met-site .met-work-meta>div>span,body.met-site .met-work-note,body.met-site .met-footer-bottom{font:12px/1.5 var(--mono);letter-spacing:.025em;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:12px}
body.met-site .met-hero-meta{border-bottom:1px solid var(--line);padding-bottom:11px}body.met-site .met-hero-meta b{color:var(--red);font-weight:400}body.met-site .met-status{display:flex;align-items:center;gap:8px}body.met-site .met-status i{width:5px;height:5px}
body.met-site .met-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:clamp(30px,6vw,100px);flex:1;padding:28px 0 20px}
body.met-site .met-kicker{display:flex;align-items:center;gap:10px;font:12px/1.4 var(--mono);letter-spacing:.06em;color:var(--muted);margin:0 0 22px}body.met-site .met-dot{width:7px;height:7px;background:var(--red);display:inline-block;border-radius:50%;flex:0 0 auto}
body.met-site .met-hero h1,body.met-site .met-build h2,body.met-site .met-principles h2,body.met-site .met-services-heading h2,body.met-site .met-work-heading h2,body.met-site .met-studio h2,body.met-site .met-contact h2{font-family:var(--serif);font-weight:400;letter-spacing:-.045em;line-height:.93;color:var(--ink);margin:0;overflow-wrap:normal}body.met-site .met-hero h1{font-size:clamp(56px,7.6vw,112px);max-width:730px}body.met-site .met-hero h1 em,body.met-site .met-build h2 em,body.met-site .met-principles h2 em,body.met-site .met-services-heading h2 em,body.met-site .met-work-heading h2 em,body.met-site .met-studio h2 em,body.met-site .met-contact h2 em{font-weight:400;color:var(--red)}
body.met-site .met-intro{max-width:420px;color:var(--ink-2);font-size:clamp(15px,1.2vw,17px);line-height:1.65;margin:28px 0 26px}body.met-site .met-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px}body.met-site .met-button{display:inline-flex;align-items:center;gap:28px;padding:14px 16px;font:12px var(--mono);transition:transform .2s,background .2s,color .2s}body.met-site .met-button span{font-size:15px;color:var(--red)}body.met-site .met-button-dark{background:var(--ink);color:var(--paper)}body.met-site .met-button-dark:hover{background:var(--red);color:#fff;transform:translateY(-2px)}body.met-site .met-button-dark:hover span{color:#fff}body.met-site .met-text-link{display:inline-flex;align-items:center;gap:14px;font:12px var(--mono);color:var(--ink-2);border-bottom:1px solid var(--line);padding:10px 0;transition:color .2s,border-color .2s}body.met-site .met-text-link span{color:var(--red)}body.met-site .met-text-link:hover{color:var(--red);border-color:var(--red)}body.met-site .met-hero-foot{margin-top:45px;padding-top:12px;border-top:1px solid var(--line);justify-content:flex-start;gap:28px}
body.met-site .met-hero-visual{position:relative;min-height:420px;max-height:530px;aspect-ratio:1/1.03;border:1px solid var(--line);overflow:hidden;isolation:isolate;background:linear-gradient(135deg,color-mix(in srgb,var(--paper-2) 65%,transparent),transparent 60%)}body.met-site .met-visual-top,body.met-site .met-visual-bottom{position:absolute;z-index:3;left:17px;right:17px}body.met-site .met-visual-top{top:15px}body.met-site .met-visual-bottom{bottom:15px;border-top:1px solid var(--line);padding-top:10px}body.met-site .met-blueprint{position:absolute;inset:8%;border:1px solid color-mix(in srgb,var(--line) 76%,transparent);background:linear-gradient(90deg,transparent calc(50% - .5px),color-mix(in srgb,var(--line) 65%,transparent) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),color-mix(in srgb,var(--line) 65%,transparent) 50%,transparent calc(50% + .5px));background-size:100% 100%}body.met-site .bp-cross{position:absolute;color:var(--red);font:14px var(--mono)}body.met-site .bp-cross-a{left:14%;top:20%}body.met-site .bp-cross-b{right:16%;bottom:24%}body.met-site .bp-circle{position:absolute;width:61%;aspect-ratio:1;border:1px dashed color-mix(in srgb,var(--line) 90%,transparent);border-radius:50%;left:20%;top:18%}body.met-site .bp-coord{position:absolute;left:13px;bottom:12px;font:12px var(--mono);color:var(--muted)}body.met-site .met-visual-halo{position:absolute;width:78%;aspect-ratio:1;left:11%;top:12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--red) 13%,transparent),transparent 68%);filter:blur(15px)}body.met-site .met-3d-mark{position:absolute;inset:18% 7% 14%;height:auto;z-index:2;touch-action:pan-y}body.met-site .met-3d-mark .orl{bottom:13px;background:linear-gradient(90deg,transparent,var(--line) 25%,var(--line) 75%,transparent)}body.met-site .met-3d-mark .orl::before,body.met-site .met-3d-mark .orl::after{background:var(--muted)}body.met-site .met-3d-mark .orl i{background:var(--red)}body.met-site .met-lens{position:absolute;z-index:4;width:clamp(68px,9vw,112px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--red) 70%,transparent);border-radius:50%;left:var(--lens-x,64%);top:var(--lens-y,39%);transform:translate(-50%,-50%);pointer-events:none;opacity:.7;box-shadow:0 0 0 9px color-mix(in srgb,var(--red) 8%,transparent),inset 0 0 20px color-mix(in srgb,var(--red) 10%,transparent);transition:opacity .2s}body.met-site .met-lens span{position:absolute;left:50%;top:50%;width:140%;height:1px;background:color-mix(in srgb,var(--red) 50%,transparent);transform:translate(-50%,-50%)}body.met-site .met-side-note{position:absolute;right:8px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font:12px var(--mono);letter-spacing:.1em;color:var(--muted)}body.met-site .met-hero-visual:hover .met-lens{opacity:1}body.met-site .met-hero-bottom{border-top:1px solid var(--line);padding-top:12px}body.met-site .met-hero-bottom a{color:var(--ink-2)}body.met-site .met-hero-bottom a span{color:var(--red);padding-left:8px}body.met-site .met-scroll-line{height:1px;flex:1;max-width:160px;background:linear-gradient(90deg,var(--red),transparent)}
body.met-site .met-build,body.met-site .met-principles,body.met-site .met-services,body.met-site .met-work,body.met-site .met-studio{padding-top:clamp(70px,10vw,142px);padding-bottom:clamp(70px,10vw,142px);border-top:1px solid var(--line)}body.met-site .met-section-bar{padding-bottom:13px;border-bottom:1px solid var(--line)}body.met-site .met-section-bar>a{color:var(--ink)}body.met-site .met-section-bar>a:hover{color:var(--red)}body.met-site .met-build-head{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end;padding:45px 0 44px}body.met-site .met-build h2,body.met-site .met-principles h2,body.met-site .met-work-heading h2,body.met-site .met-studio h2{font-size:clamp(46px,6.4vw,82px)}body.met-site .met-build-head p,body.met-site .met-services-heading>p,body.met-site .met-work-heading>p{max-width:420px;color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 3px}
body.met-site .met-workbench{border:1px solid var(--line);background:color-mix(in srgb,var(--white) 70%,transparent)}body.met-site .met-workbench-head{min-height:42px;padding:12px 17px;border-bottom:1px solid var(--line)}body.met-site .met-build-live{display:flex;align-items:center;gap:7px}body.met-site .met-build-live i{width:5px;height:5px}body.met-site .met-build-body{display:grid;grid-template-columns:1fr .72fr;min-height:335px}body.met-site .met-build-art{position:relative;min-height:335px;overflow:hidden;background:var(--paper-2);border-right:1px solid var(--line);isolation:isolate}body.met-site .met-art-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(90deg,#000,transparent 100%)}body.met-site .met-art-window{position:absolute;width:min(62%,340px);height:58%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);background:var(--white);border:1px solid var(--line);box-shadow:8px 8px 0 color-mix(in srgb,var(--line) 68%,transparent);transition:transform .55s cubic-bezier(.2,.7,.2,1),width .45s}body.met-site .met-art-window-top{height:27px;display:flex;align-items:center;gap:5px;padding:0 9px;border-bottom:1px solid var(--line);font:12px var(--mono);color:var(--muted)}body.met-site .met-art-window-top i{width:5px;height:5px;border-radius:50%;background:var(--line)}body.met-site .met-art-window-top span{margin-left:auto}body.met-site .met-art-lines{position:absolute;top:45px;left:18px;right:18px;display:grid;gap:12px}body.met-site .met-art-lines b{display:block;width:90%;height:9px;background:var(--ink);opacity:.86}body.met-site .met-art-lines b:nth-child(2){width:68%}body.met-site .met-art-lines b:nth-child(3){width:48%;background:var(--red)}body.met-site .met-art-lines i{display:block;height:1px;background:var(--line);margin-top:11px}body.met-site .met-art-lines i:nth-child(5){width:70%}body.met-site .met-art-chip{position:absolute;right:17px;bottom:18px;padding:10px 12px;background:var(--ink);color:var(--paper);font:17px var(--serif)}body.met-site .met-art-chip span{color:var(--red)}body.met-site .met-art-orbit{position:absolute;width:46%;aspect-ratio:1;left:27%;top:26%;border:1px solid var(--red);border-radius:50%;opacity:.6;transition:transform .5s}body.met-site .met-art-cross{position:absolute;right:12%;top:17%;color:var(--red);font:21px var(--mono)}body.met-site .met-art-caption{position:absolute;bottom:13px;left:14px;font:12px var(--mono);letter-spacing:.05em;color:var(--muted)}body.met-site .met-build-art[data-stage="1"] .met-art-window{transform:translate(-50%,-50%) rotate(0deg) scale(1.03)}body.met-site .met-build-art[data-stage="1"] .met-art-lines b{width:32%;height:44px;border:1px solid var(--line);background:transparent}body.met-site .met-build-art[data-stage="1"] .met-art-lines b:nth-child(2){width:60%}body.met-site .met-build-art[data-stage="2"] .met-art-window{transform:translate(-50%,-50%) rotate(3deg) scale(.96)}body.met-site .met-build-art[data-stage="2"] .met-art-lines b{height:13px;background:var(--red)}body.met-site .met-build-art[data-stage="3"] .met-art-window{transform:translate(-50%,-50%) rotate(-1deg) scale(1.06)}body.met-site .met-build-art[data-stage="3"] .met-art-lines b:first-child{height:26px}body.met-site .met-build-art[data-stage="4"] .met-art-orbit{transform:scale(1.5) rotate(35deg)}body.met-site .met-build-art[data-stage="5"] .met-art-window{transform:translate(-50%,-50%) rotate(0) scale(1.12);box-shadow:14px 14px 0 var(--red)}body.met-site .met-build-art[data-stage="6"] .met-art-grid{background-size:12px 12px}body.met-site .met-build-art[data-stage="7"] .met-art-chip{background:var(--red)}body.met-site .met-build-copy{padding:clamp(22px,4vw,48px);display:flex;flex-direction:column;justify-content:center}body.met-site .met-build-copy .met-kicker{margin-bottom:24px}body.met-site .met-build-copy h3{font:clamp(28px,3.1vw,40px)/1.03 var(--serif);letter-spacing:-.025em;margin:0 0 17px;font-weight:400}body.met-site .met-build-copy>p:not(.met-kicker){color:var(--muted);font-size:14px;line-height:1.7;margin:0;max-width:380px}body.met-site .met-build-progress{margin-top:32px;font:12px var(--mono);color:var(--muted)}body.met-site .met-build-progress>span{display:inline-block;margin-right:14px}body.met-site #build-progress-number{color:var(--red)}body.met-site .met-progress-track{height:2px;background:var(--line);margin-top:10px}body.met-site .met-progress-track i{display:block;width:12%;height:100%;background:var(--red);transition:width .4s}body.met-site .met-build-controls{display:flex;align-items:center;gap:9px;margin-top:22px}body.met-site .met-build-controls button{width:33px;height:33px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:17px}body.met-site .met-build-controls button:hover{background:var(--ink);color:var(--paper)}body.met-site .met-build-controls span{font:12px var(--mono);color:var(--muted);margin-left:auto}body.met-site .met-build-steps{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line)}body.met-site .met-build-steps button{border:0;border-right:1px solid var(--line);background:transparent;text-align:left;padding:13px 11px;cursor:pointer;color:var(--muted);display:flex;flex-direction:column;gap:8px;min-width:0}body.met-site .met-build-steps button:last-child{border-right:0}body.met-site .met-build-steps button span{font:12px var(--mono)}body.met-site .met-build-steps button b{font:12px var(--sans);font-weight:500;color:var(--ink)}body.met-site .met-build-steps button.is-active{background:var(--paper-2);box-shadow:inset 0 2px 0 var(--red);color:var(--red)}
body.met-site .met-principles-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,7vw,105px);padding-top:48px}body.met-site .met-principles-list{border-top:1px solid var(--line)}body.met-site .met-principles-list article{display:grid;grid-template-columns:36px 1fr 18px;gap:16px;align-items:start;padding:19px 0 22px;border-bottom:1px solid var(--line)}body.met-site .met-principles-list article>span{font:12px var(--mono);color:var(--red);padding-top:4px}body.met-site .met-principles-list h3{font:clamp(20px,2.2vw,26px)/1.2 var(--serif);font-weight:400;margin:0 0 7px}body.met-site .met-principles-list p{margin:0;max-width:530px;font-size:13px;line-height:1.65;color:var(--muted)}body.met-site .met-principles-list article>b{font:14px var(--mono);color:var(--red);font-weight:400}
body.met-site .met-services-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end;padding:42px 0 35px}body.met-site .met-services-heading h2{font-size:clamp(45px,5.8vw,74px);max-width:810px}body.met-site .met-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}body.met-site .met-service{display:block;min-width:0}body.met-site .met-service-visual{height:clamp(180px,24vw,300px);position:relative;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center}body.met-site .met-service-visual .pixel-label{position:absolute;left:13px;top:12px;font:12px var(--mono);letter-spacing:.06em;color:var(--muted)}body.met-site .pixel-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:20px 20px;opacity:.55}body.met-site .met-visual-pixel>i{position:relative;width:42%;aspect-ratio:1;border:1px solid var(--red);box-shadow:14px 14px 0 color-mix(in srgb,var(--red) 12%,transparent);background:var(--paper);transform:rotate(-9deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}body.met-site .met-visual-pixel>i:before,body.met-site .met-visual-pixel>i:after{content:"";position:absolute;background:var(--red)}body.met-site .met-visual-pixel>i:before{width:66%;height:1px;left:17%;top:38%}body.met-site .met-visual-pixel>i:after{height:1px;width:40%;left:17%;top:52%}body.met-site .met-service:hover .met-visual-pixel>i{transform:rotate(0) scale(1.08)}body.met-site .app-ui{position:relative;width:70%;height:63%;border:1px solid var(--line);background:var(--white);box-shadow:9px 9px 0 color-mix(in srgb,var(--line) 75%,transparent);display:grid;grid-template-columns:23% 1fr;grid-template-rows:28px 1fr;transform:rotate(2deg);transition:transform .6s}body.met-site .met-service:hover .app-ui{transform:rotate(0) translateY(-5px)}body.met-site .app-ui-top{grid-column:1/3;display:flex;align-items:center;gap:5px;padding-left:9px;border-bottom:1px solid var(--line)}body.met-site .app-ui-top i{width:5px;height:5px;border-radius:50%;background:var(--line)}body.met-site .app-ui-side{grid-row:2;background:var(--paper-2);border-right:1px solid var(--line)}body.met-site .app-ui-main{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}body.met-site .app-ui-main b{height:30px;background:var(--paper-2);border:1px solid var(--line)}body.met-site .app-ui-main b:first-child{background:color-mix(in srgb,var(--red) 85%,var(--white))}body.met-site .app-ui-main i{grid-column:1/3;height:1px;background:var(--line)}body.met-site .met-visual-type .type-object{font:clamp(80px,10vw,150px)/1 var(--serif);letter-spacing:-.1em;color:var(--ink);transform:rotate(-6deg);transition:transform .5s}body.met-site .met-visual-type .type-object span{color:var(--red)}body.met-site .met-service:hover .type-object{transform:rotate(0deg) scale(1.06)}body.met-site .met-visual-system{background-image:linear-gradient(90deg,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px));background-size:100% 100%}body.met-site .sys-node{position:absolute;width:45px;height:45px;border:1px solid var(--red);border-radius:50%;background:var(--paper);z-index:2;transition:transform .45s}body.met-site .sys-one{left:24%;top:24%}body.met-site .sys-two{left:56%;top:45%;width:64px;height:64px;background:var(--red);box-shadow:0 0 0 12px color-mix(in srgb,var(--red) 13%,transparent)}body.met-site .sys-three{left:30%;bottom:19%;width:34px;height:34px}body.met-site .sys-link{position:absolute;left:31%;top:34%;width:29%;height:32%;border-left:1px solid var(--red);border-bottom:1px solid var(--red);transform:skew(-25deg)}body.met-site .met-service:hover .sys-two{transform:scale(1.13)}body.met-site .met-service-title{display:flex;justify-content:space-between;gap:20px;padding-top:16px}body.met-site .met-service-title h3{font:clamp(22px,2.5vw,29px)/1.15 var(--serif);font-weight:400;margin:0 0 8px;color:var(--ink)}body.met-site .met-service-title p{max-width:440px;font-size:13px;line-height:1.65;color:var(--muted);margin:0}body.met-site .met-service-title>b{font:16px var(--mono);color:var(--red);font-weight:400;transition:transform .2s}body.met-site .met-service:hover .met-service-title>b{transform:translate(3px,-3px)}body.met-site .met-service-tag{display:block;border-top:1px solid var(--line);margin-top:15px;padding-top:10px;font-size:12px}
body.met-site .met-work-heading{display:grid;grid-template-columns:1fr .7fr;align-items:end;gap:35px;padding:42px 0 37px}body.met-site .met-work-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px 20px;align-items:start}body.met-site .met-work-large{grid-row:span 2}body.met-site .met-work-card{display:block;min-width:0}body.met-site .met-work-image{position:relative;background:var(--paper-2);border:1px solid var(--line);overflow:hidden;min-height:220px;aspect-ratio:1.5}body.met-site .met-work-large .met-work-image{aspect-ratio:.93;min-height:430px}body.met-site .met-work-image img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(.65);transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s}body.met-site .met-dash-image img{object-position:center}body.met-site .met-ui-image img{object-position:center;object-fit:cover}body.met-site .met-work-card:hover .met-work-image img{transform:scale(1.035);filter:saturate(.95)}body.met-site .met-work-index{position:absolute;left:13px;top:13px;padding:6px 8px;background:var(--paper);font:12px var(--mono);color:var(--ink)}body.met-site .met-work-overlay{position:absolute;right:13px;bottom:13px;padding:8px 10px;background:var(--red);color:#fff;font:12px var(--mono);opacity:0;transform:translateY(5px);transition:.25s}body.met-site .met-work-card:hover .met-work-overlay{opacity:1;transform:none}body.met-site .met-work-meta{display:flex;justify-content:space-between;align-items:start;gap:14px;padding-top:12px}body.met-site .met-work-meta>div>span{display:block;font-size:12px}body.met-site .met-work-meta h3{font:clamp(22px,2.4vw,29px)/1.15 var(--serif);font-weight:400;margin:6px 0 0}body.met-site .met-work-meta>b{color:var(--red);font:16px var(--mono);font-weight:400}body.met-site .met-work-note{justify-content:flex-start;padding-top:16px;gap:12px}body.met-site .met-work-note span{color:var(--red)}
body.met-site .met-studio-grid{display:grid;grid-template-columns:1fr .8fr;gap:60px;padding:44px 0 50px}body.met-site .met-studio-grid .met-kicker{margin-bottom:20px}body.met-site .met-studio-copy{padding-top:8px;max-width:480px}body.met-site .met-studio-copy p{font-size:15px;line-height:1.8;color:var(--ink-2);margin:0 0 17px}body.met-site .met-studio-ribbon{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;font:12px var(--mono);color:var(--muted);justify-content:space-between;flex-wrap:wrap}body.met-site .met-studio-ribbon i{width:5px;height:5px;background:var(--red);border-radius:50%}
body.met-site .met-contact{padding-top:40px;padding-bottom:clamp(60px,8vw,110px)}body.met-site .met-contact-paper{background:var(--paper-2);border:1px solid var(--line);position:relative;overflow:hidden;padding:20px clamp(22px,4vw,55px) 26px}body.met-site .met-contact-paper:after{content:"BL";position:absolute;right:-.03em;bottom:-.4em;font:clamp(210px,34vw,460px)/1 var(--serif);letter-spacing:-.1em;color:color-mix(in srgb,var(--line) 22%,transparent);pointer-events:none}body.met-site .met-contact-inner{position:relative;z-index:1;padding:clamp(30px,6vw,78px) 0}body.met-site .met-contact h2{font-size:clamp(55px,8vw,105px)}body.met-site .met-contact-inner>p:not(.met-kicker){max-width:450px;color:var(--muted);font-size:15px;line-height:1.7;margin:25px 0}body.met-site .met-contact-index{position:relative;z-index:1;border-top:1px solid var(--line);padding-top:13px;font:12px var(--mono);color:var(--muted)}
body.met-site .met-footer{border-top:1px solid var(--line);padding:25px clamp(20px,4.2vw,64px) 17px;margin-top:0;background:var(--paper);position:relative;z-index:1}body.met-site .met-footer-top{max-width:1192px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:25px;padding:0 0 24px}body.met-site .met-footer-logo img{display:block;width:130px;height:auto;filter:brightness(0)}body.met-site .met-footer-top p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}body.met-site .met-footer-mail{justify-self:end;font:12px var(--mono);border-bottom:1px solid var(--line);padding-bottom:5px}body.met-site .met-footer-mail:hover{color:var(--red);border-color:var(--red)}body.met-site .met-footer-bottom{max-width:1192px;margin:0 auto;border-top:1px solid var(--line);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:12px}body.met-site .met-footer-bottom>div{display:flex;gap:20px;flex-wrap:wrap}body.met-site .met-footer-bottom a:hover{color:var(--red)}
/* Keep every existing BlackLabs page in the same editorial visual system. */
body.met-site header:not(.met-header){background:color-mix(in srgb,var(--paper) 92%,transparent)!important;border-color:var(--line)!important}body.met-site header:not(.met-header) .nav{gap:20px}body.met-site header:not(.met-header) .brand .lgi{filter:brightness(0)}html[data-theme="dark"] body.met-site header:not(.met-header) .brand .lgi{filter:brightness(0) invert(1)}body.met-site header:not(.met-header) nav a{font:12px var(--mono);color:var(--ink-2);border-radius:0;padding:8px 9px}body.met-site header:not(.met-header) nav a:hover,body.met-site header:not(.met-header) nav a.on{background:transparent;color:var(--red)}body.met-site .hero:not(.met-hero){display:grid;grid-template-columns:1fr .65fr;align-items:center;gap:42px;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(58px,8vw,100px);background:none!important;border-bottom:1px solid var(--line)}body.met-site .hero:not(.met-hero)>div:first-child{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important}body.met-site .hero:not(.met-hero) h1{font:clamp(50px,7vw,88px)/.95 var(--serif)!important;letter-spacing:-.045em;color:var(--ink)!important}body.met-site .hero:not(.met-hero) h1 span{color:var(--red)!important}body.met-site .hero:not(.met-hero) p{color:var(--muted)}body.met-site .hero:not(.met-hero) .artw{display:none}body.met-site main section.sec{min-height:auto;display:block;padding-top:clamp(55px,7vw,95px);padding-bottom:clamp(55px,7vw,95px)}body.met-site .hd{text-align:left;margin-bottom:30px;background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important}body.met-site .hd h2{font:clamp(40px,5.2vw,68px)/1 var(--serif)!important;letter-spacing:-.04em;color:var(--ink)!important}body.met-site .hd h2 span{color:var(--red)!important}body.met-site .hd p{margin:12px 0 0;color:var(--muted);max-width:600px}body.met-site .card,body.met-site .feat>div,body.met-site details,body.met-site .cta,body.met-site main .feat,body.met-site .dg,body.met-site .dr{background:var(--white)!important;background-image:none!important;border:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;color:var(--ink)!important}body.met-site .card{padding:24px;text-align:left;transition:transform .25s,border-color .25s}body.met-site .card:hover{transform:translateY(-3px)!important;border-color:var(--red)!important;box-shadow:none!important}body.met-site .card h3,body.met-site .feat h3{font:25px/1.15 var(--serif)!important;color:var(--ink)!important;font-weight:400!important}body.met-site .card p,body.met-site .feat p{font-size:13px;color:var(--muted)!important}body.met-site .card .ic{margin:0 0 18px;background:var(--paper-2);border:1px solid var(--line);border-radius:0;color:var(--red)}body.met-site .card .more{padding:0;border:0;border-radius:0;background:none;color:var(--ink);font:12px var(--mono)}body.met-site .card .more i{background:none;border-radius:0;color:var(--red)}body.met-site .cards{gap:16px}body.met-site .shot{border-radius:0;background:var(--paper-2);border:1px solid var(--line)}body.met-site .faq{gap:0;display:grid;grid-template-columns:1fr 1fr}body.met-site details{padding:18px 0;border-width:0 0 1px!important;background:transparent!important}body.met-site summary{font:20px var(--serif);color:var(--ink);font-weight:400}body.met-site details p,body.met-site details ul{color:var(--muted)}body.met-site .cta{border-radius:0!important;padding:50px 25px 0!important;background:var(--paper-2)!important}body.met-site .cta h2{font:clamp(42px,6vw,76px)/.98 var(--serif)!important;color:var(--ink)!important}body.met-site .cta h2 span{color:var(--red)!important}body.met-site .b{border-radius:0;background:var(--ink);color:var(--paper);font:12px var(--mono);padding:13px 17px}body.met-site .b.g{background:transparent;color:var(--ink);border:1px solid var(--line)}body.met-site form{max-width:700px;margin:0}body.met-site input,body.met-site select,body.met-site textarea{border-radius:0;background:var(--white);border:1px solid var(--line);color:var(--ink);font:13px var(--sans)}body.met-site footer:not(.met-footer){display:block!important;background:var(--paper)!important;border-top:1px solid var(--line)!important;padding:28px 0 18px!important;margin-top:0!important;box-shadow:none!important}body.met-site footer:not(.met-footer) .ft{border-bottom:1px solid var(--line)!important;padding-bottom:20px!important}body.met-site footer:not(.met-footer) .fc{padding:22px 0!important;gap:22px!important}body.met-site footer:not(.met-footer) .fc h4{font:12px var(--mono)!important;color:var(--ink)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.04em}body.met-site footer:not(.met-footer) .fc a{color:var(--muted)!important;font-size:12px!important}body.met-site footer:not(.met-footer) .fc a:hover{color:var(--red)!important}body.met-site footer:not(.met-footer) .cp{border-top:1px solid var(--line)!important;color:var(--muted)!important;font:12px var(--mono)!important;padding-top:13px!important}body.met-site header:not(.met-header) .lang{margin-inline-start:auto}body.met-site .met-reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}body.met-site .met-reveal.met-in{opacity:1;transform:none}
@media(max-width:1050px){body.met-site .met-location{display:none}body.met-site .met-nav{gap:16px}body.met-site .met-hero-grid{gap:32px}body.met-site .met-hero-visual{min-height:340px}body.met-site .met-build-body{grid-template-columns:1fr .9fr}body.met-site .met-build-steps button{padding:11px 7px}body.met-site .met-build-steps button b{font-size:12px}}
@media(max-width:760px){body.met-site .met-nav{min-height:64px;flex-wrap:wrap;gap:12px}body.met-site .met-brand{min-width:auto;margin-right:auto}body.met-site .met-brand img{width:110px}body.met-site .met-menu{display:inline-flex;align-items:center;gap:10px}body.met-site .met-controls{gap:7px}body.met-site .met-lang button{padding:5px 4px}body.met-site .met-start{padding:9px;gap:8px;font-size:12px}body.met-site .met-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);padding:15px 22px 20px;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}body.met-site .met-links.open{display:flex}body.met-site .met-links a{padding:12px 0;border-bottom:1px solid var(--line)}body.met-site .met-hero{min-height:auto;padding-top:15px;gap:22px}body.met-site .met-hero-meta{font-size:12px;flex-wrap:wrap}body.met-site .met-hero-grid{grid-template-columns:1fr;gap:28px;padding:16px 0}body.met-site .met-hero h1{font-size:clamp(55px,13vw,86px)}body.met-site .met-intro{margin:20px 0;font-size:14px}body.met-site .met-hero-foot{margin-top:30px;flex-wrap:wrap}body.met-site .met-hero-visual{min-height:280px;aspect-ratio:1.15;max-height:400px}body.met-site .met-hero-bottom{font-size:12px;flex-wrap:wrap}body.met-site .met-scroll-line{display:none}body.met-site .met-build-head,body.met-site .met-services-heading,body.met-site .met-work-heading,body.met-site .met-principles-layout,body.met-site .met-studio-grid{grid-template-columns:1fr;gap:20px;padding-top:32px;padding-bottom:30px}body.met-site .met-build h2,body.met-site .met-principles h2,body.met-site .met-work-heading h2,body.met-site .met-studio h2{font-size:clamp(48px,11vw,70px)}body.met-site .met-build-body{grid-template-columns:1fr}body.met-site .met-build-art{border-right:0;border-bottom:1px solid var(--line);min-height:270px}body.met-site .met-build-copy{padding:25px 20px 28px}body.met-site .met-build-steps{grid-template-columns:repeat(4,1fr)}body.met-site .met-build-steps button:nth-child(4){border-right:0}body.met-site .met-build-steps button:nth-child(-n+4){border-bottom:1px solid var(--line)}body.met-site .met-service-grid{grid-template-columns:1fr;gap:30px}body.met-site .met-service-visual{height:clamp(220px,64vw,330px)}body.met-site .met-work-grid{grid-template-columns:1fr;gap:24px}body.met-site .met-work-large{grid-row:auto}body.met-site .met-work-large .met-work-image{aspect-ratio:1.25;min-height:0}body.met-site .met-work-image{min-height:0}body.met-site .met-studio-grid{padding-bottom:35px}body.met-site .met-studio-ribbon{justify-content:flex-start;gap:10px;font-size:12px}body.met-site .met-contact-inner{padding:38px 0}body.met-site .met-contact h2{font-size:clamp(52px,12vw,78px)}body.met-site .met-footer-top{grid-template-columns:1fr 1fr;gap:18px}body.met-site .met-footer-logo{grid-column:1}body.met-site .met-footer-top p{grid-column:2;grid-row:1}body.met-site .met-footer-mail{grid-column:1/3;justify-self:start}body.met-site .met-footer-bottom{align-items:flex-start;flex-direction:column;gap:12px}body.met-site .hero:not(.met-hero){grid-template-columns:1fr!important;padding-top:60px!important;padding-bottom:48px!important}body.met-site .faq{grid-template-columns:1fr!important}body.met-site .feat{grid-template-columns:1fr!important}body.met-site .fc{grid-template-columns:1fr 1fr!important}}
@media(max-width:430px){body.met-site .met-lang{display:none}body.met-site .met-start{display:none}body.met-site .met-visual-bottom,body.met-site .met-visual-top{font-size:12px;left:10px;right:10px}body.met-site .met-build-steps button b{font-size:12px}body.met-site .met-build-steps button{padding:10px 6px}body.met-site .met-section-bar{font-size:12px;gap:7px}body.met-site .met-workbench-head{font-size:12px;gap:7px}body.met-site .met-footer-top{grid-template-columns:1fr}body.met-site .met-footer-top p,body.met-site .met-footer-logo,body.met-site .met-footer-mail{grid-column:auto;grid-row:auto}}
@media(prefers-reduced-motion:reduce){body.met-site *,body.met-site *:before,body.met-site *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Arabic: proper font, no letter-spacing (breaks joined letters), right-to-left flow */
html[lang="ar"] body.met-site,html[lang="ar"] body.met-site *{font-family:"Cairo","DM Sans",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
html[lang="ar"] body.met-site h1,html[lang="ar"] body.met-site h2,html[lang="ar"] body.met-site h3{line-height:1.25!important}
html[dir="rtl"] body.met-site .met-hero-copy,html[dir="rtl"] body.met-site .met-build-copy,html[dir="rtl"] body.met-site .met-section-bar{text-align:right}
html[dir="rtl"] body.met-site header:not(.met-header) .lang{margin-inline-start:auto}
html[lang="ar"] body.met-site .met-hero h1{font-size:clamp(40px,5.6vw,84px)!important}
html[lang="ar"] body.met-site h2{font-size:clamp(32px,4.4vw,64px)!important}
html[lang="ar"] body.met-site:not(.x) .hero:not(.met-hero) h1,html[lang="ar"] body.met-site .hd h2{font-size:clamp(34px,4.6vw,60px)!important}

/* Pinned build sequence: stays on screen while the 8 steps scroll through */
body.met-site .met-build-track{position:relative}
body.met-site .met-build-stick{position:sticky;top:84px;z-index:3}
body.met-site .met-workbench{background:var(--paper)}
body.met-site .met-build-art{min-height:clamp(170px,32vh,335px)}
@media(max-width:760px){body.met-site .met-build-art{min-height:clamp(150px,26vh,270px)}body.met-site .met-build-copy{padding:16px 18px 18px}body.met-site .met-build-copy h3{font-size:clamp(22px,6vw,30px)}body.met-site .met-build-progress{margin-top:12px}body.met-site .met-build-controls{margin-top:12px}}
@media(max-height:700px){body.met-site .met-build-art{min-height:130px}body.met-site .met-build-copy p{font-size:12px;line-height:1.4}}

/* keep position:sticky working: body must not become its own scroll container */
html{overflow-x:hidden}
@supports (overflow:clip){body.met-site{overflow-x:clip!important;overflow-y:visible!important}}

/* ===== Build explainer: browser mock + code panel (per step) ===== */
body.met-site .met-build-art{container-type:inline-size;min-height:clamp(250px,44vh,420px)}
.ba-bw{position:absolute;left:5%;top:9%;width:64%;height:80%;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:1}
.ba-top{display:flex;gap:5px;align-items:center;padding:7px 9px;border-bottom:1px solid var(--line)}
.ba-top>i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.ba-url{margin-left:8px;font:12px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 8px;white-space:nowrap}
.ba-chips{margin-left:auto;display:flex;gap:4px}
.ba-chips b{font:12px var(--mono);background:var(--ink);color:var(--paper);border-radius:99px;padding:1px 6px;opacity:0;transform:translateY(3px);transition:.4s}
[data-stage="6"] .ba-chips b,[data-stage="7"] .ba-chips b{opacity:1;transform:none}
[data-stage="6"] .ba-chips b:nth-child(2){transition-delay:.12s}[data-stage="6"] .ba-chips b:nth-child(3){transition-delay:.24s}
.ba-body{flex:1;min-height:0;display:grid;grid-template-columns:1.2fr .8fr;gap:10px;padding:clamp(8px,3cqw,16px)}
.ba-l{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0}
.ba-logo,.ba-h span,.ba-p,.ba-b1,.ba-b2,.ba-img{position:relative;transition:background .5s,color .5s,border-color .5s,box-shadow .4s,transform .4s}
.ba-logo{font:700 clamp(10px,2.6cqw,13px) var(--sans);letter-spacing:-.03em;align-self:flex-start}.ba-logo u{text-decoration:none;color:var(--red)}
.ba-h{position:relative}
.ba-h span{display:block;width:max-content;max-width:100%;font:700 clamp(15px,5.2cqw,28px)/1.02 var(--sans);letter-spacing:-.05em}
.ba-p{font-size:clamp(7.5px,1.9cqw,10px);line-height:1.4;color:var(--muted);margin:0;max-width:30ch}
.ba-bt{display:flex;gap:6px;flex-wrap:wrap}
.ba-b1{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--paper);border-radius:99px;padding:3px 3px 3px 10px;font:600 clamp(7.5px,1.9cqw,10px) var(--sans)}
.ba-b1 i{width:15px;height:15px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-style:normal;color:#04201c;font-size:12px;transition:transform .4s}
.ba-b2{border:1px solid var(--line);border-radius:99px;padding:3px 10px;font:600 clamp(7.5px,1.9cqw,10px) var(--sans)}
.ba-img{border-radius:6px;background:linear-gradient(135deg,#eceeef,#8f969b);overflow:hidden}
.ba-img::after{content:"";position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:var(--red);left:33%;top:33%}
.ba-bw em{position:absolute;right:3px;top:50%;transform:translateY(-50%);font:12px var(--mono);font-style:normal;color:var(--red)!important;display:none;white-space:nowrap;background:var(--paper);padding:0 3px;border-radius:3px;z-index:2}
.ba-h em{top:2px;transform:none}
[data-stage="1"] .ba-bw em,[data-stage="2"] .ba-b1 em{display:block}
.ba-cur{position:absolute;width:13px;height:13px;left:70%;top:60%;opacity:0;transform:translate(10px,10px);transition:.4s;z-index:3}
.ba-live{position:absolute;right:10px;bottom:8px;font:12px var(--mono);display:flex;gap:5px;align-items:center;border:1px solid var(--red);color:var(--red);border-radius:99px;padding:1px 8px;opacity:0;transition:.5s}
.ba-live i{width:5px;height:5px;border-radius:50%;background:var(--red);animation:baPulse 1.3s infinite}
@keyframes baPulse{50%{opacity:.25}}
/* build stages: 0 dashed idea, 1-2 wireframe, 3+ designed */
[data-stage="0"] :is(.ba-logo,.ba-h span,.ba-p,.ba-b1,.ba-b2,.ba-img){color:transparent!important;background:transparent!important;border:1px dashed var(--muted)!important;border-radius:4px}
[data-stage="1"] :is(.ba-logo,.ba-h span,.ba-p,.ba-b1,.ba-b2,.ba-img),[data-stage="2"] :is(.ba-logo,.ba-h span,.ba-p,.ba-b1,.ba-b2,.ba-img){color:transparent!important;background:var(--line)!important;border-radius:4px}
:is([data-stage="0"],[data-stage="1"],[data-stage="2"]) :is(.ba-b1 i,.ba-img::after){opacity:0}
:is([data-stage="0"],[data-stage="1"],[data-stage="2"]) .ba-img::after{display:none}
[data-stage="2"] .ba-b1{background:transparent!important;border:1.5px solid var(--red)!important}
[data-stage="4"] .ba-b1{transform:scale(1.07);box-shadow:0 0 0 4px rgba(5,173,152,.3)}
[data-stage="4"] .ba-b1 i{transform:rotate(45deg)}
[data-stage="4"] .ba-cur{opacity:1;transform:none}
[data-stage="5"] .ba-h{border-bottom:1px solid var(--red);padding-bottom:3px}
[data-stage="5"] .ba-b1::before{content:"";position:absolute;left:-8px;top:0;bottom:0;border-left:1px solid var(--red)}
[data-stage="5"] .ba-b1::after{content:"52";position:absolute;left:-26px;top:50%;transform:translateY(-50%);font:12px var(--mono);color:var(--red)}
[data-stage="7"] .ba-live{opacity:1}
/* code panel */
.ba-code{position:absolute;right:3%;top:17%;width:54%;background:#111310;color:#f0eee6;border:1px solid #2a2c27;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.55);overflow:hidden;z-index:3}
.ba-ch{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid #2a2c27;font:12px var(--mono);color:#9d9c92;letter-spacing:.06em}
.ba-ch i{width:5px;height:5px;border-radius:50%;background:var(--red)}
.ba-code pre{margin:0;padding:8px 12px 12px;font:clamp(8px,2.1cqw,10.5px)/1.65 var(--mono);min-height:calc(8 * 1.65em + 18px);counter-reset:ln;white-space:pre;overflow:hidden;color:#f0eee6}
.ba-code pre i{display:block;font-style:normal;animation:baLine .45s var(--d,0s) both}
.ba-code pre i::before{counter-increment:ln;content:counter(ln);display:inline-block;width:1.6em;color:#55574f}
.ba-code .k{color:var(--red);font-weight:400}.ba-code .c{color:#7d7f76;font-weight:400}
@keyframes baLine{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
/* connector + annotation */
.ba-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.ba-cv path{fill:none;stroke:var(--red);stroke-width:1;vector-effect:non-scaling-stroke}
.ba-dot{position:absolute;left:25.5%;top:68%;width:7px;height:7px;border:1px solid var(--red);border-radius:50%;background:var(--paper);z-index:3}
.ba-ann{position:absolute;left:5%;bottom:2.5%;font:12px var(--mono);letter-spacing:.06em;color:var(--red);z-index:3}
.ba-gets{margin:14px 0 0;font:12px/1.45 var(--mono);color:var(--ink-2);display:flex;gap:10px;align-items:baseline}
.ba-gets b{font-weight:500;font-size:12px;color:var(--red);letter-spacing:.06em;white-space:nowrap}
@media(max-width:760px){body.met-site .met-build-art{min-height:clamp(220px,34vh,300px)}.ba-bw{width:72%}.ba-code{width:58%;top:30%}.ba-code pre{font-size:12px}.ba-ch{padding:6px 9px}.ba-gets{font-size:12px;margin-top:8px}}
@media(max-height:700px){body.met-site .met-build-art{min-height:210px}}
body.met-site .ba-gets{margin:14px 0 0}
@media(max-width:760px){body.met-site .met-build-art{min-height:clamp(190px,28vh,250px)}body.met-site .ba-gets{margin:8px 0 0;font-size:12px;line-height:1.35}body.met-site .met-build-copy p{font-size:12.5px;line-height:1.45}body.met-site .met-build-copy h3{margin:6px 0}body.met-site .met-build-steps button{padding:9px 12px}}
@media(max-width:760px) and (max-height:720px){body.met-site .met-build-art{min-height:165px}body.met-site .ba-gets{display:none}}