@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:600 800;
  font-display:swap; src:url('/fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/fonts/ibm-plex-mono-latin.woff2') format('woff2');
}
@layer base, art, layout, components, responsive;
@layer base {
  :root { color-scheme: dark; --bg:#090c14; --text:#f5f3ef; --muted:#aaaabd; --red:#ff2929; --mono:'IBM Plex Mono','Cascadia Mono','SFMono-Regular',Consolas,monospace; font-family:'Archivo',Arial,Helvetica,sans-serif; font-size-adjust:from-font; color:var(--text); background:var(--bg); }
  body { margin:0; min-inline-size:280px; min-block-size:100dvh; position:relative; isolation:isolate; }
  button,a { -webkit-tap-highlight-color:transparent; }
  button { font:inherit; color:inherit; }
  button:not(:disabled),a { cursor:pointer; }
  button:focus-visible,a:focus-visible { outline:3px solid #fff; outline-offset:7px; }
  [hidden] { display:none !important; }
  ::selection { background:#993b52; color:white; }
}
@layer art {
  .art { position:absolute; inset:0; z-index:-1; overflow:clip; pointer-events:none; background:radial-gradient(ellipse at 45% 35%,#14162255,transparent 55%),repeating-linear-gradient(137deg,transparent 0 19px,#8790ab04 20px,transparent 22px 39px); }
  .brush { position:absolute; inline-size:650px; block-size:240px; transform:rotate(-40deg); opacity:.95; filter:drop-shadow(0 0 25px #c80a0912); }
  .brush-top { inset-block-start:-48px; inset-inline-end:-260px; }
  .brush-bottom { inset-block-end:55px; inset-inline-start:-290px; }
  .brush::before,.brush::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 4px,#080b1470 5px 6px,transparent 7px 13px),linear-gradient(90deg,transparent,#fa2118 28%,#e91b12 74%,transparent); clip-path:polygon(0 45%,24% 26%,10% 24%,34% 16%,28% 12%,55% 8%,82% 0,74% 16%,100% 10%,90% 26%,100% 33%,93% 38%,100% 50%,85% 61%,95% 62%,72% 73%,82% 79%,58% 86%,23% 100%,36% 83%,8% 88%,20% 70%,0 76%,18% 56%); }
  .brush::after { inset:18px -35px -25px 25px; opacity:.5; transform:scaleY(.55) translateY(70px); }
  .brush i { position:absolute; inset:22% -10%; block-size:4px; background:linear-gradient(90deg,transparent,#e72820 30%,#b31713 70%,transparent); transform:rotate(-2deg); }
  .brush i:nth-child(2) { inset-block-start:8%; inline-size:70%; inset-inline-start:20%; }
  .brush i:nth-child(3) { inset-block-start:78%; inline-size:75%; }
  .brush i:nth-child(4) { inset-block-start:95%; inline-size:60%; inset-inline-start:15%; }
  .brush i:nth-child(5) { inset-block-start:-15%; background:#32374745; block-size:18px; transform:rotate(-1deg); }
  .grid { position:absolute; inline-size:210px; block-size:230px; background:linear-gradient(#73778e30 1px,transparent 1px),linear-gradient(90deg,#73778e30 1px,transparent 1px); background-size:30px 30px; mask-image:radial-gradient(ellipse,#000,transparent 72%); }
  .grid-top { inset-inline-end:-35px; inset-block-start:25%; }
  .grid-bottom { inset-inline-end:30px; inset-block-end:15px; }
  .dots { position:absolute; inline-size:95px; block-size:70px; background-image:radial-gradient(#85879990 1.2px,transparent 1.7px); background-size:14px 14px; }
  .dots-top { inset-inline-start:35px; inset-block-start:45px; }
  .dots-bottom { inset-inline-start:15px; inset-block-end:155px; opacity:.6; }
  .frame { position:absolute; inline-size:110px; block-size:33%; opacity:.48; }
  .frame-top { inset:18px auto auto 16px; border-block-start:1px solid #a2a4b5; border-inline-start:1px solid #a2a4b5; mask-image:linear-gradient(#000 60%,transparent); }
  .frame-bottom { inset:auto 16px 22px auto; border-block-end:1px solid #a2a4b5; border-inline-end:1px solid #a2a4b5; inline-size:40%; mask-image:linear-gradient(0deg,#000 65%,transparent); }
  .cross { position:absolute; inline-size:24px; block-size:24px; background:linear-gradient(#b1afba88,#b1afba88) center/1px 100% no-repeat,linear-gradient(#b1afba88,#b1afba88) center/100% 1px no-repeat; }
  .cross-top { inset-inline-end:40px; inset-block-start:24%; }
  .cross-bottom { inset-inline-end:55px; inset-block-end:75px; }
}
@layer layout {
  .page { inline-size:min(620px,calc(100% - 48px)); margin-inline:auto; padding-block:145px 180px; min-block-size:calc(100dvh - 325px); }
  .hero { margin-inline:8px; margin-block-end:52px; }
  h1 { font-family:Consolas,"IBM Plex Mono",monospace; font-weight:700; font-size:clamp(3.8rem,1.8rem + 8vw,6.25rem); letter-spacing:-.045em; line-height:1.05; margin:0; display:flex; align-items:center; gap:.22em; font-weight:700; }
  .prompt { color:var(--red); font-family:var(--mono); font-size:.85em; font-weight:800; letter-spacing:-.08em; }
  .subtitle { font:clamp(1.4rem,.85rem + 2.3vw,2rem)/1.4 var(--mono); letter-spacing:.015em; color:var(--muted); margin:15px 0 23px; }
  .hero-rule { display:flex; gap:5px; block-size:11px; }
  .hero-rule span { inline-size:112px; background:var(--red); clip-path:polygon(0 0,100% 0,94% 100%,0 100%); margin-inline-end:7px; }
  .hero-rule i { inline-size:10px; background:#65677b; transform:skew(-32deg); }
  .contacts { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:28px; }
}
@layer components {
  .contact { --accent:#5865f2; --wash:#5865f216; --cut:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); position:relative; display:grid; grid-template-columns:86px minmax(0,1fr) 30px; align-items:center; gap:22px; inline-size:100%; box-sizing:border-box; min-block-size:138px; padding:23px 30px; border:0; background:none; text-align:start; text-decoration:none; color:var(--text); isolation:isolate; }
  .bluesky { --accent:#00a7ff; --wash:#00a7ff12; }
  .card-surface { position:absolute; inset:0; z-index:-1; background:var(--accent); clip-path:var(--cut); border-radius:22px; }
  .card-surface::before { content:''; position:absolute; inset:1.5px; clip-path:var(--cut); border-radius:20.5px; background:linear-gradient(145deg,var(--wash),transparent 40%),linear-gradient(0deg,var(--wash),transparent 20%),#0c101c; }
  .card-surface::after { content:''; position:absolute; inset:2px; clip-path:var(--cut); border-radius:20px; background:linear-gradient(110deg,#ffffff18,transparent 18%,transparent 80%,var(--wash)); }
  .service-icon { display:flex; justify-content:center; align-items:center; padding-inline-end:22px; border-inline-end:1px solid var(--accent); color:var(--accent); min-block-size:65px; }
  .service-icon svg { display:block; inline-size:64px; block-size:64px; }
  .contact-text { display:flex; flex-direction:column; gap:6px; min-inline-size:0; }
  .contact-text strong { font-size:1.8rem; font-weight:700; letter-spacing:-.02em; }
  .handle { font:1.45rem/1.3 var(--mono); color:var(--muted); overflow-wrap:anywhere; }
  .action-icon { inline-size:28px; block-size:28px; color:#bbb9cf; }
  .card-trim { position:absolute; display:flex; gap:4px; block-size:6px; inset:auto 25px 7px auto; pointer-events:none; }
  .card-trim i { display:block; inline-size:6px; block-size:6px; background:var(--accent); transform:skew(-43deg); }
  .contact:active { transform:translateY(1px); }
  @media (hover:hover) { .contact:hover .card-surface::after { background:linear-gradient(110deg,#ffffff20,transparent 60%,var(--wash)); } .contact:hover .action-icon { color:var(--text); } }
  @media (prefers-reduced-motion:no-preference) { .contact { transition:transform 160ms ease; } .action-icon { transition:color 160ms ease; } .contact:hover { transform:translateY(-2px); } }
}
@layer responsive {
  @media (min-width:800px) {
    .page { padding-block-start:145px; }
    .brush-top { inline-size:900px; block-size:300px; inset-inline-end:-150px; inset-block-start:-40px; }
    .brush-bottom { inline-size:850px; inset-inline-start:-170px; inset-block-end:10px; }
    .frame-top { inset-inline-start:30px; inline-size:180px; }
    .frame-bottom { inset-inline-end:30px; }
    .dots-top { inset-inline-start:65px; inset-block-start:70px; }
    .grid-top { inline-size:330px; block-size:350px; }
    .grid-bottom { inline-size:330px; block-size:320px; }
  }
  @media (max-width:480px) {
    .page { padding-block:145px 130px; min-block-size:calc(100dvh - 275px); }
    .hero { margin-inline:5px; margin-block-end:40px; }
    .contact { grid-template-columns:65px minmax(0,1fr) 24px; gap:15px; padding:20px 20px; min-block-size:112px; }
    .service-icon { padding-inline-end:15px; min-block-size:53px; }
    .service-icon svg { inline-size:48px; block-size:48px; }
    .contact-text strong { font-size:1.5rem; }
    .handle { font-size:1.2rem; }
    .action-icon { inline-size:24px; block-size:24px; }
    .contacts { gap:23px; }
    .dots-top { inline-size:70px; block-size:45px; inset-inline-start:28px; inset-block-start:37px; background-size:11px 11px; }
  }
  @media (max-width:350px) { .page { inline-size:calc(100% - 32px); } .contact { grid-template-columns:52px minmax(0,1fr) 20px; gap:10px; padding-inline:16px; } .service-icon { padding-inline-end:10px; } .service-icon svg { inline-size:38px; } .contact-text strong { font-size:1.3rem; } .handle { font-size:1.05rem; } }
  @media (forced-colors:active) { .art,.card-surface,.card-trim { display:none; } .contact { border:2px solid ButtonText; } }
}

/* Keep the rough diagonal strokes at the edges of the composition. */
@layer art {
  .brush { inline-size:510px; block-size:155px; }
  .brush-top { inset-block-start:-45px; inset-inline-end:-220px; }
  .brush-bottom { inset-block-end:0; inset-inline-start:-225px; }
  .brush::before { background:linear-gradient(90deg,transparent,#ed251b 35%,#f12b20 64%,#b81915 85%,transparent); opacity:.7; transform:scaleY(.55); }
  .brush::after { background:repeating-linear-gradient(2deg,transparent 0 3px,#090c14 4px 5px,transparent 6px 11px); opacity:.9; transform:none; inset:0; }
  .brush i { inset:auto; block-size:var(--thickness); inline-size:var(--length); inset-inline-start:var(--start); inset-block-start:var(--position); transform:rotate(var(--angle)); background:linear-gradient(90deg,transparent,#f32d20 18%,#e21e14 70%,transparent); opacity:var(--opacity); clip-path:polygon(0 80%,10% 15%,31% 35%,45% 0,70% 22%,100% 5%,91% 60%,68% 70%,59% 100%,37% 75%,15% 100%); }
  .brush i:nth-child(n) { inset-block-start:var(--position); inset-inline-start:var(--start); inline-size:var(--length); block-size:var(--thickness); transform:rotate(var(--angle)); background:linear-gradient(90deg,transparent,#f32d20 18%,#e21e14 70%,transparent); }
}
@layer responsive {
  @media (min-width:800px) {
    .brush-top { inline-size:700px; block-size:230px; inset-inline-end:-160px; inset-block-start:-50px; }
    .brush-bottom { inline-size:650px; block-size:200px; inset-inline-start:-200px; inset-block-end:0; }
  }
}
@layer art {
.brush i:nth-child(1) { --thickness:4px; --length:92%; --start:14%; --position:66%; --angle:-3deg; --opacity:0.66; }
.brush i:nth-child(2) { --thickness:7px; --length:71%; --start:28%; --position:16%; --angle:3deg; --opacity:0.47; }
.brush i:nth-child(3) { --thickness:3px; --length:97%; --start:22%; --position:6%; --angle:3deg; --opacity:0.87; }
.brush i:nth-child(4) { --thickness:4px; --length:78%; --start:-5%; --position:71%; --angle:-3deg; --opacity:0.60; }
.brush i:nth-child(5) { --thickness:2px; --length:97%; --start:14%; --position:55%; --angle:-2deg; --opacity:0.59; }
.brush i:nth-child(6) { --thickness:2px; --length:87%; --start:28%; --position:58%; --angle:-3deg; --opacity:0.83; }
.brush i:nth-child(7) { --thickness:9px; --length:85%; --start:10%; --position:57%; --angle:3deg; --opacity:0.58; }
.brush i:nth-child(8) { --thickness:8px; --length:99%; --start:14%; --position:88%; --angle:0deg; --opacity:0.84; }
.brush i:nth-child(9) { --thickness:5px; --length:66%; --start:1%; --position:53%; --angle:-3deg; --opacity:0.57; }
.brush i:nth-child(10) { --thickness:2px; --length:74%; --start:23%; --position:16%; --angle:1deg; --opacity:0.39; }
.brush i:nth-child(11) { --thickness:9px; --length:50%; --start:5%; --position:53%; --angle:-3deg; --opacity:0.46; }
.brush i:nth-child(12) { --thickness:4px; --length:74%; --start:27%; --position:93%; --angle:-3deg; --opacity:0.47; }
.brush i:nth-child(13) { --thickness:5px; --length:85%; --start:18%; --position:60%; --angle:3deg; --opacity:0.38; }
.brush i:nth-child(14) { --thickness:8px; --length:51%; --start:11%; --position:71%; --angle:-3deg; --opacity:0.81; }
.brush i:nth-child(15) { --thickness:3px; --length:73%; --start:19%; --position:56%; --angle:1deg; --opacity:0.64; }
.brush i:nth-child(16) { --thickness:9px; --length:88%; --start:-2%; --position:38%; --angle:1deg; --opacity:0.84; }
.brush i:nth-child(17) { --thickness:2px; --length:62%; --start:26%; --position:37%; --angle:1deg; --opacity:0.92; }
.brush i:nth-child(18) { --thickness:9px; --length:73%; --start:4%; --position:93%; --angle:-3deg; --opacity:0.54; }
.brush i:nth-child(19) { --thickness:7px; --length:65%; --start:17%; --position:72%; --angle:-2deg; --opacity:0.65; }
.brush i:nth-child(20) { --thickness:6px; --length:57%; --start:-4%; --position:52%; --angle:-1deg; --opacity:0.68; }
.brush i:nth-child(21) { --thickness:5px; --length:82%; --start:28%; --position:44%; --angle:3deg; --opacity:0.54; }
.brush i:nth-child(22) { --thickness:2px; --length:47%; --start:-1%; --position:81%; --angle:0deg; --opacity:0.69; }
.brush i:nth-child(23) { --thickness:3px; --length:72%; --start:10%; --position:49%; --angle:2deg; --opacity:0.68; }
.brush i:nth-child(24) { --thickness:5px; --length:57%; --start:8%; --position:40%; --angle:3deg; --opacity:0.47; }
.brush i:nth-child(25) { --thickness:8px; --length:58%; --start:12%; --position:59%; --angle:2deg; --opacity:0.58; }
.brush i:nth-child(26) { --thickness:8px; --length:75%; --start:29%; --position:36%; --angle:3deg; --opacity:0.94; }
.brush i:nth-child(27) { --thickness:2px; --length:70%; --start:13%; --position:91%; --angle:3deg; --opacity:0.38; }
.brush i:nth-child(28) { --thickness:3px; --length:91%; --start:24%; --position:11%; --angle:1deg; --opacity:0.81; }
}