@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Anton-400-latin.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/Caveat-var-latin.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/InterTight-var-latin.woff2) format('woff2')}
:root{
  --text:"Inter Tight","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --ink:#1d1d1f; --quiet:#6e6e73; --fill:#f5f5f7; --blue:#0071e3; --sysblue:#0a84ff;
  --red:#ff3b30; --ring:#1665ff; --lilac:#f1eefc;
  --ease:cubic-bezier(.22,1,.36,1); --pop:cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--text);color:var(--ink);background:#000;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--sysblue);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
img{display:block;max-width:100%}
a{color:inherit} button{font-family:inherit}
:focus-visible{outline:2px solid var(--sysblue);outline-offset:3px}

/* custom cursor (pointer devices only; JS adds html.has-cc) */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:2000;border-radius:50%;opacity:0;transition:opacity .3s}
html.has-cc .cursor-dot,html.has-cc .cursor-ring{opacity:1}
html.has-cc,html.has-cc *{cursor:none!important}
html.has-cc input,html.has-cc textarea{cursor:text!important}
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;mix-blend-mode:difference}
.cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(255,255,255,.85);mix-blend-mode:difference;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background-color .25s,opacity .3s}
.cursor-ring.is-hover{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,255,255,.14)}
#veil{position:fixed;inset:0;width:100%;height:100%;z-index:900;pointer-events:none;visibility:hidden}

/* top pill nav */
@keyframes navin{from{opacity:0;transform:translateX(-50%) translateY(-14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.pillnav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:2px;white-space:nowrap;
  background:rgba(18,18,20,.72);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px;box-shadow:0 12px 32px -12px rgba(0,0,0,.5);
  animation:navin .8s var(--ease) 2.3s backwards}
.pillnav .brand{color:#fff;font-weight:800;letter-spacing:-.02em;font-size:17px;padding:6px 14px 6px 16px;text-decoration:none}
.pillnav .brand i{font-style:normal;color:var(--sysblue)}
.pillnav a.nl{flex:none;color:rgba(255,255,255,.75);text-decoration:none;font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:999px;transition:background-color .2s,color .2s}
.pillnav a.nl:hover{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:640px){.pillnav .brand{font-size:15.5px;padding:6px 10px 6px 12px}.pillnav a.nl{padding:7px 9px;font-size:12.5px}}

/* hero */
.hero{height:100svh;min-height:560px;background:#000;color:#fff;display:grid;place-items:center;position:relative;overflow:hidden}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.2svh,22px);padding:0 20px;transform-origin:50% 40%;will-change:transform,opacity}
.mark{position:relative;width:min(80vw,58svh,600px);aspect-ratio:1}
.mark canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mark-edit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.mark-edit.on{opacity:1}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-name{font-size:clamp(14px,1.5vw,18px);font-weight:650;letter-spacing:.12em;color:rgba(255,255,255,.92);text-align:center;animation:rise .9s var(--ease) 2.9s backwards}
.hero-name b{font-weight:800;letter-spacing:.3em;margin-right:.35em}
.hero-sub{font-size:clamp(12.5px,1.1vw,15px);color:rgba(255,255,255,.55);font-weight:500;letter-spacing:.06em;text-align:center;animation:rise .9s var(--ease) 3.05s backwards}
@keyframes hintin{from{opacity:0}to{opacity:1}}
.hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px;animation:hintin 1s ease 3.5s backwards}
.hint::after{content:"";width:1.5px;height:40px;background:linear-gradient(rgba(255,255,255,.85),transparent);animation:hintdrop 2.2s var(--ease) infinite}
@keyframes hintdrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-height:640px){.hero-sub{display:none}}

/* story */
.story{position:relative;height:calc(60svh + 640svh);background:#000}
.story-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;background:#000}
.story-fly{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.sentence{position:relative;z-index:2;color:#fff;text-align:center;font-weight:733;letter-spacing:-.031em;padding:0 5vw;font-size:min(7.2vw,12svh);line-height:1.16;max-width:16em;will-change:transform,opacity}
.sentence .w{display:inline-block;white-space:nowrap;position:relative;vertical-align:bottom}
.sentence .ch{display:inline-block;transform-origin:50% 82%;will-change:transform,opacity}
.sentence .sp{display:inline-block;width:.23em}
.reel{display:inline-block;position:relative;overflow:hidden;height:1.16em;vertical-align:bottom}
.reel-track{display:flex;flex-direction:column;will-change:transform}
.reel-face{height:1.16em;line-height:1.16em;display:block;text-align:center}
.framebox{position:absolute;inset:-.06em -.06em;border:2px solid var(--sysblue);opacity:0;pointer-events:none;z-index:3}
.framebox i{position:absolute;width:9px;height:9px;margin:-5.5px 0 0 -5.5px;background:#fff;border:2px solid var(--sysblue)}
.framebox i:nth-child(1){top:0;left:0}.framebox i:nth-child(2){top:0;left:100%}
.framebox i:nth-child(3){top:100%;left:0}.framebox i:nth-child(4){top:100%;left:100%}
.framebox .dims{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);background:var(--sysblue);color:#fff;font-family:var(--text);
  font:600 max(10px,.115em)/1 var(--text);padding:.32em .5em;border-radius:.4em;white-space:nowrap;letter-spacing:.01em}
.framebox .fcur{position:absolute;right:-.42em;bottom:-.62em;width:.26em;height:.26em;min-width:14px;min-height:14px;background:var(--sysblue);
  clip-path:polygon(0 0,100% 62%,58% 66%,78% 100%,63% 106%,44% 70%,0 100%);transform:rotate(-8deg)}
.capsule-hl{position:absolute;inset:-.04em -.16em;border-radius:999px;opacity:0;pointer-events:none;z-index:-1;
  background:linear-gradient(#ffffff0f,#ffffff03 55%,#ffffff09);
  box-shadow:inset 1.5px 1.5px 0 #ffffff8c,inset -1px -1px 0 #fff3,0 14px 34px -14px rgba(120,170,255,.45)}
.caret{display:inline-block;width:.055em;height:.9em;background:#fff;margin-left:.05em;vertical-align:-.07em;opacity:0}
.caret.on{opacity:1;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.shaderword .ch{background:linear-gradient(100deg,#0894ff 0%,#c959dd 22%,#ff2e54 44%,#ff9004 62%,#65f57a 82%,#0894ff 100%);
  background-size:600% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.chromeword{font-family:"Anton",var(--text);font-weight:400;letter-spacing:.01em;perspective:8em}
.chromeword .cl{--o:0;display:inline-block;position:relative;transform-style:preserve-3d;will-change:transform}
.chromeword .layer,.chromeword .face,.chromeword .glint{opacity:var(--o)}
.chromeword .layer{position:absolute;inset:0;pointer-events:none}
.chromeword .face{position:relative;display:block;background:linear-gradient(180deg,#fff 0%,#e9e4ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.chromeword .glint{position:absolute;inset:0;color:transparent;pointer-events:none;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);
  background-size:300% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text}
.story-note{position:absolute;z-index:3;bottom:24px;right:28px;font-family:"Caveat",cursive;font-size:clamp(19px,2vw,26px);color:rgba(255,255,255,.6);transform:rotate(-3deg)}
@media (max-width:700px){.framebox .dims{display:none}.sentence{line-height:1.42;font-size:min(8.4vw,12svh)}.reel,.reel-face{height:1.16em;line-height:1.16em}}

/* work */
.workwrap{background:#fff;color:var(--ink);position:relative}
.work-intro{height:150svh;position:relative}
.workhead{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 max(20px,5vw);will-change:opacity,transform}
.kicker{font-size:13px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--quiet)}
.workhead h2{font-size:clamp(40px,7vw,104px);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-top:14px}
.say{display:inline-block;background:var(--ring);color:#fff;border-radius:.3em;padding:.02em .26em .08em;transform:rotate(-1.2deg)}
.workhead p{margin-top:18px;font-size:clamp(15px,1.4vw,18px);color:var(--quiet);font-weight:500;max-width:30em;line-height:1.65}
.pj-list{position:relative;z-index:2;margin-top:-58svh}
.pj{max-width:1240px;margin:0 auto;padding:clamp(48px,10svh,120px) max(20px,5vw);display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,5vw,96px);align-items:center}
.pj.flip{grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr)}
.pj.flip .pj-text{order:2}
.pj-text{max-width:22em}
.pj-name{display:inline-flex;align-items:center;gap:10px;font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:-.01em;background:#fff;
  padding:7px 16px 7px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 6px 18px -10px rgba(0,0,0,.25)}
.pj-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--fill)}
.pj-ico svg{width:17px;height:17px}
.pj-line{margin-top:18px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:var(--ink);font-weight:550;letter-spacing:-.005em}
.pj-kind{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--quiet)}
.pj-visit{margin-top:20px;display:inline-flex;align-items:center;gap:.45em;font-weight:650;font-size:14.5px;color:var(--ink);background:var(--fill);
  padding:.72em 1.25em;border-radius:999px;text-decoration:none;transition:transform .35s var(--pop),background-color .2s,color .2s}
.pj-visit:hover{transform:scale(1.045);background:var(--ink);color:#fff}
.pj-window{background:#fff;border-radius:clamp(16px,1.6vw,24px);padding:0 clamp(8px,.8vw,12px) clamp(8px,.8vw,12px);will-change:transform;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.03),0 40px 80px -36px rgba(40,20,90,.28)}
.pj-bar{display:grid;grid-template-columns:minmax(52px,1fr) minmax(0,auto) minmax(52px,1fr);align-items:center;height:clamp(40px,3.4vw,50px)}
.pj-lights{display:flex;gap:7px;padding-left:4px}
.pj-lights i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14)}
.pj-lights i:nth-child(1){background:#ff5f57}.pj-lights i:nth-child(2){background:#febc2e}.pj-lights i:nth-child(3){background:#28c840}
.pj-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.pj-tabs::-webkit-scrollbar{display:none}
.pj-tab{border:0;background:transparent;color:var(--quiet);font-size:clamp(11.5px,.92vw,13px);font-weight:600;padding:.42em .72em;border-radius:7px;cursor:pointer;white-space:nowrap;transition:color .2s,background-color .2s,box-shadow .2s}
.pj-tab:hover{color:var(--ink)}
.pj-tab[aria-pressed="true"]{color:var(--ink);background:var(--fill);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.pj-note{justify-self:end;font-size:11px;font-weight:600;color:#aeaeb2;letter-spacing:.04em;padding-right:4px;white-space:nowrap}
.pj-screen{position:relative;aspect-ratio:16/10;background:var(--lilac);border-radius:clamp(8px,.8vw,12px);overflow:hidden}
.pj-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .55s var(--ease),transform .8s var(--ease)}
.pj-screen img.on{opacity:1;transform:scale(1)}
.pj-pix{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;image-rendering:pixelated}
.pj-cap{position:absolute;left:12px;bottom:12px;z-index:2;background:rgba(20,20,22,.66);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:600;padding:.5em .9em;border-radius:999px;letter-spacing:.01em;max-width:calc(100% - 24px)}
@media (max-width:859px){.pj,.pj.flip{grid-template-columns:1fr}.pj.flip .pj-text{order:0}.pj-list{margin-top:-40svh}.pj-note{display:none}}
.pj-end{position:relative;z-index:2;background:#fff;max-width:1240px;margin:0 auto;padding:clamp(40px,8svh,90px) max(20px,5vw) clamp(80px,12svh,140px)}
.pj-end h3{font-size:clamp(28px,3.6vw,52px);font-weight:800;letter-spacing:-.025em}
.pj-end h3 a{color:var(--blue);text-decoration:none;border-bottom:.07em solid rgba(0,113,227,.3)}
.pillrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.btn-pill{display:inline-flex;align-items:center;gap:.5em;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:15px;
  padding:.85em 1.5em;border-radius:999px;border:0;cursor:pointer;transition:transform .35s var(--pop),background-color .2s}
.btn-pill:hover{transform:scale(1.045)}
.btn-pill.blue{background:#0a6cff}
.archrows{margin-top:34px;border-top:1px solid rgba(0,0,0,.08)}
.archrows a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 4px;border-bottom:1px solid rgba(0,0,0,.08);text-decoration:none;transition:padding-left .25s var(--ease)}
.archrows a:hover{padding-left:12px}
.archrows b{font-size:16.5px;font-weight:700;letter-spacing:-.01em;flex:none}
.archrows span{color:var(--quiet);font-size:13.5px;font-weight:500;text-align:right}

/* method wheel */
.rw{background:#fff;color:#111;overflow:clip;position:relative;z-index:2}
.rw-pin{height:calc(100svh + 320svh)}
.rw-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:64px;overflow:hidden}
.reduced .rw-pin{height:auto}.reduced .rw-sticky{position:relative;height:auto;padding:80px 0 120px}
.rw-head{text-align:center;padding:0 20px}
.rw-head h2{font-size:clamp(34px,5vw,68px);font-weight:800;letter-spacing:-.03em;margin-top:12px}
.rw-head h2 .say{transform:rotate(1.4deg)}
.rw-head p{margin-top:14px;color:var(--quiet);font-weight:500;font-size:clamp(15px,1.3vw,17.5px)}
.rw-stage{--face:104px;width:100%;max-width:1500px;margin:clamp(6px,2svh,24px) auto 0;position:relative;height:clamp(380px,60svh,620px)}
.rw-rim{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rw-wheel{position:absolute;inset:0}
.rw-seat{position:absolute;left:0;top:0;width:0;height:0;will-change:transform,opacity}
.rw-face{position:absolute;left:0;top:0;width:var(--face);height:var(--face);margin:calc(var(--face)/-2) 0 0 calc(var(--face)/-2);border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:calc(var(--face)*.28);letter-spacing:-.02em;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,255,255,.55);transition:transform .35s var(--pop)}
.rw-face:hover{transform:scale(1.08)}
.rw-face small{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--ink);font-size:14px;font-weight:700;letter-spacing:0}
.rw-bubble{position:absolute;left:50%;top:calc(var(--face)*.5 + 40px);transform:translate(-50%,-10px) scale(.35);transform-origin:50% 0;width:min(320px,78vw);
  background:#fff;color:var(--ink);border-radius:20px;padding:18px 20px;box-shadow:0 24px 60px -18px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.05);
  opacity:0;pointer-events:none;transition:transform .45s var(--pop),opacity .26s var(--ease);z-index:5;text-align:left}
.rw-bubble::before{content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg);box-shadow:-1px -1px 0 rgba(0,0,0,.05)}
.rw-bubble.open{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.rw-bubble h4{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.rw-bubble p{margin-top:7px;font-size:14px;line-height:1.65;color:#3a3a3c;font-weight:500}
@media (max-width:700px){.rw-stage{--face:80px;height:clamp(380px,58svh,500px)}.rw-head p{font-size:14px}}

/* brief form */
.brief{--bink:#1d1d1f;--bquiet:#6e6e73;--bfill:#f5f5f7;--bline:rgba(60,60,67,.16);background:#fff;color:var(--bink);padding:clamp(70px,12svh,140px) max(20px,5vw);position:relative;z-index:2}
.bf-wrap{max-width:1240px;margin:0 auto}
.bf-wrap h2{font-size:clamp(36px,5.4vw,72px);font-weight:800;letter-spacing:-.03em;margin-top:12px}
.bf-wrap .lede{margin-top:14px;color:var(--bquiet);font-weight:500;font-size:clamp(15px,1.35vw,18px);max-width:40em;line-height:1.65}
.bf-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(34px,5vw,90px);margin-top:clamp(36px,6svh,64px);align-items:start}
@media (max-width:859px){.bf-layout{grid-template-columns:1fr}}
.bf-paper{background:var(--bfill);border-radius:26px;padding:clamp(24px,3vw,42px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 30px 60px -30px rgba(0,0,0,.18);
  transform-origin:50% 60%;transition:transform .8s var(--ease),opacity .5s var(--ease)}
.bf-paper.folding{transform:perspective(1100px) rotateX(38deg) scale(.82) translateY(30px);opacity:.25}
.bf-group{margin-bottom:22px}
.bf-label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bquiet);margin-bottom:8px}
.bf-label em{font-style:normal;text-transform:none;letter-spacing:0;color:#aeaeb2;font-weight:600}
.bf-input{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--bline);padding:9px 2px 11px;font:inherit;font-size:17px;font-weight:550;color:var(--bink);outline:none;transition:border-color .2s;resize:vertical}
.bf-input:focus{border-color:var(--blue)}
.bf-input[aria-invalid="true"]{border-color:var(--red)}
.bf-legend{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bquiet);margin-bottom:11px}
.bf-picks{border:0;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.bf-picks input{position:absolute;opacity:0;pointer-events:none}
.bf-picks label{font-size:14px;font-weight:600;padding:.62em 1.1em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--bline);cursor:pointer;transition:all .18s}
.bf-picks input:checked+label{background:var(--bink);color:#fff;box-shadow:inset 0 0 0 1px var(--bink)}
.bf-picks input:focus-visible+label{outline:2px solid var(--blue);outline-offset:2px}
.bf-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bf-send{margin-top:6px;display:inline-flex;align-items:center;gap:10px;background:var(--bink);color:#fff;border:0;border-radius:999px;height:54px;
  padding:0 26px;font-size:17px;font-weight:650;letter-spacing:-.013em;cursor:pointer;transition:background-color .2s,transform .42s var(--pop)}
.bf-send:hover{transform:scale(1.04);background:#000}
.bf-hint{margin-top:12px;font-size:13px;color:var(--bquiet);font-weight:500}
.bf-side{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:8px}
.mailbox{width:min(300px,70vw)}
.bf-sent{display:none;text-align:center;max-width:22em}
.bf-sent.show{display:block;animation:bfin .7s var(--pop)}
@keyframes bfin{from{transform:scale(.8) translateY(16px);opacity:0}}
.bf-sent .big{font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.02em}
.bf-sent p{margin-top:10px;color:var(--bquiet);font-weight:500;line-height:1.65}
.bf-sent a.go{display:inline-flex;margin-top:14px;background:var(--blue);color:#fff;font-weight:700;text-decoration:none;padding:.8em 1.4em;border-radius:999px}
.bf-sent a{color:var(--blue);font-weight:650;text-decoration:none}
.bf-again{margin-top:14px;background:var(--bfill);border:0;height:44px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:650;cursor:pointer;display:block;margin-left:auto;margin-right:auto}

/* final CTA */
.rg{background:#000;color:#fff;position:relative;padding:clamp(90px,15svh,170px) 20px clamp(110px,17svh,190px);text-align:center;overflow:hidden}
.rg .ask{font-family:"Caveat",cursive;font-size:clamp(26px,3vw,40px);color:rgba(255,255,255,.75);transform:rotate(-2deg)}
.rg h2{font-size:clamp(44px,8.5vw,124px);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin-top:14px}
.rg h2 .cool{background:linear-gradient(95deg,#67beff,#c959dd 45%,#ff2e54 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rg-strip{position:relative;width:min(900px,92vw);height:clamp(90px,13vw,150px);margin:clamp(30px,5svh,56px) auto 0}
.rg-strip canvas{position:absolute;inset:0;width:100%;height:100%}
.strip{display:flex;gap:clamp(20px,4vw,54px);justify-content:center;align-items:center;height:100%}
.strip.hide{display:none}
.strip .v{font-family:"Anton",sans-serif;font-size:clamp(52px,7.5vw,104px);line-height:1;color:#fff}
.strip .v.pix{font-family:var(--text);font-weight:900;color:#67beff;text-shadow:3px 3px 0 #1665ff,6px 6px 0 rgba(22,101,255,.4)}
.strip .v.chrome{background:linear-gradient(180deg,#fff 8%,#aab4d8 38%,#4a3f86 55%,#e9e4ff 78%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.strip .v.sand{color:#d8c49a}
.strip .v.outl{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85)}
.fcur{position:absolute;left:0;top:0;display:flex;align-items:flex-start;pointer-events:none;z-index:4;will-change:transform}
.fcur svg{width:17px;height:17px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
.fcur b{font-size:12.5px;font-weight:700;color:#fff;padding:.28em .7em;border-radius:4px 999px 999px 999px;margin-left:-2px;margin-top:12px;white-space:nowrap}
.rg .booking{margin-top:clamp(36px,6svh,64px);color:rgba(255,255,255,.55);font-weight:550;font-size:15px}
.rg .booking b{color:#30d158;font-weight:700}

/* footer */
.ft{background:#000;color:#fff;position:relative;overflow:hidden;padding:clamp(60px,9svh,100px) max(20px,5vw) 34px;border-top:1px solid rgba(255,255,255,.09)}
.ft-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;position:relative;z-index:2}
@media (max-width:700px){.ft-grid{grid-template-columns:1fr}}
.ft-say{font-size:clamp(26px,3.4vw,46px);font-weight:750;letter-spacing:-.025em;line-height:1.15;max-width:12em}
.ft-clocks{margin-top:22px;display:flex;gap:10px 26px;flex-wrap:wrap;color:rgba(255,255,255,.6);font-size:13.5px;font-weight:600;letter-spacing:.04em}
.ft-clocks b{color:#fff}
.ft-clocks time{font-variant-numeric:tabular-nums}
.ft-mail{margin-top:24px;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:15px;font-weight:650;padding:.8em 1.3em;border-radius:999px;cursor:pointer;transition:background-color .2s,transform .35s var(--pop)}
.ft-mail:hover{background:rgba(255,255,255,.15);transform:scale(1.03)}
.ft-mail .copied{display:none;background:#30d158;color:#04150a;font-size:12px;font-weight:800;padding:.25em .7em;border-radius:999px}
.ft-mail.done .copied{display:inline-block}
.ft-nav{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ft-nav a{color:rgba(255,255,255,.85);text-decoration:none;font-weight:650;font-size:16px}
.ft-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ft-nav .gh{color:rgba(255,255,255,.55);font-size:14px}
.ft-row{max-width:1240px;margin:clamp(44px,7svh,70px) auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:flex-start;gap:12px 28px;flex-wrap:wrap;color:rgba(255,255,255,.5);font-size:13.5px;font-weight:550;position:relative;z-index:2}
.ft-top{background:none;border:0;color:rgba(255,255,255,.85);font-size:13.5px;font-weight:650;cursor:pointer;padding:0}
.ft-top:hover{color:#fff}
.pg-ring{position:absolute;right:-130px;bottom:-150px;width:430px;height:430px;z-index:1;opacity:.9;touch-action:none;cursor:grab}
.pg-ring:active{cursor:grabbing}
@media (max-width:900px){.pg-ring{width:300px;height:300px;right:-110px;bottom:-120px;opacity:.55}}

@media (prefers-reduced-motion:reduce){
  .hint::after,.caret.on{animation:none}
  .pillnav,.hero-name,.hero-sub,.hint{animation:none}
}

.reduced .story{height:100svh}
.reduced .work-intro{height:auto}
.reduced .workhead{position:relative;height:auto;padding-top:clamp(70px,11svh,130px);padding-bottom:30px}
.reduced .pj-list{margin-top:0}

/* ===== project file pages (/work/ and /work/<id>/, generated by tools/build.mjs) ===== */
.pj-visit.ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);margin-left:6px}
.pj-visit.ghost:hover{background:var(--ink);box-shadow:none}
body.sub .pillnav{animation-delay:.2s}
.wk-hero{min-height:88svh;background:#000;color:#fff;display:flex;align-items:center;position:relative;overflow:hidden;padding:110px max(20px,5vw) 90px}
.wk-hero .hint{animation-delay:1.2s}
.wk-hero-in{width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,60px);align-items:center}
.wk-hero-index .wk-hero-in{grid-template-columns:1fr}
.wk-hero-index{min-height:62svh}
.wk-head{animation:rise .9s var(--ease) .1s backwards}
.wk-hero .kicker{color:rgba(255,255,255,.55)}
.wk-crumb a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.wk-crumb span{margin:0 .6em;opacity:.5}
.wk-hero h1{font-size:clamp(40px,6.4vw,96px);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-top:16px}
.wk-tag{margin-top:18px;font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:rgba(255,255,255,.72);font-weight:500;max-width:30em}
.wk-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.wk-meta li{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:.5em .9em;border-radius:999px}
.wk-meta b{font-weight:700;color:rgba(255,255,255,.45);margin-right:.5em}
.wk-link{display:inline-flex;margin-top:26px;background:#fff;color:#000;font-weight:700;font-size:15px;text-decoration:none;padding:.85em 1.4em;border-radius:999px;transition:transform .35s var(--pop)}
.wk-link:hover{transform:scale(1.045)}
.wk-no{position:relative;aspect-ratio:1.15;width:100%}
.wk-no canvas{position:absolute;inset:0;width:100%;height:100%}
.wk-no-fb{position:absolute;inset:0;display:grid;place-items:center;font-family:"Anton",sans-serif;font-size:clamp(120px,22vw,320px);line-height:1;
  background:linear-gradient(180deg,#fff 8%,#c9d2ef 40%,#4a3f86 55%,#e9e4ff 80%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.wk-no.ink-on .wk-no-fb{display:none}
@media (max-width:859px){.wk-hero-in{grid-template-columns:1fr}.wk-no{order:-1;max-width:340px;aspect-ratio:1.5;margin:0 auto -10px}.wk-hero{padding-top:90px}}

.wk-body{background:#fff;color:var(--ink);padding:clamp(56px,10svh,120px) max(20px,5vw) clamp(80px,12svh,140px)}
.wk-wrap{max-width:1100px;margin:0 auto}
.wk-facts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(40px,7svh,72px)}
.wk-facts li{background:var(--fill);border-radius:18px;padding:18px 18px 20px;font-size:15px;font-weight:600;line-height:1.5}
.wk-facts span{display:block;font-family:"Anton",sans-serif;font-size:26px;color:var(--ring);margin-bottom:10px;font-weight:400}
@media (max-width:859px){.wk-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wk-cols{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(30px,5vw,80px);margin-top:clamp(48px,8svh,90px);align-items:start}
@media (max-width:859px){.wk-cols{grid-template-columns:1fr}}
.wk-text p{font-size:clamp(16px,1.3vw,18px);line-height:1.9;color:#2c2c2e;font-weight:500}
.wk-text p+p{margin-top:1.2em}
.wk-side{position:sticky;top:90px}
.wk-stack{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.wk-stack li{font-size:13.5px;font-weight:650;padding:.5em .95em;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.wk-note{margin:clamp(56px,9svh,100px) auto 0;max-width:22em;text-align:center}
.wk-note p{font-size:clamp(24px,2.8vw,38px);font-weight:750;letter-spacing:-.02em;line-height:1.35}
.wk-note cite{display:block;margin-top:14px;font-family:"Caveat",cursive;font-style:normal;font-size:24px;color:var(--quiet)}
.wk-pn{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-top:clamp(60px,10svh,110px);padding-top:28px;border-top:1px solid rgba(0,0,0,.08)}
.wk-pn-a{text-decoration:none;display:block;padding:14px 4px;transition:transform .35s var(--ease)}
.wk-pn-a.next{text-align:right}
.wk-pn-a small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--quiet)}
.wk-pn-a b{display:block;margin-top:6px;font-size:clamp(17px,1.6vw,22px);font-weight:800;letter-spacing:-.015em}
.wk-pn-a:hover{transform:translateX(-4px)}.wk-pn-a.next:hover{transform:translateX(4px)}
@media (max-width:640px){.wk-pn{grid-template-columns:1fr 1fr}.wk-pn .btn-pill{grid-column:1/-1;grid-row:2;justify-self:center}}

.wk-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.wk-filter button{border:0;cursor:pointer;font-size:14px;font-weight:650;color:rgba(255,255,255,.8);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);padding:.6em 1.15em;border-radius:999px;transition:background-color .2s,color .2s}
.wk-filter button:hover{color:#fff;background:rgba(255,255,255,.14)}
.wk-filter button[aria-pressed="true"]{background:#fff;color:#000}
.wk-grid{list-style:none;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.wk-grid li[hidden]{display:none}
@media (max-width:1000px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.wk-grid{grid-template-columns:1fr}}
.wk-card{display:block;text-decoration:none;color:var(--ink)}
.wk-card-img{display:block;background:#fff;border-radius:18px;padding:8px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -34px rgba(40,20,90,.3);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.wk-card-img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:11px;background:var(--lilac)}
.wk-card:hover .wk-card-img{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 70px -30px rgba(40,20,90,.38)}
.wk-card-meta{display:flex;justify-content:space-between;margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--quiet)}
.wk-card-meta span:first-child{font-family:"Anton",sans-serif;font-weight:400;font-size:15px;color:var(--ring);letter-spacing:.02em}
.wk-card b{display:block;margin-top:6px;font-size:clamp(19px,1.6vw,22px);font-weight:800;letter-spacing:-.015em}
.wk-card-tag{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--quiet);font-weight:500}

/* project page: where to open it + real screenshots */
.wk-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.wk-ln{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:14px;text-decoration:none;color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:10px 16px 11px;transition:background-color .2s,transform .35s var(--pop)}
.wk-ln small{grid-column:1;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.wk-ln b{grid-column:1;font-size:15px;font-weight:700;letter-spacing:-.005em}
.wk-ln i{grid-column:2;grid-row:1/3;font-style:normal;font-size:18px;color:rgba(255,255,255,.6)}
.wk-ln:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.wk-ln.gh{background:#fff;color:#000;border-color:#fff}
.wk-ln.gh small{color:rgba(0,0,0,.5)}.wk-ln.gh i{color:rgba(0,0,0,.5)}
.wk-ln.gh:hover{background:#e9e4ff}
.wk-ln-note{flex-basis:100%;margin-top:4px;font-size:13px;font-weight:600;color:rgba(255,255,255,.45)}
.wk-real{margin-top:clamp(56px,9svh,100px)}
.wk-real-head h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;margin-top:10px}
.wk-real-head p:last-child{margin-top:10px;color:var(--quiet);font-weight:500;font-size:15px;line-height:1.6;max-width:36em}
.wk-real-grid{display:grid;gap:clamp(14px,2vw,24px);margin-top:26px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.wk-real-grid.n1{grid-template-columns:minmax(0,1fr);max-width:820px}
.wk-real-grid.n3 figure:first-child{grid-column:1/-1}
.wk-real-grid figure a{display:block;border-radius:14px;overflow:hidden;background:var(--fill);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 50px -30px rgba(0,0,0,.35);transition:transform .45s var(--ease)}
.wk-real-grid figure a:hover{transform:translateY(-4px)}
.wk-real-grid img{width:100%;height:auto;display:block}
.wk-real-grid figcaption{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--quiet)}
@media (max-width:700px){.wk-real-grid{grid-template-columns:1fr}}