:root {
  color-scheme: dark;
  --color-bg: #0a0a0a;
  --color-text: #ffffff;
  --color-muted: #a3a3a3;
  --color-accent: #c9fe6e;
  --color-accent-hover: #ddffa4;
  --color-blue: var(--color-accent);
  --color-blue-hover: var(--color-accent-hover);
  --color-orange: var(--color-accent);
  --color-orange-hover: var(--color-accent-hover);
  --color-surface: #111111;
  --color-contact: #0a0a0a;
  --color-button-text: #0a0a0a;
  --color-border: #303030;
  --font-sans: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-label: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Portfolio UD Shin Go", var(--font-sans);
  --font-year: "Portfolio Wujie Black", var(--font-sans);
  --text-logo: 28px;
  --text-hero: clamp(48px, 4vw, 72px);
  --text-display: clamp(64px, 6vw, 112px);
  --text-contact: clamp(40px, 4.2vw, 72px);
  --text-card: 32px;
  --text-body: 18px;
  --text-small: 14px;
  --text-button: 16px;
  --text-lead: clamp(28px, 2.5vw, 40px);
  --text-gallery: 22px;
  --text-contact-value: 22px;
  --text-featured-name: 20px;
  --text-tag: 18px;
  --text-description: 16px;
  --works-columns: 2;
  --poster-columns: 3;
  --text-detail-title: clamp(48px, 7vw, 104px);
  --line-title: 1.14;
  --line-body: 1.7;
  --content-max: 1920px;
  --gutter: clamp(24px, 1.3vw, 32px);
  --header-height: 88px;
  --anchor-offset: 96px;
  --section-gap: 160px;
  --heading-gap: 64px;
  --card-gap: 32px;
  --card-row-gap: 80px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --panel-padding: 64px;
  --photo-width: 420px;
  --aspect-featured: 16 / 9;
  --aspect-card: 16 / 10;
  --aspect-portrait: 3 / 4;
  --aspect-poster: 1405 / 1984;
  --radius-media: 24px;
  --radius-pill: 999px;
  --button-height: 48px;
  --detail-max: 1280px;
  --detail-image-max: 900px;
  --motion-fast: 200ms;
  --motion-enter: 300ms;
  --motion-page: 400ms;
  --motion-stagger: 80ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --color-collection-panel: #f5f5f5;
  --color-collection-ink: #0a0a0a;
  --color-panel-hover: #e7e7e7;
  --color-play-overlay: #0a0a0aeb;
  --color-play-border: #ffffff26;
  --color-lightbox-overlay: #0a0a0af5;
  --text-collection-title: clamp(56px, 5vw, 96px);
  --text-collection-card: 14px;
  --text-collection-meta: 12px;
  --text-navigation: 13px;
  --avatar-size: 46px;
  --avatar-mobile-size: 36px;
  --navigation-group-gap: 22px;
  --navigation-mobile-gap: 14px;
  --hero-navigation-gap: clamp(8px, 1.1vw, 24px);
  --hero-navigation-height: clamp(22px, 2.1vw, 50px);
  --hero-navigation-font: clamp(6px, .55vw, 13px);
  --collection-columns: 3;
  --collection-gap: 16px;
  --collection-row-gap: 56px;
  --collection-masonry-unit: 4px;
  --collection-image-width: 100%;
  --collection-image-height: auto;
  --collection-cover-radius: 12px;
  --collection-heading-space: clamp(88px, 9vw, 144px);
  --collection-anchor-offset: clamp(136px, 15.5vw, 270px);
  --collection-barcode-width: clamp(76px, 7vw, 120px);
  --collection-barcode-height: clamp(24px, 1.9vw, 34px);
  --collection-rule-color: #b3b3b3;
  --collection-tool-gap: 6px;
  --collection-hover-shift: -3px;
  --about-max: 1360px;
  --about-section-inset: 48px;
  --about-block-padding: 64px;
  --about-column-gap: clamp(48px, 8vw, 144px);
  --about-copy-gap: 28px;
  --text-about-title: 52px;
  --text-about-copy: 17px;
  --text-about-english: 14px;
  --text-about-label: 10px;
  --text-about-caption: 12px;
  --about-caption-clearance: 90px;
  --about-photo-max: 440px;
  --about-photo-ratio: 1 / 1.05;
  --about-photo-rotation: 4deg;
  --about-photo-zoom: 1.3;
  --about-photo-radius: 24px;
  --experience-column-gap: clamp(28px, 3vw, 64px);
  --experience-scroll-distance: 248svh;
  --experience-panel-height: min(640px, calc(100svh - 148px));
  --experience-entry-gap: 84px;
  --experience-fade-edge: 28px;
  --text-experience-heading: clamp(44px, 4.5vw, 72px);
  --text-experience-era: clamp(80px, 7.9vw, 132px);
  --text-experience-range: clamp(28px, 2.9vw, 48px);
  --text-experience-company: clamp(18px, 1.5vw, 24px);
  --text-experience-copy: clamp(12px, .98vw, 16px);
  --text-clients-title: var(--text-collection-title);
  --text-clients-subtitle: var(--text-small);
  --clients-section-padding: 32px;
  --clients-column-gap: 12px;
  --clients-row-gap: 28px;
  --clients-pile-width: 90%;
  --clients-pile-max: 1240px;
  --clients-pile-top: 48px;
  --clients-pile-side: 32px;
  --clients-pile-bottom: 48px;
  --clients-pill-height: 88px;
  --clients-logo-padding: 17px;
  --clients-logo-inline-padding: 26px;
  --clients-logo-background: #ffffff;
  --clients-logo-border: #e8e8e8;
  --clients-logo-shadow: 0 5px 18px #00000030;
  --clients-slogan-gap: 6px;
  --clients-angle-scale: 1;
  --clients-offset-scale: .9;
  --motion-trail-size-small: 130px;
  --motion-trail-size-medium: 230px;
  --motion-trail-size-large: 350px;
  --motion-trail-mobile-size-small: 90px;
  --motion-trail-mobile-size-medium: 150px;
  --motion-trail-mobile-size-large: 220px;
  --motion-trail-size-jitter: 0.04;
  --motion-trail-duration: 1200ms;
  --motion-trail-interval: 160ms;
  --motion-trail-limit: 6;
  --motion-trail-mobile-limit: 3;
  --motion-trail-floor: 16px;
  --motion-trail-rotation: 10;
  --motion-trail-bounce: 48px;
  --motion-trail-distance-min: 100px;
  --motion-trail-distance-divisor: 8;
  --motion-trail-distance-max: 240px;
  --motion-trail-bottom-dead-zone: 200px;
  --comet-color-primary: #ffffff;
  --comet-color-accent: var(--color-accent);
  --comet-tail-scale: 5;
  --comet-life: 600ms;
  --comet-star-life: 520ms;
  --comet-star-limit: 20;
  --comet-tail-width: 2.1px;
  --comet-head-radius: 3px;
  --comet-head-lag: 70ms;
  --comet-max-length: 200px;
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --gutter: 32px;
    --header-height: 80px;
    --anchor-offset: 88px;
    --section-gap: 112px;
    --heading-gap: 48px;
    --card-gap: 24px;
    --card-row-gap: 56px;
    --text-logo: 28px;
    --text-card: 28px;
    --poster-columns: 2;
    --panel-padding: 40px;
    --collection-columns: 2;
    --text-collection-title: 56px;
    --clients-pill-height: 82px;
    --clients-angle-scale: .75;
    --clients-offset-scale: .7;
    --clients-pile-side: 24px;
    --clients-logo-inline-padding: 18px;
  }
}
@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --header-height: 72px;
    --anchor-offset: 80px;
    --section-gap: 72px;
    --heading-gap: 32px;
    --card-gap: 16px;
    --card-row-gap: 48px;
    --text-logo: 24px;
    --text-hero: 36px;
    --text-display: 40px;
    --text-contact: 36px;
    --text-card: 24px;
    --text-lead: 26px;
    --text-gallery: 20px;
    --text-contact-value: 20px;
    --text-featured-name: 17px;
    --text-tag: 16px;
    --text-description: 15px;
    --works-columns: 1;
    --poster-columns: 1;
    --text-body: 17px;
    --text-small: 13px;
    --text-detail-title: 44px;
    --radius-media: 16px;
    --panel-padding: 24px;
    --line-body: 1.75;
    --collection-columns: 1;
    --collection-row-gap: 36px;
    --collection-cover-radius: 10px;
    --collection-heading-space: 96px;
    --text-collection-title: clamp(38px, 10vw, 64px);
    --collection-anchor-offset: 112px;
    --text-collection-card: 14px;
    --about-section-inset: 24px;
    --about-block-padding: 24px;
    --text-about-title: 38px;
    --text-about-copy: 16px;
    --text-about-english: 13px;
    --about-photo-max: 360px;
    --about-photo-rotation: 3deg;
    --text-clients-title: var(--text-collection-title);
    --text-clients-subtitle: var(--text-small);
    --clients-column-gap: 12px;
    --clients-row-gap: 18px;
    --clients-pile-width: 98%;
    --clients-section-padding: 16px;
    --clients-pile-top: 40px;
    --clients-pile-side: 8px;
    --clients-pile-bottom: 20px;
    --clients-pill-height: 74px;
    --clients-logo-padding: 12px;
    --clients-logo-inline-padding: 16px;
    --clients-angle-scale: .3;
    --clients-offset-scale: .3;
    --clients-slogan-gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-enter: 0ms;
    --motion-page: 0ms;
    --motion-stagger: 0ms;
  }
}