:root{
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.82); --muted:rgba(255,255,255,.6); --light:rgba(255,255,255,.45);
  --tile:rgba(255,255,255,.08); --tile-line:rgba(255,255,255,.14); --field:rgba(255,255,255,.18); --quiet:rgba(255,255,255,.14);
  --green:#22A05B;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:var(--ink)}
body{font-family:'Inter Tight',Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ink)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.page{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:0 32px 24px}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:22px;padding:48px 0 40px;text-align:center}

/* typing line: the whole sentence is laid out from the start, untyped part invisible */
.line{margin:0;max-width:400px;font-size:17px;line-height:1.45;color:var(--ink-2)}
.line .rest{color:transparent}
.cursor{display:inline-block;width:2px;height:1.05em;margin-left:2px;margin-right:-4px;vertical-align:-0.18em;background:var(--light);animation:blink 1.06s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* contact tile */
.tile{width:460px;max-width:100%;margin-top:12px;text-align:left;background:var(--tile);border:1px solid var(--tile-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:22px;overflow:hidden;opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .9s var(--ease)}
.tile-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 14px 28px;min-height:80px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.who{display:flex;align-items:center;gap:6px;min-width:0}
.email{font-size:22px;font-weight:500;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy{position:relative;width:36px;height:36px;flex:none;border:0;border-radius:999px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.copy:hover{background:rgba(255,255,255,.12);color:var(--ink)}
.copy svg{position:absolute;transition:opacity .2s ease,transform .3s var(--ease)}
.copy .ok{color:var(--green);opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .4s var(--spring)}
.copy.copied .ico{opacity:0;transform:scale(.5)}
.copy.copied .ok{opacity:1;transform:scale(1)}
.ring-wrap{width:52px;height:52px;flex:none;display:grid;place-items:center}
.ring{width:52px;height:52px;border:0;padding:0;border-radius:999px;background:#FFFFFF;color:#111;display:grid;place-items:center;cursor:pointer;transition:width .45s var(--ease),height .45s var(--ease),background .35s ease,color .35s ease,transform .5s var(--ease)}
.ring svg{transition:transform .45s var(--ease)}
@media (hover:hover){.tile-head:hover .ring{transform:rotate(90deg)}}
.tile.open .ring{width:40px;height:40px;background:var(--quiet);color:#FFFFFF}
.tile.open .ring svg{transform:rotate(45deg)}
.tile-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease),opacity .4s ease;opacity:0}
.tile.open .tile-body{grid-template-rows:1fr;opacity:1}
.tile-body>div{overflow:hidden}
.tile-inner{margin:0 14px;padding:20px 14px 22px;border-top:1px solid var(--tile-line)}
form{display:flex;flex-direction:column;gap:10px;margin:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f{display:block;width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:rgba(0,0,0,.35);border:1px solid var(--field);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.f:focus{border-color:rgba(255,255,255,.7)}
.f::placeholder{color:var(--light)}
.msg{position:relative}
.msg textarea{resize:none;height:92px;padding-right:60px}
.send{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border:0;border-radius:999px;background:#FFFFFF;color:#111;display:grid;place-items:center;cursor:pointer;transition:transform .45s var(--ease),opacity .2s}
.send:hover{transform:rotate(-45deg)}
.send[disabled]{opacity:.5;cursor:default;transform:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.note{font-size:13px;color:var(--muted);margin:2px 2px 0}
.fine{font-family:var(--mono);font-size:11px;color:var(--muted);margin:2px 2px 0}
.note a{color:var(--ink)}
.thanks{display:flex;flex-direction:column;gap:6px;padding:8px 0 4px}
.thanks strong{font-size:22px;font-weight:500;letter-spacing:-0.02em}
.thanks span{font-size:15px;color:var(--ink-2)}
[hidden]{display:none!important}

/* footer */
footer{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.16);padding-top:16px;font-family:var(--mono);font-size:12px;color:var(--muted);opacity:0;transition:opacity .8s ease}
.live{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--green);margin-right:9px;vertical-align:1px;animation:pulse 3s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,160,91,.35)}70%{box-shadow:0 0 0 6px rgba(34,160,91,0)}100%{box-shadow:0 0 0 0 rgba(34,160,91,0)}}

/* load-in states */
.in-tile .tile{opacity:1;transform:none}
.in-foot footer{opacity:1}

/* phone */
@media (max-width:600px){
  .page{padding:0 20px 20px}
  main{gap:18px;padding:40px 0 28px}
  .line{max-width:300px;font-size:16px}
  .tile{width:100%;margin-top:8px;border-radius:20px}
  .tile-head{padding:10px 10px 10px 20px;min-height:64px;gap:10px}
  .who{gap:2px}
  .email{font-size:18px}
  .ring-wrap{width:44px;height:44px}
  .ring{width:44px;height:44px}
  .tile.open .ring{width:34px;height:34px}
  .tile-inner{margin:0 12px;padding:16px 10px 18px}
  .row{grid-template-columns:1fr}
  .f{font-size:16px} /* stops iPhone zooming into fields */
  footer{padding-top:14px;font-size:11px}
}
@media (max-width:360px){.email{font-size:16px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}