@font-face { font-family:"HN Roman"; src:url("assets/fonts/helvetica-neue-roman.woff2") format("woff2"), url("assets/fonts/helvetica-neue-roman.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"HN Black Extended"; src:url("assets/fonts/helvetica-black-extended.woff2") format("woff2"), url("assets/fonts/helvetica-black-extended.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Editorial Today"; src:url("assets/fonts/editorial-today.woff2") format("woff2"), url("assets/fonts/editorial-today.ttf") format("truetype"); font-display:swap; }

:root {
  --paper:#fcfaee;
  --acid:#ffcf06;
  --pad:clamp(22px,4vw,68px);
  --star-x:50vw;
  --star-y:50vh;
  --sans:"HN Roman","Helvetica Neue",Arial,sans-serif;
  --display:"HN Black Extended","Arial Black",sans-serif;
  --serif:"Editorial Today","Times New Roman",serif;
}

* { box-sizing:border-box; }
html { min-height:100%; scroll-behavior:smooth; background:#050506; }
body { min-height:100%; margin:0; overflow-x:hidden; color:var(--paper); background:#08090b; font-family:var(--sans); }
body::before { display:none; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; filter:none !important; }
::selection { color:#050506; background:var(--acid); }

.ai-page__star-wipe { position:fixed; z-index:100; left:var(--star-x); top:var(--star-y); width:84px; aspect-ratio:1; visibility:hidden; pointer-events:none; opacity:0; background:#ffcf06; -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0C56 31 69 44 100 50C69 56 56 69 50 100C44 69 31 56 0 50C31 44 44 31 50 0Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0C56 31 69 44 100 50C69 56 56 69 50 100C44 69 31 56 0 50C31 44 44 31 50 0Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 0 25px rgba(255,207,6,.48)); transform:translate(-50%,-50%) rotate(-12deg) scale(.06); will-change:transform,opacity; }
.is-entering .ai-page__star-wipe { visibility:visible; animation:star-wipe 1.5s both cubic-bezier(.72,0,.45,1); }
@keyframes star-wipe { 0% { opacity:1; transform:translate(-50%,-50%) rotate(-12deg) scale(.06); } 74% { opacity:1; transform:translate(-50%,-50%) rotate(8deg) scale(82); } 88% { opacity:1; transform:translate(-50%,-50%) rotate(8deg) scale(82); } 100% { visibility:hidden; opacity:0; transform:translate(-50%,-50%) rotate(8deg) scale(82); } }

.ai-page { position:relative; z-index:1; min-height:100svh; padding:28px var(--pad) 45px; }
.is-entering .ai-page > * { animation:page-content-in .72s 1.02s both cubic-bezier(.16,1,.3,1); }
@keyframes page-content-in { from { opacity:0; transform:translate3d(0,28px,0); } }
.ai-page__top { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.22); font-size:8px; font-weight:800; letter-spacing:.12em; }
.ai-page__brand { transition:color .25s ease; }.ai-page__brand:hover { color:var(--acid); }
.ai-page__back { font-size:8px; font-weight:900; letter-spacing:.1em; }
.ai-page__back i { display:inline-block; margin-left:8px; font-size:16px; font-style:normal; transition:transform .35s; }.ai-page__back:hover i { transform:rotate(90deg); }

.ai-page__head { display:grid; grid-template-columns:.45fr 1.4fr .55fr; gap:4vw; align-items:end; padding:clamp(65px,10vh,125px) 0 clamp(70px,10vh,120px); }
.ai-page__head > span { align-self:start; color:#85818e; font-size:8px; font-weight:800; letter-spacing:.12em; }
.ai-page__head h1 { margin:0; font-family:var(--display); font-size:clamp(3rem,5.35vw,6.35rem); font-weight:400; line-height:.86; letter-spacing:-.055em; }
.ai-page__head h1 em { display:block; margin-top:.06em; font-family:var(--serif); font-size:.93em; font-weight:400; line-height:.94; letter-spacing:-.012em; }
.ai-page__head p { margin:0; color:#aaa5b4; font-family:var(--serif); font-size:clamp(12px,1.1vw,17px); font-style:italic; line-height:1.3; }

.ai-tools__group { display:grid; grid-template-columns:.45fr 1.55fr; gap:4vw; padding:34px 0 50px; border-top:1px solid rgba(255,255,255,.2); content-visibility:auto; contain-intrinsic-size:300px; }
.ai-tools__group h2 { margin:0; color:#777381; font-size:8px; letter-spacing:.13em; }
.ai-tools__grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.ai-tool { min-width:0; padding:18px 8px 13px; contain:layout paint style; border:1px solid rgba(255,255,255,.16); text-align:center; background:transparent; transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s; }
.ai-tool i { position:relative; display:grid; width:clamp(48px,5vw,72px); aspect-ratio:1; margin:0 auto 14px; place-items:center; font-style:normal; }
.ai-tool i::before { display:none; }
.ai-tool i img { width:72%; height:72%; object-fit:contain; filter:drop-shadow(0 5px 12px rgba(0,0,0,.45)); transition:transform .45s cubic-bezier(.16,1,.3,1),filter .35s; }
.ai-tool span { display:block; overflow:hidden; font-size:9px; font-weight:800; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.ai-tool:hover { z-index:2; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.045); transform:translateY(-5px); }
.ai-tool:hover i img { transform:scale(1.08); filter:drop-shadow(0 7px 18px rgba(0,0,0,.55)); }
.ai-page__foot { display:flex; justify-content:space-between; margin-top:70px; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); color:#777381; font-size:8px; font-weight:800; letter-spacing:.1em; }

@media (max-width:800px) {
  .ai-page { padding:20px 20px 35px; }
  .ai-page__top { line-height:1.4; }.ai-page__brand { max-width:48%; }.ai-page__back { max-width:48%; text-align:right; }
  .ai-page__head { display:block; padding:70px 0 65px; }.ai-page__head > span { display:block; margin-bottom:25px; }.ai-page__head h1 { font-size:clamp(2.55rem,9.2vw,4rem); }.ai-page__head h1 em { letter-spacing:-.006em; line-height:1; }.ai-page__head p { max-width:280px; margin-top:30px; }
  .ai-tools__group { display:block; contain-intrinsic-size:600px; }.ai-tools__group h2 { margin-bottom:18px; }.ai-tools__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.ai-tool span { font-size:8px; }
  .ai-page__foot { gap:20px; line-height:1.4; }.ai-page__foot span:last-child { text-align:right; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .ai-page__star-wipe { display:none; }
  .is-entering .ai-page > * { animation:none; }
  *,*::before,*::after { transition-duration:.01ms !important; }
}