@font-face{font-family:Satoshi;src:url(/f/satoshi-500.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:Satoshi;src:url(/f/satoshi-700.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/f/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#0b0b0f;
  --surface:#14151b;
  --surface-2:#191a22;
  --line:#25262e;
  --ink:#f3f3f0;
  --muted:#9a9aa4;
  --faint:#6b6b76;
  --accent:#5fb2ff;
  --accent-2:#bfe1ff;
  --accent-3:#3b7bff;
  --sans:Satoshi,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",ui-serif,"Iowan Old Style",Palatino,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;min-height:100svh;
}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}

/* ---------- background scene ---------- */
.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.dots{
  position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,#ffffff1f 1px,transparent 1.4px);
  background-size:28px 28px;background-position:center;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 50%,#000 0,transparent 100%);
          mask-image:radial-gradient(60% 55% at 50% 50%,#000 0,transparent 100%);
}
/* faint line grid behind the hero: fades out on every side, drifts slowly, and a soft
   blue light wanders across it */
@property --gx{syntax:"<percentage>";inherits:false;initial-value:40%}
@property --gy{syntax:"<percentage>";inherits:false;initial-value:45%}
.grid{
  position:absolute;inset:-64px;
  --cell:64px;
  background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:center;
  -webkit-mask-image:radial-gradient(44% 40% at 50% 50%,#000 0,#0009 45%,transparent 100%);
          mask-image:radial-gradient(44% 40% at 50% 50%,#000 0,#0009 45%,transparent 100%);
  animation:grid-drift 30s linear infinite;
}
.grid__glow{
  position:absolute;inset:0;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) var(--glow-a,40%),transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) var(--glow-a,40%),transparent) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:center;
  -webkit-mask-image:radial-gradient(circle var(--glow-r,240px) at var(--gx) var(--gy),#000 0,transparent 100%);
          mask-image:radial-gradient(circle var(--glow-r,240px) at var(--gx) var(--gy),#000 0,transparent 100%);
  animation:grid-roam 18s ease-in-out infinite alternate;
}
@keyframes grid-drift{to{transform:translate3d(64px,64px,0)}}
@keyframes grid-roam{
  0%{--gx:32%;--gy:40%}
  33%{--gx:62%;--gy:34%}
  66%{--gx:58%;--gy:64%}
  100%{--gx:38%;--gy:60%}
}
@media (max-width:720px){
  .grid{--cell:48px;--glow-a:26%;--glow-r:150px;-webkit-mask-image:radial-gradient(70% 34% at 50% 50%,#000 0,#0009 45%,transparent 100%);mask-image:radial-gradient(70% 34% at 50% 50%,#000 0,#0009 45%,transparent 100%)}
}
.field{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease-out) .4s;
  /* cards fade out around the text, as if behind fog */
  -webkit-mask-image:radial-gradient(var(--clear,34% 30%) at 50% 50%,transparent 0,transparent 55%,#000 100%);
          mask-image:radial-gradient(var(--clear,34% 30%) at 50% 50%,transparent 0,transparent 55%,#000 100%);
}
.is-ready .field{opacity:1}

/* floating code cards: position, depth and opacity come from app.js */
.code{
  position:absolute;left:0;top:0;width:var(--w,280px);
  border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);
  box-shadow:0 30px 60px -30px #000,0 0 0 1px #ffffff05 inset;
  font-family:var(--mono);font-size:12px;line-height:1.7;color:#b4b4bd;
  opacity:var(--o,.6);will-change:transform;
  transition:border-color .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
.code--far{filter:blur(1.6px)}
.code__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:#ffffff03}
.code__bar i{width:8px;height:8px;border-radius:50%;background:#2c2d36}
.code__file{margin-left:8px;font-size:12px;color:var(--faint);letter-spacing:.02em}
.code__body{display:block;padding:11px 14px 13px 6px;white-space:pre;counter-reset:ln}
.code__ln{display:block;min-height:1.7em}
.code__ln::before{
  counter-increment:ln;content:counter(ln);
  display:inline-block;width:2.4ch;margin-right:1.4ch;text-align:right;color:#3b3c47;
}
.t-k{color:#c3a6ff}
.t-s{color:var(--accent)}
.t-f{color:#8fe3cf}
.t-n{color:#ff9a8b}
.t-p{color:#e4e4e8}
.t-c{color:#5f606b;font-style:italic}
.code__type{display:inline-block;vertical-align:top;overflow:hidden;white-space:pre}
.code__caret{
  display:inline-block;width:7px;height:1.2em;margin-left:2px;vertical-align:-.25em;border-radius:1px;
  background:var(--accent);opacity:0;
}
.is-typing{
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
  box-shadow:0 30px 60px -30px #000,0 0 40px -10px color-mix(in srgb,var(--accent) 35%,transparent);
}
.is-typing .code__file{color:var(--accent)}
.is-typing .code__type{width:0;animation:type calc(var(--n) * 55ms) steps(var(--n)) .25s forwards}
.is-typing .code__caret{animation:blink 1s steps(1) infinite}
@keyframes type{to{width:calc(var(--n) * 1ch)}}
@keyframes blink{0%{opacity:1}50%{opacity:0}}

/* dashboard widgets among the code cards */
.w{display:block;padding:12px 14px 12px;font-size:12px;color:var(--muted)}
.w b{font-family:var(--sans);font-weight:700;color:var(--ink)}
.w__foot{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12px;color:var(--faint)}
.w__muted{color:var(--faint);margin-left:auto}
.w__row{display:flex;align-items:center;gap:8px}
.w__row b{font-size:13px}
.w__ok{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:10px;color:var(--bg);background:var(--accent)}
.w__stat{display:flex;align-items:baseline;gap:8px}
.w__stat b{font-size:22px;letter-spacing:-.02em}
.w__up{color:#7fd6a8;font-size:12px}
.heat{display:grid;grid-template-columns:repeat(18,1fr);gap:3px}
.heat i{aspect-ratio:1;border-radius:2px;background:#ffffff0a}
.heat .lv1{background:color-mix(in srgb,var(--accent) 22%,#16171e)}
.heat .lv2{background:color-mix(in srgb,var(--accent) 42%,#16171e)}
.heat .lv3{background:color-mix(in srgb,var(--accent) 68%,#16171e)}
.heat .lv4{background:var(--accent)}
.spark{display:block;width:100%;height:56px;margin-top:8px;color:var(--accent)}
.prog{position:relative;height:6px;margin-top:12px;border-radius:99px;background:#ffffff0d;overflow:hidden}
.prog span{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-3),var(--accent),var(--accent-2));animation:prog 6s var(--ease-out) infinite}
@keyframes prog{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.st{display:flex;align-items:center;gap:8px;padding:3px 0}
.st__dot{width:6px;height:6px;border-radius:50%;background:#7fd6a8;box-shadow:0 0 0 3px #7fd6a81f}
.st__name{width:4ch;color:#c9c9cf}
.st__bars{display:flex;gap:2px;margin-left:auto}
.st__bars i{width:4px;height:14px;border-radius:1px;background:color-mix(in srgb,#7fd6a8 55%,#16171e)}
.st__bars i.down{background:color-mix(in srgb,#ff9a8b 70%,#16171e)}
.pr{display:flex;align-items:center;gap:10px}
.pr__av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font-family:var(--sans);font-size:12px;font-weight:700;color:var(--bg);background:#c3a6ff}
.pr__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pr__txt b{font-size:13px;white-space:nowrap}
.pr__tag{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:99px;
  color:#c3a6ff;background:#c3a6ff1a;border:1px solid #c3a6ff4d}

.glow{
  position:absolute;left:50%;top:50%;width:min(900px,120vw);height:min(560px,70vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent-3) 5%,transparent) 55%,transparent);
  filter:blur(30px);opacity:0;animation:breathe 7s ease-in-out 1.2s infinite;transition:opacity 1.6s var(--ease-out) .3s;
}
.is-ready /* dashboard widgets among the code cards */
.w{display:block;padding:12px 14px 12px;font-size:12px;color:var(--muted)}
.w b{font-family:var(--sans);font-weight:700;color:var(--ink)}
.w__foot{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12px;color:var(--faint)}
.w__muted{color:var(--faint);margin-left:auto}
.w__row{display:flex;align-items:center;gap:8px}
.w__row b{font-size:13px}
.w__ok{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:10px;color:var(--bg);background:var(--accent)}
.w__stat{display:flex;align-items:baseline;gap:8px}
.w__stat b{font-size:22px;letter-spacing:-.02em}
.w__up{color:#7fd6a8;font-size:12px}
.heat{display:grid;grid-template-columns:repeat(18,1fr);gap:3px}
.heat i{aspect-ratio:1;border-radius:2px;background:#ffffff0a}
.heat .lv1{background:color-mix(in srgb,var(--accent) 22%,#16171e)}
.heat .lv2{background:color-mix(in srgb,var(--accent) 42%,#16171e)}
.heat .lv3{background:color-mix(in srgb,var(--accent) 68%,#16171e)}
.heat .lv4{background:var(--accent)}
.spark{display:block;width:100%;height:56px;margin-top:8px;color:var(--accent)}
.prog{position:relative;height:6px;margin-top:12px;border-radius:99px;background:#ffffff0d;overflow:hidden}
.prog span{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-3),var(--accent),var(--accent-2));animation:prog 6s var(--ease-out) infinite}
@keyframes prog{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.st{display:flex;align-items:center;gap:8px;padding:3px 0}
.st__dot{width:6px;height:6px;border-radius:50%;background:#7fd6a8;box-shadow:0 0 0 3px #7fd6a81f}
.st__name{width:4ch;color:#c9c9cf}
.st__bars{display:flex;gap:2px;margin-left:auto}
.st__bars i{width:4px;height:14px;border-radius:1px;background:color-mix(in srgb,#7fd6a8 55%,#16171e)}
.st__bars i.down{background:color-mix(in srgb,#ff9a8b 70%,#16171e)}
.pr{display:flex;align-items:center;gap:10px}
.pr__av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font-family:var(--sans);font-size:12px;font-weight:700;color:var(--bg);background:#c3a6ff}
.pr__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pr__txt b{font-size:13px;white-space:nowrap}
.pr__tag{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:99px;
  color:#c3a6ff;background:#c3a6ff1a;border:1px solid #c3a6ff4d}

.glow{opacity:1}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}

.veil{ /* keeps the wordmark readable */
  position:absolute;inset:0;
  background:
    radial-gradient(48% 38% at 50% 50%,color-mix(in srgb,var(--bg) 94%,transparent) 0,color-mix(in srgb,var(--bg) 78%,transparent) 45%,color-mix(in srgb,var(--bg) 20%,transparent) 80%,transparent 100%),
    linear-gradient(180deg,var(--bg) 0,transparent 20%,transparent 80%,var(--bg) 100%);
}
.grain{
  position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- foreground ---------- */
.hero{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(64px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  text-align:center;
}
.eyebrow{
  display:flex;align-items:center;gap:12px;margin-bottom:clamp(14px,2vw,22px);
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.eyebrow__line{width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.eyebrow::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.mark{
  font-weight:700;font-size:clamp(68px,15vw,212px);line-height:.9;letter-spacing:-.055em;
  display:flex;align-items:baseline;
}
.mark{ /* plain white, slightly see-through toward the bottom */
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 92%,transparent) 25%,color-mix(in srgb,var(--ink) 60%,transparent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.06em;
}
.mark__em{
  font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.02em;
  padding:0 .07em 0 .03em;
  background:linear-gradient(100deg,var(--accent-3) 0%,var(--accent) 30%,#f2f8ff 50%,var(--accent-2) 64%,var(--accent) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 7s ease-in-out 1.6s infinite;
}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}

.intro{position:relative;margin-top:clamp(20px,3vw,30px);max-width:min(36em,92vw);font-size:clamp(16px,1.8vw,19px);line-height:1.55;color:#d2d2d8;letter-spacing:-.005em;text-wrap:balance;text-shadow:0 1px 12px #0b0b0f}
.intro::before{ /* frosted glass behind the line: top edge only, fades out to both sides and downward */
  content:"";position:absolute;z-index:-1;inset:-14px -110px -30px;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 44%,transparent),transparent);
  border-top:1px solid #ffffff0d;
  box-shadow:inset 0 1px 0 #ffffff06;
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(180deg,#000 30%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(180deg,#000 30%,transparent);
          mask-composite:intersect;
}
@media (max-width:720px){.intro::before{inset:-12px -20px -26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 30%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 30%,transparent)}}

.contact{display:flex;align-items:center;gap:8px;padding:6px;border-radius:999px;margin-top:clamp(28px,4vw,40px);
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 30px 80px -24px #0009;
}
.contact__mail{
  display:flex;align-items:center;gap:12px;padding:12px 18px 12px 16px;border-radius:999px;
  color:var(--ink);text-decoration:none;font-size:clamp(15px,1.7vw,18px);font-weight:500;letter-spacing:-.01em;
  transition:background .3s var(--ease-out),transform .45s var(--spring);
}
.contact__mail:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.contact__mail:active{transform:scale(.97)}
.contact__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 4%,transparent)}}
.contact__copy{
  position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:0;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted);cursor:pointer;
  transition:background .3s var(--ease-out),color .3s,transform .45s var(--spring);
}
.contact__copy svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact__copy:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 11%,transparent)}
.contact__copy:active{transform:scale(.9)}
.contact__copied{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px);
  font-size:12px;font-weight:500;color:var(--bg);background:var(--ink);padding:5px 10px;border-radius:999px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .45s var(--spring);
}
.contact__copied:empty{display:none}
.is-copied .contact__copied{opacity:1;transform:translate(-50%,0)}
.is-copied{color:var(--accent)!important}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.foot{
  position:fixed;z-index:2;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));
  text-align:center;font-size:12px;color:var(--faint);letter-spacing:.02em;
}
.foot a{color:var(--muted);text-decoration:none;transition:color .3s var(--ease-out)}
.foot a:hover{color:var(--ink)}
.foot__sep{margin:0 10px;opacity:.6}

/* ---------- 404 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;margin-top:clamp(28px,4vw,40px);
  font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;padding:12px 20px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .3s var(--ease-out),transform .45s var(--spring);
}
.btn::before{content:"←";color:var(--accent)}
.btn:hover{background:color-mix(in srgb,var(--ink) 8%,var(--surface))}
.btn:active{transform:scale(.96)}

/* ---------- privacy page ---------- */
body.doc{overflow:auto;overflow-x:hidden}
.doc-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.doc-bg::before{
  content:"";position:absolute;top:-25%;right:-15%;width:75vw;height:70vh;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 12%,transparent),transparent);filter:blur(40px);
}
.doc-bg .dots{
  -webkit-mask-image:radial-gradient(70% 50% at 85% 0,#000 0,transparent 100%);
          mask-image:radial-gradient(70% 50% at 85% 0,#000 0,transparent 100%);
}
/* glowing guide line on the left, like the rift on mailrift.com/privacy */
.doc-line{
  position:absolute;top:0;bottom:0;left:max(14px,calc(50% - 510px));width:2px;opacity:.6;
  background:linear-gradient(180deg,transparent,var(--accent-3) 18%,var(--accent-2) 45%,var(--accent) 75%,transparent);
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 60%,transparent),0 0 40px 6px color-mix(in srgb,var(--accent) 18%,transparent);
}
.doc-line__spark{
  position:absolute;left:-1px;width:4px;height:140px;top:-160px;border-radius:4px;
  background:linear-gradient(180deg,transparent,#fff,transparent);
  filter:drop-shadow(0 0 8px var(--accent-2));
  animation:spark 4.2s var(--ease-out) 1.4s infinite;
}
@keyframes spark{0%{transform:translateY(0);opacity:0}10%{opacity:1}70%{opacity:1}100%{transform:translateY(calc(100vh + 320px));opacity:0}}
.doc-wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;
  padding:max(clamp(24px,5vw,56px),env(safe-area-inset-top)) max(clamp(22px,6vw,48px),env(safe-area-inset-right)) max(48px,env(safe-area-inset-bottom)) max(clamp(22px,6vw,48px),env(safe-area-inset-left))}
.doc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(56px,11vw,120px)}
.doc-brand{font-size:24px;font-weight:700;letter-spacing:-.045em;color:var(--ink);text-decoration:none}
.doc-back{
  font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);
  transition:background .3s var(--ease-out),transform .45s var(--spring);
}
.doc-back::before{content:"←";margin-right:8px;color:var(--muted)}
.doc-back:hover{background:color-mix(in srgb,var(--ink) 8%,var(--surface))}
.doc-back:active{transform:scale(.96)}
.doc h1{font-size:clamp(44px,9vw,88px);font-weight:700;line-height:.98;letter-spacing:-.05em}
.doc h1 .mark__em{letter-spacing:-.02em}
.lead{margin-top:24px;max-width:40em;font-size:clamp(17px,2.1vw,20px);line-height:1.6;color:var(--muted);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.sec{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:34px 0;border-top:1px solid var(--line)}
.lead+.sec{margin-top:56px}
.sec__n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent);padding-top:5px}
.sec h2{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.sec p{font-size:16px;line-height:1.72;color:#c8c8cf;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.sec p+p{margin-top:12px}
.sec a,.lead a{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 65%,transparent);text-underline-offset:3px;transition:text-decoration-color .3s}
.sec a:hover{text-decoration-color:var(--accent)}
.foot--doc{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;padding-top:28px;margin-top:24px;border-top:1px solid var(--line);text-align:left}
.foot__date{margin-left:auto}

/* entrance */
.rise{animation:rise 1.2s var(--ease-out) both}
.rise--1{animation-delay:.3s}.rise--2{animation-delay:.55s}.rise--3{animation-delay:.8s}.rise--4{animation-delay:1.05s}
@keyframes rise{from{opacity:.01;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

@media (max-width:720px){
  .field{--clear:70% 24%}
  .code{border-radius:12px}
  .code__bar{padding:7px 10px}
  .mark{font-size:clamp(68px,24vw,150px);letter-spacing:-.05em}
  .eyebrow{font-size:11px;letter-spacing:.2em}
  .contact__mail{padding:11px 14px 11px 14px}
  .sec{grid-template-columns:1fr;gap:6px}
  .doc-line{opacity:.35}
  .foot--doc{justify-content:center;text-align:center}
  .foot__date{margin-left:0;flex-basis:100%;text-align:center}
  .veil{background:
    radial-gradient(100% 34% at 50% 50%,color-mix(in srgb,var(--bg) 95%,transparent) 0,color-mix(in srgb,var(--bg) 80%,transparent) 50%,color-mix(in srgb,var(--bg) 20%,transparent) 85%,transparent 100%),
    linear-gradient(180deg,var(--bg) 0,transparent 18%,transparent 82%,var(--bg) 100%)}
}
@media (max-width:360px){
  .contact__mail{gap:9px;padding:10px 10px 10px 12px;font-size:14px}
  .contact__copy{width:42px;height:42px}
}
@media (max-height:520px) and (orientation:landscape){
  .mark{font-size:clamp(64px,13vw,120px)}
  .intro{margin-top:12px}.contact{margin-top:18px}
  .foot{position:static;padding-bottom:16px}
  body{overflow:auto}
}
@media (prefers-reduced-motion:reduce){
  .glow,.mark__em,.contact__dot,.is-typing .code__caret,.prog span,.doc-line__spark,.grid,.grid__glow{animation:none!important}
  .is-typing .code__type{animation:none;width:auto}
  .rise{animation-name:fade}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}