/* Selected utility declarations used by Kie.ai. Shell controls follow AIHubMix focus and hover styles. */
.rounded-xl{border-radius:.75rem}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.25s}
body{-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;background:#fcfcfe}
.brand,.auth{display:inline-flex;align-items:center;gap:8px}.auth{gap:14px;white-space:nowrap}.mark{width:36px;height:36px;object-fit:contain}
.links{gap:16px}.hero{background:radial-gradient(ellipse at 50% 45%,#fff 20%,#f5f8ff 80%);padding-top:70px}
.hero h1{font-weight:760;font-size:clamp(35px,5.6vw,78px);margin:6px 0 12px;letter-spacing:-.065em}
.hero p.sub{font-size:clamp(20px,2.4vw,31px);color:#203255;letter-spacing:.035em;margin:0}
.hero p.slogan{font-size:17px;margin:8px 0 23px;color:#677891}
.hero canvas{animation:map-in 1.2s ease both}.hero h1,.hero p,.actions{animation:rise .7s ease both}.hero p{animation-delay:.09s}.actions{animation-delay:.15s}
@keyframes rise{from{transform:translateY(9px);opacity:0}to{transform:none;opacity:1}}@keyframes map-in{from{opacity:0}to{opacity:.85}}
.card,.story,.tile{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover,.story:hover,.tile:hover{box-shadow:0 9px 25px #25407a13;transform:translateY(-3px);border-color:#8faee8}
.card h3{letter-spacing:-.035em;margin:14px 0 2px}.provider{width:32px;height:32px}.quote{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px}.deal{font-size:11px;color:#077453;background:#e7f6ef;padding:2px 6px;border-radius:6px;white-space:nowrap}.card .price{font-size:25px;font-variant-numeric:tabular-nums}
.pressgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.pressgrid .cover{aspect-ratio:1.95;height:auto;padding:0}.cover video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .4s}.story:hover video{transform:scale(1.035)}.photo1{background:url(storyboard.jpg) center/cover}.photo2{background:url(assets/edit.jpg) center/cover}.typography{background:repeating-linear-gradient(100deg,#213b82 0 1px,transparent 1px 26px),linear-gradient(125deg,#223a70,#456dcf)}.typography strong{padding:18px;font:italic 35px/1.1 Georgia,serif}.play{left:auto;top:auto;right:14px;bottom:14px;background:#1222398c}.copy h3{font-size:18px;margin:5px 0 14px}.copy span{font-size:13px;color:#315bb9}.rankbox{background:white;border:1px solid #dfe5ee;border-radius:14px;padding:20px}.tools{margin-bottom:10px}.tools>*{background:#f3f5f8;border:1px solid #e3e7ed;border-radius:5px;padding:3px 10px}.rankbody{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}.plot{width:100%;aspect-ratio:800/465;background-image:url(assets/ranking.png);background-size:157.625% auto;background-position:4.7% 95.4%}.rankbody ol{max-height:370px;overflow:auto;padding:0;border:1px solid #e4e8ee;border-radius:8px}.rankbody li{display:flex;gap:10px;align-items:center;padding:9px 12px;font-size:12px}.rankbody li:hover{background:#f3f6fb}.rankbody li span{margin-left:auto}.rankbody li b{font-weight:550}.copyright{margin-top:25px;border-top:1px solid #dbe1e9;padding-top:18px;font-size:12px;color:#637086}.foot a:hover{text-decoration:underline}dialog{width:min(670px,94vw)}dialog video,.expanded img{width:100%;display:block;margin-top:12px;border-radius:8px}a:focus-visible,button:focus-visible{outline:2px solid #4d62cb;outline-offset:3px}
@media(max-width:1020px){.links{display:none}.menu{display:block}.links.open{display:grid;grid-template-columns:1fr 1fr;position:absolute;top:100%;left:0;right:0;background:white;padding:20px}.auth{margin-left:auto}}
@media(max-width:680px){.pressgrid,.rankbody{grid-template-columns:1fr}.rankbody ol{max-height:200px}.hero{padding-top:44px}.auth{gap:9px;font-size:13px}.auth a:first-child{display:none}.quote{display:block}.deal{display:inline-block;margin-bottom:4px}.card small{font-size:11px}.foot{grid-template-columns:1fr 1fr}.brand{font-size:21px}.pressgrid .cover{aspect-ratio:2.4}.hero h1{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Feature cards adapted from the reference layout. */
.hero{padding:78px 0 30px;background:#fcfcfe}
.hero h1{font-size:clamp(34px,5vw,68px);letter-spacing:-.045em;color:#10141d}
.hero h1 em{color:#111827}
.hero p.sub{font-size:26px;letter-spacing:0;color:#3c4555;margin-top:18px}
.hero p.slogan{font-size:17px;color:#6a7382;margin:8px 0 29px}
.hero canvas{opacity:.55;mask-image:radial-gradient(ellipse at 50% 32%,transparent 12%,#000 58%);animation:none}
.hero .kPlwMC{width:100%;margin:62px auto 0;gap:24px}
.hero .eployT{min-height:246px;box-shadow:none;background:white}
.hero .ds-heading{font-size:16px;font-weight:650;letter-spacing:0;line-height:24px}
.hero .mark{object-fit:initial}
.hero .hBdIjH .mark{width:16px;height:auto}
.hero .hBdIjH{white-space:pre;font-size:11px}
.hero .elTjnX{font-size:12px}
.hero .fXrlis .mark{width:18px;height:18px}
.hero .dRMJVY{min-height:152px}
nav .links{gap:2px}
nav .links>a,nav .links>button{padding:8px 11px;border-radius:8px;transition:background .16s,color .16s,box-shadow .16s;white-space:nowrap}
nav .links>a:hover,nav .links>button:hover,nav .links>a:focus-visible,nav .links>button:focus-visible{background:#eff2f7;color:#111827;box-shadow:inset 0 0 0 1px #e7eaf0}
nav .links>a:first-child{background:#f3f5f9}
nav .auth>a:not(.blue){padding:7px 9px;border-radius:8px;transition:background .16s}
nav .auth>a:not(.blue):hover{background:#eff2f7}
nav .wrap{min-height:72px}
@media(min-width:900px) and (max-width:1199px){.hero .kPlwMC{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:12px}.hero .eployT{padding:20px 10px}}
@media(max-width:899px){.hero .kPlwMC{max-width:480px;margin-top:35px}.hero{padding-top:45px}.hero p.sub{font-size:21px}}
@media(prefers-reduced-motion:reduce){.hero *{animation:none!important;transition:none!important}}
/* Homepage headline hierarchy and slogan interaction. */
.hero .hero-title,
.hero .hero-title em {
  color: #16366b;
}
.hero .hero-title {
  font-size: clamp(32px, 5vw, 68px);
  line-height: 1.2;
}
.hero p.sub {
  font-size: clamp(20px, 2.65vw, 36px);
  font-weight: 500;
  color: #344a70;
  margin-top: 20px;
}
.hero p.slogan {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  margin: 17px 0 31px;
  font-size: clamp(21px, 2.35vw, 32px);
  line-height: 1.6;
  color: #385075;
  font-weight: 550;
  animation: none;
}
.slogan-colors {
  display: inline-flex;
  gap: 3px;
  font-family: "Hiragino Maru Gothic ProN", "PingFang SC", sans-serif;
  font-size: 1.2em;
  font-weight: 800;
}
.slogan-colors > span {
  display: inline-block;
  position: relative;
  color: var(--letter-color);
  cursor: default;
}
.slogan-colors > span::after {
  position: absolute;
  content: "";
  height: 5px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 50%;
  background: var(--letter-color);
  opacity: .13;
}
.hero .hero-title em {
  display: inline-block;
  transition: text-shadow .25s ease, color .25s ease;
}
.hero .hero-title:hover em {
  color: #2155a4;
  text-shadow: 0 7px 25px #3b82f62b;
}
.hero p.sub {
  transition: color .25s ease;
}
.hero p.sub:hover {color: #2359a7}
@media(max-width:600px) {
  .hero p.slogan {gap:5px; font-size:21px}
  .hero p.sub {font-size:21px}
  .hero .hero-title {font-size:clamp(29px,7.5vw,40px)}
}