:root{
  --paper:#ffffff;
  --paper-2:#eef3f8;
  --ink:#1b2233;
  --ink-2:#4a5468;
  --line:#d5dce6;
  --cobalt:#2e5bff;
  --marigold:#f2b441;
  --radius:22px;
  --measure:62ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141824;--paper-2:#1c2231;--ink:#f1f3f7;--ink-2:#aab2c2;--line:#2c3446;--cobalt:#6b8cff;--marigold:#f5c35c;
  }
}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.55;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
a{color:var(--cobalt);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:6px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.mark{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.mark .tile{width:30px;height:30px;border-radius:9px;background:var(--cobalt);position:relative;flex:none}
.mark .tile::after{content:"";position:absolute;inset:7px 7px 7px 13px;border-radius:5px 0 0 5px;background:var(--marigold)}
nav a{color:var(--ink);text-decoration:none;margin-left:22px;font-weight:500}
nav a:hover{text-decoration:underline}
.hero{padding:56px 0 64px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:-.035em;font-weight:800;margin:0 0 20px}
.hero p{font-size:1.25rem;color:var(--ink-2);max-width:34ch;margin:0}
.icons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:320px;margin-left:auto}
.icons span{aspect-ratio:1;border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line)}
.icons span:nth-child(1){background:var(--cobalt);border-color:transparent}
.icons span:nth-child(5){background:var(--marigold);border-color:transparent;transform:rotate(-8deg) scale(1.06)}
.icons span:nth-child(9){background:var(--ink);border-color:transparent}
section{padding:44px 0;border-top:1px solid var(--line)}
h2{font-size:1.55rem;letter-spacing:-.02em;margin:0 0 14px;font-weight:700}
p{max-width:var(--measure)}
.empty{background:var(--paper-2);border-radius:var(--radius);padding:28px;max-width:var(--measure)}
.empty strong{display:block;margin-bottom:6px}
dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 28px;margin:0;max-width:var(--measure)}
dt{color:var(--ink-2)}
dd{margin:0}
footer{padding:36px 0 48px;border-top:1px solid var(--line);color:var(--ink-2);font-size:.95rem;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer a{color:var(--ink-2)}
.doc h1{font-size:clamp(2rem,5vw,3rem);margin:32px 0 6px}
.doc .updated{color:var(--ink-2);margin-bottom:36px}
.doc h2{margin-top:36px}
.doc ul{max-width:var(--measure);padding-left:22px}
.doc li{margin-bottom:6px}
.contact{display:grid;gap:18px;max-width:var(--measure);margin:8px 0 12px}
.contact label{display:grid;gap:6px;font-weight:500}
.contact .optional{color:var(--ink-2);font-weight:400}
.contact input,.contact textarea{font:inherit;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
.contact textarea{resize:vertical;min-height:9rem}
.contact input:focus-visible,.contact textarea:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.contact button{justify-self:start;font:inherit;font-weight:700;color:#fff;background:var(--cobalt);border:0;border-radius:999px;padding:12px 26px;cursor:pointer}
.contact button:hover{filter:brightness(1.08)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:720px){
  .hero{grid-template-columns:1fr;padding-top:24px}
  .icons{margin:8px 0 0;max-width:260px}
  nav a{margin-left:16px}
  dl{grid-template-columns:1fr;gap:2px 0}
  dt{margin-top:10px}
}
@media (prefers-reduced-motion:no-preference){
  .icons span:nth-child(5){transition:transform .35s ease}
  .icons:hover span:nth-child(5){transform:rotate(0) scale(1.06)}
}