/* v3n0mt3ch studio page. The parent of Leet Assistant (indigo, square-cornered colour wash) and Leet Browser (ink, periwinkle, notched corner).
   Follows the visitor's system light/dark. No build step. */
:root{
  --bg:#0a0b10;--bg2:#10121a;--card:#161924;--text:#eef0f7;--dim:#a2a9bd;--faint:#6b7287;
  --line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.22);--hi:rgba(255,255,255,.06);
  --coral:#f0404f;--ind:#bbc3ff;--wash:rgba(49,66,169,.55);--lime:#bbc3ff;--limefill:#bbc3ff;--limetxt:#bbc3ff;
  --btn:#bbc3ff;--btnfg:#10133a;--amber:#ffb300;--glowA:rgba(90,110,255,.16);--glowB:rgba(187,195,255,.08);
  --display:"Racing Sans One","Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
@media(prefers-color-scheme:light){:root{
  --bg:#f5f4ee;--bg2:#ffffff;--card:#ffffff;--text:#12141c;--dim:#4b5163;--faint:#7b8194;
  --line:rgba(18,20,28,.12);--line2:rgba(18,20,28,.3);--hi:rgba(18,20,28,.05);
  --coral:#d42a3d;--ind:#4a5bc4;--wash:rgba(74,91,196,.2);--limetxt:#1f6b62;
  --btn:#4a5bc4;--btnfg:#fff;--amber:#a85f00;--glowA:rgba(74,91,196,.14);--glowB:rgba(120,160,0,.1);color-scheme:light}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,h4,p,ul,figure{margin:0}ul{padding:0;list-style:none}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.mono{font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--ind);outline-offset:3px}

/* nav */
.nav{position:fixed;z-index:40;top:12px;left:0;right:0;pointer-events:none}
.navin{pointer-events:auto;width:min(1200px,100% - 24px);margin-inline:auto;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:99px;background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);transition:background .3s,box-shadow .3s}
.nav.scrolled .navin{background:color-mix(in srgb,var(--bg) 86%,transparent);box-shadow:0 10px 40px rgba(0,0,0,.25)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 21px/1 var(--display);letter-spacing:-.012em}
.nav nav{margin:0 auto;display:flex;gap:2px}
.nav nav a{white-space:nowrap;text-decoration:none;font-weight:500;font-size:14.5px;color:var(--dim);padding:9px 15px;border-radius:99px;transition:background .2s,color .2s}
.nav nav a:hover{background:var(--hi);color:var(--text)}
.nav nav a.on{background:var(--hi);color:var(--text)}
.navcta{flex:none;text-decoration:none;background:var(--btn);color:var(--btnfg);font:600 14.5px var(--sans);border-radius:99px;padding:10px 20px;transition:filter .2s}
.navcta:hover{filter:brightness(1.1)}

/* the studio mark: three slow rings (same family as the browser's orb) */
.mk{position:relative;width:26px;height:26px;flex:none;border-radius:50%}
.mk::before,.mk::after,.mk i{content:"";position:absolute;inset:8%;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.4px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.4px),#000 calc(100% - 2px))}
.mk::before{background:conic-gradient(from 90deg,var(--ind) 0 120deg,transparent 120deg);animation:spin 14s linear infinite}
.mk::after{inset:24%;background:conic-gradient(from 230deg,var(--limetxt) 0 140deg,transparent 140deg);animation:spin 9s linear infinite reverse}
.mk i{inset:40%;background:var(--text);-webkit-mask:none;mask:none;animation:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero */
.hero{position:relative;padding:clamp(120px,15vw,190px) 0 clamp(30px,5vw,60px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-10% -10% auto -10%;height:120%;background:radial-gradient(50% 45% at 18% 20%,var(--glowA),transparent 70%),radial-gradient(40% 40% at 88% 55%,var(--glowB),transparent 70%);pointer-events:none}
.ribbon{position:absolute;left:0;right:0;top:clamp(60px,7vw,100px);width:100%;height:clamp(520px,62vw,860px);pointer-events:none;display:block}
.hero .wrap{position:relative}
.tagline{display:inline-flex;align-items:center;gap:10px;color:var(--dim);margin-bottom:26px}
.tagline::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--limetxt);box-shadow:0 0 0 4px color-mix(in srgb,var(--limetxt) 22%,transparent)}
h1{font:400 clamp(54px,12.8vw,196px)/.88 var(--display);letter-spacing:-.012em}
h1 span{display:block}
h1 .j{background:linear-gradient(100deg,var(--ind) 5%,var(--text) 45%,var(--limetxt) 92%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shift 9s ease-in-out infinite alternate;padding-bottom:.08em}
@keyframes shift{to{background-position:100% 0}}
.lede{font:400 clamp(19px,2vw,24px)/1.5 var(--sans);color:var(--dim);max-width:30em;margin-top:30px}
.lede strong{color:var(--text);font-weight:500}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 24px;border-radius:99px;background:var(--btn);color:var(--btnfg);font:600 16px var(--sans);text-decoration:none;border:0;cursor:pointer;transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.ghost:hover{background:var(--hi);filter:none}
.btn.lime{background:var(--limefill);color:#0a0f19}
.btn.lime.ghost{background:transparent;color:#e8eadf;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.lnk{font:600 15px var(--sans);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--ind)}

/* zeros */
.zeros{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(44px,7vw,90px);border-top:1px solid var(--line)}
.zeros .z{padding:22px 0 0 clamp(0px,1.6vw,22px);border-left:1px solid var(--line)}
.zeros .z:first-child{border-left:0;padding-left:0}
.zeros b{display:block;font:400 clamp(64px,13vw,190px)/.86 var(--display);letter-spacing:-.012em;font-variant-numeric:tabular-nums;min-height:.86em}
.zeros span{display:block;margin-top:8px;color:var(--dim);font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* sections */
section{padding:clamp(60px,9vw,120px) 0}
.sh{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 40px;margin-bottom:clamp(28px,4vw,48px)}
.sh h2{font:400 clamp(38px,6.4vw,92px)/.94 var(--display);letter-spacing:-.012em;max-width:11em}
.sh p{color:var(--dim);max-width:26em;font-size:18px}

/* app tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{position:relative;overflow:hidden;min-height:620px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;isolation:isolate}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--spot) 22%,transparent),transparent 70%)}
.tile:hover::after{opacity:1}
.tile .st{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tile h3{margin:0}
.tile .desc{max-width:27em;margin-top:18px;font-size:18px;line-height:1.55}
.tile .acts{margin-top:auto;padding-top:28px}

/* assistant tile: square corners, one colour fading across (like the app's greeting card) */
.tile.as{--spot:var(--ind);background:linear-gradient(135deg,var(--wash),var(--bg2) 88%)}
.tile.as .st{background:var(--hi);color:var(--ind)}
.tile.as .st::before{content:"";width:7px;height:7px;border-radius:50%;background:#53d28a}
.tile.as .wm{display:block;width:min(100%,380px);height:auto;fill:url(#wmg);stroke:var(--line2);stroke-width:.8;stroke-linejoin:round;margin:26px 0 4px}
.tile.as .sub{margin-top:12px;font:500 13px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--dim);margin-left:4px}
.tile.as .desc{color:var(--dim)}
.tile.as .desc strong{color:var(--text);font-weight:500}
.nstack{display:grid;gap:10px;margin-top:26px;max-width:430px}
.nc{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:20px;background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--line);transition:opacity .45s,transform .45s,max-height .45s,margin .45s,padding .45s;max-height:90px;overflow:hidden}
.nc.gone{opacity:0;transform:translateX(24px);max-height:0;padding-block:0;border-width:0;margin-top:-10px}
.nc .ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#14161f}
.nc .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nc .tx{min-width:0;flex:1}
.nc small{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.nc b{display:block;font:700 16px/1.25 var(--sans);margin-top:4px}
.nc button{flex:none;border:0;cursor:pointer;border-radius:99px;padding:9px 15px;font:600 13.5px var(--sans);background:var(--c);color:#14161f}
.nc.am{--c:#ffb86b}.nc.sk{--c:#8fd0ff}
@media(prefers-color-scheme:light){.nc.am{--c:#b45f00}.nc.sk{--c:#0a6aa8}.nc .ic{color:#fff}.nc button{color:#fff}}
.clear{display:none;font:500 14px var(--sans);color:var(--dim);padding:6px 4px}
.clear.on{display:block}

/* browser tile: dark like the app, 45 degree notch top right, lime only for what is alive */
.tile.br{--spot:#bbc3ff;--ink:#080c14;background:#0e1523;color:#e8eadf;clip-path:polygon(0 0,calc(100% - 46px) 0,100% 46px,100% 100%,0 100%);box-shadow:inset 0 0 0 1px rgba(187,195,255,.16)}
.tile.br::before{content:"";position:absolute;top:0;right:0;width:46px;height:46px;background:linear-gradient(to top right,transparent calc(50% - 1.5px),rgba(187,195,255,.75) calc(50% - 1.5px) 50%,transparent 50%)}
.tile.br .st{background:rgba(255,255,255,.06);color:#bbc3ff;box-shadow:inset 0 0 0 1px rgba(187,195,255,.4)}
.tile.br .bn{display:flex;align-items:center;gap:14px;margin:26px 0 4px}
.tile.br .bn .lg{width:64px;height:64px;flex:none}
.tile.br .bn .mk{width:46px;height:46px}
.tile.br .bn .mk::before{background:conic-gradient(from 90deg,#bbc3ff 0 120deg,transparent 120deg)}
.tile.br .bn .mk::after{background:conic-gradient(from 230deg,#bbc3ff 0 100deg,transparent 100deg)}
.tile.br .bn .mk i{background:#bbc3ff}
.tile.br .bn b{font:800 clamp(44px,5.4vw,70px)/.9 var(--sans);letter-spacing:-.04em}
.tile.br .sub{font:500 13px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:#9ba5b8;margin-left:60px}
.tile.br .desc{color:#a9b2c3}
.tile.br .desc strong{color:#e8eadf;font-weight:500}
.log{margin-top:26px;max-width:430px;background:#080c14;border:1px solid rgba(255,255,255,.12);padding:14px 16px 16px;font:500 13px/2 var(--mono);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.log .bar{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1);color:#9ba5b8}
.log .bar .pill{margin-left:auto;background:#bbc3ff;color:#0a0f19;font-weight:700;padding:1px 9px;font-size:11.5px}
.log .ln{display:flex;gap:12px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;height:26px;overflow:hidden}
.log .ln.in{opacity:1;transform:none}
.log .ln i{font-style:normal;margin-left:auto;color:#7d879a}
.log .ln.bad span{position:relative;color:#9ba5b8}
.log .ln.bad span::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:#bbc3ff;transform-origin:0 50%;transform:scaleX(0);transition:transform .35s .25s}
.log .ln.bad.in span::after{transform:scaleX(1)}
.log .ln.bad i{color:#bbc3ff}

/* together */
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,.4fr) minmax(0,1fr);align-items:center;gap:0}
.pane{position:relative;padding:22px 22px 24px;min-height:300px;display:flex;flex-direction:column}
.pane>.mono{color:var(--faint);margin-bottom:16px}
.pane.pb{background:#0e1523;color:#e8eadf;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);box-shadow:inset 0 0 0 1px rgba(187,195,255,.16)}
.pane.pb>.mono{color:#8c97ab}
.page{background:#080c14;border:1px solid rgba(255,255,255,.1);padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;gap:3px}
.page .u{font:500 12px var(--mono);color:#8c97ab;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.page h4{font:700 20px/1.2 var(--sans)}
.page p{font-size:14.5px;color:#a9b2c3;line-height:1.5}
.page .save{margin-top:auto;align-self:flex-start;border:0;cursor:pointer;background:#bbc3ff;color:#0a0f19;font:700 14.5px var(--sans);padding:11px 18px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.page .save:disabled{opacity:.55;cursor:default}
.pane.pa{background:linear-gradient(135deg,var(--wash),var(--bg2) 90%)}
.pane.pa>.mono{color:var(--dim)}
.link{position:relative;height:60px}
.link::before{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:2px dashed var(--line2)}
.link .pk{position:absolute;top:50%;left:8px;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--limefill);box-shadow:0 0 0 6px color-mix(in srgb,var(--limefill) 25%,transparent);opacity:0}
.flow.go .pk{animation:pk 1.2s cubic-bezier(.5,0,.4,1) forwards}
@keyframes pk{0%{left:8px;opacity:1}85%{opacity:1}100%{left:calc(100% - 24px);opacity:0}}
.link small{position:absolute;left:0;right:0;top:calc(50% + 14px);text-align:center;font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tkt{display:flex;align-items:center;gap:13px;padding:14px;border-radius:20px;background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--line);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .5s,transform .5s;margin-top:auto;margin-bottom:auto}
.flow.done .tkt{opacity:1;transform:none}
.tkt .ic{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ff9ccf;color:#14161f}
.tkt .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tkt small{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#ff9ccf}
.tkt b{display:block;font:700 17px/1.25 var(--sans);margin-top:4px}
.tkt span{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}
@media(prefers-color-scheme:light){.tkt small{color:#b0287a}.tkt .ic{background:#b0287a;color:#fff}}
.waiting{position:absolute;left:22px;right:22px;bottom:24px;color:var(--faint);font:500 12px/1.4 var(--mono);letter-spacing:.06em;transition:opacity .3s}
.flow.done .waiting{opacity:0}
.fnote{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:22px;color:var(--dim);font-size:16px}
.fnote button{border:0;background:none;color:var(--text);cursor:pointer;font:600 15px var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--ind);padding:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(30px,4vw,50px);border-top:1px solid var(--line)}
.steps li{padding:22px 24px 0 0}
.steps em{font:500 12px/1 var(--mono);font-style:normal;color:var(--ind)}
.steps b{display:block;font:400 clamp(22px,2.4vw,30px)/1.1 var(--display);letter-spacing:-.012em;margin:10px 0 8px}
.steps span{color:var(--dim);font-size:16px}

/* house rules */
.rules li{display:grid;grid-template-columns:64px 1fr auto 40px;align-items:center;gap:18px;padding:clamp(16px,2.2vw,26px) 0;border-bottom:1px solid var(--line);transition:padding .25s}
.rules li:first-child{border-top:1px solid var(--line)}
.rules li:hover{padding-left:14px}
.rules em{font:500 13px/1 var(--mono);font-style:normal;color:var(--faint)}
.rules b{font:400 clamp(28px,4.2vw,56px)/1 var(--display);letter-spacing:-.012em;color:var(--text);transition:color .25s}
.rules li:hover b{color:var(--ind)}
.rules span{font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:color-mix(in srgb,var(--text) 78%,var(--dim));max-width:21em;text-align:right}
.rules svg{width:34px;height:34px;overflow:visible}
.rules path{fill:none;stroke:var(--limetxt);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s .25s ease-out}
.rules li.in path{stroke-dashoffset:0}
.proof{margin-top:22px;color:var(--dim);font-size:16px}
.proof a{color:var(--text);text-decoration-color:var(--ind);text-underline-offset:4px;text-decoration-thickness:1.5px}

/* say hi */
.say{padding:clamp(70px,10vw,140px) 0 clamp(50px,7vw,90px);border-top:1px solid var(--line);position:relative;overflow:hidden}
.say::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:90%;background:radial-gradient(50% 60% at 50% 100%,var(--glowA),transparent 70%);pointer-events:none}
.say .wrap{position:relative}
.say h2{font:400 clamp(84px,24vw,300px)/.82 var(--display);letter-spacing:-.012em}
.say h2 em{font-style:normal;display:inline-block;padding:0 .1em .08em .04em;margin-left:-.04em;background:linear-gradient(100deg,var(--ind),var(--limetxt));-webkit-background-clip:text;background-clip:text;color:transparent}
.mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(22px,3vw,40px)}
.mail{font:400 clamp(24px,4.6vw,56px)/1.1 var(--display);letter-spacing:-.012em;text-decoration:none;word-break:break-all}
.mail:hover{color:var(--ind)}
.copy{border:0;cursor:pointer;border-radius:99px;padding:10px 18px;font:600 14.5px var(--sans);background:var(--hi);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.copy:hover{background:var(--line)}
.say .note{display:block;margin-top:16px;color:var(--dim)}

footer{border-top:1px solid var(--line);padding:26px 0 52px;font:500 13px/1.7 var(--mono);color:var(--faint)}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 26px}
footer a{text-decoration:none}footer a:hover{color:var(--text);text-decoration:underline}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.hero .rv{transition-delay:calc(var(--i,0) * .09s)}

@media(max-width:900px){
  .nav nav{display:none}.navin{justify-content:space-between}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:0}
  .tile .acts{padding-top:30px}
  .flow{grid-template-columns:1fr}
  .link{height:80px}
  .link::before{left:50%;right:auto;top:6px;bottom:6px;border-top:0;border-left:2px dashed var(--line2)}
  .link .pk{left:50%;top:6px;margin:0 0 0 -8px}
  .flow.go .pk{animation:pkv 1.2s cubic-bezier(.5,0,.4,1) forwards}
  @keyframes pkv{0%{top:6px;opacity:1}85%{opacity:1}100%{top:calc(100% - 22px);opacity:0}}
  .link small{left:calc(50% + 18px);right:auto;top:50%;transform:translateY(-50%);text-align:left}
  .pane{min-height:0}
  .steps{grid-template-columns:1fr}
  .rules li{grid-template-columns:36px 1fr 34px;gap:4px 14px;align-items:start}.rules em{grid-row:1/3;padding-top:.7em}.rules b{grid-column:2}.rules span{display:block;grid-column:2;text-align:left;max-width:none;font-size:16px}.rules svg{grid-column:3;grid-row:1/3;align-self:center}
  .ribbon{left:-25%;right:-25%;width:150%;top:60px;height:clamp(420px,120vw,560px);opacity:.6}
}
@media(max-width:560px){
  h1{font-size:18.5vw}
  .zeros{grid-template-columns:1fr 1fr}
  .zeros .z{padding:20px 0 24px 18px}
  .zeros .z:nth-child(odd){border-left:0;padding-left:0}
  .zeros .z:nth-child(n+3){border-top:1px solid var(--line)}
  .acts .btn{width:100%;justify-content:center}
  .tile .acts .btn{width:100%;justify-content:center}
  .tile.br .sub{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}.rules path{stroke-dashoffset:0}.log .ln{opacity:1;transform:none}.log .ln.bad span::after{transform:scaleX(1)}
  .flow .tkt{opacity:1;transform:none}.waiting{display:none}
}

/* v3n0mt3ch's own logo: coral mark as-is, wordmark cut from the logo and tinted with the text colour (so it reads on light and dark) */
.logo{gap:11px}
.lm{display:block;flex:none;aspect-ratio:1932/1540;background:var(--coral);-webkit-mask:url(/v3n0mt3ch-mark.svg) center/contain no-repeat;mask:url(/v3n0mt3ch-mark.svg) center/contain no-repeat}
.logo .lm{width:34px}
.word,.dead{display:block;background:var(--text);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.word{--src:url(/v3n0mt3ch-word.png);aspect-ratio:474/62;height:18px}
.dead{--src:url(/v3n0mt3ch-dead.png);aspect-ratio:495/21;height:11px;background:var(--coral);margin-top:9px}
.sig{display:flex;align-items:center;gap:16px;flex:0 0 100%;margin-bottom:14px}
.sig .word{height:44px}
.sig .dead{height:15px;margin-top:11px}
.sig .lm{width:66px}
@media(max-width:560px){.sig .word{height:30px}.sig .dead{height:10px;margin-top:8px}.sig .lm{width:46px}}

/* text stays readable on top of the full-width ribbon: brighter copy + a soft page-colour halo behind each line */
.hero .tagline,.hero .lede,.hero h1{text-shadow:0 0 22px var(--bg),0 0 8px var(--bg),0 0 2px var(--bg)}
.hero .lede{color:color-mix(in srgb,var(--text) 86%,var(--dim));font-weight:450}
.hero .tagline{color:color-mix(in srgb,var(--text) 78%,var(--dim))}
.hero .btn.ghost{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero h1 .j{filter:drop-shadow(0 0 14px var(--bg))}
.hero h1{text-shadow:none;filter:drop-shadow(0 0 16px var(--bg))}
body{font-synthesis:none}

h1 .j{animation:none;background-size:100% 100%}


/* cut letters: the v3n0mt3ch wordmark has thin slanted slits cut through its letters, like crashed text.
   Same idea on the big headings: two sets of slits (different spacing and height) are subtracted from the letters with a mask. */
.cut{
  -webkit-mask-image:linear-gradient(#000,#000),
    linear-gradient(104deg,transparent 46%,#000 46% 51%,transparent 51%),
    linear-gradient(104deg,transparent 46%,#000 46% 51%,transparent 51%);
  -webkit-mask-size:100% 100%,.83em .34em,1.37em .26em;
  -webkit-mask-position:0 0,.3em 22%,.7em 70%;
  -webkit-mask-repeat:no-repeat,repeat-x,repeat-x;
  -webkit-mask-composite:source-out,source-out;
  mask-image:linear-gradient(#000,#000),
    linear-gradient(104deg,transparent 46%,#000 46% 51%,transparent 51%),
    linear-gradient(104deg,transparent 46%,#000 46% 51%,transparent 51%);
  mask-size:100% 100%,.83em .34em,1.37em .26em;
  mask-position:0 0,.3em 22%,.7em 70%;
  mask-repeat:no-repeat,repeat-x,repeat-x;
  mask-composite:subtract,subtract;
}


/* site privacy page */
.doc{padding:clamp(120px,14vw,180px) 0 clamp(50px,7vw,90px)}
.doc .wrap{max-width:820px}
.doc .tagline{margin-bottom:20px}
.doc h1{font-size:clamp(46px,9vw,112px);margin-bottom:22px}
.doc .dek{font:400 clamp(18px,2vw,22px)/1.55 var(--sans);color:var(--dim);max-width:34em;margin:0 0 20px}
.doc h2{font:400 clamp(24px,3vw,34px)/1.1 var(--display);letter-spacing:-.012em;margin:44px 0 10px}
.doc p{font-size:18px;line-height:1.65;color:color-mix(in srgb,var(--text) 82%,var(--dim));max-width:40em;margin:0}
.doc p a{color:var(--text);text-decoration-color:var(--ind);text-decoration-thickness:1.5px;text-underline-offset:4px}