@font-face{font-family:Onest;src:url('fonts/onest-400.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Onest;src:url('fonts/onest-600.ttf') format('truetype');font-weight:600;font-display:swap}:root{--bg:#19191b;--panel:#222225;--ink:#eeebe6;--muted:#a6a4a5;--line:#464348;--accent:#d28b99;--accent-ink:#1c1418;--paper:#e6e0d9;--paper-ink:#211b20;--gutter:clamp(22px,4vw,76px);color-scheme:dark}html[data-theme=light]{--bg:#f1eee8;--panel:#e5e1da;--ink:#29262b;--muted:#706970;--line:#c9c1c6;--accent:#823a51;--accent-ink:#f6eeef;--paper:#302a31;--paper-ink:#eee8e2;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Onest,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}h1,h2,h3,p{margin:0}img{display:block;max-width:100%}[hidden]{display:none!important}::selection{background:var(--accent);color:var(--accent-ink)}.skip{position:fixed;top:-100px;left:20px;z-index:30;background:var(--ink);color:var(--bg);padding:14px}.skip:focus{top:15px}.header{height:90px;display:flex;align-items:center;justify-content:space-between;margin:0 var(--gutter);border-bottom:1px solid var(--line);gap:25px}.identity{font-weight:600;font-size:37px;letter-spacing:-4px}.identity>span{color:var(--accent);letter-spacing:0;margin-left:4px}.header nav{display:flex;gap:36px;font-size:13px}.header nav a{position:relative;padding:12px 0}.header nav a::after{content:'';position:absolute;bottom:5px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}.header nav a:hover::after{transform:scaleX(1)}.preferences{display:flex;align-items:center;gap:13px}.preferences button{height:36px;min-width:36px;display:grid;place-items:center;font-size:12px}.preferences button:hover{background:var(--panel)}#theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4}#menu-toggle{display:none}.intro{position:relative;padding:65px var(--gutter) 85px;min-height:calc(100svh - 90px);display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:2vw;overflow:hidden}.eyebrow{display:block;font-size:11px;color:var(--muted);line-height:1.6}.intro-copy{position:relative;z-index:2;padding:5px 0 20px;align-self:center}.intro h1{font-size:clamp(68px,9vw,143px);font-weight:600;line-height:.98;letter-spacing:-.075em;margin:38px 0 27px}.intro h1>span{display:block}.intro h1 .intro-role{font-size:.62em;letter-spacing:-.06em;line-height:1.4}.intro-description{font-size:clamp(21px,2.3vw,34px);letter-spacing:-.035em;line-height:1.4;color:var(--muted)}.intro-link{display:inline-flex;align-items:center;gap:65px;border-bottom:1px solid var(--ink);padding:18px 0 10px;margin-top:35px;font-size:14px}.intro-link>span:last-child{font-size:32px;line-height:1;transition:transform .3s}.intro-link:hover>span:last-child{transform:translate(5px,5px)}.intro-note{display:flex;gap:14px;margin-top:50px;color:var(--muted);font-size:11px;line-height:1.8}.note-line{height:30px;width:2px;background:var(--accent);margin-top:5px}.persona-scene{height:620px;position:relative;align-self:center;isolation:isolate}.persona-panel{position:absolute;inset:25px 13% 40px 15%;background:#672b3f;color:#dbaeb8;transform:rotate(4deg);display:flex;justify-content:space-between;flex-direction:column;padding:24px;font:10px/1.6 monospace;z-index:-1}.persona-panel::after{content:'';position:absolute;width:70px;height:70px;border:1px solid #ba899b70;right:22px;top:25px;border-radius:50%}.persona-panel>span:last-child{align-self:end;text-align:right;letter-spacing:.1em}.orbit-label{position:absolute;color:var(--ink);font-family:monospace;z-index:2;font-size:32px}.label-code{left:1%;top:95px;transform:rotate(-12deg)}.label-data{right:0;bottom:150px;transform:rotate(8deg);font-size:22px}.persona-caption{position:absolute;right:0;bottom:5px;font-size:10px;line-height:1.7;color:var(--muted);text-align:right}#avatar{position:absolute;width:360px;max-width:100%;left:50%;bottom:32px;transform:translateX(-50%);padding:0;filter:drop-shadow(0 20px 15px #0003)}.avatar-sprite{display:block;width:100%;aspect-ratio:3/5;background:url('assets/street-character-branded.png') 0 0/400% 200% no-repeat;animation:avatar-breathe 6s ease-in-out infinite;transform-origin:50% 95%}.avatar-sprite.waving{animation:avatar-wave 1.65s steps(1,end) 1}.avatar-caption{display:block;font-size:9px;color:#f0d9df;white-space:nowrap;margin-top:-8px}html[data-theme=light] .avatar-caption{color:#633244}.avatar-message{position:absolute;top:0;left:50%;max-width:240px;padding:14px 18px;background:var(--paper);color:var(--paper-ink);font-size:12px;line-height:1.6;z-index:4;transform:translate(-50%,10px);opacity:0;pointer-events:none;transition:transform .25s,opacity .25s;box-shadow:0 8px 30px #0002}.avatar-message.visible{opacity:1;transform:translate(-50%,0)}.intro-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:65px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.intro-bottom a{color:var(--ink)}.scroll-label{display:flex;align-items:center;gap:15px}.scroll-label i{font-style:normal;display:block;animation:scroll-tap 2.5s ease infinite}.work-section{padding:90px var(--gutter) 65px}.section-intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:20px 40px;margin-bottom:45px}.section-intro>.eyebrow{grid-column:1/-1}.section-intro h2,.about h2{font-size:clamp(44px,5.8vw,88px);line-height:1.08;letter-spacing:-.065em;font-weight:600}.section-intro>p{justify-self:end;color:var(--muted);font-size:13px;line-height:1.8;max-width:350px}.work-runway{height:255svh;position:relative}.work-sticky{position:sticky;top:25px}.project-selector{display:flex;border-bottom:1px solid var(--line);position:relative;background:var(--bg);z-index:3}.project-selector button{flex:1;display:flex;align-items:center;justify-content:center;gap:20px;padding:20px 10px;color:var(--muted);font-size:15px}.project-selector button>span:first-child{font:10px monospace}.project-selector button[aria-pressed=true]{color:var(--ink)}.selector-progress{height:2px;width:33.333%;background:var(--accent);position:absolute;bottom:-1px;left:0;transform:translateX(var(--selected,0%));transition:transform .5s cubic-bezier(.2,.8,.2,1)}.project-theatre{height:clamp(380px,61svh,660px);position:relative;isolation:isolate;overflow:hidden;background:#2c2929;perspective:1500px;transition:background .6s}.project-theatre[data-current=quiet]{background:#899487}.project-theatre[data-current=exotech]{background:#6d7b8d}.project-ghost{position:absolute;inset:15px 0 auto;text-align:center;font-size:clamp(75px,12vw,185px);line-height:1;font-weight:600;letter-spacing:-.08em;color:#ffffff0d;white-space:nowrap;z-index:-1}.project-desktop{position:absolute;left:10%;right:17%;top:14%;height:76%;padding:0;transform:rotate(-3deg);transition:transform .6s;display:grid;place-items:center}.project-desktop img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 25px 20px #0005)}.project-desktop:hover{transform:rotate(-1deg) translateY(-5px)}.expand-hint{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:10px;background:#eae4db;color:#221b20;padding:10px 15px;white-space:nowrap;opacity:0;transition:opacity .25s}.project-desktop:hover .expand-hint,.project-desktop:focus-visible .expand-hint{opacity:1}.project-phone{position:absolute;right:7%;bottom:10%;height:71%;aspect-ratio:390/844;border:5px solid #171619;background:#171619;transform:rotate(7deg);box-shadow:0 18px 25px #0004;overflow:hidden;border-radius:16px;pointer-events:none}.project-phone img{width:100%;height:100%;object-fit:contain}.theatre-caption{position:absolute;bottom:17px;left:22px;right:22px;display:flex;justify-content:space-between;color:#e5e2df99;font:9px monospace;letter-spacing:.04em}.project-theatre.switching .project-desktop{animation:screen-enter .6s cubic-bezier(.2,.7,.2,1)}.project-theatre.switching .project-phone{animation:phone-enter .75s cubic-bezier(.2,.7,.2,1)}.project-caption{display:grid;grid-template-columns:1fr 1.5fr auto;align-items:center;gap:35px;padding:25px 0 15px}.project-caption .eyebrow{font-size:10px}.project-caption h3{font-weight:600;font-size:29px;line-height:1.2;letter-spacing:-.045em;margin-top:7px}.project-caption>p{font-size:13px;color:var(--muted);line-height:1.7;max-width:540px}.project-caption>a{display:flex;gap:25px;align-items:center;white-space:nowrap;font-size:12px;border-bottom:1px solid var(--line);padding:10px 0}.project-caption>a>span:last-child{font-size:25px}.mobile-project-list{display:none}.about{padding:90px var(--gutter) 100px;display:grid;grid-template-columns:1fr 1.15fr;gap:10vw;border-top:1px solid var(--line);background:var(--panel)}.about h2{margin-top:30px}.about-copy>p{font-size:14px;color:var(--muted);line-height:1.85;margin-top:24px;max-width:480px}.about-copy>.about-lead{font-size:clamp(20px,2vw,29px);line-height:1.5;letter-spacing:-.035em;color:var(--ink);margin-top:30px}.source-link{display:inline-block;font-size:12px;border-bottom:1px solid var(--line);padding-bottom:7px;margin-top:25px}.build-panel{min-width:0;align-self:center}.build-heading{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);align-items:center}.build-heading>span:last-child{font-size:32px;color:var(--accent)}.build-visual{position:relative;height:330px;perspective:800px;margin-top:10px;isolation:isolate}.build-layer{position:absolute;left:7%;right:7%;height:130px;border:1px solid var(--line);padding:18px;background:var(--bg);transform:rotateX(38deg) rotateZ(-10deg);box-shadow:0 15px 30px #0002;transition:transform .6s,border-color .6s,background .6s}.build-layer>span{font:9px monospace;color:var(--muted)}.layer-design{top:20px;z-index:3}.layer-behaviour{top:100px;z-index:2}.layer-services{top:180px;z-index:1}.build-visual[data-step='0'] .layer-design,.build-visual[data-step='1'] .layer-behaviour,.build-visual[data-step='2'] .layer-services{transform:translateY(-12px) rotateX(24deg) rotateZ(-10deg) translateZ(35px);border-color:var(--accent)}.mini-page{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:17px}.mini-page i{height:28px;background:var(--line)}.mini-page i:first-child{grid-column:1/-1;height:8px;background:var(--accent)}.mini-action,.mini-services{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px;font:11px monospace}.mini-action b,.mini-services b{font-weight:400;padding:7px 14px;border:1px solid var(--line)}.mini-action i,.mini-services i{font-style:normal;color:var(--accent)}.build-options{border-top:1px solid var(--line)}.build-options button{display:flex;align-items:center;gap:20px;padding:17px 0;width:100%;border-bottom:1px solid var(--line);text-align:left}.build-options button>span{font:10px monospace;color:var(--muted)}.build-options button strong{font-size:16px;font-weight:400}.build-options button>i{font-size:23px;font-style:normal;margin-left:auto;transition:transform .25s}.build-options button[aria-expanded=true]{color:var(--accent)}.build-options button[aria-expanded=true]>i{transform:rotate(45deg)}#build-detail{font-size:12px;line-height:1.8;color:var(--muted);min-height:75px;padding-top:18px;max-width:520px}.about.reveal-ready .build-visual{animation:diagram-enter .9s ease both}footer{padding:65px var(--gutter) 0;background:var(--paper);color:var(--paper-ink)}.contact-top{display:flex;justify-content:space-between;gap:20px;font-size:11px}.contact-top .eyebrow{color:inherit;opacity:.6}footer h2{font-size:clamp(58px,9.3vw,145px);line-height:1.03;font-weight:600;letter-spacing:-.07em;margin:50px 0 60px}.contact-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #82778055}.contact-actions a{padding:30px 45px 35px 0;position:relative;display:flex;flex-direction:column;gap:15px}.contact-actions a+ a{padding-left:40px;border-left:1px solid #82778055}.contact-actions a>span{font-size:11px;opacity:.65}.contact-actions strong{font-size:clamp(22px,2.8vw,43px);font-weight:400;letter-spacing:-.04em;overflow-wrap:anywhere}.contact-actions i{font-size:30px;font-style:normal;position:absolute;right:22px;top:45%;transition:transform .3s}.contact-actions a:hover i{transform:translate(5px,-5px)}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #82778055;padding:26px 0;font:10px monospace}dialog{background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:0;width:min(1200px,94vw);max-height:92svh}dialog::backdrop{background:#000c;backdrop-filter:blur(6px)}.dialog-header{display:flex;align-items:center;gap:20px;padding:16px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2}.dialog-header h2{font-size:20px;font-weight:600}.dialog-devices{display:flex;gap:5px;margin-left:auto}.dialog-devices button{padding:8px 12px;font-size:11px;border:1px solid var(--line)}.dialog-devices [aria-pressed=true]{background:var(--ink);color:var(--bg)}#close-dialog{font-size:28px;padding:0 6px}.dialog-body{padding:22px}.dialog-body img{width:100%;height:auto}.dialog-body img.is-mobile{width:min(390px,100%);margin:auto}.dialog-body p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:25px;max-width:800px}.dialog-body a{display:inline-block;font-size:12px;border-bottom:1px solid var(--line);padding:5px 0;margin-top:15px}body.dialog-open{overflow:hidden}@keyframes avatar-wave{0%{background-position:0 0;transform:translateX(-17%)}12.5%{background-position:33.333333% 0;transform:translateX(-10%)}25%{background-position:66.666667% 0;transform:translateX(0)}37.5%{background-position:100% 0;transform:translateX(2%)}50%{background-position:0 100%;transform:translateX(-11%)}62.5%{background-position:33.333333% 100%;transform:translateX(-8%)}75%{background-position:66.666667% 100%;transform:translateX(0)}87.5%{background-position:100% 100%;transform:translateX(0)}100%{background-position:0 0;transform:translateX(-17%)}}@keyframes avatar-breathe{0%,100%{transform:translateX(-17%) rotate(-.3deg)}50%{transform:translateX(-17%) rotate(.3deg) scaleY(1.006)}}@keyframes scroll-tap{0%,70%,100%{transform:none}35%{transform:translateY(5px)}}@keyframes screen-enter{from{opacity:0;transform:translateY(40px) rotate(-7deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}@keyframes phone-enter{from{opacity:0;transform:translateY(50px) rotate(14deg)}to{opacity:1;transform:translateY(0) rotate(7deg)}}@keyframes diagram-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@media(min-width:1700px){.intro{gap:5vw}.persona-scene{height:700px}#avatar{width:400px}.intro h1{font-size:150px}}
@media(max-width:1100px){.intro{grid-template-columns:1.2fr 1fr;padding-top:35px;min-height:780px}.intro h1{font-size:85px}.intro h1 .intro-role{font-size:.62em}.persona-scene{height:570px}#avatar{width:320px}.intro-note{margin-top:35px}.label-code{left:-4%;top:80px;font-size:25px}.label-data{font-size:18px;right:-3%}.about{gap:6vw}.section-intro h2{font-size:60px}.project-caption{gap:20px}.project-caption>p{font-size:12px}.project-caption h3{font-size:26px}.project-theatre{height:56svh}.project-desktop{left:5%;right:18%}.project-phone{right:5%;height:65%}}
@media(max-width:700px){.header{height:74px;margin:0 20px;gap:15px}.identity{font-size:31px;letter-spacing:-3px}.preferences{gap:7px}.preferences button{height:34px;min-width:34px}.header nav{position:absolute;top:73px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:20px;z-index:12;display:none;flex-direction:column;gap:10px;font-size:17px}.header nav.open{display:flex}#menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px}#menu-toggle i{display:block;width:20px;height:1px;background:var(--ink);transition:transform .2s}#menu-toggle[aria-expanded=true] i:first-child{transform:translateY(3.5px) rotate(45deg)}#menu-toggle[aria-expanded=true] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}.intro{display:block;padding:35px 22px 80px;min-height:0;overflow:hidden}.eyebrow{font-size:10px}.intro-copy{padding-bottom:0}.intro h1{font-size:75px;margin-top:26px;margin-bottom:20px}.intro h1 .intro-role{font-size:.53em;line-height:1.6}.intro-description{font-size:23px}.intro-link{font-size:12px;margin-top:18px;gap:55px;padding-top:12px}.intro-note{display:none}.persona-scene{height:445px;margin-top:22px;margin-left:7%;margin-right:3%}.persona-panel{inset:18px 14% 33px 17%;padding:18px;font-size:8px}#avatar{width:260px;bottom:23px}.avatar-caption{font-size:8px}.label-code{font-size:24px;left:2%;top:70px}.label-data{font-size:17px;right:0;bottom:110px}.persona-caption{font-size:8px;bottom:0;right:-2%}.avatar-message{font-size:11px;max-width:200px;top:0}.intro-bottom{height:60px;left:22px;right:22px;font-size:9px}.scroll-label{gap:8px}.intro-bottom>a{display:none}.section-intro{display:block;margin-bottom:28px}.section-intro h2{font-size:44px;margin-top:20px}.section-intro>p{font-size:12px;margin-top:20px;max-width:320px}.work-section{padding:55px 22px 35px}.work-runway{display:none}.mobile-project-list{display:block}.mobile-case{padding:25px 0 35px;border-top:1px solid var(--line)}.mobile-case-heading{display:flex;align-items:baseline;gap:15px}.mobile-case-heading>span{font:10px monospace;color:var(--muted)}.mobile-case h3{font-size:30px;font-weight:600;letter-spacing:-.05em}.mobile-case>p{font-size:12px;line-height:1.85;color:var(--muted);margin-top:17px}.mobile-case-screen{display:block;width:100%;padding:18px 10px;background:#383333;margin-top:23px;position:relative}.mobile-case[data-id=quiet] .mobile-case-screen{background:#899487}.mobile-case[data-id=exotech] .mobile-case-screen{background:#6d7b8d}.mobile-case-screen img{width:100%;height:auto}.mobile-case-screen>span{position:absolute;right:8px;bottom:8px;padding:7px 10px;background:#eee7dd;color:#242024;font-size:17px}.mobile-case>a{font-size:12px;border-bottom:1px solid var(--line);display:inline-block;padding:6px 0;margin-top:16px}.mobile-case-screen{opacity:0;transform:translateY(20px);transition:opacity .65s,transform .65s}.mobile-case.revealed .mobile-case-screen{opacity:1;transform:none}.about{display:block;padding:55px 22px 50px}.about h2{font-size:49px;margin-top:20px}.about-copy>.about-lead{font-size:22px;margin-top:25px}.about-copy>p{font-size:13px;margin-top:20px}.source-link{font-size:11px;margin-top:22px}.build-panel{margin-top:45px}.build-heading{font-size:11px}.build-visual{height:300px}.build-layer{height:118px;padding:14px;left:4%;right:4%}.layer-design{top:20px}.layer-behaviour{top:95px}.layer-services{top:170px}.build-layer>span{font-size:8px}.mini-action,.mini-services{font-size:10px;gap:12px;margin-top:19px}.mini-action b,.mini-services b{padding:7px 9px}.mini-page{margin-top:14px;gap:6px}.mini-page i{height:24px}.build-options button{gap:15px;padding:15px 0}.build-options button strong{font-size:15px}#build-detail{min-height:100px;font-size:12px}footer{padding:45px 22px 0}.contact-top{font-size:9px}.contact-top .eyebrow{font-size:9px}footer h2{font-size:15vw;margin:35px 0 40px}.contact-actions{grid-template-columns:1fr}.contact-actions a,.contact-actions a+a{border-left:0;border-bottom:1px solid #82778055;padding:25px 30px 25px 0;gap:12px}.contact-actions strong{font-size:27px}.contact-actions i{right:0;font-size:25px}.footer-bottom{border:0;font-size:9px;padding:23px 0}.dialog-header{padding:12px;gap:8px}.dialog-header h2{font-size:17px}.dialog-devices button{font-size:9px;padding:8px}.dialog-body{padding:12px}.dialog-body p{font-size:12px}.project-phone{border-radius:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.avatar-sprite{transform:translateX(-17%)!important}.mobile-case-screen{opacity:1;transform:none}.work-runway{height:auto}.work-sticky{position:relative;top:auto}}
@media(min-width:701px) and (max-height:820px){.intro{padding-top:30px;padding-bottom:80px;min-height:calc(100svh - 90px)}.persona-scene{height:490px}#avatar{width:290px}.intro h1{font-size:clamp(70px,8vw,112px);margin-top:22px;margin-bottom:16px}.intro-description{font-size:27px}.intro-link{margin-top:22px;padding-top:12px}.intro-note{margin-top:25px;font-size:10px}.persona-panel{inset:20px 13% 35px 15%;padding:20px}.label-code{top:80px}.label-data{bottom:120px}}
.project-desktop{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}.project-desktop img{width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain}
.playground{height:auto;perspective:none;border:1px solid var(--line);margin:20px 0 22px;background:var(--bg);padding:0;box-shadow:10px 10px 0 color-mix(in srgb,var(--line) 25%,transparent)}.playground-top{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px;color:var(--muted)}.playground-top>span:last-child{font-family:monospace}.live-example{--demo-accent:#d28b99;padding:28px 25px}.live-example[data-palette='1']{--demo-accent:#8dbbb6}html[data-theme=light] .live-example{--demo-accent:#823a51}html[data-theme=light] .live-example[data-palette='1']{--demo-accent:#286c66}.example-kicker{font:8px monospace;letter-spacing:.07em;color:var(--demo-accent)}.live-example h3{font-size:29px;letter-spacing:-.05em;line-height:1.2;margin-top:20px;font-weight:600}.live-example>p{font-size:12px;line-height:1.8;color:var(--muted);margin-top:17px;max-width:360px;min-height:65px}.live-example>button{background:var(--demo-accent);color:#20151b;font-size:12px;padding:12px 17px;margin-top:17px;transition:background .3s}html[data-theme=light] .live-example>button{color:#fff}.live-example output{display:block;margin-top:17px;font-size:10px;line-height:1.7;color:var(--muted);min-height:34px}.example-route{display:none;align-items:center;justify-content:space-between;margin-top:22px;gap:8px;font:9px monospace}.playground[data-step='2'] .example-route{display:flex}.example-route>span{border:1px solid var(--line);padding:8px 10px}.example-route>i{font-style:normal;color:var(--accent)}.example-route.is-flowing>span{animation:node-pulse 1.5s both}.example-route.is-flowing>span:nth-of-type(2){animation-delay:.2s}.example-route.is-flowing>span:nth-of-type(3){animation-delay:.4s}@keyframes node-pulse{0%,100%{border-color:var(--line);background:none}35%{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}}@media(max-width:700px){.playground{height:auto;margin-top:20px}.playground-top{padding:12px;font-size:8px}.live-example{padding:24px 20px}.live-example h3{font-size:27px}.live-example>p{font-size:12px;min-height:0}.example-route{font-size:8px}.example-route>span{padding:8px}.playground .build-layer{display:none}}