:root {
  color-scheme: light;
  --ink: #102d34;
  --ink-deep: #08262d;
  --muted: #61757a;
  --line: #dce8e7;
  --paper: #ffffff;
  --canvas: #f6faf8;
  --teal: #16a895;
  --teal-dark: #087b71;
  --teal-pale: #dff5ef;
  --lime: #c8ec86;
  --orange: #f59d62;
  --shadow: 0 24px 70px rgba(11, 62, 67, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(16,45,52,.08); background: rgba(246,250,248,.9); backdrop-filter: blur(18px); }
.header-inner { display: flex; align-items: center; min-height: 76px; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 22px rgba(7,80,80,.14); }
.brand strong, .brand small { display: block; white-space: nowrap; }
.brand strong { font-size: 15px; letter-spacing: -.02em; }
.brand small { margin-top: 2px; color: #72878b; font-size: 10px; letter-spacing: .08em; }
.nav { display: flex; align-items: stretch; gap: 30px; margin-left: auto; }
.nav a { position: relative; display: flex; align-items: center; min-height: 76px; color: #5d7277; font-size: 14px; font-weight: 650; text-decoration: none; }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav a.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--teal); content: ""; }
.header-action { padding: 11px 18px; border-radius: 10px; background: var(--ink-deep); color: white; font-size: 13px; font-weight: 750; text-decoration: none; }

.hero { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 70px; min-height: 680px; padding-top: 66px; padding-bottom: 84px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--teal-dark); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.eyebrow span { width: 25px; height: 2px; background: var(--teal); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { max-width: 670px; margin-bottom: 24px; font-size: clamp(46px, 5.3vw, 70px); line-height: 1.08; letter-spacing: -.055em; }
.hero h1 em { display: block; color: var(--teal-dark); font-style: normal; }
.hero-lead { max-width: 620px; margin-bottom: 32px; color: var(--muted); font-size: 17px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: 11px; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--ink-deep); color: white; box-shadow: 0 15px 34px rgba(8,38,45,.2); }
.button.secondary { border-color: var(--line); background: var(--paper); }
.button.light { background: white; color: var(--ink-deep); }
.button.full { width: 100%; }
.button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 27px; color: #64797d; font-size: 12px; font-weight: 650; }
.hero-notes i { display: inline-grid; width: 18px; height: 18px; margin-right: 5px; place-items: center; border-radius: 50%; background: var(--teal-pale); color: var(--teal-dark); font-style: normal; }

.home-visual { position: relative; overflow: hidden; border: 1px solid rgba(8,38,45,.12); border-radius: 8px; background: var(--ink-deep); box-shadow: 0 30px 80px rgba(8,38,45,.22); aspect-ratio: 16 / 11; }
.home-visual-frames { position: absolute; inset: 0; }
.home-visual-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: homeVisualCycle 15s linear infinite; transform: none; }
.home-visual-frame:nth-child(2) { animation-delay: 5s; }.home-visual-frame:nth-child(3) { animation-delay: 10s; }
.home-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(3,20,25,.42),transparent 28%,transparent 65%,rgba(3,20,25,.48)); content: ""; pointer-events: none; }
.home-visual-top { position: absolute; z-index: 2; top: 18px; right: 18px; left: 18px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.82); font-size: 9px; font-weight: 850; }
.home-visual-top span { display: flex; align-items: center; gap: 8px; }.home-visual-top i { width: 7px; height: 7px; border-radius: 50%; background: #65d6c4; box-shadow: 0 0 0 5px rgba(101,214,196,.14); animation: statusPulse 1.8s ease-in-out infinite; }.home-visual-top b { color: #f3b176; font-size: 9px; }
.home-visual-progress { position: absolute; z-index: 2; right: 18px; bottom: 17px; left: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.home-visual-progress span { position: relative; overflow: hidden; height: 3px; border-radius: 3px; background: rgba(255,255,255,.24); }.home-visual-progress span::after { position: absolute; inset: 0; background: #69d7c5; content: ""; transform: scaleX(0); transform-origin: left; animation: homeVisualProgress 15s linear infinite; }.home-visual-progress span:nth-child(2)::after { animation-delay: 5s; }.home-visual-progress span:nth-child(3)::after { animation-delay: 10s; }

.hero.home-hero { position: relative; display: block; width: 100%; min-height: 720px; max-width: none; overflow: hidden; margin: 0; padding: 0 max(24px,calc((100vw - 1180px)/2)); background: #edf4f3; color: var(--ink); isolation: isolate; }
.home-hero-frames { position: absolute; z-index: -3; inset: 0; overflow: hidden; }
.home-hero-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; opacity: 1; filter: none; animation: none; transform: none; }
.home-hero-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg,rgba(241,247,246,.08) 0%,rgba(241,247,246,0) 70%,rgba(237,244,243,.96) 100%),linear-gradient(90deg,rgba(247,250,249,.99) 0%,rgba(243,248,247,.92) 38%,rgba(238,246,244,.24) 67%,rgba(237,244,243,.04) 100%); }
.home-hero .hero-copy { width: min(690px,64%); padding: 118px 0 126px; }
.home-hero .home-visual { display: none; }
.home-hero .eyebrow { color: var(--teal-dark); }.home-hero h1 { color: var(--ink-deep); }.home-hero h1 em { color: #119581; }
.home-hero .hero-lead { color: #526c70; }.home-hero .button.primary { background: var(--ink-deep); color: white; }.home-hero .button.secondary { border-color: rgba(15,65,69,.18); background: rgba(255,255,255,.72); color: var(--ink-deep); backdrop-filter: blur(8px); }
.home-motion { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.home-motion span,.home-motion i { position: absolute; display: block; }
.home-motion-hero::before { position: absolute; top: 12%; right: 13.5%; width: 2px; height: 66%; background: linear-gradient(180deg,transparent,rgba(135,239,222,.12) 18%,rgba(238,255,252,.88) 50%,rgba(92,217,197,.16) 82%,transparent); box-shadow: 0 0 18px rgba(88,215,195,.34); content: ""; will-change: opacity,transform; animation: homeVerticalScan 7.6s ease-in-out infinite; }
.home-motion-hero::after { position: absolute; top: 20%; right: 2%; width: 43%; height: 54%; background: linear-gradient(112deg,transparent 34%,rgba(227,255,250,.18) 48%,transparent 62%); filter: blur(11px); content: ""; will-change: opacity,transform; animation: homeRibbonDrift 9.5s ease-in-out infinite; }
.home-motion-hero span { top: 55%; right: 2%; width: 45%; height: 2px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg,transparent,rgba(82,211,191,.35),rgba(245,172,119,.28),transparent); box-shadow: 0 0 24px rgba(74,205,184,.28); transform: rotate(-1.5deg); }
.home-motion-hero span::after,.home-motion-services span::after,.home-motion-flow span::after { position: absolute; inset: -2px auto -2px -24%; width: 24%; border-radius: inherit; background: linear-gradient(90deg,transparent,rgba(255,255,255,.96),transparent); content: ""; animation: homeSignalTravel 5.8s cubic-bezier(.45,0,.55,1) infinite; }
.home-motion-hero i { top: 54.2%; width: 8px; height: 8px; border: 1px solid rgba(255,255,255,.82); border-radius: 50%; background: #5ad6c1; box-shadow: 0 0 0 7px rgba(63,202,180,.1),0 0 24px rgba(63,202,180,.42); animation: homeSignalPulse 2.8s ease-in-out infinite; }
.home-motion-hero i:nth-of-type(1) { right: 28%; }.home-motion-hero i:nth-of-type(2) { right: 8%; animation-delay: -1.4s; }
@media (max-width: 700px) {
  .hero.home-hero { min-height: 700px; padding-right: 14px; padding-left: 14px; }
  .home-hero .hero-copy { width: 100%; padding: 82px 0 106px; }
  .home-hero-frame { object-position: 71% center; }
  .home-hero-shade { background: linear-gradient(180deg,rgba(246,250,249,.98) 0%,rgba(241,247,246,.88) 57%,rgba(237,244,243,.76) 80%,rgba(237,244,243,.98) 100%); }
  .home-motion-hero span { top: 68%; right: -18%; width: 78%; }
  .home-motion-hero i { top: 67.4%; }
}

.studio-card { position: relative; overflow: hidden; padding: 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; background: var(--ink-deep); color: white; box-shadow: 0 35px 90px rgba(8,38,45,.26); }
.studio-card::before { position: absolute; top: -130px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: rgba(35,196,171,.14); content: ""; }
.studio-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid rgba(255,255,255,.09); }
.window-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: rgba(255,255,255,.23); }
.live-pill { display: flex; align-items: center; gap: 7px; color: #9ee3d8; font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #3cd9a1; box-shadow: 0 0 0 5px rgba(60,217,161,.12); }
.task-title { position: relative; display: flex; align-items: center; gap: 13px; padding: 29px 0 20px; }
.task-icon { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #23b7a2, #55d6bf); color: var(--ink-deep); font-weight: 900; }
.task-title small, .task-title strong { display: block; }
.task-title small { margin-bottom: 4px; color: #83a5a8; font-size: 10px; }
.task-title strong { font-size: 14px; }
.task-state { margin-left: auto; padding: 6px 9px; border-radius: 7px; background: rgba(245,157,98,.14); color: #ffb887; font-size: 10px; font-weight: 800; }
.waveform { display: flex; align-items: center; gap: 4px; height: 105px; padding: 15px 10px; border-radius: 15px; background: rgba(255,255,255,.04); }
.waveform i { flex: 1; height: 30%; border-radius: 99px; background: linear-gradient(180deg, #66e3d1, #1c947f); opacity: .82; }
.waveform i:nth-child(2n) { height: 61%; }.waveform i:nth-child(3n) { height: 85%; }.waveform i:nth-child(5n) { height: 42%; }.waveform i:nth-child(7n) { height: 96%; }
.progress-copy { display: flex; justify-content: space-between; margin: 19px 0 9px; color: #aac2c4; font-size: 11px; }
.progress-copy strong { color: white; }
.progress { overflow: hidden; height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); }
.progress span { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1fbeaa, #a5eac8); }
.studio-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 24px; overflow: hidden; border-radius: 12px; background: rgba(255,255,255,.08); }
.studio-metrics div { padding: 14px; background: #0d333b; }
.studio-metrics small, .studio-metrics strong { display: block; }
.studio-metrics small { margin-bottom: 5px; color: #759a9e; font-size: 9px; }.studio-metrics strong { font-size: 11px; }

.section { padding-top: 110px; padding-bottom: 110px; }
.section-heading { margin-bottom: 50px; }
.section-heading h2 { margin-bottom: 0; font-size: clamp(34px, 4vw, 50px); line-height: 1.16; letter-spacing: -.04em; }
.section-heading > p { color: var(--muted); line-height: 1.85; }
.split-heading { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 80px; }
.split-heading > p { margin-bottom: 0; }
.centered { max-width: 680px; margin-right: auto; margin-left: auto; text-align: center; }
.centered .eyebrow { justify-content: center; }.centered h2 { margin-bottom: 15px; }.centered p { margin-bottom: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { min-height: 440px; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); transition: transform .32s ease, border-color .32s ease, background .32s ease, box-shadow .32s ease; }
.feature-card:first-child { background: var(--teal-pale); }
.feature-grid:has(.feature-card:hover) .feature-card:first-child:not(:hover),.feature-grid:has(.feature-card:focus-within) .feature-card:first-child:not(:focus-within) { background: var(--paper); }
.feature-card:hover,.feature-card:focus-within { border-color: rgba(22,168,149,.5); background: var(--teal-pale); box-shadow: 0 24px 48px rgba(8,38,45,.16); transform: translateY(-8px); }
.feature-media { overflow: hidden; margin: 0; background: var(--ink-deep); aspect-ratio: 16 / 9; }.feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease; }.feature-card:hover .feature-media img,.feature-card:focus-within .feature-media img { filter: saturate(1.12) contrast(1.04); transform: scale(1.065); }.feature-card-body { padding: 24px 27px 28px; }
.feature-icon { display: grid; width: 48px; height: 48px; margin-bottom: 24px; place-items: center; border-radius: 10px; background: var(--ink-deep); color: white; font-size: 18px; font-weight: 850; }
.feature-kicker { color: var(--teal-dark); font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.feature-card h3 { margin: 10px 0 14px; font-size: 21px; letter-spacing: -.025em; }
.feature-card h3 a { color: var(--ink); font-size: inherit; text-decoration: none; }.feature-card h3 a:hover,.feature-card h3 a:focus-visible { color: var(--teal-dark); }
.feature-card p { min-height: 76px; margin-bottom: 24px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.feature-card a { color: var(--teal-dark); font-size: 12px; font-weight: 800; text-decoration: none; }
body[data-page="home"] main { --home-scene-overlap: clamp(140px,12vw,190px); background: #edf4f3; }
.home-services-section,.workflow-section { position: relative; overflow: hidden; margin-top: calc(-1 * var(--home-scene-overlap)); padding-top: calc(110px + var(--home-scene-overlap)); isolation: isolate; }
.home-services-section::after,.workflow-section::after { position: absolute; z-index: 0; top: calc(var(--home-scene-overlap) - 70px); right: -4%; left: -4%; height: 140px; background: rgba(237,244,243,.1); -webkit-backdrop-filter: blur(22px) saturate(.94); backdrop-filter: blur(22px) saturate(.94); -webkit-mask-image: linear-gradient(180deg,transparent,#000 34%,#000 66%,transparent); mask-image: linear-gradient(180deg,transparent,#000 34%,#000 66%,transparent); content: ""; pointer-events: none; will-change: opacity,transform; animation: homeTransitionDrift 8.5s ease-in-out infinite alternate; }
.home-section-backdrop { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: none; transform: none; }
.home-section-shade { position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.home-section-content { position: relative; z-index: 1; }
.home-services-section { min-height: 850px; background: transparent; color: var(--ink); }
.home-services-section .home-section-backdrop { object-position: 50% 50%; }
.home-services-section .home-section-backdrop,.home-services-section .home-section-shade { -webkit-mask-image: linear-gradient(180deg,transparent 0,#000 32px),radial-gradient(ellipse 108% var(--home-scene-overlap) at 50% 0,transparent 0,rgba(0,0,0,.16) 30%,rgba(0,0,0,.72) 68%,#000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg,transparent 0,#000 32px),radial-gradient(ellipse 108% var(--home-scene-overlap) at 50% 0,transparent 0,rgba(0,0,0,.16) 30%,rgba(0,0,0,.72) 68%,#000 100%); mask-composite: intersect; }
.home-services-section .home-section-shade { background: linear-gradient(180deg,rgba(237,244,243,0) 0%,rgba(239,246,245,.12) 18%,rgba(236,244,243,.2) 54%,rgba(235,243,242,.82) 100%); }
.home-services-section .section-heading h2 { color: var(--ink-deep); }.home-services-section .eyebrow { color: var(--teal-dark); }
.home-services-section .feature-card { border-color: rgba(126,177,171,.28); background: rgba(252,254,253,.92); box-shadow: 0 26px 62px rgba(30,73,76,.14); backdrop-filter: blur(12px); }
.home-services-section .feature-card:first-child { background: rgba(223,245,239,.96); }
.home-services-section .feature-grid:has(.feature-card:hover) .feature-card:first-child:not(:hover),.home-services-section .feature-grid:has(.feature-card:focus-within) .feature-card:first-child:not(:focus-within) { background: rgba(248,252,251,.95); }
.home-motion-services::before { position: absolute; top: 2%; right: 8%; width: 38vw; height: 58vw; max-height: 700px; border: 1px solid rgba(83,211,191,.16); border-radius: 50%; background: radial-gradient(ellipse at center,rgba(99,222,203,.1),transparent 64%); filter: blur(2px); content: ""; animation: homeAmbientBreath 6.5s ease-in-out infinite; }
.home-motion-services::after { position: absolute; top: 9%; right: 2%; width: 52%; height: 58%; background: linear-gradient(118deg,transparent 32%,rgba(220,255,249,.2) 48%,rgba(94,219,199,.08) 52%,transparent 67%); filter: blur(14px); content: ""; will-change: opacity,transform; animation: homeRibbonDrift 11s -3s ease-in-out infinite; }
.home-motion-services span { top: 36%; right: 5%; width: 43%; height: 3px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg,transparent,rgba(70,201,181,.42),rgba(243,169,117,.24),transparent); transform: rotate(5deg); }
.home-motion-services i { width: 10px; height: 10px; border-radius: 50%; background: #66dbc8; box-shadow: 0 0 0 8px rgba(72,204,183,.1),0 0 28px rgba(72,204,183,.38); animation: homeSignalPulse 3.2s ease-in-out infinite; }
.home-motion-services i:nth-of-type(1) { top: 32%; right: 31%; }.home-motion-services i:nth-of-type(2) { top: 39%; right: 9%; background: #f3ad7d; animation-delay: -1.6s; }
.workflow-section { min-height: 720px; background: transparent; color: var(--ink); }
.workflow-section .home-section-backdrop { object-position: center 50%; }
.workflow-section .home-section-backdrop,.workflow-section .home-section-shade { -webkit-mask-image: linear-gradient(180deg,transparent 0,#000 32px),radial-gradient(ellipse 108% var(--home-scene-overlap) at 50% 0,transparent 0,rgba(0,0,0,.14) 30%,rgba(0,0,0,.68) 68%,#000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg,transparent 0,#000 32px),radial-gradient(ellipse 108% var(--home-scene-overlap) at 50% 0,transparent 0,rgba(0,0,0,.14) 30%,rgba(0,0,0,.68) 68%,#000 100%); mask-composite: intersect; }
.workflow-section .home-section-shade { background: linear-gradient(180deg,rgba(235,243,242,0) 0%,rgba(237,245,244,.12) 20%,rgba(238,246,245,.38) 66%,rgba(232,241,240,.92) 100%); }
.workflow-heading { margin-bottom: 62px; }.workflow-heading .eyebrow { color: var(--teal-dark); }.workflow-heading h2 { font-size: clamp(38px,4.6vw,58px); color: var(--ink-deep); }
.home-motion-flow span { top: 39%; right: max(5%,calc((100vw - 1180px)/2)); left: max(5%,calc((100vw - 1180px)/2)); height: 3px; overflow: hidden; border-radius: 99px; background: transparent; }
.home-motion-flow span::after { animation-duration: 7.2s; }
.home-motion-flow i { top: calc(39% - 4px); width: 10px; height: 10px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: #63d7c4; box-shadow: 0 0 0 7px rgba(73,204,184,.09),0 0 22px rgba(73,204,184,.35); animation: homeSignalPulse 3.5s ease-in-out infinite; }
.home-motion-flow i:nth-of-type(1) { left: 10%; }.home-motion-flow i:nth-of-type(2) { left: 30%; animation-delay: -.7s; }.home-motion-flow i:nth-of-type(3) { left: 50%; animation-delay: -1.4s; }.home-motion-flow i:nth-of-type(4) { left: 70%; animation-delay: -2.1s; }.home-motion-flow i:nth-of-type(5) { left: 90%; background: #f2aa78; animation-delay: -2.8s; }
.creation-flow { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.creation-flow::before { position: absolute; top: 35px; right: 7%; left: 7%; height: 1px; background: rgba(38,125,116,.25); content: ""; }
.creation-flow::after { position: absolute; top: 34px; left: 0; width: 18%; height: 3px; background: linear-gradient(90deg,transparent,#72dfce,transparent); content: ""; animation: creationFlowSweep 6s ease-in-out infinite; }
.creation-step { position: relative; z-index: 1; min-width: 0; padding-right: 28px; }
.creation-step:last-child { padding-right: 0; }
.creation-marker { display: grid; width: 70px; height: 70px; margin-bottom: 30px; place-items: center; border: 1px solid rgba(39,127,117,.34); border-radius: 50%; background: rgba(9,44,51,.94); color: white; text-decoration: none; box-shadow: 0 0 0 9px rgba(235,244,242,.82); transition: border-color .3s ease,background .3s ease,color .3s ease,transform .3s ease; }
.creation-step:nth-child(1) .creation-marker { animation: homeMarkerBeacon 7.5s 0s ease-in-out infinite; }.creation-step:nth-child(2) .creation-marker { animation: homeMarkerBeacon 7.5s 1.1s ease-in-out infinite; }.creation-step:nth-child(3) .creation-marker { animation: homeMarkerBeacon 7.5s 2.2s ease-in-out infinite; }.creation-step:nth-child(4) .creation-marker { animation: homeMarkerBeacon 7.5s 3.3s ease-in-out infinite; }.creation-step:nth-child(5) .creation-marker { animation: homeMarkerBeacon 7.5s 4.4s ease-in-out infinite; }
.creation-marker span { font-size: 17px; font-weight: 850; }.creation-marker i { position: absolute; top: 31px; left: 61px; width: 7px; height: 7px; border-radius: 50%; background: #72dfce; box-shadow: 0 0 0 6px rgba(114,223,206,.1); }
.creation-copy { padding-left: 2px; }.creation-copy small { color: var(--teal-dark); font-size: 9px; font-weight: 850; letter-spacing: .15em; }.creation-copy h3 { margin: 10px 0 13px; font-size: 22px; }.creation-title { color: var(--ink-deep); text-decoration: none; transition: color .3s ease; }.creation-copy p { max-width: 180px; margin-bottom: 0; color: #587276; font-size: 12px; line-height: 1.75; }
.creation-step:hover .creation-marker,.creation-step:focus-within .creation-marker { border-color: #72dfce; background: #72dfce; color: #062129; transform: translateY(-6px); }.creation-step:hover .creation-title,.creation-step:focus-within .creation-title { color: #8de8da; }.creation-marker:focus-visible,.creation-title:focus-visible { outline: 2px solid #8de8da; outline-offset: 5px; }
.status-dialog { width: min(360px,calc(100% - 32px)); }.status-dialog .dialog-inner { text-align: center; }.status-dialog h2 { margin: 14px 0 24px; }.status-mark { display: grid; width: 54px; height: 54px; margin: 0 auto; place-items: center; border-radius: 50%; background: var(--teal-pale); color: var(--teal-dark); font-size: 24px; font-weight: 900; }
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 55px 62px; border-radius: 26px; background: var(--ink-deep); color: white; }
.cta-panel > div:first-child { max-width: 700px; }.cta-panel span { color: #79d8c9; font-size: 9px; font-weight: 850; letter-spacing: .14em; }.cta-panel h2 { margin: 12px 0 13px; font-size: 34px; letter-spacing: -.035em; }.cta-panel p { margin-bottom: 0; color: #9eb8bb; font-size: 13px; line-height: 1.7; }.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 15px; flex: 0 0 auto; }.text-link { color: #afd2d3; font-size: 11px; font-weight: 700; text-decoration: none; }

.page-hero { padding: 84px 0 66px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 10%, rgba(22,168,149,.12), transparent 26rem), white; }
.page-hero .eyebrow { margin-bottom: 17px; }.page-hero h1 { max-width: 780px; margin-bottom: 17px; font-size: clamp(40px, 5vw, 62px); letter-spacing: -.05em; }.page-hero p { max-width: 680px; margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.service-stack { display: grid; gap: 18px; }
.service-row { display: grid; grid-template-columns: 80px 1fr .9fr; gap: 36px; align-items: center; padding: 42px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.service-row .number { color: #b5c8c6; font-size: 25px; font-weight: 850; }.service-row h2 { margin-bottom: 12px; font-size: 28px; letter-spacing: -.035em; }.service-row p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.check-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }.check-list li { position: relative; padding-left: 25px; color: #39565c; font-size: 13px; }.check-list li::before { position: absolute; left: 0; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--teal-pale); color: var(--teal-dark); font-size: 10px; content: "✓"; }
.price-panel { display: grid; grid-template-columns: .72fr 1.28fr; gap: 20px; }
.billing-copy, .package-preview { padding: 42px; border: 1px solid var(--line); border-radius: 20px; background: white; }.billing-copy h2 { font-size: 32px; letter-spacing: -.04em; }.billing-copy p { color: var(--muted); font-size: 13px; line-height: 1.8; }.billing-copy .big-number { margin: 34px 0 6px; font-size: 42px; font-weight: 850; letter-spacing: -.05em; }.billing-copy small { color: var(--muted); }.mini-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 100%; }.mini-package { display: flex; flex-direction: column; justify-content: space-between; padding: 25px; border-radius: 15px; background: #f0f8f5; }.mini-package.recommended { background: var(--ink-deep); color: white; }.mini-package span { font-size: 11px; font-weight: 750; }.mini-package strong { display: block; margin: 15px 0 4px; font-size: 24px; }.mini-package small { color: #72878b; }.mini-package.recommended small { color: #9db8ba; }

.recharge-main { padding: 58px 0 100px; }
.recharge-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }.recharge-heading h1 { margin-bottom: 8px; font-size: 38px; letter-spacing: -.04em; }.recharge-heading p { margin-bottom: 0; color: var(--muted); font-size: 13px; }.secure-note { display: flex; align-items: center; gap: 7px; color: var(--teal-dark); font-size: 11px; font-weight: 750; }
.recharge-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.panel { padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: white; }.panel + .panel { margin-top: 18px; }.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 25px; }.panel-title h2 { margin-bottom: 0; font-size: 18px; }.panel-title span { color: var(--muted); font-size: 11px; }
.account-guest { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border-radius: 13px; background: #f3f8f6; }.account-guest p { margin-bottom: 0; color: var(--muted); font-size: 12px; }.account-summary { display: none; grid-template-columns: 1fr auto auto; align-items: center; gap: 22px; padding: 18px 20px; border-radius: 13px; background: #f3f8f6; }.account-summary.show { display: grid; }.account-summary small, .account-summary strong { display: block; }.account-summary small { margin-bottom: 5px; color: var(--muted); font-size: 10px; }.account-summary strong { font-size: 14px; }.credit-number { color: var(--teal-dark); font-size: 23px !important; }.link-button { padding: 0; border: 0; background: transparent; color: var(--teal-dark); font-size: 11px; font-weight: 750; cursor: pointer; }
.package-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.package-option { position: relative; padding: 22px; border: 1.5px solid var(--line); border-radius: 14px; background: white; cursor: pointer; transition: border .15s, background .15s; }.package-option:hover, .package-option.selected { border-color: var(--teal); background: #f3fbf8; }.package-option input { position: absolute; opacity: 0; pointer-events: none; }.package-option .badge { position: absolute; top: -9px; right: 12px; padding: 4px 8px; border-radius: 99px; background: var(--orange); color: white; font-size: 9px; font-weight: 800; }.package-option span, .package-option strong, .package-option small { display: block; }.package-option span { color: var(--muted); font-size: 10px; }.package-option strong { margin: 13px 0 4px; font-size: 25px; letter-spacing: -.035em; }.package-option small { color: #71868a; font-size: 10px; }
.payment-method { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--teal); border-radius: 13px; background: #f4fbf9; }.alipay-mark { display: grid; width: 41px; height: 41px; place-items: center; border-radius: 10px; background: #1677ff; color: white; font-size: 18px; font-weight: 900; }.payment-method strong, .payment-method small { display: block; }.payment-method strong { margin-bottom: 4px; font-size: 13px; }.payment-method small { color: var(--muted); font-size: 10px; }.selected-mark { display: grid; width: 20px; height: 20px; margin-left: auto; place-items: center; border-radius: 50%; background: var(--teal); color: white; font-size: 11px; }
.order-card { position: sticky; top: 98px; padding: 28px; border-radius: 18px; background: var(--ink-deep); color: white; box-shadow: var(--shadow); }.order-card h2 { margin-bottom: 25px; font-size: 18px; }.order-line { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.09); color: #a7bfc1; font-size: 12px; }.order-line strong { color: white; }.order-total { display: flex; align-items: flex-end; justify-content: space-between; margin: 25px 0; }.order-total span { color: #a7bfc1; font-size: 11px; }.order-total strong { font-size: 31px; letter-spacing: -.04em; }.order-card .button { background: #40c8b2; color: var(--ink-deep); }.order-hint { margin: 15px 0 0; color: #809fa2; font-size: 9px; line-height: 1.7; text-align: center; }.message { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 11px; line-height: 1.6; }.message.show { display: block; }.message.error { background: #fff0ec; color: #9b4937; }.message.success { background: #e9f8f2; color: #087764; }.order-card .message.error { background: rgba(255,128,100,.13); color: #ffc1ae; }.order-card .message.success { background: rgba(65,211,171,.12); color: #8ee4cc; }
.auth-dialog { width: min(430px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 30px 100px rgba(8,38,45,.28); }.auth-dialog::backdrop { background: rgba(5,28,34,.58); backdrop-filter: blur(4px); }.dialog-inner { padding: 30px; }.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }.dialog-head h2 { margin-bottom: 6px; font-size: 23px; }.dialog-head p { margin-bottom: 0; color: var(--muted); font-size: 11px; }.dialog-close { width: 31px; height: 31px; border: 0; border-radius: 50%; background: #edf4f2; color: var(--ink); cursor: pointer; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; padding: 4px; border-radius: 10px; background: #edf4f2; }.auth-tab { padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }.auth-tab.active { background: white; color: var(--ink); box-shadow: 0 4px 12px rgba(12,60,64,.08); }.field { display: grid; gap: 7px; margin-bottom: 14px; }.field label { font-size: 11px; font-weight: 700; }.field input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; outline: none; }.field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(22,168,149,.09); }

.site-footer { padding: 54px 0 20px; border-top: 1px solid var(--line); background: white; }.footer-grid { display: grid; grid-template-columns: 1fr 180px 180px; gap: 70px; padding-bottom: 38px; }.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }.footer-grid > div > strong { margin-bottom: 3px; font-size: 11px; }.footer-grid a { color: var(--muted); font-size: 11px; text-decoration: none; }.footer-brand p { max-width: 330px; margin: 16px 0 0; color: var(--muted); font-size: 11px; }.footer-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }.footer-status i { width: 7px; height: 7px; border-radius: 50%; background: #d79b47; }.footer-status.online { color: #087764; }.footer-status.online i { background: #16b984; box-shadow: 0 0 0 4px rgba(22,185,132,.1); }.footer-status.offline { color: #a14e42; }.footer-status.offline i { background: #d76254; }.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 19px; border-top: 1px solid var(--line); color: #8ca0a3; font-size: 9px; }.footer-bottom > :last-child { text-align: right; }.footer-bottom a { color: inherit; font-size: inherit; text-decoration: none; transition: color .15s; }.footer-bottom a:hover { color: var(--teal-dark); }.studio-legal-footer { padding: 0 0 20px; }.studio-legal-footer .footer-bottom { border-top: 0; }

@media (max-width: 900px) {
  .nav { display: none; }.header-action { margin-left: auto; }.hero { grid-template-columns: 1fr; min-height: 0; }.studio-card { max-width: 600px; }.feature-grid { grid-template-columns: 1fr 1fr; }.split-heading { grid-template-columns: 1fr; gap: 22px; }.service-row { grid-template-columns: 55px 1fr; }.service-row .check-list { grid-column: 2; }.price-panel { grid-template-columns: 1fr; }.recharge-layout { grid-template-columns: 1fr; }.package-grid { grid-template-columns: repeat(2, 1fr); }.order-card { position: static; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .shell { width: min(100% - 28px, 1180px); }.header-inner { min-height: 66px; }.brand small { display: none; }.header-action { padding: 9px 12px; font-size: 11px; }.hero { gap: 42px; padding-top: 50px; padding-bottom: 60px; }.hero h1 { font-size: 42px; }.feature-grid, .package-grid, .mini-packages { grid-template-columns: 1fr; }.section { padding-top: 75px; padding-bottom: 75px; }.feature-card { min-height: auto; }.cta-panel { align-items: flex-start; flex-direction: column; padding: 35px 27px; }.cta-panel h2 { font-size: 28px; }.cta-actions { align-items: flex-start; }.studio-metrics { grid-template-columns: 1fr; }.page-hero { padding: 55px 0 48px; }.service-row { grid-template-columns: 1fr; padding: 27px; }.service-row .check-list { grid-column: auto; }.recharge-heading { align-items: flex-start; flex-direction: column; }.panel { padding: 22px; }.account-guest { align-items: flex-start; flex-direction: column; }.account-summary { grid-template-columns: 1fr 1fr; }.account-summary > div:first-child { grid-column: 1 / -1; }.footer-grid { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; }.footer-bottom { grid-template-columns: 1fr; align-items: flex-start; gap: 8px; }.footer-bottom > :last-child { text-align: left; }
}

/* Cloud studio */
.header-button { border: 0; cursor: pointer; }
.studio-body { overflow-x: hidden; background: #eef5f3; }
.studio-page { min-height: calc(100vh - 76px); padding: 24px; }
.studio-shell { display: grid; grid-template-columns: 260px minmax(560px, 1fr) 330px; gap: 22px; width: min(1540px, 100%); margin: 0 auto; align-items: start; }
.workspace-sidebar, .workspace-summary { position: sticky; top: 100px; }
.workspace-sidebar { overflow: hidden; border: 1px solid rgba(16,45,52,.08); border-radius: 20px; background: var(--ink-deep); color: white; box-shadow: 0 18px 50px rgba(8,38,45,.12); }
.workspace-intro { position: relative; overflow: hidden; padding: 27px 24px 24px; border-bottom: 1px solid rgba(255,255,255,.09); }
.workspace-intro::after { position: absolute; top: -70px; right: -70px; width: 170px; height: 170px; border-radius: 50%; background: rgba(44,205,178,.15); content: ""; }
.workspace-label { color: #69cfbf; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.workspace-intro h1 { margin: 9px 0 8px; font-size: 23px; letter-spacing: -.035em; }
.workspace-intro p { margin-bottom: 0; color: #8eabad; font-size: 10px; line-height: 1.7; }
.workspace-steps { padding: 12px; }
.workspace-steps a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 11px; color: #809fa2; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease; }
.workspace-steps a:hover { color: white; transform: translateX(2px); }
.workspace-steps a.active { background: rgba(50,202,178,.12); color: white; }
.workspace-steps a.group-active { background: rgba(50,202,178,.06); color: white; }
.workspace-steps a.workspace-step-sub { width: calc(100% - 26px); margin-left: 26px; padding: 9px 12px; }
.workspace-steps b { display: grid; flex: 0 0 auto; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; font-size: 8px; }
.workspace-steps a.workspace-step-sub b { width: 34px; height: 25px; border-style: dashed; }
.workspace-steps a.active b { border-color: transparent; background: #48cbb6; color: var(--ink-deep); }
.workspace-steps strong, .workspace-steps small { display: block; }
.workspace-steps strong { margin-bottom: 3px; font-size: 10px; }.workspace-steps small { color: #6f8d91; font-size: 8px; }
.workspace-help { margin: 0 12px 12px; padding: 17px; border-radius: 12px; background: rgba(255,255,255,.045); }
.workspace-help strong { font-size: 9px; }.workspace-help p { margin: 7px 0 11px; color: #78979a; font-size: 8px; line-height: 1.7; }.workspace-help a { color: #61d3c1; font-size: 8px; font-weight: 750; text-decoration: none; }
.workspace-main { min-width: 0; }
.workspace-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; margin-bottom: 15px; padding: 0 4px; }
.breadcrumb { display: block; margin-bottom: 6px; color: #7b9296; font-size: 8px; font-weight: 750; letter-spacing: .05em; }
.workspace-topbar h2 { margin-bottom: 0; font-size: 24px; letter-spacing: -.035em; }
.cloud-state { display: flex; align-items: center; gap: 10px; min-width: 165px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.75); }
.cloud-state > i { width: 9px; height: 9px; border-radius: 50%; background: #d99c47; box-shadow: 0 0 0 5px rgba(217,156,71,.1); }
.cloud-state span, .cloud-state small, .cloud-state strong { display: block; }.cloud-state small { margin-bottom: 2px; color: var(--muted); font-size: 7px; }.cloud-state strong { font-size: 9px; }
.cloud-state.online > i { background: #18b98a; box-shadow: 0 0 0 5px rgba(24,185,138,.11); animation: statusPulse 2s ease-in-out infinite; }.cloud-state.offline > i { background: #d96a58; box-shadow: 0 0 0 5px rgba(217,106,88,.1); }
.auth-wall { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; padding: 23px 25px; border: 1px solid #cfe4df; border-radius: 17px; background: linear-gradient(105deg,#e2f7f1,#f9fcfb); box-shadow: 0 14px 40px rgba(16,75,76,.07); transition: opacity .25s ease, transform .25s ease; }
.auth-wall.hidden { display: none; }.auth-wall-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--ink-deep); color: #70decd; font-size: 18px; }.auth-wall > div:nth-child(2) { flex: 1; }.auth-wall h2 { margin-bottom: 5px; font-size: 16px; }.auth-wall p { margin-bottom: 0; color: var(--muted); font-size: 9px; }.auth-wall .button { min-height: 42px; font-size: 10px; }
.workspace-form { display: grid; gap: 15px; transition: opacity .2s ease; }.workspace-form.is-locked { opacity: .55; pointer-events: none; user-select: none; }
.workspace-card { scroll-margin-top: 100px; padding: 25px; border: 1px solid rgba(16,45,52,.09); border-radius: 18px; background: white; box-shadow: 0 10px 32px rgba(15,64,68,.045); transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.workspace-card:hover { border-color: rgba(22,168,149,.22); box-shadow: 0 18px 44px rgba(15,64,68,.07); }
.workspace-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.workspace-card-head > div > span { display: block; margin-bottom: 5px; color: var(--teal-dark); font-size: 7px; font-weight: 900; letter-spacing: .14em; }.workspace-card-head h3 { margin-bottom: 0; font-size: 16px; letter-spacing: -.02em; }.counter { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.quiet-button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfa; color: #60777b; font-size: 8px; font-weight: 750; cursor: pointer; transition: background .15s, color .15s; }.quiet-button:hover { background: var(--teal-pale); color: var(--teal-dark); }
.script-box { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fbfdfc; transition: border-color .2s, box-shadow .2s; }.script-box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(22,168,149,.08); }.script-box textarea { display: block; width: 100%; min-height: 220px; padding: 20px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.9; }.script-box textarea::placeholder { color: #9aadaf; }.script-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); color: #8ba0a3; font-size: 8px; }.script-tool-actions { display: flex; align-items: center; gap: 12px; }.text-tool { border: 0; background: none; color: var(--teal-dark); font-size: 8px; font-weight: 750; cursor: pointer; }.document-upload-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }.document-upload-button span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--teal-dark); font-size: 8px; font-weight: 800; cursor: pointer; }.document-upload-button input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }.document-upload-button input:disabled + span { cursor: wait; opacity: .55; }.document-upload-status { display: none; min-height: 34px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 8px; font-weight: 700; }.document-upload-status:not(:empty) { display: block; }.document-upload-status.loading { color: var(--muted); }.document-upload-status.success { color: #087a6b; background: #f1faf7; }.document-upload-status.error { color: #b23a36; background: #fff6f5; }
.voice-loading { padding: 25px; border-radius: 12px; background: #f4f8f7; color: var(--muted); font-size: 9px; text-align: center; animation: softBlink 1.5s ease-in-out infinite; }
.voice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.voice-card { overflow: hidden; border: 1.5px solid var(--line); border-radius: 13px; background: #fff; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }.voice-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,70,72,.08); }.voice-card.selected { border-color: var(--teal); background: #f5fcfa; box-shadow: 0 0 0 2px rgba(22,168,149,.07); }
.voice-select { display: flex; align-items: center; gap: 9px; width: 100%; padding: 13px; border: 0; background: transparent; text-align: left; cursor: pointer; }.voice-avatar { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #e7f4f0; color: var(--teal-dark); font-size: 8px; font-weight: 900; }.voice-select > span:nth-child(2) { min-width: 0; flex: 1; }.voice-select strong, .voice-select small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.voice-select strong { margin-bottom: 4px; font-size: 9px; }.voice-select small { color: var(--muted); font-size: 7px; }.voice-select i { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--teal); color: white; font-size: 8px; font-style: normal; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }.voice-card.selected .voice-select i { opacity: 1; transform: scale(1); }
.voice-actions { display: flex; border-top: 1px solid var(--line); }.voice-actions button { flex: 1; padding: 7px; border: 0; border-right: 1px solid var(--line); background: rgba(250,252,251,.8); color: #698084; font-size: 7px; cursor: pointer; }.voice-actions button:last-child { border-right: 0; }.voice-actions button:hover { background: var(--teal-pale); color: var(--teal-dark); }
.voice-upload-box { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; padding: 16px 18px; border: 1px dashed #bcd4d0; border-radius: 13px; background: #f8fbfa; }.voice-upload-box > div:first-child { flex: 1; }.voice-upload-box strong { display: block; margin-bottom: 4px; font-size: 9px; }.voice-upload-box p { margin-bottom: 0; color: var(--muted); font-size: 7px; }.upload-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }.upload-button span { display: inline-flex; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--teal-dark); font-size: 8px; font-weight: 800; cursor: pointer; }.upload-form { display: none; flex-basis: 100%; align-items: center; gap: 7px; width: 100%; animation: slideDown .22s ease; }.upload-form.show { display: flex; }.upload-form input { flex: 1; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; outline: 0; font-size: 8px; }.upload-form .button { min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 8px; }
.reference-upload-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border-top: 1px solid var(--line); background: #f8fbfa; }.reference-upload-box > div:first-child { flex: 1; min-width: 180px; }.reference-upload-box strong { display: block; margin-bottom: 4px; font-size: 9px; }.reference-upload-box p { margin: 0; color: var(--muted); font-size: 7px; }.reference-list { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }.reference-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px; border: 1px solid #bcd4d0; border-radius: 7px; background: white; color: var(--teal-dark); font-size: 8px; }.reference-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.reference-chip button { border: 0; background: none; color: #6d8585; cursor: pointer; font-size: 14px; line-height: 1; }
.inline-message { display: none; margin-top: 11px; padding: 10px 12px; border-radius: 9px; font-size: 8px; line-height: 1.6; animation: slideDown .2s ease; }.inline-message.show { display: block; }.inline-message.error { background: #fff0ec; color: #9b4937; }.inline-message.success { background: #e8f8f2; color: #087764; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.setting-field { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfc; }.setting-field > span { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }.setting-field strong { font-size: 9px; }.setting-field small { color: var(--muted); font-size: 7px; }.setting-field select { width: 100%; height: 35px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font-size: 8px; outline: none; }.range-field > div { display: flex; align-items: center; gap: 12px; }.range-field input { flex: 1; accent-color: var(--teal); }.range-field output { min-width: 39px; padding: 5px 6px; border-radius: 6px; background: var(--teal-pale); color: var(--teal-dark); font-size: 8px; font-weight: 850; text-align: center; }
.current-task { display: flex; align-items: center; gap: 18px; min-height: 105px; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: #f8fbfa; }.current-task.empty { color: var(--muted); }.empty-illustration { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #e8f3f0; color: #82a39f; font-size: 18px; }.current-task.empty strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 10px; }.current-task.empty p { margin-bottom: 0; font-size: 8px; }.task-progress-ring { display: grid; flex: 0 0 auto; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) 72%,#deebe8 0); box-shadow: inset 0 0 0 7px #f8fbfa; }.task-progress-ring strong { font-size: 10px; }.task-progress-copy { min-width: 0; flex: 1; }.task-progress-copy > span { color: var(--teal-dark); font-size: 7px; font-weight: 850; }.task-progress-copy > strong { display: block; margin: 5px 0 10px; font-size: 10px; }.task-progress-copy > small { display: block; margin-top: 7px; color: var(--muted); font-size: 7px; }.task-bar { overflow: hidden; height: 4px; border-radius: 99px; background: #dfecea; }.task-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal),#72d9c4); transition: width .5s ease; }.result-downloads { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }.result-downloads button { padding: 6px 8px; border: 1px solid #bcded7; border-radius: 7px; background: white; color: var(--teal-dark); font-size: 7px; cursor: pointer; }
.job-list { margin-top: 15px; }.history-head, .job-list article { display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: 20px; }.history-head { padding: 0 10px 8px; color: var(--muted); font-size: 7px; }.job-list article { padding: 11px 10px; border-top: 1px solid var(--line); }.job-list article > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.job-list strong, .job-list small { display: block; }.job-list strong { font-size: 8px; }.job-list small { margin-top: 3px; color: var(--muted); font-size: 7px; }.job-status { padding: 4px 6px; border-radius: 6px; background: #eef4f2; color: var(--muted); font-size: 7px; }.job-status.completed { background: #e5f8f0; color: #087764; }.job-status.running,.job-status.finalizing { background: #e7f5fb; color: #28758e; }.job-status.failed { background: #ffede9; color: #9a493b; }
.workspace-summary { display: grid; gap: 15px; }.account-mini-card, .quote-card { border-radius: 17px; box-shadow: 0 13px 38px rgba(13,62,66,.08); }.account-mini-card { padding: 21px; border: 1px solid rgba(16,45,52,.08); background: white; }.mini-card-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 8px; }.account-dot { width: 7px; height: 7px; border-radius: 50%; background: #17b987; box-shadow: 0 0 0 4px rgba(23,185,135,.1); }.account-mini-card > strong { display: block; overflow: hidden; margin: 9px 0 19px; text-overflow: ellipsis; font-size: 10px; white-space: nowrap; }.balance-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; padding: 14px; border-radius: 11px; background: #edf8f4; }.balance-row span { color: var(--muted); font-size: 8px; }.balance-row b { color: var(--teal-dark); font-size: 23px; line-height: 1; }.quota-row { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; }.quota-row strong { color: var(--ink); }.account-mini-card > a { display: flex; justify-content: space-between; margin-top: 15px; color: var(--teal-dark); font-size: 8px; font-weight: 850; text-decoration: none; }
.quote-card { padding: 23px; background: var(--ink-deep); color: white; }.summary-kicker { color: #6ed9c8; font-size: 7px; font-weight: 900; letter-spacing: .13em; }.quote-card h3 { margin: 8px 0 20px; font-size: 16px; }.quote-line { display: flex; justify-content: space-between; padding: 8px 0; color: #8ca9ac; font-size: 8px; }.quote-line strong { color: white; }.quote-divider { height: 1px; margin: 13px 0 17px; background: rgba(255,255,255,.09); }.quote-card .button { min-height: 44px; background: #47cbb5; color: var(--ink-deep); font-size: 9px; }.quote-card > p { margin: 13px 0 0; color: #6e9093; font-size: 7px; line-height: 1.7; text-align: center; }.quote-card .inline-message.error { background: rgba(255,108,85,.13); color: #ffb5a5; }.quote-card .inline-message.success { background: rgba(63,207,168,.13); color: #83e1c8; }

/* Full video workflow */
.pool-state, .local-badge { padding: 6px 9px; border-radius: 7px; background: #eef4f2; color: var(--muted); font-size: 8px; font-weight: 800; }
.pool-state.online { background: #e5f8f0; color: #087764; }.pool-state.offline { background: #ffede9; color: #9a493b; }.pool-state.checking { color: #28758e; }
.story-controls { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 13px; }.number-input { width: 100%; height: 35px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font-size: 9px; outline: 0; }
#generate-storyboard { min-height: 39px; padding: 0 15px; font-size: 9px; }.agent-progress { display: flex; align-items: center; gap: 9px; min-height: 0; margin-top: 12px; color: var(--muted); font-size: 8px; }.agent-progress:not(:empty) { min-height: 38px; padding: 10px 12px; border: 1px solid #cfe6e1; border-radius: 10px; background: #f3faf8; }.agent-progress b { color: var(--teal-dark); }
.storyboard-grid { display: grid; gap: 9px; margin-top: 13px; }.story-card { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfc; }.story-number { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--ink-deep); color: #65d6c4; font-size: 8px; font-weight: 900; }.story-card input, .story-card textarea { display: block; width: 100%; border: 1px solid transparent; border-radius: 7px; outline: 0; background: transparent; color: var(--ink); font: inherit; }.story-card input { height: 30px; padding: 0 8px; font-size: 10px; font-weight: 850; }.story-card label { display: block; margin-top: 6px; color: var(--muted); font-size: 7px; font-weight: 750; }.story-card textarea { min-height: 54px; margin-top: 3px; padding: 7px 8px; resize: vertical; background: white; color: #52686c; font-size: 8px; font-weight: 500; line-height: 1.6; }.story-card input:focus, .story-card textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(22,168,149,.07); }
.asset-progress-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }.asset-progress-grid > div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc; }.asset-progress-grid span, .asset-progress-grid strong { display: block; }.asset-progress-grid span { margin-bottom: 4px; color: var(--muted); font-size: 7px; }.asset-progress-grid strong { margin-bottom: 8px; font-size: 9px; }.task-bar.image i { background: linear-gradient(90deg,#d29d3c,#f0c86c); }
.asset-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; }.asset-card { display: grid; grid-template-columns: 94px minmax(0,1fr); min-height: 90px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfc; }.asset-preview { display: grid; overflow: hidden; min-height: 90px; place-items: center; background: #e5efed; color: #6e898c; font-size: 8px; }.asset-preview img { width: 100%; height: 100%; object-fit: cover; }.asset-card > div:last-child { min-width: 0; padding: 11px; }.asset-card strong, .asset-card small { display: block; }.asset-card strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.asset-card small { display: -webkit-box; overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 7px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.asset-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }.asset-tags span { max-width: 100%; overflow: hidden; padding: 3px 5px; border-radius: 5px; background: #edf2f1; color: var(--muted); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }.asset-tags span.ready { background: #e2f6ee; color: #087764; }.asset-tags span.failed { background: #ffebe7; color: #9a493b; }
.asset-audio { display: block; width: 100%; height: 25px; margin-top: 7px; }
.local-badge { background: #e8f3f0; color: var(--teal-dark); }.compose-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(185px,.7fr); gap: 14px; }.video-stage { position: relative; overflow: hidden; min-width: 0; border-radius: 12px; background: #081f25; aspect-ratio: 16 / 9; }.video-stage canvas { display: block; width: 100%; height: 100%; object-fit: contain; }.video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #7e9a9d; font-size: 9px; text-align: center; }.video-placeholder.hidden { display: none; }.compose-actions { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfa; }.compose-actions > strong { display: block; font-size: 11px; }.compose-actions > p { margin: 8px 0 15px; color: var(--muted); font-size: 8px; line-height: 1.7; }.compose-actions .button { min-height: 39px; font-size: 8px; }.quiet-button.full { width: 100%; margin-top: 8px; }.project-import-button { display: flex; align-items: center; justify-content: center; min-height: 33px; }.project-import-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }.project-import-button span { cursor: pointer; }.project-import-button:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }.compose-progress { min-height: 15px; margin-top: 11px; color: var(--teal-dark); font-size: 8px; font-weight: 750; }
.online-video-viewer { margin-bottom: 18px; }.online-video-stage { position: relative; display: grid; overflow: hidden; min-height: 280px; place-items: center; border-radius: 14px; background: #081f25; aspect-ratio: 16 / 9; }.online-video-stage video { display: block; width: 100%; height: 100%; background: #081f25; object-fit: contain; }.online-video-stage video.hidden { display: none; }.online-video-empty { padding: 30px; color: #a7bcbe; text-align: center; }.online-video-empty.hidden { display: none; }.online-video-empty strong { display: block; color: white; font-size: 16px; }.online-video-empty p { margin: 8px 0 0; font-size: 12px; }.online-video-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }.online-video-actions .button { min-width: 190px; }.online-video-actions span { color: var(--muted); font-size: 12px; }.local-export-workflow { margin-top: 20px; border-top: 1px solid var(--line); }.local-export-workflow > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 3px; cursor: pointer; list-style: none; }.local-export-workflow > summary::-webkit-details-marker { display: none; }.local-export-workflow > summary strong,.local-export-workflow > summary small { display: block; }.local-export-workflow > summary strong { font-size: 14px; }.local-export-workflow > summary small { margin-top: 4px; color: var(--muted); font-size: 11px; }.local-export-workflow > summary b { color: var(--teal-dark); font-size: 12px; }.local-export-workflow[open] > summary b { font-size: 0; }.local-export-workflow[open] > summary b::after { font-size: 12px; content: "收起"; }

/* Default server-side MP4 workflow */
.one-click-card { border-color: rgba(22,168,149,.36); background: linear-gradient(180deg,#fff 0%,#f5fbf9 100%); box-shadow: 0 18px 50px rgba(8,75,73,.1); }
.one-click-badge { padding: 6px 10px; border-radius: 7px; background: var(--teal-pale); color: var(--teal-dark); font-size: 12px; font-weight: 850; }
.one-click-lead { max-width: 680px; margin: -3px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.one-click-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }.one-click-actions .button { min-width: 230px; min-height: 46px; }.one-click-actions .quiet-button { padding: 0 15px; }
.video-job { padding: 18px; border: 1px solid #cfe2df; border-radius: 8px; background: white; }.video-job.empty { color: var(--muted); }.video-job.empty strong { color: var(--ink); font-size: 15px; }.video-job.empty p { margin: 5px 0 0; font-size: 13px; }
.video-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.video-job-head span,.video-job-head strong { display: block; }.video-job-head span { color: var(--teal-dark); font-size: 12px; font-weight: 800; }.video-job-head strong { margin-top: 5px; font-size: 15px; }.video-job-head > b { color: var(--ink-deep); font-size: 22px; }
.video-job-bar { overflow: hidden; height: 7px; margin: 14px 0 17px; border-radius: 99px; background: #deebe8; }.video-job-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#13a58f,#68cfb7); transition: width .45s ease; }
.video-job-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }.video-job-steps li { display: flex; min-width: 0; align-items: flex-start; gap: 7px; color: #788c90; }.video-job-steps i { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 3px; border: 2px solid #bfd0cd; border-radius: 50%; background: white; }.video-job-steps li.running i,.video-job-steps li.in_progress i { border-color: var(--teal); box-shadow: inset 0 0 0 2px white; background: var(--teal); }.video-job-steps li.completed i,.video-job-steps li.succeeded i { border-color: var(--teal-dark); background: var(--teal-dark); }.video-job-steps li.failed i { border-color: #b95142; background: #b95142; }.video-job-steps strong,.video-job-steps small { display: block; overflow-wrap: anywhere; }.video-job-steps strong { font-size: 12px; }.video-job-steps small { margin-top: 3px; font-size: 10px; line-height: 1.35; }
.video-job-meta,.video-job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }.video-job-meta { justify-content: space-between; margin-top: 16px; color: var(--muted); }.video-job-meta small { font-size: 11px; overflow-wrap: anywhere; }.video-job-actions { justify-content: flex-end; margin-top: 13px; }.video-job-actions .button { min-height: 39px; padding: 0 16px; font-size: 13px; }.video-job-error { margin: 12px 0 0; padding: 10px; border-radius: 7px; background: #fff0ec; color: #9b4937; font-size: 12px; }
.video-job-history { margin-top: 15px; }.video-job-history > button { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) 130px; align-items: center; gap: 20px; padding: 11px 10px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }.video-job-history > button:hover { background: #f3f8f6; }.video-job-history button > span:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.video-job-history strong,.video-job-history small { display: block; }.video-job-history strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.video-job-history small { margin-top: 3px; color: var(--muted); font-size: 11px; }.video-job-history .job-status { font-style: normal; white-space: nowrap; }
.advanced-workflow { margin-top: 18px; }.advanced-workflow > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; list-style: none; }.advanced-workflow > summary::-webkit-details-marker { display: none; }.advanced-workflow > summary strong,.advanced-workflow > summary small { display: block; }.advanced-workflow > summary strong { font-size: 15px; }.advanced-workflow > summary small { margin-top: 4px; color: var(--muted); font-size: 12px; }.advanced-workflow > summary b { color: var(--teal-dark); font-size: 12px; }.advanced-workflow[open] > summary b { font-size: 0; }.advanced-workflow[open] > summary b::after { font-size: 12px; content: "收起"; }.advanced-workflow-content { display: grid; gap: 18px; padding-top: 18px; }

/* Studio readability: retain the dense layout while making controls and supporting copy comfortable to read. */
.studio-page .workspace-label { font-size: 11px; }
.studio-page .workspace-intro h1 { font-size: 30px; }
.studio-page .workspace-intro p { font-size: 15px; }
.studio-page .workspace-steps a { padding: 14px 12px; }
.studio-page .workspace-steps b { width: 31px; height: 31px; font-size: 10px; }
.studio-page .workspace-steps strong { font-size: 15px; }
.studio-page .workspace-steps small { font-size: 12px; }
.studio-page .workspace-help strong { font-size: 13px; }
.studio-page .workspace-help p, .studio-page .workspace-help a { font-size: 12px; }
.studio-page .breadcrumb { font-size: 12px; }
.studio-page .workspace-topbar h2 { font-size: 32px; }
.studio-page .cloud-state { min-width: 190px; padding: 12px 15px; }
.studio-page .cloud-state small { font-size: 11px; }
.studio-page .cloud-state strong { font-size: 14px; }
.studio-page .auth-wall h2 { font-size: 21px; }
.studio-page .auth-wall p, .studio-page .auth-wall .button { font-size: 14px; }
.studio-page .workspace-card { padding: 29px; }
.studio-page .workspace-card-head > div > span { font-size: 11px; }
.studio-page .workspace-card-head h3 { font-size: 22px; }
.studio-page .counter, .studio-page .quiet-button { font-size: 13px; }
.studio-page .script-box textarea { font-size: 17px; }
.studio-page .script-tools, .studio-page .text-tool, .studio-page .document-upload-button span, .studio-page .document-upload-status { font-size: 12px; }
.studio-page .voice-loading { font-size: 13px; }
.studio-page .voice-avatar { width: 40px; height: 40px; font-size: 11px; }
.studio-page .voice-select strong { font-size: 14px; }
.studio-page .voice-select small, .studio-page .voice-actions button { font-size: 12px; }
.studio-page .voice-upload-box strong { font-size: 14px; }
.studio-page .voice-upload-box p, .studio-page .upload-button span { font-size: 12px; }
.studio-page .upload-form input, .studio-page .upload-form .button { font-size: 13px; }
.studio-page .inline-message { font-size: 13px; }
.studio-page .setting-field { padding: 17px; }
.studio-page .setting-field strong { font-size: 14px; }
.studio-page .setting-field small { font-size: 12px; }
.studio-page .setting-field select, .studio-page .number-input { height: 42px; font-size: 13px; }
.studio-page .range-field output { font-size: 12px; }
.studio-page #generate-storyboard { min-height: 44px; font-size: 14px; }
.studio-page .agent-progress { font-size: 12px; }
.studio-page .story-number { font-size: 11px; }
.studio-page .story-card input { font-size: 15px; }
.studio-page .story-card label { font-size: 12px; }
.studio-page .story-card textarea { font-size: 13px; }
.studio-page .asset-progress-grid span { font-size: 12px; }
.studio-page .asset-progress-grid strong { font-size: 14px; }
.studio-page .asset-preview { font-size: 12px; }
.studio-page .asset-card strong { font-size: 14px; }
.studio-page .asset-card small { font-size: 12px; }
.studio-page .asset-tags span { font-size: 11px; }
.studio-page .current-task.empty strong, .studio-page .task-progress-copy > strong { font-size: 15px; }
.studio-page .current-task.empty p, .studio-page .task-progress-copy > span, .studio-page .task-progress-copy > small { font-size: 12px; }
.studio-page .task-progress-ring strong { font-size: 14px; }
.studio-page .result-downloads button { font-size: 12px; }
.studio-page .history-head, .studio-page .job-list strong, .studio-page .job-status { font-size: 12px; }
.studio-page .job-list small { font-size: 11px; }
.studio-page .mini-card-head, .studio-page .account-mini-card > strong, .studio-page .account-mini-card > a { font-size: 13px; }
.studio-page .balance-row span, .studio-page .quota-row { font-size: 12px; }
.studio-page .summary-kicker { font-size: 11px; }
.studio-page .quote-card h3 { font-size: 22px; }
.studio-page .quote-line, .studio-page .quote-card .button { font-size: 13px; }
.studio-page .quote-card > p { font-size: 11px; }
.studio-page .pool-state, .studio-page .local-badge { font-size: 12px; }
.studio-page .video-placeholder { font-size: 13px; }
.studio-page .compose-actions > strong { font-size: 16px; }
.studio-page .compose-actions > p, .studio-page .compose-actions .button, .studio-page .compose-progress { font-size: 12px; }

/* Motion and interaction */
.studio-ready .workspace-sidebar { animation: enterLeft .55s cubic-bezier(.2,.8,.2,1) both; }
.studio-ready .workspace-main { animation: enterUp .55s .08s cubic-bezier(.2,.8,.2,1) both; }
.studio-ready .workspace-summary { animation: enterRight .55s .14s cubic-bezier(.2,.8,.2,1) both; }
.waveform i { animation: waveform 1.8s ease-in-out infinite alternate; transform-origin: center; }.waveform i:nth-child(2n) { animation-delay: -.7s; }.waveform i:nth-child(3n) { animation-delay: -1.2s; }
.motion-enabled .reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1); }.motion-enabled .reveal.visible { opacity: 1; transform: none; }.motion-enabled .reveal-delay-1 { transition-delay: .08s; }.motion-enabled .reveal-delay-2 { transition-delay: .16s; }
.feature-card:hover .feature-icon { transform: rotate(-5deg) scale(1.04); }.feature-icon { transition: transform .25s ease; }
@keyframes waveform { from { transform: scaleY(.65); opacity: .55; } to { transform: scaleY(1.08); opacity: 1; } }
@keyframes homeVisualCycle { 0%,28% { opacity: 1; } 33%,95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes homeVisualProgress { 0% { transform: scaleX(0); } 28%,33% { transform: scaleX(1); } 34%,100% { transform: scaleX(0); } }
@keyframes creationFlowSweep { 0% { left: -18%; opacity: 0; } 15%,85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes homeSignalTravel { 0% { left: -24%; opacity: 0; } 18%,82% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes homeSignalPulse { 0%,100% { opacity: .56; transform: scale(.78); } 50% { opacity: 1; transform: scale(1.28); } }
@keyframes homeAmbientBreath { 0%,100% { opacity: .42; transform: scale(.96); } 50% { opacity: .82; transform: scale(1.04); } }
@keyframes homeVerticalScan { 0%,100% { opacity: .2; transform: translateY(-7%) scaleY(.82); } 48%,58% { opacity: .92; transform: translateY(7%) scaleY(1.04); } }
@keyframes homeRibbonDrift { 0%,100% { opacity: .24; transform: translate3d(-4%,2%,0) skewX(-3deg); } 50% { opacity: .72; transform: translate3d(5%,-2%,0) skewX(2deg); } }
@keyframes homeTransitionDrift { from { opacity: .78; transform: translateY(-4px); } to { opacity: 1; transform: translateY(5px); } }
@keyframes homeMarkerBeacon { 0%,12%,100% { filter: brightness(1) drop-shadow(0 0 0 rgba(72,204,183,0)); } 6% { filter: brightness(1.14) drop-shadow(0 0 10px rgba(72,204,183,.58)); } }
@keyframes statusPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(24,185,138,.1); } 50% { box-shadow: 0 0 0 8px rgba(24,185,138,.03); } }
@keyframes softBlink { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes enterLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes enterRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes enterUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .studio-shell { grid-template-columns: 200px minmax(0,1fr); }.workspace-summary { position: static; grid-column: 2; grid-template-columns: 1fr 1fr; }.voice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .studio-page { padding: 14px; }.studio-shell { grid-template-columns: 1fr; }.workspace-sidebar { position: static; }.workspace-intro { padding: 20px; }.workspace-steps { display: grid; grid-template-columns: 1fr 1fr; }.workspace-help { display: none; }.workspace-summary { grid-column: auto; grid-template-columns: 1fr 1fr; }.workspace-topbar { padding: 0; }.settings-grid { grid-template-columns: 1fr; }.voice-upload-box { align-items: flex-start; flex-wrap: wrap; }.upload-form { flex-basis: 100%; }.asset-results { grid-template-columns: 1fr; }.compose-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .one-click-actions,.one-click-actions .button,.one-click-actions .quiet-button { width: 100%; }
  .video-job-steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .video-job-history > button { grid-template-columns: 1fr; gap: 7px; }
  .video-job-history button > span:last-child { justify-content: flex-start; }
  .advanced-workflow > summary { align-items: flex-start; }
}
@media (max-width: 560px) {
  .studio-page { padding: 9px; }.workspace-intro { padding: 18px 20px 15px; }.workspace-intro p { max-width: 260px; }.workspace-steps { display: flex; gap: 5px; overflow-x: auto; padding: 8px; scrollbar-width: none; }.workspace-steps::-webkit-scrollbar { display: none; }.workspace-steps a,.workspace-steps a.workspace-step-sub { width: auto; min-width: 118px; margin-left: 0; padding: 8px; }.workspace-steps small { display: none; }.workspace-steps b,.workspace-steps a.workspace-step-sub b { width: 28px; height: 24px; }.workspace-summary { grid-template-columns: 1fr; }.workspace-card { padding: 19px 15px; }.workspace-topbar { align-items: flex-start; flex-direction: column; gap: 12px; padding: 8px 5px; }.cloud-state { width: 100%; }.auth-wall { align-items: flex-start; flex-wrap: wrap; padding: 19px; }.auth-wall .button { width: 100%; }.voice-grid { grid-template-columns: 1fr; }.script-box textarea { min-height: 190px; padding: 15px; }.script-tools span { display: none; }.history-head, .job-list article { grid-template-columns: 1fr; }.job-list article > div:last-child { justify-content: flex-start; }.current-task { align-items: flex-start; flex-wrap: wrap; }.story-controls, .asset-progress-grid { grid-template-columns: 1fr; }.story-card { grid-template-columns: 27px minmax(0,1fr); padding: 10px; }.story-number { width: 27px; height: 27px; }.asset-card { grid-template-columns: 80px minmax(0,1fr); }.online-video-stage { min-height: 180px; }.online-video-actions { align-items: stretch; flex-direction: column; }.online-video-actions .button { width: 100%; }.compose-actions { padding: 14px; }
}
@media (max-width: 760px) {
  body[data-page="home"] main { --home-scene-overlap: 104px; }
  .home-services-section,.workflow-section { padding-top: calc(75px + var(--home-scene-overlap)); }
  .home-services-section .home-section-backdrop { object-position: 54% center; }
  .home-services-section .home-section-shade { background: linear-gradient(180deg,rgba(237,244,243,0),rgba(239,246,245,.68) 34%,rgba(235,243,242,.88)); }
  .workflow-section .home-section-backdrop { object-position: 58% center; }
  .workflow-section .home-section-shade { background: linear-gradient(180deg,rgba(235,243,242,0),rgba(237,245,244,.64) 36%,rgba(232,241,240,.9)); }
  .home-motion-services span { top: 30%; right: -18%; width: 80%; }
  .home-motion-flow { display: none; }
  .workflow-heading { margin-bottom: 44px; }
  .creation-flow { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .creation-flow::before { top: 28px; right: auto; bottom: 28px; left: 27px; width: 1px; height: auto; }
  .creation-flow::after { top: -12%; bottom: auto; left: 26px; width: 3px; height: 18%; background: linear-gradient(180deg,transparent,#72dfce,transparent); animation-name: creationFlowSweepY; }
  .creation-step { display: grid; min-height: 142px; grid-template-columns: 56px minmax(0,1fr); gap: 20px; padding: 0 0 30px; }
  .creation-marker { width: 54px; height: 54px; margin: 0; box-shadow: 0 0 0 7px rgba(235,244,242,.86); }.creation-marker span { font-size: 14px; }.creation-marker i { top: 24px; left: 48px; width: 6px; height: 6px; }
  .creation-copy { padding-top: 2px; }.creation-copy h3 { margin: 7px 0 7px; font-size: 20px; }.creation-copy p { max-width: none; }
}
@keyframes creationFlowSweepY { 0% { top: -18%; opacity: 0; } 15%,85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .motion-enabled .reveal { opacity: 1; transform: none; }
  .home-visual-frame { opacity: 0; animation: none !important; }.home-visual-frame:first-child { opacity: 1; }.home-visual-progress span::after { animation: none !important; }.home-visual-progress span:first-child::after { transform: scaleX(1); }
}


/* Services experience */
.services-hero { position: relative; display: flex; min-height: 610px; align-items: center; overflow: hidden; padding: 96px 0 80px; background: #f4f8f7; }
.services-hero::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(244,248,247,.94) 0%,rgba(244,248,247,.74) 36%,rgba(244,248,247,.12) 59%,rgba(244,248,247,0) 72%); content: ""; }
.services-hero-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: none; transform: none; }
.services-hero-content { position: relative; z-index: 2; }
.services-hero-content h1 { max-width: 760px; font-size: clamp(48px,6vw,78px); line-height: 1.08; }
.services-hero-content p { max-width: 630px; font-size: 17px; }
.hero-service-flow { display: flex; max-width: 590px; align-items: center; gap: 8px; margin-top: 30px; }
.hero-service-flow i { position: relative; flex: 1; height: 1px; overflow: hidden; background: rgba(15,65,69,.2); }
.hero-service-flow i::after { position: absolute; top: -1px; left: -32px; width: 32px; height: 3px; background: var(--teal); content: ""; animation: serviceSignal 2.2s linear infinite; }
.flow-node { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(15,65,69,.14); border-radius: 7px; background: rgba(255,255,255,.84); color: #506a6e; font-size: 14px; font-weight: 800; transition: background .2s,color .2s,border-color .2s; }
.flow-node.active { border-color: var(--teal); background: var(--ink-deep); color: white; }
.services-scroll-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--teal-dark); font-size: 13px; font-weight: 800; text-decoration: none; }
.services-scroll-link span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; animation: scrollCue 1.7s ease-in-out infinite; }
.hero-render-signal { position: absolute; z-index: 2; right: 8%; bottom: 16%; width: min(42vw,560px); height: 3px; overflow: visible; border-radius: 3px; background: rgba(102,213,195,.22); box-shadow: 0 0 18px rgba(102,213,195,.2); }
.hero-render-signal::before { position: absolute; inset: -1px auto -1px -18%; width: 18%; border-radius: inherit; background: linear-gradient(90deg,transparent,#7be6d5); content: ""; animation: heroRenderScan 4.8s linear infinite; }
.hero-render-signal i { position: absolute; top: 50%; width: 7px; height: 7px; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; background: #67d7c5; box-shadow: 0 0 0 5px rgba(103,215,197,.12); animation: heroRenderPulse 2.4s ease-in-out infinite; }
.hero-render-signal i:first-child { left: 16%; }.hero-render-signal i:nth-child(2) { left: 52%; animation-delay: -.8s; }.hero-render-signal i:nth-child(3) { right: 3%; animation-delay: -1.6s; }.hero-render-signal span { position: absolute; top: -8px; right: 0; width: 2px; height: 19px; background: #f2a36b; box-shadow: 0 0 12px rgba(242,163,107,.52); animation: heroRenderPlayhead 4.8s linear infinite; }
.services-navigation { scroll-margin-top: 76px; }
.service-jump-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.service-jump { position: relative; display: grid; grid-template-columns: 76px minmax(0,1fr) auto; min-height: 142px; align-items: center; gap: 17px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--ink); text-decoration: none; transition: transform .2s,border-color .2s,box-shadow .2s; }
.service-jump:hover,.service-jump.active { transform: translateY(-3px); border-color: rgba(22,168,149,.58); box-shadow: 0 16px 38px rgba(12,60,64,.09); }
.service-jump > span:nth-child(2) { min-width: 0; }
.service-jump small,.service-jump strong,.service-jump em { display: block; }
.service-jump small { margin-bottom: 7px; color: var(--teal-dark); font-size: 9px; font-style: normal; font-weight: 850; }
.service-jump strong { font-size: 17px; }
.service-jump em { margin-top: 7px; color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.5; }
.service-jump > b { align-self: start; color: #7c999b; font-size: 17px; font-weight: 500; }
.jump-visual { position: relative; display: flex; width: 76px; height: 76px; align-items: center; justify-content: center; overflow: hidden; border-radius: 13px; background: var(--ink-deep); }
.jump-gpu { gap: 4px; }
.jump-gpu i { width: 4px; border-radius: 4px; background: #67d7c5; animation: miniWave 1.1s ease-in-out infinite alternate; }
.jump-gpu i:nth-child(1),.jump-gpu i:nth-child(5) { height: 20px; }.jump-gpu i:nth-child(2),.jump-gpu i:nth-child(4) { height: 38px; animation-delay: -.35s; }.jump-gpu i:nth-child(3) { height: 54px; animation-delay: -.7s; }
.jump-voice i { position: absolute; display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid var(--ink-deep); border-radius: 50%; background: #dff5ef; color: var(--teal-dark); font-size: 10px; font-style: normal; font-weight: 900; animation: voiceFloat 2.8s ease-in-out infinite; }
.jump-voice i:nth-child(1) { transform: translate(-20px,-12px); }.jump-voice i:nth-child(2) { transform: translate(18px,-4px); animation-delay: -.9s; }.jump-voice i:nth-child(3) { transform: translate(-2px,22px); animation-delay: -1.8s; }
.jump-video { gap: 4px; padding: 15px; align-items: flex-end; }
.jump-video i { flex: 1; height: 30px; border-radius: 3px; background: #68d7c5; opacity: .85; animation: framePulse 2.1s ease-in-out infinite; }.jump-video i:nth-child(2) { height: 42px; animation-delay: -.7s; }.jump-video i:nth-child(3) { height: 24px; animation-delay: -1.4s; }.jump-video span { position: absolute; right: 11px; bottom: 9px; left: 11px; height: 2px; background: white; }
.services-detail-band { background: #eaf2ef; }
.service-stack { display: grid; gap: 18px; }
.service-module { display: grid; grid-template-columns: 250px minmax(0,1fr) minmax(230px,.72fr); gap: 34px; align-items: center; min-height: 310px; padding: 34px; scroll-margin-top: 92px; border: 1px solid rgba(17,77,78,.1); border-radius: 18px; background: white; }
.service-motion { position: relative; height: 220px; overflow: hidden; padding: 20px; border-radius: 15px; background: var(--ink-deep); color: white; }
.service-copy > span { color: var(--teal-dark); font-size: 9px; font-weight: 850; }
.service-copy h2 { margin: 9px 0 13px; font-size: 28px; }
.service-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.service-copy a { display: inline-block; margin-top: 19px; color: var(--teal-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.motion-head { display: flex; justify-content: space-between; color: #91b0b3; font-size: 8px; font-weight: 850; }
.motion-head span { display: flex; align-items: center; gap: 6px; }.motion-head span i { width: 6px; height: 6px; border-radius: 50%; background: #46d7b1; box-shadow: 0 0 0 5px rgba(70,215,177,.1); animation: statusPulse 1.8s ease-in-out infinite; }.motion-head b { color: #68d7c5; font-size: 10px; }
.motion-wave { display: flex; height: 94px; align-items: center; justify-content: center; gap: 5px; margin-top: 18px; }
.motion-wave i { width: 4px; height: 22px; border-radius: 5px; background: #61d6c2; animation: serviceWave 1.2s ease-in-out infinite alternate; }.motion-wave i:nth-child(3n) { height: 62px; animation-delay: -.8s; }.motion-wave i:nth-child(3n+1) { height: 38px; animation-delay: -.4s; }
.motion-track { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.12); }.motion-track span { display: block; width: 72%; height: 100%; background: #67d7c5; animation: trackProgress 3.2s ease-in-out infinite; }.gpu-motion > small,.video-motion > small { position: absolute; right: 20px; bottom: 17px; left: 20px; color: #6f9295; font-size: 7px; }
.voice-rings { position: relative; display: grid; width: 112px; height: 112px; margin: 0 auto 10px; place-items: center; }
.voice-rings i { position: absolute; border: 1px solid rgba(103,215,197,.3); border-radius: 50%; animation: ringPulse 2.4s ease-out infinite; }.voice-rings i:nth-child(1) { inset: 7px; }.voice-rings i:nth-child(2) { inset: 20px; animation-delay: -.8s; }.voice-rings i:nth-child(3) { inset: 33px; animation-delay: -1.6s; }.voice-rings span { position: relative; z-index: 1; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: #67d7c5; color: var(--ink-deep); font-size: 10px; font-weight: 900; }
.voice-switches { display: flex; justify-content: center; gap: 5px; }.voice-switches span { padding: 4px 7px; border-radius: 5px; background: rgba(255,255,255,.07); color: #739497; font-size: 7px; }.voice-switches .active { background: rgba(103,215,197,.16); color: #8ce5d7; }
.voice-eq { position: absolute; right: 20px; bottom: 16px; left: 20px; display: flex; height: 22px; align-items: flex-end; gap: 4px; }.voice-eq i { flex: 1; height: 7px; border-radius: 2px; background: #4fbba9; animation: miniWave 1.3s ease-in-out infinite alternate; }.voice-eq i:nth-child(2n) { height: 18px; animation-delay: -.6s; }
.video-screen { position: relative; display: grid; height: 120px; place-items: center; overflow: hidden; border-radius: 9px; background: #173e43; }.video-screen::before { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.08); content: ""; }.play-mark { position: relative; z-index: 1; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #67d7c5; color: var(--ink-deep); font-size: 11px; animation: playPulse 2s ease-in-out infinite; }.video-screen i { position: absolute; width: 64px; height: 70px; border: 1px solid rgba(103,215,197,.22); transform: rotate(18deg); }.video-screen i:last-child { transform: translateX(42px) rotate(-12deg); }
.video-timeline { position: relative; display: flex; height: 29px; gap: 4px; margin-top: 12px; }.video-timeline span { flex: 1; border-radius: 3px; background: #2b6264; }.video-timeline span:nth-of-type(2) { background: #398780; }.video-timeline b { position: absolute; z-index: 2; top: -3px; bottom: -3px; left: 37%; width: 2px; background: #f2b46f; animation: timelineScan 3.5s linear infinite; }.video-timeline i { position: absolute; right: 0; bottom: -5px; left: 0; height: 2px; background: rgba(255,255,255,.08); }
.services-price-panel { grid-template-columns: minmax(320px,.78fr) minmax(0,1.22fr); align-items: stretch; }
.billing-dynamic { position: relative; overflow: hidden; background: var(--ink-deep); color: white; transition: transform .2s; }.billing-dynamic.changing { transform: scale(.985); }.billing-dynamic h2 { margin: 6px 0 9px; color: white; font-size: 21px; }.billing-dynamic p { min-height: 47px; color: #94afb2; }.billing-dynamic .big-number { margin: 24px 0 3px; color: white; }.billing-dynamic > small { display: block; color: #749397; }.billing-dynamic .button { margin-top: 22px; min-height: 44px; background: #58cfbc; color: var(--ink-deep); }
.billing-kicker { color: #69d7c5; font-size: 9px; font-weight: 900; }
.billing-price { display: block; color: #79dfcf; font-size: 18px; }
.billing-visual { display: flex; height: 132px; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.035); }
.credit-orbit { position: relative; display: grid; width: 96px; height: 96px; place-items: center; border: 1px solid rgba(103,215,197,.3); border-radius: 50%; }.credit-orbit::after { position: absolute; inset: 12px; border: 1px solid rgba(103,215,197,.18); border-radius: 50%; content: ""; }.credit-orbit span { position: relative; z-index: 2; color: white; font-size: 26px; font-weight: 900; }.credit-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #67d7c5; animation: creditOrbit 4s linear infinite; }.credit-orbit i:nth-child(2) { animation-delay: -1.33s; }.credit-orbit i:nth-child(3) { animation-delay: -2.66s; }
.billing-bars { display: flex; width: 90px; height: 78px; align-items: flex-end; gap: 6px; }.billing-bars i { flex: 1; height: 24%; border-radius: 4px 4px 1px 1px; background: #3a7776; transition: height .35s; animation: billingBar 2.6s ease-in-out infinite alternate; }.billing-bars i:nth-child(2) { height: 45%; animation-delay: -.4s; }.billing-bars i:nth-child(3) { height: 72%; animation-delay: -.8s; }.billing-bars i:nth-child(4) { height: 56%; animation-delay: -1.2s; }.billing-bars i:nth-child(5) { height: 88%; animation-delay: -1.6s; }
.package-preview { min-width: 0; }.pricing-status { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }.pricing-status span { font-size: 15px; font-weight: 850; }.pricing-status small { color: var(--muted); font-size: 10px; }.selectable-packages { grid-template-columns: repeat(4,minmax(0,1fr)); height: auto; }.selectable-packages .mini-package { min-height: 130px; border: 1px solid transparent; color: var(--ink); text-align: left; cursor: pointer; transition: transform .18s,border-color .18s,background .18s; }.selectable-packages .mini-package:hover { transform: translateY(-2px); border-color: rgba(22,168,149,.36); }.selectable-packages .mini-package.selected { border-color: var(--teal); background: #ddf4ed; box-shadow: inset 0 0 0 1px rgba(22,168,149,.12); }.selectable-packages .mini-package.recommended { background: #f0f8f5; color: var(--ink); }.selectable-packages .mini-package.selected.recommended { background: var(--ink-deep); color: white; }.selectable-packages .mini-package.selected.recommended small { color: #9db8ba; }
@keyframes serviceSignal { to { transform: translateX(190px); } }
@keyframes heroRenderScan { from { left: -18%; } to { left: 100%; } }
@keyframes heroRenderPulse { 50% { transform: translateY(-50%) scale(1.45); opacity: .62; } 0%,100% { transform: translateY(-50%) scale(1); opacity: 1; } }
@keyframes heroRenderPlayhead { from { right: 100%; } to { right: 0; } }
@keyframes scrollCue { 50% { transform: translateY(4px); } }
@keyframes miniWave { to { transform: scaleY(.45); opacity: .58; } }
@keyframes voiceFloat { 50% { margin-top: -6px; } }
@keyframes framePulse { 50% { opacity: .45; transform: scaleY(.76); } }
@keyframes serviceWave { to { transform: scaleY(.45); opacity: .58; } }
@keyframes trackProgress { 50% { width: 92%; } }
@keyframes ringPulse { 50% { transform: scale(1.08); opacity: .5; } }
@keyframes playPulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 9px rgba(103,215,197,.08); } }
@keyframes timelineScan { to { left: 96%; } }
@keyframes creditOrbit { from { transform: rotate(0deg) translateX(47px) rotate(0deg); } to { transform: rotate(360deg) translateX(47px) rotate(-360deg); } }
@keyframes billingBar { to { transform: scaleY(.72); opacity: .62; } }
@media (max-width: 980px) { .service-jump-grid { grid-template-columns: 1fr; }.service-module { grid-template-columns: 220px 1fr; }.service-module .check-list { grid-column: 2; }.selectable-packages { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .services-hero { min-height: 560px; padding: 72px 0 58px; }.services-hero::after { background: linear-gradient(180deg,rgba(244,248,247,.91) 0%,rgba(244,248,247,.8) 62%,rgba(244,248,247,.56) 100%); }.services-hero-content h1 { font-size: 42px; }.services-hero-image { object-position: 66% center; }.hero-render-signal { right: 5%; bottom: 8%; width: 66vw; opacity: .72; }.hero-service-flow { max-width: 318px; gap: 4px; }.flow-node { padding: 7px 8px; font-size: 12px; }.service-jump { grid-template-columns: 64px minmax(0,1fr) auto; padding: 15px; }.jump-visual { width: 64px; height: 64px; }.service-module { grid-template-columns: 1fr; padding: 20px; }.service-module .check-list { grid-column: auto; }.service-motion { height: 200px; }.services-price-panel { grid-template-columns: 1fr; }.billing-copy,.package-preview { padding: 24px; }.selectable-packages { grid-template-columns: repeat(2,minmax(0,1fr)); }.selectable-packages .mini-package { min-height: 116px; padding: 16px; }.selectable-packages .mini-package strong { font-size: 20px; } }