*,*::before,*::after{corner-shape:squircle}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/media/e739aff9b4d02c26.woff2) format('woff2')}
@font-face{font-family:'Missing Lovely';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/media/2a5e135c7ce5d8a2.woff2) format('woff2')}
@font-face{font-family:'Geist Pixel';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/media/4c403a12db8afbe9.woff2) format('woff2')}

:root{
  --paper:#FFFFFF; --paper-2:#F2F2EE; --paper-3:#E9E9E3;
  --ink:#131316; --ink-soft:#55555E; --ink-faint:#6E6E76; --dim:#C5C5CC;
  --edge:#E2E2DC;
  --tray:#ECECE9;              /* the grey tray the nav and canvas bar sit in */
  --accent:#A9DEFF;            /* primary — one of the four pillars */
  --accent-deep:#131316;       /* was a dark blue outside the palette; small accents are ink now, colour comes from the pillars */
  --accent-soft:#E6F1FA;
  --wood:#E9E4D6; --wood-2:#D8CFBA; --wood-edge:#C5BA9D; --dot:#D4D4CC;
  /* the four pillars: every effect, loader and highlight is built from these */
  --p-y:#FFD44E; --p-v:#E7BBFF; --p-g:#B4F6B8; --p-b:#A9DEFF;
  --stack4:0 1px 0 #FFD44E,0 2px 0 #E7BBFF,0 3px 0 #B4F6B8,0 4px 0 #A9DEFF;
  --c1:#FFD44E; --c2:#B4F6B8; --c3:#A9DEFF; --c4:#E7BBFF; --c5:#F2A65A; --c6:#F2545B;
  --sh:0 1px 2px rgba(19,19,22,.05),0 10px 24px -12px rgba(19,19,22,.18);
  --sh-lift:0 1px 1px rgba(19,19,22,.04),0 2px 4px rgba(19,19,22,.04),0 8px 16px -4px rgba(19,19,22,.06),0 24px 40px -12px rgba(19,19,22,.10);
  --pixel:"Geist Pixel","Courier New",monospace;
  --body:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Missing Lovely","Segoe Print",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2.5px solid var(--accent-deep);outline-offset:3px;border-radius:6px}
a,button{touch-action:manipulation}
@supports (corner-shape:squircle){
  *,*::before,*::after{corner-shape:squircle}
  .avail .dot,.npill span,.abeat .n,.step::before,
  .ground *{corner-shape:round}
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button{font-family:inherit}
.ic{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ar{stroke-width:2.1}
.ar.r{rotate:45deg}
.ar.d{rotate:135deg}
.ar.inl{width:.8em;height:.8em;vertical-align:-.08em}


/* ---------- splash: a sheet of paper that tears open to reveal the canvas ---------- */
/* splash: black, a pixel loading counter if the page is still loading, one scribbled line, then the screen shreds
   into pixels from the centre out, each flashing a pillar colour before it goes */
#splash{position:fixed;inset:0;z-index:200;pointer-events:auto;overflow:hidden;background:#0B0B0D;color:#fff}
#splash.shredding{background:transparent;pointer-events:none}
#splash.done{display:none}
#splash .shred{position:absolute;inset:0;width:100%;height:100%;display:block}
#splash .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,30px);padding:0 20px;
  opacity:0;transition:opacity .25s}
#splash.ready .mid{opacity:1;transition-delay:.3s}
#splash.shredding .mid{opacity:0;transition-duration:.18s}
#splash .kick{margin:0;font:400 12px/1.4 var(--pixel);letter-spacing:.24em;color:rgba(255,255,255,.6);text-align:center}
#splash .scr{width:min(1000px,94vw);height:auto;overflow:visible}
#splash .scr text{font-family:var(--pixel);font-size:84px;letter-spacing:-2px;fill:#fff;opacity:0;white-space:pre}
#splash .scr text.on{opacity:1}
#splash .open{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:18px;cursor:pointer;
  font:600 16px/1 var(--body);color:#0B0B0D;background:#fff;border:0!important;box-shadow:0 4px 0 #FFD44E!important;opacity:0}
#splash.ready .open{animation:spopen .55s cubic-bezier(.34,1.5,.64,1) 2.2s both}
@keyframes spopen{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
#splash .open:hover{transform:translateY(2px);box-shadow:0 2px 0 #FFD44E!important}
#splash .open .ic{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){#splash{display:none}}

/* ---------- nav ---------- */
.chrome{position:fixed;inset:0;pointer-events:none;z-index:70}
.nav{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;padding:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),rgba(236,236,233,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:.5px solid rgba(0,0,0,.12);border-radius:28px;pointer-events:auto;max-width:calc(100vw - 24px);overflow:visible;
  box-shadow:0 1px 2px rgba(19,19,22,.04),0 10px 24px -14px rgba(19,19,22,.16)}
.nav a.logo{display:flex;align-items:center;flex:none;background:none;border:0;box-shadow:none;height:40px;padding:0 6px 0 2px}
.nav a.logo svg{width:56px;height:27.5px;display:block;transition:transform .35s cubic-bezier(.34,1.7,.64,1)}
.nav a.logo:hover svg{transform:rotate(-6deg)}
/* flat white chips; the current section is ringed in its own pillar colour */
.nav a{font:600 12.5px/1 var(--body);background:#fff;cursor:pointer;text-decoration:none;
  color:var(--ink-soft);height:40px;padding:0 14px;border-radius:18px;position:relative;
  border:2px solid transparent;transition:color .2s,border-color .25s,transform .18s cubic-bezier(.34,1.6,.64,1);
  white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:7px}
.nav a:hover{color:var(--ink)}
.nav a:active{transform:scale(.96)}
.nav a.here{color:var(--ink)}
.nav a.here[data-r="/"]{border-color:#A9DEFF}
.nav a.here[data-r="/about"]{border-color:#FFD44E}
.nav a.here[data-r="/work"]{border-color:#B4F6B8}
.nav a.here[data-r="/offer"]{border-color:#E7BBFF}
.nav a.here[data-r="/gallery"]{border-color:transparent}
.nav .cta,.nav .cta:hover,.nav .cta.here{background:var(--ink);color:var(--paper);padding:0 16px;border-color:var(--ink)}
.nav .cta .ic{transition:translate .3s cubic-bezier(.34,1.6,.64,1)}
.nav .cta:hover .ic{translate:3px 0}
/* the slot the cards live in while docked */
#navSlot{flex:none;height:40px;width:0;margin:0 0 0 -6px;position:relative;pointer-events:none}

.hint{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;font:400 12px/1 var(--body);
  color:var(--ink-faint);transition:opacity .4s}
.hint .rail{width:1px;height:28px;background:var(--edge);position:relative;overflow:hidden}
.hint .rail::after{content:"";position:absolute;inset:0;background:var(--accent-deep);transform:translateY(-100%);animation:drop 1.9s ease-in-out infinite}
@keyframes drop{45%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* ---------- shared ---------- */
main{position:relative;z-index:10}
section{position:relative;padding-inline:20px}
.wrap{max-width:1180px;margin:0 auto;width:100%}
.narrow{max-width:820px}
.mid{text-align:center;display:flex;flex-direction:column;align-items:center}
/* TYPE SYSTEM
   Geist Pixel  : display (h1, h2), card titles (h3), the claim
   Satoshi       : everything you read (body, lede, buttons, nav, chips)
   Missing Lovely: handwritten notes only (greeting, hover notes, marker words) */
:root{--t-display:clamp(2.25rem,4vw,3.5rem);--t-xl:clamp(1.6rem,2.3vw,2rem);--t-lg:clamp(1.2rem,1.7vw,1.5rem);--t-h3:clamp(1.15rem,1.7vw,1.4rem);--t-body:18px;--t-lede:clamp(1.05rem,1.4vw,1.2rem);--t-small:13px;--gap-head:56px;--gap-sec:140px}
body{font-size:var(--t-body)}
h1.big,h2{font-family:var(--pixel);font-weight:700;margin:0 0 16px;letter-spacing:-.02em;line-height:1.08;
  font-size:var(--t-display);text-wrap:balance}
h1.big{margin:0}
h3{font-family:var(--pixel);font-weight:700;margin:0 0 8px;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.2}
.lede{font-size:var(--t-lede);line-height:1.6;color:var(--ink-soft);max-width:58ch;margin:0}
.lede b{color:var(--ink);font-weight:700}
.scrawl{font-family:var(--hand);color:var(--accent-deep);font-size:26px;line-height:1.15;margin:0}
.rise{opacity:0;transform:translateY(16px);animation:rise .75s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;background:var(--ink);
  color:var(--paper);border:2px solid var(--ink);border-radius:26px;cursor:pointer;font:700 14px/1 var(--body);
  text-decoration:none}
.btn .ic{transition:translate .3s cubic-bezier(.34,1.6,.64,1)}
.btn:hover .ic{translate:5px 0}
.btn.ghost{background:var(--paper);color:var(--ink)}

/* PRESSABLE. Every button sits on a solid ink base, like a key on a keyboard (after the buttons
   on dontlookup.app). Hover sinks it halfway onto the base; pressing pushes it all the way down.
   Dark buttons keep a hairline of paper between face and base so the base still reads. */
.btn,.nav .cta,#splash .open,.socials a{--lift:4px;position:relative;
  box-shadow:0 var(--lift) 0 0 var(--ink);transform:translateY(0);
  transition:transform .1s cubic-bezier(.3,.7,.4,1),box-shadow .1s cubic-bezier(.3,.7,.4,1),background .2s,color .2s}
.btn:not(.ghost),.nav .cta{box-shadow:var(--stack4)}
.btn.ghost,#splash .open,.socials a{border:1px solid rgba(0,0,0,.64);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.btn:hover,.nav .cta:hover,#splash .open:hover,.socials a:hover{transform:translateY(2px);box-shadow:0 calc(var(--lift) - 2px) 0 0 var(--ink)}
.btn:not(.ghost):hover,.nav .cta:hover{box-shadow:0 2px 0 0 #000}
.btn.ghost:hover,#splash .open:hover,.socials a:hover{box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn:active,.nav .cta:active,#splash .open:active,.socials a:active{transform:translateY(4px);
  box-shadow:none;transition-duration:.04s}
.nav .cta{--lift:4px}
.socials a{--lift:4px}

.view{display:none}
.view.on{display:block}
.page-head{padding-block:150px 60px}

/* ---------- HERO ---------- */
#hero{min-height:100svh;display:flex;align-items:center;justify-content:center;padding-block:100px 170px;overflow:visible}
/* the arrow is drawn by the operating system (same speed and zero lag as the person's own pointer); the page only draws
   the trailing "YOU" tag. 2x image for Retina / HiDPI. On service previews the page draws a tool icon
   instead, so the system cursor hides (.cur-tool on the hovered .srow only: a class on <html> with a `*` rule restyled the whole page every time a row was crossed). */
@media (hover:hover) and (pointer:fine){
  html,body,*{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7 18 2.5-7.5L20 10z' fill='%23131316' stroke='%23FAFAF8' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto!important;
    cursor:image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7 18 2.5-7.5L20 10z' fill='%23131316' stroke='%23FAFAF8' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 1x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7 18 2.5-7.5L20 10z' fill='%23131316' stroke='%23FAFAF8' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 2x) 3 2,auto!important}
  .srow.cur-tool,.srow.cur-tool *{cursor:none!important}
  .youcur>svg{display:none!important}}
.hero-in{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.hi{font-family:var(--hand);font-size:clamp(2.4rem,3.6vw,3.25rem);color:var(--ink-soft);
  margin:0 0 2px;position:relative;display:inline-block;line-height:1}
.hi svg.ul{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.hi svg.ul path{fill:none;stroke:#929292;stroke-width:1;stroke-linecap:round;
  stroke-dasharray:130;stroke-dashoffset:130;animation:draw .9s cubic-bezier(.65,0,.35,1) .5s forwards}
.hi svg.ul path:nth-child(2){animation-delay:.68s}
@keyframes draw{to{stroke-dashoffset:0}}

.framed{position:relative;display:inline-block;margin:28px 0 30px;padding:18px 26px;cursor:none}

/* NEGATIVE LAYER — a full inverted copy of the hero, revealed only inside a square
   whose BOTTOM-RIGHT corner is the cursor. max() keeps inset() from releasing at the edges. */
.hero-in{--mx:-999px;--my:-999px;--bs:0px}
.neg{position:absolute;inset:0;background:var(--ink);z-index:6;pointer-events:none;
  clip-path:inset(max(0px,calc(var(--my) - var(--bs)))
                  max(0px,calc(100% - var(--mx)))
                  max(0px,calc(100% - var(--my)))
                  max(0px,calc(var(--mx) - var(--bs))));
  transition:clip-path .3s cubic-bezier(.22,1,.36,1)}
.hero-in.live .neg{transition:clip-path .05s linear}
/* everything the box passes over, inverted */
.neg .negname{position:absolute;margin:0;color:var(--paper);white-space:nowrap;
  font-family:var(--pixel);font-weight:700;letter-spacing:-.01em;line-height:.9}
.neg .nfr{position:absolute;border:1.5px solid var(--paper)}
.neg .nhd{position:absolute;width:10px;height:10px;background:var(--ink);border:1.8px solid var(--paper);border-radius:1px}
#nHd1{background:#FFD44E}#nHd2{background:#E7BBFF}#nHd3{background:#B4F6B8}#nHd4{background:#A9DEFF}
.neg .nhi{position:absolute;font-family:var(--hand);color:#CFCFCC;white-space:nowrap;line-height:1}
.neg .npill{position:absolute;display:inline-flex;align-items:center;gap:9px;padding:11px 16px;
  border-radius:18px;background:#232327;color:#ECECE9;font:700 11.5px/16px var(--body);
  text-align:left;white-space:nowrap;padding:12px 16px;gap:7px}
.neg .npill span{width:8px;height:8px;border-radius:50%;background:#ECECE9;flex:none}
.neg .nclaim{position:absolute;font-family:var(--pixel);font-weight:500;letter-spacing:-.035em;
  color:var(--paper);text-align:center}

/* the selection box itself — cursor at its bottom-right, black corner handles */
.selbox{position:fixed;top:0;left:0;width:var(--sb,88px);height:var(--sb,88px);z-index:8;
  pointer-events:none;opacity:0;transition:opacity .2s;
  margin:calc(var(--sb,88px) * -1) 0 0 calc(var(--sb,88px) * -1)}
.selbox.on{opacity:1}
.selbox i{position:absolute;width:8px;height:8px;background:var(--ink);border-radius:1px}
.selbox i.a{top:-4px;left:-4px}.selbox i.b{top:-4px;right:-4px}
.selbox i.c{bottom:-4px;left:-4px}.selbox i.d{bottom:-4px;right:-4px}
/* the "YOU" cursor tag, like a multiplayer pointer */
.youcur{position:fixed;top:0;left:0;z-index:99;pointer-events:none;opacity:0;
  transform:translate3d(-100px,-100px,0);transition:opacity .22s}
.youcur.on{opacity:1}
.youcur svg,.youcur b{transition:scale .2s cubic-bezier(.34,1.6,.64,1)}
.youcur.link svg{scale:1.2}.youcur.link b{scale:1.1}
.youcur.down svg,.youcur.down b{scale:.9}
.youcur svg{position:absolute;top:0;left:0;width:20px;height:20px}
.youcur b{position:absolute;top:19px;left:15px;background:var(--ink);color:var(--paper);
  font:700 10px/1 var(--body);padding:5px 8px;border-radius:4px;white-space:nowrap;letter-spacing:.02em}
.framed .fr{position:absolute;inset:0;border:1px solid var(--ink);pointer-events:none;z-index:4;
  opacity:0;transform:scale(.985);transition:opacity .4s,transform .4s cubic-bezier(.22,1,.36,1)}
.framed.lit .fr{opacity:1;transform:none}
.framed .hd{position:absolute;width:10px;height:10px;background:var(--paper);border:1.4px solid var(--ink);
  border-radius:1px;z-index:5;opacity:0;transform:scale(.4);
  transition:opacity .35s,transform .45s cubic-bezier(.34,1.8,.64,1)}
.framed.lit .hd{opacity:1;transform:none}
.framed .hd.a{background:#FFD44E;top:-5px;left:-5px;transition-delay:.05s}
.framed .hd.b{background:#E7BBFF;top:-5px;right:-5px;transition-delay:.11s}
.framed .hd.c{background:#B4F6B8;bottom:-5px;left:-5px;transition-delay:.17s}
.framed .hd.d{background:#A9DEFF;bottom:-5px;right:-5px;transition-delay:.23s}
.myname{font-family:var(--pixel);font-weight:700;letter-spacing:-.01em;line-height:.9;margin:0;
  font-size:clamp(2.4rem,9.4vw,6.6rem);transition:color .28s;position:relative;z-index:2}

/* tilted availability pill — its own element, outside the name's frame */
.avail{align-self:center;margin:0;z-index:7;position:relative;
  display:inline-flex;align-items:center;gap:7px;padding:12px 16px;border-radius:18px;
  background:var(--tray);color:#373737;box-shadow:var(--stack4);
  font:700 11.5px/16px var(--body);text-align:left;letter-spacing:.01em;white-space:nowrap;
  transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}
.avail{transition:translate .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}
.avail:hover{translate:0 4px;box-shadow:0 0 0 transparent}
.avail:active{translate:0 4px}
/* ---------- live pulses: drawn once, then only faded and scaled by the compositor ----------
   These used to animate box-shadow. That repaints the element on every frame, forever, and inside a deck or work card
   it repainted the whole card with its screenshot. One off-screen pulse on the contact card at the foot of every page
   kept the main thread ~10% busy at rest. Solid dots get a filled ping behind them (same colour, so it is invisible over
   the dot itself); hotspots drawn over a screenshot get a halo band outside their edge, so nothing tints the picture. */
@keyframes ping{0%{opacity:var(--po,.5);scale:1}70%,100%{opacity:0;scale:var(--ps,3)}}
@keyframes halo{0%{opacity:.95;scale:.9}70%,100%{opacity:0;scale:1.08}}
.avail .dot{width:8px;height:8px;border-radius:50%;background:#373737;flex:none;position:relative;isolation:isolate}
.avail .dot::after{content:"";position:absolute;inset:0;border-radius:50%;corner-shape:round!important;background:#373737;z-index:-1;opacity:0;--po:.5;--ps:3;animation:ping 2.4s ease infinite;pointer-events:none}

.claim{max-width:470px!important;font-family:var(--pixel);font-weight:400;
  font-size:var(--t-lg);line-height:1.15;letter-spacing:-.64px;margin:30px 0 0;max-width:366px;text-align:center}
.kw{display:inline-block;padding:0 .16em;border-radius:3px;position:relative;
  transition:background .28s,color .28s,transform .38s cubic-bezier(.34,1.6,.64,1)}
.kw:hover{background:var(--ink);color:var(--paper);transform:rotate(-1.4deg)}
.kw.a:hover{background:var(--accent);color:var(--ink)}

/* hero doodle stickers */
.doo{position:absolute;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;z-index:3;opacity:0;animation:pop .8s cubic-bezier(.34,1.6,.64,1) forwards}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.85) rotate(var(--r,0deg))}
  to{opacity:1;transform:translateY(0) scale(1) rotate(var(--r,0deg))}}
.doo .bean{display:block;width:132px;height:118px;overflow:visible}
.doo.d2 .bean{height:128px}
.doo.drag{cursor:grabbing;z-index:6}
.doo.drag>svg{filter:drop-shadow(0 10px 10px rgba(19,19,22,.14))}
.say{position:absolute;white-space:nowrap;font:400 22px/1.05 var(--hand);color:var(--ink);pointer-events:none;
  opacity:0;transform:translateY(8px) scale(.85) rotate(var(--r2,0deg));transform-origin:0 100%;
  transition:opacity .2s,transform .45s cubic-bezier(.34,1.7,.64,1)}
.say b{font-weight:400;padding:0 4px;background:linear-gradient(transparent 52%,var(--hl) 52% 92%,transparent 92%)}
.doo:hover .say{opacity:1;transform:rotate(var(--r2,0deg))}
.doo:hover .say.s2{transition-delay:.12s}
.doo.thinker{pointer-events:auto;cursor:default}
.doo.thinker .tk{display:block;width:clamp(170px,14.5vw,232px);height:auto;aspect-ratio:1132/736;overflow:visible}
.thinker .say.s1{right:78%;top:20%}
.thinker .say.s2{right:84%;top:10%}
.tk-dots .q{transform-box:fill-box;transform-origin:50% 100%;animation:ponder 2.2s ease-in-out infinite}
@keyframes ponder{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg) translateY(-4px)}}
.tk-dots .sp{opacity:0;animation:spark 1.1s ease-out infinite}
.tk-dots .sp.b{animation-delay:.55s}
@keyframes spark{0%,40%{opacity:0}55%{opacity:1}100%{opacity:0}}
.tk-bulb{opacity:0;transform:translateY(20px) scale(.7);transform-box:fill-box;transform-origin:50% 100%;
  transition:opacity .2s,transform .45s cubic-bezier(.34,1.7,.64,1)}
.doo.thinker:hover .tk-bulb{opacity:1;transform:none}
.doo.thinker:hover .tk-dots{opacity:0;transition:opacity .2s}
.tk-bulb .ray{animation:ray .5s ease-in-out infinite alternate}
@keyframes ray{to{opacity:.35}}
/* the beans blink, now and then */
.bean .blink{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.bean .trail{stroke-dasharray:1;stroke-dashoffset:1;animation:trail 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes trail{0%{stroke-dashoffset:1}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.bean .drip{transform-box:fill-box;transform-origin:center;animation:drip 1.9s ease-in infinite}
@keyframes drip{0%{transform:translateY(-3px);opacity:0}25%{opacity:1}100%{transform:translateY(12px);opacity:0}}
.tag{position:absolute;padding:8px 13px;border-radius:13px;font:700 10.5px/1 var(--body);
  color:#131316;box-shadow:var(--sh);white-space:nowrap;z-index:4;border:1px solid rgba(19,19,22,.1)}

/* ---------- divider: one loose pen stroke that draws itself as it arrives ---------- */
.divider{width:min(1100px,calc(100% - 40px));margin:2vh auto 0}
.divider svg{width:100%;height:auto;display:block;overflow:visible}
.divider .dv{fill:none;stroke:var(--ink);stroke-linecap:round;visibility:hidden}


/* ---------- services: stacked rows ---------- */
.srows{margin-top:var(--gap-head);border-top:1px solid var(--edge)}
.srow{display:block;color:inherit;text-decoration:none;border-bottom:1px solid var(--edge);outline:none;cursor:pointer}
.shead{display:flex;align-items:center;gap:24px;padding:26px 4px}
.shead .sn{font:500 var(--t-small)/1 var(--body);color:var(--ink-faint);width:28px;flex:none}
.shead h3{margin:0;flex:1;font-size:clamp(1.4rem,2.6vw,2.1rem)}
.sw2{background:linear-gradient(var(--pc),var(--pc)) no-repeat 0 88%/0% 38%;transition:background-size .45s cubic-bezier(.65,0,.35,1)}
.shead .ic{width:26px;height:26px;flex:none;opacity:.35;transition:opacity .3s,rotate .4s cubic-bezier(.34,1.6,.64,1)}
.sbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.sbody>div{overflow:hidden;padding-left:52px;max-width:760px}
.sbody p{margin:0 0 10px;font-size:var(--t-body);line-height:1.6;color:var(--ink-soft)}
.sbody .sinc{font-size:var(--t-small);color:var(--ink-faint);padding-bottom:26px;margin:0}
.srow.open .sw2,.srow:focus-visible .sw2{background-size:100% 38%}
.srow.open .sbody,.srow:focus-visible .sbody{grid-template-rows:1fr}
.srow.open .ic,.srow:focus-visible .ic{opacity:1;rotate:45deg}
@media (hover:none){.sbody{grid-template-rows:1fr}}

#proofHome[hidden]{display:none!important}
/* ---------- testimonials: a slow ticker ---------- */
.tick{margin-top:calc(var(--gap-head) - 24px);padding-block:24px;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tick-in{display:flex;gap:18px;width:max-content;will-change:transform}
.tick .tcard{width:340px;flex:none;text-align:left;box-shadow:none!important;
  transition:transform .45s cubic-bezier(.34,1.5,.64,1),background .35s,border-color .35s,opacity .35s}
.tick .tcard:hover{transform:rotate(-1.5deg) translateY(-4px)!important;box-shadow:var(--sh-lift)!important}

@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick-in{animation:none}}

/* ---------- blur reveal for text, site-wide ---------- */
.rv{opacity:0;translate:0 12px;transition:opacity .7s cubic-bezier(.22,1,.36,1),translate .8s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;translate:0 0}

/* ---------- line-art doodles (one character, ten poses) ---------- */
.doo .dd{display:block;width:calc(var(--w) * clamp(.36px,.036vw,.52px));height:auto;aspect-ratio:var(--w)/var(--h);overflow:visible;
  transform-origin:50% 100%;transition:transform .5s cubic-bezier(.34,1.6,.64,1)}
/* the four hero illustrations are 20% smaller than the doodles elsewhere (Hardik, Sept 29: they took over the first screen).
   Only the hero: the page doodles cloned from these (.pgd) keep the base size */
:is(#heroIn .doo,.doo[data-home="hero"]) .dd{width:calc(var(--w) * clamp(.288px,.0288vw,.416px))}
.doo .say{position:absolute;left:50%;top:-6px;translate:-50% -100%;white-space:nowrap;font:400 24px/1 var(--hand);color:var(--ink);
  pointer-events:none;opacity:0;transform:translateY(8px) rotate(-3deg) scale(.9);transition:opacity .2s,transform .45s cubic-bezier(.34,1.7,.64,1)}
.doo .say b{font-weight:400;padding:0 5px;background:linear-gradient(transparent 52%,var(--hl,#FFD44E) 52% 92%,transparent 92%)}
.doo:hover .say{opacity:1;transform:rotate(-3deg)}
.doo[data-dd=laptop]{--hl:#A9DEFF}.doo[data-dd=think]{--hl:#FFD44E}.doo[data-dd=pixel]{--hl:#B4F6B8}.doo[data-dd=plane]{--hl:#E7BBFF}
.doo[data-dd=chai]{--hl:#FFD44E}.doo[data-dd=cards]{--hl:#B4F6B8}
/* each one moves in character on hover */
@keyframes dd-type{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes dd-rock{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(2deg)}}
@keyframes dd-lean{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-6px) rotate(-2deg)}}
@keyframes dd-throw{0%{transform:none}30%{transform:translate(4px,2px) rotate(2deg)}60%{transform:translate(-8px,-10px) rotate(-5deg)}100%{transform:none}}
@keyframes dd-sip{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg) translateY(-2px)}}
@keyframes dd-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(1.8deg)}}
@keyframes dd-push{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
/* the two on the work stage stand on the same floor as the stool */
.doo.stage{position:relative;opacity:1;animation:none;pointer-events:auto;z-index:3;align-self:flex-end}
.doo.stage .dd{width:calc(var(--w) * clamp(.3px,.032vw,.46px))}
.doo.stage.sl{margin-right:clamp(40px,7vw,120px)}.doo.stage.sr{margin-left:clamp(40px,7vw,120px)}
/* inline story figures */
.fig svg.dd{width:2.2em!important;height:2.2em!important}
.fig [data-f] {}
.perch .pb{width:auto!important;height:auto!important;left:-6px!important;bottom:-8px!important}
.perch .pb .dd{display:block;width:calc(var(--w) * .26px);height:auto;aspect-ratio:var(--w)/var(--h)}
.perch .pnote{left:56px!important;bottom:62px!important}
@media (max-width:760px){.doo.stage{display:none}}

/* ---------- the doodles live: each one does its job; hover changes what it's doing ---------- */
.doo .dd{animation:none!important}
.doo{--sp:1}.doo:hover{--sp:.3}
/* laptop: slow, steady typing at rest; flat out on hover */
.dd .cl{transform-box:fill-box;transform-origin:0 50%;animation:dd-typ calc(9s*var(--sp)) steps(14,end) infinite;animation-delay:calc(var(--i)*1.1s*var(--sp))}
@keyframes dd-typ{0%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
.dd .cur{animation:dd-blink 1s steps(1) infinite}@keyframes dd-blink{50%{opacity:0}}
/* thinker: a run of question marks, big to small, rising over his head */
.dd .tq{opacity:0;font-weight:400;transform-box:fill-box;transform-origin:50% 100%;animation:dd-q 3.6s ease-out infinite;animation-delay:calc(var(--i)*.45s)}
@keyframes dd-q{0%{opacity:0;transform:translateY(24px) rotate(-8deg)}14%{opacity:1;transform:translateY(0) rotate(4deg)}60%{opacity:1;transform:translateY(-10px) rotate(-3deg)}80%,100%{opacity:0;transform:translateY(-24px)}}
.dd .tqs{transition:opacity .2s}
.dd .tb{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(30px) scale(.5);transition:opacity .25s,transform .5s cubic-bezier(.34,1.7,.64,1)}
.dd .tb .ray{animation:dd-ray .45s ease-in-out infinite alternate}@keyframes dd-ray{to{opacity:.15}}
.doo:hover .dd .tb{opacity:1;transform:none}.doo:hover .dd .tqs{opacity:0}
/* magnifier: swings from the grip to the screen and back; on hover it stays close and scans */
.dd .mv{transform-box:view-box;transform-origin:802px 612px;animation:dd-mag 3.6s ease-in-out infinite}
@keyframes dd-mag{0%,100%{transform:rotate(0) scale(1)}45%,65%{transform:rotate(-7deg) scale(1.1)}}
.doo:hover .dd .mv{animation:none;transform:rotate(-7deg) scale(1.14);transition:transform .45s cubic-bezier(.34,1.5,.64,1)}
.dd .px{opacity:0;transition:opacity .3s}.doo:hover .dd .px{opacity:1}
.dd .scan{opacity:0;transition:opacity .2s;animation:dd-scan 1.6s linear infinite}.doo:hover .dd .scan{opacity:1}
@keyframes dd-scan{0%{transform:translateY(0)}100%{transform:translateY(1300px)}}
/* plane: aims back and forth in his hand; the launch itself is a smooth motion path on hover */
.dd .pli{animation:dd-aim 2.4s ease-in-out infinite}
@keyframes dd-aim{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(70px,40px) rotate(6deg)}}
.doo.flying .dd .pli{animation:none}
/* chai: slow sips at rest; on hover the glass comes down and stays down */
.dd .sip{transform-box:view-box;transform-origin:822px 1178px;animation:dd-sip 7s ease-in-out infinite;transition:transform .6s ease}
@keyframes dd-sip{0%,30%,100%{transform:rotate(0)}42%,86%{transform:rotate(-22deg)}}
.dd .st{opacity:0;animation:dd-steam 7s ease-in-out infinite}
@keyframes dd-steam{0%,42%{opacity:0;transform:translateY(0)}55%,78%{opacity:.6}88%,100%{opacity:0;transform:translateY(-50px)}}
.doo:hover .dd .sip{animation:none;transform:rotate(-24deg)}
.doo:hover .dd .st{animation:dd-steam2 1.8s ease-in-out infinite}
@keyframes dd-steam2{0%{opacity:0;transform:translateY(0)}40%{opacity:.6}100%{opacity:0;transform:translateY(-50px)}}
/* sticky notes: the marker writes on the note, then a new one goes up */
.dd .scr path{stroke-dasharray:1;stroke-dashoffset:1;animation:dd-scrib calc(4.2s*var(--sp)) ease-in-out infinite}
.dd .scr path+path{animation-delay:calc(.5s*var(--sp))}
@keyframes dd-scrib{0%,8%{stroke-dashoffset:1;opacity:1}40%,80%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
.dd .nn{transform-box:fill-box;transform-origin:50% 0;animation:dd-note calc(4.2s*var(--sp)) cubic-bezier(.34,1.6,.64,1) infinite}
@keyframes dd-note{0%,45%{opacity:0;transform:scale(.5) rotate(-18deg)}58%,88%{opacity:1;transform:none}100%{opacity:0}}
.doo[data-dd=cards]:hover{--sp:1}
.dd .nf{opacity:0;transition:opacity .3s;transition-delay:calc(var(--i)*.15s)}
.doo:hover .dd .nf{opacity:1}
.dd .tk{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s ease;transition-delay:calc(var(--i)*.15s + .15s)}
.doo:hover .dd .tk{stroke-dashoffset:0}
.doo[data-dd=cards]:hover .dd .scr{opacity:0}
/* reader on the archive button: turns a page */
.dd .leaf{opacity:0;transform-box:view-box;transform-origin:364px 796px;animation:dd-leaf 4.5s ease-in-out infinite}
.dd .lf{animation:dd-lfc 18s linear infinite}
@keyframes dd-lfc{0%,24.9%{fill:#FFD44E}25%,49.9%{fill:#E7BBFF}50%,74.9%{fill:#B4F6B8}75%,100%{fill:#A9DEFF}}
@keyframes dd-leaf{0%,55%{opacity:0;transform:scaleX(1)}60%{opacity:1;transform:scaleX(1)}80%{opacity:1;transform:scaleX(-1)}86%,100%{opacity:0;transform:scaleX(-1)}}
/* about: the little figures answer back on hover */
.fig{cursor:default}
.fig.on svg.dd{transition:translate .35s cubic-bezier(.34,1.6,.64,1)!important}
.fig.on:hover svg.dd{animation:fig-hop .6s cubic-bezier(.34,1.6,.64,1)}
@keyframes fig-hop{0%{translate:0 0;rotate:0deg}40%{translate:0 -6px;rotate:-6deg}70%{translate:0 -2px;rotate:3deg}100%{translate:0 0;rotate:0deg}}
@media (prefers-reduced-motion:reduce){.dd *{animation:none!important}}

/* =================== CANVAS MODE (hero iteration) =================== */
#hero{position:relative;isolation:isolate}
#hero .wrap{position:relative;z-index:1}
#dotgrid{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
/* One canvas draws the resting squares, cursor bulge and click ripples on the same lattice. */
body{background-image:none}
body.cvmode{background-image:none}
main,.foot{position:relative;z-index:1}
/* frame title + live coordinates, like the corners of a design file */
.cv-frame{position:absolute;left:28px;top:96px;z-index:2;display:flex;align-items:center;gap:8px;
  font:500 12px/1 var(--body);color:var(--ink-faint);pointer-events:none;letter-spacing:.01em}
.cv-frame svg{width:12px;height:12px}
.cv-frame b{font-weight:600;color:var(--ink-soft)}
.cv-xy{position:absolute;right:28px;top:96px;z-index:2;font:400 12px/1 var(--pixel);color:var(--ink-faint);
  pointer-events:none;display:flex;gap:14px;font-variant-numeric:tabular-nums}
.cv-xy span{min-width:54px}
.cv-xy i{font-style:normal;color:var(--ink-soft);margin-right:5px}
/* the name's size tag, shown while you're on the layer */
.cv-dim{position:absolute;left:50%;bottom:-34px;translate:-50% 0;z-index:6;pointer-events:none;
  font:600 11px/1 var(--body);color:var(--paper);background:var(--ink);padding:5px 8px;border-radius:6px;
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .3s cubic-bezier(.34,1.6,.64,1);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.framed.lit .cv-dim,.hero-in.scaling .cv-dim{opacity:1;transform:none}
.framed{transition:scale .65s cubic-bezier(.34,1.56,.64,1)}
.hero-in.scaling .framed{transition:none}
.hero-in.scaling .neg,.hero-in.scaling~.neg{opacity:0!important}
body.cv-scaling .selbox{opacity:0!important}
.framed .hd{cursor:none;touch-action:none}
.framed .hd::after{content:"";position:absolute;inset:-9px}
.framed .hd:hover{scale:1.35}
/* measurement guides between stacked elements (hold the cursor on one) */
.cv-meas{position:absolute;z-index:7;pointer-events:none;width:1px;background:#F25C8F;opacity:0;transition:opacity .15s}
.cv-meas::before,.cv-meas::after{content:"";position:absolute;left:-4px;width:9px;height:1px;background:#F25C8F}
.cv-meas::before{top:0}.cv-meas::after{bottom:0}
.cv-meas b{position:absolute;left:8px;top:50%;translate:0 -50%;font:600 10px/1 var(--body);color:#fff;background:#F25C8F;
  padding:3px 5px;border-radius:4px;font-variant-numeric:tabular-nums}
.cv-meas.on{opacity:1}
.cv-hov{outline:1px solid #F25C8F;outline-offset:3px;border-radius:2px}
/* layer tags on the doodles */
.doo .cv-tag{position:absolute;left:0;top:100%;margin-top:6px;font:500 10px/1 var(--body);color:var(--ink-soft);
  white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;font-variant-numeric:tabular-nums}
.doo .cv-tag i{font-style:normal;color:var(--ink-faint);margin-left:6px}
#hero .doo::before{display:none;content:"";position:absolute;inset:-6px;border:1px solid var(--ink);opacity:0;transition:opacity .2s;pointer-events:none;border-radius:2px}
#hero .doo:hover::before,#hero .doo.drag::before{opacity:.9}
.doo:hover .cv-tag,.doo.drag .cv-tag{opacity:1}
/* right-edge scroll hint */
.hint{left:auto!important;right:30px;transform:none!important}
.cv-frame .cv-av{display:none}
/* phones: "available" isn't the headline there, it rides along with the frame label instead of a pill */
@media (max-width:760px){#hero .cv-frame{display:flex!important;left:16px;top:84px}#hero .cv-frame .cv-av{display:inline-flex;align-items:center;gap:6px}
  #hero .cv-frame .cv-av::before{content:"/";margin-right:2px;color:var(--ink-faint)}
  #hero .cv-frame .cv-av .dot{width:7px;height:7px;border-radius:50%;background:#3DBE5A;corner-shape:round!important}
  #hero .avail{display:none!important}}
@media (max-width:760px),(hover:none){.cv-frame,.cv-xy,.cv-meas{display:none}.hint{right:50%;transform:translateX(50%)!important}}


/* =================== SITE-WIDE CANVAS =================== */
::selection{background:#FFD44E;color:var(--ink)}
h2 ::selection,h1 ::selection{background:#E7BBFF}
/* frames: every section is a frame on the canvas; it gets selected as it arrives */
.frm{position:relative}
.ftag{position:absolute;left:28px;top:22px;z-index:3;display:flex;align-items:center;gap:6px;font:500 12px/1 var(--body);
  color:var(--ink-faint);pointer-events:none;letter-spacing:.01em}
.ftag svg{width:11px;height:11px}
.ftag b{font-weight:600;color:var(--ink-soft)}
/* magnetic buttons (translate, so the press transform still works) */
.btn,.nav .cta,.socials a{transition-property:transform,box-shadow,background,color,translate!important}
.mag{translate:var(--mx,0) var(--my,0)}
/* logo pupils */
.nav a.logo svg .pup{transition:transform .25s cubic-bezier(.22,1,.36,1)}
/* contextual cursor label */
.youcur b{transition:scale .2s cubic-bezier(.34,1.6,.64,1),background .2s}
.youcur[data-v="view case"] b{background:#131316}
/* service preview that trails the cursor */
.sprev{position:fixed;left:0;top:0;z-index:65;width:190px;height:136px;border-radius:18px;pointer-events:none;
  border:1px solid rgba(19,19,22,.12);box-shadow:0 1px 2px rgba(19,19,22,.05),0 18px 40px -16px rgba(19,19,22,.35);
  display:grid;place-items:center;opacity:0;scale:.6;transition:opacity .2s,scale .35s cubic-bezier(.34,1.6,.64,1),background .3s;overflow:hidden}
.sprev.on{opacity:1;scale:1}
.sprev svg{width:52%;height:52%}
.sprev span{position:absolute;left:12px;bottom:10px;font:500 10px/1 var(--body);color:rgba(19,19,22,.55)}
/* ticker can be grabbed */
.tick{cursor:none;touch-action:pan-y}
.tick.grab .tcard{pointer-events:none}
/* smart spacing guides when the cards land */
.sguide{position:fixed;z-index:85;pointer-events:none;background:#F25C8F;opacity:0;transition:opacity .25s}
.sguide.h{height:1px}.sguide.v{width:1px}
.sguide b{position:absolute;left:50%;top:-18px;translate:-50% 0;font:600 10px/1 var(--body);color:#fff;background:#F25C8F;padding:3px 5px;border-radius:4px}
.sguide.on{opacity:1}
/* copy-email toast */
.toast{position:fixed;left:50%;bottom:72px;z-index:95;translate:-50% 0;display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--ink);color:var(--paper);border-radius:14px;font:600 14px/1 var(--body);pointer-events:none;
  opacity:0;transform:translateY(16px) scale(.95);transition:opacity .25s,transform .45s cubic-bezier(.34,1.6,.64,1)}
.toast.on{opacity:1;transform:none}
.toast i{width:18px;height:18px;border-radius:50%;background:#B4F6B8;display:grid;place-items:center;color:var(--ink);font-style:normal;font-size:11px}
/* headings: hover redraws the underline */
h2 .hl{cursor:none}
h2.redraw .ul-draw{transition:none!important;clip-path:inset(-4px 100% -4px 0)!important}
/* about page: beats, timeline */
.abeat .n{transition:transform .45s cubic-bezier(.34,1.8,.64,1),background .3s,border-color .3s}
.abeat:nth-child(4n+1){--bc:#A9DEFF}.abeat:nth-child(4n+2){--bc:#B4F6B8}.abeat:nth-child(4n+3){--bc:#FFD44E}.abeat:nth-child(4n+4){--bc:#E7BBFF}
.abeat:hover{border-color:var(--bc)!important}
.abeat:hover .n{background:var(--bc);border-color:var(--ink)!important;transform:scale(1.6) rotate(45deg)!important;border-radius:3px}
.abeat h3{transition:translate .35s cubic-bezier(.34,1.6,.64,1)}.abeat:hover h3{translate:6px 0}
.jobs{position:relative;padding-left:22px}
.jobs::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--edge);border-radius:2px}
.jobs .rail{position:absolute;left:0;top:0;width:2px;height:100%;transform-origin:0 0;transform:scaleY(var(--jp,0));border-radius:2px;
  background:linear-gradient(180deg,#A9DEFF,#B4F6B8,#FFD44E,#E7BBFF)}
.job{position:relative}
.job::before{content:"";position:absolute;left:-27px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--edge);
  transition:background .3s,border-color .3s,scale .4s cubic-bezier(.34,1.8,.64,1);corner-shape:round}
.job.lit::before{background:var(--jc,#A9DEFF);border-color:var(--ink);scale:1.15}
.job:nth-child(4n+2){--jc:#A9DEFF}.job:nth-child(4n+3){--jc:#B4F6B8}.job:nth-child(4n+4){--jc:#FFD44E}.job:nth-child(4n+5){--jc:#E7BBFF}
/* work page: cards tilt toward the cursor, with a glare */
.wcard{transform-style:preserve-3d;will-change:transform}
.wcard.tilt{transition:box-shadow .35s,border-color .35s!important}
/* the glare is a pre-drawn light that slides with a transform: no per-frame CSS vars on the card (they recalculated the
   whole card, screenshot and all) and no blend mode (it forced the card to repaint under it every frame) */
.wcard .glare{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;corner-shape:round!important;
  pointer-events:none;opacity:0;transition:opacity .3s;z-index:3;will-change:transform;
  background:radial-gradient(circle,rgba(255,255,255,.26),rgba(255,255,255,0) 60%)}
.wcard{position:relative;overflow:hidden}
.wcard:hover .glare{opacity:1}
@media (max-width:760px),(hover:none){.ftag,.sprev,.sguide{display:none!important}}

/* =================== ROUND 3 =================== */
/* doodles step back: grey line work, so the words lead */
:root{--dd:#3A3A41}
svg.dd use{fill:var(--dd)}
svg.dd [fill="#131316"]{fill:var(--dd)}
svg.dd [stroke="#131316"]{stroke:var(--dd)}
/* stool: click it and the hand of cards gets shuffled */
#stool{cursor:none;pointer-events:auto}
#deck .card.shuf{animation:shuf .75s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(var(--k)*70ms)}
@keyframes shuf{0%{translate:0 0;rotate:0deg}30%{translate:calc(var(--sx)*1px) -38px;rotate:calc(var(--sr)*1deg)}62%{translate:calc(var(--sx)*-.4px) -12px;rotate:calc(var(--sr)*-.5deg)}100%{translate:0 0;rotate:0deg}}
/* services: the preview card shows real work (svpFill). One layer per service, built once */
.sprev .svp-l{position:absolute;inset:0;display:none}
.sprev .svp-l.on{display:block}
.sprev:not(.on) .svp-f,.sprev:not(.on) .svp-sw i{animation-play-state:paused}
.sprev .svp-f{position:absolute;inset:0;background:var(--fb);opacity:0;animation:svpcyc var(--dur) infinite;animation-delay:var(--dl)}
.sprev .svp-f img,.sprev .svp-l>video{position:absolute;left:50%;top:14px;width:84px;translate:-50% 0;rotate:-4deg;border-radius:12px;box-shadow:0 10px 24px -10px rgba(19,19,22,.5);display:block;height:auto}
.sprev .svp-l>video{top:12px;width:86px}
.sprev .svp-p img{width:88px;top:12px;border-radius:8px}
.sprev .svp-w img{width:118px;top:16px;background:#fff}
.sprev .svp-b img{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;translate:none;rotate:0deg;border-radius:0;box-shadow:none}
.acv .svp-bd{background:none}.acv .svp-bd img{width:100%;height:100%;object-fit:contain;display:block}
.sprev .svp-f em,.sprev .svp-l>em{position:absolute;left:12px;bottom:10px;font:600 10px/1 var(--body);font-style:normal;color:rgba(19,19,22,.7);background:rgba(255,255,255,.7);padding:4px 6px;border-radius:6px}
@keyframes svpcyc{0%{opacity:0;translate:0 8px}6%,25%{opacity:1;translate:0 0}31%,100%{opacity:0;translate:0 -6px}}
.sprev .svp-sw{position:absolute;left:14px;right:14px;top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sprev .svp-sw i{display:block;height:34px;border-radius:8px;border:1px solid rgba(19,19,22,.18);animation:svpsnap 3s cubic-bezier(.34,1.6,.64,1) infinite;animation-delay:calc(var(--k)*90ms)}
@keyframes svpsnap{0%,4%{opacity:0;scale:.4}18%,84%{opacity:1;scale:1}100%{opacity:0;scale:.9}}
.sprev .svp-soon{position:absolute;left:0;right:0;top:36px;text-align:center;font:400 26px/1.05 var(--hand);color:#131316;rotate:-3deg}
.sprev .svp-soon small{display:block;margin-top:6px;font:500 10px/1.2 var(--body);color:rgba(19,19,22,.6);rotate:3deg}
/* ---------- service pages: #/offer/<id> ---------- */
.svp-back{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 var(--body);color:var(--ink-soft);text-decoration:none;margin-bottom:22px}
.svp-back:hover{color:var(--ink)}
.svp-back svg{width:18px;height:18px;rotate:180deg}
.svp-num{display:block;font:400 13px/1 var(--pixel);color:var(--ink-faint);margin-bottom:10px}
#svcHead h1 .svp-hl{background:linear-gradient(var(--pc),var(--pc)) no-repeat 0 88%/100% 34%}
.svp-inc{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding:0;list-style:none}
.svp-inc li{padding:10px 14px;border-radius:12px;background:var(--paper-2);border:1px solid var(--edge);font:500 15px/1 var(--body)}
.svp-inc li::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;corner-shape:round!important;background:var(--pc);vertical-align:1px}
/* service canvases: the group name sits above its box, the case-study button inside it top-right,
   so neither lands on the first frame's own label */
.svp-acv .asn{top:auto;bottom:100%;margin-bottom:calc(8px * var(--iz));transform-origin:0 100%;font-weight:700}
/* labels never wider than what they label, at any zoom (they're counter-scaled by --iz) */
.svp-acv .asn,.svp-acv .an{max-width:calc(100% / var(--iz) - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svp-go{display:none;position:absolute;right:calc(10px * var(--iz));top:calc(10px * var(--iz));transform:scale(var(--iz));transform-origin:100% 0;white-space:nowrap;
  font:600 12px/1 Inter,system-ui,sans-serif;color:#fff;background:#131316;border:0;padding:7px 10px;border-radius:7px;cursor:pointer}
.svp-go:hover{background:#0D99FF}
.acv .svp-sheet{background:#fff;border:1px solid rgba(19,19,22,.1);padding:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-content:start}
.svp-sheet div{min-width:0}
.svp-sheet i{display:block;height:74px;border-radius:10px;border:1px solid rgba(19,19,22,.12)}
.svp-sheet b{display:block;margin-top:7px;font:600 11px/1.2 Inter,system-ui,sans-serif;color:#131316;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svp-sheet code{display:block;margin-top:3px;font:500 10.5px/1 ui-monospace,Menlo,monospace;color:#8C8C8C}
.acv .svp-vid video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.svp-demos{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.svp-demos a{display:block;padding:16px 18px;border-radius:16px;border:1px solid var(--edge);background:var(--paper);color:inherit;text-decoration:none;transition:border-color .2s,translate .2s}
.svp-demos a:hover{border-color:var(--ink);translate:0 -2px}
.svp-demos b{display:block;font:600 16px/1.25 var(--body)}
.svp-demos span{display:block;margin-top:6px;font:400 14px/1.45 var(--body);color:var(--ink-soft)}
.svp-demos small{display:inline-block;margin-top:10px;font:500 12px/1 var(--body);color:var(--ink-faint)}
.svp-note{position:relative;margin:26px 0 30px;border-radius:24px;border:1px solid var(--edge);padding:56px 28px;text-align:center;
  background-color:#F3F3F1;background-image:radial-gradient(circle,rgba(19,19,22,.16) 1px,transparent 1.3px);background-size:24px 24px}
.svp-note .svp-card{display:inline-block;max-width:420px;padding:28px 30px 26px;border-radius:18px;background:var(--pc);rotate:-1.5deg;box-shadow:0 18px 40px -22px rgba(19,19,22,.45)}
.svp-note .svp-card b{display:block;font:400 34px/1.05 var(--hand);color:#131316}
.svp-note .svp-card p{margin:12px 0 18px;font:400 15px/1.5 var(--body);color:rgba(19,19,22,.75)}
@media (max-width:760px){.svp-note{padding:36px 14px}.svp-note .svp-card{padding:22px 20px}}
/* the motion row shows off on hover */
.srow .shead h3 .ch{display:inline-block;transition:translate .3s cubic-bezier(.34,2,.64,1)}
.srow.wob:hover .shead h3 .ch{animation:wob .9s cubic-bezier(.34,1.8,.64,1) infinite;animation-delay:calc(var(--c)*40ms)}
@keyframes wob{0%,100%{translate:0 0}25%{translate:0 -5px}50%{translate:0 1px}}
.srow.wob:hover .shead .ic{animation:spin 1.2s cubic-bezier(.68,-0.6,.32,1.6) infinite}
@keyframes spin{to{rotate:405deg}}
/* contact: no box. The brief is built right on the canvas: pick what you need, a sticky note lands beside the section */
.contact{position:relative}
.c-stage{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;z-index:2}
.brief{width:100%;margin:10px 0 6px;display:flex;flex-direction:column;align-items:center;gap:14px}
.brief .ask{font:400 26px/1 var(--hand);color:var(--ink-soft);margin:0}
.brief .opts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.brief .opts button{font:600 14px/1 var(--body);padding:12px 16px;border-radius:15px;border:2px solid var(--ink);background:#fff;
  color:var(--ink);cursor:none;display:inline-flex;align-items:center;gap:8px;
  transition:background .25s,translate .3s cubic-bezier(.34,1.8,.64,1),rotate .3s cubic-bezier(.34,1.8,.64,1)}
.brief .opts button i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--ink);background:#fff;display:grid;place-items:center;corner-shape:round;transition:background .2s}
.brief .opts button i::after{content:"";width:6px;height:3px;border:solid var(--ink);border-width:0 0 1.8px 1.8px;rotate:-45deg;translate:0 -1px;opacity:0;transition:opacity .15s}
.brief .opts button.on{background:var(--nc);rotate:-1.5deg}
.brief .opts button.on i{background:var(--ink)}.brief .opts button.on i::after{border-color:#fff;opacity:1}
.brief .opts button:active{translate:0 2px}
.cnotes{position:absolute;inset:0;pointer-events:none;z-index:3}
.cnote{position:absolute;left:0;top:0;width:128px;min-height:104px;background:var(--nc);border-radius:3px;padding:14px 12px 12px;
  box-shadow:0 1px 1px rgba(19,19,22,.06),0 14px 24px -12px rgba(19,19,22,.4);font:400 21px/1.05 var(--hand);color:var(--ink);text-align:left;
  pointer-events:auto;cursor:none;touch-action:none;user-select:none;corner-shape:round;
  transition:translate .7s cubic-bezier(.34,1.35,.64,1),rotate .7s cubic-bezier(.34,1.6,.64,1),scale .35s cubic-bezier(.34,1.6,.64,1),opacity .35s}
.cnote::before{content:"";position:absolute;left:50%;top:-8px;width:44px;height:16px;margin-left:-22px;background:rgba(255,255,255,.55);
  border:1px solid rgba(19,19,22,.06);rotate:-3deg;corner-shape:round;border-radius:2px}
.cnote small{display:block;margin-top:10px;font:500 10px/1 var(--body);color:rgba(19,19,22,.5)}
@media (max-width:760px){.cnote{width:100px;min-height:78px;font-size:18px;padding:12px 10px 10px}.cnote small{display:none}}
.cnote.grab{transition:none;scale:1.06;z-index:5;box-shadow:0 30px 44px -20px rgba(19,19,22,.45)}
.cnote.out{opacity:0;scale:.4}
.cnote.pack{transition:translate .45s cubic-bezier(.65,0,.35,1),scale .45s cubic-bezier(.65,0,.35,1),opacity .45s;scale:.2;opacity:0}
.brief .send[disabled]{opacity:.45;pointer-events:none}
.flyer{position:fixed;z-index:96;pointer-events:none;width:64px;height:40px;left:0;top:0}
/* easter egg */
body.wave .doo .dd,body.wave .fig svg.dd{animation:egg .7s cubic-bezier(.34,1.8,.64,1) 3!important}
@keyframes egg{0%,100%{rotate:0deg;translate:0 0}30%{rotate:-8deg;translate:0 -12px}60%{rotate:6deg;translate:0 -4px}}
.confetti{position:fixed;z-index:130;width:10px;height:10px;border-radius:2px;pointer-events:none;corner-shape:round}
/* case study: before/after scrubber, inspector, versions */
.ba{position:relative;margin:34px 0 10px;border-radius:24px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--edge);cursor:none;touch-action:none;
  user-select:none;background:var(--paper-2)}
.ba .pane{position:absolute;inset:0;display:grid;place-items:center;font:400 30px/1.2 var(--hand);color:var(--ink-soft);text-align:center;padding:30px}
.ba .pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .pane.after{background:var(--tint,#B4F6B8)}
.ba .pane.before{background:repeating-linear-gradient(45deg,#F2F2EE 0 14px,#EAEAE4 14px 28px);clip-path:inset(0 calc(100% - var(--ba,50%)) 0 0)}
.ba .tagx{position:absolute;top:14px;font:600 11px/1 var(--body);padding:6px 9px;border-radius:8px;background:var(--ink);color:var(--paper);z-index:3}
.ba .tagx.l{left:14px}.ba .tagx.r{right:14px}
.ba .knife{position:absolute;top:0;bottom:0;left:var(--ba,50%);width:2px;margin-left:-1px;background:var(--ink);z-index:4}
.ba .knife::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:var(--paper);
  border:2px solid var(--ink);box-shadow:0 6px 16px -6px rgba(19,19,22,.4);corner-shape:round}
.ba .knife::before{content:"⟷";position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:1;font:600 16px/1 var(--body);color:var(--ink)}
.ba .hs{position:absolute;z-index:5;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#F25C8F;color:#fff;
  display:grid;place-items:center;font:700 12px/1 var(--body);box-shadow:0 0 0 6px rgba(242,92,143,.2);cursor:none;corner-shape:round;
  transition:scale .3s cubic-bezier(.34,1.8,.64,1)}
.ba .hs:hover{scale:1.15}
.ba .hs .box{position:absolute;left:34px;top:-8px;width:220px;padding:10px 12px;border-radius:10px;background:var(--ink);color:var(--paper);
  font:500 13px/1.45 var(--body);text-align:left;opacity:0;translate:-6px 0;transition:opacity .2s,translate .3s cubic-bezier(.34,1.6,.64,1);pointer-events:none}
.ba .hs:hover .box{opacity:1;translate:0 0}
.ba .hs .ol{position:absolute;left:50%;top:50%;width:var(--ow,140px);height:var(--oh,80px);translate:-50% -50%;border:1.5px solid #F25C8F;border-radius:6px;
  opacity:0;transition:opacity .2s;pointer-events:none}
.ba .hs:hover .ol{opacity:1}
.vers{display:flex;gap:10px;margin:0 0 30px;align-items:center}
.vers span{font:500 12px/1 var(--body);color:var(--ink-faint);margin-right:4px}
.vers button{font:600 12px/1 var(--body);padding:8px 12px;border-radius:10px;border:1.5px solid var(--edge);background:var(--paper);cursor:none;
  transition:border-color .2s,background .2s}
.vers button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
/* =================== ROUND 5 =================== */
/* about figures stay still; the words carry that chapter */
.fig.on:hover svg.dd,.fig svg.dd{animation:none!important}
/* service rows back to their calm selves: no wobbling title, no spinning arrow */
.srow.wob:hover .shead h3 .ch,.srow.wob:hover .shead .ic{animation:none!important}
/* nav: the chapter you're in fills a hairline under its name as you read it */
.nav a[data-r]::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1.5px;border-radius:1px;background:currentColor;
  opacity:0;transform-origin:0 50%;transform:scaleX(var(--cp,0));transition:opacity .3s;corner-shape:round}
.nav a[data-r].here::after{opacity:.4}
/* design notes pinned to the canvas, like comments in a file */
.pin{position:absolute;left:calc(100% + 14px);top:-22px;background:none;border:0;padding:0;margin:0;font:inherit;box-shadow:none;z-index:6;width:30px;height:30px;cursor:none;display:block;text-align:left;
  scale:0;transition:scale .5s cubic-bezier(.34,1.8,.64,1)}
.pin.pop{scale:1}
.pin>b{position:absolute;inset:0;border-radius:50% 50% 50% 4px;background:var(--pc);border:1.5px solid var(--ink);display:grid;place-items:center;
  font:400 14px/1 var(--pixel);color:var(--ink);box-shadow:0 8px 16px -8px rgba(19,19,22,.45);corner-shape:round;
  transition:rotate .35s cubic-bezier(.34,1.8,.64,1)}
.pin:hover>b,.pin.open>b{rotate:-12deg}
.pin>b::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1.5px solid var(--pc);opacity:0;animation:pinping 2.8s ease-out infinite;corner-shape:round}
@keyframes pinping{0%{opacity:.9;scale:.8}70%,100%{opacity:0;scale:1.35}}
.pin.open>b::after,.pin.read>b::after{animation:none}
.pin .bub{position:absolute;left:18px;bottom:22px;width:230px;padding:13px 14px 12px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid rgba(19,19,22,.12);
  box-shadow:0 1px 2px rgba(19,19,22,.05),0 22px 40px -18px rgba(19,19,22,.4);transform-origin:0 100%;
  opacity:0;scale:.6;translate:0 6px;pointer-events:none;transition:opacity .18s,scale .35s cubic-bezier(.34,1.6,.64,1),translate .35s cubic-bezier(.34,1.6,.64,1);
  font:400 22px/1.05 var(--hand);color:var(--ink);letter-spacing:0;white-space:normal}
.pin .bub small{display:flex;align-items:center;gap:6px;margin-bottom:8px;font:600 11px/1 var(--body);color:var(--ink-faint)}
.pin .bub small i{width:6px;height:6px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 1px var(--ink);corner-shape:round}
.pin.flip .bub{left:auto;right:18px;border-radius:16px 16px 4px 16px;transform-origin:100% 100%}
.pin:hover .bub,.pin.open .bub{opacity:1;scale:1;translate:0 0}
@media (max-width:760px){.pin{left:auto;right:-6px;top:-36px}}
@media (prefers-reduced-motion:reduce){.pin>b::after{animation:none}}

/* =================== ROUND 6 =================== */
/* chapter tags sit at the same height everywhere, the way "Hello" does in the hero */
.ftag{top:96px}
/* X and Y sit closer together */
.cv-xy{gap:10px}.cv-xy span{min-width:0}.cv-xy b{display:inline-block;min-width:4ch;font-weight:400}
/* easter egg: confetti needs a starting point; the doodles say hi instead of shaking */
.confetti{left:0;top:0}
body.wave .doo .dd,body.wave .fig svg.dd{animation:none!important}
.hey{position:absolute;left:50%;top:-4px;z-index:9;translate:-50% -100%;padding:7px 12px 8px;background:#fff;border:1.5px solid var(--ink);border-radius:14px 14px 14px 4px;
  font:400 22px/1 var(--hand);color:var(--ink);white-space:nowrap;pointer-events:none;box-shadow:0 10px 18px -10px rgba(19,19,22,.4);
  animation:heyin .5s cubic-bezier(.34,1.8,.64,1) both,heyout .3s ease 1.9s forwards;corner-shape:round}
@keyframes heyin{from{opacity:0;scale:.4;translate:-50% -60%}}
@keyframes heyout{to{opacity:0;scale:.8}}

/* ---------- the canvas page is a real canvas: full screen, pan, zoom, pick things up ---------- */
.view>.old{display:none!important}
body.cvmode{overflow:hidden}
html:has(body.cvmode),html.cvmode{overflow:hidden}
body.cvmode .foot,body.cvmode #dotgrid,body.cvmode .hint{display:none!important}
/* Focus must not scroll the stage independently of the canvas camera. */
.icv{position:fixed;inset:0;z-index:2;overflow:hidden;overflow:clip;touch-action:none;user-select:none;-webkit-user-select:none;cursor:none;
  background-color:var(--paper);background-image:radial-gradient(circle,rgba(19,19,22,.2) 1.1px,transparent 1.5px);background-size:26px 26px}
.icv-world{position:absolute;left:0;top:0;transform-origin:0 0}
.icv .it{position:absolute;left:0;top:0;transform-origin:50% 50%;touch-action:none}
.icv .it.lift{z-index:50}
.icv .it.lift>.body{box-shadow:0 1px 2px rgba(19,19,22,.06),0 40px 60px -26px rgba(19,19,22,.45)}
.icv .it>.body{position:absolute;inset:0;transition:box-shadow .3s,scale .3s cubic-bezier(.34,1.6,.64,1)}
.icv .it.lift>.body{scale:1.015}
/* a set of work: rounded card, label on top, a cover that pixel-dissolves when you tap it */
.icv .set>.body{background:#fff;border:1px solid rgba(19,19,22,.1);border-radius:34px;box-shadow:0 1px 2px rgba(19,19,22,.05),0 22px 44px -28px rgba(19,19,22,.35);overflow:hidden}
.icv .set .lab{position:absolute;left:6px;top:-30px;font:600 13px/1 var(--body);color:var(--ink-soft);display:flex;align-items:center;gap:8px;white-space:nowrap}
.icv .set .lab i{width:9px;height:9px;border-radius:3px;background:var(--cv);corner-shape:round}
.icv .set .grid{position:absolute;inset:0;padding:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;align-content:start}
.icv .set .th{aspect-ratio:1;border-radius:18px;background:var(--tint);border:1px solid rgba(19,19,22,.06);display:grid;place-items:center;text-align:center;
  font:500 12px/1.3 var(--body);color:rgba(19,19,22,.6);padding:8px}
.icv .cover{position:absolute;inset:0;z-index:4;border-radius:34px;background:var(--cv);display:flex;flex-direction:column;justify-content:flex-end;padding:30px;
  cursor:none;overflow:hidden;corner-shape:squircle}
.icv .cover h4{margin:0;font:400 38px/1 var(--pixel);color:var(--ink);letter-spacing:-.01em}
.icv .cover p{margin:10px 0 0;font:400 15px/1.35 var(--body);color:rgba(19,19,22,.7);max-width:340px}
.icv .cover .tap{position:absolute;top:22px;right:22px;font:600 12px/1 var(--body);padding:8px 11px;border-radius:12px;background:rgba(255,255,255,.7);color:var(--ink);
  display:flex;align-items:center;gap:6px}
.icv .cover .tap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);animation:tapdot 1.6s ease-in-out infinite;corner-shape:round}
@keyframes tapdot{50%{scale:.5;opacity:.4}}
.icv .cover.light{box-shadow:inset 0 0 0 1.5px var(--ink)}
.icv-bar button i{box-shadow:inset 0 0 0 1px rgba(19,19,22,.25)}
.icv .note>.body{background:var(--nc,#FFD44E);border-radius:4px;padding:20px 18px;font:400 26px/1.08 var(--hand);color:var(--ink);
  box-shadow:0 1px 1px rgba(19,19,22,.06),0 18px 28px -16px rgba(19,19,22,.4);corner-shape:round;overflow:hidden}
.icv .note>.body::before{content:"";position:absolute;left:50%;top:-9px;width:56px;height:18px;margin-left:-28px;background:rgba(255,255,255,.6);rotate:-3deg;border-radius:2px;corner-shape:round}
.icv .text>.body{font:400 var(--fs,56px)/1.02 var(--pixel);color:var(--ink);letter-spacing:-.01em;white-space:pre-wrap}
/* images sit on nothing: a transparent PNG stays transparent (the old grey plate + rounded clip + box shadow made cut-outs look like flat JPEGs) */
.icv .image>.body{background:none;box-shadow:none!important}
.icv .image img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none}
.icv .it.image.lift>.body{filter:drop-shadow(0 18px 22px rgba(19,19,22,.28))}
.icv-pct{position:absolute;right:22px;top:calc(22px + env(safe-area-inset-top,0px));z-index:10;display:flex;align-items:center;gap:2px;padding:4px;border-radius:14px;
  background:rgba(255,255,255,.8);border:.5px solid rgba(0,0,0,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font:400 13px/1 var(--pixel);color:var(--ink);font-variant-numeric:tabular-nums}
.icv-pct span{min-width:52px;text-align:center}
.icv-pct button,.icv-bar button{font:600 12.5px/1 var(--body);border:0;background:none;color:var(--ink-soft);height:32px;min-width:32px;padding:0 10px;border-radius:10px;cursor:none}
.icv-pct button:hover,.icv-bar button:hover{background:#fff;color:var(--ink)}
.icv-bar{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:10;display:flex;align-items:center;gap:2px;padding:5px;border-radius:16px;
  background:rgba(255,255,255,.82);border:.5px solid rgba(0,0,0,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}
.icv-bar .sep{width:1px;height:18px;background:rgba(0,0,0,.12);margin:0 4px;flex:none}
.icv-bar button{white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.icv-bar button i{width:8px;height:8px;border-radius:2px;background:var(--c);corner-shape:round}
.icv-hint{position:absolute;left:22px;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:9;font:400 22px/1.1 var(--hand);color:var(--ink-faint);max-width:220px;pointer-events:none;transition:opacity .6s}
.icv-hint.gone{opacity:0}
/* editor: only at #/canvas/edit, for Hardik */
.icv-ed{position:absolute;left:50%;top:calc(84px + env(safe-area-inset-top,0px));translate:-50% 0;z-index:11;display:none;align-items:center;gap:2px;padding:5px;border-radius:14px;
  background:var(--ink);color:#fff;box-shadow:0 20px 40px -20px rgba(19,19,22,.6)}
body.icv-editing .icv-ed{display:flex}
.icv-ed button{font:600 12px/1 var(--body);border:0;background:none;color:#fff;height:32px;padding:0 11px;border-radius:9px;cursor:pointer;white-space:nowrap}
.icv-ed button:hover{background:rgba(255,255,255,.14)}
.icv-ed .sep{width:1px;height:18px;background:rgba(255,255,255,.2);margin:0 3px}
.icv-ed b{font:600 11px/1 var(--body);color:#FFD44E;padding:0 8px}
/* editing needs the real OS pointer, not the decorative custom cursor. The site forces
   cursor:none!important on everything (line ~172), so this override needs !important too
   or it never wins the cascade and the cursor stays invisible while editing. */
body.icv-editing,body.icv-editing *{cursor:default!important}
body.icv-editing .icv,body.icv-editing .icv *{cursor:default!important}
body.icv-editing .youcur{display:none}
/* the hero surface also has a .frame class (overflow hidden, border, paper, shadow); undo it on canvas frames */
.icv .it.frame{z-index:0;overflow:visible;border:0;background:none;box-shadow:none;border-radius:0}
.icv .it.frame>.body{border-radius:16px;background:var(--nc,#F3F3F1);box-shadow:inset 0 0 0 1px rgba(19,19,22,.08)}
/* frame names work like Figma's: just above the frame's top left, the same size on screen at any zoom,
   so they read at "Fit all" too; never wider than the frame */
.icv .it.frame .lab2{position:absolute;left:0;bottom:100%;top:auto;margin-bottom:calc(7px / var(--k,1));
  font:600 calc(13px / var(--k,1))/1.2 var(--body);color:#131316;white-space:nowrap;cursor:text;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;background:none;padding:0;border-radius:0}
.icv .it.frame.sel .lab2{cursor:text}
.icv .it.doodle{pointer-events:auto}
.icv .it.doodle>.body{background:none}
.icv .it.doodle svg{width:100%;height:100%;display:block;color:#131316}
.icv-dd{position:fixed;left:50%;top:calc(84px + env(safe-area-inset-top,0px) + 46px);translate:-50% 0;z-index:12;display:none;grid-template-columns:repeat(5,64px);gap:4px;padding:8px;border-radius:16px;background:#131316;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.icv-dd.on{display:grid}
/* the contextual bar: lives outside the zoomed world so it stays the same size at any zoom, like Figma's */
.icv-ctx{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:12;display:none;align-items:center;gap:10px;padding:6px 8px;border-radius:14px;background:#131316;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);max-width:calc(100vw - 24px)}
.icv-ctx.on{display:flex}
.icv-ctx .nm{width:170px;height:32px;border:0;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;font:600 13px/1 var(--body);padding:0 10px;outline:none}
.icv-ctx .nm:focus{box-shadow:0 0 0 2px #7CC4F2}
body.icv-editing .icv-ctx .nm,body.icv-editing .icv [contenteditable="true"]{cursor:text!important}
.icv-ctx .csw{display:flex;gap:6px}
.icv-ctx .csw button{width:22px;height:22px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);cursor:pointer;corner-shape:round!important}
.icv-ctx .csw button.on{box-shadow:0 0 0 2px #131316,0 0 0 4px #7CC4F2}
.icv-ctx .del,.icv-ctx .copy-link{height:32px;padding:0 11px;border:0;border-radius:9px;background:none;color:#fff;font:600 12px/1 var(--body);cursor:pointer}
.icv-ctx .copy-link{min-height:44px;display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.78);flex-shrink:0}
.icv-ctx .copy-link svg{width:15px;height:15px;flex-shrink:0}
.icv-ctx .copy-link:focus-visible{outline:2px solid #7CC4F2;outline-offset:2px}
.icv-ctx .tip{overflow:hidden;text-overflow:ellipsis;min-width:0}
.icv-ctx .del:hover,.icv-ctx .copy-link:hover{background:rgba(255,255,255,.14)}
.icv-ctx .tip{font:500 11px/1.2 var(--body);color:rgba(255,255,255,.55);white-space:nowrap;padding-right:4px}
.icv.drop::after{content:"Drop images to add them";position:absolute;inset:14px;border:2px dashed #7CC4F2;border-radius:24px;display:grid;place-items:center;font:600 16px/1 var(--body);color:#2F7FB8;background:rgba(169,222,255,.12);pointer-events:none;z-index:20}
.icv-dd button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:#fff;padding:6px 2px;border-radius:9px;cursor:pointer}
.icv-dd button:hover{background:rgba(255,255,255,.14)}
.icv-dd svg{width:26px;height:26px;fill:currentColor}
.icv-dd span{font:500 9px/1 var(--body);opacity:.75;white-space:nowrap}
.icv .it.sel>.body,.icv .it.picked>.body{outline:1.5px solid #7CC4F2;outline-offset:3px}
.icv .it.frame.sel>.body{outline-offset:0}
.icv .hdl{position:absolute;width:calc(12px / var(--k,1));height:calc(12px / var(--k,1));background:#fff;border:calc(1.5px / var(--k,1)) solid #7CC4F2;border-radius:calc(3px / var(--k,1));z-index:60;display:none;box-sizing:border-box}
.icv .it.sel .hdl{display:block}
.icv .hdl.rs{right:calc(-7px / var(--k,1));bottom:calc(-7px / var(--k,1));cursor:nwse-resize!important}
.icv .hdl.rs::after{content:"";position:absolute;inset:calc(-8px / var(--k,1))}
/* frame handles: eight of them, the same size on screen at any zoom */
.icv .fhov{position:absolute;pointer-events:none;z-index:70;box-shadow:0 0 0 calc(1.5px / var(--k,1)) #7CC4F2;border-radius:16px}
.icv .fhov .hdl.fh{display:block;pointer-events:auto}
.icv .hdl.fh{--s:calc(9px / var(--k,1));width:var(--s);height:var(--s);border-width:calc(1.5px / var(--k,1));border-radius:calc(2px / var(--k,1));
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);box-sizing:border-box}
.icv .hdl.fh::after{content:"";position:absolute;inset:calc(-6px / var(--k,1))}
.icv .hdl.fh[data-h=nw]{left:0;top:0;cursor:nwse-resize!important}.icv .hdl.fh[data-h=n]{left:50%;top:0;cursor:ns-resize!important}
.icv .hdl.fh[data-h=ne]{left:100%;top:0;cursor:nesw-resize!important}.icv .hdl.fh[data-h=e]{left:100%;top:50%;cursor:ew-resize!important}
.icv .hdl.fh[data-h=se]{left:100%;top:100%;cursor:nwse-resize!important}.icv .hdl.fh[data-h=s]{left:50%;top:100%;cursor:ns-resize!important}
.icv .hdl.fh[data-h=sw]{left:0;top:100%;cursor:nesw-resize!important}.icv .hdl.fh[data-h=w]{left:0;top:50%;cursor:ew-resize!important}

.icv .hdl.rt{left:50%;top:calc(-34px / var(--k,1));margin-left:calc(-6px / var(--k,1));border-radius:50%;cursor:grab!important}
.icv .hdl.rt::after{content:"";position:absolute;left:50%;top:calc(10px / var(--k,1));width:calc(1.5px / var(--k,1));height:calc(20px / var(--k,1));background:#7CC4F2;margin-left:calc(-.75px / var(--k,1))}
.icv [contenteditable="true"]{outline:none;cursor:text!important;user-select:text;-webkit-user-select:text}
.icv-toast{position:absolute;left:50%;bottom:90px;translate:-50% 0;z-index:12;background:var(--ink);color:#fff;font:600 13px/1 var(--body);padding:11px 15px;border-radius:12px;opacity:0;transition:opacity .25s;pointer-events:none}
.icv-toast.on{opacity:1}
@media (max-width:760px){.icv-pct{top:calc(76px + env(safe-area-inset-top,0px));right:12px}.icv-hint{display:none}.icv .cover h4{font-size:30px}}

/* ---------- about: the timeline as a git graph ---------- */
.jobs.git{padding-left:104px}
.jobs.git::before,.jobs.git .rail,.jobs.git .job::before{display:none!important}
.jobs.git .gitsvg{position:absolute;left:0;top:0;width:100px;height:100%;overflow:visible;pointer-events:none}
.gitsvg .ln{fill:none;stroke-width:2;stroke-linecap:round}
.gitsvg .ln.draw{stroke-dasharray:var(--L);stroke-dashoffset:calc(var(--L) * (1 - var(--gp,0)))}
.gitsvg .dot{stroke:var(--ink);stroke-width:1.5;transition:r .35s cubic-bezier(.34,1.8,.64,1),opacity .3s}
.gitsvg .dot.off{opacity:0}
.gitsvg .dot.hot{r:8}
.gitsvg .br{font:600 10px/1 var(--body);fill:var(--ink-soft)}
.gitsvg .brbg{fill:#fff;stroke:rgba(19,19,22,.15)}
.gitsvg .hs{font:400 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;fill:var(--ink-faint)}
.gitsvg .ct{font:400 17px/1 var(--hand);fill:var(--ink);opacity:0;transition:opacity .25s}
.gitsvg .ct.on{opacity:1}
.jobs.git .job .hash{display:block;margin-top:6px;font:400 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-faint)}
@media (max-width:760px){.jobs.git{padding-left:70px}.jobs.git .gitsvg{width:66px}}

/* ---------- services: your cursor becomes the tool for that kind of work ---------- */
.youcur[data-v=tool]>svg{opacity:0}
.youcur .tlico{position:absolute;left:-12px;top:-12px;width:26px;height:26px;border-radius:9px;background:#fff;border:1.5px solid var(--ink);display:none;place-items:center;color:var(--ink);
  box-shadow:0 6px 12px -6px rgba(19,19,22,.4);corner-shape:round}
.youcur[data-v=tool] .tlico{display:grid}
.youcur .tlico .tl{width:16px;height:16px;display:block}
.youcur[data-v=tool] b{top:18px;left:22px}

/* ---------- work: press and hold a card, it x-rays into its wireframe ---------- */
.wcard{-webkit-touch-callout:none;user-select:none}
.wcard.xray{background-color:#F4F9FF!important;border-color:#7CC4F2!important;
  background-image:linear-gradient(rgba(124,196,242,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(124,196,242,.35) 1px,transparent 1px)!important;background-size:12px 12px!important}
.wcard.xray *{background:transparent!important;color:#3F8FCB!important;box-shadow:none!important;outline:1px dashed #F25C8F;outline-offset:-1px}
.wcard.xray .glare,.wcard.xray .xl{outline:0}
.wcard.xray svg *{fill:none!important;stroke:#3F8FCB!important;stroke-width:1.2px}
.wcard .xl{position:absolute;z-index:4;font:600 9.5px/1 var(--body);color:#fff!important;background:#F25C8F!important;padding:3px 5px;border-radius:4px;pointer-events:none;opacity:0;
  transition:opacity .2s;white-space:nowrap}
.wcard.xray .xl{opacity:1}
.wcard .xscan{position:absolute;left:0;right:0;top:0;height:2px;background:#F25C8F;opacity:0;z-index:5;pointer-events:none;box-shadow:0 0 12px 2px rgba(242,92,143,.5)}
.wcard.xray .xscan{animation:xscan .55s cubic-bezier(.65,0,.35,1)}
@keyframes xscan{0%{opacity:1;translate:0 0}100%{opacity:0;translate:0 420px}}

/* =================== ROUND 7 =================== */
.youcur .tlico svg.tl{position:static!important;width:16px!important;height:16px!important;display:block;scale:1!important}
/* toolbars wear the same frosted glass as the nav */
.cv-bar,.icv-bar,.icv-pct{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),rgba(236,236,233,.62)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.5)!important;backdrop-filter:blur(18px) saturate(1.5)!important;border:.5px solid rgba(0,0,0,.12)!important}
/* work: the four cards sit in one row, built like the cards on the home page */
.wgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:48px}
.wcard{display:flex!important;flex-direction:column;padding:0!important;border-radius:36px!important;overflow:hidden;background:var(--paper)!important;
  border:1px solid var(--edge);box-shadow:var(--sh);min-height:100%}
.wcard .top{height:auto!important;aspect-ratio:1/.82;flex:none;display:grid;place-items:center;background:var(--swatch)}
/* Hourbit runs the full row, sideways: its screen on the left, the story on the right */
.wgrid .wcard.wide{grid-column:1/-1;flex-direction:row!important;height:250px;min-height:0}
.wcard.wide .top{aspect-ratio:auto!important;width:38%;height:100%;min-height:0}
.wcard.wide .bd{flex:1;align-self:center;padding:40px 52px!important;max-width:620px;border-top:0!important}
@media (min-width:701px){.wcard.wide .top .cph{left:50%!important;right:auto!important;width:auto!important;height:112%;aspect-ratio:390/844;top:9%;bottom:auto!important;
  translate:-50% 0!important;border-radius:26px!important;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.65)!important}}
.wcard.wide h3{font-size:30px!important}
.wcard.wide p{font-size:17px!important;line-height:1.55}
@media (max-width:700px){.wgrid .wcard.wide{flex-direction:column!important;min-height:0;height:auto}.wcard.wide .top{width:auto;min-height:0;aspect-ratio:1/.82}
  .wcard.wide .bd{padding:14px 14px 16px!important}.wcard.wide h3{font-size:16px!important}.wcard.wide p{font-size:13px!important}}
.wcard .top svg{width:34%!important;height:auto!important;aspect-ratio:1}
.wcard .bd{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px;border-top:1px solid var(--edge);gap:0}
.wcard .sub{font:500 11.5px/1 var(--body)!important;color:var(--ink-faint);margin:0 0 8px}
.wcard h3{font:700 19px/1.15 var(--pixel)!important;margin:0!important;letter-spacing:-.01em}
.wcard p{font-size:14px!important;line-height:1.5!important;margin:10px 0 0!important;color:var(--ink-soft)}
.wcard .go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--body);color:var(--ink)}
.wcard .go svg{width:14px;height:14px;transition:translate .3s cubic-bezier(.34,1.6,.64,1)}
.wcard:hover .go svg{translate:3px 0}
@media (max-width:1060px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.wgrid{gap:12px}.wcard{border-radius:26px!important}.wcard .bd{padding:14px 14px 16px}.wcard h3{font-size:16px!important}.wcard p{font-size:13px!important}}
/* the little bar under the cards */
.gobar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 12px 12px 26px;border:1px solid var(--edge);border-radius:24px;
  background:var(--paper-2);position:relative;overflow:hidden}
.gobar::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.1px);background-size:20px 20px;opacity:.6}
.gobar>*{position:relative;z-index:1}
.gobar p{margin:0;font:500 16px/1.35 var(--body);color:var(--ink)}
.gobar p span{font:400 24px/1 var(--hand);color:var(--ink-soft);margin-right:8px}
.gobar .btn{flex:none}
@media (max-width:640px){.gobar{flex-direction:column;align-items:flex-start;padding:18px}}
/* doodles on every page, and every doodle can be resized from its corner */
.page-head{position:relative}
.doo.pgd{z-index:3}
.doo .rz{pointer-events:none;position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;border-radius:4px;background:var(--hl,#FFD44E);border:1.5px solid var(--ink);
  opacity:0;scale:.5;transition:opacity .2s,scale .3s cubic-bezier(.34,1.8,.64,1);cursor:nwse-resize;touch-action:none;z-index:4;corner-shape:round}
.doo.sel .rz,.doo.sizing .rz,.fig.sel .rz,.fig.sizing .rz{opacity:1;scale:1;pointer-events:auto}
.fig{position:relative}.fig .rz{pointer-events:none;position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;border-radius:4px;background:#FFD44E;border:1.5px solid var(--ink);opacity:0;scale:.5;transition:opacity .2s,scale .3s cubic-bezier(.34,1.8,.64,1);cursor:nwse-resize;touch-action:none;z-index:4}
.doo[data-dd=read]{--hl:#A9DEFF}.doo[data-dd=sketch]{--hl:#E7BBFF}.doo[data-dd=push]{--hl:#B4F6B8}.doo[data-dd=mag]{--hl:#FFD44E}.doo[data-dd=chai]{--hl:#FFD44E}.doo[data-dd=cards]{--hl:#E7BBFF}
@media (max-width:900px){.doo.pgd{display:none}}
/* the contact page already asks the question in its header; the block below doesn't repeat it */
#v-contact{min-height:100px}#v-contact>.page-head{display:none}
@media (hover:none){.doo .rz{width:18px;height:18px;right:-9px;bottom:-9px}}

/* nav on smaller screens: first the labels go and every page stays as an icon chip;
   on a phone it's the glasses, the cards (on home), the arrow, and a menu for the pages */
.burger{display:none;width:34px;height:34px;border-radius:15px;background:#fff;border:0;align-items:center;justify-content:center;flex:none;cursor:pointer;color:var(--ink);padding:0}
.burger svg{width:18px;height:18px}
.burger .l1,.burger .l2,.burger .l3{transition:transform .3s cubic-bezier(.34,1.5,.64,1),opacity .2s;transform-origin:12px 12px}
.burger.open .l1{transform:translateY(5px) rotate(45deg)}.burger.open .l2{opacity:0}.burger.open .l3{transform:translateY(-5px) rotate(-45deg)}
/* the menu button (Oct 25, Hardik): two lines that cross into an X while the menu is open */
.burger .k1,.burger .k2{transition:transform .3s cubic-bezier(.34,1.5,.64,1);transform-origin:12px 12px}.burger.open .k1{transform:translateY(3px) rotate(45deg)}.burger.open .k2{transform:translateY(-3px) rotate(-45deg)}
.navmenu{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));right:12px;left:12px;pointer-events:auto;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),rgba(236,236,233,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:.5px solid rgba(0,0,0,.12);box-shadow:0 20px 40px -20px rgba(19,19,22,.35);opacity:0;visibility:hidden;translate:0 -8px;scale:.97;transform-origin:50% 0;
  transition:opacity .2s,translate .35s cubic-bezier(.34,1.5,.64,1),scale .35s cubic-bezier(.34,1.5,.64,1),visibility 0s .35s}
.navmenu.on{opacity:1;visibility:visible;translate:0 0;scale:1;transition-delay:0s}
.navmenu a{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;font:600 15px/1 var(--body);border:2px solid transparent}
.navmenu a .ic{width:18px;height:18px}
.navmenu a.here{border-color:var(--hc,#A9DEFF)}
.navmenu a[data-r="/"]{--hc:#A9DEFF}.navmenu a[data-r="/about"]{--hc:#FFD44E}.navmenu a[data-r="/work"]{--hc:#B4F6B8}.navmenu a[data-r="/offer"]{--hc:#E7BBFF}.navmenu a[data-r="/gallery"]{--hc:#131316}
@media (max-width:1000px){
  .nav a[data-r]:not(.cta) .lbl{display:none}
  .nav a[data-r]:not(.cta) .ic{display:block!important}
  .nav a[data-r]:not(.cta){display:inline-flex!important;width:36px;padding:0!important;justify-content:center}
}
@media (max-width:820px){.nav a[data-r]:not(.cta){width:34px}}
@media (max-width:560px){
  .nav a[data-r]:not(.cta){display:none!important}
  .nav .cta{display:none!important}
  .burger{display:inline-flex}
  .nav{gap:8px!important;padding:5px 5px 5px 10px!important}
  #navSlot{margin-right:6px!important}
}
.navmenu .foot2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:10px 6px 4px 10px}
.navmenu .avl{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--body);color:var(--ink-soft)}
.navmenu .avl i{width:8px;height:8px;border-radius:50%;background:#8EDB94;box-shadow:0 0 0 3px rgba(142,219,148,.3);corner-shape:round}
.navmenu a.navbook{height:46px;padding:0 18px;background:var(--ink);color:var(--paper);border:0;gap:8px;font:600 14px/1 var(--body);box-shadow:var(--stack4,0 3px 0 rgba(0,0,0,.2))}
.navmenu a.navbook svg{width:16px;height:16px}
@media (min-width:561px){.navmenu{display:none}}

/* =================== ROUND 8: free doodles =================== */
main{overflow-x:clip}
.doolayer{position:absolute;left:0;top:0;width:100%;height:0;overflow:visible;z-index:40;pointer-events:none}
.doolayer>.doo,.doolayer>.fig{pointer-events:auto}
.doo.lifted,.fig.lifted{position:absolute!important;margin:0!important;animation:none!important;opacity:1!important}
.fig.lifted{cursor:grab}
.ghostph{pointer-events:none!important;visibility:hidden!important}
.doo.lifted.drag,.fig.lifted.drag{cursor:grabbing;z-index:5}
/* headings arrive one character at a time: each letter fades up in turn (opacity + translate only, so the compositor runs it) */
.rv.chs{opacity:1!important;translate:none!important}
.chs .cw{display:inline-block;white-space:nowrap}
.chs .cx{display:inline-block;opacity:0;translate:0 .3em;
  transition:opacity .45s ease,translate .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 26ms)}
.chs.in .cx{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.chs .cx{opacity:1;filter:none;translate:none;transition:none}}

/* =================== ROUND 9: work cards hover like the home cards =================== */
.wveil{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;visibility:hidden;overflow:hidden;background:var(--paper);--cx:50vw;--cy:40vh;
  transition:opacity .35s ease,visibility 0s linear .35s}
.wveil.on{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.wfeats{z-index:7!important}
#wgrid .wcard{transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s,border-color .35s,opacity .35s}
/* only the hovered card rises above the veil; the rest sink under the paper with the page, like home */
#wgrid.hot .wcard.hot{z-index:6;position:relative}

/* =================== ROUND 10: rich case study layout =================== */
.cs-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:38px 0 0;border:1px solid var(--edge);border-radius:22px;overflow:hidden;background:var(--edge)}
.cs-meta>div{background:var(--paper);padding:16px 18px;display:flex;flex-direction:column;gap:7px}
.cs-meta span{font:500 11px/1 var(--body);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em}
.cs-meta b{font:600 14px/1.35 var(--body);color:var(--ink)}
.cs-quote{margin:44px auto 0;max-width:30ch;text-align:center;font:400 clamp(26px,3.2vw,38px)/1.15 var(--hand);color:var(--ink)}
.cs-sec{position:relative;margin-top:clamp(70px,9vw,120px)}
.cs-sec>h2{margin:6px 0 0;text-align:left}
.cs-n{font:400 13px/1 var(--pixel);color:var(--ink-faint)}
.cs-p{max-width:64ch;margin:18px 0 0;font:400 17px/1.6 var(--body);color:var(--ink-soft)}
.cs-sec.draft::after{content:"draft · Hardik to confirm";position:absolute;right:0;top:0;font:600 11px/1 var(--body);padding:6px 9px;border-radius:8px;background:#FFE7F0;color:#B03060}
.cs-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.cs-person{background:var(--paper);border:1px solid var(--edge);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:6px}
.cs-person i{width:44px;height:44px;border-radius:14px;background:var(--pc);display:grid;place-items:center;font:400 20px/1 var(--pixel);font-style:normal;color:var(--ink);margin-bottom:6px}
.cs-person b{font:700 17px/1.2 var(--pixel)}
.cs-person span{font:500 12px/1.3 var(--body);color:var(--ink-faint)}
.cs-person p{margin:8px 0 0;font:400 14px/1.5 var(--body);color:var(--ink-soft)}
.cs-person q{margin-top:auto;padding-top:14px;font:400 20px/1.1 var(--hand);color:var(--ink)}
.cs-sketches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:34px}
.cs-sketches figure{margin:0;background:#fff;padding:8px 8px 10px;border-radius:4px;box-shadow:0 1px 2px rgba(19,19,22,.08),0 16px 30px -18px rgba(19,19,22,.35);rotate:var(--r);
  transition:rotate .4s cubic-bezier(.34,1.6,.64,1),scale .4s cubic-bezier(.34,1.6,.64,1);corner-shape:round}
.cs-sketches figure:hover{rotate:0deg;scale:1.04;z-index:2;position:relative}
.cs-sketches img{width:100%;height:auto;display:block;border-radius:2px;aspect-ratio:auto}
.cs-sketches figcaption{margin-top:8px;font:400 18px/1 var(--hand);color:var(--ink);text-align:center}
.cs-flow{margin-top:30px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;padding:26px;border:1px solid var(--edge);border-radius:26px;background:var(--paper)}
.cs-flow .ins,.cs-flow .outs{display:flex;flex-wrap:wrap;gap:8px}
.cs-flow .outs{justify-content:flex-end}
.cs-flow span{font:600 13px/1 var(--body);padding:10px 13px;border-radius:12px;background:#fff;border:1.5px solid var(--ink)}
.cs-flow .outs span{background:#FFD44E}
.cs-flow .mid{display:flex;align-items:center;gap:10px}
.cs-flow .mid b{font:400 22px/1.1 var(--hand);text-align:center;max-width:12ch}
.cs-flow svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cs-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:st}
.cs-steps li{counter-increment:st;padding:20px;border-radius:22px;border:1px solid var(--edge);background:var(--paper)}
.cs-steps li::before{content:counter(st);display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;font:400 14px/1 var(--pixel);margin-bottom:14px}
.cs-steps b{font:700 16px/1.25 var(--pixel)}
.cs-steps p{margin:8px 0 0;font:400 14px/1.55 var(--body);color:var(--ink-soft)}
.cs-screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:30px}
.cs-screens figure{margin:0}
.cs-screens .ph{aspect-ratio:390/844;border-radius:30px;background:#000;border:6px solid #1c1c1f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#FFBD00}
.cs-screens .ph span{font:400 18px/1 var(--pixel)}
.cs-screens .ph small{font:500 11px/1 var(--body);color:#71717A}
.cs-screens figcaption{margin-top:12px;font:400 13.5px/1.45 var(--body);color:var(--ink-soft)}
.cs-screens figcaption b{display:block;font:700 15px/1.2 var(--pixel);color:var(--ink);margin-bottom:3px}
.cs-sys{margin-top:30px;display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.cs-sys .swc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cs-sys .swc>div{border:1px solid var(--edge);border-radius:18px;padding:10px;background:var(--paper);display:flex;flex-direction:column;gap:4px}
.cs-sys .swc i{height:56px;border-radius:12px;border:1px solid rgba(19,19,22,.12);margin-bottom:6px}
.cs-sys .swc b{font:600 13px/1.2 var(--body)}
.cs-sys code{font:500 11px/1 ui-monospace,Menlo,monospace;color:var(--ink-faint)}
.cs-sys dl{margin:0;border:1px solid var(--edge);border-radius:22px;background:var(--paper);padding:6px 18px}
.cs-sys dl>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--edge)}
.cs-sys dl>div:last-child{border-bottom:0}
.cs-sys dt{font:500 13px/1.3 var(--body);color:var(--ink-soft)}.cs-sys dd{margin:0;font:600 13px/1.3 var(--body);text-align:right}
.cs-dec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}
.cs-dec>div{padding:22px;border-radius:24px;border:1px solid var(--edge);background:var(--paper);position:relative;overflow:hidden}
.cs-dec>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--dc)}
.cs-dec b{font:700 17px/1.25 var(--pixel)}
.cs-dec p{margin:8px 0 0;font:400 15px/1.55 var(--body);color:var(--ink-soft)}
.cs-cta{margin-top:90px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 28px;border-radius:28px;background:#131316;color:#fff}
.cs-cta h3{margin:0;font:700 22px/1.2 var(--pixel);color:#fff}
.cs-cta p{margin:6px 0 0;font:400 15px/1.5 var(--body);color:#C9C9CF}
.cs-cta .btn{background:#FFD44E;color:var(--ink);flex:none}
@media (max-width:1000px){.cs-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-people,.cs-steps,.cs-screens,.cs-sketches{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-sys{grid-template-columns:1fr}}
@media (max-width:640px){.cs-flow{grid-template-columns:1fr}.cs-flow .outs{justify-content:flex-start}.cs-flow .mid{justify-content:center}.cs-dec{grid-template-columns:1fr}.cs-cta{flex-direction:column;align-items:flex-start}
  .cs-people{grid-template-columns:1fr}.cs-sys .swc{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =================== ROUND 11 =================== */
.mag{translate:none!important}
/* links row */
.cs-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.cs-link svg.lg{fill:none;stroke:none;width:18px;height:18px}.cs-link.lk-fig svg.lg{width:13px}
.cs-link{display:inline-flex;align-items:center;gap:9px;padding:11px 14px 11px 12px;border-radius:14px;border:1px solid var(--edge);background:var(--paper);color:var(--ink);text-decoration:none;font:600 14px/1 var(--body);transition:border-color .25s,background .25s}
.cs-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cs-link .ne{width:14px;height:14px;opacity:.45;transition:opacity .25s,translate .25s}
.cs-link:hover{border-color:var(--ink)}.cs-link:hover .ne{opacity:1;translate:2px -2px}
.cs-link.lk-fig svg:first-child{color:#A259FF}.cs-link.lk-gh svg:first-child{color:#131316}.cs-link.lk-no svg:first-child{color:#131316}
/* paper to code pipeline */
.cs-pipe{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:pp}
.cs-pipe li{counter-increment:pp;position:relative;padding:16px 18px 18px;border:1px solid var(--edge);background:var(--paper);margin-left:-1px}
.cs-pipe li:first-child{border-radius:20px 0 0 20px;margin-left:0}.cs-pipe li:last-child{border-radius:0 20px 20px 0}
.cs-pipe li::before{content:counter(pp,decimal-leading-zero);display:inline-block;font:400 11px/1 var(--pixel);padding:5px 7px;border-radius:7px;background:var(--pc);margin-bottom:12px}
.cs-pipe li:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;background:var(--paper);border-top:1px solid var(--edge);border-right:1px solid var(--edge);rotate:45deg;translate:0 -50%;z-index:1}
.cs-pipe b{display:block;font:700 16px/1.2 var(--pixel)}
.cs-pipe span{display:block;margin-top:6px;font:400 13.5px/1.45 var(--body);color:var(--ink-soft)}
.cs-sketches figure{cursor:zoom-in}
/* ---------- cover canvas ---------- */
.acv{position:relative;width:min(1180px,calc(100vw - 40px));left:50%;translate:-50% 0;height:clamp(440px,50vw,600px);margin:26px 0 34px;border-radius:24px;overflow:hidden;border:1px solid var(--edge);
  background-color:#F3F3F1;background-image:radial-gradient(circle,rgba(19,19,22,.16) 1px,transparent 1.3px);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;--iz:1}
.acv.acv-grab{cursor:grabbing}.acv.acv-live{touch-action:none}
.acv:focus-visible{box-shadow:0 0 0 3px #0D99FF}
.acv-world{position:absolute;left:0;top:0;transform-origin:0 0}
.af{position:absolute;background:#000}
.af img{display:block;width:100%;height:100%;pointer-events:none}
.af .an{position:absolute;left:0;bottom:100%;padding-bottom:calc(6px * var(--iz));font:500 11px/1 Inter,system-ui,sans-serif;color:#8C8C8C;white-space:nowrap;
  transform:scale(var(--iz));transform-origin:0 100%;pointer-events:none}
.af:hover{outline:calc(1.5px * var(--iz)) solid #0D99FF}
.af.afsel{outline:calc(2px * var(--iz)) solid #0D99FF}
.af.afsel .an{color:#0D99FF}
.af.afsel::after{content:attr(data-wh);position:absolute;left:50%;top:100%;margin-top:calc(8px * var(--iz));transform:translateX(-50%) scale(var(--iz));transform-origin:50% 0;
  background:#0D99FF;color:#fff;font:600 10.5px/1 Inter,system-ui,sans-serif;padding:4px 6px;border-radius:4px;white-space:nowrap}
.acv-logo{background:#000;display:flex;align-items:center;justify-content:center;gap:54px}
.acv-logo.afsel::after{content:"860×380"}
.acv-face{width:200px;color:#FFCC00;display:block}.acv-face svg,.acv-word svg{display:block;width:100%;height:auto}
.acv-word{width:360px;color:#fff;display:block}
.acv .af{opacity:0;translate:0 24px;transition:opacity .6s ease,translate .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0) * 45ms + 120ms)}
.acv .acv-logo{transition-delay:0ms;translate:0 0;scale:.94;transition:opacity .6s ease,scale .8s cubic-bezier(.34,1.4,.64,1)}
.acv.isin .af{opacity:1;translate:0 0;scale:1}
.acv-top{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:3;pointer-events:none;
  background:#fff;border-bottom:1px solid var(--edge)}
.acv-file{display:flex;align-items:center;gap:8px;font:600 12.5px/1 Inter,system-ui,sans-serif;color:#131316}
.acv-file i{width:20px;height:20px;border-radius:6px;background:#000;color:#FFCC00;display:grid;place-items:center;padding:3px}
.acv-file i svg{width:100%;height:auto;display:block}
/* Figma-style sections that hold each chapter of the story */
.asec{position:absolute;background:rgba(255,255,255,.55);border:calc(1px * var(--iz)) solid rgba(19,19,22,.12);border-radius:calc(6px * var(--iz))}
.asn{position:absolute;left:calc(14px * var(--iz));top:calc(12px * var(--iz));transform:scale(var(--iz));transform-origin:0 0;white-space:pre;
  font:600 12px/1 Inter,system-ui,sans-serif;color:#131316;background:#fff;border:1px solid rgba(19,19,22,.14);padding:6px 9px;border-radius:7px;pointer-events:none}
.acv-tip{font:500 11.5px/1 var(--body);color:var(--ink-faint)}
.acv-bar{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:3;display:flex;align-items:center;gap:2px;padding:5px;border-radius:14px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--edge);box-shadow:0 8px 24px -14px rgba(19,19,22,.35)}
.acv-bar button{height:30px;min-width:30px;padding:0 8px;border:0;border-radius:9px;background:transparent;font:600 15px/1 var(--body);color:var(--ink);cursor:pointer}
.acv-bar button:hover{background:rgba(19,19,22,.06)}
.acv-bar .zfit{font-size:12.5px}
.acv-pct{min-width:46px;text-align:center;font:600 12px/1 ui-monospace,Menlo,monospace;color:var(--ink-soft)}
.acv-hint{position:absolute;right:14px;bottom:20px;margin:0;z-index:3;font:500 11.5px/1 var(--body);color:var(--ink-faint);pointer-events:none}
.acv-hint .touch{display:none}
.acv-done{position:absolute;right:12px;top:6px;z-index:4;display:none;height:28px;padding:0 12px;border-radius:9px;border:0;background:#0D99FF;color:#fff;font:600 12.5px/1 var(--body);cursor:pointer}
@media (hover:none){.acv-hint .fine{display:none}.acv-hint .touch{display:inline}.acv.acv-live .acv-done{display:block}.acv.acv-live .acv-hint{display:none}}
@media (max-width:760px){.acv{width:calc(100vw - 24px);border-radius:20px}.acv-hint{left:14px;right:auto;bottom:62px}.acv-hint .fine{display:none}.acv-tip{display:none}}
/* click to explore: an inactive canvas never takes the wheel, the hint says how to wake it */
.acv-hint .off{display:none}
@media (hover:hover){.acv:not(.acv-live) .acv-hint{padding:8px 12px;border-radius:999px;background:rgba(19,19,22,.86);color:#fff;font-weight:600;box-shadow:0 8px 22px -12px rgba(19,19,22,.5)}
  .acv:not(.acv-live) .acv-hint .fine{display:none}.acv:not(.acv-live) .acv-hint .off{display:inline}.acv:not(.acv-live){cursor:pointer}}
@media (hover:none){.acv:not(.acv-live) .acv-hint{padding:8px 12px;border-radius:999px;background:rgba(19,19,22,.86);color:#fff;font-weight:600}}
.acv.acv-live .acv-done{display:block}
/* ---------- the stage ---------- */
.stg{position:relative;width:min(1180px,calc(100vw - 40px),calc((100vh - 170px) * 1.935));left:50%;translate:-50% 0;margin-top:34px}
.stg-in{position:relative;aspect-ratio:1200/620;border-radius:28px;background:#F3F3F1;background-image:radial-gradient(circle,rgba(19,19,22,.13) 1px,transparent 1.3px);background-size:22px 22px;border:1px solid var(--edge)}
.stp{position:absolute;margin:0;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--ar);rotate:var(--r);cursor:zoom-in;z-index:2;
  border-radius:clamp(6px,1vw,14px);overflow:hidden;background:#000;box-shadow:0 2px 4px rgba(0,0,0,.08),0 22px 40px -16px rgba(19,19,22,.45);
  transition:rotate .45s cubic-bezier(.34,1.5,.64,1),scale .45s cubic-bezier(.34,1.5,.64,1),box-shadow .45s,opacity .6s ease,translate .6s cubic-bezier(.22,1,.36,1);outline:none}
.stp img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.stp:hover,.stp:focus-visible{rotate:0deg;scale:1.12;z-index:30;box-shadow:0 2px 4px rgba(0,0,0,.08),0 40px 70px -20px rgba(19,19,22,.55)}
.stg .stp,.stg .slab{opacity:0;translate:0 18px}
.stg.isin .stp,.stg.isin .slab{opacity:1;translate:0 0;transition-delay:calc(var(--i) * 60ms)}
.stg.isin .stp:hover{transition-delay:0s}
.slab{position:absolute;left:var(--x);top:calc(var(--y) - 5.2%);display:flex;align-items:center;gap:6px;font:400 clamp(14px,1.5vw,19px)/1 var(--hand);color:var(--ink);white-space:nowrap;pointer-events:none;transition:opacity .6s ease,translate .6s ease}
.slab b{font:400 10px/1 var(--pixel);padding:3px 5px;border-radius:5px;background:#FFD44E;color:var(--ink)}
.slab[style*="--i:8"]{top:calc(var(--y) + 8%);left:calc(var(--x) + 20.5%)}
.itr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px;width:min(1180px,calc(100vw - 40px));position:relative;left:50%;translate:-50% 0}
.itr-row{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:20px;border:1px solid var(--edge);border-radius:26px;background:var(--paper)}
.itr-pair{display:flex;align-items:center;gap:12px}
.itr-f{position:relative;margin:0;width:128px;cursor:zoom-in;transition:scale .35s cubic-bezier(.34,1.5,.64,1)}
.itr-f:hover{scale:1.05}
.itr-f img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 14px 28px -16px rgba(19,19,22,.5)}
.itr-f.v1 img{filter:grayscale(.35);opacity:.9}
.itr-tag{position:absolute;left:8px;top:-10px;z-index:1;font:600 11px/1 var(--body);padding:5px 8px;border-radius:8px;background:#fff;border:1px solid var(--edge)}
.itr-tag.y{background:#FFD44E;border-color:#FFD44E}
.itr-ar{width:34px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.itr-t b{font:700 18px/1.2 var(--pixel)}.itr-t p{margin:8px 0 0;font:400 15px/1.55 var(--body);color:var(--ink-soft);max-width:40ch}
@media (max-width:1100px){.itr{grid-template-columns:1fr}}
@media (max-width:760px){
  .itr{width:auto;left:0;translate:none}.itr-row{grid-template-columns:1fr;gap:16px}.itr-f{width:calc(50% - 29px)}.itr-pair{justify-content:center}
  .stg{width:calc(100vw - 24px)}
  .stg-in{aspect-ratio:390/1750;border-radius:24px}
  .stp{left:var(--mx);top:var(--my);width:var(--mw);rotate:0deg;border-radius:12px}
  .slab{left:var(--mx);top:calc(var(--my) - 1.6%)}
  .stp.dh,.slab.dh{display:none}}
/* ---------- components ---------- */
.cmp-sets{display:grid;grid-template-columns:1.1fr 1.2fr 1.2fr 1.1fr;gap:16px;margin-top:30px;align-items:start}
.cset{margin:0;cursor:zoom-in}
.cset-n{display:flex;align-items:center;gap:6px;font:600 12px/1 Inter,system-ui,sans-serif;color:#9747FF;margin-bottom:8px}
.cset-n svg{width:11px;height:11px;fill:#9747FF}
.cset-n{flex-wrap:wrap;row-gap:4px}.cset-n small{flex-basis:100%;font-weight:400;color:var(--ink-faint);padding-left:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cset-b{border:1.5px dashed #9747FF;border-radius:10px;padding:10px;background:#fff;transition:background .3s}
.cset:hover .cset-b{background:#F7F0FF}
.cset img{display:block;width:100%;height:auto;border-radius:6px}
.cmp-live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.demo{display:flex;flex-direction:column;gap:12px}
.demo-s{position:relative;height:230px;border-radius:24px;background:#0B0B0C;overflow:hidden;display:grid;place-items:center;
  background-image:radial-gradient(circle at 50% 120%,rgba(255,204,0,.14),transparent 60%)}
.demo p{margin:0;font:400 14px/1.5 var(--body);color:var(--ink-soft)}
.demo p b{display:block;font:700 15px/1.2 var(--pixel);color:var(--ink);margin-bottom:4px}
.demo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.np{display:flex;gap:4px;padding:6px;border-radius:999px;background:#18181B;border:1px solid #27272A}
.np button{display:flex;align-items:center;gap:0;height:42px;padding:0 12px;border-radius:999px;border:0;background:transparent;color:#A1A1AA;cursor:pointer;font:500 13.5px/1 system-ui,sans-serif;
  transition:background .35s,color .35s,gap .35s}
.np .lb{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .4s cubic-bezier(.22,1,.36,1),opacity .3s}
.np button.act{color:#FFCC00;gap:7px;background:rgba(255,204,0,.08)}
.np button.act .lb{max-width:90px;opacity:1}
.np button:focus-visible{outline:2px solid #FFCC00;outline-offset:1px}
.tray{position:relative;display:flex;align-items:center;justify-content:flex-end;width:100%;padding:0 18px}
.tray .dfab{padding:0!important;min-width:0!important;aspect-ratio:1;border-radius:50%!important;overflow:hidden}
.dfab{width:54px;height:54px;border-radius:50%;border:0;background:#000;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;box-shadow:0 0 0 1px #27272A;
  transition:background .35s,color .35s,rotate .45s cubic-bezier(.34,1.5,.64,1)}
.dfab svg{width:24px;height:24px}
.tray.is-open .dfab{background:#FFCC00;color:#000;rotate:135deg;box-shadow:none}
.tray-o{position:absolute;right:62px;top:50%;translate:0 -50%;display:flex;gap:2px;padding:6px 8px;border-radius:999px;background:#18181B;border:1px solid #27272A;
  transform-origin:100% 50%;scale:.2 .6;opacity:0;pointer-events:none;transition:scale .45s cubic-bezier(.34,1.3,.64,1),opacity .25s}
.tray.is-open .tray-o{scale:1;opacity:1;pointer-events:auto}
.tray-o button{display:flex;flex-direction:column;align-items:center;gap:4px;width:44px;padding:6px 0;border:0;border-radius:12px;background:transparent;color:#E4E4E7;cursor:pointer;
  opacity:0;translate:14px 0;transition:opacity .3s,translate .4s cubic-bezier(.34,1.5,.64,1),background .2s}
.tray.is-open .tray-o button{opacity:1;translate:0 0;transition-delay:calc((4 - var(--k)) * 45ms + 80ms)}
.tray-o button:hover{background:#27272A}
.tray-o button:first-child{color:#FFCC00}
.tray-o span{font:500 9.5px/1 system-ui,sans-serif}
.tray-o .aa{font:400 18px/20px system-ui,sans-serif;font-style:normal}
@media (max-width:1100px) and (min-width:761px){.tray-o button{width:36px}.tray-o span{display:none}}
.atk{position:relative;width:calc(100% - 36px);max-width:300px;padding:14px;border-radius:18px;background:#18181B;border:1px solid #27272A;color:#fff}
.atk-h{font:500 15px/1 system-ui,sans-serif;display:block;margin-bottom:8px}
.atk-l{list-style:none;margin:0;padding:0}
.atk-l li{display:flex;align-items:center;gap:10px;padding:8px 0;overflow:hidden}
.atk-l span{font:400 13px/1.3 system-ui,sans-serif;color:#E4E4E7}
.cb{flex:none;width:18px;height:18px;border-radius:4px;border:1.5px solid #71717A;background:transparent;cursor:pointer;position:relative;padding:0;transition:border-color .2s,background .2s}
.cb::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #000;border-width:0 2px 2px 0;rotate:45deg;scale:0;transition:scale .2s cubic-bezier(.34,1.8,.64,1)}
.tkgo .cb{background:#FFCC00;border-color:#FFCC00}.tkgo .cb::after{scale:1}
.cb:hover{border-color:#FFCC00}
.atk-done{display:inline-block;margin-top:8px;font:500 11px/1 ui-monospace,Menlo,monospace;color:#71717A}
.atk-done b{color:#FFCC00;display:inline-block}
.atk-re{display:none;margin-top:10px;height:30px;padding:0 12px;border-radius:9px;border:1px solid #27272A;background:transparent;color:#FFCC00;font:500 12px/1 system-ui,sans-serif;cursor:pointer}
.atk.atk-empty .atk-re{display:block}
.dust{position:absolute;width:3px;height:3px;border-radius:1px;background:#fff;pointer-events:none;z-index:3}
/* typography */
.cs-type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.cs-type>div{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;padding:18px 20px;border:1px solid var(--edge);border-radius:22px;background:var(--paper)}
.cs-type i{grid-row:span 2;font-style:normal;font-size:54px;line-height:1;font-weight:500;width:84px;height:84px;display:grid;place-items:center;border-radius:18px;background:#000;color:#FFCC00}
.cs-type b{font:700 15px/1.2 var(--pixel)}
.cs-type p{margin:4px 0 0;font:400 13.5px/1.45 var(--body);color:var(--ink-soft)}
/* ---------- lightbox + apk popup ---------- */
html.lbx-lock{overflow:hidden}
.lbx,.apkm{position:fixed;inset:0;z-index:150;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s linear .3s}
.lbx.is-open,.apkm.is-open{visibility:visible;opacity:1;transition:opacity .3s ease,visibility 0s}
/* just out of focus: a soft blur and a light wash, no grain, no motion */
.lbx-bg{position:absolute;inset:0;background:rgba(246,246,243,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
.youcur{z-index:400!important}
.lbx-fig{position:relative;margin:0;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:calc(100vw - 150px);touch-action:none}
.lbx-fig img{display:block;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;border-radius:8px;background:#fff;
  box-shadow:0 2px 6px rgba(19,19,22,.08),0 40px 90px -30px rgba(19,19,22,.5);user-select:none;-webkit-user-drag:none}
.lbx-fig figcaption{font:400 26px/1 var(--hand);color:var(--ink)}
.lbx-x,.lbx-a{position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid var(--edge);background:rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer;color:var(--ink);
  transition:background .2s,scale .2s}
.lbx-x:hover,.lbx-a:hover{background:#fff;scale:1.06}
.lbx-x svg,.lbx-a svg,.apk-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lbx-x{top:20px;right:20px}
.lbx-a{top:50%;translate:0 -50%}.lbx-a.lbx-prev{left:24px}.lbx-a.lbx-next{right:24px}
.lbx-a[hidden]{display:none}
.lbx-c{position:absolute;left:50%;bottom:20px;translate:-50% 0;z-index:2;font:400 13px/1 var(--pixel);color:var(--ink-soft)}
.lbx .lbx-fig{scale:.96;transition:scale .4s cubic-bezier(.22,1,.36,1)}.lbx.is-open .lbx-fig{scale:1}
@media (max-width:700px){.lbx-fig{max-width:calc(100vw - 32px)}.lbx-fig img{max-height:calc(100dvh - 190px)}.lbx-a{top:auto;bottom:10px;translate:none;width:44px;height:44px}.lbx-a.lbx-prev{left:16px}.lbx-a.lbx-next{right:16px}.lbx-c{bottom:26px}
  .lbx-x{top:12px;right:12px}}
.apk-card{position:relative;z-index:1;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:28px;border-radius:28px;background:var(--paper);border:1px solid var(--edge);
  box-shadow:0 40px 90px -30px rgba(19,19,22,.5);display:flex;flex-direction:column;gap:12px;scale:.95;translate:0 12px;transition:scale .45s cubic-bezier(.34,1.4,.64,1),translate .45s cubic-bezier(.34,1.4,.64,1)}
.apkm.is-open .apk-card{scale:1;translate:0 0}
.apk-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(19,19,22,.05);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.apk-ic{width:52px;height:52px;border-radius:16px;background:#000;color:#FFCC00;display:grid;place-items:center;padding:10px}
.apk-ic svg{width:100%;height:auto}
.apk-card h3{margin:4px 0 0;font:700 24px/1.15 var(--pixel);color:var(--ink)}
.apk-lede{margin:0 0 4px;font:400 15px/1.5 var(--body);color:var(--ink-soft)}
.apk-card label{display:flex;flex-direction:column;gap:6px}
.apk-card label span{font:600 13px/1 var(--body);color:var(--ink)}
.apk-card label em{font-style:normal;font-weight:400;color:var(--ink-faint)}
.apk-card input,.apk-card textarea{font:400 15px/1.4 var(--body);color:var(--ink);padding:12px 14px;border-radius:14px;border:1px solid var(--edge);background:#fff;outline:none;resize:vertical;transition:border-color .2s,box-shadow .2s}
.apk-card input:focus,.apk-card textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,212,78,.55)}
.apk-err{margin:0;min-height:0;font:500 13px/1.3 var(--body);color:#C0392B}
.apk-err:empty{display:none}
.apk-go{align-self:stretch;justify-content:center;margin-top:4px;background:#FFD44E;color:var(--ink)}
.apk-ok{display:none;flex-direction:column;align-items:flex-start;gap:10px}
.apk-card.sent>*:not(.apk-ok):not(.apk-x){display:none}
.apk-card.sent .apk-ok{display:flex}
.apk-ok p{margin:0;font:400 15px/1.5 var(--body);color:var(--ink-soft)}
.apk-ok .apk-small{font-size:13px}.apk-ok a{color:var(--ink)}
.apk-tick{width:52px;height:52px;border-radius:16px;background:#B4F6B8;display:grid;place-items:center}
.apk-tick svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:tickd .5s .15s ease forwards}
@keyframes tickd{to{stroke-dashoffset:0}}
/* ---------- the Alter card cover ---------- */
.card-art.hascv,.wcard .top.hascv{display:block!important;background:#FFCC00;overflow:hidden}
.wcard .top.hascv{position:relative}
.ccv{position:absolute;inset:0;display:block;background:#FFCC00}
.cph{position:absolute;left:50%;bottom:0;width:72%;aspect-ratio:390/844;translate:-50% 5%;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);transition:translate .5s cubic-bezier(.34,1.4,.64,1)}
.cph img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.cph .c2{clip-path:circle(0% at 88.65% 80.06%);transition:clip-path .55s cubic-bezier(.22,1,.36,1)}
.ccv.open .c2{clip-path:circle(150% at 88.65% 80.06%)}
.cfab{position:absolute;left:88.65%;top:80.06%;width:14.4%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#FFCC00;color:#000;display:grid;place-items:center;cursor:pointer;z-index:2;
  transition:rotate .45s cubic-bezier(.34,1.5,.64,1)}
.cfab::after{content:"";position:absolute;inset:0;border-radius:50%;corner-shape:round!important;background:#FFCC00;z-index:-1;opacity:0;--po:.7;--ps:1.7;animation:ping 2.4s ease-out infinite;pointer-events:none}
.cfab svg{width:48%;height:48%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.ccv.open .cfab{rotate:135deg}.ccv.open .cfab::after{animation:none}
.card:hover .cph,.wcard:hover .cph{translate:-50% 2%}
.wcard.xray .ccv{filter:grayscale(1) invert(1) sepia(1) hue-rotate(170deg) saturate(2.4) contrast(.9)}
/* ---------- progressive blur on the bottom edge ---------- */
.eblur{position:fixed;left:0;right:0;bottom:0;height:96px;z-index:55;pointer-events:none;transition:opacity .35s ease}
.eblur.off{opacity:0}
.eblur i{position:absolute;inset:0}
.eblur i:nth-child(1){backdrop-filter:blur(.6px);-webkit-backdrop-filter:blur(.6px);mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 40%,transparent 60%)}
.eblur i:nth-child(2){backdrop-filter:blur(1.4px);-webkit-backdrop-filter:blur(1.4px);mask-image:linear-gradient(to bottom,transparent 20%,#000 40%,#000 60%,transparent 80%)}
.eblur i:nth-child(3){backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);mask-image:linear-gradient(to bottom,transparent 40%,#000 60%,#000 80%,transparent 100%)}
.eblur i:nth-child(4){backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mask-image:linear-gradient(to bottom,transparent 60%,#000 80%)}
.eblur i:nth-child(5){backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);mask-image:linear-gradient(to bottom,transparent 80%,#000 100%)}
@media (max-width:760px){.eblur{height:72px}}
body:has(#v-canvas.on) .eblur,html.lbx-lock .eblur{display:none}
@media print{.eblur{display:none}}
@media (max-width:1000px){.cs-pipe{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cs-pipe li,.cs-pipe li:first-child,.cs-pipe li:last-child{border-radius:18px;margin:0}.cs-pipe li::after{display:none!important}
  .cmp-sets{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-live{grid-template-columns:1fr}.demo-s{height:200px}.cs-type{grid-template-columns:1fr}}
@media (max-width:560px){.cs-pipe{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.acv .af,.stg .stp,.snote{transition:none!important;opacity:1!important;filter:none!important;translate:none!important}.stp{translate:none!important}.lbx-bg::after{animation:none}}

/* =================== ROUND 12 =================== */
/* the site squircles every corner; the app's round buttons must stay true circles */
.dfab,.cfab,.np,.np button,.tray-o,.tray-o button,.atk,.cb{corner-shape:round!important}
.np button{padding:0 10px}.np{gap:2px}
.wsec{font:400 13px/1 var(--pixel)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px!important;text-align:left!important}
.wcard.small{grid-column:1/-1;display:grid!important;grid-template-columns:30% 1fr;align-items:stretch}
.wcard.small .top{aspect-ratio:auto!important;height:auto!important;min-height:160px}
@media (max-width:760px){.wcard.small{grid-column:1/-1;grid-template-columns:1fr}}
.wtools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wtool{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:22px;border:1px solid var(--edge);background:var(--paper);color:var(--ink);text-decoration:none;position:relative;overflow:hidden;transition:border-color .25s,translate .3s}
.wtool::before{content:"";position:absolute;left:0;top:0;right:0;height:6px;background:var(--c)}
.wtool b{font:700 18px/1.2 var(--pixel)}.wtool span{font:400 14px/1.5 var(--body);color:var(--ink-soft)}.wtool i{margin-top:auto;font:600 12px/1 var(--body);font-style:normal;color:var(--ink-faint)}
a.wtool:hover{border-color:var(--ink);translate:0 -2px}
.wtool.lead{grid-row:span 2;background:#131316;color:#fff}.wtool.lead span{color:#C9C9CF}.wtool.lead b{font-size:26px}
@media (max-width:900px){.wtools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wtools{grid-template-columns:1fr}.wtool.lead{grid-row:auto}}
/* the Alter card: the screen fills the whole cover, no yellow showing, nav + the live plus in view */
.ccv{background:#000}
.cph{left:0;right:0;width:100%;translate:0 0!important;border-radius:0;box-shadow:none;bottom:-1px}
/* case canvas: back to the original wide breakout past the narrow text column */
.acv-logo{border-radius:44px;overflow:hidden}
.acv-logo:hover,.acv-logo.afsel{outline-offset:0}
/* bottom blur: gentler, lower, and off while the hero toolbar is on screen */
.eblur{height:64px}
.eblur i:nth-child(5){backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
body.noeblur .eblur{opacity:0}
.eblur{transition:opacity .3s}

/* =================== ROUND 14: Track It =================== */
/* canvas sections: real rounded frames, sized in canvas units so they zoom with the work */
.asec{border-radius:28px}
.acv-logo.trk-cover{gap:56px;border-radius:44px;overflow:hidden}
.trk-cvi{display:block}.trk-cvi svg{display:block;height:270px;width:auto}
.trk-cvt{display:flex;flex-direction:column;gap:16px;color:#fff}
.trk-cvt b{font:600 76px/1 Inter,system-ui,sans-serif;letter-spacing:-3px}
.trk-cvt em{font:500 30px/1.15 Inter,system-ui,sans-serif;font-style:normal;color:#C9C9CF;max-width:12ch}
.trk-cvt em i{font-style:italic;color:#ABD8FF}
/* personas: three wide cards instead of four tall ones */
@media (min-width:1001px){.cs-people{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
  .cs-people[style*="--n:3"] .cs-person{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;align-content:start}
  .cs-people[style*="--n:3"] .cs-person i{grid-row:1/span 2;margin:0}
  .cs-people[style*="--n:3"] .cs-person b{align-self:end}
  .cs-people[style*="--n:3"] .cs-person p,.cs-people[style*="--n:3"] .cs-person q{grid-column:1/-1}
  .cs-people[style*="--n:3"] .cs-person q{padding-top:10px}}
/* Track It wears sky blue wherever Alter wears yellow */
#v-case[data-case="track-it"]{--acc:#B4F6B8}
#v-case[data-case="track-it"] .cs-flow .outs span,#v-case[data-case="track-it"] .cs-cta .btn{background:var(--acc)}
#v-case[data-case="track-it"] .slab b{background:var(--acc)}
#v-case[data-case="track-it"] .cs-pipe li{--pc:var(--acc)!important}
#v-case[data-case="track-it"] .cs-dec>div{--dc:var(--acc)!important}
#v-case[data-case="track-it"] .cs-steps li::before{background:var(--acc);color:#131316}
#v-case[data-case="track-it"] .slab[style*="--i:8"]{left:calc(var(--x) + 12.5%);top:calc(var(--y) + 9%)}
#v-case[data-case="track-it"] .cs-type i{color:var(--acc)}
/* =================== ROUND 19: Hourbit =================== */
/* accent: the app's own Neon Green (ThemeColorScheme.NEON_GREEN), not a site pillar */
#v-case[data-case="hourbit"]{--acc:#98FF53}
#v-case[data-case="hourbit"] .cs-flow .outs span,#v-case[data-case="hourbit"] .cs-cta .btn{background:var(--acc);color:#131316}
#v-case[data-case="hourbit"] .slab b{background:var(--acc);color:#131316}
#v-case[data-case="hourbit"] .cs-pipe li{--pc:var(--acc)!important}
#v-case[data-case="hourbit"] .cs-dec>div{--dc:var(--acc)!important}
#v-case[data-case="hourbit"] .cs-steps li::before{background:var(--acc);color:#131316}
#v-case[data-case="hourbit"] .cs-type i{color:var(--acc)}
#v-case[data-case="hourbit"] .cs-sketches{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){#v-case[data-case="hourbit"] .cs-sketches{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* cover canvas */
.hb-cover{background:#121212;border-radius:44px;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:64px;
  background-image:radial-gradient(circle at 34% 50%,rgba(152,255,83,.16),transparent 42%)}
.hb-cvi canvas{display:block;width:150px;height:190px}
.hb-cvt{display:flex;flex-direction:column;gap:10px;color:#F4F4F4}
.hb-cvt b{font:700 64px/1 'Roboto Mono',ui-monospace,monospace;letter-spacing:6px}
.hb-cvt em{font:400 22px/1.2 Inter,system-ui,sans-serif;font-style:normal;color:#98FF53}
.hb-cvt small{font:500 13px/1 'Roboto Mono',ui-monospace,monospace;color:#8A8A8A;letter-spacing:.5px}
.hb-word{font:700 13px/1 'Roboto Mono',ui-monospace,monospace;letter-spacing:2px;margin-right:6px}
/* the board: seven frames, the widget square on the right */
.stg.hb .stp[data-k="hb_widget"]{border-radius:22px}
.stg.hb .stg-in{aspect-ratio:1200/470}
@media (max-width:760px){.stg.hb .stg-in{aspect-ratio:390/1500}}
/* live demos */
.hb-ds{position:relative;height:340px;border-radius:24px;background:#141414;overflow:hidden;color:#F4F4F4;padding:18px;
  display:flex;flex-direction:column;align-items:center;--hbm:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-family:var(--hbm);
  --l1:rgba(152,255,83,.2);--l2:rgba(152,255,83,.4);--l3:rgba(152,255,83,.61);--l4:#98FF53}
.hb-ds *{corner-shape:round!important}
.hb-tm{background:radial-gradient(circle at 50% 42%,rgba(152,255,83,.14),transparent 55%),#141414}
.hb-tm.paused{background:radial-gradient(circle at 50% 42%,rgba(152,255,83,.06),transparent 55%),#141414}
.hb-pill{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;background:#202020;border:1px solid #303030;font:700 10px/1 var(--hbm);letter-spacing:1px}
.hb-pill i{width:7px;height:7px;border-radius:50%;background:var(--l4);animation:hbp .9s ease-in-out infinite alternate}
.hb-tm.paused .hb-pill{color:#8A8A8A}.hb-tm.paused .hb-pill i{background:#8A8A8A;animation:none}
@keyframes hbp{from{opacity:.4}to{opacity:1}}
.hb-cv{margin-top:14px;width:104px;height:132px;cursor:pointer;outline:0;touch-action:manipulation}
.hb-cv:focus-visible{outline:2px solid #98FF53;outline-offset:6px;border-radius:8px}
.hb-time{margin-top:12px;font:300 34px/1 var(--hbm);letter-spacing:1px;font-variant-numeric:tabular-nums}
.hb-pg{margin-top:8px;width:150px;height:4px;border-radius:2px;background:#262626;overflow:hidden}.hb-pg i{display:block;height:100%;width:100%;background:var(--l4);transform-origin:0 50%;transform:scaleX(0)}
.hb-pct{margin-top:5px;font:400 9px/1 var(--hbm);color:#8A8A8A;letter-spacing:.5px}
.hb-dock{margin-top:12px;display:flex;gap:12px;align-items:center}
.hb-dock button{height:42px;border:1px solid #404040;background:#262626;color:#F4F4F4;display:grid;place-items:center;cursor:pointer;font:700 11px/1 'Roboto Mono',ui-monospace,monospace;letter-spacing:1px}
.hb-dock svg{width:20px;height:20px;fill:currentColor}
.hb-pp{width:42px;border-radius:50%}.hb-tm.paused .hb-pp{background:var(--l4);border-color:var(--l4);color:#000}
.hb-fin{border-radius:21px;padding:0 16px;display:flex!important;gap:6px;background:#202020!important;border-color:#383838!important}.hb-fin svg{width:16px;height:16px;fill:var(--l4)}
.hb-note{position:absolute;bottom:10px;font:400 9px/1 var(--hbm);color:#5c5c5c}
.hb-lb{align-self:flex-start;font:700 10px/1 var(--hbm);color:#8A8A8A;letter-spacing:.6px}
.hb-grid{margin-top:12px;display:flex;gap:3px}
.hb-grid>div{display:flex;flex-direction:column;gap:3px}
.hb-grid .c{width:13px;height:13px;border-radius:2.5px;border:0;padding:0;background:#323232;cursor:pointer}
.hb-grid .c.void{background:transparent;cursor:default}
.hb-ds .l0{background:#323232}.hb-ds .l1{background:var(--l1)}.hb-ds .l2{background:var(--l2)}.hb-ds .l3{background:var(--l3)}.hb-ds .l4{background:var(--l4)}
.hb-grid .c.tdy{box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.hb-grid .c.sel{box-shadow:inset 0 0 0 1.5px var(--l4),0 0 0 2px #141414,0 0 0 3px var(--l4)}
.hb-grid .c:focus-visible{outline:2px solid #fff;outline-offset:1px}
.hb-leg{margin-top:10px;display:flex;align-items:center;gap:5px;font:400 7px/1 var(--hbm);color:#8A8A8A}
.hb-leg>span{font-weight:700;font-size:8px}
.hb-leg em{font-style:normal;display:flex;flex-direction:column;align-items:center;gap:3px}.hb-leg em i{width:10px;height:10px;border-radius:2px}
.hb-day{margin-top:auto;width:100%;padding:12px;border-radius:12px;background:#1E1E1E;display:flex;flex-direction:column;gap:5px}
.hb-dd{font:700 12px/1 var(--hbm)}.hb-dm{font:500 13px/1.2 Roboto,system-ui,sans-serif;color:#F4F4F4}
.hb-bm{height:6px;border-radius:3px;background:#282828;overflow:hidden}.hb-bm i{display:block;height:100%;background:var(--l4);transition:width .4s cubic-bezier(.22,1,.36,1)}
.hb-bp{font:400 10px/1 var(--hbm);color:#8A8A8A}
.hb-opts{margin-top:10px;width:100%;display:flex;flex-direction:column;gap:6px}
.hb-op{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#1E1E1E;border:1px solid #2E2E2E;color:#8A8A8A;font:500 12px/1 Roboto,system-ui,sans-serif;cursor:pointer;text-align:left}
.hb-op span{display:flex;gap:3px}.hb-op span i{width:11px;height:11px;border-radius:3px}
.hb-op.on{background:#252525;border:1.5px solid var(--vh);color:#F4F4F4;font-weight:700}
.hb-wg{margin-top:auto;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:150px;padding:10px;border-radius:18px;background:#1B1B1B}
.hb-wg i{aspect-ratio:1;border-radius:4px;transition:background .35s}
@media (max-width:1000px){.hb-ds{height:360px}}
/* the work card: real home screen; START FOCUS wipes open the timer in the app's own green */
.hb-ccv{background:#121212}
.hb-ccv .cph{aspect-ratio:480/1039;top:0;bottom:auto}
.hb-ccv .cph::after{display:none}
/* START FOCUS wipes the timer open from the button, then the timer slides up so the hourglass is in view */
.hb-ccv .c2{clip-path:circle(0% at 75% 29.6%);transition:clip-path .5s cubic-bezier(.22,1,.36,1) .3s,translate .4s cubic-bezier(.22,1,.36,1) 0s}
.hb-ccv.open .c2{clip-path:circle(150% at 75% 29.6%);translate:0 -18%;transition:clip-path .55s cubic-bezier(.22,1,.36,1) 0s,translate .5s cubic-bezier(.22,1,.36,1) .4s}
.hb-ccv .c3{opacity:0}.hb-ccv.paused .c3{opacity:1}
.hb-go{left:75%;top:29.6%;width:32.5%;height:4.3%;border-radius:12px;--hc:rgba(152,255,83,.42)}
.hb-bk{left:50%;top:22.1%;width:34%;height:20.2%;border-radius:16px;display:none;--hc:rgba(152,255,83,.42)}
.hb-ccv.open .hb-go{display:none}.hb-ccv.open .hb-bk{display:block}
@media (prefers-reduced-motion:reduce){.hb-go,.hb-bk,.hb-pill i{animation:none}}

.apkm.trk-apk .apk-go{background:#ABD8FF}
.apkm.trk-apk .apk-ic{padding:8px}.apk-ic svg{display:block;width:100%;height:auto}
/* component sets */
.trk-sets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:30px;align-items:start}
.trk-sets .cset-b{display:grid;place-items:center;min-height:120px}
@media (max-width:760px){.trk-sets{grid-template-columns:repeat(2,minmax(0,1fr))}.trk-sets .cset[style*="span 3"]{grid-column:span 2!important}.trk-sets .cset[style*="span 2"]{grid-column:span 1!important}}
/* live demos: the app, rebuilt */
.trk-wrap,.trk-wrap *,.trk-wrap *::before,.trk-wrap *::after,.trk-hot{corner-shape:round!important}
.trk-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.trk-demo{display:flex;flex-direction:column;gap:12px}
.trk-demo>p{margin:0;font:400 14px/1.5 var(--body);color:var(--ink-soft)}
.trk-demo>p b{display:block;font:700 15px/1.2 var(--pixel);color:var(--ink);margin-bottom:4px}
.trk-ds{position:relative;height:340px;border-radius:24px;background:#000;overflow:hidden;color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif;
  background-image:radial-gradient(circle at 50% 118%,rgba(171,216,255,.2),transparent 60%);user-select:none;-webkit-user-select:none}
.trk-ds svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.trk-ds button{font-family:inherit;cursor:pointer}
/* 1. dock + sheet */
.trk-hd{position:absolute;left:0;right:0;top:26px;display:flex;flex-direction:column;align-items:center;gap:8px}
.trk-hd>span:first-child{font-size:13px;color:#8E8E93}.trk-hd>span:first-child i{font-style:normal;color:#fff;margin-left:4px;padding:4px 8px;border-radius:9px;background:#2C2C2E}
.trk-big{font-weight:600;font-size:58px;line-height:1;letter-spacing:-2.8px;display:flex;align-items:flex-start;transform-origin:50% 60%}
.trk-big sup{font-size:26px;color:#8E8E93;margin-right:2px;letter-spacing:0;line-height:1.2}.trk-big em{font-style:normal}
.trk-pills{display:flex;gap:8px}.trk-pills i{font-style:normal;font-size:11.5px;color:#8E8E93;padding:6px 10px;border-radius:10px;background:#2C2C2E;border:.5px solid #3A3A3C}
.trk-pills em{font-style:normal;color:#fff;font-weight:600}
.trk-dock{position:absolute;left:50%;bottom:22px;translate:-50% 0;height:66px;padding:0 18px;border-radius:20px;background:rgba(25,25,25,.8);border:.5px solid rgba(74,75,76,.45);display:flex;align-items:center;gap:26px}
.trk-db{width:42px;height:42px;border-radius:12px;border:.5px solid rgba(58,58,58,.8);background:transparent;color:#fff;display:grid;place-items:center;padding:0;transition:scale .35s cubic-bezier(.34,1.56,.64,1)}
.trk-db.trk-add{width:48px;height:48px;background:#202020;position:relative}
.trk-db.trk-add::after{content:"";position:absolute;inset:-1px;border-radius:12px;box-shadow:0 0 0 9px rgba(171,216,255,.38);opacity:0;animation:halo 1.9s cubic-bezier(.22,1,.36,1) infinite;pointer-events:none}
.trk-dk.open .trk-add::after{animation:none}
.trk-db.pr{scale:.88;transition-duration:.08s}
.trk-dim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s}
.trk-dk.open .trk-dim{opacity:1;pointer-events:auto}
.trk-sheet{position:absolute;left:8px;right:8px;bottom:8px;padding:14px;border-radius:24px;background:#1C1C1E;border:.5px solid rgba(40,40,42,.9);translate:0 112%;transition:translate .5s cubic-bezier(.34,1.3,.64,1);display:flex;flex-direction:column;gap:10px}
.trk-dk.open .trk-sheet{translate:0 0}
.trk-sh-h{display:flex;align-items:center;justify-content:space-between}
.trk-sh-h b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}.trk-sh-h b svg{color:#ABD8FF;width:18px;height:18px}
.trk-x{width:30px;height:30px;border-radius:50%;border:0;background:#2C2C2E;color:#fff;display:grid;place-items:center;padding:0}.trk-x svg{width:15px;height:15px}
.trk-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.trk-chip{height:30px;border-radius:10px;border:1px solid #3B3B3C;background:#2C2C2E;color:#CFCFCF;font-size:11px;padding:0;white-space:nowrap;overflow:hidden}
.trk-chip.on{border-color:var(--cc);color:var(--cc);background:#2D2D30}
.trk-in{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}
.trk-in input{height:36px;border-radius:12px;border:1px solid #2C2C2E;background:#000;color:#fff;padding:0 12px;font:500 13px/1 Inter,system-ui,sans-serif;min-width:0;outline:0}
.trk-in input:focus{border-color:#ABD8FF;caret-color:#007AFF}
.trk-save{height:40px;border-radius:14px;border:0;background:#F5F5F2;color:#000;font-size:14px;font-weight:600}
/* 2. swipe */
.trk-sw{padding:18px 14px}
.trk-lbl{display:block;font-size:13px;color:#9CA3AF;margin:0 2px 10px}
.trk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.trk-list li{position:relative;height:58px;transition:height .3s ease,margin .3s ease,opacity .3s}
.trk-list li.gone{height:0!important;margin-top:-8px;opacity:0}
.trk-act{position:absolute;inset:0;border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;opacity:0;transition:background .2s}
.trk-act i{display:grid;place-items:center;opacity:0;scale:.7;transition:opacity .2s,scale .3s cubic-bezier(.34,1.56,.64,1)}
.trk-list li.r .trk-act{opacity:1;background:#FF443D}.trk-list li.r .trk-del{opacity:1;scale:1}
.trk-list li.l .trk-act{opacity:1;background:#ABD9FE;color:#000}.trk-list li.l .trk-edt{opacity:1;scale:1}
.trk-list li.go .trk-act i{scale:1.2}
.trk-card{position:relative;z-index:1;height:100%;display:flex;align-items:center;gap:9px;padding:0 10px;border-radius:18px;background:#1C1C1E;border:.5px solid rgba(44,44,46,.6);touch-action:pan-y;cursor:grab;transition:transform .35s cubic-bezier(.34,1.3,.64,1),box-shadow .3s}
.trk-card.ed{box-shadow:0 0 0 1.5px #ABD8FF}
.trk-av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--cc);background:#1c1c1c;background:color-mix(in srgb,var(--cc) 18%,#000)}
.trk-av svg{width:17px;height:17px}
.trk-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.trk-rt b{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.trk-rt small{font-size:11px;color:#9CA3AF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk-rep{display:inline-grid;color:#ABD8FF}.trk-rep svg{width:12px;height:12px}
.trk-amt{font-size:13px;font-weight:600;flex:none}
.trk-tip{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:11.5px;color:#6A6A6A}
.trk-re{position:absolute;left:50%;bottom:12px;translate:-50% 0;height:32px;padding:0 14px;border-radius:10px;border:.5px solid #3A3A3C;background:#1C1C1E;color:#ABD8FF;font-size:12px;display:none;white-space:nowrap}
.trk-sw.some .trk-re{display:block}.trk-sw.some .trk-tip{display:none}
/* 3. voice */
.trk-vo{display:flex;flex-direction:column;align-items:center;padding:16px 14px 12px}
.trk-vh{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.trk-vh i{width:7px;height:7px;border-radius:50%;background:#ABD8FF}
.trk-mic{position:relative;margin-top:12px;width:62px;height:62px;border-radius:50%;border:1px solid rgba(171,216,255,.6);background:#101214;color:#ABD8FF;display:grid;place-items:center;padding:0;flex:none}
.trk-mic::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:rgba(171,216,255,.12);scale:1.05;opacity:.3;transition:scale .5s,opacity .5s}
.trk-vo.on .trk-mic::before{animation:trkbreathe 1.1s ease-in-out infinite alternate}
.trk-mic svg{width:24px;height:24px}
.trk-wave{display:flex;gap:3px;align-items:center;height:22px;margin-top:14px}
.trk-wave i{width:3px;height:6px;border-radius:2px;background:#ABD8FF;opacity:.5}
.trk-vo.on .trk-wave i{opacity:1;animation:trkbar .5s ease-in-out infinite alternate}
.trk-wave i:nth-child(2){animation-delay:-.1s!important}.trk-wave i:nth-child(3){animation-delay:-.35s!important}.trk-wave i:nth-child(4){animation-delay:-.2s!important}.trk-wave i:nth-child(5){animation-delay:-.4s!important}.trk-wave i:nth-child(6){animation-delay:-.15s!important}
.trk-st{margin-top:6px;font-size:12px;color:#9CA3AF}
.trk-tx{min-height:16px;margin-top:4px;font-size:12px;color:#fff;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk-res{list-style:none;margin:8px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px}
.trk-res li{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:14px;background:#1C1C1E;animation:trkin .45s cubic-bezier(.34,1.3,.64,1) both;animation-delay:calc(var(--k) * 110ms)}
.trk-res .trk-av{width:30px;height:30px}.trk-res .trk-av svg{width:15px;height:15px}
.trk-say{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:4px}
.trk-say span{font-size:10.5px;color:#6A6A6A;text-transform:uppercase;letter-spacing:.06em}
.trk-say input{height:34px;border-radius:11px;border:1px solid #2C2C2E;background:#101012;color:#fff;padding:0 11px;font:500 12px/1 Inter,system-ui,sans-serif;outline:0;min-width:0}
.trk-say input:focus{border-color:#ABD8FF;caret-color:#007AFF}
.trk-mic,.trk-wave{transition:width .35s,height .35s,margin .35s,opacity .3s}
.trk-vo.done .trk-mic{width:44px;height:44px;margin-top:8px}.trk-vo.done .trk-mic svg{width:18px;height:18px}
.trk-vo.done .trk-wave{height:0;margin-top:0;opacity:0}
@keyframes trkbreathe{from{scale:1.05;opacity:.3}to{scale:1.25;opacity:.6}}
@keyframes trkbar{from{height:5px}to{height:20px}}
@keyframes trkin{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:1000px){.trk-wrap{grid-template-columns:1fr}}
/* the Track It card: the real dock + is the button, pulsing in the app's blue */
.trk-ccv .cph{aspect-ratio:480/1059}
.trk-ccv .c2{clip-path:circle(0% at 50% 88.2%);transition:clip-path .55s cubic-bezier(.22,1,.36,1)}
.trk-ccv.open .c2{clip-path:circle(150% at 50% 88.2%)}
.trk-hot{position:absolute;z-index:2;translate:-50% -50%;cursor:pointer;outline:0}
.trk-plus{left:50%;top:88.2%;width:12.6%;aspect-ratio:1;border-radius:25%;--hc:rgba(171,216,255,.42)}
.trk-sv{left:50%;top:90.2%;width:78.6%;height:5.8%;border-radius:18px/50%;display:none;--hc:rgba(171,216,255,.42)}
.trk-ccv.open .trk-plus{display:none}.trk-ccv.open .trk-sv{display:block}
.trk-hot:focus-visible{box-shadow:0 0 0 3px #ABD8FF}
/* the hotspots' pulse: a halo band just outside the edge, faded and scaled by the compositor (see "live pulses") */
.trk-plus::after,.trk-sv::after,.hb-go::after,.hb-bk::after,.pc-go::after{content:"";position:absolute;inset:0;border-radius:inherit;corner-shape:inherit;
  box-shadow:0 0 0 9px var(--hc);opacity:0;animation:halo 1.9s cubic-bezier(.22,1,.36,1) infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.trk-plus::after,.trk-sv::after,.hb-go::after,.hb-bk::after,.pc-go::after,.trk-db.trk-add::after{animation:none;opacity:0}
  .trk-plus,.trk-sv{box-shadow:0 0 0 1.5px rgba(171,216,255,.85)}.hb-go,.hb-bk{box-shadow:0 0 0 1.5px rgba(152,255,83,.85)}.pc-go{box-shadow:0 0 0 1.5px rgba(165,0,255,.7)}}

/* =================== ROUND 15: stool covers =================== */
.card-cover{position:absolute;inset:0;z-index:3;display:grid;place-items:center;translate:0 calc(var(--peel,0) * -104%);
  box-shadow:0 calc(var(--peel,0) * 18px) calc(var(--peel,0) * 30px) -10px rgba(19,19,22,.45);will-change:translate}
.card-cover>svg{width:54%;height:54%}
#deck.peeled .card-cover{visibility:hidden}
/* off-screen doodles hold still: their SVG animations run on the main thread, in the same frames as the stool cards */
.doo.offs *,.fig.offs *,.doo.offs *::before,.doo.offs *::after{animation-play-state:paused!important}

#deck:not(.peeled) .card *,#deck:not(.peeled) .card *::before,#deck:not(.peeled) .card *::after{animation-play-state:paused!important}
.cc-t{width:60%;aspect-ratio:1;display:grid;place-items:center;color:#131316}
/* the dark screenshots under Alter/Washio/Track It bled through the cover's anti-aliased rounded edge as a thin
   black line (Parchi's light screen hid it): keep the real screen invisible until the cover actually lifts */
#deck .card-top:has(.card-cover) .card-art{opacity:calc(min(1,var(--peel,0) * 25))}
/* every stool/nav icon is one flat ink glyph on its pillar colour, no tile, so the four read as a set */
.cc-t svg path{fill:currentColor!important}
.cc-t svg{display:block;height:auto}
.cc-alter{padding:4%}.cc-alter svg{width:100%}
.cc-trk{padding:2%}.cc-trk svg{width:auto;height:100%}
/* stub project card (Parchi): the same launcher tile the other cards only show pre-reveal,
   worn permanently since there's no real screen to peel back to yet */
.card-art .cc-stub{padding:13%}.card-art .cc-stub svg{width:100%!important;height:100%!important}
@media (prefers-reduced-motion:reduce){.card-cover{transition:translate .4s ease}}

/* =================== ROUND 16: Washio =================== */
#v-case[data-case="washio"]{--acc:#378ADD}
#v-case[data-case="washio"] .cs-flow .outs span,#v-case[data-case="washio"] .cs-cta .btn{background:var(--acc);color:#fff}
#v-case[data-case="washio"] .slab b{background:var(--acc);color:#fff}
#v-case[data-case="washio"] .cs-pipe li{--pc:#CFE3F7!important}
#v-case[data-case="washio"] .cs-dec>div{--dc:var(--acc)!important}
#v-case[data-case="washio"] .cs-steps li::before{background:var(--acc);color:#fff}
#v-case[data-case="washio"] .cs-type i{color:#378ADD}
#v-case[data-case="washio"] .itr-tag.y{background:var(--acc);border-color:var(--acc);color:#fff}
/* the reframe: two chains side by side */
.cs-rf{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.cs-rf-row{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;border:1px solid var(--edge);background:var(--paper)}
.cs-rf-row.on{border-color:#378ADD;box-shadow:0 0 0 3px #E6F1FB}
.cs-rf-l{font:700 15px/1.2 var(--pixel)}
.cs-rf-c{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cs-rf-c b{font:600 13px/1 var(--body);padding:9px 12px;border-radius:11px;background:#fff;border:1.5px solid var(--ink)}
.cs-rf-c b.x{background:#378ADD;border-color:#378ADD;color:#fff}
.cs-rf-c i{font-style:normal;color:var(--ink-faint);font-size:18px;line-height:1}
.cs-rf-n{margin:6px 0 0;font:400 15px/1.55 var(--body);color:var(--ink-soft)}
@media (max-width:640px){.cs-rf-row{grid-template-columns:1fr}}
/* the site map and the wireframe strip */
.cs-fig{margin:30px 0 0;cursor:zoom-in}
.cs-fig>div{border:1px solid var(--edge);border-radius:22px;background:#fff;padding:18px;overflow:hidden}
.cs-fig img{display:block;width:100%;height:auto}
.cs-fig figcaption{margin-top:10px;font:400 18px/1.2 var(--hand);color:var(--ink);text-align:center}
.cs-strip{display:flex;gap:14px;margin-top:22px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.cs-strip figure{flex:none;width:118px;margin:0;scroll-snap-align:start;cursor:zoom-in}
.cs-strip img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--edge);background:#fff;transition:translate .3s cubic-bezier(.34,1.56,.64,1)}
.cs-strip figure:hover img{translate:0 -4px}
.cs-strip figcaption{margin-top:6px;font:500 12px/1.2 var(--body);color:var(--ink-soft);text-align:center}
/* canvas: gradient cover with the wordmark, no video, lighter and cheaper to load */
.wsh-cover{background:linear-gradient(120deg,#185FA5 0%,#378ADD 45%,#A9CDEC 100%)!important;border-radius:44px;overflow:hidden}
.wsh-cvt{position:absolute;left:60px;top:0;bottom:0;right:30px;display:flex;flex-direction:column;justify-content:center;gap:14px;color:#fff}
.wsh-cvt em{font:500 25px/1.2 Inter,system-ui,sans-serif;font-style:normal;color:#E6F1FB}
.wsh-cvt small{font:500 14px/1 Inter,system-ui,sans-serif;color:#CFE3F7}
.acv .wsh-lt{background:#fff}.acv .wsh-lt img{object-fit:contain}
.wsh-word{font-family:'Inclusive Sans',Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
.acv-file .wsh-word{color:#185FA5;font-size:14px}
.wsh-cvt .wsh-word.wsh-wordbig{font-size:64px;color:#fff;letter-spacing:-.03em}
/* the board: two rows of five */
.stg.wsh .stg-in{aspect-ratio:1200/1180}
.stg.wsh .slab[style*="--i:8"]{top:calc(var(--y) - 5.2%);left:var(--x)}
@media (max-width:760px){.stg.wsh .stg-in{aspect-ratio:390/2150}.stg.wsh .slab[style*="--i:8"]{left:var(--mx);top:calc(var(--my) - 1.6%)}}
/* component sets */
.wsh-sets .cset-b{background:#F5F5F2}
.wsh-sets .cset-b img{max-height:300px;width:auto;max-width:100%;margin:0 auto}
/* live demos: the final screens, light, blue */
.wsh-wrap,.wsh-wrap *,.wsh-wrap *::before,.wsh-wrap *::after,.wsh-book,.wsh-bk{corner-shape:round!important}
.wsh-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.wsh-demo{display:flex;flex-direction:column;gap:12px}
.wsh-demo>p{margin:0;font:400 14px/1.5 var(--body);color:var(--ink-soft)}
.wsh-demo>p b{display:block;font:700 15px/1.2 var(--pixel);color:var(--ink);margin-bottom:4px}
.wsh-ds{position:relative;height:370px;border-radius:24px;background:#F5F5F2;border:1px solid var(--edge);overflow:hidden;color:#2C2C2A;font-family:'Inclusive Sans',Inter,system-ui,-apple-system,sans-serif;padding:16px 14px;user-select:none;-webkit-user-select:none}
.wsh-ds svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.wsh-ds button{font-family:inherit;cursor:pointer;border:0}
.wsh-sh{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#888780;margin:0 2px 10px}
.wsh-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wsh-items li{display:flex;align-items:center;gap:10px;height:60px;padding:0 10px 0 8px;border-radius:16px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.04);animation:wshIn .4s ease both}
.wsh-items li:nth-child(2){animation-delay:.05s}.wsh-items li:nth-child(3){animation-delay:.1s}.wsh-items li:nth-child(4){animation-delay:.15s}
.wsh-items img{width:40px;height:44px;object-fit:contain;flex:none}
.wsh-it{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wsh-it b{font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}.wsh-it b i{color:#B4B2A9}.wsh-it b svg{width:11px;height:11px}
.wsh-it small{display:none;font-size:10px;color:#888780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsh-it em{font-style:normal;font-size:12px;font-weight:600}
.wsh-add{position:relative;width:66px;height:28px;flex:none}
.wsh-a,.wsh-st{position:absolute;inset:0;border-radius:9px;background:#F5F5F2;display:flex;align-items:center;justify-content:center;font-size:12px;color:#2C2C2A}
.wsh-st{display:none;justify-content:space-between;padding:0 4px;background:#E6F1FB;color:#185FA5}
.wsh-items li.in .wsh-a{display:none}.wsh-items li.in .wsh-st{display:flex}
.wsh-st button{width:20px;height:22px;background:transparent;color:inherit;font-size:15px;line-height:1;padding:0}
.wsh-st output{font-size:12px;font-weight:600;min-width:12px;text-align:center}
.wsh-bar{position:absolute;left:10px;right:10px;bottom:10px;height:52px;border-radius:18px;background:#1C1C1E;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;
  translate:0 90px;opacity:0;transition:translate .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.wsh-bag.has .wsh-bar,.wsh-bar.on{translate:0 0;opacity:1}
.wsh-bar span{display:flex;flex-direction:column;gap:2px}.wsh-bar b{font-size:15px}.wsh-bar small{font-size:10px;color:#B4B2A9;white-space:nowrap}
.wsh-vb{white-space:nowrap;flex:none;height:36px;padding:0 12px;border-radius:12px;background:#378ADD!important;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.wsh-vb svg{width:13px;height:13px}
.wsh-lb{display:block;font-size:11.5px;color:#888780;margin:2px 2px 6px}
.wsh-days,.wsh-back{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:9px}
.wsh-days button,.wsh-back button{height:40px;border-radius:12px;background:#fff;color:#2C2C2A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:inset 0 0 0 1px #E8E7E2;transition:box-shadow .2s,background .2s}
.wsh-back button{height:46px}
.wsh-days b,.wsh-back b{font-size:10.5px;font-weight:500;white-space:nowrap}.wsh-days small,.wsh-back small{font-size:9px;color:#888780}
.wsh-back em{font-style:normal;font-size:9px;font-weight:600;color:#3B6D11}
.wsh-days button.on,.wsh-back button.on,.wsh-times button.on{box-shadow:inset 0 0 0 1.5px #378ADD;background:#fff}
.wsh-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:9px}
.wsh-times button{height:28px;border-radius:10px;background:#fff;color:#2C2C2A;font-size:10px;box-shadow:inset 0 0 0 1px #E8E7E2}
.wsh-times button.past{background:transparent;color:#B4B2A9;box-shadow:none;outline:1px dashed #D3D1C7;outline-offset:-1px;cursor:not-allowed}
.wsh-when{display:block;font-size:22px;font-weight:600;letter-spacing:-.5px;margin:0 2px 10px}
.wsh-tl{list-style:none;margin:0;padding:10px 12px;border-radius:18px;background:#fff;display:flex;flex-direction:column;gap:0}
.wsh-tl li{position:relative;display:grid;grid-template-columns:18px 1fr;column-gap:10px;padding:5px 0}
.wsh-tl li::before{content:"";position:absolute;left:8px;top:22px;bottom:-6px;width:1.5px;background:#E8E7E2}
.wsh-tl li:last-child::before{display:none}
.wsh-tl li.done::before{background:#378ADD}
.wsh-tl i{grid-row:span 2;width:17px;height:17px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #D3D1C7;background:#fff;display:grid;place-items:center;color:#fff;position:relative;z-index:1;transition:background .3s,box-shadow .3s}
.wsh-tl i svg{width:10px;height:10px;opacity:0;transition:opacity .2s}
.wsh-tl li.done i{background:#378ADD;box-shadow:none}.wsh-tl li.done i svg{opacity:1}
.wsh-tl li.now i{background:#378ADD;box-shadow:none}
.wsh-tl li.now i::after{content:"";position:absolute;inset:0;border-radius:50%;corner-shape:round!important;background:#378ADD;z-index:-1;opacity:0;--po:.5;--ps:1.95;animation:ping 1.6s ease-out infinite;pointer-events:none}
.wsh-tl b{font-size:12px;font-weight:500;color:#888780;transition:color .3s}.wsh-tl li.done b,.wsh-tl li.now b{color:#2C2C2A}
.wsh-tl small{font-size:9.5px;color:#B4B2A9;line-height:1.3}
.wsh-pp{margin-top:8px;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;background:#fff}
.wsh-pi{width:30px;height:30px;border-radius:10px;background:#F5F5F2;display:grid;place-items:center}
.wsh-pp>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px}.wsh-pp b{font-size:11.5px;font-weight:500}.wsh-pp small{font-size:9.5px;color:#888780}
.wsh-call{width:30px;height:30px;border-radius:10px;background:#378ADD!important;color:#fff;display:grid;place-items:center}
.wsh-next{position:absolute;right:14px;top:14px;height:28px;padding:0 10px;border-radius:9px;background:#E6F1FB!important;color:#185FA5;font-size:11px;font-weight:600}
@keyframes wshIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1000px){.wsh-wrap{grid-template-columns:1fr}}
/* the Washio card: its home screen plays, Book Now opens the vendor */
.wsh-ccv .cph{aspect-ratio:412/862;top:0;bottom:auto}
.wsh-ccv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.wsh-ccv .c2{clip-path:circle(0% at 50% 30.3%);transition:clip-path .55s cubic-bezier(.22,1,.36,1)}
.wsh-ccv.open .c2{clip-path:circle(150% at 50% 30.3%)}
/* no pulse here: unlike Alter and Track It, this card has no real interaction point to point at.
   The video is doing all the work; the hotspot is just there for whoever tries clicking it. */
.wsh-book{left:50%;top:30.3%;width:27.6%;height:3.2%;border-radius:10px/50%}
.wsh-bk{left:10.8%;top:6.6%;width:10%;aspect-ratio:1;border-radius:28%;display:none}
.wsh-ccv.open .wsh-book{display:none}.wsh-ccv.open .wsh-bk{display:block}
.cc-wsh{display:flex;align-items:center;justify-content:center}
.cc-wsh .wsh-word{font:700 34px/1 'Inclusive Sans',Inter,system-ui,sans-serif;letter-spacing:-.03em;color:#131316}
@media (prefers-reduced-motion:reduce){.wsh-tl li.now i{animation:none}}

/* =================== ROUND 18: card stroke, Alter crop, Track It alignment =================== */

/* the real Alter screenshot carries the phone's own home-indicator bar at the very bottom.
   Alter's UI is black there anyway, so a matching black mask hides it without touching the asset */
.ccv:not(.trk-ccv):not(.wsh-ccv) .cph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.4%;background:#000;pointer-events:none}

/* Track It's dock sits at the bottom of the card like Alter's nav: the screenshot drops 3.3% so
   the + lands 8.5% of the phone height above the edge, same as Alter's bar. All in % so it holds
   at every card size (the old fixed -52px shift only fit the 230px desktop card, and its hotspot
   % was never moved with it, which left the pulse floating above the +). The + is at 88.2% of
   the screenshot, the save bar at 90.2%; hotspots are those plus the 3.3% drop. */
.trk-ccv .cph img{transform:translateY(3.3%)}
.trk-plus{top:91.5%!important}
.trk-sv{top:93.5%!important}
/* ---------- story ---------- */
#story{padding-block:var(--gap-sec) calc(var(--gap-sec) - 40px)}
#story .wrap{display:flex;flex-direction:column;align-items:center;gap:var(--gap-head)}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.facts li{font:500 14px/1 var(--body);color:var(--ink-soft,#55555c);background:#fff;border:1px solid rgba(0,0,0,.1);
  padding:10px 14px;border-radius:17px;corner-shape:squircle}
.facts li b{font-weight:600;color:var(--ink)}
.story{font-family:var(--body);font-weight:400;letter-spacing:-.01em;
  font-size:var(--t-lg);line-height:1.55;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  column-gap:.3em;row-gap:.3em;width:100%;max-width:1040px;margin:0 auto;text-align:center}
/* the story paragraph is on the page from the first frame, pale; scrolling darkens it word by word (no blur, no per-word
   layers). Where the browser can tie an animation to the scroll, the CSS does it (.wscrub, ranges set in remark());
   everywhere else script sets the colour of the few words that changed. Phones and reduced motion just show it. */
.sw{display:inline-block;flex:0 0 auto;color:var(--ink)}
.story{--dim:rgba(19,19,22,.17)}
@keyframes swIn{from{color:var(--dim)}to{color:var(--ink)}}
@keyframes unIn{from{opacity:0;scale:.78}to{opacity:1;scale:1}}
@media (min-width:761px){
  .story.wscrub .sw{animation:swIn 1s linear both;animation-timeline:scroll(root);animation-range:var(--a0) var(--a1)}
  .story.wscrub .cd:not(.wig),.story.wscrub .ms{animation:unIn 1s cubic-bezier(.34,1.5,.64,1) both;animation-timeline:scroll(root);animation-range:var(--a0) var(--a1)}
  .story:not(.wscrub) .sw{transition:color .18s linear}
  .story:not(.wscrub) .cd{transition:opacity .35s,scale .45s cubic-bezier(.34,1.5,.64,1)}
  .story:not(.wscrub) .ms{transition:width .55s cubic-bezier(.22,1,.3,1),opacity .35s,scale .45s cubic-bezier(.34,1.5,.64,1)}
  .story:not(.wscrub) .cd.uoff,.story:not(.wscrub) .ms.uoff{opacity:0;scale:.78}
}

.brk{flex-basis:100%;height:0}
.glue{display:inline-flex;flex:0 0 auto;align-items:center;column-gap:.3em}
/* canvas drop: a tiny stack after "I design products," that throws real work onto the section like a design canvas */
.cd{position:relative;display:inline-block;flex:0 0 auto;width:2.2em;height:1.16em;vertical-align:middle;outline:none;cursor:pointer;z-index:1}
/* three real mini cards, the same size as a micro state card: FXKIT in front, Washio, Parchi listening */
.cd i{position:absolute;left:0;top:0;width:1.84em;height:1.16em;border-radius:.14em;box-sizing:border-box;overflow:hidden;
  background:#fff var(--img) center top/cover no-repeat;box-shadow:0 0 0 1px rgba(19,19,22,.14),0 .12em .32em -.08em rgba(19,19,22,.35);
  transform:translate(var(--tx),var(--ty)) rotate(var(--a));transition:transform .45s cubic-bezier(.34,1.7,.5,1)}
.cd i:nth-child(1){--tx:0em;--ty:.02em;--a:-2deg;z-index:3}
.cd i:nth-child(2){--tx:.17em;--ty:0em;--a:3deg;z-index:2}
.cd i:nth-child(3){--tx:.34em;--ty:-.02em;--a:7deg;z-index:1;background-position:center bottom}
.cd.on:hover i:nth-child(1),.cd.on:focus-visible i:nth-child(1),.cd.lit i:nth-child(1){--tx:-.14em;--a:-9deg}
.cd.on:hover i:nth-child(2),.cd.on:focus-visible i:nth-child(2),.cd.lit i:nth-child(2){--ty:-.12em;--a:2deg}
.cd.on:hover i:nth-child(3),.cd.on:focus-visible i:nth-child(3),.cd.lit i:nth-child(3){--tx:.5em;--a:12deg}
.cd:focus-visible{outline:2px solid #7CC4F2;outline-offset:4px;border-radius:.2em}
.cd.wig{animation:cdWig .95s cubic-bezier(.36,.07,.19,.97)}
@keyframes cdWig{0%,100%{rotate:0deg}12%{rotate:-14deg;scale:1.12}26%{rotate:12deg}40%{rotate:-10deg}54%{rotate:8deg}68%{rotate:-5deg}82%{rotate:3deg;scale:1.05}}
.cd-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3}
.cd-pad{position:relative;width:100%;height:0;flex:none;margin-top:calc(var(--gap-head) * -1)}
.cd-pad.on{margin-top:0}
/* the collage already closes the section on phones; the usual bottom padding under it read as a hole */
@media (max-width:760px){#story:has(.cd-pad.on){padding-bottom:28px!important}}
/* outer node carries x, inner carries y: two easings bend the flight into an arc */
.cd-p{position:absolute;left:0;top:0;translate:var(--hx) 0;will-change:translate;
  transition:translate .32s cubic-bezier(.5,0,.75,0) calc(var(--j) * 22ms)}
.cd-q{display:block;position:relative;translate:0 var(--hy);scale:.06;rotate:0deg;opacity:0;will-change:translate,scale;
  transition:translate .32s cubic-bezier(.6,-.3,.8,.3) calc(var(--j) * 22ms),scale .32s cubic-bezier(.5,0,.75,0) calc(var(--j) * 22ms),
    rotate .3s ease-in calc(var(--j) * 22ms),opacity .12s linear calc(var(--j) * 22ms + .2s)}
.cd-layer.open .cd-p{translate:var(--x) 0;transition:translate .58s cubic-bezier(.16,1,.3,1) calc(var(--k) * 60ms)}
.cd-layer.open .cd-q{translate:0 var(--y);scale:1;rotate:var(--r);opacity:1;pointer-events:auto;
  transition:translate .72s cubic-bezier(.3,1.45,.45,1) calc(var(--k) * 60ms),scale .5s cubic-bezier(.3,1.6,.5,1) calc(var(--k) * 60ms),
    rotate .95s cubic-bezier(.25,2.6,.4,1) calc(var(--k) * 60ms),opacity .1s linear calc(var(--k) * 60ms)}
.cd-p.drag,.cd-p.drag .cd-q{transition:none!important}
.cd-layer.open.fine .cd-q{cursor:grab}.cd-p.drag .cd-q{cursor:grabbing}
.cd-card{display:block;overflow:hidden;background:#fff}
.cd-card img,.cd-card video{display:block;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.cd-site .cd-card{border-radius:8px;box-shadow:0 0 0 1px rgba(19,19,22,.14),0 16px 40px -12px rgba(19,19,22,.4)}
.cd-bar{display:flex;align-items:center;gap:4px;height:18px;padding:0 7px;background:#ECECEF;border-bottom:1px solid rgba(19,19,22,.08)}
.cd-bar i{width:6px;height:6px;border-radius:50%;background:#D4D4DA;corner-shape:round!important;flex:none}
.cd-bar i:nth-child(1){background:#FF6159}.cd-bar i:nth-child(2){background:#FFBD2E}.cd-bar i:nth-child(3){background:#28C941}
.cd-bar span{margin:0 auto;padding:0 10px;height:11px;border-radius:6px;background:#fff;font:500 7.5px/11px var(--body);color:#56565C;letter-spacing:.01em;white-space:nowrap}
.cd-site .cd-shot{aspect-ratio:900/462}
.cd-phone .cd-card{aspect-ratio:480/1039;border-radius:14px;box-shadow:0 0 0 1px rgba(19,19,22,.16),0 16px 36px -12px rgba(19,19,22,.42)}
.cd-comp .cd-card{border-radius:12px;padding:9px 10px;box-shadow:0 0 0 1px rgba(19,19,22,.1),0 12px 30px -12px rgba(19,19,22,.3)}
.cd-comp .cd-card img{height:auto;object-fit:contain}
/* the Figma selection: 1.5px blue box, square handles, a size pill */
.cd-sel{position:absolute;inset:-5px;border:1.5px solid #7CC4F2;pointer-events:none;opacity:0;transition:opacity .1s}
.cd-sel b{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid #7CC4F2;box-sizing:border-box;border-radius:1px}
.cd-sel b:nth-child(1){left:-4px;top:-4px}.cd-sel b:nth-child(2){right:-4px;top:-4px}.cd-sel b:nth-child(3){left:-4px;bottom:-4px}.cd-sel b:nth-child(4){right:-4px;bottom:-4px}
.cd-lab{position:absolute;left:50%;top:100%;margin-top:9px;translate:-50% 0;padding:2px 6px;border-radius:4px;background:#7CC4F2;color:#0E2A3C;
  font:600 10px/14px var(--body);letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .1s}
.cd-layer.open .cd-sel,.cd-layer.open .cd-lab{opacity:1;transition:opacity .2s calc(var(--k) * 60ms + .42s)}
.cd-layer.sm .cd-lab{font-size:8.5px;line-height:12px;padding:1px 4px;margin-top:7px}
.cd-layer.sm .cd-bar{height:12px;gap:3px;padding:0 5px}.cd-layer.sm .cd-bar i{width:4px;height:4px}
.cd-layer.sm .cd-bar span{height:8px;font-size:5.5px;line-height:8px;padding:0 6px}
.cd-layer.sm .cd-site .cd-card{border-radius:6px}.cd-layer.sm .cd-phone .cd-card{border-radius:9px}.cd-layer.sm .cd-comp .cd-card{padding:5px 6px;border-radius:8px}
.cd-layer.sm .cd-sel{inset:-4px}.cd-layer.sm .cd-sel b{width:5px;height:5px;border-width:1px}
.cd-layer.sm .cd-sel b:nth-child(1){left:-3px;top:-3px}.cd-layer.sm .cd-sel b:nth-child(2){right:-3px;top:-3px}.cd-layer.sm .cd-sel b:nth-child(3){left:-3px;bottom:-3px}.cd-layer.sm .cd-sel b:nth-child(4){right:-3px;bottom:-3px}
/* micro states: three equal cards, stacked at rest, a row on hover; the width animates so the sentence makes room */
.ms{position:relative;display:inline-block;flex:0 0 auto;font-size:.4em;width:5.5em;height:2.9em;vertical-align:middle;outline:none;cursor:pointer;
  transition:width .55s cubic-bezier(.22,1,.3,1)}
.ms-c{position:absolute;left:0;top:0;width:4.6em;height:2.9em;border-radius:.34em;overflow:hidden;box-sizing:border-box;
  box-shadow:0 0 0 1px rgba(19,19,22,.1),0 .3em .8em -.25em rgba(19,19,22,.35);
  translate:calc(var(--k) * .42em) calc((1 - var(--k)) * .06em);rotate:calc((var(--k) - 1) * 5deg);z-index:calc(3 - var(--k));
  transition:translate .6s cubic-bezier(.3,1.35,.45,1) calc(var(--k) * 45ms),rotate .6s cubic-bezier(.3,1.6,.45,1) calc(var(--k) * 45ms)}
.ms.open{width:14.6em}
.ms.open .ms-c{translate:calc(var(--k) * 5em) 0;rotate:0deg}
.ms:focus-visible{outline:2px solid #7CC4F2;outline-offset:4px;border-radius:.4em}
.ms-in{position:absolute;inset:0;font-size:.1em;display:block}
.ms:not(.run) *,.ms:not(.run) *::after{animation-play-state:paused!important}
/* Parchi: the RippleRecordButton while listening */
.ms-pc{background:#FBF7FF}
.ms-pc .ms-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4em}
.ms-rec{position:relative;display:grid;place-items:center;width:10em;height:10em}
.ms-rec>*{grid-area:1/1;border-radius:50%;corner-shape:round!important;box-sizing:border-box}
.ms-rec .w1,.ms-rec .w2{width:9.4em;height:9.4em;border:.25em solid #E7BBFF;opacity:0}
.ms-rec .w1{background:rgba(165,0,255,.5);animation:pcdW1s 1.4s cubic-bezier(.4,0,.2,1) infinite,pcdW1a 1.4s linear infinite}
.ms-rec .w2{background:rgba(165,0,255,.4);animation:pcdW2 2.15s infinite}
.ms-rec b{width:10em;height:10em;border:.4em solid #E7BBFF;background:linear-gradient(#A500FF,#8800D6);display:grid;place-items:center;
  animation:pcdPulse .7s cubic-bezier(.4,0,.2,1) infinite alternate}
.ms-rec b::before{content:"";width:3.4em;height:4em;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%);border-radius:.3em}
.ms-pc em{position:relative;font:700 3.2em/1 var(--body);font-style:normal;letter-spacing:.04em;text-rendering:geometricPrecision;color:#64748B}
/* Hourbit: the year heatmap filling in, Neon Green on near black */
.ms-hb{background:#121212}
.ms-hb .ms-in{padding:3.6em 3.8em;box-sizing:border-box}
.ms-hb .ms-t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2.4em;font:600 3.2em/1 var(--body);color:#8A8A8A}
.ms-hb .ms-t b{color:#F4F4F4;font-weight:700}.ms-hb .ms-t b i{font-style:normal;color:#98FF53}
.ms-hm{display:grid;grid-template-columns:repeat(13,1fr);gap:.62em}
.ms-hm s{display:block;aspect-ratio:1;border-radius:.5em;background:#323232;position:relative;overflow:hidden}
.ms-hm s::after{content:"";position:absolute;inset:0;background:#98FF53;opacity:0;scale:.2;border-radius:inherit;
  animation:msHb 4.8s cubic-bezier(.3,1.5,.5,1) infinite;animation-delay:var(--d)}
@keyframes msHb{0%,6%{opacity:0;scale:.2}13%{opacity:var(--o);scale:1.3}19%,86%{opacity:var(--o);scale:1}94%,100%{opacity:0;scale:.6}}
/* Washio: the stepper bumping the count, then View bag pressing */
.ms-ws{background:#F5F5F2}
.ms-ws .ms-in{padding:3.2em 3em;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}
.ms-row{display:flex;align-items:center;justify-content:space-between;font:700 3.5em/1 var(--body);color:#2C2C2A;padding:0 .2em}
.ms-row small{display:block;font-size:.72em;font-weight:500;color:#8A8986;margin-top:.3em}
.ms-st{display:flex;align-items:center;gap:.45em}
.ms-st i,.ms-st u{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:.5em;background:#fff;box-shadow:inset 0 0 0 .08em #D3D1C7;font-style:normal;text-decoration:none;font-weight:600;transition:scale .2s cubic-bezier(.3,1.8,.5,1),background .2s}
.ms-st u{background:#378ADD;color:#fff;box-shadow:none}
.ms-st u.tap{scale:.78;background:#0C447C}
.ms-st output{min-width:.8em;text-align:center;display:inline-block}
.ms-bar{display:flex;align-items:center;justify-content:space-between;height:9.6em;border-radius:3em;background:#1C1C1E;color:#fff;padding:0 1.3em 0 2.6em}
.ms-bar span{font:700 3.3em/1.05 var(--body)}.ms-bar span small{display:block;font-size:.66em;font-weight:500;color:#B4B2A9;white-space:nowrap}
.ms-bar output{display:inline-block}output.bump{animation:msBump .38s cubic-bezier(.3,1.9,.5,1)}
@keyframes msBump{0%{scale:1}35%{scale:1.5}100%{scale:1}}
.ms-vb{background:#378ADD;color:#fff;display:flex;align-items:center;font:700 3.1em/1 var(--body);height:2.2em;padding:0 .75em;border-radius:.62em;white-space:nowrap;
  transition:scale .22s cubic-bezier(.3,1.8,.5,1),background .22s}
.ms-vb.tap{scale:.88;background:#0C447C}
@media (prefers-reduced-motion:reduce){
  .cd-p,.cd-q,.cd-layer.open .cd-p,.cd-layer.open .cd-q{transition:opacity .2s linear!important}
  .cd-q{translate:0 var(--y)!important;scale:1!important;rotate:var(--r)!important}.cd-p{translate:var(--x) 0!important}
  .cd.wig{animation:none}.ms,.ms-c{transition:none}.ms *,.ms *::after{animation:none!important}.ms-hm s::after{opacity:var(--o);scale:1}}
.fig{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;
  width:2.7em;height:1em;vertical-align:middle;overflow:visible}
.fig svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%) scale(.55);
  width:2.9em;height:2.9em;overflow:visible;opacity:0;
  transition:opacity .5s,transform .75s cubic-bezier(.34,1.7,.64,1)}
.fig.on svg{opacity:1;transform:translate(-50%,-56%) scale(1)}
.fig:not(.on) .blink,.fig:not(.on) .trail,.fig:not(.on) .drip{animation:none}

/* ---------- table / cases ---------- */
#drop{min-height:160svh;padding-block:0}
/* one sticky stage so the heading and the table share the screen */
.drop-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding-top:15vh;overflow:hidden}
.drop-copy{text-align:center;position:relative;z-index:2}
.tabletop{position:absolute;left:0;right:0;bottom:0;padding-bottom:3vh;
  pointer-events:none;display:flex;align-items:flex-end;justify-content:center}
/* the wrapper is exactly the size of the photo, so the shadows below can be
   positioned as percentages of the stool itself and stay right at any viewport */
.stool-wrap{position:relative;display:block}
/* sized by HEIGHT so the stool never swallows the viewport */
#stool{height:min(40svh,360px);width:auto;display:block;position:relative;z-index:2}
/* THE GROUND. Drawn in the photo's own pixel space (760×1112), so every shadow is pinned to a
   measured foot at any size. Feet, from the alpha channel: rear-left touches at (59, 814),
   rear-right at (672, 828), front at (353, 1044) — the three points that define the floor.
   The light in the photo comes from the upper left, so everything the stool casts falls
   back and to the right. Layers, bottom to top: an ambient pool on the floor, the seat's cast
   shadow, one cast shadow per leg running from its foot to the seat's shadow, and a dark
   contact shadow pinned under each foot — the part that says "touching", not "hovering". */
.ground{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}

#cases{min-height:0;padding-block:110px 0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:clamp(26px,4.4vh,46px);position:relative}
#cases>.wrap{width:100%}
.cases-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px;margin-bottom:24px}
/* the cards live in fixed #deck, but once risen they track this slot, so they scroll with the section */
.case-slot{width:100%;flex:none;pointer-events:none}
.more-bar{position:relative;transform:translateY(26px);opacity:0;margin:0 20px;
  width:min(720px,calc(100% - 40px));display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  justify-content:center;padding:130px 0 0;background:none;border:0;box-shadow:none;z-index:45;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s}
.more-bar strong{display:block;font:700 16px/1.35 var(--body)}
.more-bar{flex-direction:column;align-items:center;gap:0;margin:0 auto!important;width:max-content!important;align-self:center}
.perch{left:-78px}
.perch .pnote .parr{position:absolute;left:-6px;top:24px;width:44px;height:38px;overflow:visible;rotate:4deg}
.perch .pnote .parr path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.perch{position:relative;display:block;height:0;width:0}
.perch .pb{position:absolute;left:-10px;bottom:-14px;width:90px;height:80px;display:block}
.perch .pb svg{width:100%;height:100%;overflow:visible}
.perch .pnote{position:absolute;left:84px;bottom:36px;white-space:nowrap;font:400 26px/1 var(--hand);color:var(--ink);rotate:-4deg}
.perch .pnote .ic{width:22px;height:22px;vertical-align:-6px;rotate:30deg}
.more-bar em{font-style:normal;font-size:14px;color:var(--ink-soft)}

/* ---------- curious / offer / proof ---------- */
.curious{padding-block:70px 90px}
.curious-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
  padding:44px 34px;border:1px solid var(--edge);border-radius:31px;background:var(--paper-2);
  position:relative;overflow:hidden}
.curious-in::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.1px);background-size:20px 20px;opacity:.6}
.curious-in>*{position:relative;z-index:1}
.curious h3{font-family:var(--pixel);font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;margin:0}
.curious p{margin:0;font-size:16px;color:var(--ink-soft);max-width:50ch}

.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:var(--gap-head)}
.offer{position:relative;padding:34px 30px;border:1px solid var(--edge);border-radius:28px;
  background:var(--paper);overflow:visible;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.offer:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:var(--accent)}
.offer h3{font-family:var(--pixel);font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.offer p{margin:0 0 18px;font-size:16px;color:var(--ink-soft)}
.offer .inc{display:flex;flex-wrap:wrap;gap:6px}
.offer .inc span{font:500 12px/1 var(--body);padding:8px 11px;border:1px solid var(--edge);
  border-radius:13px;color:var(--ink-faint);transition:border-color .3s,color .3s}
.offer:hover .inc span{border-color:var(--accent-deep);color:var(--accent-deep)}
.gist{position:absolute;top:-20px;right:-16px;width:156px;height:114px;border-radius:20px;
  background:var(--tint);border:1px solid rgba(19,19,22,.1);box-shadow:var(--sh-lift);
  display:grid;place-items:center;pointer-events:none;z-index:6;
  opacity:0;transform:translateY(14px) scale(.82) rotate(-8deg);
  transition:opacity .34s,transform .48s cubic-bezier(.34,1.5,.64,1)}
.offer:hover .gist{opacity:1;transform:translateY(0) scale(1) rotate(-4deg)}
.gist svg{width:58%;height:58%}
.gist .lbl{position:absolute;bottom:7px;left:10px;font:400 8px/1 var(--body);color:rgba(19,19,22,.5)}

.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:var(--gap-head)}
.tcard{padding:26px;background:var(--paper);border:1px solid var(--edge);border-radius:25px;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.tcard .who{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.tcard .pfp{width:46px;height:46px;border-radius:21px;background:var(--tint);flex:none;
  border:1px solid rgba(19,19,22,.1);display:grid;place-items:center}
.tcard .pfp .ic{width:20px;height:20px;stroke:rgba(19,19,22,.4)}
.tcard .nm{font:700 16px/1.3 var(--body);color:var(--ink)}
.tcard .rl{font:400 12px/1.6 var(--body);color:var(--ink-faint)}
.tcard .did{font:500 12px/1 var(--body);color:var(--accent-deep);padding:7px 11px;
  border:1px solid var(--accent-soft);background:var(--accent-soft);border-radius:13px;
  display:inline-block;margin-bottom:14px}
.tcard blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.tcard.empty{border-style:dashed;background:none}
.tcard.empty blockquote{color:var(--ink-faint);font-family:var(--body);font-size:16px;line-height:1.6}

/* ---------- about / work / case ---------- */
.beats{display:flex;flex-direction:column;gap:34px;margin-top:40px}
.abeat{position:relative;padding-left:26px;border-left:2px solid var(--edge);transition:border-color .3s;
  display:flex;flex-direction:column;gap:10px}
.abeat:hover{border-color:var(--accent)}
.abeat .n{position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--edge);transition:border-color .3s,transform .3s cubic-bezier(.34,1.8,.64,1)}
.abeat:hover .n{border-color:var(--accent);transform:scale(1.3)}
.abeat h3{font-family:var(--pixel);font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;margin:0}
.abeat p{margin:0;color:var(--ink-soft);font-size:16px;max-width:62ch}
.jobs{display:flex;flex-direction:column;border-top:1px solid var(--edge);margin-top:16px}
.job{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding:20px 4px;
  border-bottom:1px solid var(--edge);transition:background .3s,padding-left .3s}
.job:hover{background:var(--paper-2);padding-left:12px}
.job .yr{font:700 12px/1.8 var(--body);color:var(--accent-deep)}
.job h3{margin:0 0 4px;font-size:1rem;font-weight:700}
.job p{margin:0;font-size:16px;color:var(--ink-soft)}
.edu{margin-top:30px;padding:18px 20px;background:var(--paper-2);border:1px solid var(--edge);
  border-radius:20px;font-size:16px;color:var(--ink-soft);max-width:62ch}
.edu b{color:var(--ink);font-weight:700}

.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
.wcard{display:block;text-align:left;background:var(--paper);border:1px solid var(--edge);border-radius:25px;
  overflow:hidden;cursor:pointer;padding:0;color:inherit;text-decoration:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.wcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:var(--accent)}
.wcard .top{height:170px;display:grid;place-items:center;background:var(--swatch)}
.wcard .top svg{width:84px;height:84px;transition:transform .45s cubic-bezier(.34,1.4,.64,1)}
.wcard:hover .top svg{transform:scale(1.09) rotate(-3deg)}
.wcard .bd{padding:18px 20px 22px}
.wcard h3{margin:0 0 5px;font-family:var(--pixel);font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em}
.wcard .sub{font:400 12px/1 var(--body);color:var(--ink-faint)}
.wcard p{margin:10px 0 0;font-size:14px;color:var(--ink-soft)}

.pg-hero{height:230px;border-radius:28px;margin:26px 0 34px;display:grid;place-items:center;
  background:var(--swatch);position:relative;overflow:hidden}
.pg-hero svg{width:128px;height:128px}
.pg-hero .tg{position:absolute;top:14px;left:16px;font:500 12px/1 var(--body);color:rgba(19,19,22,.5)}
.step{border-left:2px solid var(--edge);padding:0 0 26px 22px;position:relative}
.step::before{content:"";position:absolute;left:-5px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.step h4{font:700 14px/1.2 var(--body);color:var(--ink);margin:0 0 7px}
.step p{margin:0;font-size:16px;color:var(--ink-soft)}
.step p b{color:var(--ink);font-weight:700}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:30px 0 30px}
.shot{aspect-ratio:9/16;border-radius:20px;background:var(--tint);border:1px solid var(--edge);
  display:grid;place-items:center;font:400 12px/1.5 var(--body);color:rgba(19,19,22,.6);text-align:center;
  padding:10px;transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.shot:hover{transform:translateY(-5px) rotate(-1deg)}
.nextup{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--edge)}

/* ---------- contact ---------- */
.contact{padding-block:90px 130px}
.c-card{background:var(--paper);border:1px solid var(--edge);border-radius:34px;
  padding:clamp(30px,5vw,56px);box-shadow:var(--sh);max-width:760px;margin:0 auto;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.socials{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
/* the socials sit apart from the call, so they read as "elsewhere", not as part of the ask */
.c-else{margin-top:64px;display:flex;flex-direction:column;align-items:center;gap:10px}
.c-else>span{font:400 20px/1 var(--hand);color:var(--ink-faint)}
.socials a{font:600 14px/1 var(--body);padding:11px 15px;border:2px solid var(--ink);border-radius:17px;
  background:#fff;text-decoration:none;color:var(--ink);display:inline-flex;gap:7px;align-items:center}
.socials a .ic{width:13px;height:13px;transition:translate .3s cubic-bezier(.34,1.6,.64,1)}
.socials a:hover .ic{translate:2px -2px}

/* every page is hidden until the script's router shows one, so for the ~1s the 8MB file takes to parse the footer was the
   only thing in the flow: it sat at the top, then jumped down when the page appeared. Google counted that as a 0.09 to 0.10
   layout shift on every URL (hidden under the splash, but counted). The footer now waits for the first route */
body:not(.routed) .foot{display:none}
.stk-defs{position:absolute;width:0;height:0;overflow:hidden}
/* ---------- About: the tools I work in, a dock ----------
   Hardik picked a Mac style dock (Oct 1), in the site's own materials: a paper shelf with the ink border and the
   keyboard-key drop, rounded app tiles, a pixel font name tag. Icons swell under the cursor and push their neighbours
   apart, all with transforms (no reflow); the shelf grows with a scale. Click an app and a card drops below it saying
   how he uses it. Phones get a home screen grid instead; a tap opens the same card in place, full row, and the other
   icons move around it (FLIP, transforms only). Alter sits in the list like any other app, on a yellow tile, so people
   ask what it is; its card links to the case study. */
.dock-wrap{display:flex;justify-content:center;margin:calc(var(--gap-head) + 110px) 0 230px;padding:0 16px}
.dock{position:relative;display:flex;align-items:flex-end;gap:10px;padding:12px 16px 14px}
.dk-shelf{position:absolute;inset:0;background:var(--paper,#FAFAF8);border:2px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 var(--ink);transform-origin:50% 100%;z-index:0}
.dk-app{position:relative;z-index:1;flex:none;width:58px;height:58px;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 100%;will-change:transform;outline:none;color:inherit}
.dk-ic{display:grid;place-items:center;width:100%;height:100%;background:#fff;border:1px solid var(--edge);border-radius:15px;box-shadow:0 4px 10px -6px rgba(19,19,22,.35);box-sizing:border-box}
.dk-ic svg{width:60%;height:60%;color:var(--ink)}
.dk-alter .dk-ic{background:#FFD44E;border-color:rgba(19,19,22,.12)}
.dk-alter .dk-ic svg{width:46%;height:46%}
.dk-dot{position:absolute;left:50%;bottom:-9px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity .2s;corner-shape:round!important}
.dk-app[aria-expanded="true"] .dk-dot{opacity:.6}
.dk-tip{position:absolute;left:50%;bottom:calc(100% + 12px);translate:-50% 6px;display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap;
  background:var(--ink);color:#fff;padding:7px 11px 8px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .15s,translate .2s cubic-bezier(.34,1.5,.64,1)}
.dk-tip b{font:700 14px/1 var(--pixel);letter-spacing:.01em}
.dk-tip small{font:400 11.5px/1 var(--body);color:rgba(255,255,255,.7)}
.dk-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--ink)}
.dk-app.tip .dk-tip,.dk-app:focus-visible .dk-tip{opacity:1;translate:-50% 0}
.dock.popping .dk-tip{opacity:0!important}
.dk-app:focus-visible .dk-ic{outline:2px solid #7CC4F2;outline-offset:3px}
/* the card: on desktop it pops up above the clicked icon; on phones it sits in the grid as a full row */
.dk-card{position:absolute;z-index:5;top:calc(100% + 22px);left:0;width:320px;margin-left:-160px;background:#fff;border:2px solid var(--ink);border-radius:20px;
  box-shadow:0 6px 0 var(--ink);padding:16px 18px 18px;box-sizing:border-box;text-align:left;transform-origin:50% 0;
  opacity:0;scale:.92;translate:0 -10px;pointer-events:none;transition:opacity .16s,scale .26s cubic-bezier(.34,1.5,.64,1),translate .26s cubic-bezier(.34,1.5,.64,1)}
.dk-card.on{opacity:1;scale:1;translate:0 0;pointer-events:auto}
.dk-card::after{content:"";position:absolute;left:var(--ax,50%);bottom:100%;width:14px;height:14px;margin:0 0 -6px -7px;background:#fff;border:solid var(--ink);border-width:2px 0 0 2px;rotate:45deg;border-radius:3px 0 0 0}
.dk-ch{display:flex;align-items:center;gap:12px}
.dk-ch .dk-ic{width:44px;height:44px;border-radius:12px;flex:none}
.dk-ch b{display:block;font:700 17px/1.1 var(--pixel);color:var(--ink)}
.dk-ch small{display:block;margin-top:4px;font:400 12.5px/1 var(--body);color:var(--ink-faint)}
.dk-x{margin-left:auto;align-self:flex-start;width:28px;height:28px;border:0;border-radius:50%;background:rgba(19,19,22,.06);color:var(--ink);font:400 18px/1 var(--body);cursor:pointer;flex:none}
.dk-card p{margin:12px 0 0;font:400 14.5px/1.5 var(--body);color:var(--ink-soft)}
.dk-cs{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px;border-radius:12px;background:var(--ink);color:#fff;font:600 13.5px/1 var(--body);text-decoration:none;box-shadow:0 3px 0 #FFD44E}
.dk-cs:hover{translate:0 -1px}
@media (hover:none),(max-width:760px){
  /* phones: a home screen, not a dock. Every tool in view, 4 to a row, names under the icons */
  .dock-wrap{margin:var(--gap-head) 0 0;padding:0 16px}
  .dock{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:row dense;gap:20px 8px;width:100%;max-width:400px;padding:22px 14px 20px;box-sizing:border-box;align-items:start}
  .dk-shelf{border-radius:28px}
  .dk-app{width:auto;height:auto;display:flex;flex-direction:column;align-items:center;transform:none!important;-webkit-tap-highlight-color:transparent}
  .dk-app[aria-expanded="true"]{display:none}
  .dk-ic{width:56px;height:56px;border-radius:15px}
  .dk-tip{position:static;opacity:1;translate:none;background:none;color:var(--ink);padding:7px 0 0;gap:0;width:100%;white-space:nowrap;text-align:center;transition:none}
  .dk-app.tip .dk-tip{translate:none}
  .dk-tip b{font:500 11.5px/1.2 var(--body);letter-spacing:0}.dk-tip small{display:none}.dk-tip::after{display:none}
  .dk-dot{display:none}.dk-g{display:none}
  .dk-card{position:relative;z-index:1;top:auto;left:auto;width:auto;margin:0;grid-column:1/-1;box-shadow:0 4px 0 var(--ink);border-radius:18px;padding:14px 14px 16px;scale:1;translate:none}
  .dk-card:not(.on){display:none}
  .dk-card::after{display:none}
  .dk-ch .dk-ic{width:52px;height:52px;border-radius:14px}}



/* ---------- deck ---------- */
/* The card layer is pinned by the browser itself, with the same rule as the stool's stage (position:sticky, top:0):
   the rail runs from the top of the page to the scroll point where the stage lets go (script sets its height, see
   remark()), and the zero height deck sticks to the top of it. So the cards and the stool unpin on the same frame, on
   the same thread, however far behind the page script is. It replaces the old switch from a fixed layer to an
   absolute one, which the script did a frame late (the cards slid ~30px off the seat, then snapped back). */
#deckRail{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none}
#deck{position:sticky;top:0;left:0;width:100%;height:0;z-index:80;pointer-events:none;opacity:0;transition:opacity .35s}
#deck.live{opacity:1}
.card{position:absolute;left:0;top:0;width:230px;height:300px;backface-visibility:hidden;background:var(--paper);
  border:1px solid var(--edge);border-radius:44px;box-shadow:var(--sh);overflow:hidden;
  pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;will-change:transform;
  transform-origin:50% 50%;text-align:left;color:inherit;text-decoration:none;padding:0}
#deck:not(.live) .card{pointer-events:none}
.card-top{flex:1;position:relative;overflow:hidden;background:var(--swatch)}
.card-art{position:absolute;inset:0;display:grid;place-items:center}
.card-art svg{width:54%;height:54%}
.card-meta{padding:12px 14px;border-top:1px solid var(--edge);background:var(--paper);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-meta b{font:700 13px/1.2 var(--pixel);letter-spacing:-.02em}
.card-meta i{font-style:normal;font:400 10px/1 var(--body);color:var(--ink-faint)}
/* one fixed height for every card's name bar, so the screens above all line up */
.card-meta{flex:none;height:41px;box-sizing:border-box}
.card-meta b,.card-meta i{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta b{flex:none}
.card-meta .ts{display:none}
@media (max-width:819px){
  .card-meta{height:38px;padding:0 10px;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
  .card-meta b{font-size:12px;max-width:100%}
  .card-meta i{font-size:9px;max-width:100%}
  .card-meta .tl{display:none}.card-meta .ts{display:inline}}

/* ---------- card focus: soft page, glass feature chips ---------- */
.focus-veil{position:fixed;inset:0;z-index:65;pointer-events:none;opacity:0;visibility:hidden;overflow:hidden;
  --cx:50vw;--cy:40vh;background:var(--paper)}
/* a page of a book: two justified serif columns, indented paragraphs, darkest near the card */
.book{position:absolute;left:50%;top:6vh;width:min(1480px,92vw);transform:translateX(-50%);
  column-count:2;column-gap:clamp(40px,6vw,120px);column-fill:auto;height:112vh;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-size:clamp(17px,1.75vw,29px);line-height:1.52;color:#26262b;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  -webkit-mask-image:radial-gradient(ellipse 58vw 62vh at var(--cx) var(--cy),rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.06) 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 58vw 62vh at var(--cx) var(--cy),rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.06) 75%,transparent 100%)}
.book p{margin:0;text-indent:1.6em}
.book p:first-child{text-indent:0}
.feats{position:fixed;inset:0;pointer-events:none;z-index:30}
.feats .chip{position:absolute;display:inline-block;white-space:nowrap;overflow:visible;
  padding:4px 8px;font:400 27px/1.1 var(--hand);color:var(--ink);
  opacity:0;transform:scale(.8) rotate(calc(var(--rot) * 2));
  transition:opacity .25s cubic-bezier(.22,1,.36,1) var(--d),transform .5s cubic-bezier(.34,1.6,.64,1) var(--d)}
.feats .chip .t{position:relative;z-index:1}
.feats.in .chip{opacity:1;transform:rotate(var(--rot))}
.feats:not(.in) .chip{transition-delay:0ms}
/* first a marker swash in the project's colour, then a pen loop round it — both draw themselves */
.feats .mark{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.feats .mark path{fill:none;stroke:var(--hl);stroke-linecap:round;opacity:.9;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1)}
.feats.in .mark path{stroke-dashoffset:0;transition-delay:calc(var(--d) + 120ms)}
.feats:not(.in) .mark path{transition-duration:.15s}
/* the pen: a loop round each chip, then an arrow from it to the card — both draw themselves */
.feats .loop{position:absolute;overflow:visible;pointer-events:none}
.hl{position:relative;display:inline-block}
.ul-draw{position:absolute;left:0;width:100%;bottom:-.26em;height:.3em;overflow:visible;pointer-events:none}
.ul-draw{bottom:-.42em;height:.44em;clip-path:inset(-4px 100% -4px 0);transition:clip-path .5s cubic-bezier(.65,0,.35,1) .15s}
.ul-draw.u2{transition-delay:.55s}
.ul-draw path{fill:none;stroke-width:2.8px;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:none!important;stroke-dashoffset:0!important}
.ul-draw.u1 path{stroke:var(--u1)}.ul-draw.u2 path{stroke:var(--u2);stroke-width:2.2px}
h2.seen .ul-draw{clip-path:inset(-4px 0 -4px 0)}
h2.seen .ul-draw path{stroke-dashoffset:0}
.feats .loop path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s cubic-bezier(.65,0,.35,1)}
.feats.in .loop path{stroke-dashoffset:0;transition-delay:calc(var(--d) + 420ms)}
.feats:not(.in) .loop path{transition-duration:.15s}
.ink-layer{position:fixed;inset:0;width:100vw;height:100vh;overflow:visible;pointer-events:none}

/* ---------- canvas ---------- */
#canvasView{padding-block:130px 40px}
#stage{position:relative;height:74svh;min-height:430px;border:1px solid var(--edge);border-radius:28px;
  background:var(--paper-2);overflow:hidden;cursor:grab;touch-action:none;
  background-image:radial-gradient(circle,var(--dot) 1.2px,transparent 1.2px);background-size:22px 22px}
#stage.drag{cursor:grabbing}
#surface{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0}
.frame{position:absolute;background:var(--paper);border:1px solid var(--edge);border-radius:22px;box-shadow:var(--sh);overflow:hidden}
.frame-label{position:absolute;top:-25px;left:2px;font:600 12px/1 var(--body);color:var(--ink-soft);display:flex;align-items:center;gap:7px}
.frame-label i{width:8px;height:8px;border-radius:2px;display:block}
.frame-body{position:absolute;inset:0;padding:16px;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(74px,1fr));align-content:start;overflow:hidden}
.thumb{aspect-ratio:1;border-radius:14px;background:var(--tint);border:1px solid rgba(19,19,22,.07);
  display:grid;place-items:center;font:400 8px/1.5 var(--body);color:rgba(19,19,22,.5);text-align:center;
  padding:5px;transition:transform .25s cubic-bezier(.34,1.5,.64,1)}
.thumb:hover{transform:scale(1.06)}
.cover{position:absolute;inset:0;z-index:5;cursor:pointer;background:var(--cv);
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;border-radius:22px}
.cover h4{font-family:var(--pixel);font-weight:700;font-size:clamp(.95rem,2vw,1.4rem);
  margin:0 0 6px;letter-spacing:-.02em;color:#131316}
.cover p{margin:0;font:400 12px/1.45 var(--body);color:rgba(19,19,22,.66)}
.cover .peel{position:absolute;top:14px;right:16px;font:500 12px/1 var(--body);color:rgba(19,19,22,.62);
  display:inline-flex;align-items:center;gap:6px}
.cover .half{position:absolute;inset:0;background:inherit;border-radius:22px;
  transition:transform .9s cubic-bezier(.3,0,.2,1),opacity .9s ease}
.cover .half.L{clip-path:polygon(0 0,52% 0,47% 12%,54% 26%,45% 41%,53% 57%,46% 72%,52% 88%,48% 100%,0 100%)}
.cover .half.R{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,52% 88%,46% 72%,53% 57%,45% 41%,54% 26%,47% 12%)}
.cover.torn .half.L{transform:translateX(-118%) rotate(-7deg);opacity:0}
.cover.torn .half.R{transform:translateX(118%) rotate(7deg);opacity:0}
.cover.torn{pointer-events:none}
.cover.torn h4,.cover.torn p,.cover.torn .peel{opacity:0;transition:opacity .3s}
.cover-face{position:relative;z-index:2;pointer-events:none}
.canvas-bar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:6px;padding:7px;background:var(--tray);
  border-radius:28px;box-shadow:0 14px 30px -22px rgba(19,19,22,.30);max-width:calc(100% - 24px);overflow-x:auto}
.canvas-bar button{font:700 11.5px/1 var(--body);background:none;border:0;cursor:pointer;color:var(--ink-soft);
  padding:10px 13px;border-radius:17px;background:#fff;transition:background .18s,color .18s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.canvas-bar button:hover{background:var(--paper-2);color:var(--accent-deep)}
.canvas-bar .sep{width:1px;height:20px;background:var(--edge);margin:0 3px;flex:none}
.zoomtag{position:absolute;top:14px;right:16px;z-index:20;font:600 12px/1 var(--body);
  color:var(--ink-faint);background:var(--paper);border:1px solid var(--edge);
  padding:8px 12px;border-radius:14px}

@media (max-width:1000px){.doo.d4{display:none}}
@media (max-width:860px){.doo.d5{display:none}}
@media (max-width:900px){
  .offer-grid{grid-template-columns:1fr}
  .gist{display:none}
  .job{grid-template-columns:70px minmax(0,1fr);gap:12px}
  .doo{transform:scale(.72)}
  .avail{position:static;transform:none;margin-top:22px}
}
@media (max-width:760px){.doo,.tag{display:none}.story{row-gap:.5em}.fig{width:2.3em;height:2.1em}.fig svg{width:2.3em;height:2.3em}
  /* phones: no doodle stranded at a line end; each stack gets its own centred row, shown open */
  #storyText .fig{display:none}#storyText .glue{display:contents}
  #storyText .ms{font-size:.4em}}
@media (max-width:820px){
  /* labels stay — only the icons drop out when there is genuinely no room */
  .nav a .ic{display:none}
  .nav{gap:4px;padding:5px;border-radius:24px}
  .nav a{height:34px;padding:0 10px;font-size:11.5px;border-radius:15px}
  .nav a.logo{height:34px;padding:0 2px}
  .nav a.logo svg{width:44px;height:21.6px}
  /* on a phone the dots ARE home, and the CTA shrinks to a square arrow chip */
  .nav a[data-r="/"]{display:none}
  .nav .cta{width:34px;padding:0;justify-content:center}
  .nav .cta span{display:none}
  .nav .cta .ic{display:block}
}
@media (max-width:520px){
  /* a phone can't hold four labelled chips AND the docked cards, so the board —
     the least phone-friendly page — leaves the bar; it stays one tap away via "Go ahead" */
  .nav a[data-r="/gallery"]{display:none}
  .nav{gap:4px}
  .nav a{padding:0 9px;font-size:11px}
  .nav a.logo{padding:0}
  #navSlot{height:34px;margin:0 -2px}
  .nav a::before{content:"";position:absolute;inset:-5px -2px}
  .hint{display:none}
  .claim{max-width:none}
  .selbox,.youcur{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .avail .dot::after,.cfab::after,.wsh-tl li.now i::after{animation:none;opacity:0}}
/* =================== ROUND 20: Parchi =================== */
/* accent: the app's own vibrant purple (ParchiPurpleSupporting), the pillar #E7BBFF is too light for CTA/text contrast */
#v-case[data-case="parchi"]{--acc:#A500FF}
#v-case[data-case="parchi"] .cs-flow .outs span,#v-case[data-case="parchi"] .cs-cta .btn{background:var(--acc);color:#fff}
#v-case[data-case="parchi"] .slab b{background:var(--acc);color:#fff}
#v-case[data-case="parchi"] .cs-pipe li{--pc:var(--acc)!important}
#v-case[data-case="parchi"] .cs-dec>div{--dc:var(--acc)!important}
#v-case[data-case="parchi"] .cs-steps li::before{background:var(--acc)}
#v-case[data-case="parchi"] .cs-type i{color:var(--acc)}
.cs-sketches img.pc-wire{filter:grayscale(1) contrast(1.35) brightness(1.3)}
/* cover canvas */
.pc-cover{background:#1F0038;border-radius:44px;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:64px;
  background-image:radial-gradient(circle at 34% 50%,rgba(165,0,255,.28),transparent 42%)}
.pc-cvi img{display:block;width:150px;height:auto;border-radius:14px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6)}
.pc-cvt{display:flex;flex-direction:column;gap:10px;color:#F4F0FA}
.pc-cvt b{font:700 58px/1 'Roboto Mono',ui-monospace,monospace;letter-spacing:2px}
.pc-cvt em{font:400 20px/1.25 Inter,system-ui,sans-serif;font-style:normal;color:#E7BBFF;max-width:14ch}
.pc-cvt small{font:500 13px/1 'Roboto Mono',ui-monospace,monospace;color:#B98FE0;letter-spacing:.5px}
/* final screens board: 6 frames at 13.5% width on a 1200/560 stage stay inside it at every width (percent of a fixed ratio) */
.stg.pc .stg-in{aspect-ratio:1200/560}
.stg.pc .stp{border-radius:10px;overflow:hidden}
@media (max-width:760px){.stg.pc .stg-in{aspect-ratio:390/1360}}
/* home card cover: the real home screen, bottom anchored (like Alter) so the nav + mic FAB are in view.
   Mic FAB centre 195,764 of 390x844 = 50% / 90.52%; 64dp = 16.41% x 7.58%. Receipt record button 68dp at 195,771 (91.35%), 195,749 listening (88.74%). */
.pc-ccv{background:#FAF7FC}
.pc-ccv .cph{aspect-ratio:390/844}
.pc-ccv .cph::after{display:none}
.pc-ccv .c2,.pc-ccv .c3{clip-path:circle(0% at 50% 90.52%);transition:clip-path .55s cubic-bezier(.22,1,.36,1)}
.pc-ccv.open .c2,.pc-ccv.open .c3{clip-path:circle(150% at 50% 90.52%)}
.pc-ccv .c3{opacity:0;transition:clip-path .55s cubic-bezier(.22,1,.36,1),opacity .25s ease}
.pc-ccv.open.lst .c3{opacity:1}
.pc-go{left:50%;top:90.52%;width:16.41%;height:7.58%;border-radius:50%;--hc:rgba(165,0,255,.36)}
.pc-rk{left:50%;top:91.35%;width:17.44%;height:8.06%;border-radius:50%;display:none;transition:top .3s ease}
.pc-ccv.open .pc-go{display:none}.pc-ccv.open .pc-rk{display:block}.pc-ccv.lst .pc-rk{top:88.74%}
@media (prefers-reduced-motion:reduce){.pc-go{animation:none}}
/* live demos: each one is laid out at the app's own 390dp width and zoomed to fit its column (pcFit) */
@media (max-width:1000px){.trk-wrap.pc-wrap{grid-template-columns:minmax(0,1fr)}}
.pc-wrap .trk-demo{min-width:0}
.pcd{width:100%;max-width:360px;margin:0 auto;border-radius:22px;overflow:hidden;border:1px solid var(--edge);background:#FAF7FC}
.pcd-z{width:390px;position:relative;background:#FAF7FC;color:#0F172A;font:400 14px/1.3 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif}
.pcd-z svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcd-z .pcd-logo{width:28px;height:28px;flex:none;stroke:none}
.pcd-z button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.pcd-z{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--sans:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif}
/* 1: home */
.pcd-home{height:600px;overflow:hidden;display:flex;flex-direction:column}
.pcd-top{display:flex;align-items:center;gap:8px;padding:12px 18px;flex:none}
.pcd-store{flex:1;min-width:0;margin-left:2px;font:900 19px/1 var(--mono);letter-spacing:1.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcd-sq{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px;background:#fff;border:1.2px solid #E2E8F0;box-shadow:0 1px 3px rgba(0,0,0,.08);color:#0F172A;transition:background .2s,border-color .2s,color .2s}
.pcd-sq svg{width:20px;height:20px}.pcd-st{color:#A500FF}
.pcd-home.q [data-s]{background:#F7ECFF;border-color:#A500FF;color:#A500FF}
.pcd-sx{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;flex:none}
.pcd-sx>div{overflow:hidden;padding:0 18px}
.pcd-home.q .pcd-sx{grid-template-rows:1fr;opacity:1}
.pcd-field{display:flex;align-items:center;gap:12px;margin:6px 0;height:56px;padding:0 4px 0 14px;border-radius:18px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pcd-field:focus-within{border:2px solid #A500FF;padding-left:13px}
.pcd-lead{width:20px;height:20px;color:#A500FF;flex:none}
.pcd-field input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 15px/1 var(--sans);color:#0F172A}
.pcd-field input::placeholder{color:#94A3B8;font-size:13px}
.pcd-x{width:48px;height:48px;display:grid;place-items:center;color:#64748B}.pcd-x svg{width:18px;height:18px}
.pcd-grid{flex:1;overflow:hidden;padding:0 16px}
.pcd-gh{display:flex;gap:6px;padding:10px 0 4px;font:700 12px/16px var(--mono);color:#64748B;margin-bottom:10px}
.pcd-gh span{font-weight:500;color:#94A3B8;white-space:pre}.pcd-gh i{font-style:normal}
.pcd-gg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.pcd-gh[hidden],.pcd-gg[hidden],.pcd-card[hidden]{display:none}
.pcd-card{height:130px;box-sizing:border-box;padding:12px;border-radius:18px;background:#fff;border:1.2px solid #E2E8F0;box-shadow:0 1px 3px rgba(0,0,0,.07);display:flex;flex-direction:column;justify-content:space-between;animation:pcdIn .3s ease}
@keyframes pcdIn{from{opacity:0;scale:.96}}
.pcd-r{display:flex;justify-content:space-between;align-items:center}
.pcd-r b{font:900 13px/1 var(--mono)}.pcd-r small{font:400 10px/1 var(--mono);color:#94A3B8}
.pcd-card em{display:block;font:700 12px/16px var(--sans);font-style:normal;color:#3B0066;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcd-card span{display:block;font-size:11px;line-height:15px;color:#64748B}
.pcd-card strong{font:900 16px/1 var(--mono)}
.pcd-empty{display:none;flex-direction:column;align-items:center;text-align:center;padding:60px 24px 0}
.pcd-home.none .pcd-empty{display:flex}
.pcd-empty span{width:64px;height:64px;border-radius:20px;background:#F7ECFF;display:grid;place-items:center;color:#A500FF;margin-bottom:14px}.pcd-empty span svg{width:32px;height:32px}
.pcd-empty b{font-size:16px;margin-bottom:4px}.pcd-empty small{font-size:12px;color:#64748B;max-width:260px}
/* 2: receipt */
.pcd-rc{height:600px;display:flex;flex-direction:column}
.pcd-rt{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;flex:none}
.pcd-bk{width:38px;height:38px;border-radius:12px;background:#fff;border:1px solid #E2E8F0;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.08)}.pcd-bk svg{width:18px;height:18px}
.pcd-rt i{width:38px}
.pcd-rtt{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--mono);letter-spacing:1px}.pcd-rtt .pcd-logo{width:22px;height:22px}
.pcd-disp{flex:1;min-height:0;overflow:hidden;padding:8px 12px 0;display:flex;flex-direction:column;align-items:center}
.pcd-slot{width:94%;height:34px;flex:none;border-radius:16px;background:linear-gradient(#22242A,#15161A,#0B0C0E);border:1.5px solid #3B3E48;box-sizing:border-box;display:grid;place-items:center;box-shadow:0 8px 16px -6px rgba(0,0,0,.35);position:relative;z-index:0}
.pcd-slot i{width:88%;height:10px;border-radius:5px;background:#050507;border:1px solid #27272A;box-sizing:border-box}
.pcd-paper{width:90%;margin-top:-10px;position:relative;z-index:1;background:#FFFDF9;padding:18px 18px 12px;box-sizing:border-box;box-shadow:0 10px 24px -8px rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:center;font-family:var(--mono);color:#18181B}
.pcd-sn{font:900 14px/19px var(--mono);letter-spacing:1.2px}
.pcd-dt{font:600 11px/15px var(--mono);letter-spacing:.8px;color:#27272A;margin-top:3px}
.pcd-dash{align-self:stretch;height:0;border-top:1.2px dashed #D4D4D8;margin:19px 0 13px}
.pcd-paper .pcd-d2{margin:17px 0 15px}
.pcd-th,.pcd-row{align-self:stretch;display:grid;grid-template-columns:22px 1.2fr .9fr 62px;align-items:center}
.pcd-th{font:700 11px/15px var(--mono);color:#71717A;margin-bottom:4px}
.pcd-th i,.pcd-row i{font-style:normal}.pcd-th span,.pcd-row span{text-align:center}.pcd-th em,.pcd-row em{text-align:right;font-style:normal}
.pcd-body{align-self:stretch;display:flex;flex-direction:column;gap:4px}
.pcd-row{padding:4px 0;animation:pcdRow .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--k) * 40ms)}
@keyframes pcdRow{from{opacity:0;translate:0 -50%}}
.pcd-row i{font:400 12px/1 var(--mono);color:#71717A}.pcd-row b{font:700 13px/18px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcd-row span{font:400 12px/1 var(--mono);color:#27272A}.pcd-row em{font:700 13px/1 var(--mono)}
.pcd-empty2{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 0}
.pcd-empty2 b{font:700 12px/16px var(--mono);color:#A1A1AA}.pcd-empty2 span{font:400 11px/15px var(--mono);color:#71717A}
.pcd-proc{padding:32px 0}.pcd-proc b{color:#18181B;letter-spacing:1px}.pcd-proc span{font-size:10px}
.pcd-spin{width:26px;height:26px;box-sizing:border-box;border-radius:50%;border:2.5px solid #18181B;border-right-color:transparent;margin-bottom:8px;animation:pcdSpin 1s linear infinite;corner-shape:round}
@keyframes pcdSpin{to{rotate:1turn}}
.pcd-tot{align-self:stretch;display:flex;justify-content:space-between;align-items:center}
.pcd-tot b{font:800 14px/1 var(--mono);letter-spacing:1px}.pcd-tot strong{font:900 18px/24px var(--mono)}
.pcd-tear{align-self:stretch;height:12px;margin-top:14px;background:#F1F0EC;clip-path:polygon(0 0,100% 0,100% 0,98.08% 100%,96.15% 0,94.23% 100%,92.31% 0,90.38% 100%,88.46% 0,86.54% 100%,84.62% 0,82.69% 100%,80.77% 0,78.85% 100%,76.92% 0,75% 100%,73.08% 0,71.15% 100%,69.23% 0,67.31% 100%,65.38% 0,63.46% 100%,61.54% 0,59.62% 100%,57.69% 0,55.77% 100%,53.85% 0,51.92% 100%,50% 0,48.08% 100%,46.15% 0,44.23% 100%,42.31% 0,40.38% 100%,38.46% 0,36.54% 100%,34.62% 0,32.69% 100%,30.77% 0,28.85% 100%,26.92% 0,25% 100%,23.08% 0,21.15% 100%,19.23% 0,17.31% 100%,15.38% 0,13.46% 100%,11.54% 0,9.62% 100%,7.69% 0,5.77% 100%,3.85% 0,1.92% 100%,0 0)}
.pcd-bar{flex:none;padding:8px 16px;position:relative;z-index:2}
.pcd-recw{display:flex;flex-direction:column;align-items:center;padding:4px 0}
.pcd-rec{position:relative;width:90px;height:90px;display:grid;place-items:center}
.pcd-rec>*{grid-area:1/1}
.pcd-shd{width:68px;height:68px;border-radius:50%;background:rgba(0,0,0,.2);translate:0 4px;corner-shape:round}
.pcd-btn{width:68px;height:68px;border-radius:50%;box-sizing:border-box;border:2px solid #E7BBFF;background:linear-gradient(#A500FF,#8800D6);display:grid;place-items:center;color:#fff;position:relative;corner-shape:round;transition:scale .25s cubic-bezier(.34,1.56,.64,1)}
.pcd-rec:active .pcd-btn{scale:.92}
.pcd-btn svg{width:30px;height:30px;grid-area:1/1}.pcd-pause{display:none}
.pcd-w1,.pcd-w2{width:64px;height:64px;border-radius:50%;box-sizing:border-box;opacity:0;corner-shape:round;pointer-events:none}
.pcd-w1{background:rgba(165,0,255,.5);border:2px solid #E7BBFF}
.pcd-w2{background:rgba(165,0,255,.4);border:1.8px solid #E7BBFF}
.pcd-rc[data-st="listen"] .pcd-w1{animation:pcdW1s 1.4s cubic-bezier(.4,0,.2,1) infinite,pcdW1a 1.4s linear infinite}
.pcd-rc[data-st="listen"] .pcd-w2{animation:pcdW2 2.15s infinite}
.pcd-rc[data-st="listen"] .pcd-btn{border-width:3px;animation:pcdPulse .7s cubic-bezier(.4,0,.2,1) infinite alternate}
.pcd-rc[data-st="listen"] .pcd-mic{display:none}.pcd-rc[data-st="listen"] .pcd-pause{display:block}
@keyframes pcdW1s{from{scale:1}to{scale:2.1}}
@keyframes pcdW1a{from{opacity:.7}to{opacity:0}}
/* Compose delayMillis=350 holds the start value for 350 of every 2150ms, then 1800ms to 2.6x */
@keyframes pcdW2{0%,16.28%{scale:1;opacity:.5;animation-timing-function:cubic-bezier(.4,0,.2,1)}100%{scale:2.6;opacity:0}}
@keyframes pcdPulse{from{scale:1}to{scale:1.08}}
.pcd-hear{margin:6px 0 0;min-height:16px;font:700 11.5px/16px var(--sans);letter-spacing:.6px;color:#64748B;text-align:center;max-width:358px}
.pcd-rc[data-st="idle"] .pcd-hear{display:none}
.pcd-pills{display:none;gap:8px}
.pcd-rc[data-st="done"] .pcd-recw{display:none}.pcd-rc[data-st="done"] .pcd-pills{display:flex;animation:pcdIn .3s ease}
.pcd-pills span{flex:1;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:6px;font:700 11.5px/1 var(--mono);box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pcd-pills svg{width:16px;height:16px}
.pl-e{background:#F7ECFF;border:1.2px solid rgba(165,0,255,.3);color:#A500FF}.pl-p{background:#F0D6FF;border:1.2px solid rgba(165,0,255,.3);color:#A500FF}
.pcd-pills .pl-s{flex:1.1;background:#D1FAE5;border:1.2px solid rgba(5,150,105,.5);color:#059669}
.pcd-again{font:inherit;font-weight:700;color:#A500FF;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.pcd-rc .pcd-w1,.pcd-rc .pcd-w2,.pcd-rc .pcd-btn{animation:none!important}}
/* 3: parser */
.pcd-ps{padding:20px 18px 22px;display:flex;flex-direction:column;gap:8px;min-height:600px;box-sizing:border-box}
.pcd-lb{font:700 11px/1 var(--mono);color:#64748B;margin-top:6px}
.pcd-in{height:56px;border-radius:18px;border:1px solid #E2E8F0;background:#fff;padding:0 16px;font:500 16px/1 var(--sans);color:#0F172A;outline:0;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pcd-in:focus{border:2px solid #A500FF;padding:0 15px}
.pcd-ex{display:flex;flex-wrap:wrap;gap:6px}
.pcd-ex button{padding:8px 12px;border-radius:16px;background:#fff;border:1.2px solid #E2E8F0;font:500 12.5px/1.2 var(--sans);text-align:left}
.pcd-ex button.on{background:#F0D6FF;border-color:#A500FF;color:#3B0066;font-weight:800}
.pcd-norm{display:block;padding:12px 14px;border-radius:14px;background:#F7ECFF;font:600 13px/1.4 var(--mono);color:#1F0038;word-break:break-word}
.pcd-mini{background:#FFFDF9;padding:16px 18px 14px;margin-top:6px;box-shadow:0 8px 20px -8px rgba(0,0,0,.25);display:flex;flex-direction:column}
.pcd-out{display:flex;flex-direction:column;gap:4px}
.pcd-none{padding:14px 0;text-align:center;font:400 11px/1 var(--mono);color:#71717A}
@media (max-width:1000px){.pc-cvt b{font-size:44px}}

/* =================== ROUND 22: interactions (batch 1) =================== */
/* Ported from hardikk-gupta/haha-hardikk (read-only reference repo), filtered to
   Hardik's keep list. See CLAUDE.md for the full accept/reject record. */

/* found counter + the list of what's hidden */
/* the found counter lives in the footer bar now, set like the footer's own links */
.hg-found{display:inline-flex;align-items:baseline;gap:4px;vertical-align:baseline;line-height:inherit;padding:0;border:0;background:none;color:var(--ink-faint);font:inherit;cursor:pointer;transition:color .2s}
.hg-found:hover{color:var(--accent-deep)}
.hg-found i{display:none}
.hg-found b{font:inherit}
.hg-found.bump{animation:hgBump .6s cubic-bezier(.34,1.6,.64,1)}
@keyframes hgBump{30%{scale:1.14;rotate:-4deg}60%{scale:.97;rotate:2deg}}
.hg-sheet{position:fixed;left:16px;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:121;width:min(360px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 120px));overflow:auto;padding:18px 18px 12px;border:1.5px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:var(--sh-lift);opacity:0;visibility:hidden;translate:0 10px;transition:opacity .2s,translate .3s cubic-bezier(.34,1.6,.64,1),visibility 0s .3s}
.hg-sheet.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .2s,translate .3s cubic-bezier(.34,1.6,.64,1)}
.hg-sheet h4{margin:0 0 4px;font:700 18px/1.2 var(--pixel)}
.hg-sheet>p{margin:0 0 12px;font:400 14px/1.45 var(--body);color:var(--ink-soft)}
.hg-sheet ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hg-sheet li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:8px 6px;border-radius:10px;font:400 14px/1.4 var(--body);color:var(--ink-soft)}
.hg-sheet li s{display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--dim);border-radius:50%;corner-shape:round!important;text-decoration:none;font:700 11px/1 var(--pixel);color:transparent}
.hg-sheet li.got{color:var(--ink)}
.hg-sheet li.got s{border-color:var(--ink);background:var(--p-g);color:var(--ink)}
.hg-sheet li.got b{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(19,19,22,.45)}
.hg-sheet li b{font-weight:500}
.hg-sheet .hg-x{display:block;margin:10px 0 0 auto;border:0;background:none;font:500 13px/1 var(--body);color:var(--ink-faint);cursor:pointer;padding:6px}
.hg-toast{position:fixed;left:50%;top:84px;z-index:130;translate:-50% -14px;opacity:0;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 14px/1.2 var(--body);pointer-events:none;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;transition:opacity .2s,translate .35s cubic-bezier(.34,1.6,.64,1)}
.hg-toast.on{opacity:1;translate:-50% 0}
.hg-toast em{font:400 18px/1 var(--hand);font-style:normal;color:var(--p-y);margin-right:6px}

/* cursor chat */
.cchat{position:fixed;left:0;top:0;z-index:125;display:none;padding:8px 14px;border-radius:4px 18px 18px 18px;background:var(--ink);box-shadow:var(--sh-lift)}
.cchat.on{display:block;animation:ccIn .22s cubic-bezier(.34,1.6,.64,1)}
@keyframes ccIn{from{scale:.6;opacity:0}}
.cchat input{width:min(260px,60vw);border:0;outline:0;background:none;color:var(--paper);font:500 15px/1.3 var(--body);caret-color:var(--p-y)}
.cchat input::placeholder{color:rgba(250,250,248,.5)}
.cbub{position:fixed;left:0;top:0;z-index:124;padding:8px 14px;border-radius:4px 18px 18px 18px;background:var(--bc,#FFD44E);color:var(--ink);font:500 15px/1.3 var(--body);box-shadow:var(--sh);pointer-events:none;max-width:280px;animation:cbFloat 4.2s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes cbFloat{0%{opacity:0;scale:.7}8%{opacity:1;scale:1}70%{opacity:1;translate:0 -40px}100%{opacity:0;translate:0 -70px}}

/* the Work title edits itself */
.tc-wrap{position:relative}
.tc-d{position:relative;display:inline-block;color:#C8383D;transition:max-width .5s ease .1s,opacity .3s;max-width:8ch;overflow:hidden;vertical-align:bottom;white-space:nowrap}
.tc-d::after{content:"";position:absolute;left:0;top:52%;height:4px;width:0;background:#C8383D;border-radius:2px;transition:width .35s ease}
.tc-d.x::after{width:100%}
.tc-d.gone{max-width:0;opacity:0}
.tc-i{color:var(--accent-deep);text-decoration:underline 3px;text-decoration-color:var(--p-b);text-underline-offset:6px;white-space:pre-wrap}
.tc-i.done{color:inherit;text-decoration-color:transparent;transition:color .4s,text-decoration-color .4s}
.tc-caret{display:inline-block;width:3px;height:.9em;margin-left:2px;vertical-align:-.08em;background:#C8383D;animation:tcBlink .8s steps(1) infinite}
@keyframes tcBlink{50%{opacity:0}}
.tc-c{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;z-index:5;display:flex;gap:8px;align-items:center;white-space:nowrap;padding:6px 12px 6px 6px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:var(--sh);font:400 20px/1 var(--hand);letter-spacing:0;color:var(--ink);animation:ccIn .25s cubic-bezier(.34,1.6,.64,1);transition:opacity .3s}
.tc-c i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;corner-shape:round!important;background:var(--p-y);font:700 11px/1 var(--pixel);font-style:normal}
.tc-c.res{opacity:0}

/* hero: the words you can click through */
.cl1{display:inline-block;white-space:nowrap;will-change:transform;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.wslot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding:0 0 .08em;margin:0 0 -.08em;color:inherit;white-space:nowrap;line-height:inherit;text-align:left}
.wslot>span{grid-area:1/1;justify-self:start;will-change:transform,opacity;transition:translate .5s cubic-bezier(.22,1,.36,1),opacity .35s}
.wslot>span.out{translate:0 -100%;opacity:0}
.wslot>span.in{translate:0 110%;opacity:0}


/* about: redacted words you scrub clean */
.rd{cursor:crosshair}
.rdw{position:relative;display:inline;white-space:nowrap}
.rdw::before{content:"";position:absolute;left:-2px;right:-2px;top:.08em;bottom:.02em;background:var(--ink);border-radius:2px;transform-origin:right center;transition:scale .35s cubic-bezier(.6,0,.3,1)}
.rdw.clr::before{scale:0 1}
.rd-tip{display:block;margin-top:6px;font:400 20px/1.1 var(--hand);color:var(--accent-deep)}

/* about: tone slider */
.tone{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px auto 0;font:500 13px/1 var(--body);color:var(--ink-soft);flex-wrap:wrap}
.tone input{width:200px;accent-color:#131316;cursor:pointer}
.tone-n{flex-basis:100%;text-align:center;margin:6px 0 0;min-height:24px;font:400 22px/1.1 var(--hand);color:#C8383D}
.tone-n.ok{color:#2F8F46}
.tone-word{display:inline-block;animation:twIn .45s cubic-bezier(.34,1.3,.64,1) both;animation-delay:calc(var(--i)*22ms)}
@keyframes twIn{from{opacity:0;translate:0 .35em;filter:blur(4px)}}
.bz{text-decoration:underline wavy #E5484D 2px;text-underline-offset:6px;text-decoration-skip-ink:none}

/* ink that fills as you read */

/* footer: the line that falls */
.fall{cursor:pointer;position:relative;z-index:57}
.fall .fl{display:inline-block;white-space:pre;will-change:transform}
.fall.down{cursor:grab}

/* titles lean toward the cursor */
/* the reveal mask stays on big titles (they never get .done) and clipped letters that lift past the line */
h1.big.leaning{-webkit-mask-image:none!important;mask-image:none!important;filter:none!important}
h1.big.leaning .cx{transition:none!important;filter:none!important;will-change:transform}
h1.big.chs.in .cx{transition:opacity .45s ease,translate .6s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.34,1.5,.64,1),color .25s;transition-delay:calc(var(--i) * 26ms),calc(var(--i) * 26ms),0s,0s}

/* alt: the page measures itself */
.msr{position:fixed;inset:0;z-index:119;pointer-events:none;display:none}
.msr.on{display:block}
.msr .bx{position:absolute;border:1.5px solid #0D99FF;background:rgba(13,153,255,.06)}
.msr .pb{position:absolute;border:1px dashed rgba(13,153,255,.7)}
.msr .sz{position:absolute;padding:3px 6px;border-radius:4px;background:#0D99FF;color:#fff;font:500 11px/1 var(--body);white-space:nowrap;translate:-50% 0}
.msr .ln{position:absolute;background:#F24822}
.msr .ln.h{height:1px}.msr .ln.v{width:1px}
.msr .ln.h::before,.msr .ln.h::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:#F24822}
.msr .ln.h::before{left:0}.msr .ln.h::after{right:0}
.msr .ln.v::before,.msr .ln.v::after{content:"";position:absolute;left:-3px;height:1px;width:7px;background:#F24822}
.msr .ln.v::before{top:0}.msr .ln.v::after{bottom:0}
.msr .lb{position:absolute;padding:2px 5px;border-radius:4px;background:#F24822;color:#fff;font:500 11px/1 var(--body);translate:-50% -50%;white-space:nowrap}

/* layers panel */
.lyr{position:fixed;left:16px;top:96px;bottom:70px;z-index:117;width:272px;display:none;flex-direction:column;border:1.5px solid var(--ink);border-radius:14px;background:#fff;box-shadow:var(--sh-lift);font:400 12px/1 var(--body);color:#2C2C2C;overflow:hidden}
.lyr.on{display:flex;animation:ccIn .22s cubic-bezier(.34,1.4,.64,1)}
.lyr-h{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;border-bottom:1px solid #EDEDED}
.lyr-h b{font:700 13px/1 var(--pixel)}
.lyr-h span{color:#8A8A8A}
.lyr-h button{margin-left:auto;width:24px;height:24px;border:0;border-radius:6px;background:none;cursor:pointer;font-size:16px;line-height:1;color:#555}
.lyr-h button:hover{background:#F2F2F2}
.lyr-l{flex:1;overflow:auto;padding:6px 0 10px;overscroll-behavior:contain}
.lr{position:relative;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 calc(10px + var(--d) * 14px);cursor:default;white-space:nowrap}
.lr:hover{background:#EEF6FF}
.lr.sel{background:#DDEEFF}
.lr.off{opacity:.4}
.lr i{flex:none;width:14px;text-align:center;font:700 10px/1 var(--pixel);font-style:normal;color:#8A8A8A}
.lr i.f{color:#0D99FF}
.lr span{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.lr .eye{flex:none;width:22px;height:22px;border:0;border-radius:5px;background:none;cursor:pointer;opacity:0;display:grid;place-items:center;color:#555}
.lr:hover .eye,.lr.off .eye{opacity:1}
.lr .eye:hover{background:#DCE9F7}
.lr .eye svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lyr-f{padding:8px 12px;border-top:1px solid #EDEDED;color:#8A8A8A;font-size:11px;line-height:1.35}
.lyr-hl{position:fixed;z-index:116;pointer-events:none;border:1.5px solid #0D99FF;display:none}
.lyr-hl.on{display:block}
.lyr-hl b{position:absolute;left:-1.5px;top:-20px;padding:3px 6px;border-radius:4px 4px 0 0;background:#0D99FF;color:#fff;font:500 11px/1 var(--body);white-space:nowrap}

/* sleepy doodles */
.hey.zz{animation:heyin .5s cubic-bezier(.34,1.8,.64,1) both,zzz 2.4s ease-in-out .5s infinite}
@keyframes zzz{50%{translate:-50% calc(-100% - 8px);rotate:-4deg}}

/* present mode */
.pz-btn{display:inline-flex;align-items:center;gap:8px;height:34px;margin:14px 0 0;padding:0 14px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);font:500 13px/1 var(--body);color:var(--ink);cursor:pointer;box-shadow:var(--sh)}
.pz-btn:hover{background:var(--ink);color:var(--paper)}
.pz-btn kbd{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid currentColor;border-radius:5px;font:600 11px/1 var(--pixel);opacity:.7}
.pz{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;background:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.4px);background-size:24px 24px}
.pz.on{display:flex}
.pz-stage{position:relative;flex:1;overflow:hidden;display:grid;place-items:center;padding:32px 40px 8px}
.pz-s{position:relative;width:min(1100px,100%);max-height:100%;overflow:auto;animation:pzIn .45s cubic-bezier(.22,1,.36,1) both;scrollbar-width:thin}
.pz-s.back{animation-name:pzBack}
@keyframes pzIn{from{opacity:0;translate:60px 0}}
@keyframes pzBack{from{opacity:0;translate:-60px 0}}
.pz-in{transform-origin:top center}
.pz-in .cs-sec{margin:0!important;padding:0!important;border:0!important}
.pz-in .cs-n{display:none}
.pz-in h2{font-size:clamp(28px,3.4vw,46px)!important}
.pz-in .cs-p{font-size:19px!important;max-width:64ch}
.pz-title{padding:6vh 0;text-align:left}
.pz-title .k{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--pz,#FFD44E);border:1.5px solid var(--ink);font:500 14px/1 var(--body)}
.pz-title h1{margin:22px 0 12px;font:700 clamp(56px,9vw,120px)/.95 var(--pixel);letter-spacing:-.03em}
.pz-title p{max-width:52ch;font-size:clamp(18px,1.8vw,24px);line-height:1.45;color:var(--ink-soft);margin:0}
.pz-title .by{margin-top:36px;font:400 26px/1 var(--hand);color:var(--accent-deep)}
.pz-bar{display:flex;align-items:center;gap:10px;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px))}
.pz-bar button{height:36px;min-width:36px;padding:0 12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);font:500 13px/1 var(--body);cursor:pointer}
.pz-bar button:hover{background:var(--ink);color:var(--paper)}
.pz-bar .ct{font:600 13px/1 var(--pixel);min-width:64px;text-align:center}
.pz-bar .tr{flex:1;height:6px;border-radius:99px;background:var(--paper-3);overflow:hidden}
.pz-bar .tr i{display:block;height:100%;width:0;background:var(--pz,#FFD44E);border-right:1.5px solid var(--ink);transition:width .45s cubic-bezier(.22,1,.36,1)}
.pz-bar .x{margin-left:4px}
.pz-hint{position:absolute;right:20px;top:14px;font:400 13px/1 var(--body);color:var(--ink-faint)}

/* the canvas is a fixed surface: the bottom-edge scroll blur only smears its own controls there */
body.cvmode .eblur{display:none!important}


/* The sky (Oct 21): an ASCII sky on a fine grid of square cells where clouds drift, paper planes fly and Hardik's tools
   float past, each turned into coloured tiles and glyphs. Light mode only. The canvas paints the sky; the content
   keeps the footer's earlier layout (a frosted contact panel with the call, six link cards under it) as HTML. */
.foot{--sh-bg:#F7F7F4;--sh-panel:rgba(255,255,255,.62);--sh-panel-solid:rgba(255,255,255,.94);--sh-line:rgba(19,19,22,.08);--sh-chip:rgba(19,19,22,.06);--sh-bar:rgba(255,255,255,.8)}
  --ink:#F2F1EC;--ink-soft:#BEBDB7;--ink-faint:#95948F;--paper:#131316;--edge:rgba(255,255,255,.12);color-scheme:dark}
.foot{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;padding:0;border:0;color:var(--ink);background:var(--sh-bg)}
.sky{--cs:10px;position:relative;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(112px,calc(env(safe-area-inset-top) + 96px)) max(24px,calc((100vw - 1080px)/2),env(safe-area-inset-right)) max(132px,calc(env(safe-area-inset-bottom) + 120px)) max(24px,calc((100vw - 1080px)/2),env(safe-area-inset-left));color:var(--ink)}
.sky-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sky-in{position:relative;z-index:1;width:100%}
/* a soft fog of the pond colour behind the words, so tiles never fight the text */
.sky-in::before{content:"";position:absolute;z-index:-1;inset:-56px -72px;pointer-events:none;background:radial-gradient(closest-side,var(--sh-bg) 40%,color-mix(in srgb,var(--sh-bg) 65%,transparent) 70%,transparent)}
.foot-label{display:block;margin:0 0 12px;font:600 12px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.foot-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 40px;align-items:center;padding:32px 36px;border-radius:24px;background:var(--sh-panel-solid);border:1px solid var(--sh-line);box-shadow:0 1px 2px rgba(19,19,22,.1),0 18px 44px -14px rgba(19,19,22,.24)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.foot-contact{background:var(--sh-panel);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}}
.foot-contact h2{margin:0;max-width:22ch;font:500 clamp(30px,3.3vw,46px)/1.1 var(--body);letter-spacing:-.035em;color:var(--ink)}
.foot-contact p{margin:16px 0 0;max-width:52ch;font:400 16px/1.6 var(--body);color:var(--ink-soft)}
.foot-contact{align-items:center}
/* booking: a small month calendar; the picked day rides along to the booking page, the call sits at the end */
.foot-book{width:300px;display:flex;flex-direction:column;gap:12px}
.foot-book .btn{width:100%;box-sizing:border-box;justify-content:center;white-space:nowrap}
.cal{padding:12px;border-radius:16px;background:rgba(255,255,255,.86);border:1px solid var(--sh-line)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-head b{font:600 14px/1 var(--body)}
.cal-nav{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer}
.cal-nav:hover:not(:disabled){background:var(--sh-chip)}.cal-nav:disabled{opacity:.3;cursor:default}
.cal-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cal-days,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-days span{font:500 11px/24px var(--body);color:var(--ink-faint)}
.cal-grid button{height:36px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink);font:500 13px/1 var(--body);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s}
.cal-grid button:hover:not(:disabled){background:var(--p-y)}
.cal-grid button.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cal-grid button[aria-pressed=true],.cal-grid button[aria-pressed=true]:hover{background:var(--ink);color:#fff}
.cal-grid button:disabled{color:var(--dim);cursor:default}
.cal-grid button:focus-visible,.cal-nav:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.foot-contact .cal-pick{margin:0;max-width:none;font:400 13px/1.45 var(--body);color:var(--ink-soft);text-align:center}
.cal-pick b{color:var(--ink);font-weight:600}
.foot-socials{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:16px}
.cx-s{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:18px 14px 16px;text-align:left;border-radius:16px;border:1px solid var(--sh-line);background:var(--sh-panel-solid);box-shadow:0 1px 1px rgba(19,19,22,.1),0 6px 14px -4px rgba(19,19,22,.16);color:var(--ink);text-decoration:none;font:inherit;cursor:pointer;transition:transform .25s,box-shadow .25s,color .2s}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cx-s{background:var(--sh-panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.cx-s::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sc);clip-path:circle(0% at 16px 16px);transition:clip-path .4s cubic-bezier(.22,1,.36,1)}
.cx-s:hover,.cx-s:focus-visible{transform:translateY(-4px);box-shadow:0 2px 2px rgba(19,19,22,.12),0 14px 26px -6px rgba(19,19,22,.22);color:#131316}
.cx-s:hover::before,.cx-s:focus-visible::before,.cx-s.done::before{clip-path:circle(150% at 16px 16px)}
.cx-s.done{color:#131316}
.cx-s b{font:600 15px/1.3 var(--body)}
.cx-s small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 12px/1.4 var(--body);color:var(--ink-soft)}
.cx-s:hover small,.cx-s:focus-visible small,.cx-s.done small{color:#3B3B42}
.cx-s>.ic{position:absolute;right:12px;top:18px;width:12px;height:12px;transition:transform .25s}
.cx-s:hover>.ic{transform:translate(2px,-2px)}
.cx-s:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.cx-mail small{white-space:normal;overflow-wrap:anywhere}
.sky-hint{margin:16px 0 0;text-align:center;font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink-faint)}
.foot a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.foot-in{position:absolute;z-index:2;left:max(16px,calc((100vw - 1180px)/2));right:max(16px,calc((100vw - 1180px)/2));bottom:max(16px,env(safe-area-inset-bottom));box-sizing:border-box;margin:0;padding:6px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;border-radius:16px;border:1px solid var(--sh-line);background:var(--sh-bar);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font:400 12px/1.8 var(--body);color:var(--ink)}
.foot-in nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.foot-in nav a{display:inline-flex;align-items:center;min-height:40px;color:inherit;text-decoration:none}
.foot-in nav a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-in>span{max-width:100%}
@media(min-width:761px) and (max-width:1180px){.foot-socials{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 .sky{--cs:8px;padding:max(96px,calc(env(safe-area-inset-top) + 80px)) 16px max(184px,calc(env(safe-area-inset-bottom) + 168px))}
 .sky-in::before{inset:-40px -16px}
 .foot-contact{grid-template-columns:1fr;padding:24px 20px;gap:24px}
 .foot-book{width:100%}
 .cal-grid button{height:40px}
 .foot-socials{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .cx-s{padding:12px;gap:4px;border-radius:14px}
 .cx-s small{font-size:11px}
 .cx-s>.ic{top:14px;right:10px}
 .foot-in{padding:6px 14px;gap:8px 16px}
 .foot-in nav{width:100%;order:2}
}
@media(prefers-reduced-motion:reduce){.cx-s,.cx-s::before,.cx-s>.ic,.foot-book .btn,.foot-book .btn .ic,.cal-grid button{transition:none!important}.cx-s:hover,.cx-s:focus-visible,.cx-s:hover>.ic,.foot-book .btn:hover,.foot-book .btn:active{transform:none}.foot-book .btn:hover .ic{translate:none}}
/* ===== DESIGN SYSTEM (see DESIGN.md). Last in the sheet on purpose: these tokens win.
   Type: display = Geist Pixel 700, sub display = Geist Pixel 500, read = Satoshi 400, hand = Missing Lovely.
   Top level reading copy: lede 20, body 18 (phones 18/16). Nested copy (under a sub heading, inside cards)
   keeps its own smaller sizes (13 to 16px); this block doesn't touch it. */
:root{--fs-lede:20px;--fs-body:18px;--fs-card:15px;--fs-cap:13px;--lh-read:1.6;
  --fs-display:clamp(36px,4vw,56px);--fs-claim:26px;--fs-hi:clamp(34px,2.9vw,44px);
  --btn-h:48px;--btn-h-sm:40px;--btn-font:700 14px/1 var(--body)}
@media (max-width:820px){:root{--fs-lede:18px;--fs-body:16px;--fs-claim:20px}}
/* big screens (Oct 25, Hardik: on a monitor or a big Mac everything felt small). The type scale steps up and the
   content columns widen, so a 24-27" display reads like a laptop does instead of a small island in the middle.
   (Not CSS zoom: it scrambled the measured, scroll-driven parts, the card deck and the hero spread.) */
@media (min-width:1680px){
  html{font-size:18px}
  :root{--fs-lede:22px;--fs-body:20px;--fs-card:16px;--fs-cap:14px;--fs-claim:30px;--fs-display:clamp(56px,3.4vw,76px);--fs-hi:clamp(46px,2.7vw,60px);
    --t-body:20px;--t-lede:1.3rem;--btn-h:54px;--btn-font:700 16px/1 var(--body);--gap-head:68px;--gap-sec:170px}
  /* html-prefixed: these must beat the components' own max-widths, which come later in the sheet */
  html .wrap{max-width:1420px}
  html .gal-head,html .gal-grid{max-width:1640px}
  html .tw-stage{max-width:1400px}
}
@media (min-width:2200px){
  html{font-size:20px}
  :root{--fs-lede:25px;--fs-body:22px;--fs-card:18px;--fs-cap:15px;--fs-claim:34px;--fs-display:clamp(70px,3.4vw,92px);--fs-hi:clamp(56px,2.7vw,72px);
    --t-body:22px;--btn-h:60px;--btn-font:700 18px/1 var(--body);--gap-head:80px;--gap-sec:200px}
  html .wrap{max-width:1720px}
  html .gal-head,html .gal-grid{max-width:2000px}
  html .tw-stage{max-width:1700px}
}
/* headings: one weight everywhere */
h1.big,h2{font-weight:700}
/* hero: the handwritten greeting and the claim sit at the same visual weight */
.hi{font-size:var(--fs-hi);color:var(--ink)}
.claim{font-weight:500;font-size:var(--fs-claim)!important;line-height:1.2;color:var(--ink)}
/* reading copy */
.lede{font-size:var(--fs-lede)!important;line-height:var(--lh-read)}
.cs-p{font-size:var(--fs-body)!important;line-height:var(--lh-read)}

/* buttons: every CTA is the same pressable key, 48px tall; the nav one is the 40px compact size */
.btn{height:var(--btn-h);padding:0 24px;font:var(--btn-font);letter-spacing:0;box-sizing:border-box;justify-content:center}
.nav .cta{height:var(--btn-h-sm);font:var(--btn-font)}
#splash .open{font:var(--btn-font);height:var(--btn-h)}

/* phone hero: tighter stack, a direct booking CTA, and a scroll cue (desktop has the side hint) */
.hcta,.hscroll{display:none}
@media (max-width:820px){
  #hero{padding-block:96px 96px!important}
  .hero-in .claim{margin-top:18px!important}
  .hcta{display:inline-flex;margin-top:22px}
  .hscroll{display:flex;flex-direction:column;align-items:center;gap:2px;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
    font:400 20px/1 var(--hand);color:var(--ink);z-index:3;background:none;border:0;padding:6px;cursor:pointer}
  .hscroll svg{width:20px;height:20px;animation:hsb 1.6s ease-in-out infinite}
  @keyframes hsb{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.hscroll svg{animation:none}}


/* the seat-to-row flight as a scroll-driven animation: the browser moves the cards with the scroll on the compositor,
   so script timing can't make it stutter. Range and both ends are set by render() (--rr0/--rr1, --t0/--t1). Fill
   both: before the range the seat is held, after it the row. The class is only on once the cards have landed. */
@keyframes cardRise{from{transform:var(--t0)}to{transform:var(--t1)}}
#deck.scrub .card:not(.own){animation:cardRise 1s cubic-bezier(.65,0,.35,1) both;animation-timeline:scroll(root);animation-range:var(--rr0) var(--rr1)}
/* phones: the rise starts as the stool lets go, at an even pace (see remark()), so the cards never dip back down */
#deck.scrub.lin .card:not(.own){animation-timing-function:linear}

/* screen reader and search only text (the home h1 carries the full name and role, the design shows HARDIK) */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* card corners, the same look on every device. The radius was 44px on the 132px phone card too (a third of its
   width); Chrome's squircle hid it, but Safari and Firefox don't support corner-shape and drew near-circles, with the
   name text sitting in the curve. Radius now scales with the card, and without squircles a smaller circular radius
   stands in so it reads the same. */
@media (max-width:819px){#deck .card{border-radius:26px}.card-meta{padding:0 12px}}
@supports not (corner-shape:squircle){
  #deck .card{border-radius:26px}
  .wcard{border-radius:18px!important}
  @media (max-width:819px){#deck .card{border-radius:16px}}}

/* the case study quote is the intro's last line, not a section of its own: the first section follows closer than the
   120px between sections */
#v-case .cs-quote+.cs-sec{margin-top:64px}
@media (max-width:760px){#v-case .cs-quote+.cs-sec{margin-top:48px}}

/* ---------- About layout: each section has its own shape (was the same heading + grey paragraph 13 times) ---------- */
/* 1. the story: numbered chapters, a big pixel number instead of the rail and dot */
#v-about .beats.story5{counter-reset:bt;gap:44px}
#v-about .story5 .abeat{counter-increment:bt;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:24px;row-gap:10px;
  padding-left:0;border-left:0}
#v-about .story5 .abeat>*{grid-column:2}
#v-about .story5 .abeat .n{grid-column:1;grid-row:1 / span 3;position:static;width:auto;height:auto;border:0;background:none;border-radius:0;
  transform:none!important;font:700 40px/1 var(--pixel);letter-spacing:-.03em;color:var(--ink-faint);transition:color .3s}
#v-about .story5 .abeat .n::before{content:counter(bt,decimal-leading-zero)}
#v-about .story5 .abeat:hover .n{color:var(--bc);-webkit-text-stroke:1px var(--ink)}
#v-about .story5 .abeat:hover h3{translate:0}
#v-about .story5 .abeat.off{background:#FFF3C4;border:1px solid #F3DF95;border-radius:22px;padding:26px 28px}
#v-about .story5 .abeat.off .n{color:#C9A227}
.apps-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.apps-row a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--edge);border-radius:999px;
  background:var(--paper);font:600 14px/1 var(--body);color:var(--ink);text-decoration:none;transition:transform .25s cubic-bezier(.34,1.6,.64,1),border-color .2s}
.apps-row a::before{content:"";width:10px;height:10px;border-radius:50%;corner-shape:round!important;background:var(--c);border:1px solid rgba(19,19,22,.25)}
.apps-row a:hover{transform:translateY(-2px);border-color:var(--ink)}
.apps-row a i{font:400 12px/1 var(--body);font-style:normal;color:var(--ink-faint)}
/* 2. the four principles: a 2x2 grid of cards, one pillar each */
#v-about .beats.grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;counter-reset:pr}
#v-about .grid4 .abeat{counter-increment:pr;padding:24px 24px 26px;border:1px solid var(--edge);border-radius:22px;background:var(--paper);gap:12px;
  transition:transform .3s cubic-bezier(.34,1.5,.64,1),border-color .3s,box-shadow .3s}
#v-about .grid4 .abeat:hover{transform:translateY(-3px);border-color:var(--ink)!important;box-shadow:0 5px 0 var(--ink)}
#v-about .grid4 .abeat .n{position:static;width:34px;height:34px;border-radius:10px;border:1.5px solid var(--ink);background:var(--bc);
  display:grid;place-items:center;transform:none!important;font:700 14px/1 var(--pixel)}
#v-about .grid4 .abeat .n::before{content:counter(pr,decimal-leading-zero)}
#v-about .grid4 .abeat:hover h3{translate:0}
#v-about .grid4 .abeat p{font-size:15px;line-height:1.55}
/* 3. the timeline gets a heading */
#v-about .jobs-h{margin:0 0 8px}
@media (max-width:760px){
  #v-about .story5 .abeat{grid-template-columns:48px minmax(0,1fr);column-gap:14px}
  #v-about .story5 .abeat .n{font-size:28px}
  #v-about .story5 .abeat.off{padding:20px 18px}
  #v-about .beats.grid4{grid-template-columns:minmax(0,1fr)}}

/* Pointer depth belongs only to the greeting and name/frame. */
#hero .name-face{display:block;white-space:nowrap;will-change:transform;transform:translate3d(var(--face-x,0px),var(--face-y,0px),0)}
#hero .hi,#hero .framed{translate:var(--react-x,0px) var(--react-y,0px)}
@media (prefers-reduced-motion:reduce){#hero .name-face{transform:none}#hero .hi,#hero .framed{translate:none}}

/* Gallery: browse normally, then focus one design without losing your place. */
.gal-page{padding:136px 0 80px}
.gal-head{max-width:1360px;margin:0 auto 36px;padding:0 40px}
.gal-head .big{text-align:left;margin:0 0 16px}
.gal-head .lede{max-width:560px;margin:0}
.gal-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.gal-filters button{min-height:44px;padding:10px 16px;border:1px solid var(--edge);border-radius:12px;background:var(--paper);font:500 14px/1 var(--body);color:var(--ink-soft)}
.gal-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gal-grid{max-width:1360px;display:flex;align-items:flex-start;gap:16px;margin:auto;padding:0 40px;box-sizing:border-box}
.gal-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px}
.gal-card{display:block;position:relative;width:100%;margin:0;padding:0;border:0;background:none;text-align:left;color:var(--ink);font:inherit;perspective:1200px}
.gal-cap{display:flex;flex-direction:column;gap:2px;padding:8px 4px 0}
.gal-cap b{font:600 14px/1.3 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-cap span{font:400 12px/1.3 var(--body);color:var(--ink-faint)}
/* hover (Oct 26, Hardik: “no turn, no trail… the cards tilt”): the card leans away from the pointer like a sheet
   pressed where you point. Pointer on its left, the left edge dips and the right lifts towards you; same top to
   bottom. A soft light follows the pointer. render-free: tilt() writes --rx/--ry/--lx/--ly, CSS does the rest, and it
   springs back flat when the pointer leaves. Only on a fine pointer; touch just taps to open. */
.gal-tilt{position:relative;display:block;width:100%;border:0;padding:0;background:var(--paper-2);border-radius:18px;cursor:pointer;color:inherit;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease;will-change:transform}
.gal-card.tilting .gal-tilt{transition:transform .12s ease-out,box-shadow .3s ease;box-shadow:0 22px 40px -18px rgba(19,19,22,.35)}
.gal-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.32),rgba(255,255,255,0) 55%)}
.gal-card.tilting .gal-tilt::after{opacity:1}
.gal-thumb{display:block;position:relative;border-radius:18px;overflow:hidden;background:var(--paper-2)}
.gal-thumb img{display:block;width:100%;height:auto}
.gal-thumb video{display:block;width:100%;height:auto}
.gal-thumb.web img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.gal-count{position:absolute;right:12px;bottom:12px;padding:6px 9px;border-radius:8px;background:rgba(19,19,22,.8);color:white;font:500 12px/1 var(--body)}
.gal-message{max-width:1280px;margin:24px auto;text-align:center;padding:0 24px;color:var(--ink-soft)}
.gal-more{display:block;margin:24px auto}
.gal-more[hidden]{display:none}
.gal-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:white}
.gal-dialog[open]{display:flex;align-items:center;justify-content:center}
.gal-dialog::backdrop{background:rgba(19,19,22,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.gallery-open{overflow:hidden}
.gal-view{width:min(1100px,100%);max-height:100%;padding:76px 32px 24px;display:flex;flex-direction:column;align-items:center;gap:16px}
/* the carousel (Oct 26, Hardik: “swipe or see the button like Instagram”): the slides sit side by side in a track that
   snaps one slide at a time (a finger or a trackpad swipes it natively), round white arrows over the picture's edges
   (hidden at the ends), a count in the corner and dots under it. Only the slide in view and its neighbours load. */
/* the box takes the shape of the post (--ar, set from the first picture), so the arrows and the count sit on it */
.gal-view{--ar:.8;--pw:min(880px,100%,calc((100dvh - 236px) * var(--ar)))}
.gal-stage{position:relative;width:var(--pw);aspect-ratio:var(--ar);flex:none}
.gal-stage[hidden]{display:none}
.gal-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:8px}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;scroll-snap-stop:always}
.gal-slide img,.gal-slide video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;user-select:none;-webkit-user-drag:none}
.gal-slide video{background:#000}
.gal-stage .gal-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;min-width:0;min-height:0;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:#131316;box-shadow:0 2px 10px rgba(0,0,0,.28);transition:opacity .2s,transform .2s}
.gal-stage .gal-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gal-stage .gal-arrow:hover{transform:translateY(-50%) scale(1.08)}
.gal-stage .gal-arrow[hidden]{display:none}
.gal-prev{left:12px}.gal-next{right:12px}
.gal-stage .gal-status{position:absolute;right:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(19,19,22,.62);color:#fff;font:600 12px/1 var(--body);min-width:0}
.gal-stage .gal-status:empty{display:none}
.gal-dots{display:flex;justify-content:center;gap:6px;min-height:6px}
.gal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .2s,transform .2s}
.gal-dots i.on{background:#fff;transform:scale(1.15)}
@media(max-width:760px){.gal-view{--pw:min(100%,calc((100dvh - 210px) * var(--ar)))}.gal-stage .gal-arrow{width:30px;height:30px}.gal-prev{left:6px}.gal-next{right:6px}}
/* the title and its line sit under the post, as wide as the picture (Oct 26, Hardik), not across the whole dialog */
.gal-caption{width:var(--pw);max-width:100%;box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.gal-dialog.site .gal-caption{width:100%}
.gal-caption h2{margin:0;font:600 18px/1.3 var(--body);color:white;text-align:left}
.gal-caption p{margin:4px 0 0;font:400 13px/1.4 var(--body);color:#ddd;max-width:600px}
.gal-close,.gal-arrow,.gal-share{min-width:44px;min-height:44px;border:1px solid #ffffff50;border-radius:12px;background:#1b1b20d9;color:white;font:500 14px/1 var(--body);cursor:pointer}
.gal-close{position:fixed;right:24px;top:20px;font-size:27px;z-index:1}
.gal-arrow{font-size:24px}
/* share (Oct 26, Hardik: no Copy button, share sits by the close): the phone's share sheet where there is one, else
   the link is copied and a small "Link copied" tip shows under the button */
.gal-share{position:fixed;right:80px;top:20px;z-index:1;display:grid;place-items:center;padding:0}
.gal-share svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gal-share-tip{position:absolute;top:calc(100% + 8px);right:0;padding:6px 9px;border-radius:8px;background:#fff;color:#131316;font:600 12px/1 var(--body);white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.gal-share-tip.on{opacity:1;transform:none}
.gal-original{font:400 13px/1.4 var(--body);color:#eee;text-decoration:underline;text-underline-offset:3px}
.gal-status{font:400 13px/1 var(--body);color:#ddd;min-width:38px;text-align:center}
/* a website (Oct 23): the whole page scrolls inside the pop-up, and a map of the full page sits at its right, faded,
   with the part you're reading lit up in a frame, so you can see how long the page is and how much is left */
.gal-dialog.site{align-items:flex-start;overflow-y:auto}
.gal-dialog.site .gal-view{width:min(1240px,100%);max-height:none;flex:none}
.gal-dialog.site .gal-stage,.gal-dialog.site .gal-dots{display:none}
.gal-site{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:14px;width:100%;height:calc(100dvh - 168px);flex:none;padding:0;box-sizing:border-box;border:0;border-radius:0;background:transparent;box-shadow:none}
.gal-dialog.site .gal-view{padding-top:80px;gap:16px}
.gal-dialog.site .gal-caption{max-width:none;padding:0;box-sizing:border-box;flex-direction:column;gap:12px}
.gal-dialog.site .gal-caption>div{width:100%;min-width:0}
.gal-dialog.site .gal-caption p{max-width:none;overflow-wrap:anywhere}
.gal-site[hidden]{display:none}
.gs-scroll{overflow-y:auto;overflow-x:hidden;border:0;border-radius:24px;corner-shape:squircle;background:transparent;overscroll-behavior:contain;scrollbar-width:none}
.gs-scroll::-webkit-scrollbar{display:none}
.gs-scroll:focus-visible{outline:2px solid #7CC4F2;outline-offset:2px}
.gs-scroll img{display:block;width:100%;height:auto}
.gs-map{position:relative;display:flex;justify-content:center;min-height:0;cursor:pointer;touch-action:none;user-select:none}
.gs-mini{position:relative;align-self:flex-start;border-radius:4px;overflow:hidden;background:var(--paper-2)}
.gs-mini img{display:block;width:100%;height:100%;opacity:.28;filter:grayscale(.4)}
.gs-win{position:absolute;left:0;right:0;top:0;box-sizing:border-box;border:2px solid var(--ink);border-radius:4px;background-repeat:no-repeat;box-shadow:0 0 0 999px rgba(255,255,255,.18),0 4px 12px rgba(19,19,22,.25);pointer-events:none}
@media(max-width:760px){.gal-site{grid-template-columns:minmax(0,1fr) 54px;gap:8px;padding:0;height:calc(100dvh - 152px)}}
.gal-card button:focus-visible,.gal-filters button:focus-visible,.gal-dialog button:focus-visible{outline:2px solid #7CC4F2;outline-offset:4px}
@media(max-width:760px){.gal-page{padding-top:116px}.gal-head{padding:0 20px}.gal-grid{padding:0 12px;gap:10px}.gal-col{gap:14px}.gal-thumb,.gal-tilt{border-radius:12px}.gal-view{padding:72px 16px 20px}.gal-caption{align-items:flex-start}.gal-caption h2{font-size:16px}.gal-caption p{font-size:12px}.gal-close{right:16px;top:16px}.gal-share{right:68px;top:16px}.gal-filters{gap:6px}.gal-filters button{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.gal-tilt{transition:none;transform:none}}

/* Shared brand credits: assets live once in the template, with mobile source selection. */
.brand-credits{max-width:820px;margin-inline:auto;text-align:center}
.brand-hero{margin-top:48px}
.brand-heading{display:flex;flex-direction:column;align-items:center;gap:4px}
.brand-title{font:500 16px/1.3 var(--body);letter-spacing:0;margin:0;color:var(--ink)}
.brand-attribution{font:400 12px/1.4 var(--body);color:var(--ink-faint);margin:0}
.brand-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;align-items:center;list-style:none;margin:20px 0 0;padding:0}
.brand-row li,.brand-row picture{display:flex;align-items:center;justify-content:center;min-width:0;height:44px;width:100%}
.brand-logo{display:block;width:100%;max-width:135px;height:34px;object-fit:contain}
.brand-row li[data-brand="Nothing"] .brand-logo{height:28px}
.brand-row li[data-brand="Amazon"] .brand-logo{max-width:96px;height:26px}
.brand-work{padding-block:0 60px}
@media(max-width:760px){
 .brand-hero{margin-top:34px}
 .brand-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px;margin-top:18px;max-width:400px;margin-inline:auto}
 .brand-logo{max-width:44px;height:40px}
 .brand-row li[data-brand="Nothing"] .brand-logo,.brand-row li[data-brand="Center Fruit"] .brand-logo{max-width:118px;height:32px}
 .brand-work .brand-row li[data-brand="Amazon"] .brand-logo{max-width:34px;height:32px}
 .brand-work{padding-bottom:44px}
}

/* A narrow window onto two identical logo rows; only the track moves. */
.brand-ticker{max-width:520px;display:flex;flex-direction:column;gap:10px}
.brand-hero{margin-top:56px}
.brand-about{padding-block:16px 70px}
.brand-window{position:relative;overflow:hidden;width:100%;margin-top:0;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.brand-window::before,.brand-window::after{content:"";position:absolute;inset-block:0;width:44px;z-index:1;pointer-events:none;
 -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.brand-window::before{left:0;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.brand-window::after{right:0;-webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}
.brand-track{display:flex;width:max-content;animation:brand-drift 26s linear infinite}
.brand-ticker .brand-row{display:flex;flex:none;gap:28px;margin:0;padding:0 28px 0 0;max-width:none}
.brand-ticker .brand-row li,.brand-ticker .brand-row picture{width:112px;height:40px}
.brand-ticker .brand-logo{max-width:112px;height:26px}
.brand-ticker .brand-row li[data-brand="Amazon"] .brand-logo{max-width:82px;height:22px}
.brand-ticker .brand-row li[data-brand="Nothing"] .brand-logo{height:22px}
.brand-window:hover .brand-track,.brand-window:focus .brand-track,.brand-window.offs .brand-track{animation-play-state:paused}
.brand-ticker .brand-heading{position:relative;order:1;padding-top:8px}
.brand-ticker .brand-title{font:400 28px/1.05 var(--hand);transform:rotate(-3deg);text-align:left}
.brand-arrow{position:absolute;width:56px;height:44px;left:calc(50% + 78px);top:3px;fill:none;stroke:var(--ink-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
@keyframes brand-drift{to{transform:translateX(-50%)}}
@media(max-width:760px){
 .brand-ticker{max-width:360px}
 .brand-hero{margin-top:40px}
 .brand-ticker .brand-title{font-size:25px}
 .brand-arrow{left:calc(50% + 65px);width:48px;height:40px;top:3px}
 .brand-ticker .brand-row{gap:24px;padding-right:24px}
 .brand-ticker .brand-row li,.brand-ticker .brand-row picture{width:auto;height:34px}
 .brand-ticker .brand-logo{width:auto;max-width:112px;height:22px}
 .brand-ticker .brand-row li[data-brand="Cult"] .brand-logo{height:24px}
 .brand-ticker .brand-row li[data-brand="Amazon"] .brand-logo{max-width:96px;height:20px}
 .brand-ticker .brand-row li[data-brand="Nothing"] .brand-logo{max-width:112px;height:22px}
 .brand-ticker .brand-row li[data-brand="Center Fruit"] .brand-logo{max-width:104px;height:22px}
}
@media(prefers-reduced-motion:reduce){
 .brand-window::before,.brand-window::after{display:none}
 .brand-track{animation:none;width:100%}
 .brand-window{mask-image:none;-webkit-mask-image:none}
 .brand-ticker .brand-row{width:100%;justify-content:center;flex-wrap:wrap;padding:0;gap:12px 24px}
 .brand-ticker .brand-row[aria-hidden]{display:none}
}

/* Services work invitation: unboxed copy left, action aligned to its bottom right. */
.service-work{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;padding-block:24px}
.service-work h3{margin:0}
.service-work p{max-width:62ch;margin:12px 0 0;font:400 16px/1.6 var(--body);color:var(--ink-soft)}
.service-work .btn{justify-self:end}
@media(max-width:640px){.service-work{grid-template-columns:1fr;gap:20px}.service-work .btn{justify-self:start}}

@media(max-width:760px){.gal-dialog.site .gal-view{padding-top:72px}}
/* Centered hero, Oct 20: project stacks are part of the sentence. */
#hero.hero-editorial{padding:clamp(154px,20svh,200px) 24px 100px;min-height:100svh;box-sizing:border-box;align-items:flex-start}
.hero-editorial>.wrap{width:100%;max-width:1440px;padding:0}
.hero-editorial .hero-in{isolation:isolate}
.hero-editorial .hi{font:400 24px/1.3 var(--body);color:var(--ink-soft);margin:0 0 14px}
.hero-editorial .hi .ul{display:none}
.hero-editorial .framed{margin:0 0 28px;padding:10px 17px}
.hero-editorial .myname{font-size:80px;font-weight:400;letter-spacing:-.045em}
.hero-editorial .framed .fr{opacity:1;transform:none;border-color:#A4A4A0}
.hero-editorial .framed .hd{opacity:1;transform:none;border:1px solid rgba(19,19,22,.18);width:8px;height:8px}
#hero.hero-editorial .doo:not([data-dd="laptop"]){display:none!important}
#hero.hero-editorial .doo[data-dd="laptop"]{left:calc(50% + 235px)!important;top:24px!important;right:auto!important;bottom:auto!important;--r:0deg;z-index:2}
#hero.hero-editorial .doo[data-dd="laptop"] .dd,#v-home .doo[data-home="hero"][data-dd="laptop"] .dd{width:120px}
#hero.hero-editorial .claim.hero-manifesto{font:400 30px/45px var(--body)!important;letter-spacing:-.025em;max-width:1000px!important;width:100%;margin:0!important;text-align:center;position:relative;z-index:4}
.hero-stack{font:inherit;display:inline-block;position:relative;vertical-align:middle;width:1.6em;height:1.05em;min-width:44px;min-height:44px;margin:0 .18em .12em;padding:0;border:0;background:none;isolation:isolate;touch-action:manipulation}
 .hero-stack>.hero-thumb{position:absolute;left:0;top:50%;width:100%;height:1em;margin-top:-.5em;object-fit:cover;object-position:top;border:1px solid #13131620;border-radius:5px;box-shadow:0 2px 5px #13131616;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.hero-stack>.hero-thumb:nth-child(1){z-index:3;transform:rotate(-2deg)}
.hero-stack>.hero-thumb:nth-child(2){z-index:2;transform:translate(5px,-3px) rotate(5deg)}
.hero-stack>.hero-thumb:nth-child(3){z-index:1;transform:translate(9px,-5px) rotate(10deg)}
.hero-stack:hover>.hero-thumb:nth-child(2),.hero-stack:focus-visible>.hero-thumb:nth-child(2){transform:translate(7px,-5px) rotate(9deg)}
.hero-stack:hover>.hero-thumb:nth-child(3),.hero-stack:focus-visible>.hero-thumb:nth-child(3){transform:translate(12px,-8px) rotate(15deg)}
.hero-stack:focus-visible{outline:2px solid #7CC4F2;outline-offset:6px;border-radius:7px}
.hero-stack.nudge{animation:heroNudge .7s ease}
@keyframes heroNudge{25%{rotate:-6deg;scale:1.08}65%{rotate:4deg}100%{rotate:0deg;scale:1}}
#hero.hero-editorial .avail{display:inline-flex!important;margin-top:72px;font-size:14px;padding:18px 23px;border-radius:22px;order:0}
.hero-editorial .hcta{display:none}
.hero-editorial .neg .negname{font-weight:400;letter-spacing:-.045em}
.hero-editorial .neg .nhi{font-family:var(--body)}
.hero-editorial .cv-frame .cv-av{display:none!important}
.hero-spread{position:absolute;inset:0;pointer-events:none;z-index:3}
.hero-preview{position:absolute;left:0;top:0;width:var(--w);margin:0;transform:none}
.hero-preview .cd-q{transform-origin:center}
.hero-preview a{display:block;text-decoration:none;color:inherit;border-radius:9px;outline-offset:8px}
.hero-preview .cd-card{box-shadow:0 6px 18px #13131620;border-radius:7px}
.hero-preview img,.hero-preview video{display:block;width:100%;height:auto;object-fit:cover;object-position:top}
.hero-preview.site img{aspect-ratio:1.94;object-fit:cover}
.hero-preview.app img,.hero-preview.app video{aspect-ratio:480/1039;object-fit:cover;border-radius:9px}
.hero-preview.comp .cd-card{padding:7px;background:#fff}
.hero-preview .cd-sel{opacity:1;border-width:1px}
.hero-preview .cd-sel b{width:6px;height:6px;border-width:1px}
.hero-preview .cd-lab{opacity:1;font-size:9px;line-height:12px;margin-top:7px}
.hero-preview .cd-bar{height:14px;padding:0 5px;gap:3px}
.hero-preview .cd-bar i{width:5px;height:5px}
.hero-preview .cd-bar span{font-size:6px;line-height:10px;height:10px}
.hero-preview:hover{z-index:3}
.hero-micro.ms{display:block;width:100%;height:auto;aspect-ratio:4.6/2.9;font-size:calc(var(--w) / 4.6);cursor:auto}
.hero-micro .ms-c{position:absolute!important;width:100%;height:100%;translate:0 0!important;rotate:0deg!important;left:0;top:0}
.hero-micro [role="button"]{cursor:pointer}
.hero-micro [role="button"]:focus-visible{outline:2px solid #7CC4F2;outline-offset:2px}
.hero-editorial .hero-spread:not(.open) .ms *, .hero-editorial.paused .ms *, .hero-editorial.paused .ms *::after{animation-play-state:paused!important}
@media(min-width:1101px) and (max-height:800px){#hero.hero-editorial{padding-top:148px;padding-bottom:100px}.hero-editorial .framed{margin-bottom:24px}.hero-editorial .myname{font-size:76px}#hero.hero-editorial .claim.hero-manifesto{font-size:30px!important;line-height:45px!important}#hero.hero-editorial .avail{margin-top:64px}}
@media(max-width:1100px){#hero.hero-editorial{padding:138px 22px 90px!important}.hero-editorial .framed{margin-bottom:28px}.hero-editorial .myname{font-size:76px}#hero.hero-editorial .claim.hero-manifesto{max-width:min(950px,calc(100vw - 48px))!important;font-size:28px!important;line-height:44px!important}#hero.hero-editorial .doo[data-dd="laptop"]{left:calc(50% + 190px)!important;top:24px!important}.hero-spread{position:relative;inset:auto;width:100%;max-width:710px;height:380px;margin-top:32px;z-index:3}.hero-editorial .hero-spread:not(.open){pointer-events:none}#hero.hero-editorial .avail{margin-top:56px}}
@media(max-width:600px){#hero.hero-editorial{padding:128px 20px 80px!important}.hero-editorial .hi{font-size:19px;margin-bottom:10px}.hero-editorial .myname{font-size:64px}.hero-editorial .framed{padding:8px 13px;margin-bottom:36px}#hero.hero-editorial .doo[data-dd="laptop"]{display:none!important}#hero.hero-editorial .claim.hero-manifesto{font-size:24px!important;line-height:38px!important;letter-spacing:-.04em}.hero-stack{width:1.75em;height:44px;margin-inline:.12em}.hero-spread{height:310px;margin-top:28px}#hero.hero-editorial .avail{font-size:12px;padding:15px 18px;margin-top:54px}.hero-editorial .hscroll{display:none}}
@media(prefers-reduced-motion:reduce){.hero-stack,.hero-stack::before,.hero-stack::after,.hero-preview,.hero-preview .cd-q{transition:none!important;animation:none!important}.hero-editorial .ms *,.hero-editorial .ms *::after{animation:none!important}}


/* Persistent spread; inline work opens independently inside the sentence. */
#story{display:none!important}
#hero.hero-editorial .doo{display:none!important}
.hero-credit-clause{display:block}
.hero-stack{--thumb:48px;width:var(--thumb);margin-left:.12em;margin-right:.4em;transition:width .45s cubic-bezier(.22,1,.36,1)}
.hero-stack>.hero-thumb{width:var(--thumb);height:30px;margin-top:-15px}
.hero-stack.expanded{width:var(--thumb)}
.hero-stack>.hero-thumb{transform-origin:50% 120%;transition:transform .5s cubic-bezier(.22,1.35,.36,1)}
/* Hold the hidden cards at the inline stack before the split-axis flight begins. */
.hero-spread:not(.open) .hero-preview,.hero-spread:not(.open) .hero-preview .cd-q{transition:none!important}
.hero-stack.expanded>.hero-thumb:nth-child(1){transform:translate(-13px,-10px) rotate(-18deg)}
.hero-stack.expanded>.hero-thumb:nth-child(2){transform:translate(0,-17px) rotate(0deg)}
.hero-stack.expanded>.hero-thumb:nth-child(3){transform:translate(13px,-10px) rotate(18deg)}

@media(max-width:1100px){.hero-spread{height:640px}}
@media(max-width:600px){.hero-spread{height:390px}}
@media(prefers-reduced-motion:reduce){.hero-stack{transition:none!important}}



/* Three equally spaced blocks centered within the space below the navbar. */
#hero.hero-editorial{padding:var(--hero-nav-bottom,128px) 24px 32px!important;align-items:center}
.hero-core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;width:100%;min-height:calc(100svh - var(--hero-nav-bottom,128px) - 32px)}

.hero-identity{display:flex;flex-direction:column;align-items:center}
.hero-editorial .hero-identity .framed{margin-bottom:0}
#hero.hero-editorial .avail{margin-top:0}
.hero-spread .hero-preview .cd-q{scale:var(--seed,.2)}
.hero-spread.open .hero-preview .cd-q{scale:1}
.hero-spread:not(.open) .hero-preview .cd-q{opacity:0}
@media(max-width:1100px){.hero-spread{order:4;margin-top:28px}.hero-core{gap:40px}}
@media(max-width:600px){#hero.hero-editorial{padding-inline:20px!important}.hero-core{gap:32px}}
@media(prefers-reduced-motion:reduce){.hero-stack>.hero-thumb{transition:none!important;animation:none!important}}

@media(max-width:600px){
 #hero.hero-editorial{padding-top:calc(var(--hero-nav-bottom,128px) + 28px)!important;padding-bottom:24px!important;align-items:flex-start}
 .hero-core{min-height:0;gap:44px}
 #hero.hero-editorial .claim.hero-manifesto{font-size:22px!important;line-height:34px!important}
 .hero-stack{height:30px;vertical-align:middle;margin-left:.03em;margin-right:.62em}
 .hero-spread{margin-top:56px;height:580px}
}

/* Oct 20 hero pass: role line, Design/Code toggle, one logo at a time, a real call action and named previews. */
.hero-role{display:flex;align-items:center;gap:10px;margin:18px 0 0;font:500 15px/1.4 var(--body);letter-spacing:.01em;color:var(--ink-soft)}
.hero-role i{width:4px;height:4px;border-radius:50%;corner-shape:round!important;background:currentColor;opacity:.5}
.hero-build{display:inline-block;vertical-align:middle;margin:0 0 .1em .16em;line-height:0}
.hb-toggle{position:relative;display:inline-flex;align-items:center;gap:0;height:41.5px;padding:0 8px;border:0;border-radius:14.5px;background:#191919;cursor:pointer;font:400 16px/16px 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.02em;color:#EAEAEA;touch-action:manipulation;vertical-align:middle}
.hb-opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:2px;height:28px;padding:0 6px;white-space:nowrap}
.hb-c{gap:1.8px}
.hb-opt svg{width:16px;height:16px;flex:none;fill:none;stroke:#EAEAEA;stroke-width:1.09091;stroke-linecap:round;stroke-linejoin:round}
/* the selection: Figma frame (0.25px #107BD4, four 3px handles) around a #272727 chip, sliding to the active word */
.hb-sel{position:absolute;z-index:0;left:0;top:50%;width:var(--sw,70px);height:28px;margin-top:-14px;border:.5px solid #107BD4;box-sizing:border-box;translate:var(--sx,8px) 0;transition:translate .45s cubic-bezier(.65,0,.35,1),width .45s cubic-bezier(.65,0,.35,1);pointer-events:none}
.hb-sel::before{content:"";position:absolute;inset:2px;border-radius:7px;background:#4A4A4A;box-shadow:none}
.hb-sel i{position:absolute;width:3px;height:3px;box-sizing:border-box;background:#fff;border:.5px solid #107BD4}
.hb-sel i:nth-child(1){left:-2px;top:-2px}.hb-sel i:nth-child(2){right:-2px;top:-2px}.hb-sel i:nth-child(3){left:-2px;bottom:-2px}.hb-sel i:nth-child(4){right:-2px;bottom:-2px}
.hb-toggle:focus-visible{outline:2px solid #107BD4;outline-offset:3px}
.hb-toggle:active .hb-sel{scale:.97}
.hero-logo{position:relative;display:inline-block;vertical-align:middle;width:150px;height:40px;margin:0 0 .06em .14em;perspective:300px}
.hm-line{display:block}
.hero-logo img{position:absolute;inset:0 auto 0 0;margin:auto 0;transform-origin:left center;max-width:132px;max-height:28px;width:auto;height:auto;object-fit:contain;opacity:0;transform:translateY(60%) rotateX(-70deg);transition:transform .7s cubic-bezier(.45,0,.2,1),opacity .45s;backface-visibility:hidden}
.hero-logo img.current{opacity:1;transform:none}
.hero-logo img.leaving{opacity:0;transform:translateY(-60%) rotateX(70deg)}
.hero-logo img[data-brand="Flipkart"],.hero-logo img[data-brand="Myntra"]{max-height:24px}
.hero-logo img[data-brand="Cult"]{max-height:32px}
.hero-logo img[data-brand="Amazon"]{max-width:96px;max-height:24px}
.hero-logo img[data-brand="Center Fruit"]{max-height:31px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px}
#hero.hero-editorial .avail{text-decoration:none;gap:9px;font-size:14px;padding:16px 22px;cursor:pointer}
.avail:focus-visible{outline:2px solid #7CC4F2;outline-offset:4px}
.hero-preview .cd-lab{font:600 10px/14px var(--body);letter-spacing:.01em;padding:2px 7px;white-space:nowrap;text-decoration:none}
a.cd-lab:hover{filter:brightness(.95)}
.hero-preview.comp{width:max-content}
.hero-mi{text-align:left;width:max-content;filter:drop-shadow(0 1px 1px #13131622) drop-shadow(0 8px 16px #1313161c)}
.hero-mi .np button{height:40px}
.hero-mi .np svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hero-preview .hero-mi .wsh-items img{width:40px;height:44px;aspect-ratio:auto;object-fit:contain}
.hero-mi .wsh-items{font-family:'Inclusive Sans',Inter,system-ui,sans-serif;color:#2C2C2A;width:236px}
.hero-mi .wsh-items li{animation:none}
.hero-mi .wsh-items button{font-family:inherit;cursor:pointer;border:0}
.hero-mi .wsh-a:focus-visible,.hero-mi .wsh-st button:focus-visible{outline:2px solid #185FA5;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hb-sel,.hero-logo img{transition:none!important;animation:none!important}}
@media(max-width:1100px){.hero-role{font-size:14px;margin-top:14px}}
@media(max-width:600px){
 .hero-role{font-size:13px;margin-top:12px;gap:8px}
 .hb-toggle{zoom:.82}
 .hero-logo{width:104px;height:34px}
 .hero-logo img{max-width:110px;max-height:24px}
 .hero-logo img[data-brand="Cult"]{max-height:28px}
 .hero-logo img[data-brand="Amazon"]{max-width:80px;max-height:21px}
 .hero-actions{flex-direction:column;gap:6px}
 .hm-line{text-wrap:balance}
 .hero-logo img{inset:0;margin:auto;transform-origin:center}
 #hero.hero-editorial .avail{font-size:13px;padding:14px 16px}
 }
/* ===== NAV AS A TAB BAR (Oct 23). Hardik: think of the nav like the tab bar of a browser or Figma, since the site is
   laid out like a file you're working in. A full-width strip with window dots and the glasses, every page a tab
   (icon + name), the open page a white tab that runs into the page below with curved feet and its pillar colour along
   the top, like a tab group; "+" is a new tab that opens a new project (Contact); the call sits at the right end like
   Figma's Share. Last in the sheet so it wins over the older chip styles; the docked mini cards still use #navSlot. */
.nav{top:0;left:0;right:0;transform:none;width:auto;max-width:none;box-sizing:border-box;height:calc(46px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 12px 0 14px;gap:2px;align-items:flex-end;border:0;border-radius:0;
  /* frosted glass (Oct 25, Hardik): a cool neutral grey, see-through enough that the page blurs behind it as you scroll */
  background:rgba(232,232,236,.58);-webkit-backdrop-filter:blur(44px) saturate(2) brightness(1.04);backdrop-filter:blur(44px) saturate(2) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.nav .lights{display:flex;gap:8px;align-self:center;margin-right:14px}
/* Mac's window buttons as they look on a window that isn't focused: three plain grey circles */
.nav .lights i{display:block;width:12px;height:12px;flex:none;border-radius:50%;corner-shape:round!important;background:#D2D2CF;box-shadow:inset 0 0 0 .5px rgba(19,19,22,.16)}
.nav a.logo{align-self:center;height:34px;padding:0 10px 0 0;margin-right:6px}
.nav a.logo svg{width:46px;height:22.6px}
.nav a[data-r]:not(.cta){--pc:#A9DEFF;height:38px;min-width:150px;padding:0 14px;justify-content:flex-start;gap:8px;border:0;border-radius:10px 10px 0 0;
  background:transparent linear-gradient(rgba(19,19,22,.14),rgba(19,19,22,.14)) no-repeat right center/1px 18px;color:var(--ink-soft);font:500 13px/1 var(--body);transition:background-color .15s,color .15s}
.nav a[data-r="/about"]:not(.cta){--pc:#FFD44E}.nav a[data-r="/work"]:not(.cta){--pc:#B4F6B8}.nav a[data-r="/offer"]:not(.cta){--pc:#E7BBFF}.nav a[data-r="/gallery"]:not(.cta){--pc:#131316}
.nav a[data-r]:not(.cta) .ic{display:block;width:15px;height:15px;flex:none}
.nav a[data-r]:not(.cta):hover{background-color:rgba(255,255,255,.55);color:var(--ink)}
.nav a[data-r]:not(.cta):active{transform:none}
.nav a[data-r]:not(.cta).here{background:#fff;color:var(--ink);font-weight:600;box-shadow:inset 0 2.5px 0 var(--pc);z-index:1}
/* the open tab's curved feet, so it flows into the page */
.nav a[data-r]:not(.cta).here::before{content:"";position:absolute;left:-10px;right:-10px;top:auto;bottom:0;height:10px;pointer-events:none;
  background:radial-gradient(circle at 0 0,transparent 9.5px,#fff 10px) left bottom/10px 10px no-repeat,radial-gradient(circle at 100% 0,transparent 9.5px,#fff 10px) right bottom/10px 10px no-repeat}
.nav a[data-r]:not(.cta)::after{left:14px;right:14px;bottom:5px}
.nav .newtab{display:grid;place-items:center;align-self:center;width:30px;height:30px;margin-left:4px;padding:0;border:0;border-radius:8px;background:none;color:var(--ink-soft)}
.nav .newtab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nav .newtab:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.nav .newtab:focus-visible,.nav a[data-r]:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
/* Oct 23: the call moved to the middle of the hero; the bar's right edge just says you're available, a pulsing dot and
   plain text, no box */
.nav .navavail{align-self:center;margin-left:auto;display:inline-flex;align-items:center;gap:9px;padding:0 6px 0 12px;font:500 13px/1 var(--body);color:var(--ink-soft);white-space:nowrap}
.nav .navavail .dot{width:8px;height:8px;border-radius:50%;corner-shape:round!important;background:#373737;flex:none;position:relative;isolation:isolate}
.nav .navavail .dot::after{content:"";position:absolute;inset:0;border-radius:50%;corner-shape:round!important;background:#373737;z-index:-1;opacity:0;--po:.5;--ps:3;animation:ping 2.4s ease infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.nav .navavail .dot::after{animation:none}}
@media(max-width:820px){.nav .navavail{display:none}}
/* the hero's centre button is now the call: the site's ink key, same size as every .btn */
#hero.hero-editorial .avail.call{height:var(--btn-h);padding:0 26px;gap:10px;border-radius:26px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);font:var(--btn-font);box-sizing:border-box;box-shadow:var(--stack4)}
#hero.hero-editorial .avail.call .ic{width:18px;height:18px;transition:translate .3s cubic-bezier(.34,1.6,.64,1)}
#hero.hero-editorial .avail.call:hover .ic{translate:3px 0}
#hero.hero-editorial .avail.call:hover{box-shadow:0 2px 0 0 #000}
.nav #navSlot{align-self:center;height:34px}
.navmenu{top:calc(54px + env(safe-area-inset-top,0px))}
@media (max-width:1000px){.nav a[data-r]:not(.cta){min-width:0;width:auto!important;padding:0 14px!important}}
@media (max-width:820px){
  .nav a[data-r]:not(.cta){padding:0 12px!important}
  .nav a[data-r]:not(.cta) .ic{display:block!important}
  .nav .lights{display:none}
}
@media (max-width:560px){
  .nav{padding-left:12px;padding-right:8px}
  .nav .newtab{display:none}
  .nav .burger{align-self:center;margin-left:auto;border-radius:9px;background:rgba(255,255,255,.7)}
}
/* narrow: like a browser squeezing its tabs, the others keep only their icon while the open one keeps its name;
   on a phone the open page stays as the one tab beside the menu */
@media (max-width:1000px){.nav a[data-r]:not(.cta).here .lbl{display:inline!important}}
@media (max-width:560px){.nav a[data-r]:not(.cta).here{display:inline-flex!important;padding:0 12px!important;max-width:46vw}.nav a[data-r]:not(.cta).here .lbl{overflow:hidden;text-overflow:ellipsis}}

/* the hero spread's two doodles (Oct 23): shown, in place, sized for a preview card */
#hero.hero-editorial .hero-mi .doo{display:block!important;position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;margin:0;transform:none}
.hero-mi.mi-laptop,.hero-mi.mi-plane{filter:none}
.hero-mi .doo .dd{width:100px!important;height:auto!important;display:block}
@media(max-width:600px){.hero-mi .doo .dd{width:79px!important}}
/* big screens (Oct 25): the hero's words step up with the rest of the type scale (here, after the hero's own rules) */
@media (min-width:1680px){
  #hero.hero-editorial .hi{font-size:30px}
  #hero.hero-editorial .myname{font-size:108px}
  #hero .hero-role{font-size:18px}
  #hero.hero-editorial .claim.hero-manifesto{font-size:38px!important;line-height:56px!important;max-width:1240px!important}
}
@media (min-width:2200px){
  #hero.hero-editorial .hi{font-size:36px}
  #hero.hero-editorial .myname{font-size:136px}
  #hero .hero-role{font-size:21px}
  #hero.hero-editorial .claim.hero-manifesto{font-size:46px!important;line-height:68px!important;max-width:1500px!important}
}
/* phones (Oct 25, Hardik): only the project cards in the hero, no doodles */
@media(max-width:600px){#hero .hero-preview.bare{display:none!important}}
/* two thirds of their earlier 150/118px, so they stay quiet next to the work */
/* the docked cards sit inside the Work tab, just after its name, and Work stays on a phone's bar so they have a home */
.nav #navSlot{height:28px;margin-right:0!important}
/* Oct 25, Hardik (phones: “the bag icon is out of the white part… then moves slowly to the centre”): a phone's Work
   tab is an icon only, too narrow to hold the fan beside it, so the fan pushed the bag past the tab's left edge and
   the bag slid back to the centre as the cards left. There the slot takes no room: it sits over the tab's centre, the
   bag never moves, and the docked cards stay hidden until they drop out of the tab (render() fades them in). */
@media (max-width:600px){.nav #navSlot{position:absolute;left:50%;top:50%;height:22px;margin:0!important;transform:translate(-50%,-50%)}}
/* Oct 26, Hardik (phones: the Work icon sits a bit right while Home is open, then shifts left): the Work tab kept the
   extra side padding it had when the fan sat beside its icon, so it was wider than the other tabs until it opened.
   With the fan over the tab's centre it needs none: every tab is the same width, open or not. */
@media (max-width:560px){html .nav a[data-r="/work"]:not(.cta){padding:0!important}}
/* Oct 26, Hardik (phones: “a lot of gap after the hero cards before the work section”): the spread keeps rows for the
   doodles phones don't show, ~200px of empty space under the cards. It now ends ~40px under their lowest name tag
   (the spread scales with the width: the lowest tag sits at ~1.1x the screen width). Plain CSS from the first paint, so the stool section's scroll marks are measured
   where it really is, and the work section (heading to “Want to see more?”) moves up as one piece, unchanged. */
@media (max-width:600px){#hero .hero-spread{max-height:calc(108vw + 60px)}}
@media (max-width:560px){.nav a[data-r="/work"]:not(.cta){display:inline-flex!important;padding:0 10px!important}.nav a[data-r="/work"]:not(.cta):not(.here) .lbl{display:none}}
/* phones (Oct 23, Hardik): all five pages stay on the bar as icons only, the open one the white tab with its colour
   strip; names are kept for screen readers. The menu is a slim vertical three-dot button (it still holds the names,
   "Available for projects" and Book a call). The reading hairline, a stray dash under an icon, is off. */
@media (max-width:560px){
  .nav a[data-r]:not(.cta),.nav a[data-r]:not(.cta).here,.nav a[data-r="/work"]:not(.cta){display:inline-flex!important;flex:0 1 auto;justify-content:center;
    min-width:38px;max-width:none;padding:0 9px!important;gap:6px}
  .nav a[data-r]:not(.cta) .lbl,.nav a[data-r]:not(.cta).here .lbl,.nav a[data-r="/work"]:not(.cta):not(.here) .lbl{display:block!important;position:absolute!important;
    width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nav a[data-r]:not(.cta) .ic{display:block!important}
  .nav a[data-r]:not(.cta)::after{display:none!important}
  .nav .burger{width:34px;height:34px;margin-left:4px;background:none!important;border-radius:8px}
  /* Oct 25, Hardik: the tabs share the whole bar (no empty stretch on the right) and stand on its bottom edge, so the
     open tab's curved feet meet the page exactly (they floated 5px above it) */
  .nav{align-items:flex-end!important;padding:env(safe-area-inset-top,0px) 6px 0 10px!important}
  /* and the open tab is as tall as the bar itself (Oct 25, Hardik: the white and the grey should match in height) */
  .nav a[data-r]:not(.cta),.nav a[data-r]:not(.cta).here,.nav a[data-r="/work"]:not(.cta){flex:1 1 0;align-self:flex-end!important;height:46px!important;margin:0!important;min-width:0}
  /* Oct 26, Hardik (“the icons are not centrally aligned”): the bar's 8px gap sat between the tabs, outside each tab's
     divider line, so every icon read ~4px right of the middle of its divided cell. No gap between the tabs (the dividers
     are now the cell edges) and every tab an equal share; the logo and the menu keep their room with margins. Work's
     larger share was for the fan that used to sit beside its icon. */
  .nav{gap:0!important}
  .nav a[data-r="/work"]:not(.cta){flex-grow:1}
  .nav a.logo{margin-right:8px!important}
  .nav .burger{margin-left:8px!important}
  .nav a.logo,.nav .burger{align-self:center!important}
  .nav .burger:hover,.nav .burger.open{background:rgba(255,255,255,.7)!important}
}
@media (max-width:360px){.nav{padding-left:8px!important;padding-right:4px!important}.nav a.logo{padding-right:4px!important;margin-right:2px!important}
  .nav a[data-r]:not(.cta),.nav a[data-r]:not(.cta).here,.nav a[data-r="/work"]:not(.cta){padding:0 7px!important;min-width:32px}}
@media (prefers-reduced-motion:reduce){.nav a[data-r]:not(.cta){transition:none}}

/* The selected tab itself separates the pages: omit its preceding divider. */
.nav a[data-r].before-selected{background-image:none}
/* ===== TESTIMONIAL FORM (Oct 23): the page an invite link opens (/testimonial?k=code). Posts to the CMS, where it
   waits as Pending until Hardik approves it. */
.tm-page{padding:132px 20px 96px}
.tm-card{max-width:620px;margin:0 auto;padding:36px;border:1px solid var(--edge);border-radius:24px;background:var(--paper);box-shadow:0 1px 0 var(--edge),0 24px 60px rgba(19,19,22,.06)}
.tm-title{margin:10px 0 12px;font:500 clamp(30px,4vw,42px)/1.1 var(--body);letter-spacing:-.035em;color:var(--ink)}
.tm-lede{margin:0 0 28px;font:400 16px/1.55 var(--body);color:var(--ink-soft)}
.tm-form{display:grid;gap:18px}
.tm-form[hidden],.tm-done[hidden],.tm-lede[hidden]{display:none}
.tm-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tm-f{display:grid;gap:8px;position:relative;font:500 14px/1.3 var(--body);color:var(--ink)}
.tm-f i{font-style:normal;color:var(--ink-faint)}
.tm-f input:not([type=file]),.tm-f textarea{width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border:1px solid var(--edge);border-radius:12px;background:var(--paper-2);font:400 16px/1.45 var(--body);color:var(--ink);transition:border-color .15s,background .15s}
.tm-f textarea{resize:vertical;min-height:150px;padding-bottom:30px}
.tm-f input:focus,.tm-f textarea:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.tm-f [aria-invalid=true]{border-color:#D64545}
.tm-count{position:absolute;right:12px;bottom:10px;font:500 12px/1 var(--body);color:var(--ink-faint)}
.tm-count.short{color:#B5651D}
.tm-photo input{position:absolute;inset:auto 0 0;width:100%;height:72px;opacity:0;cursor:pointer}
.tm-drop{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;height:72px;padding:0 14px;box-sizing:border-box;border:1px dashed var(--dim);border-radius:12px;background:var(--paper-2)}
.tm-drop img{grid-row:1/3;width:48px;height:48px;border-radius:50%;corner-shape:round!important;object-fit:cover}
.tm-drop b{font:600 14px/1.2 var(--body);align-self:end}
.tm-drop small{font:400 12px/1.4 var(--body);color:var(--ink-faint);align-self:start}
.tm-drop:has(img[hidden]) b,.tm-drop:has(img[hidden]) small{grid-column:1/3}
.tm-photo:focus-within .tm-drop{outline:2px solid var(--ink);outline-offset:2px}
.tm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tm-msg{margin:0;min-height:0;font:500 14px/1.45 var(--body);color:#C0392B}
.tm-msg:empty{display:none}
.tm-form .btn{justify-self:start;display:inline-flex;align-items:center;gap:10px}
.tm-form .btn .ic{width:18px;height:18px}
.tm-form .btn[disabled]{opacity:.6;pointer-events:none}
.tm-form.closed .tm-f,.tm-form.closed .tm-row,.tm-form.closed .btn{display:none}
.tm-done{text-align:left}
.tm-done:focus{outline:none}
.tm-done h2{margin:0 0 8px;font:500 32px/1.15 var(--body);letter-spacing:-.03em}
.tm-done p{margin:0 0 24px;color:var(--ink-soft);font:400 16px/1.55 var(--body)}
@media(max-width:600px){.tm-page{padding:104px 12px 72px}.tm-card{padding:24px 18px;border-radius:20px}.tm-row{grid-template-columns:1fr}.tm-form .btn{justify-self:stretch;justify-content:center}}
/* ===== TESTIMONIALS (Oct 23, Hardik's Figma and video): "Their words, not mine." Each person sits on the canvas as a
   photo tile in their pillar colour with a small square tag off its top-left corner. Tapping a tile grows it to the
   right into a card (the colour runs out first, then name, role and their words fade in) and tapping again folds it
   back. Tiles shrink as more arrive, never below a size where the words stay easy to read (--s, set by layout()). */
.tw{display:block;width:100%;min-height:100vh;min-height:100svh;box-sizing:border-box;padding:96px 0 120px;text-align:center}
.tw-title{margin:0 auto;max-width:16ch;color:var(--ink)}/* Oct 25, Hardik: same size, weight and marker underline as every other section heading (it had its own font and opted out) */
/* Oct 25, Hardik: the new title breaks into two lines on phones, after “Those” */
.tw-title .tw-br{display:none}
@media(max-width:600px){.tw-title{max-width:none}.tw-title .tw-br{display:inline}}
.tw-stage{position:relative;max-width:1180px;margin:56px auto 0;padding:0 24px;box-sizing:border-box;text-align:left}
.tw-card{--s:1;--t:calc(156px * var(--s));--pad:calc(6px * var(--s));position:absolute;left:var(--x,0);top:var(--y,0);height:var(--t);width:var(--t);
  background:var(--c,#B4F6B8);color:var(--ink);cursor:pointer;transform:translateX(0);
  transition:width .38s cubic-bezier(.2,.8,.2,1) .08s,transform .38s cubic-bezier(.2,.8,.2,1) .08s,left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}
.tw-card.open{width:var(--w);transform:translateX(var(--dx,0px));z-index:2;transition-delay:0s}
/* draggable (Oct 25): a grab cursor, the card lifts while held and follows the pointer without easing */
.tw-card{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tw-card img{-webkit-user-drag:none;pointer-events:none}
.tw-card.drag{cursor:grabbing;z-index:6;transition:width .38s cubic-bezier(.2,.8,.2,1);box-shadow:0 18px 40px -14px rgba(19,19,22,.35)}
.tw-card .tw-face{cursor:inherit}
.tw-card .tw-tag{position:absolute;left:calc(-18px * var(--s));top:calc(-18px * var(--s));width:calc(18px * var(--s));height:calc(18px * var(--s));background:var(--c,#B4F6B8)}
.tw-face{position:absolute;left:var(--pad);top:var(--pad);width:calc(var(--t) - 2 * var(--pad));height:calc(var(--t) - 2 * var(--pad));padding:0;border:0;
  background:rgba(255,255,255,.45);border-radius:calc(30px * var(--s));corner-shape:squircle;overflow:hidden;cursor:pointer;display:grid;place-items:center;
  font:500 calc(28px * var(--s))/1 var(--body);color:var(--ink)}
.tw-face img{display:block;width:100%;height:100%;object-fit:cover}
.tw-face:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* the open card, to Hardik's frame (Oct 23): one line along the top (name, role, company, spread across it), then a
   fixed stretch of the colour, then their words: four lines at the bottom, ending in "…" and a "Read more" that opens
   the whole thing. The card never grows taller. */
.tw-body{position:absolute;left:calc(var(--t) + 16px * var(--s));right:calc(10px * var(--s));top:calc(11px * var(--s));bottom:calc(9px * var(--s));
  display:flex;flex-direction:column;opacity:0;transform:translateX(-10px);pointer-events:none;transition:opacity .12s,transform .12s}
.tw-card.open .tw-body{opacity:1;transform:none;pointer-events:auto;transition:opacity .26s .2s,transform .3s cubic-bezier(.2,.8,.2,1) .18s}
.tw-top{display:flex;justify-content:space-between;align-items:baseline;gap:calc(10px * var(--s));font:500 max(12px,calc(13.5px * var(--s)))/1.25 var(--body);white-space:nowrap;min-width:0}
.tw-top>*{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.tw-top b{font-weight:500;flex-shrink:0}
.tw-top .tw-co{text-align:right}
.tw-qw{position:relative;margin-top:auto;padding-top:calc(16px * var(--s))}
.tw-body blockquote{margin:0;font:400 max(11px,calc(11.5px * var(--s)))/1.32 var(--body);color:#3A3A40;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,4);overflow:hidden;quotes:none}
.tw-more[hidden]{display:none}
.tw-more{position:absolute;right:0;bottom:0;margin:0;padding:0 0 0 8px;border:0;background:var(--c);box-shadow:-12px 0 8px -2px var(--c);font:600 max(11px,calc(11.5px * var(--s)))/1.32 var(--body);color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.tw-card:not(.open) .tw-more{display:none}
/* Read more: the whole testimonial in a small window, in their colour */
.tw-dlg{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;background:transparent;overflow:visible;color:var(--ink)}
.tw-dlg::backdrop{background:rgba(19,19,22,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tw-dlg .tw-tag{position:absolute;left:-18px;top:-18px;width:18px;height:18px;background:var(--c)}
.tw-dlg-in{position:relative;background:var(--c);padding:22px;display:grid;grid-template-columns:120px 1fr;gap:18px 20px;max-height:calc(100dvh - 48px);overflow:auto;box-sizing:border-box}
.tw-dlg .tw-face{position:static;width:120px;height:120px;border-radius:24px;cursor:default}
.tw-dlg a.tw-face{cursor:pointer;text-decoration:none;transition:transform .2s}
.tw-dlg a.tw-face:hover{transform:scale(1.03)}
.tw-li{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:17px;background:rgba(255,255,255,.6);color:var(--ink);font:600 13px/1 var(--body);text-decoration:none}
.tw-li svg{width:15px;height:15px}
.tw-li:hover{background:#fff}
.tw-li:focus-visible,.tw-dlg a.tw-face:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tw-dlg h3{margin:0 40px 4px 0;font:500 18px/1.3 var(--body)}
.tw-dlg .tw-who{margin:0;font:400 14px/1.4 var(--body);color:#3A3A40}
.tw-dlg blockquote{grid-column:1/-1;margin:0;font:400 16px/1.6 var(--body);color:var(--ink);white-space:pre-line;quotes:none}
.tw-dlg-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border:0;border-radius:10px;background:rgba(255,255,255,.55);font:400 22px/1 var(--body);color:var(--ink);cursor:pointer}
.tw-dlg-x:focus-visible,.tw-more:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:600px){.tw-dlg-in{grid-template-columns:84px 1fr;padding:18px}.tw-dlg .tw-face{width:84px;height:84px;border-radius:18px}}
@media(max-width:600px){.tw{padding:72px 0 88px}.tw-stage{padding:0 16px;margin-top:40px}}
@media(prefers-reduced-motion:reduce){.tw-card,.tw-card.open,.tw-body,.tw-card.open .tw-body{transition:none}}
/* the form's preview: the same card, open, sitting in the flow */
.tm-prev{margin:4px 0 0}
.tm-prev .tw-card{position:relative;left:auto;top:auto;margin:calc(18px * var(--s)) 0 0 calc(18px * var(--s));cursor:default}
.tm-colors{display:flex;gap:10px;margin:0;padding:0;border:0}
.tm-colors legend{padding:0;margin:0 0 10px;font:500 14px/1.3 var(--body);color:var(--ink)}
.tm-colors label{position:relative;width:36px;height:36px;cursor:pointer}
.tm-colors input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.tm-colors span{display:block;width:100%;height:100%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(19,19,22,.12)}
.tm-colors input:checked+span{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.tm-colors input:focus-visible+span{outline:2px solid var(--ink);outline-offset:6px}