:root {
  --blue:#0879ed;
  --purple:#7d45d8;
  --gold:#d4b384;
  --header:58px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:#171719;
  background:#fff;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--header)
}
body {
  margin:0
}
body.modal-open {
  overflow:hidden
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
a,button {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}
img {
  display:block;
  max-width:100%;
  height:auto
}
figure,p,h1,h2,h3 {
  margin:0
}
ul,ol {
  margin:0;
  padding:0;
  list-style:none
}
::selection {
  background:#6faaff66
}
a:focus-visible,button:focus-visible {
  outline:3px solid #1688ff;
  outline-offset:6px
}
.wrap {
  width:min(1120px,calc(100% - 96px));
  margin-inline:auto
}
.section-space {
  padding-block:118px
}
.centered {
  text-align:center
}
.eyebrow {
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  margin-bottom:23px;
  color:#777780
}
.purple {
  color:var(--purple)
}
.gold {
  color:var(--gold)
}
h1,h2 {
  font-weight:650;
  letter-spacing:-.055em;
  line-height:1.2
}
h2 {
  font-size:52px
}
h3 {
  font-size:24px;
  font-weight:600;
  letter-spacing:-.03em
}
p {
  line-height:1.85
}
.section-description {
  font-size:18px;
  line-height:1.85;
  color:#6d6d76;
  max-width:620px
}
.centered .section-description {
  margin:24px auto
}
.text-link {
  color:#0874df;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:16px;
  min-height:44px
}
.text-link>span {
  font-size:25px;
  transition:transform .2s
}
.text-link:hover>span {
  transform:translateX(4px)
}
.button-row {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:46px;
  padding:10px 25px;
  border-radius:30px;
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  border:1px solid transparent;
  transition:background .2s,transform .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button-primary {
  color:white;
  background:var(--blue)
}
.button-primary:hover {
  background:#218af4
}
.button-outline {
  color:#45a4ff;
  border-color:#2076bd;
  background:transparent
}
.button-outline:hover {
  background:#1187f51a
}
.skip-link {
  position:fixed;
  z-index:100;
  top:8px;
  left:12px;
  transform:translateY(-180%);
  background:#fff;
  border-radius:5px;
  padding:10px 16px;
  color:#111
}
.skip-link:focus {
  transform:translateY(0)
}
.site-header {
  height:var(--header);
  position:sticky;
  top:0;
  z-index:50;
  background:#f6f6f8f2;
  border-bottom:1px solid #00000006;
  transition:box-shadow .2s,background .2s
}
.site-header.scrolled {
  background:#f6f6f8db;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 #00000008
}
.nav-shell {
  max-width:1120px;
  width:calc(100% - 96px);
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.wordmark {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:23px;
  font-weight:650;
  letter-spacing:-.08em;
  line-height:1
}
.wordmark-dot {
  align-self:flex-end;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--blue);
  margin:0 0 2px 2px
}
#main-nav {
  display:flex;
  gap:44px;
  align-items:center;
  height:100%
}
#main-nav a {
  font-size:13px;
  color:#44444c;
  display:flex;
  align-items:center;
  height:100%;
  transition:color .2s
}
#main-nav a:hover {
  color:var(--blue)
}
.menu-toggle {
  display:none
}
.hero {
  position:relative;
  overflow:hidden;
  background:#050506;
  color:#f7f7fa;
  padding-top:63px
}
.hero-copy {
  position:relative;
  z-index:2;
  text-align:center
}
.hero-brand {
  color:#a7a7b1;
  font-size:13px;
  letter-spacing:.12em;
  margin-bottom:22px
}
.hero h1 {
  font-size:80px;
  line-height:1.17;
  letter-spacing:-.06em
}
.hero-subtitle {
  color:#aaaab4;
  font-size:20px;
  line-height:1.65;
  margin:23px 0 27px
}
.hero-stage {
  position:relative;
  width:min(1070px,100%);
  height:493px;
  margin:42px auto 0;
  isolation:isolate
}
.hero-glow {
  position:absolute;
  width:90%;
  height:80%;
  bottom:-20%;
  left:5%;
  background:radial-gradient(ellipse at 26% 60%,#38216066,transparent 54%),radial-gradient(ellipse at 73% 60%,#74542e44,transparent 48%);
  filter:blur(30px);
  z-index:-1
}
.hero-phones {
  position:absolute;
  left:7%;
  bottom:31px;
  width:365px;
  height:435px
}
.phone {
  background:#16151a;
  border:1px solid #4a4850;
  border-radius:35px;
  padding:7px;
  box-shadow:0 24px 60px #00000026;
  overflow:visible;
  position:relative;
  line-height:0
}
.phone img {
  width:100%;
  height:auto;
  border-radius:27px;
  background:#f9f7fc
}
.hero-phone-front {
  width:205px;
  position:absolute;
  left:131px;
  top:0;
  transform:rotate(7deg);
  box-shadow:0 35px 65px #0009;
  z-index:2
}
.hero-phone-back {
  width:179px;
  position:absolute;
  left:0;
  top:42px;
  transform:rotate(-10deg);
  z-index:1
}
.hero-phone-front img {
  border-radius:24px
}
.hero-phone-back img {
  border-radius:22px
}
.hero-product-label {
  position:absolute;
  bottom:-24px;
  left:90px;
  color:#d2c6e6;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  letter-spacing:.04em;
  white-space:nowrap
}
.hero-product-label i {
  font-size:11px;
  font-style:normal;
  color:#8e879b
}
.hero-life {
  position:absolute;
  left:45%;
  width:59%;
  height:100%;
  top:1px
}
.hero-life-name {
  position:absolute;
  top:35px;
  left:25%;
  z-index:2;
  font-size:24px;
  letter-spacing:.06em;
  font-weight:550;
  color:#e6d4b8
}
.hero-life-name>span {
  display:block;
  font-size:12px;
  color:#a39582;
  letter-spacing:.04em;
  font-weight:400;
  margin-top:10px
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ffffff12;
  width:min(1120px,calc(100% - 96px));
  margin:10px auto 0;
  padding:20px 0 23px;
  font-size:11px;
  color:#888893;
  letter-spacing:.06em
}
.hero-bottom a {
  display:flex;
  gap:12px;
  align-items:center
}
.hero-bottom a:hover {
  color:#ddd
}
.yueliao-section {
  background:#faf9fc;
  overflow:hidden
}
.section-heading .section-description {
  max-width:595px
}
.phone-gallery {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:45px;
  margin-top:65px;
  margin-bottom:62px;
  padding:0 35px
}
.phone-gallery .phone {
  flex-shrink:0;
  transition:transform .35s,box-shadow .35s
}
.main-phone {
  width:258px;
  z-index:2;
  box-shadow:0 22px 50px #4c2a692d
}
.side-phone {
  width:222px;
  opacity:.96
}
.left-phone {
  transform:translateY(24px) rotate(-6deg)
}
.right-phone {
  transform:translateY(24px) rotate(6deg)
}
.zoom-trigger {
  display:block;
  padding:7px;
  appearance:none
}
.zoom-trigger:hover {
  box-shadow:0 26px 65px #61328736
}
.zoom-hint {
  position:absolute;
  bottom:25px;
  left:50%;
  transform:translate(-50%,6px);
  opacity:0;
  line-height:1.5;
  font-size:11px;
  background:#18111bd9;
  color:#fff;
  border-radius:30px;
  padding:8px 14px;
  white-space:nowrap;
  transition:opacity .2s,transform .2s;
  backdrop-filter:blur(12px)
}
.zoom-trigger:hover .zoom-hint,.zoom-trigger:focus-visible .zoom-hint {
  opacity:1;
  transform:translate(-50%,0)
}
.feature-strip {
  max-width:960px;
  display:flex;
  justify-content:center;
  gap:45px;
  padding-top:28px;
  border-top:1px solid #dedbe5
}
.feature-strip li {
  font-size:15px;
  display:flex;
  align-items:center;
  gap:11px
}
.feature-index {
  font-size:11px;
  letter-spacing:.05em;
  color:#8c6cac
}
.image-note {
  font-size:11px;
  line-height:1.8;
  color:#797580;
  text-align:center;
  max-width:860px;
  margin:25px auto 0
}
.life-section {
  background:#111110;
  color:#f1eee8;
  padding-block:120px 100px;
  overflow:hidden
}
.life-grid {
  display:grid;
  grid-template-columns:1fr 1.18fr;
  align-items:center;
  gap:20px
}
.life-copy {
  position:relative;
  z-index:1
}
.life-copy h2 {
  font-size:49px;
  line-height:1.28
}
.life-copy .section-description {
  color:#a5a29c;
  font-size:16px;
  margin-top:25px;
  max-width:420px
}
.life-topics {
  display:flex;
  gap:0;
  margin:27px 0 21px;
  color:#c5b9a6;
  font-size:12px
}
.life-topics li+li:before {
  content:'/';
  padding:0 12px;
  color:#756b5b
}
.life-copy .text-link {
  color:#5caaff
}
.services-section {
  background:#fff
}
.services-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:58px
}
.services-heading>p {
  color:#6d6d76;
  font-size:16px;
  line-height:1.8;
  padding-bottom:6px
}
.service-list {
  border-top:1px solid #dcdce1
}
.service-row {
  display:grid;
  grid-template-columns:60px 1fr 1.3fr 48px;
  gap:25px;
  align-items:center;
  min-height:145px;
  border-bottom:1px solid #e5e5e9
}
.service-number {
  font-size:12px;
  color:#92929a;
  align-self:start;
  margin-top:37px
}
.service-row h3 {
  font-size:23px;
  margin-bottom:10px
}
.service-english {
  font-size:9px;
  font-weight:500;
  letter-spacing:.11em;
  color:#94949b
}
.service-row p {
  font-size:15px;
  color:#74747c;
  max-width:365px
}
.service-symbol {
  font-size:34px;
  color:#a3a3ab;
  font-weight:300;
  justify-self:end
}
.about-section {
  background:#f4f4f6
}
.about-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:90px
}
.about-section h2 {
  font-size:48px;
  line-height:1.3
}
.about-body>p {
  font-size:17px;
  color:#696971;
  line-height:1.95;
  margin-top:38px
}
.process {
  margin-top:43px
}
.process li {
  border-top:1px solid #d7d7de;
  padding:16px 0;
  display:flex;
  gap:24px;
  font-size:15px;
  align-items:center
}
.process li>span:first-child {
  font-size:10px;
  color:#8c8c96
}
.process-arrow {
  margin-left:auto;
  color:#a6a6b0;
  font-size:19px
}
.contact-section {
  background:#eaf3ff;
  padding:114px 0 102px
}
.contact-section h2 {
  font-size:52px
}
.contact-intro {
  max-width:550px;
  font-size:17px;
  color:#697787;
  margin-top:25px
}
.contact-methods {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:75px;
  margin-top:57px
}
.contact-label {
  font-size:12px;
  color:#6c7b8f;
  display:block;
  margin-bottom:14px
}
.contact-method>div {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap
}
.contact-value {
  font-size:28px;
  letter-spacing:-.03em;
  font-weight:500;
  color:#222e3f;
  transition:color .2s
}
.contact-value:hover {
  color:#0874df
}
.copy-button {
  border:0;
  border-radius:15px;
  background:transparent;
  padding:8px 0;
  color:#4e6c94;
  font-size:11px;
  display:inline-flex;
  gap:8px;
  align-items:center
}
.copy-button:hover {
  color:#0071dc
}
.copy-button span {
  font-size:15px
}
.site-footer {
  background:#f6f6f8;
  padding:49px 0 0
}
.footer-main {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:35px;
  padding-bottom:36px
}
.footer-main .wordmark {
  margin-bottom:22px;
  font-size:22px
}
.footer-main p {
  font-size:12px;
  color:#62626c
}
.footer-tagline {
  font-size:10px;
  color:#91919b;
  display:block;
  margin-top:6px
}
.footer-main nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-content:start;
  padding-top:4px;
  font-size:12px;
  color:#62626c
}
.footer-main nav a:hover,.footer-contact a:hover {
  color:var(--blue)
}
.footer-contact {
  display:flex;
  flex-direction:column;
  gap:17px;
  font-size:12px;
  align-items:flex-end;
  padding-top:4px;
  color:#62626c
}
.footer-bottom {
  font-size:10px;
  color:#888892;
  border-top:1px solid #dedee4;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-block:20px 23px
}
.footer-bottom > a {
  flex-basis:100%;
  text-align:center;
  font-size:12px
}
.toast {
  position:fixed;
  bottom:32px;
  left:50%;
  transform:translate(-50%,10px);
  border-radius:30px;
  background:#1f2835ed;
  box-shadow:0 5px 25px #0002;
  color:#fff;
  padding:12px 23px;
  font-size:13px;
  max-width:calc(100% - 32px);
  width:max-content;
  line-height:1.5;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:100
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.detail-hero {
  padding-top:29px
}
.back-link {
  font-size:12px;
  color:#74747f;
  display:inline-flex;
  align-items:center;
  min-height:40px
}
.back-link:hover {
  color:var(--blue)
}
.detail-heading {
  padding:58px 0 57px
}
.detail-heading h1 {
  font-size:68px
}
.detail-heading .section-description {
  max-width:620px;
  margin:25px auto
}
.detail-heading .button {
  margin-top:6px
}
.yueliao-detail {
  background:#f8f5fc
}
.detail-feature-row {
  display:flex;
  justify-content:center;
  gap:55px;
  padding:0 0 47px;
  font-size:13px;
  color:#6c6179
}
.detail-feature-row b {
  font-size:10px;
  font-weight:400;
  color:#9b83b8;
  margin-right:12px
}
.detail-screens {
  background:linear-gradient(#f8f5fc,#fff)
}
.gallery-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:60px
}
.gallery-heading h2 {
  font-size:43px
}
.gallery-heading p {
  font-size:13px;
  color:#88818e
}
.screens-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  max-width:950px;
  margin:auto
}
.screens-grid .phone {
  width:100%
}
.screens-grid figcaption {
  margin:27px 0 0
}
.screens-grid figcaption>span {
  font-size:11px;
  color:#8b7c9b
}
.screens-grid figcaption h3 {
  font-size:19px;
  margin-top:12px
}
.detail-screens .image-note {
  margin-top:50px
}
.product-story {
  background:#f6f6f8
}
.product-story-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.product-story h2 {
  font-size:46px;
  line-height:1.3
}
.story-list article+article {
  margin-top:30px;
  border-top:1px solid #dddde4;
  padding-top:30px
}
.story-list h3 {
  font-size:21px;
  margin-bottom:13px
}
.story-list p {
  color:#74747f;
  font-size:15px
}
.compact-contact {
  padding-block:90px
}
.compact-contact h2 {
  font-size:44px
}
.life-detail {
  background:#111110;
  color:#f4f0e9;
  overflow:hidden
}
.life-detail .back-link {
  color:#a5a095
}
.life-detail .detail-heading {
  padding-bottom:0
}
.life-detail .section-description {
  color:#a6a298
}
.directions-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:66px
}
.directions-heading p {
  font-size:15px;
  color:#7c766c
}
.directions-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:38px
}
.directions-grid article {
  border-top:1px solid #cec4b5;
  padding-top:22px
}
.direction-number {
  font-size:11px;
  color:#aa8d60
}
.directions-grid h3 {
  font-size:23px;
  margin-top:25px
}
.directions-grid p {
  font-size:15px;
  color:#7c766e;
  margin-top:17px
}
.direction-note {
  font-size:11px;
  color:#8c867d;
  margin-top:45px;
  line-height:1.9
}
.life-statement {
  background:#f5f2ec
}
.life-statement h2 {
  font-size:56px;
  line-height:1.3
}
.life-statement p {
  color:#827767;
  font-size:18px;
  margin:27px 0 16px
}
.not-found {
  padding-block:130px;
  min-height:60vh
}
.not-found h1 {
  font-size:52px
}
.not-found p {
  margin:25px 0;
  color:#6d6d76
}
.lightbox {
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  color:white;
  background:#111115f7;
  overflow:hidden
}
.lightbox::backdrop {
  background:#09090be6
}
.lightbox-toolbar {
  height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:10px 32px;
  background:#17171b;
  position:relative;
  z-index:1
}
.lightbox-toolbar>span {
  font-size:12px;
  color:#bdbdc9;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.lightbox-close {
  border:1px solid #686873;
  border-radius:25px;
  background:#24242c;
  color:white;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 16px;
  white-space:nowrap;
  min-height:40px
}
.lightbox-close span {
  font-size:20px
}
.lightbox-content {
  height:calc(100dvh - 112px);
  overflow:auto;
  padding:20px 65px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overscroll-behavior:contain
}
.lightbox-content img {
  max-width:min(851px,100%);
  max-height:none;
  width:auto;
  height:100%;
  min-height:0;
  object-fit:contain
}
.lightbox-instruction {
  height:46px;
  text-align:center;
  color:#9e9eaa;
  font-size:11px;
  padding:11px
}
.lightbox-prev,.lightbox-next {
  position:absolute;
  top:50%;
  border:1px solid #62626f;
  border-radius:50%;
  background:#30303bd9;
  color:white;
  font-size:30px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1
}
.lightbox-prev {
  left:20px
}
.lightbox-next {
  right:20px
}
@media(min-width:1600px) {
  .hero-stage {
    height:540px
  }
  .hero-phones {
    transform:scale(1.08);
    transform-origin:bottom left
  }
  .hero-life {
    left:44%
  }
}
@media(max-width:1100px) {
  .wrap,.nav-shell {
    width:calc(100% - 64px)
  }
  .hero h1 {
    font-size:72px
  }
  .hero-stage {
    width:920px;
    max-width:100%;
    height:465px
  }
  .hero-phones {
    left:5%;
    transform:scale(.93);
    transform-origin:bottom left
  }
  .hero-life {
    left:44%;
    width:59%
  }
  .hero-life-name {
    font-size:21px;
    top:42px
  }
  .life-grid {
    grid-template-columns:1fr 1fr
  }
  .life-copy h2 {
    font-size:43px
  }
  .life-topics li+li:before {
    padding-inline:8px
  }
  .about-grid {
    gap:55px
  }
  .about-section h2 {
    font-size:42px
  }
  .contact-methods {
    gap:35px
  }
  .contact-value {
    font-size:25px
  }
  .contact-method>div {
    gap:12px
  }
  .phone-gallery {
    gap:35px
  }
  .service-row {
    grid-template-columns:35px 1fr 1.2fr 35px;
    gap:20px
  }
  .screens-grid {
    gap:42px
  }
  .hero-bottom {
    width:calc(100% - 64px)
  }
}
@media(max-width:850px) {
  .section-space {
    padding-block:90px
  }
  h2 {
    font-size:43px
  }
  .hero {
    padding-top:60px
  }
  .hero h1 {
    font-size:64px
  }
  .hero-subtitle {
    font-size:18px
  }
  .hero-stage {
    margin-top:30px;
    height:420px
  }
  .hero-phones {
    left:4%;
    transform:scale(.82)
  }
  .hero-life {
    left:44%;
    width:59%;
    top:15px
  }
  .hero-life-name {
    top:30px;
    font-size:20px;
    left:23%
  }
  .hero-product-label {
    font-size:14px
  }
  .phone-gallery {
    gap:26px;
    padding:0;
    margin-top:55px
  }
  .main-phone {
    width:225px
  }
  .side-phone {
    width:185px
  }
  .phone {
    border-radius:29px;
    padding:6px
  }
  .phone img {
    border-radius:23px
  }
  .feature-strip {
    gap:25px
  }
  .feature-strip li {
    font-size:12px;
    gap:8px
  }
  .image-note {
    padding-inline:30px
  }
  .life-grid {
    grid-template-columns:1fr;
    gap:10px
  }
  .life-copy {
    max-width:580px
  }
  .life-copy .section-description {
    max-width:550px
  }
  .life-copy h2 {
    font-size:48px
  }
  .services-heading>p {
    font-size:14px
  }
  .service-row h3 {
    font-size:20px
  }
  .service-row p {
    font-size:13px
  }
  .service-symbol {
    font-size:28px
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .about-body {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:45px
  }
  .about-body>p,.process {
    margin-top:30px
  }
  .about-body>p {
    font-size:15px
  }
  .contact-section {
    padding-block:90px
  }
  .contact-section h2 {
    font-size:43px
  }
  .contact-methods {
    grid-template-columns:1fr 1fr;
    gap:30px
  }
  .contact-value {
    font-size:23px
  }
  .footer-main {
    grid-template-columns:1.2fr .8fr 1fr;
    gap:25px
  }
  .footer-contact {
    font-size:11px
  }
  .detail-heading h1 {
    font-size:58px
  }
  .detail-feature-row {
    gap:25px;
    font-size:11px
  }
  .screens-grid {
    gap:28px
  }
  .screens-grid figcaption h3 {
    font-size:16px
  }
  .gallery-heading h2 {
    font-size:35px
  }
  .gallery-heading p {
    font-size:11px
  }
  .product-story-grid {
    gap:50px
  }
  .product-story h2 {
    font-size:36px
  }
  .directions-grid {
    grid-template-columns:1fr 1fr;
    gap:42px
  }
  .directions-heading h2 {
    font-size:39px
  }
  .directions-heading p {
    font-size:13px
  }
}
@media(max-width:700px) {
  :root {
    --header:56px
  }
  .wrap,.nav-shell {
    width:calc(100% - 40px)
  }
  .section-space {
    padding-block:76px
  }
  .eyebrow {
    font-size:11px;
    margin-bottom:18px
  }
  h2 {
    font-size:36px;
    letter-spacing:-.05em
  }
  .section-description {
    font-size:15px;
    line-height:1.9
  }
  .centered .section-description {
    margin-block:20px
  }
  .site-header {
    background:#f5f5f8f5
  }
  .wordmark {
    font-size:22px
  }
  .menu-toggle {
    display:flex;
    width:42px;
    height:42px;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    align-items:center;
    border:0;
    background:transparent;
    padding:10px;
    margin-right:-10px
  }
  .menu-toggle span {
    display:block;
    width:19px;
    height:1.5px;
    background:#34343a;
    transition:transform .2s
  }
  .menu-open .menu-toggle span:first-child {
    transform:translateY(3.75px) rotate(45deg)
  }
  .menu-open .menu-toggle span:last-child {
    transform:translateY(-3.75px) rotate(-45deg)
  }
  #main-nav {
    display:none;
    position:absolute;
    top:56px;
    left:0;
    right:0;
    height:auto;
    padding:10px 24px 24px;
    background:#f6f6f9;
    box-shadow:0 15px 22px #0000000c;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .menu-open #main-nav {
    display:flex
  }
  #main-nav a {
    font-size:17px;
    min-height:53px;
    border-bottom:1px solid #e4e4eb
  }
  .hero {
    padding-top:47px
  }
  .hero-brand {
    font-size:11px;
    letter-spacing:.08em;
    margin-bottom:22px
  }
  .hero h1 {
    font-size:46px;
    line-height:1.23;
    letter-spacing:-.065em
  }
  .hero-subtitle {
    font-size:16px;
    margin:21px 0 25px;
    line-height:1.65
  }
  .button {
    font-size:13px;
    min-height:43px;
    padding:9px 22px
  }
  .button-row {
    gap:12px
  }
  .hero-stage {
    height:345px;
    width:100%;
    margin-top:38px
  }
  .hero-phones {
    left:3%;
    bottom:47px;
    transform:scale(.55);
    transform-origin:bottom left
  }
  .hero-life {
    left:43%;
    width:67%;
    height:285px;
    top:25px
  }
  .hero-life-name {
    left:20%;
    top:32px;
    font-size:17px;
    letter-spacing:.03em
  }
  .hero-life-name>span {
    font-size:9px;
    margin-top:7px
  }
  .hero-product-label {
    bottom:-33px;
    font-size:17px;
    left:50px
  }
  .hero-product-label i {
    display:none
  }
  .hero-bottom {
    width:calc(100% - 40px);
    margin-top:0;
    font-size:9px;
    padding:17px 0 20px
  }
  .hero-bottom a {
    gap:7px
  }
  .section-heading h2 {
    font-size:35px
  }
  .section-heading .section-description {
    max-width:430px
  }
  .text-link {
    font-size:14px;
    min-height:44px
  }
  .phone-gallery {
    gap:17px;
    margin-top:40px;
    margin-bottom:40px;
    width:calc(100% - 24px)
  }
  .phone-gallery .main-phone {
    width:40%;
    max-width:200px;
    min-width:0
  }
  .phone-gallery .side-phone {
    width:29%;
    max-width:160px;
    min-width:0;
    padding:4px;
    border-radius:21px
  }
  .phone-gallery .phone {
    padding:4px;
    border-radius:23px
  }
  .phone-gallery .phone img {
    border-radius:18px
  }
  .phone-gallery .side-phone img {
    border-radius:16px
  }
  .left-phone {
    transform:translateY(12px) rotate(-5deg)
  }
  .right-phone {
    transform:translateY(12px) rotate(5deg)
  }
  .zoom-hint {
    display:none
  }
  .feature-strip {
    gap:0;
    justify-content:space-between;
    padding-top:22px;
    align-items:flex-start
  }
  .feature-strip li {
    font-size:11px;
    line-height:1.7;
    flex-direction:column;
    gap:7px;
    text-align:center;
    max-width:31%
  }
  .feature-index {
    font-size:9px
  }
  .image-note {
    font-size:10px;
    width:calc(100% - 40px);
    margin-top:25px;
    padding:0;
    text-align:left;
    line-height:1.9
  }
  .life-section {
    padding-bottom:62px
  }
  .life-copy h2 {
    font-size:38px
  }
  .life-copy .section-description {
    font-size:15px;
    line-height:1.9;
    margin-top:21px
  }
  .life-topics {
    font-size:11px;
    margin:22px 0 15px
  }
  .life-topics li+li:before {
    padding-inline:9px
  }
  .services-heading {
    display:block;
    margin-bottom:37px
  }
  .services-heading>p {
    margin-top:25px;
    font-size:14px
  }
  .services-heading>p br {
    display:none
  }
  .service-row {
    grid-template-columns:24px 1fr 25px;
    gap:14px;
    min-height:0;
    padding:25px 0
  }
  .service-number {
    margin-top:4px;
    font-size:10px;
    grid-row:1/3;
    align-self:start
  }
  .service-row h3 {
    font-size:21px;
    margin-bottom:8px
  }
  .service-english {
    font-size:8px;
    letter-spacing:.1em
  }
  .service-row p {
    grid-column:2;
    grid-row:2;
    font-size:13px;
    line-height:1.85;
    margin-top:0;
    max-width:none
  }
  .service-symbol {
    grid-column:3;
    grid-row:1/3;
    font-size:26px;
    align-self:center
  }
  .about-section h2 {
    font-size:36px
  }
  .about-body {
    display:block
  }
  .about-body>p {
    font-size:15px;
    line-height:1.95;
    margin-top:25px
  }
  .process {
    margin-top:29px
  }
  .process li {
    padding:15px 0;
    font-size:14px
  }
  .contact-section {
    padding:75px 0 66px
  }
  .contact-section h2 {
    font-size:34px
  }
  .contact-intro {
    font-size:15px;
    margin-top:22px;
    max-width:390px
  }
  .contact-methods {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:37px
  }
  .contact-method>div {
    justify-content:space-between;
    gap:12px
  }
  .contact-label {
    font-size:11px;
    margin-bottom:9px
  }
  .contact-value {
    font-size:25px
  }
  .copy-button {
    font-size:10px;
    gap:5px
  }
  .site-footer {
    padding-top:39px
  }
  .footer-main {
    grid-template-columns:1fr .6fr;
    gap:30px;
    padding-bottom:30px
  }
  .footer-main p {
    font-size:11px
  }
  .footer-tagline {
    font-size:9px
  }
  .footer-main .wordmark {
    margin-bottom:19px
  }
  .footer-main nav {
    gap:20px;
    font-size:11px;
    grid-template-columns:1fr 1fr
  }
  .footer-contact {
    grid-column:1/-1;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:0;
    font-size:11px
  }
  .footer-bottom {
    font-size:9px;
    gap:9px;
    padding-block:19px 23px
  }
  .toast {
    bottom:23px;
    font-size:12px
  }
  .detail-hero {
    padding-top:15px
  }
  .back-link {
    font-size:11px
  }
  .detail-heading {
    padding-top:40px;
    padding-bottom:38px
  }
  .detail-heading h1 {
    font-size:42px;
    line-height:1.25
  }
  .detail-heading .section-description {
    font-size:15px;
    margin:22px auto
  }
  .detail-feature-row {
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding-bottom:35px;
    font-size:12px;
    justify-content:start;
    width:max-content;
    margin:auto
  }
  .detail-feature-row b {
    font-size:9px
  }
  .gallery-heading {
    display:block;
    margin-bottom:36px
  }
  .gallery-heading h2 {
    font-size:33px
  }
  .gallery-heading p {
    font-size:12px;
    margin-top:17px
  }
  .screens-grid {
    grid-template-columns:1fr;
    gap:45px
  }
  .screens-grid>figure {
    display:flex;
    align-items:center;
    gap:30px;
    max-width:420px;
    margin:auto;
    width:100%
  }
  .screens-grid .phone {
    width:58%;
    max-width:230px;
    flex-shrink:0;
    border-radius:28px;
    padding:6px
  }
  .screens-grid .phone img {
    border-radius:21px
  }
  .screens-grid figcaption {
    margin:0
  }
  .screens-grid figcaption>span {
    font-size:10px;
    white-space:nowrap
  }
  .screens-grid figcaption h3 {
    font-size:19px;
    line-height:1.5;
    max-width:110px;
    margin-top:14px
  }
  .detail-screens .image-note {
    width:100%;
    margin-top:40px
  }
  .product-story-grid {
    grid-template-columns:1fr;
    gap:37px
  }
  .product-story h2 {
    font-size:35px
  }
  .story-list h3 {
    font-size:20px
  }
  .story-list p {
    font-size:14px
  }
  .story-list article+article {
    margin-top:24px;
    padding-top:24px
  }
  .compact-contact h2 {
    font-size:34px
  }
  .life-detail .detail-heading h1 {
    font-size:40px
  }
  .directions-heading {
    display:block;
    margin-bottom:40px
  }
  .directions-heading h2 {
    font-size:35px
  }
  .directions-heading p {
    font-size:14px;
    margin-top:22px
  }
  .directions-grid {
    gap:35px 25px
  }
  .directions-grid h3 {
    font-size:21px;
    margin-top:21px
  }
  .directions-grid p {
    font-size:13px;
    line-height:1.85;
    margin-top:13px
  }
  .direction-note {
    font-size:10px;
    margin-top:35px
  }
  .life-statement h2 {
    font-size:39px
  }
  .life-statement p {
    font-size:15px
  }
  .not-found {
    padding-block:100px
  }
  .not-found h1 {
    font-size:36px
  }
  .lightbox-toolbar {
    padding-inline:17px;
    height:65px;
    gap:16px
  }
  .lightbox-toolbar>span {
    font-size:10px
  }
  .lightbox-close {
    padding:7px 13px;
    font-size:11px;
    gap:10px
  }
  .lightbox-content {
    padding:16px 46px;
    height:calc(100dvh - 106px)
  }
  .lightbox-content img {
    width:100%;
    height:auto;
    max-height:none;
    max-width:500px
  }
  .lightbox-instruction {
    font-size:9px;
    height:41px;
    padding-top:10px
  }
  .lightbox-prev,.lightbox-next {
    width:32px;
    height:38px;
    font-size:25px;
    background:#27272e
  }
  .lightbox-prev {
    left:6px
  }
  .lightbox-next {
    right:6px
  }
}
@media(max-width:370px) {
  .hero h1 {
    font-size:40px
  }
  .hero-phones {
    transform:scale(.48);
    left:1%
  }
  .hero-stage {
    height:315px
  }
  .hero-life {
    width:70%;
    left:41%;
    top:10px
  }
  .hero-life-name {
    font-size:15px
  }
  .hero-subtitle {
    font-size:15px
  }
  .hero-product-label {
    left:65px
  }
  .section-heading h2 {
    font-size:31px
  }
  .life-copy h2 {
    font-size:34px
  }
  .contact-section h2 {
    font-size:30px
  }
  .contact-value {
    font-size:22px
  }
  .contact-method>div {
    gap:7px
  }
  .copy-button {
    font-size:9px
  }
  .phone-gallery {
    gap:11px
  }
  .life-topics li+li:before {
    padding-inline:6px
  }
  .screens-grid>figure {
    gap:20px
  }
}
@media(prefers-reduced-motion:no-preference) {
  .hero-copy {
    animation:arrive .7s both
  }
  .hero-stage {
    animation:arrive 1s .1s both
  }
  @keyframes arrive {
    from {
      opacity:.3;
      transform:translateY(12px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
@media print {
  .site-header,.button-row,.copy-button,.menu-toggle,.hero-bottom,.lightbox,.toast {
    display:none!important
  }
  .hero,.life-section,.life-detail {
    background:#fff!important;
    color:#111!important
  }
  .section-space {
    padding-block:35px
  }
  .hero-stage {
    break-inside:avoid
  }
  .phone {
    box-shadow:none
  }
  .contact-section {
    background:#fff
  }
  .site-footer {
    break-inside:avoid
  }
  a {
    color:#111
  }
}
/* Keep complete source interfaces inside narrow viewports. */
@media(max-width:700px) {
  .phone-gallery {
    gap:14px
  }
  .phone-gallery .main-phone {
    width:38%
  }
  .phone-gallery .side-phone {
    width:25%
  }
  .hero-phones {
    left:8%;
    transform:scale(.5)
  }
  .hero-life {
    left:47%;
    width:56%
  }
  .hero-life-name {
    left:15%
  }
  .hero-product-label {
    left:64px
  }
}
@media(max-width:370px) {
  .phone-gallery {
    gap:11px
  }
  .hero-phones {
    left:8%;
    transform:scale(.44)
  }
  .hero-life {
    left:46%;
    width:57%
  }
  .hero-product-label {
    left:64px
  }
}
@media(max-width:700px) {
  .yueliao-detail .detail-heading h1 {
    font-size:35px
  }
}
@media(max-width:370px) {
  .yueliao-detail .detail-heading h1 {
    font-size:31px
  }
}
/* Keep small text legible on both light and dark surfaces. */
:root {
  --blue:#006bd6
}
.eyebrow {
  color:#686872
}
.eyebrow.purple {
  color:#7840ca
}
.eyebrow.gold {
  color:#d4b384
}
.text-link {
  color:#0066cc
}
.button-primary:hover {
  background:#0871db
}
.feature-index {
  color:#75568f
}
.image-note {
  color:#706b77
}
.service-number,.service-english {
  color:#74747e
}
.process li>span:first-child {
  color:#70707a
}
.contact-intro {
  color:#54677f
}
.contact-label {
  color:#52647c
}
.footer-tagline {
  color:#70707b
}
.footer-bottom {
  color:#6e6e78
}
.gallery-heading p {
  color:#716878
}
.screens-grid figcaption>span {
  color:#756582
}
.direction-number {
  color:#886738
}
.direction-note {
  color:#72695d
}
.life-statement .eyebrow.gold {
  color:#846137
}
.life-statement p {
  color:#716653
}
.back-link {
  color:#686874
}
.detail-feature-row b {
  color:#78628f
}
.story-list p {
  color:#676771
}
.process li>span:first-child {
  color:#6b6b76
}
.copy-button:hover {
  color:#005cb8
}
/* 目标是十亿：真实游戏界面，完整比例与手动图库。 */
.hero-life-name {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
.hero-game-preview {
  position: absolute;
  top: 75px;
  left: 50%;
  width: 207px;
  transform: translateX(-50%);
}
.hero-game-preview figcaption {
  margin-top: 13px;
  color: #b7a48a;
  font-size: 11px;
  text-align: center;
}
.game-frame {
  display: block;
  width: 100%;
  padding: 6px;
  border: 1px solid #706657;
  border-radius: 24px;
  background: #24201c;
  box-shadow: 0 22px 44px #0005;
  line-height: 0;
  position: relative;
}
.game-frame img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
}
.life-section {
  padding-block: 105px 85px;
}
.game-home-heading h2 {
  font-size: 52px;
  line-height: 1.26;
}
.game-home-heading .section-description {
  color: #b3ada4;
  max-width: 650px;
  margin: 24px auto 13px;
  font-size: 17px;
}
.game-home-heading .text-link {
  color: #65b1ff;
}
.game-gallery {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: start;
  gap: 43px;
  max-width: 1000px;
  margin: 60px auto 0;
}
.game-gallery:focus-visible {
  outline: 3px solid #1688ff;
  outline-offset: 8px;
}
.game-shot {
  min-width: 0;
}
.game-shot-0 {
  grid-column: 2;
  grid-row: 1;
}
.game-shot-1 {
  grid-column: 1;
  grid-row: 1;
  padding-top: 50px;
}
.game-shot-2 {
  grid-column: 3;
  grid-row: 1;
  padding-top: 50px;
}
.game-shot figcaption {
  padding-top: 20px;
  line-height: 1.6;
  text-align: center;
}
.game-shot figcaption>span {
  font-size: 11px;
  color: #b7a48a;
}
.game-shot h3 {
  font-size: 17px;
  color: #e6ded2;
  margin-top: 12px;
  line-height: 1.6;
}
.game-gallery-switch,.game-gallery-hint {
  display: none;
}
.game-feature-strip {
  display: flex;
  justify-content: center;
  gap: 35px;
  border-top: 1px solid #ffffff1f;
  margin: 55px auto 0;
  padding-top: 25px;
  color: #c9bcaa;
  font-size: 13px;
}
.game-screenshot-note {
  color: #aaa399;
  font-size: 11px;
  text-align: center;
  margin: 24px auto 0;
  max-width: 700px;
}
.game-detail {
  padding-bottom: 72px;
}
.game-detail .detail-heading {
  padding-bottom: 40px;
}
.game-detail-gallery-heading {
  text-align: center;
  margin-top: 16px;
}
.game-detail-gallery-heading .eyebrow {
  margin-bottom: 12px;
}
.game-detail-gallery-heading p {
  color: #b7afa3;
  font-size: 14px;
}
.game-gallery-detail .game-gallery {
  margin-top: 40px;
}
.game-lightbox .lightbox-content img {
  width: min(800px,100%);
  height: auto;
  max-height: none;
  flex-shrink: 0;
}
@media(max-width:1100px) {
  .game-gallery { gap: 28px; }
  .hero-game-preview { width: 194px; top: 64px; }
}
@media(max-width:850px) {
  .game-home-heading h2 { font-size: 45px; }
  .game-home-heading .section-description { font-size: 16px; }
  .game-gallery { gap: 23px; }
  .game-shot-1,.game-shot-2 { padding-top: 35px; }
  .hero-game-preview { width: 174px; top: 62px; }
}
@media(max-width:700px) {
  .hero-life-name { top: 17px; left: 50%; font-size: 16px; }
  .hero-game-preview { width: 112px; top: 76px; }
  .hero-game-preview .game-frame { padding: 3px; border-radius: 15px; }
  .hero-game-preview .game-frame img { border-radius: 12px; }
  .hero-game-preview figcaption { font-size: 10px; margin-top: 10px; }
  .life-section { padding-block: 75px 65px; }
  .game-home-heading h2 { font-size: 38px; }
  .game-home-heading .section-description { text-align: left; font-size: 15px; }
  .game-gallery {
    display: flex;
    overflow-x: auto;
    gap: 22px;
    margin-top: 35px;
    padding: 7px 7px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #938269 #25221d;
    overscroll-behavior-x: contain;
    align-items: flex-start;
  }
  .game-shot {
    flex: 0 0 100%;
    padding: 0 20px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .game-frame { border-radius: 23px; padding: 5px; }
  .game-frame img { border-radius: 18px; }
  .game-shot figcaption { padding-top: 18px; }
  .game-shot figcaption>span { font-size: 11px; }
  .game-shot h3 { font-size: 16px; margin-top: 10px; }
  .gallery-ready .game-gallery-switch {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
  }
  .game-gallery-switch button {
    border-radius: 22px;
    border: 1px solid #766c5e;
    background: transparent;
    color: #c6baaa;
    padding: 11px 12px;
    font-size: 11px;
    line-height: 1.5;
    min-height: 42px;
  }
  .game-gallery-switch button[aria-pressed="true"] {
    background: #e7d5b7;
    color: #39291d;
    border-color: #e7d5b7;
  }
  .game-gallery-hint {
    display: block;
    color: #afa495;
    font-size: 10px;
    margin: 17px auto 0;
    text-align: center;
  }
  .game-feature-strip { gap: 22px; font-size: 11px; margin-top: 30px; padding-top: 22px; }
  .game-screenshot-note { font-size: 10px; margin-top: 23px; text-align: left; }
  .game-detail { padding-bottom: 55px; }
  .game-detail .detail-heading { padding-bottom: 30px; }
  .game-detail .detail-heading h1 { font-size: 38px; }
  .game-detail-gallery-heading { margin-top: 9px; }
  .game-detail-gallery-heading p { font-size: 12px; }
  .game-gallery-detail .game-gallery { margin-top: 28px; }
  .game-lightbox .lightbox-content { padding-inline: 46px; }
}
@media(max-width:370px) {
  .hero-game-preview { width: 100px; }
  .hero-life-name { font-size: 14px; }
  .game-home-heading h2,.game-detail .detail-heading h1 { font-size: 33px; }
  .game-gallery-switch button { padding-inline: 9px; font-size: 10px; }
  .game-feature-strip { gap: 14px; }
  .game-shot { padding-inline: 12px; }
}

.lightbox-content:focus-visible { outline: 2px solid #1688ff; outline-offset: -2px; }
/* Digital works: original film frames and a typographic music edition. */
.works-section { background: #f8f8fa; }
.works-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 70px; }
.works-heading h2,.works-heading h1 { font-size: 52px; line-height: 1.24; }
.works-heading>p { color: #686872; font-size: 16px; padding-bottom: 5px; }
.works-category-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-bottom: 21px; border-bottom: 1px solid #dcdce3; margin-bottom: 40px; }
.works-category-heading h3 { font-size: 20px; }
.works-category-heading>span { color: #6d6d77; font-size: 12px; }
.films-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; max-width: 760px; margin-inline: auto; }
.film-entry { min-width: 0; }
.film-poster { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; position: relative; background: #161618; line-height: 0; }
.film-poster img { display: block; width: 100%; height: auto; object-fit: contain; transition: opacity .25s; }
.film-poster:hover img { opacity: .9; }
.film-play { position: absolute; left: 20px; bottom: 20px; color: #fff; font-size: 12px; line-height: 1.5; padding: 11px 17px; border: 1px solid #ffffff80; border-radius: 28px; background: #111116b8; backdrop-filter: blur(12px); display: flex; align-items: center; gap: 10px; }
.film-play>span { font-size: 11px; }
.film-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-top: 22px; }
.film-meta h3 { font-size: 21px; line-height: 1.5; }
.film-meta>div>span,.film-duration,.film-credits { color: #6e6e78; font-size: 11px; }
.film-meta>div>span { display: block; margin-top: 8px; }
.film-duration { font-variant-numeric: tabular-nums; padding-top: 7px; }
.film-credits { margin-top: 14px; }
.music-category-heading { margin-top: 80px; }
.music-entry { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; max-width: 1000px; margin: 20px auto 0; }
.music-type-art { background: #eeece7; padding: 36px 40px 30px; color: #35332f; position: relative; overflow: hidden; min-height: 430px; display: flex; flex-direction: column; }
.music-art-label { font-size: 11px; letter-spacing: .1em; color: #68645c; }
.music-art-title { font-size: 69px; line-height: 1.18; letter-spacing: -.05em; padding-top: 38px; margin-bottom: 25px; font-weight: 500; }
.music-art-title>span { display: block; }
.music-art-title>span:nth-child(2) { font-weight: 650; }
.music-type-art figcaption { font-size: 11px; color: #68645c; border-top: 1px solid #cbc7be; padding-top: 17px; margin-top: auto; display: flex; justify-content: space-between; gap: 12px; }
.music-type-art figcaption>span { color: #716b60; font-size: 10px; }
.music-copy h3 { font-size: 29px; line-height: 1.45; letter-spacing: -.045em; }
.music-credits { margin: 31px 0 34px; padding: 0; display: grid; gap: 14px; font-size: 13px; }
.music-credits>div { display: flex; gap: 34px; }
.music-credits dt { color: #6c6c76; }
.music-credits dd { margin: 0; color: #3c3c45; }
.music-link { gap: 13px; font-size: 13px; }
.music-platform { color: #6c6c77; font-size: 11px; margin-top: 17px; }
.music-cover img { width: 100%; height: auto; }
.product-film-link { display: flex; width: max-content; border: 0; background: transparent; margin: 17px auto 0; padding: 0; }
.works-more { margin-top: 45px; }
.works-back { padding-top: 25px; }
.video-open { overflow: hidden; }
.video-dialog { inset: 0; margin: auto; padding: 0; width: min(1120px,calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 32px); border: 1px solid #4d4d57; border-radius: 16px; background: #121215; color: #f6f6fa; overflow: hidden; }
.video-dialog::backdrop { background: #050508e8; backdrop-filter: blur(8px); }
.video-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 22px; min-height: 64px; }
.video-dialog-bar h2 { font-size: 16px; letter-spacing: -.02em; line-height: 1.4; }
.video-close { background: #24242c; border: 1px solid #656571; border-radius: 25px; color: #fff; padding: 8px 15px; font-size: 12px; min-height: 38px; display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.video-close>span { font-size: 20px; }
.video-stage { display: flex; align-items: center; justify-content: center; width: 100%; background: #000; }
.video-stage video { display: block; width: 100%; height: calc(100dvh - 198px); max-height: 760px; object-fit: contain; background: #000; }
.video-stage video:focus-visible { outline: 2px solid #1688ff; outline-offset: -3px; }
.video-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; padding: 12px 22px; }
.video-status { color: #b7b7c3; font-size: 12px; line-height: 1.6; }
.video-dialog-footer>div { display: flex; gap: 17px; align-items: center; }
.video-fullscreen,.video-retry,.video-toggle { border: 0; padding: 10px 0; min-height: 40px; background: transparent; color: #80bdff; font-size: 12px; white-space: nowrap; }
.video-retry[hidden] { display: none; }
@media(max-width:1000px) {
  .works-heading { gap: 30px; }
  .works-heading h2,.works-heading h1 { font-size: 46px; }
  .works-heading>p { max-width: 200px; font-size: 14px; }
  .music-entry { gap: 60px; }
  .music-type-art { padding-inline: 30px; }
  .music-copy h3 { font-size: 25px; }
}
@media(max-width:700px) {
  .works-heading { display: block; margin-bottom: 45px; }
  .works-heading h2,.works-heading h1 { font-size: 36px; }
  .works-heading>p { max-width: none; font-size: 14px; margin-top: 25px; padding: 0; }
  .works-category-heading { margin-bottom: 28px; padding-bottom: 18px; }
  .works-category-heading h3 { font-size: 18px; }
  .works-category-heading>span { font-size: 10px; }
  .films-grid { grid-template-columns: 1fr; gap: 40px; max-width: 350px; }
  .film-meta { margin-top: 18px; }
  .film-meta h3 { font-size: 20px; }
  .film-play { left: 16px; bottom: 16px; padding: 10px 14px; font-size: 11px; }
  .music-category-heading { margin-top: 52px; }
  .music-entry { grid-template-columns: 1fr; gap: 36px; margin-top: 0; }
  .music-type-art { width: 100%; max-width: 430px; min-height: 385px; padding: 30px; margin: auto; }
  .music-art-title { font-size: 62px; padding-top: 27px; }
  .music-copy h3 { font-size: 27px; }
  .music-credits { margin: 26px 0; gap: 13px; }
  .music-link { font-size: 13px; min-height: 44px; }
  .video-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; }
  .video-dialog-bar { min-height: 60px; padding: 11px 14px; gap: 12px; }
  .video-dialog-bar h2 { font-size: 13px; }
  .video-close { font-size: 11px; padding: 7px 12px; gap: 10px; }
  .video-stage video { height: min(66dvh,640px); max-height: calc(100dvh - 200px); }
  .video-dialog-footer { display: block; padding: 12px 15px; min-height: 79px; }
  .video-status { font-size: 11px; }
  .video-dialog-footer>div { justify-content: flex-end; gap: 20px; }
  .video-fullscreen,.video-retry,.video-toggle { font-size: 11px; padding-block: 5px; min-height: 32px; }
}
@media(max-width:370px) {
  .works-heading h2,.works-heading h1 { font-size: 32px; }
  .music-copy h3 { font-size: 23px; }
  .music-type-art { padding: 27px; }
}
@media(max-height:500px) and (orientation:landscape) {
  .video-dialog-bar { min-height: 46px; padding-block: 6px; }
  .video-stage video { height: calc(100dvh - 130px); max-height: none; }
  .video-dialog-footer { display: flex; min-height: 54px; padding-block: 4px; }
  .video-dialog-footer>div { flex-shrink: 0; }
}