/* Purposeful editorial motion, in Deepak's own visual identity. */
.icon-library{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.line-icon{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.role-line{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.2rem;color:var(--blueberry);font-size:.75rem}
.role-line span{padding:.3rem .7rem;border:1px solid #c9dff2;border-radius:30px;background:#ffffff80}
.manifesto{padding:6rem 0 7rem}
.section-kicker{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1.1rem;color:var(--blueberry);font-size:.6875rem;letter-spacing:.1em}
.manifesto h2{font-size:clamp(3rem,7.8vw,7.2rem);font-weight:500;letter-spacing:-.065em;line-height:1.07;margin:3rem 0}
.mask-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mask-line>span{display:block;transform-origin:0 100%;transition:transform 1.15s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--line-index,0)*120ms)}
.mask-line:nth-child(2){--line-index:1}
.editorial-ready [data-editorial]:not(.is-inview) .mask-line>span{transform:translateY(118%) rotate(5deg)}
[data-editorial] em{color:var(--blue);font-style:normal}
.manifesto-bottom{display:flex;justify-content:space-between;gap:2rem;align-items:center}
.manifesto-bottom p{max-width:780px;font-size:clamp(1.1rem,2.2vw,1.8rem);line-height:1.5;letter-spacing:-.025em}
.ink-word{color:var(--navy);opacity:var(--word-ink,1);transition:opacity .16s linear}
.orb-link{display:grid;place-items:center;width:90px;height:90px;border:1px solid #afcce7;border-radius:50%;font-size:2.5rem;color:var(--blue);flex-shrink:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .4s}
.orb-link:hover{transform:rotate(-35deg);background:#eaf5ff}
.editorial-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;margin-bottom:3rem}
.editorial-heading h2,.backend-intro h2,.faq-intro h2{font-size:clamp(2.4rem,4.4vw,4.7rem);font-weight:500;letter-spacing:-.06em;line-height:1.1}
.editorial-heading>.preamble,.editorial-heading>p{max-width:350px;font-size:1rem;line-height:1.7;color:var(--muted);padding-bottom:.4rem}
.capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.capability-card{position:relative;min-height:300px;padding:2rem;border:1px solid #d3e5f5;border-radius:24px;background:linear-gradient(145deg,#fff,#f4faff);transform-origin:50% 100%;transition:transform .75s cubic-bezier(.22,1.2,.36,1),box-shadow .5s,border-color .5s}
.capability-card:nth-child(2n){background:linear-gradient(145deg,#eff7ff,#e4f0fb)}
.capability-card .line-icon{color:var(--blue);margin-bottom:2rem;transition:transform .65s cubic-bezier(.34,1.56,.64,1)}
.card-index{position:absolute;right:2rem;top:2rem;font-size:.75rem;color:#7d9dbd}
.capability-card h3{font-size:1.35rem;letter-spacing:-.04em;font-weight:550;line-height:1.2;margin-bottom:1rem}
.capability-card p{font-size:.9375rem;line-height:1.7;color:var(--muted)}
.mini-label{display:block;color:var(--blueberry);font-size:.625rem;letter-spacing:.1em;font-weight:550}
.capability-card .mini-label{margin-top:1.5rem}
.capability-card:hover{border-color:#8ebee6;box-shadow:0 25px 45px -28px #1557a644}
.capability-card:hover .line-icon{transform:rotate(-12deg) scale(1.15)}
.editorial-ready .capability-card.reveal:not(.is-visible){transform:translate3d(0,70px,0) rotate(4deg);opacity:0}
.project-cover{border:1px solid color-mix(in srgb,currentColor 13%,transparent);border-radius:22px}
.project-cover::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;background:linear-gradient(120deg,transparent 25%,#ffffff0a 50%,transparent 75%);background-size:250% 100%;background-position:100% 0;transition:background-position 1s}
.project-cover:hover::after{background-position:0 0}
.project-cover .cover-top,.project-cover .cover-bottom,.store-wordmark,.docs-wordmark,.mannah-wordmark,.studio-wordmark{position:relative;z-index:2}
.project-scene{position:absolute;left:5%;right:5%;top:22%;bottom:0;z-index:0;opacity:.22;transform:translateZ(8px) translateY(8px) rotate(-5deg);transition:opacity .6s,transform .9s cubic-bezier(.22,1.2,.36,1);pointer-events:none}
.project-scene svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 16px 14px #0000000c)}
.project-scene g{transform-box:fill-box;transform-origin:center;transition:transform .8s cubic-bezier(.22,1.2,.36,1)}
.project-cover:hover .project-scene{opacity:.4;transform:translateZ(24px) translateY(-5px) rotate(0deg)}
.project-cover:hover .scene-back{transform:translate(-10px,-8px) rotate(-5deg)}
.project-cover:hover .scene-mid{transform:translate(0,-4px) rotate(3deg)}
.project-cover:hover .scene-front{transform:translate(12px,-10px) rotate(-3deg)}
.project-cover .cover-top{opacity:.75;letter-spacing:.07em}
.project-cover .cover-bottom{max-width:100%;font-weight:500}
.project-cover .cover-pill{display:none}
.store-wordmark,.docs-wordmark,.mannah-wordmark,.studio-wordmark{text-shadow:0 3px 28px color-mix(in srgb,var(--project-tint) 14%,transparent)}
.guide-section{padding:7rem 0;background:linear-gradient(130deg,#f3f9ff,#eaf5ff 55%,#e2effb)}
.build-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:0 0 1.5rem}
.build-selector button{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1.15rem 1.3rem;border-radius:14px;border:1px solid #c1d9ed;background:#ffffff70;color:var(--navy);text-align:left;font-size:1rem;font-weight:550;transition:background .3s,color .3s,transform .4s}
.build-selector button[aria-selected=true]{background:var(--navy);color:white;border-color:var(--navy)}
.build-selector button span{font-size:1.3rem;transition:transform .4s}
.build-selector button:hover span{transform:rotate(45deg)}
.build-panel{display:grid;grid-template-columns:1fr 1.25fr;gap:3rem;padding:2rem;background:#fff;border:1px solid #cde1f2;border-radius:24px;animation:panel-in .6s cubic-bezier(.16,1,.3,1)}
.build-poster{min-height:365px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:2.5rem;border-radius:18px;background:linear-gradient(145deg,#0b2a55,#1557a6 70%,#38a8f5);color:#fff}
.build-poster>.line-icon{width:60px;height:60px;position:relative;z-index:1}
.build-poster>span{position:relative;z-index:1;font-size:clamp(2rem,3.8vw,3.8rem);letter-spacing:-.055em;line-height:1.1}
.poster-orbit{position:absolute;right:-30%;top:15%;width:110%;aspect-ratio:1;border:1px solid #ffffff30;border-radius:50%;animation:poster-spin 20s linear infinite}
.poster-orbit::before,.poster-orbit::after{content:'';position:absolute;inset:12%;border:1px solid #ffffff30;border-radius:50%;transform:rotateX(55deg) rotateY(25deg)}
.poster-orbit::after{inset:25%;background:radial-gradient(circle at 20% 10%,#7ccbff80,transparent 65%);transform:rotateX(-40deg)}
.build-explainer{padding:1rem 1rem 1rem 0;align-self:center}
.build-explainer h3{font-size:1.75rem;font-weight:500;letter-spacing:-.04em;line-height:1.2;margin-bottom:1.1rem;max-width:440px}
.build-explainer>p{font-size:1rem;line-height:1.7;color:var(--muted)}
.build-explainer dl{margin:1.5rem 0;display:grid;gap:1rem}
.build-explainer dl>div{display:grid;grid-template-columns:105px 1fr;gap:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.875rem}
.build-explainer dt{font-weight:550;color:var(--blue)}.build-explainer dd{margin:0;color:var(--muted)}
.backend-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.backend-intro{position:sticky;top:125px;align-self:start}
.backend-intro>p:not(.eyebrow){font-size:1rem;color:var(--muted);line-height:1.7;max-width:420px;margin-top:1.5rem}
.system-diagram{margin-top:2rem;max-width:410px;padding:1.6rem;border:1px solid #cfe2f3;border-radius:22px;background:linear-gradient(135deg,#f7fcff,#eaf5ff)}
.system-node{display:flex;align-items:center;gap:1rem;position:relative;padding:1rem;border-radius:14px;background:#fff;box-shadow:0 9px 25px -18px #0b2a5550;transition:transform .5s,border-color .5s;border:1px solid #cddff0}
.system-node:nth-of-type(3){transform:translateX(calc(var(--system-progress,0)*8px))}
.system-node:nth-of-type(5){transform:translateX(calc(var(--system-progress,0)*16px))}
.system-node .line-icon{color:var(--blue);width:32px;height:32px}
.system-node span{font-size:.9375rem;font-weight:550}.system-node small{display:block;font-size:.75rem;font-weight:400;color:var(--muted)}
.system-connector{height:26px;width:1px;margin-inline:auto;position:relative;background:#bad4ed;overflow:hidden}
.system-connector::after{content:'';position:absolute;left:0;top:0;width:100%;height:11px;background:var(--blue);animation:connection-flow 2.5s infinite ease-in-out}
.backend-cards{display:grid;gap:1.25rem}
.backend-cards article{padding:2rem;border:1px solid #d8e7f3;border-radius:22px;background:#fff}
.backend-cards article:nth-child(2n){background:#f3f9ff}
.backend-cards article>span{font-size:.625rem;font-weight:550;letter-spacing:.1em;color:var(--blueberry)}
.backend-cards h3{font-size:1.5rem;font-weight:500;letter-spacing:-.04em;line-height:1.25;margin:1rem 0}
.backend-cards p{font-size:.9375rem;color:var(--muted);line-height:1.75}
.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.note-visual{position:relative;overflow:hidden;aspect-ratio:1.25;border-radius:20px;margin-bottom:1.5rem;padding:1.8rem;display:flex;align-items:flex-end;color:var(--navy);background:linear-gradient(130deg,#d7edff,#f0f8ff)}
.note-visual span{position:relative;z-index:1;font-size:clamp(1.8rem,3vw,3rem);font-weight:450;line-height:1.04;letter-spacing:-.05em}.note-visual b{font-weight:550}
.note-visual i{position:absolute;right:-.08em;top:-.18em;font-size:clamp(7rem,13vw,12rem);font-style:normal;font-weight:400;line-height:1;color:#1557a630;transform:rotate(-20deg);transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.note-system{background:linear-gradient(130deg,#0b2a55,#1557a6);color:white}.note-system i{color:#7ccbff55}
.note-first{background:linear-gradient(130deg,#e4eefe,#c4d9f2)}
.note-card:hover .note-visual i{transform:rotate(15deg) scale(1.1)}
.note-card h3{font-size:1.4rem;line-height:1.25;letter-spacing:-.04em;font-weight:550;margin:.8rem 0}
.note-card>p:last-child{font-size:.9375rem;line-height:1.75;color:var(--muted)}
.faq-section{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;padding-top:2rem;padding-bottom:8rem}
.faq-intro>p:not(.eyebrow){max-width:360px;font-size:1rem;line-height:1.7;color:var(--muted);margin:1.5rem 0}
.faq-intro .button{margin-top:.5rem}
.faq-list details{border-top:1px solid var(--line)}.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;gap:2rem;align-items:center;padding:1.5rem 0;cursor:pointer;font-size:1.05rem;font-weight:500;line-height:1.4;list-style:none}.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary>span{color:var(--blue);font-size:1.5rem;transition:transform .4s}.faq-list details[open] summary>span{transform:rotate(45deg)}
.faq-list details p{padding:0 2rem 1.5rem 0;font-size:.9375rem;line-height:1.75;color:var(--muted);animation:panel-in .4s ease-out}
@keyframes panel-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes poster-spin{to{transform:rotate(360deg)}}
@keyframes connection-flow{0%{transform:translateY(-15px)}100%{transform:translateY(30px)}}
@media(min-width:761px){.capability-card.reveal.is-visible:hover{transform:translate3d(0,-8px,0) rotate(-1deg)}}
@media(max-height:800px){.backend-intro{position:static}}
@media(max-width:1100px){.capability-card{padding:1.5rem}.capability-grid{gap:1rem}.backend-layout,.faq-section{gap:3rem}.build-panel{gap:2rem}.build-poster{padding:2rem}.desktop-nav{gap:1.3rem}.header-inner{gap:1.6rem}}
@media(max-width:760px){
  .manifesto{padding:4rem 0 5rem}.section-kicker{font-size:.5625rem}.section-kicker>span:last-child{text-align:right}
  .manifesto h2{font-size:clamp(2.7rem,9.5vw,4rem);margin:2.2rem 0}.manifesto-bottom{gap:1rem;align-items:flex-end}.manifesto-bottom p{font-size:1.1rem}.orb-link{width:54px;height:54px;font-size:1.8rem}
  .editorial-heading{display:block;margin-bottom:2rem}.editorial-heading>p{margin-top:1.5rem;max-width:100%;font-size:.9375rem}.editorial-heading h2,.backend-intro h2,.faq-intro h2{font-size:clamp(2.5rem,9vw,3.5rem)}
  .capability-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.capability-card{padding:1.25rem;min-height:0;border-radius:18px}.card-index{top:1.25rem;right:1.25rem}.capability-card .line-icon{width:30px;height:30px;margin-bottom:1.5rem}.capability-card h3{font-size:1.15rem}.capability-card p{font-size:.8125rem}.capability-card .mini-label{font-size:.5rem;letter-spacing:.055em}
  .project-scene{left:0;right:0;top:27%;opacity:.2}.project-cover{border-radius:18px}
  .guide-section{padding:4.5rem 0}.build-selector{gap:.4rem}.build-selector button{padding:.8rem .7rem;font-size:.75rem;border-radius:10px}.build-selector button span{font-size:1rem}
  .build-panel{grid-template-columns:1fr;gap:1.5rem;padding:1rem;border-radius:20px}.build-poster{min-height:230px;padding:1.6rem}.build-poster>span{font-size:2.5rem}.build-poster>.line-icon{width:42px;height:42px}.build-explainer{padding:.5rem}.build-explainer h3{font-size:1.5rem}.build-explainer>p{font-size:.9375rem}.build-explainer dl>div{grid-template-columns:84px 1fr;gap:.6rem;font-size:.8125rem}
  .backend-layout{grid-template-columns:1fr;gap:2rem}.backend-intro{position:static}.backend-intro>p:not(.eyebrow){max-width:none}.system-diagram{max-width:none;padding:1.2rem}.backend-cards{gap:1rem}.backend-cards article{padding:1.5rem}.backend-cards h3{font-size:1.3rem}
  .notes-grid{grid-template-columns:1fr;gap:2.5rem}.note-visual{aspect-ratio:1.6;margin-bottom:1.2rem}.note-visual span{font-size:2.5rem}.note-visual i{font-size:11rem}.note-card h3{font-size:1.4rem}
  .faq-section{grid-template-columns:1fr;gap:2rem;padding-top:0;padding-bottom:4.5rem}.faq-list summary{font-size:.9375rem;padding:1.25rem 0}.faq-list details p{padding-right:.5rem;font-size:.875rem}
}
@media(max-width:380px){.capability-grid{grid-template-columns:1fr}.capability-card{min-height:0}.manifesto-bottom{display:block}.orb-link{margin-top:1.5rem}.build-selector button{font-size:.6875rem}}
@media(prefers-reduced-motion:reduce){.mask-line>span,.project-scene,.project-scene g,.capability-card,.system-node,.note-visual i{transform:none!important}.editorial-ready [data-editorial]:not(.is-inview) .mask-line>span{transform:none!important}.ink-word{opacity:1!important}.poster-orbit,.system-connector::after{animation:none}.build-panel,.faq-list details p{animation:none}.editorial-ready .capability-card.reveal:not(.is-visible){opacity:1!important}}

/* A fan of useful ideas: a visible opening gesture, followed by gentle depth. */
.hero-copy{padding:3rem 0 2rem}
.hero-stack{position:relative;width:min(760px,100%);height:268px;margin-top:2.5rem;perspective:1100px;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .35s ease-out}
.stack-tile{position:absolute;left:50%;top:0;width:226px;margin-left:-113px;transform:translate3d(var(--deck-x),var(--deck-y,0px),0) rotate(var(--deck-angle));transform-origin:50% 85%;transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity .65s;transition-delay:var(--deck-delay,0ms)}
.stack-web{--deck-x:-218px;--deck-y:20px;--deck-angle:-12deg;--deck-delay:50ms;z-index:1}
.stack-app{--deck-x:0px;--deck-y:0px;--deck-angle:3deg;--deck-delay:160ms;z-index:3}
.stack-system{--deck-x:218px;--deck-y:20px;--deck-angle:12deg;--deck-delay:270ms;z-index:2}
.stack-face{min-height:225px;padding:1.3rem;text-align:left;border:1px solid #b6d4ee;border-radius:20px;background:linear-gradient(135deg,#fff,#dcedfb);box-shadow:0 25px 45px -30px #0b2a5580;animation:idea-float 5s ease-in-out infinite alternate;animation-delay:var(--deck-delay);backface-visibility:hidden}
.stack-app .stack-face{background:linear-gradient(135deg,#0b2a55,#1557a6);color:#fff;border-color:#3379b7}
.stack-system .stack-face{background:linear-gradient(135deg,#e5f4ff,#c0dff7)}
.stack-label{font-size:.56rem;font-weight:650;letter-spacing:.08em;display:block;opacity:.7;white-space:nowrap}
.stack-face strong{display:block;font-weight:600;font-size:1.3rem;letter-spacing:-.04em;line-height:1.15;margin:.8rem 0 .45rem}
.stack-face small{display:block;font-size:.75rem;line-height:1.5;opacity:.7;max-width:175px}
.stack-graphic{height:68px;margin-top:1.3rem;position:relative;color:var(--blue)}
.stack-browser{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;border:1px solid #81b3dc;border-radius:9px;padding:22px 9px 9px;background:#fff7}
.stack-browser>span{position:absolute;top:9px;left:11px;width:34px;height:4px;border-radius:3px;background:#7fa9cd}
.stack-browser i{border-radius:4px;background:linear-gradient(145deg,#b8d7ef,#82b9e3)}
.stack-code{font-size:2.6rem;letter-spacing:.08em;line-height:1;color:#7ccbff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ffffff30}
.stack-code>span{position:absolute;bottom:8px;right:8px;width:10px;height:10px;border-radius:50%;background:#7ccbff;box-shadow:0 0 20px #7ccbff}
.stack-flow{display:flex;align-items:center;justify-content:center}
.stack-flow i{width:38px;height:38px;border-radius:11px;background:#fff8;border:1px solid #8fb6d7;box-shadow:0 9px 15px -12px #1557a6;transform:rotate(-8deg)}
.stack-flow i:nth-of-type(2){background:#1557a6;border-color:#1557a6;transform:rotate(8deg)}
.stack-flow span{width:20px;height:1px;background:#6b9ac2}
.editorial-ready .hero-stack:not(.is-inview) .stack-tile{transform:translate3d(0,90px,0) rotate(0deg) scale(.8);opacity:0}
.editorial-ready .hero-stack:not(.is-inview) .stack-face{animation-play-state:paused}
@keyframes idea-float{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-12px) rotate(1deg)}}

/* Each brand keeps its palette; a folded corner and separated layers invite exploration. */
.project-role{display:block;font-size:.56rem;font-weight:650;letter-spacing:.08em;color:var(--blueberry);line-height:1.5;margin-bottom:.6rem}
.dialog-role{font-size:.6875rem;margin:1rem 0 1.5rem}
.peel-corner{position:absolute;right:-1px;bottom:-1px;z-index:3;width:72px;height:72px;clip-path:polygon(100% 0,0 100%,100% 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--project-accent) 32%,var(--project-tint)),var(--project-tint) 70%);color:var(--project-accent);transform-origin:100% 100%;transition:transform .75s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.peel-corner>span{position:absolute;right:12px;bottom:9px;font-size:1.8rem;line-height:1;transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.project-cover:hover .peel-corner,.project-cover:focus-visible .peel-corner{transform:scale(1.65)}
.project-cover:hover .peel-corner>span{transform:rotate(45deg) scale(.8)}
.project-cover .cover-bottom{padding-right:50px}
.project-scene{opacity:.37;transform:translateZ(8px) translateY(12px) rotate(-7deg)}
.project-cover:hover .project-scene,.project-cover:focus-visible .project-scene{opacity:.6;transform:translateZ(38px) translateY(-22px) rotate(3deg)}
.project-cover:hover .scene-back,.project-cover:focus-visible .scene-back{transform:translate(-24px,-15px) rotate(-10deg)}
.project-cover:hover .scene-mid,.project-cover:focus-visible .scene-mid{transform:translate(0,-8px) rotate(6deg)}
.project-cover:hover .scene-front,.project-cover:focus-visible .scene-front{transform:translate(22px,-18px) rotate(-6deg)}
.project-cover .store-wordmark,.project-cover .docs-wordmark,.project-cover .mannah-wordmark,.project-cover .studio-wordmark{transition:transform .8s cubic-bezier(.22,1.2,.36,1)}
.project-cover:hover .store-wordmark,.project-cover:hover .docs-wordmark,.project-cover:hover .mannah-wordmark,.project-cover:hover .studio-wordmark{transform:translate3d(0,-8px,55px) rotate(-2deg)}

/* The panel grows towards the reader as its stable stage enters the viewport. */
.screen-stage{perspective:1300px}
.build-panels{transform:var(--screen-transform,none);transform-origin:50% 0;transition:transform .16s linear}
.screen-stage:focus-within .build-panels{transform:none}
.motion-ribbon{position:relative;overflow:hidden;padding:3rem 0;background:radial-gradient(ellipse at 80% 20%,#38a8f57a,transparent 65%),linear-gradient(120deg,#01224c,#1557a6);color:#fff;margin:2rem 0 0;isolation:isolate}
.ribbon-line{width:max-content;font-size:clamp(3.5rem,7.5vw,8rem);line-height:1.12;font-weight:650;letter-spacing:-.025em;white-space:nowrap;transform:translate3d(var(--ribbon-forward,0px),0,0) rotate(-2deg);transition:transform .06s linear}
.ribbon-line .ribbon-phrase{display:inline-block}.ribbon-line .ribbon-phrase + .ribbon-phrase{margin-left:1.3rem}
.ribbon-outline{margin-top:.45rem;margin-left:0;color:transparent;-webkit-text-stroke:1px #b7e1ff;transform:translate3d(var(--ribbon-reverse,0px),0,0) rotate(-2deg)}
@media(max-width:760px){
 .hero-stack{height:212px;margin-top:2.7rem;width:100%}.stack-tile{width:160px;margin-left:-80px}.stack-web{--deck-x:-21vw;--deck-y:17px;--deck-angle:-10deg}.stack-system{--deck-x:21vw;--deck-y:17px;--deck-angle:10deg}
 .stack-face{min-height:186px;padding:1rem;border-radius:16px}.stack-label{font-size:.42rem}.stack-graphic{height:47px;margin-top:1rem}.stack-face strong{font-size:.96rem}.stack-face small{font-size:.63rem}.stack-code{font-size:2rem}.stack-flow i{width:28px;height:28px;border-radius:8px}.stack-flow span{width:10px}.stack-browser{padding:18px 6px 6px;gap:5px}
 .peel-corner{width:52px;height:52px}.peel-corner>span{font-size:1.3rem;right:9px;bottom:7px}.project-cover .cover-bottom{padding-right:32px}.project-role{font-size:.48rem;letter-spacing:.035em}.dialog-role{font-size:.625rem}.motion-ribbon{padding:2.5rem 0}.ribbon-line{font-size:12vw}.ribbon-outline{margin-top:.5rem;margin-left:0}
}
@media(max-width:380px){.stack-tile{width:142px;margin-left:-71px}.stack-web{--deck-x:-20vw}.stack-system{--deck-x:20vw}.stack-face{padding:.85rem}.stack-label{font-size:.39rem}.stack-face strong{font-size:.86rem}}
@media(prefers-reduced-motion:reduce){
 .hero-stack,.build-panels,.ribbon-line{transform:none!important}.stack-face{animation:none!important;transform:none!important}.editorial-ready .hero-stack:not(.is-inview) .stack-tile{opacity:1;transform:translate3d(var(--deck-x),var(--deck-y,0px),0) rotate(var(--deck-angle))}.peel-corner{transform:none!important}
}