.porta h1,.porta h2,.porta h3{font-family:inherit;letter-spacing:normal}


.porta{
  
  --background:#ece7db;
  --foreground:#2a2122;
  --muted:#e4dece;
  --muted-foreground:#66615a;
  --accent:#e2dccd;
  --border:#d8d1c1;
  --highlight:#e8e8ce;
  --highlight-foreground:#2a2122;
  --radius:.625rem;
  --gutter:1.5rem;

  
  --ink:#2a2122;                                                   
  --foreground-soft:color-mix(in srgb,var(--foreground) 70%,transparent); 
  --scrim:rgb(0 0 0 / .55);                                        

  
  --font-sans:"Aspekta",system-ui,sans-serif;                      
  --font-mono:"Geist Mono",ui-monospace,monospace;                 

  
  --text-display:2.75rem;  --text-display--line-height:1.1;  --text-display--letter-spacing:-.02em; --text-display--font-weight:300;
  --text-title:2rem;       --text-title--line-height:1.12;   --text-title--letter-spacing:-.02em;   --text-title--font-weight:300;
  --text-heading:1.75rem;  --text-heading--line-height:1.2;  --text-heading--font-weight:300;
  --text-body:1rem;        --text-body--line-height:1.625;
  --text-small:.875rem;    --text-small--line-height:1.5;
  --text-label:.6875rem;   --text-label--line-height:1.5;    --text-label--letter-spacing:.08em;    

  
  --space-section:clamp(6rem,12vh,9rem);
  --space-block:3rem;
  --space-stack:1.5rem;

  
  --radius-control:var(--radius);                                  
  --radius-media:1.5rem;                                           

  
  --ease:cubic-bezier(.22,1,.36,1);
  --duration:350ms;
  --duration-slow:1s;
}

.porta .p-dark{
  --background:#2a2122;
  --foreground:#e8e8ce;
  --muted:#3a3031;
  --muted-foreground:#afbfb7;
  --accent:#3a3031;
  --border:#453b3c;
  --highlight:#e8e8ce;
  --highlight-foreground:#2a2122;
  --scrim:rgb(0 0 0 / .55);
}


@font-face{font-family:"Aspekta";src:url("fonts/AspektaVF.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}

@media (prefers-color-scheme:dark){
  .porta:not([data-theme="light"]){--background:#2a2122;--foreground:#e8e8ce;--muted:#3a3031;--muted-foreground:#afbfb7;--accent:#3a3031;--border:#453b3c;color-scheme:dark}
}
.porta[data-theme="dark"]{--background:#2a2122;--foreground:#e8e8ce;--muted:#3a3031;--muted-foreground:#afbfb7;--accent:#3a3031;--border:#453b3c;color-scheme:dark}

.porta *,.porta *::before,.porta *::after{box-sizing:border-box}
.porta{background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.porta{margin:0;font-family:var(--font-sans);font-weight:300;font-size:var(--text-body);line-height:var(--text-body--line-height);background:var(--background);color:var(--foreground)}
.porta a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
.porta h1,.porta h2,.porta h3,.porta p,.porta figure,.porta ul,.porta ol{margin:0}
.porta ul,.porta ol{padding:0;list-style:none}
.porta i{font-style:normal}
.porta img{display:block;max-width:100%;height:auto}
.porta svg text{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;fill:currentColor;stroke:none}
.porta :focus-visible{outline:2px solid var(--foreground);outline-offset:3px}

.porta .wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}


.porta .display{font-size:clamp(2rem,4.5vw,var(--text-display));line-height:var(--text-display--line-height);letter-spacing:var(--text-display--letter-spacing);font-weight:300;text-wrap:balance}
.porta .title{font-size:clamp(1.625rem,3vw,var(--text-title));line-height:var(--text-title--line-height);letter-spacing:var(--text-title--letter-spacing);font-weight:300;text-wrap:balance}
.porta .heading{font-size:clamp(1.375rem,2.4vw,var(--text-heading));line-height:var(--text-heading--line-height);font-weight:300;text-wrap:balance}
.porta .soft{color:var(--foreground-soft)}
.porta .small{font-size:var(--text-small);line-height:var(--text-small--line-height)}
.porta .p-label{font-family:var(--font-mono);font-size:var(--text-label);line-height:var(--text-label--line-height);letter-spacing:var(--text-label--letter-spacing);text-transform:uppercase;font-weight:400;color:var(--muted-foreground)}
.porta .lead{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.5;max-width:60ch;color:var(--foreground-soft)}
.porta .measure{max-width:60ch}


.porta .top{display:flex;justify-content:space-between;gap:16px;padding-block:20px;border-bottom:1px solid var(--border)}
.porta .intro{padding-block:var(--space-block)}
.porta .intro p{font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.4;max-width:46ch;letter-spacing:-.01em}
.porta .p-open{display:grid;gap:40px;align-items:center;padding-block:clamp(2rem,5vw,4rem) clamp(2rem,4vw,3rem)}
.porta .p-open p{font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.22;max-width:22ch;letter-spacing:-.02em}
@media (min-width:900px){.porta .p-open{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}}
.porta .figure{width:100%;max-width:560px;height:auto;display:block;justify-self:end;color:var(--foreground)}
.porta .figure text{font-family:var(--font-mono);letter-spacing:.08em;fill:var(--muted-foreground)}
.porta .figure .verb{fill:var(--muted-foreground);opacity:.8}
.porta .figure a.call{cursor:pointer}
.porta .figure a.call:hover text{fill:var(--foreground)}
.porta .figure .beat-ring{transform-origin:360px 690px;animation:beat 2.4s var(--ease) infinite}
@keyframes beat{0%{transform:scale(1);opacity:.8}70%{transform:scale(4);opacity:0}100%{transform:scale(4);opacity:0}}
@media (prefers-reduced-motion:reduce){.porta .figure .beat-ring{animation:none;opacity:0}}
@media (max-width:899px){.porta .figure{justify-self:start;max-width:480px}}

.porta .tabs{position:sticky;top:0;z-index:2;background:var(--background);border-block:1px solid var(--border);overflow:hidden}
.porta .tabs [role=tablist]{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.porta .tabs [role=tab]{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:18px 0;margin-right:32px;font:inherit;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--text-label--letter-spacing);text-transform:uppercase;color:var(--muted-foreground);cursor:pointer;white-space:nowrap}
.porta .tabs [role=tab][aria-selected=true]{color:var(--foreground);border-bottom-color:var(--foreground)}
.porta .tabs [role=tab]:hover{color:var(--foreground)}
.porta [role=tabpanel][hidden]{display:none}


.porta .chapter{padding-block:var(--space-section);border-bottom:1px solid var(--border);display:grid;gap:var(--space-block)}
.porta .chapter:last-child{border-bottom:0}
.porta .chapter > header{display:grid;gap:var(--space-stack)}
.porta .chapter > header .title{max-width:24ch}
.porta .row{display:grid;gap:20px 48px;padding-block:var(--space-block);border-top:1px solid var(--border)}
@media (min-width:900px){.porta .row{grid-template-columns:160px minmax(0,1fr)}}
.porta .row > .p-label{padding-top:4px}
.porta .row-body{display:grid;gap:var(--space-stack);min-width:0}
.porta .rules{display:grid;gap:12px;max-width:60ch;color:var(--foreground-soft)}
.porta .rules li{position:relative;padding-left:40px}
.porta .rules li::before{content:"";position:absolute;left:0;top:.8em;width:24px;height:1px;background:var(--muted-foreground)}


.porta .cover{position:relative;border-radius:var(--radius-media);overflow:hidden;aspect-ratio:16/8;background:#2a2122;color:#e8e8ce;min-height:360px}
.porta .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.porta .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0/.55),transparent 55%)}
.porta .cover .p-in{position:absolute;inset:0;padding:clamp(20px,4vw,48px);display:flex;flex-direction:column;justify-content:space-between;z-index:1}
.porta .cover .p-in svg{width:clamp(96px,12vw,160px);height:auto}
.porta .cover .p-in .p-label{color:#e8e8ce;opacity:.8}
.porta .cover .p-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.porta .cover .p-foot .display{max-width:16ch;color:#e8e8ce}


.porta .paper{--background:#ece7db;--foreground:#2a2122;--muted:#e4dece;--muted-foreground:#66615a;--border:#d8d1c1;--highlight:#2a2122;--highlight-foreground:#ece7db;--foreground-soft:rgb(42 33 34 / .7);--line:rgb(42 33 34 / .15);background:var(--background);color:var(--foreground)}
.porta .ink{--background:#2a2122;--foreground:#e8e8ce;--muted:#3a3031;--muted-foreground:rgb(232 232 206 / .6);--border:#453b3c;--highlight:#e8e8ce;--highlight-foreground:#2a2122;--foreground-soft:rgb(232 232 206 / .7);--line:rgb(232 232 206 / .15);background:var(--background);color:var(--foreground)}


.porta .tiles{display:grid;gap:16px}
@media (min-width:700px){.porta .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta .p-tile{position:relative;display:grid;place-items:center;aspect-ratio:3/2;border-radius:var(--radius-media);overflow:hidden;border:1px solid var(--border)}
.porta .p-tile svg{display:block;height:auto}
.porta .p-tile.sym svg{width:20%}
.porta .p-tile.word svg{width:64%}
.porta .lockup{display:flex;align-items:center;width:76%}
.porta .lockup .s{width:13%;flex:none}.porta .lockup .s svg{width:100%}
.porta .lockup .w{width:80%;margin-left:7%}.porta .lockup .w svg{width:100%}
.porta .p-tile.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.porta .p-tile.photo .s{position:absolute;top:24px;left:24px;width:11%;color:#e8e8ce}
.porta .p-tile.photo .s svg{width:100%}
.porta .p-tile.photo .p-label{position:absolute;right:24px;bottom:20px;color:#e8e8ce;opacity:.8}
.porta .p-tile.clear svg{width:60%;overflow:visible}
.porta .minsize{display:flex;gap:40px;align-items:flex-end;flex-wrap:wrap}
.porta .minsize div{display:grid;gap:12px;justify-items:start}
.porta .minsize svg{display:block;height:auto}


.porta .bands{display:grid;gap:16px}
@media (min-width:700px){.porta .bands{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta .band{aspect-ratio:4/3;border-radius:var(--radius-media);padding:24px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--border)}
.porta .band .heading{font-size:1.75rem}
.porta .band.signal{position:relative;overflow:hidden;color:#e8e8ce;border:1.5px dashed var(--muted-foreground)}
.porta .band.signal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.porta .band.signal > *:not(img){position:relative;z-index:1}
.porta .band.signal .p-label{color:#e8e8ce;opacity:.85}
.porta .ramp{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));border-radius:var(--radius-control);overflow:hidden;height:72px}
.porta .ramp i{display:block;height:100%}
.porta .ramp i.gap{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--border) 6px 7px)}
.porta .ramp-labels{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.porta .ramp-labels p{font-size:.6875rem;line-height:1.4;font-family:var(--font-mono);color:var(--muted-foreground);letter-spacing:.02em;overflow-wrap:anywhere}
.porta .ramp-labels p b{display:block;font-weight:400;color:var(--foreground);font-family:var(--font-sans);font-size:.875rem}
@media (max-width:600px){.porta .ramp-labels p{font-size:.5rem}.porta .ramp-labels p b{font-size:.6875rem}}
.porta .pairs{display:grid;gap:16px}
@media (min-width:700px){.porta .pairs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.porta .pairs div{padding:20px;border-radius:var(--radius-control);min-height:120px;display:grid;align-content:space-between;font-size:1.125rem}
.porta .pairs .p-label{color:inherit;opacity:.7}


.porta .big{font-size:clamp(2.25rem,6.2vw,5.5rem);line-height:1.02;letter-spacing:-.03em;font-weight:300;text-wrap:balance;max-width:14ch}
.porta .weights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.porta .weights div{border-top:1px solid var(--border);padding-top:16px;display:grid;gap:8px}
.porta .weights .aa{font-size:clamp(3rem,8vw,6rem);line-height:1;letter-spacing:-.02em}
.porta .scale{display:grid;border-top:1px solid var(--border)}
.porta .scale > div{display:grid;gap:8px 32px;padding-block:16px;border-bottom:1px solid var(--border);align-items:baseline}
@media (min-width:700px){.porta .scale > div{grid-template-columns:150px minmax(0,1fr)}}
.porta .scale .sample{font-weight:300;text-wrap:balance;overflow-wrap:anywhere}
.porta .scale .sample.mono{font-family:var(--font-mono);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem}
.porta .twofaces{display:grid;gap:16px}
@media (min-width:700px){.porta .twofaces{grid-template-columns:3fr 2fr}}
.porta .twofaces > div{padding:28px;border-radius:var(--radius-media);display:grid;gap:12px;align-content:space-between;min-height:200px}
.porta .twofaces .heading{font-size:clamp(1.5rem,2.6vw,2rem)}
.porta .twofaces .mono{font-family:var(--font-mono);font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem;line-height:1.7}


.porta .gridshow{position:relative;border-radius:var(--radius-media);overflow:hidden}
.porta .gridshow .cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-inline:48px;pointer-events:none}
.porta .gridshow .cols i{display:block;background:rgb(42 33 34 / .06);border-inline:1px dashed rgb(42 33 34 / .25)}
.porta .bars{display:grid;gap:12px}
.porta .bar{display:flex;align-items:center;gap:16px}
.porta .bar i{display:block;height:12px;background:var(--foreground);flex:none}
.porta .shapes{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-end}
.porta .shp{display:grid;gap:10px;justify-items:start}
.porta .shp i{display:block;width:72px;height:72px;border:2px solid var(--foreground)}
.porta .shp i.hair{width:128px;height:1px;border:0;background:var(--foreground);opacity:.12;margin-bottom:36px}
.porta .shp svg{width:72px;height:72px;display:block}


.porta .kinds{display:grid;gap:24px}
@media (min-width:700px){.porta .kinds{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta .kinds figure{display:grid;gap:12px}
.porta .kinds img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--radius-media)}
.porta .kinds figcaption{display:grid;gap:4px}
.porta .kinds figcaption p:first-child{font-size:1.125rem}


.porta .say{display:grid;gap:16px}
@media (min-width:700px){.porta .say{grid-template-columns:repeat(2,minmax(0,1fr))}}
.porta .say > div{padding:28px;border-radius:var(--radius-media);display:grid;gap:16px;align-content:start;border:1px solid var(--border)}
.porta .say blockquote{margin:0;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.4}
.porta .say .no blockquote{color:var(--muted-foreground);text-decoration:line-through;text-decoration-thickness:1px}


.porta .comps{display:grid;gap:24px}
@media (min-width:900px){.porta .comps{grid-template-columns:repeat(2,minmax(0,1fr))}.porta .comps .wide{grid-column:1/-1}}
.porta .comp{display:grid;gap:12px}
.porta .comp > div:first-child{border-radius:var(--radius-media);padding:32px;min-height:200px;display:grid;align-content:center;border:1px solid var(--border)}

.porta .v-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:8px}
.porta .v-nav .mark svg{width:104px;height:auto;display:block}
.porta .v-nav ul{display:flex;gap:32px;font-size:1rem}
@media (max-width:900px){.porta .v-nav ul{display:none}}
.porta .v-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:10px;background:var(--highlight);color:var(--highlight-foreground);font-size:.875rem;font-weight:500;text-decoration:none;white-space:nowrap;border:0;font-family:inherit}
.porta .v-btn.quiet{background:transparent;color:var(--foreground);padding:0;height:auto;font-weight:300;font-size:1rem;text-decoration:underline;text-underline-offset:.25em;text-decoration-color:var(--foreground-soft)}
.porta .v-btns{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.porta .v-acc > div{border-bottom:1px solid var(--line)}
.porta .v-acc > div:last-child{border-bottom:0}
.porta .v-acc .h{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;font-size:1.125rem}
.porta .v-acc .h svg{width:20px;height:20px;flex:none;color:var(--highlight)}
.porta .v-acc .b{font-size:.875rem;line-height:1.6;color:var(--foreground-soft);padding-bottom:24px;max-width:48ch}
.porta .v-jobs a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-block:16px;border-bottom:1px solid var(--line);text-decoration:none;font-size:1.125rem}
.porta .v-jobs a:last-child{border-bottom:0}
.porta .v-jobs svg{width:.85em;height:.85em;display:inline;margin-left:.5em;opacity:.4;vertical-align:-.05em}
.porta .v-jobs span:last-child{font-size:.875rem;color:var(--foreground-soft);flex:none;text-align:right}
.porta .v-form{display:grid;gap:12px;max-width:440px}
.porta .v-form .f{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px}
.porta .v-form input{flex:1;background:transparent;border:0;outline:0;font:inherit;color:inherit;font-size:1rem;min-width:0}
.porta .v-form input::placeholder{color:var(--foreground-soft)}
.porta .v-fig{display:grid;gap:12px}
.porta .v-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px}
.porta .v-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (min-width:700px){.porta .v-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.porta .v-stats div{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.porta .v-stats .n{font-size:2.75rem;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.porta .v-card{display:grid;gap:12px;text-decoration:none}
.porta .v-card img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:24px}
.porta .v-card .p-t{font-size:1.25rem;line-height:1.3}
.porta .v-cards{display:grid;gap:24px}
@media (min-width:700px){.porta .v-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta .v-tags{display:flex;gap:8px;flex-wrap:wrap}
.porta .v-tags span{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:.875rem}
.porta .v-tags span.p-on{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
.porta .v-statement{display:grid;gap:20px;max-width:24ch}
.porta .v-statement .display{font-size:clamp(1.75rem,3.6vw,2.75rem)}


.porta .pats{display:grid;gap:24px}
.porta .pat{display:grid;gap:12px}
.porta .pat > div:first-child{border-radius:var(--radius-media);overflow:hidden;border:1px solid var(--border)}
.porta .sec{padding:clamp(40px,6vw,96px) clamp(20px,4vw,48px);display:grid;gap:48px}
.porta .sec.split{grid-template-columns:1fr}
@media (min-width:900px){.porta .sec.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:96px;align-items:center}}
.porta .sec .text{display:grid;gap:20px;max-width:48ch}
.porta .sec .text .display{font-size:clamp(1.75rem,3.4vw,2.75rem)}
.porta .p-hero{position:relative;min-height:clamp(420px,52vw,640px);display:flex;flex-direction:column;justify-content:space-between;color:#e8e8ce;padding:clamp(20px,3vw,32px) clamp(20px,4vw,48px)}
.porta .p-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.porta .p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0/.6),transparent 60%)}
.porta .p-hero > *{position:relative;z-index:1}
.porta .p-hero .v-nav{--highlight:#e8e8ce;--highlight-foreground:#2a2122;color:#e8e8ce}
.porta .p-hero .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.porta .p-hero .display{max-width:14ch;color:#e8e8ce;font-size:clamp(2rem,4.5vw,3.5rem)}
.porta .p-hero .p-label{color:#e8e8ce;opacity:.8;max-width:36ch;text-align:right}
.porta .miles{display:grid;gap:32px 24px}
@media (min-width:700px){.porta .miles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.porta .miles div{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:10px;align-content:start}
.porta .miles .heading{font-size:1.5rem}
.porta .team{display:grid;gap:24px}
@media (min-width:700px){.porta .team{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta .team figure{display:grid;gap:12px}
.porta .team img{aspect-ratio:1;object-fit:cover;object-position:50% 20%;width:100%;border-radius:24px}
.porta .team figcaption{display:grid;gap:2px}
.porta .team figcaption p:first-child{font-size:1.125rem}
.porta .v-footer{display:grid;gap:40px}
@media (min-width:900px){.porta .v-footer{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr)}}
.porta .v-footer .display{font-size:clamp(1.5rem,2.6vw,2rem);max-width:18ch}
.porta .v-footer ul{display:grid;gap:8px}
.porta .v-footer .fine{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}


.porta .pages{display:grid;gap:24px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.porta .pages{grid-template-columns:repeat(5,minmax(0,1fr))}}
.porta .page{display:grid;gap:12px;min-width:0}
.porta .page .frame{border-radius:12px;overflow:hidden;border:1px solid var(--border);container-type:inline-size}
.porta .page .inner{width:1200px;zoom:.2;transform-origin:0 0}
.porta .page .inner .sec{padding:96px 48px}
.porta .page .inner .p-hero{min-height:720px;padding:32px 48px}
.porta .page .inner .p-hero .display{font-size:3.5rem}
.porta .page .inner .sec.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:96px;align-items:center}
.porta .page .inner .v-nav ul{display:flex}
.porta .page .inner .miles,.porta .page .inner .team,.porta .page .inner .v-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.porta .page .inner .miles{grid-template-columns:repeat(4,minmax(0,1fr))}
.porta .page .inner .v-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.porta .page .inner .v-footer{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr)}
.porta .page .inner .text .display{font-size:2.75rem}
@supports not (zoom:1){.porta .page .inner{transform:scale(.2);width:1200px;height:auto}}


.porta .cov{display:grid;gap:32px;border-top:1px solid var(--border);padding-top:32px}
@media (min-width:700px){.porta .cov{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta .cov > div{display:grid;gap:16px;align-content:start}
.porta .cov ul{display:grid;gap:8px;color:var(--foreground-soft)}
.porta .cov > div:nth-child(3) ul{color:var(--muted-foreground)}

.porta footer{border-top:1px solid var(--border);padding-block:24px 48px;display:grid;gap:8px}


@media (max-width:700px){
  .porta .cover{aspect-ratio:4/5;min-height:0}
  .porta .cover .p-foot{flex-direction:column;align-items:flex-start}
  .porta .cover .p-in .display{font-size:1.75rem}
}
.porta .comp .v-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.porta .comp .v-stats .n{font-size:2.25rem}
@media (max-width:700px){.porta .comp .v-stats{grid-template-columns:1fr}.porta .v-stats .n{font-size:2.25rem}}
.porta .v-form input{width:0}
.porta .band,.porta .bands{min-width:0}
@media (max-width:700px){.porta .band{aspect-ratio:auto;min-height:180px}}


.porta .p-ic{display:inline-block;line-height:0;flex:none}
.porta .p-ic svg{width:100%;height:100%;display:block}
.porta .iconset{display:flex;flex-wrap:wrap;gap:24px 16px}
.porta .iconset li{display:grid;gap:10px;justify-items:center;width:84px}
.porta .iconset li .p-label{font-size:.5625rem;text-align:center;text-transform:none;letter-spacing:.02em;overflow-wrap:anywhere}
.porta .five{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.porta .five{grid-template-columns:repeat(5,minmax(0,1fr))}}
.porta .five figure{border-radius:var(--radius-media);border:1px solid var(--border);padding:24px;display:grid;gap:24px;align-content:start}
.porta .five .p-ic.big{width:96px;height:96px;margin:8px auto 0}
.porta .five figcaption{display:grid;gap:6px}
.porta .five figcaption p:first-child{font-size:1.125rem}
.porta .construct{display:grid;gap:32px}
@media (min-width:900px){.porta .construct{grid-template-columns:320px minmax(0,1fr);align-items:center;column-gap:64px}}
.porta .construct svg{width:100%;height:auto;display:block;max-width:320px}
.porta .sizes{display:grid;gap:20px}
.porta .sizes div{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.porta .sizes .p-label{width:32px}
.porta .inuse{display:grid;gap:24px}
@media (min-width:900px){.porta .inuse{grid-template-columns:repeat(2,minmax(0,1fr))}}
.porta .inuse > div{border-radius:var(--radius-media);padding:32px;border:1px solid var(--border);display:grid;align-content:center}
.porta .v-acc .h .p-t{display:flex;align-items:center;gap:16px}
.porta .states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 12px}
@media (min-width:700px){.porta .states{grid-template-columns:repeat(7,minmax(0,1fr))}}
.porta .states div{display:grid;gap:12px;justify-items:center;text-align:center}
.porta .states .p-label{font-size:.5625rem}
.porta .code{font-family:var(--font-mono);font-size:.75rem;line-height:1.6;background:var(--muted);padding:16px 20px;border-radius:var(--radius-control);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;color:var(--foreground)}
.porta .files{display:grid;gap:16px}
@media (min-width:900px){.porta .files{grid-template-columns:repeat(2,minmax(0,1fr))}}
.porta .files > div{display:grid;gap:12px;min-width:0;align-content:start}


.porta .parts-cap{margin-top:var(--space-block)}
.porta .parts{display:flex;gap:32px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);margin-top:16px;position:sticky;top:0;z-index:3;background:var(--background);box-shadow:0 0 0 100vmax var(--background);clip-path:inset(0 -100vmax)}
.porta .parts > *{padding:14px 0 16px;text-decoration:none;color:var(--muted-foreground);font-size:1.125rem;white-space:nowrap}
.porta .parts > .p-on{color:var(--foreground);box-shadow:inset 0 -2px 0 var(--foreground)}
.porta .parts > a:hover{color:var(--foreground)}
.porta .agent{scroll-margin-top:64px}


.porta .flow{width:100%;height:auto;display:block;max-width:960px}
.porta .flow text{font-size:14px}
.porta .flow text.soft{fill:var(--muted-foreground);font-size:11px}
.porta .filecards{display:grid;gap:16px}
@media (min-width:700px){.porta .filecards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.porta .filecards{grid-template-columns:repeat(5,minmax(0,1fr))}}
.porta .filecards > div{display:grid;gap:12px;align-content:start;min-width:0}
.porta .filecards .code{font-size:.6875rem;min-height:120px}
.porta .flags{display:flex;gap:6px;flex-wrap:wrap}
.porta .flags span{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.04em;padding:3px 8px;border-radius:999px;border:1px dashed var(--muted-foreground);color:var(--muted-foreground)}
.porta .say .no blockquote{text-decoration:none;color:var(--foreground-soft)}
.porta .say blockquote{font-size:clamp(1rem,1.3vw,1.125rem)}
.porta .flow-wrap{overflow-x:auto;scrollbar-width:none}
@media (max-width:700px){.porta .flow{min-width:720px}}
.porta .parts-cap{margin-bottom:16px}
.porta .filecards > div{border-top:1px solid var(--border);padding-top:12px}
.porta .filecards .p-label{text-transform:none;letter-spacing:.02em}


.porta .agent{padding-block:var(--space-section);display:grid;gap:var(--space-stack)}
.porta .agent > *{min-width:0}
.porta .agent > .display{font-size:clamp(4rem,10vw,6rem);line-height:1;letter-spacing:-.03em}
.porta .agent > .p-label:first-child{color:var(--foreground);font-size:.875rem}
.porta .agent .lead{margin-bottom:var(--space-block)}
.porta .lines{display:grid;border-top:1px solid var(--border)}
.porta .lines > div{display:grid;gap:8px 48px;padding-block:28px;border-bottom:1px solid var(--border);align-items:baseline}
@media (min-width:700px){.porta .lines > div{grid-template-columns:160px minmax(0,1fr)}}
.porta .lines dd{margin:0;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.porta .how{margin-top:var(--space-block);max-width:60ch;color:var(--foreground-soft)}
.porta .loop{width:100%;max-width:960px;height:auto;display:block;margin-top:8px}
.porta .loop text{font-size:12px}
.porta .loop text.soft{fill:var(--muted-foreground);font-size:10px}
@media (max-width:700px){.porta .loop{min-width:640px}}
.porta .agent .note{margin-top:var(--space-block)}
.porta .loopgrid{display:grid;gap:40px;align-items:center;margin-top:var(--space-stack)}
@media (min-width:800px){.porta .loopgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.porta .ring{width:100%;max-width:480px;height:auto;display:block}
.porta .ring text{font-size:13px}
.porta .filelist{display:grid}
.porta .filelist li{display:grid;gap:4px;padding-block:14px;border-top:1px solid var(--border)}
.porta .filelist li:last-child{border-bottom:1px solid var(--border)}
.porta .filelist .p-label{text-transform:none;letter-spacing:.02em}


.porta .swatchbar{display:flex;height:48px;border-radius:var(--radius-control);overflow:hidden;gap:0;max-width:720px}
.porta .swatchbar i{flex:1;display:block}
.porta .swatchbar i.cream{flex:0 0 72px;margin-left:8px;border-radius:var(--radius-control)}
.porta .typeline{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;font-weight:300;line-height:1}
.porta .bars{display:grid;gap:10px}
.porta .bar{display:flex;align-items:center;gap:12px}
.porta .bar i{display:block;height:10px;background:var(--foreground)}
.porta .iconline{display:flex;flex-wrap:wrap;gap:16px;max-width:720px}
.porta .iconline .p-ic{width:24px;height:24px}
.porta .layers{display:grid}
.porta .layers li{display:grid;gap:4px 32px;padding-block:14px;border-top:1px solid var(--border)}
.porta .layers li:last-child{border-bottom:1px solid var(--border)}
@media (min-width:800px){.porta .layers li{grid-template-columns:140px minmax(0,2fr) minmax(0,1fr);align-items:baseline}}
.porta .layers .name{font-size:1.125rem}
.porta .layers .status{color:var(--foreground)}
.porta .lines dd:has(.layers),.porta .lines dd:has(.swatchbar),.porta .lines dd:has(.bars),.porta .lines dd:has(.iconline){font-size:1rem;line-height:1.5;letter-spacing:0}
.porta .layers li:first-child{border-top:0;padding-top:4px}
.porta .layers li:last-child{border-bottom:0;padding-bottom:4px}
.porta .iconsys{display:grid;gap:20px}
.porta .iconsys .p-ic.big{width:40px;height:40px}
.porta .iconsys .iconline{gap:20px}
.porta .steps{display:grid;max-width:760px}
.porta .steps li{display:grid;gap:4px 24px;padding-block:18px;border-bottom:1px solid var(--border)}
@media (min-width:700px){.porta .steps li{grid-template-columns:40px 160px minmax(0,1fr);align-items:baseline}}
.porta .steps .name{font-size:1.125rem}
.porta .today{display:grid;gap:24px;margin-top:var(--space-block);max-width:760px}
@media (min-width:700px){.porta .today{grid-template-columns:repeat(2,minmax(0,1fr))}}
.porta .today div{display:grid;gap:8px}
.porta .today dd{margin:0}
.porta .lines dd{display:grid;gap:14px}
.porta .base{font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.2;letter-spacing:-.01em}
.porta .curve{width:160px;height:80px;display:block}
.porta .lines dd:has(.base),.porta .lines dd:has(.curve){font-size:1rem;line-height:1.5;letter-spacing:0}
.porta .lines dd .small{letter-spacing:0;line-height:1.5}


.porta .showcase{margin-top:var(--space-block);display:grid;gap:40px}
.porta .showcase.paper{}
.porta .show-big{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap}
.porta .show-big .p-ic{width:clamp(56px,8vw,96px);height:clamp(56px,8vw,96px)}
.porta .show-grid{display:grid;gap:32px}
@media (min-width:800px){.porta .show-grid{grid-template-columns:240px minmax(0,1fr);align-items:center;column-gap:64px}}
.porta .construct{width:100%;max-width:240px;height:auto;display:block}
.porta .show-mixed{display:flex;gap:16px;flex-wrap:wrap}
.porta .show-mixed .p-ic{width:24px;height:24px}
.porta .showcase .rules{color:var(--foreground-soft)}
.porta .showcase .rules li::before{background:var(--muted-foreground)}
.porta .show-big figure{display:grid;gap:14px;justify-items:center}


.porta .glimpse{margin-top:var(--space-section);display:grid;gap:var(--space-block)}
.porta .g-row{display:grid;gap:20px;padding-top:24px;border-top:1px solid var(--border)}
.porta .comp-grid{display:grid;gap:16px}
@media (min-width:800px){.porta .comp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.porta .comp-grid > div{border-radius:var(--radius-media);padding:32px;min-height:220px;display:grid;align-content:center;gap:24px}
.porta .v-btn{transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease)}
.porta .v-btn:hover{opacity:.9}
.porta .v-btn:active{transform:scale(.98)}
.porta .v-btn .slide{width:1em;height:1em;margin-left:.4em;transition:transform var(--duration) var(--ease)}
.porta .v-btn:hover .slide{transform:translate(2px,-2px)}
.porta .v-acc.live .h{all:unset;box-sizing:border-box;display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;font-size:1.125rem;cursor:pointer}
.porta .v-acc.live .h:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.porta .v-acc.live .pm{display:inline-grid;width:20px;height:20px;color:var(--highlight)}
.porta .v-acc.live .pm svg{grid-area:1/1;width:20px;height:20px;transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease)}
.porta .v-acc.live .minus{opacity:0;transform:rotate(-90deg)}
.porta .v-acc.live .item.p-open .plus{opacity:0;transform:rotate(90deg)}
.porta .v-acc.live .item.p-open .minus{opacity:1;transform:none}
.porta .v-acc.live .b{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration) var(--ease)}
.porta .v-acc.live .item.p-open .b{grid-template-rows:1fr}
.porta .v-acc.live .bi{overflow:hidden}
.porta .v-acc.live .bi p{font-size:.875rem;line-height:1.6;color:var(--foreground-soft);padding-bottom:24px;max-width:48ch;margin:0}
.porta .v-jobs a{cursor:pointer}
.porta .v-jobs a svg{opacity:0;transition:opacity var(--duration) var(--ease)}
.porta .v-jobs a:hover svg{opacity:1}
.porta .v-jobs a:hover{color:var(--foreground-soft)}
.porta .v-form .f{transition:border-color var(--duration) var(--ease)}
.porta .v-form .f:focus-within{border-color:var(--foreground)}
.porta .v-tags.live button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:.875rem;cursor:pointer;transition:background var(--duration) var(--ease),color var(--duration) var(--ease)}
.porta .v-tags.live button.p-on{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
.porta .pages{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.porta .pages{grid-template-columns:1fr}}
.porta .social-grid{display:grid;gap:24px;align-items:end}
@media (min-width:800px){.porta .social-grid{grid-template-columns:5fr 3fr 2fr}}
.porta .social{display:grid;gap:12px}
.porta .social .frame{position:relative;border-radius:var(--radius-control);overflow:hidden;background:#2a2122;color:#e8e8ce;container-type:inline-size}
.porta .social.linkedin .frame{aspect-ratio:1.91}
.porta .social.square .frame{aspect-ratio:1}
.porta .social.story .frame{aspect-ratio:9/16}
.porta .social img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.porta .social .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0/.55),transparent 60%)}
.porta .social .p-in{position:absolute;inset:0;padding:6cqw;display:flex;flex-direction:column;justify-content:space-between;z-index:1}
.porta .social .mark{width:7cqw;display:block}
.porta .social .mark svg{width:100%;height:auto;display:block}
.porta .social .line{font-size:6.5cqw;line-height:1.1;letter-spacing:-.02em;font-weight:300;max-width:14ch;text-wrap:balance;margin:0}
.porta .social .cap{font-family:var(--font-mono);font-size:2.6cqw;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin:1.5cqw 0 0}
.porta .social.story .line{font-size:9cqw}
.porta .social.story .cap{font-size:4cqw}
.porta .social.story .mark{width:12cqw}
.porta .pages{grid-template-columns:repeat(auto-fill,240px);gap:32px 40px}
@media (max-width:700px){.porta .pages{grid-template-columns:repeat(auto-fill,240px)}}
.porta .page{align-self:start}


.porta .wire{width:100%;height:auto;display:block;color:var(--foreground)}
.porta .wire text{font-family:var(--font-mono);letter-spacing:.06em}
.porta .wires{display:grid;gap:24px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.porta .wires{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta .wires figure,.porta .surfaces figure,.porta .stacks figure,.porta .three figure{display:grid;gap:10px;margin:0}
.porta .g-two{display:grid;gap:32px}
@media (min-width:900px){.porta .g-two{grid-template-columns:320px minmax(0,1fr);align-items:center;column-gap:64px}}
.porta .g-two .wire{max-width:320px}
.porta .surfaces{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.porta .surfaces figure{flex:0 0 auto}
.porta .surfaces .wire{height:150px;width:auto}
@media (max-width:700px){.porta .surfaces .wire{height:110px}}
.porta .stacks{display:grid;gap:24px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.porta .stacks{grid-template-columns:repeat(4,160px)}}
.porta .stacks .wire{max-width:160px}
.porta .three{display:grid;gap:24px}
@media (min-width:900px){.porta .three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta .three .code{font-size:.6875rem;min-height:0}


.porta .gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 0 16px;margin-inline:calc(-1 * clamp(16px,4vw,48px));padding-inline:clamp(16px,4vw,48px);outline:none}
.porta .gallery::-webkit-scrollbar{display:none}
.porta .p-tile{all:unset;box-sizing:border-box;position:relative;flex:0 0 auto;height:260px;scroll-snap-align:start;cursor:zoom-in;display:grid;align-content:center;color:var(--foreground)}
.porta .p-tile > .wire{height:100%;width:auto;max-width:none}
.porta .p-tile > .wire.tall{height:100%}
.porta .p-tile > .code{height:100%;width:300px;overflow:hidden;font-size:.6875rem;display:grid;align-content:center}
.porta .p-tile > .p-label{position:absolute;left:0;bottom:-18px;opacity:0;transition:opacity var(--duration) var(--ease)}
.porta .p-tile:hover > .p-label,.porta .p-tile:focus-visible > .p-label{opacity:1}
.porta .p-tile:focus-visible{outline:2px solid var(--foreground);outline-offset:6px}
@media (max-width:700px){.porta .p-tile{height:200px}.porta .p-tile > .code{width:240px}}
.porta dialog.light{border:0;padding:clamp(20px,4vw,48px);background:var(--background);color:var(--foreground);max-width:min(1100px,92vw);width:auto;border-radius:var(--radius-media)}
.porta dialog.light::backdrop{background:rgb(0 0 0/.55)}
.porta dialog.light .big .wire{width:min(1000px,86vw);height:auto;max-width:none}
.porta dialog.light .big .wire.tall{width:auto;height:min(80vh,900px)}
.porta dialog.light .big .code{width:min(700px,86vw);font-size:.875rem}
.porta dialog.light .cap{margin-top:16px}
.porta dialog.light .close{all:unset;position:absolute;top:16px;right:16px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--foreground)}
.porta dialog.light .close svg{width:20px;height:20px}
.porta .p-tile{display:block}
.porta .p-tile > .wire{height:260px;width:auto;max-width:none;display:block}
@media (max-width:700px){.porta .p-tile > .wire{height:200px}}


.porta .g-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.porta .marquee{overflow:hidden;margin-inline:calc(-1 * clamp(16px,4vw,48px));padding-block:10px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.porta .p-track{display:flex;width:max-content;animation:drift var(--t) linear infinite}
.porta .p-track .half{display:flex;gap:16px;margin-right:16px}
.porta .marquee:hover .p-track,.porta .marquee:focus-within .p-track{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.porta .p-track{animation:none}.porta .marquee{overflow-x:auto}}
.porta .marquee .p-tile{height:150px}
.porta .marquee .p-tile > .wire{height:150px}
.porta .marquee .p-tile > .code{height:150px;width:260px;font-size:.5625rem}
.porta .marquee .p-tile > .p-label{bottom:6px;left:10px;font-size:.5625rem}
@media (max-width:700px){.porta .marquee .p-tile,.porta .marquee .p-tile > .wire,.porta .marquee .p-tile > .code{height:120px}}


.porta .lv{height:150px;width:240px;border:1px solid rgb(from currentColor r g b / .45);border-radius:8px;display:grid;place-items:center;box-sizing:border-box;position:relative;overflow:hidden}
.porta .lv b{display:block;height:6px;width:90px;border-radius:3px;background:currentColor}
.porta .lv b.s{height:3px;width:60px;opacity:.45;margin-top:8px}
.porta .lv i{display:block}
.porta .lv .pill{display:inline-flex;align-items:center;gap:10px;height:30px;padding:0 16px;border-radius:15px;border:1px solid currentColor;transition:background var(--duration) var(--ease),color var(--duration) var(--ease)}
.porta .lv .pill b{width:44px;height:5px}
.porta .lv .pill svg{width:14px;height:14px;transition:transform var(--duration) var(--ease)}
.porta .p-tile:hover .lv.arrow svg{transform:translate(2px,-2px)}
.porta .p-tile:hover .lv.fill .pill{background:currentColor}
.porta .p-tile:hover .lv.fill .pill b{background:var(--background)}
.porta .lv.lift .lv-card{width:150px;height:96px;border:1px solid rgb(from currentColor r g b / .45);border-radius:10px;padding:14px;box-sizing:border-box;transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.porta .lv.lift .p-m{height:36px;border-radius:6px;background:rgb(from currentColor r g b / .14);margin-bottom:12px}
.porta .lv.lift .lv-card b{width:70px}
.porta .p-tile:hover .lv.lift .lv-card{transform:translateY(-4px);border-color:currentColor}
.porta .lv.under{display:grid;place-content:center;justify-items:start}
.porta .lv.under .u{display:block;height:1.5px;width:0;background:currentColor;margin-top:6px;transition:width var(--duration) var(--ease)}
.porta .p-tile:hover .lv.under .u{width:90px}
.porta .lv.reveal .lv-media{width:170px;height:100px;border-radius:8px;background:rgb(from currentColor r g b / .14);position:relative;overflow:hidden}
.porta .lv.reveal .cap{position:absolute;left:0;right:0;bottom:0;padding:12px;background:currentColor;transform:translateY(100%);transition:transform var(--duration) var(--ease)}
.porta .lv.reveal .cap b{background:var(--background);width:60px;height:4px}
.porta .p-tile:hover .lv.reveal .cap{transform:none}
.porta .lv.p-open{display:block;padding:28px 30px}
.porta .lv.p-open .row{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid rgb(from currentColor r g b / .45)}
.porta .lv.p-open .pm{position:relative;width:12px;height:12px}
.porta .lv.p-open .pm i{position:absolute;inset:0;margin:auto;background:currentColor;width:12px;height:1.5px;transition:transform var(--duration) var(--ease)}
.porta .lv.p-open .pm i:last-child{transform:rotate(90deg)}
.porta .p-tile:hover .lv.p-open .pm i:last-child{transform:rotate(0)}
.porta .lv.p-open .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration) var(--ease)}
.porta .lv.p-open .body > div{overflow:hidden;min-height:0}
.porta .p-tile:hover .lv.p-open .body{grid-template-rows:1fr}
.porta .lv.p-open .body b.s{margin-top:10px;width:150px}
@media (max-width:700px){.porta .lv{height:120px;width:192px;transform-origin:0 0}}
.porta .marquee .p-tile{all:unset;display:grid;gap:10px;height:auto;cursor:default}
.porta .marquee .p-tile > .p-label{position:static;opacity:1;font-size:.5625rem;bottom:auto;left:auto}
.porta .marquee .p-track .half{align-items:start}
.porta .marquee .p-tile > .wire,.porta .marquee .p-tile > .code,.porta .marquee .lv{height:240px}
.porta .marquee .p-tile > .code{width:380px;font-size:.75rem}
.porta .marquee .lv{width:380px}
.porta .marquee .lv .pill{height:40px;padding:0 22px;border-radius:20px}
.porta .marquee .lv.lift .lv-card{width:220px;height:140px}
.porta .marquee .lv.reveal .lv-media{width:260px;height:150px}
.porta .marquee .p-tile > .p-label{font-size:var(--text-label)}
.porta .marquee:nth-of-type(4) .p-tile > .wire,.porta .marquee:nth-of-type(4) .p-tile > .code{height:200px}
@media (max-width:700px){.porta .marquee .p-tile > .wire,.porta .marquee .p-tile > .code,.porta .marquee .lv{height:170px}.porta .marquee .lv{width:270px}.porta .marquee .p-tile > .code{width:270px;font-size:.625rem}}


.porta .cmp{width:380px;height:240px;border-radius:var(--radius-media);padding:32px;display:grid;place-items:center;box-sizing:border-box;font-size:1rem;line-height:1.5;letter-spacing:0;font-weight:300}
.porta .cmp.paper{--border:#d8d1c1}
.porta .cmp.ink{--border:#453b3c}
.porta .cmp .p-label{font-size:var(--text-label)}
.porta .c-btns{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.porta .c-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;background:var(--highlight);color:var(--highlight-foreground);font-size:.9375rem;font-weight:500;cursor:pointer;transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease)}
.porta .c-btn:hover{opacity:.9}.porta .c-btn:active{transform:scale(.98)}
.porta .c-btn svg{width:16px;height:16px;transition:transform var(--duration) var(--ease)}
.porta .c-btn:hover svg{transform:translate(2px,-2px)}
.porta .c-btn.quiet{background:transparent;color:var(--foreground);padding:0;height:auto;font-weight:300;font-size:1rem;text-decoration:underline;text-underline-offset:.25em;text-decoration-color:var(--line);transition:text-decoration-color var(--duration) var(--ease)}
.porta .c-btn.quiet:hover{text-decoration-color:var(--foreground);opacity:1}
.porta .c-btn.small{height:32px;padding:0 12px;font-size:.8125rem}
.porta .c-field{display:grid;gap:8px;width:260px}
.porta .c-field input,.porta .c-select{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 0 10px;font:inherit;color:inherit;outline:0;transition:border-color var(--duration) var(--ease)}
.porta .c-field input:focus{border-color:var(--foreground)}
.porta .c-field input::placeholder{color:var(--foreground-soft)}
.porta .c-select{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.porta .c-select svg{width:18px;height:18px;transition:transform var(--duration) var(--ease)}
.porta .c-select:hover svg{transform:translateY(2px)}
.porta .c-acc{width:100%;display:grid}
.porta .c-acc .i{border-bottom:1px solid var(--line)}
.porta .c-acc .i:last-child{border-bottom:0}
.porta .c-acc .h{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:12px;font-size:1.0625rem;cursor:pointer}
.porta .c-acc .h svg{width:18px;height:18px;color:var(--highlight);transition:transform var(--duration) var(--ease)}
.porta .c-acc .b{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration) var(--ease)}
.porta .c-acc .b > div{overflow:hidden;min-height:0}
.porta .c-acc .b p{margin:0;padding-bottom:14px;font-size:.875rem;color:var(--foreground-soft)}
.porta .c-acc .i.p-open .b,.porta .c-acc .i:hover .b{grid-template-rows:1fr}
.porta .c-acc .i.p-open .h svg,.porta .c-acc .i:hover .h svg{transform:rotate(45deg)}
.porta .c-acc .i.p-open:has(~ .i:hover) .b{grid-template-rows:0fr}
.porta .c-acc .i.p-open:has(~ .i:hover) .h svg{transform:none}
.porta .c-card{display:grid;gap:8px;width:220px;text-decoration:none;color:inherit;cursor:pointer;transition:transform var(--duration) var(--ease)}
.porta .c-card .p-m{height:110px;border-radius:16px;background:var(--muted);transition:transform var(--duration) var(--ease)}
.porta .c-card p{margin:0;font-size:1.0625rem}
.porta .c-card:hover{transform:translateY(-3px)}
.porta .c-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.porta .c-tags button,.porta .c-pages button,.porta .c-tabs button{all:unset;cursor:pointer;font:inherit;box-sizing:border-box}
.porta .c-tags button{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:.875rem;transition:background var(--duration) var(--ease),color var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.porta .c-tags button:hover{border-color:var(--foreground)}
.porta .c-tags button.p-on{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
.porta .c-table{border-collapse:collapse;width:100%;font-size:.9375rem}
.porta .c-table th{text-align:left;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--text-label--letter-spacing);text-transform:uppercase;font-weight:400;color:var(--muted-foreground);padding:0 0 10px}
.porta .c-table td{padding:10px 0;border-top:1px solid var(--line);transition:color var(--duration) var(--ease)}
.porta .c-table tbody tr{cursor:pointer}
.porta .c-table tbody tr:hover td{color:var(--foreground-soft)}
.porta .c-dialog{display:grid;gap:8px;width:100%}
.porta .c-dialog .p-t{margin:0;font-size:1.25rem}
.porta .c-dialog .s{margin:0 0 12px;color:var(--foreground-soft);font-size:.9375rem}
.porta .c-dialog .c-btns{justify-content:flex-start}
.porta .c-toast{display:flex;align-items:center;gap:24px;padding:12px 12px 12px 18px;border-radius:12px;background:var(--foreground);color:var(--background)}
.porta .c-toast .c-btn{background:var(--background);color:var(--foreground)}
.porta .c-pages{display:flex;gap:6px}
.porta .c-pages button{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;font-size:.9375rem;transition:background var(--duration) var(--ease)}
.porta .c-pages button:hover{background:var(--muted)}
.porta .c-pages button.p-on{background:var(--foreground);color:var(--background)}
.porta .c-tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);width:100%}
.porta .c-tabs button{padding:0 0 12px;margin-bottom:-1px;border-bottom:1px solid transparent;color:var(--foreground-soft);transition:color var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.porta .c-tabs button:hover{color:var(--foreground)}
.porta .c-tabs button.p-on{color:var(--foreground);border-bottom-color:var(--foreground)}
.porta .c-crumbs{display:flex;gap:10px;align-items:center;font-size:.9375rem;color:var(--foreground-soft)}
.porta .c-crumbs a{text-decoration:none;cursor:pointer;transition:color var(--duration) var(--ease)}
.porta .c-crumbs a:hover{color:var(--foreground)}
.porta .c-crumbs b{font-weight:300;color:var(--foreground)}
.porta .c-fig{display:grid;gap:10px;width:100%;margin:0}
.porta .c-fig .p-m{height:130px;border-radius:16px;background:var(--muted);transition:transform var(--duration) var(--ease)}
.porta .c-fig:hover .p-m{transform:scale(1.02)}
.porta .c-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%}
.porta .c-stats div{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:4px}
.porta .c-stats .n{margin:0;font-size:2.5rem;line-height:1.1;letter-spacing:-.02em}
.porta .c-quote{margin:0;padding-left:18px;border-left:2px solid var(--line);font-size:1.125rem;display:grid;gap:10px}
.porta .c-switch{display:flex;align-items:center;gap:14px;cursor:pointer}
.porta .c-switch input,.porta .c-checks input{position:absolute;opacity:0;width:0;height:0}
.porta .c-switch .sw-track{width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;transition:background var(--duration) var(--ease)}
.porta .c-switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--background);transition:transform var(--duration) var(--ease)}
.porta .c-switch input:checked + .sw-track{background:var(--foreground)}
.porta .c-switch input:checked + .sw-track .knob{transform:translateX(18px)}
.porta .c-checks{display:grid;gap:12px}
.porta .c-checks label{display:flex;align-items:center;gap:12px;cursor:pointer;position:relative}
.porta .c-checks span{width:18px;height:18px;border-radius:5px;border:1px solid var(--muted-foreground);display:grid;place-items:center;transition:background var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.porta .c-checks span::after{content:"";width:9px;height:5px;border-left:2px solid var(--background);border-bottom:2px solid var(--background);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.porta .c-checks input:checked + span{background:var(--foreground);border-color:var(--foreground)}
.porta .c-checks input:checked + span::after{opacity:1}
.porta .c-search{display:flex;align-items:center;gap:10px;width:260px;border-bottom:1px solid var(--line);padding-bottom:10px;transition:border-color var(--duration) var(--ease)}
.porta .c-search:focus-within{border-color:var(--foreground)}
.porta .c-search svg{width:18px;height:18px;color:var(--muted-foreground)}
.porta .c-search input{flex:1;background:transparent;border:0;outline:0;font:inherit;color:inherit;min-width:0}
.porta .c-progress{width:260px;display:grid;gap:10px}
.porta .c-progress .bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.porta .c-progress .bar i{display:block;height:100%;width:var(--p);background:var(--foreground);transition:width 1s var(--ease)}
.porta .c-progress .meta{display:flex;justify-content:space-between}
.porta .c-steps{display:flex;gap:0;width:100%;justify-content:space-between;position:relative}
.porta .c-steps::before{content:"";position:absolute;left:10px;right:10px;top:9px;height:1px;background:var(--line)}
.porta .c-steps li{display:grid;gap:10px;justify-items:center;position:relative}
.porta .c-steps i{display:block;width:18px;height:18px;border-radius:50%;border:1px solid var(--muted-foreground);background:var(--background);box-sizing:border-box}
.porta .c-steps .done i{background:var(--foreground);border-color:var(--foreground)}
.porta .c-steps .now i{border-color:var(--foreground);border-width:2px}
.porta .c-empty{display:grid;gap:14px;justify-items:center;text-align:center;padding:24px;border:1px dashed var(--muted-foreground);border-radius:16px;width:100%}
.porta .c-empty p{margin:0;color:var(--foreground-soft)}
.porta .c-tip{position:relative;display:grid;justify-items:center}
.porta .c-tip .p-tip{position:absolute;bottom:calc(100% + 10px);padding:6px 10px;border-radius:8px;background:var(--foreground);color:var(--background);font-size:.8125rem;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease);pointer-events:none}
.porta .c-tip:hover .p-tip{opacity:1;transform:none}
.porta .c-avatars{display:flex}
.porta .c-avatars span{width:44px;height:44px;border-radius:50%;background:var(--muted);border:2px solid var(--background);margin-left:-10px;display:grid;place-items:center;font-size:.8125rem;transition:transform var(--duration) var(--ease)}
.porta .c-avatars span:first-child{margin-left:0}
.porta .c-avatars span:hover{transform:translateY(-3px)}
.porta .c-avatars .more{background:var(--foreground);color:var(--background)}
.porta .c-skel{width:220px;display:grid;gap:10px}
.porta .c-skel .p-m,.porta .c-skel i{display:block;border-radius:12px;background:linear-gradient(90deg,var(--muted) 30%,color-mix(in srgb,var(--muted),var(--background) 55%) 50%,var(--muted) 70%);background-size:200% 100%;animation:shimmer 1.6s linear infinite}
.porta .c-skel .p-m{height:100px}.porta .c-skel i{height:10px;border-radius:5px}.porta .c-skel i.s{width:60%}
@keyframes shimmer{to{background-position:-200% 0}}
.porta .c-sheet{width:100%;display:grid;gap:4px}
.porta .c-sheet .top{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.porta .c-sheet .top svg{width:18px;height:18px}
.porta .c-sheet a{padding:8px 0;font-size:1.25rem;cursor:pointer;transition:color var(--duration) var(--ease)}
.porta .c-sheet a:hover{color:var(--foreground-soft)}
.porta .marquee .p-tile > .cmp{height:240px}
@media (max-width:700px){.porta .marquee .p-tile > .cmp{width:300px;height:200px;padding:24px}}
@media (prefers-reduced-motion:reduce){.porta .c-skel .p-m,.porta .c-skel i{animation:none}}
.porta .c-sheet{align-self:start;gap:0}
.porta .c-sheet .top{padding-bottom:10px;margin-bottom:6px}
.porta .c-sheet a{padding:7px 0;font-size:1.0625rem;line-height:1.3}
.porta .cmp{border:1px solid var(--border)}
.porta .cmp.ink{border-color:#453b3c}
.porta .cmp.paper{border-color:#d8d1c1}
.porta .lines dd{letter-spacing:-.02em}
.porta #hands .lines dd{font-size:clamp(1.25rem,2.2vw,1.75rem)}
.porta .lines dd.links{display:grid;gap:12px;font-size:clamp(1.0625rem,1.5vw,1.25rem);letter-spacing:0;line-height:1.4}
.porta .lines dd.links a{text-decoration:none;color:var(--foreground-soft);transition:color var(--duration) var(--ease)}
.porta .lines dd.links a:hover{color:var(--foreground)}
.porta .lines dd.links a::after{content:" ↗";font-family:var(--font-mono);font-size:.75em;color:var(--muted-foreground)}



.porta .steps{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--border);max-width:960px}
.porta .steps li{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"n name" "n what" "n who";gap:6px 16px;padding:18px 0;border-bottom:1px solid var(--border);align-items:baseline}
.porta .steps .n{grid-area:n;font-family:var(--font-mono);font-size:.75rem;color:var(--muted-foreground);letter-spacing:.04em}
.porta .steps .name{grid-area:name;font-size:1.125rem;color:var(--foreground)}
.porta .steps .what{grid-area:what;color:var(--muted-foreground);font-size:1rem;line-height:1.5;text-wrap:pretty}
.porta .steps .who{grid-area:who;justify-self:start;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);padding:4px 10px;border:1px solid var(--border);border-radius:999px;align-self:center}
@media (min-width:700px){.porta .steps li{grid-template-columns:64px 160px minmax(0,1fr) auto;grid-template-areas:"n name what who";gap:0 24px;padding:22px 0}.porta .steps .who{justify-self:end}}




.porta .shots{display:grid;gap:24px 16px;margin-top:var(--space-block);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media (max-width:480px){.porta .shots{grid-template-columns:1fr}}
@media (min-width:1000px){.porta .shots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta .shot .empty{aspect-ratio:2000/1131;border-radius:var(--radius-media);border:1px dashed var(--muted-foreground);display:grid;place-items:center}
.porta .shot{margin:0;display:grid;gap:10px;min-width:0}
.porta .shot img{display:block;width:100%;height:auto;border-radius:var(--radius-media);aspect-ratio:2000/1131;object-fit:cover}
.porta .shot figcaption{display:grid;gap:4px}
.porta .shot .small{line-height:1.45}
.porta .full{margin-top:16px;max-width:960px}
.porta .full summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);border-radius:999px}
.porta .full summary::-webkit-details-marker{display:none}
.porta .full[open] summary{margin-bottom:12px}
.porta .code.look{max-height:460px;overflow:auto;font-size:.6875rem;line-height:1.55;max-width:960px}

.porta .spec{display:grid;gap:32px 24px;margin-top:20px;max-width:960px;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border);padding-top:24px}
@media (min-width:1000px){.porta .spec{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.porta .spec > div{display:grid;gap:10px;align-content:start;min-width:0}
.porta .spec .big{font-size:1.125rem;letter-spacing:-.01em}
.porta .spec .small{line-height:1.45}
.porta .strip{display:flex;gap:4px;flex-wrap:wrap}
.porta .strip > span{display:grid;gap:4px;justify-items:center}
.porta .strip i{display:block;width:30px;height:30px;border-radius:6px;border:1px solid rgb(from currentColor r g b / .25)}
.porta .strip em{font-style:normal;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.02em;color:var(--muted-foreground)}
.porta .ramp{display:block;height:30px;border-radius:6px;border:1px solid rgb(from currentColor r g b / .25)}



.porta .heart-ring text.soft{fill:var(--muted-foreground);font-size:11px}
.porta .heart-note{align-self:center}

.porta .filecard{margin:var(--space-block) 0 0;display:grid;gap:10px;max-width:720px}
.porta .filecard .code{font-size:.75rem}


.porta .inout-head{display:grid;max-width:960px;gap:0 48px}
.porta .inout-head .out{display:none}
.porta .inout{display:grid;margin:16px 0 0;border-top:1px solid var(--border);max-width:960px}
.porta .inout > div{display:grid;gap:10px 48px;padding-block:24px;border-bottom:1px solid var(--border);align-items:baseline}
.porta .inout dt{color:var(--muted-foreground);font-size:1rem;line-height:1.5;max-width:40ch}
.porta .inout dd{margin:0;font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
@media (min-width:800px){.porta .inout-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.porta .inout-head .out{display:block}.porta .inout > div{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}


.porta .dia-row{display:grid;gap:32px 40px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:800px){.porta .dia-row{grid-template-columns:1fr;max-width:420px}}
.porta .dia-row figure{display:grid;gap:12px}
.porta .dia{width:100%;height:auto;display:block;color:var(--foreground)}
.porta .dia text{font-family:var(--font-mono);letter-spacing:.06em}
@media (max-width:600px){.porta .show-big{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.porta .show-big .p-ic{width:100%;height:auto;aspect-ratio:1}.porta .show-big figcaption{font-size:.5rem}}


.porta .proof{display:grid;gap:40px;margin-top:var(--space-block);max-width:960px}
@media (min-width:900px){.porta .proof{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px}}
.porta .proof figure{display:grid;gap:14px;align-content:start;min-width:0}
.porta .hours{width:100%;height:auto;display:block;color:var(--foreground)}
.porta .hours text{font-family:var(--font-mono);letter-spacing:.08em;fill:var(--muted-foreground)}
.porta .checkgrid{display:grid;grid-template-columns:auto repeat(9,minmax(0,1fr));gap:8px 6px;align-items:center}
.porta .checkgrid > .p-label{font-size:.5625rem;text-align:center}
.porta .checkgrid > .p-label:nth-child(11n+1){text-align:left;padding-right:6px}
.porta .checkgrid i{display:block;aspect-ratio:1;border-radius:4px;border:1px solid var(--border)}
.porta .checkgrid i.ok{background:var(--foreground)}
.porta .checkgrid i.no{background:none;border-color:var(--muted-foreground)}
@media (max-width:600px){.porta .checkgrid{gap:6px 3px}.porta .checkgrid > .p-label{font-size:.5rem}}

.porta .ninety{width:100%;max-width:960px;height:auto;display:block;margin-top:16px;color:var(--foreground)}
@media (max-width:600px){.porta .ninety{display:none}}
.porta .ninety text{font-family:var(--font-mono);letter-spacing:.06em}
.porta .heart-ring{max-width:420px}

.porta .close{margin-top:var(--space-section);font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.22;max-width:22ch;letter-spacing:-.02em}


.porta .agent{background:var(--background);box-shadow:0 0 0 100vmax var(--background);clip-path:inset(0 -100vmax);color:var(--foreground)}
.porta .agent.alt{--background:#2a2122;--foreground:#e8e8ce;--muted:#3a3031;--muted-foreground:#afbfb7;--accent:#3a3031;--border:#453b3c;--foreground-soft:color-mix(in srgb,#e8e8ce 70%,transparent)}
@media (prefers-color-scheme:dark){.porta:not([data-theme="light"]) .agent.alt{--background:#ece7db;--foreground:#2a2122;--muted:#e4dece;--muted-foreground:#66615a;--accent:#e2dccd;--border:#d8d1c1;--foreground-soft:color-mix(in srgb,#2a2122 70%,transparent)}}
.porta[data-theme="dark"] .agent.alt{--background:#ece7db;--foreground:#2a2122;--muted:#e4dece;--muted-foreground:#66615a;--accent:#e2dccd;--border:#d8d1c1;--foreground-soft:color-mix(in srgb,#2a2122 70%,transparent)}

.porta{--cbar:72px}
@media (max-width:767px){.porta{--cbar:68px}}
.porta .parts{top:var(--cbar);clip-path:inset(calc(-1 * var(--cbar)) -100vmax 0 -100vmax)}
.porta .agent{scroll-margin-top:calc(var(--cbar) + 64px)}