:root { color-scheme: light; --paper: #fff; --ink: #121310; --muted: #72756b; --line: #e1e2da; --accent: #e8ff00; --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; }
[data-theme="dark"] { color-scheme: dark; --paper: #151613; --ink: #f3f4ed; --muted: #a4a89d; --line: #383b32; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 15px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { color: #121310; background: var(--accent); }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
a:hover { text-decoration: underline; }
button { font: inherit; }
a:focus-visible,button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
[hidden] { display: none !important; }
h1,p { margin: 0; }
svg { display: block; }
.wrap { width: min(1240px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 10px 18px; color: white; background: #121310; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { height: 100px; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand:hover { text-decoration: none; }
.wordmark { font: 800 27px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: -.05em; white-space: nowrap; }
.wordmark i { font-style: normal; }
[data-theme="dark"] .wordmark i { color: var(--accent); }
.hero { min-height: calc(100svh - 100px); padding-top: 24px; padding-bottom: 42px; display: flex; flex-direction: column; }
.hero-content { margin-block: auto; }
.headline { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 60px); }
h1 { font-size: clamp(112px, 14.5vw, 200px); font-weight: 900; letter-spacing: -.07em; line-height: 1.05; white-space: nowrap; -webkit-text-stroke: .025em currentColor; }
.title-part { display: block; white-space: nowrap; }
.period { display: inline-block; width: .55em; }
.letter-in { display: inline-block; transform-origin: 50% 100%; animation: letter-arrive .8s cubic-bezier(.19,1,.22,1) both; animation-delay: calc(var(--order) * 55ms); }
.motion-char { position: relative; display: inline-block; transform: translate3d(var(--move-x, 0px), var(--move-y, 0px), 0) rotate(var(--turn, 0deg)); will-change: transform; }
.cool-badge { position: relative; display: inline-block; isolation: isolate; color: #121310; }
.cool-badge::before { content: ""; position: absolute; z-index: -1; inset: .09em -.035em .07em; background: var(--accent); border-radius: .09em; transform: rotate(-4deg); animation: badge-arrive .85s cubic-bezier(.19,1,.22,1) .55s both; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .cool-badge:hover::before { transform: rotate(2deg) scale(1.04); } }
.cool-badge .letter-in { animation-name: cool-arrive; animation-duration: 1.05s; }
@keyframes letter-arrive { from { opacity: 0; transform: translateY(.42em) rotate(4deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes cool-arrive { 0% { opacity: 0; transform: translateY(-.65em) rotate(-12deg) scale(.85,1.12); } 60% { opacity: 1; transform: translateY(.035em) rotate(3deg) scale(1.08,.92); } 78% { transform: translateY(-.045em) rotate(-2deg) scale(.97,1.03); } 100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes badge-arrive { from { opacity: 0; transform: rotate(-10deg) scale(.65); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.spark-toggle { display: inline-block; flex: none; width: clamp(160px, 22vw, 320px); height: clamp(160px, 22vw, 320px); margin-right: clamp(0px, 2vw, 30px); padding: 0; border: 0; background: none; cursor: pointer; vertical-align: baseline; -webkit-tap-highlight-color: transparent; }
.spark { width: 100%; height: 100%; color: var(--accent); transform: rotate(8deg); overflow: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.spark-shape { transform-origin: 160px 160px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.spark-glasses { opacity: 0; transform: translateY(-8px); transition: opacity .2s,transform .25s; }
.spark-eye { transition: opacity .2s; }
.spark-toggle[aria-pressed="true"] .spark { transform: rotate(-8deg) translateY(-3px); }
.spark-toggle[aria-pressed="true"] .spark-shape { transform: rotate(45deg); }
.spark-toggle[aria-pressed="true"] .spark-eye { opacity: 0; }
.spark-toggle[aria-pressed="true"] .spark-glasses { opacity: 1; transform: translateY(0); }
.hero-description { margin-top: 26px; font-size: clamp(21px, 2.4vw, 33px); font-weight: 600; line-height: 1.5; letter-spacing: -.035em; }
.hero-actions { display: flex; align-items: center; gap: 36px; margin-top: 40px; }
.contact-button { display: inline-flex; justify-content: space-between; align-items: center; gap: clamp(35px, 5.9vw, 85px); padding-inline: clamp(22px, 3vw, 44px); min-height: clamp(50px, 5.5vw, 80px); background: var(--ink); color: var(--paper); border-radius: 99px; font-size: clamp(13px, 1.6vw, 22px); font-weight: 600; transition: transform .18s; }
.contact-button span { color: var(--accent); font-size: clamp(20px, 2.3vw, 32px); }
.contact-button:hover { transform: translateY(-2px); text-decoration: none; }
[data-theme="dark"] .contact-button { background: var(--accent); color: #121310; }
[data-theme="dark"] .contact-button span { color: #121310; }
.company { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-top: 42px; font-size: 15px; font-weight: 600; }
.footer { background: var(--accent); color: #121310; }
.footer-inner { min-height: 216px; display: flex; align-items: center; justify-content: space-between; gap: 45px; padding-block: 36px; }
.footer-wordmark { font: 900 clamp(80px, 11.1vw, 160px)/.95 "Arial Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.085em; white-space: nowrap; }
.footer-wordmark:hover { text-decoration: none; }
.footer-meta { border-left: 1px solid #121310; padding-left: 35px; flex: none; }
.footer-slogan { font-size: clamp(20px, 2.5vw, 34px); font-weight: 750; line-height: 1.4; letter-spacing: -.035em; }
.footer-meta > p.footer-links { margin-top: 14px; font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { text-decoration: underline; text-underline-offset: 3px; }
.footer-meta > p + p { margin-top: 12px; font-size: 10px; }
.icp-link { display: inline-block; margin-top: 8px; font-size: 10px; }
:lang(en) h1 { font: 900 clamp(100px, 10vw, 145px)/1.05 "Arial Black", "Helvetica Neue", Arial, sans-serif; -webkit-text-stroke: 0; letter-spacing: -.075em; }
:lang(en) .hero-description { max-width: 920px; }
:lang(en) .company { font-size: 12px; }
:lang(en) .footer-slogan { white-space: nowrap; }
.muted { color: var(--muted); }
.error-main { min-height: 65vh; padding-block: 100px; }
.error-main h1 { font: 100px/1.2 "Helvetica Neue", Arial, sans-serif; }
.error-main h2 { margin-top: 20px; font-size: 22px; }
.error-main p { color: var(--muted); margin-top: 16px; }
.error-main .text-link { display: inline-block; margin-top: 30px; }
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 72px); }
  .hero { min-height: calc(100svh - 100px); padding-top: 24px; }
  h1 { font-size: clamp(100px, 15vw, 150px); }
  .spark-toggle { width: clamp(140px, 21vw, 210px); height: clamp(140px, 21vw, 210px); }
  .footer-inner { gap: 25px; }
  .footer-wordmark { font-size: 12vw; }
  .footer-meta { padding-left: 22px; }
  .footer-slogan { font-size: 23px; }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 78px; gap: 15px; }
  .wordmark { font-size: 20px; }
  .hero { min-height: calc(100svh - 78px); padding-top: 25px; padding-bottom: 34px; }
  .headline { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; gap: 0; }
  .headline h1 { grid-column: 1 / -1; grid-row: 1; }
  h1 { white-space: normal; word-break: normal; font-size: clamp(56px, 17vw, 84px); line-height: 1.08; -webkit-text-stroke: .02em currentColor; }
  .spark-toggle { grid-column: 2; grid-row: 2; justify-self: end; width: clamp(118px, 37vw, 164px); height: clamp(118px, 37vw, 164px); margin: -12px clamp(0px, 3vw, 12px) 0 0; }
  .hero-description { font-size: 18px; margin-top: 12px; }
  .hero-actions { gap: 15px; flex-wrap: wrap; margin-top: 28px; }
  .contact-button { min-height: 50px; padding-inline: 21px; font-size: 12px; gap: 30px; }
  .contact-button span { font-size: 20px; }
  .company { padding-top: 40px; font-size: 12px; }
  .footer-inner { min-height: 0; flex-direction: column; align-items: start; gap: 23px; padding-block: 35px; }
  .footer-wordmark { font-size: 15.1vw; }
  .footer-meta { border-left: 0; border-top: 1px solid #121310; padding: 17px 0 0; width: 100%; }
  .footer-slogan { font-size: 21px; }
  .footer-meta > p + p { font-size: 9px; margin-top: 9px; }
  :lang(en) h1 { font-size: clamp(43px, 11vw, 70px); white-space: normal; line-height: 1.08; }
  :lang(en) .company { font-size: 10px; overflow-wrap: anywhere; }
}
@media (max-width: 370px) {
  .site-header { gap: 8px; }
  .wordmark { font-size: 18px; }
  h1 { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}