/* 本地重设计预览：以自动剪辑工作流作为官网的视觉主线。 */
:root {
  --studio-deep: #315963;
  --studio-mid: #3d7474;
  --studio-mint: #a5e1d4;
  --studio-pale: #dfedeb;
  --studio-ink: #203841;
  --studio-muted: #607a81;
  --studio-paper: #eaf0f1;
  --studio-panel: #f5f8f7;
}

/* 全站导航与页面标题换成编辑式排版，压低常见 SaaS 卡片感。 */
.nav { background: rgb(239 245 244 / 95%); border-bottom-color: #c6d8d9; }
.nav-inner { height: 76px; }
.nav-links a { min-height: 42px; }
.nav-links a.active { box-shadow: inset 0 -2px #247b7c; }
.page:not(#page-home) { background: linear-gradient(180deg, #e5edef 0, #edf2f2 230px, #eaf0f1 100%); }
.page:not(#page-home) > .wrap { max-width: 1380px; }
.page-head { padding-top: 45px; border-bottom: 0; margin-bottom: 24px; }
.page-head h1 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.05em; }
.page-head p { max-width: 680px; }
.page-head .eyebrow { color: #4f777c; }
.card { box-shadow: 0 7px 22px rgb(38 77 83 / 5%); }
.btn-primary { background: #247b7c; }
.btn-ghost { background: #f3f7f6; }

/* 首页首屏：把实际剪辑流程呈现为时间线工作台，不用抽象流程卡片。 */
#page-home.page { padding-bottom: 0; background: var(--studio-paper); overflow: clip; }
#page-home .studio-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f1f7f5;
  background: linear-gradient(116deg, #294a55 0%, #315e67 48%, #3c7776 100%);
  border-bottom: 1px solid #77a09f;
}
#page-home .studio-hero::before,
#page-home .studio-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
#page-home .studio-hero::before {
  width: 660px; height: 660px; right: -170px; top: -280px; border-radius: 50%;
  border: 1px solid rgb(206 241 231 / 17%); box-shadow: 0 0 0 42px rgb(206 241 231 / 4%), 0 0 0 95px rgb(206 241 231 / 3%);
}
#page-home .studio-hero::after {
  left: 0; right: 0; bottom: 75px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(208 236 231 / 28%), transparent);
}
#page-home .studio-glow { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(1px); }
#page-home .studio-glow-a { width: 280px; height: 280px; left: 29%; top: 23%; background: radial-gradient(circle, rgb(153 222 207 / 12%), transparent 72%); }
#page-home .studio-glow-b { width: 420px; height: 420px; right: 8%; bottom: -220px; background: radial-gradient(circle, rgb(125 198 186 / 16%), transparent 70%); }
#page-home .studio-hero-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1500px);
  min-height: 690px;
  grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
  gap: clamp(38px, 5.5vw, 80px);
  padding-top: 76px;
  padding-bottom: 70px;
}
#page-home .studio-hero-copy { max-width: 535px; align-self: center; }
.studio-kicker,.studio-section-index,.studio-edition { display: flex; align-items: center; color: #c5dfda; font-size: 10px; font-weight: 650; letter-spacing: .17em; }
.studio-kicker { gap: 10px; }
.studio-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #9be0d0; box-shadow: 0 0 0 5px rgb(155 224 208 / 13%); }
.studio-edition { margin-top: 41px; color: #b4d2cf; font-size: 11px; letter-spacing: .09em; }
#page-home .studio-hero h1 { margin: 14px 0 19px; color: #f3f8f6; font-size: clamp(44px, 3.5vw, 55px); font-weight: 610; letter-spacing: -.075em; line-height: 1.18; }
#page-home .studio-hero h1 span { color: #a5e1d4; }
#page-home .studio-lead { max-width: 465px; margin: 0; color: #d5e4e1; font-size: 15px; line-height: 1.9; }
#page-home .studio-hero-actions { gap: 13px; margin-top: 28px; }
#page-home .studio-hero-actions .btn { min-height: 48px; padding: 11px 20px; border-radius: 6px; }
#page-home .studio-hero-actions .btn-primary { color: #20464a; background: #b1e5d9; box-shadow: 0 8px 24px rgb(23 55 60 / 13%); }
#page-home .studio-hero-actions .btn-primary:hover { background: #cdf0e8; box-shadow: 0 10px 25px rgb(23 55 60 / 20%); }
#page-home .studio-hero-actions .btn-ghost { color: #eff6f4; background: rgb(230 245 241 / 7%); border-color: #91b4b3; }
#page-home .studio-hero-actions .btn-ghost:hover { background: rgb(230 245 241 / 15%); border-color: #c3ded9; }
#page-home .studio-trust { display: flex; flex-wrap: wrap; gap: 10px 17px; margin-top: 24px; }
#page-home .studio-trust .hero-trust { color: #c4dbd7; font-size: 11px; }
#page-home .studio-trust .hero-trust::before { color: #a5e1d4; }

/* 编辑器窗口包含素材、预览、AI 分析、字幕和配音时间线。 */
.studio-stage { position: relative; min-width: 0; align-self: center; padding: 13px 0 20px; perspective: 1400px; }
.editor-window {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: #edf5f2;
  background: linear-gradient(140deg, #42646a, #34565d 70%, #31545b);
  border: 1px solid rgb(195 225 219 / 46%);
  border-radius: 12px;
  box-shadow: 0 32px 80px rgb(18 45 51 / 28%), inset 0 1px rgb(255 255 255 / 10%);
  transform: rotateY(-4deg) rotateX(1deg);
  transform-origin: center right;
  animation: editor-enter .9s .12s cubic-bezier(.17,.72,.24,1) both, editor-float 8s 1.2s ease-in-out infinite;
}
.editor-titlebar { height: 42px; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 12px; padding: 0 14px; background: rgb(30 61 68 / 45%); border-bottom: 1px solid rgb(211 237 229 / 20%); font-size: 9px; }
.editor-brand { display: flex; align-items: center; gap: 7px; color: #edf5f2; white-space: nowrap; }
.editor-mark { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgb(197 231 219 / 38%); border-radius: 6px; background: rgb(233 249 241 / 9%); }
.editor-mark img { width: 19px; height: 19px; border-radius: 4px; }
.editor-project-name { color: #dce9e6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-project-name span { margin-left: 6px; color: #acd7cb; font-size: 8px; }
.editor-window-actions { display: flex; justify-content: flex-end; gap: 5px; }
.editor-window-actions i { width: 6px; height: 6px; background: #9ebbb7; border-radius: 50%; }
.editor-toolbar { display: flex; align-items: center; gap: 15px; height: 35px; padding: 0 14px; color: #c6d9d5; background: rgb(227 244 237 / 5%); border-bottom: 1px solid rgb(211 237 229 / 17%); font-size: 8px; }
.editor-toolbar .tool-active { color: #d9f0e9; }
.editor-resolution { margin-left: auto; white-space: nowrap; color: #afc8c4; }
.editor-toolbar button,.editor-inspector button { color: #e4f0ed; border: 1px solid rgb(188 221 213 / 42%); border-radius: 4px; background: rgb(207 235 226 / 9%); font: inherit; padding: 5px 8px; }
.editor-main { min-height: 224px; display: grid; grid-template-columns: 92px minmax(0,1fr) 128px; gap: 10px; padding: 11px 12px 9px; }
.app-workspace-demo { display:grid; grid-template-columns:75px minmax(0,1fr); min-height:0; }
.app-sidebar-demo { display:flex; flex-direction:column; gap:5px; padding:11px 6px 9px; color:#bdd1cd; background:rgb(24 48 53 / 42%); border-right:1px solid rgb(207 231 224 / 16%); font-size:6px; }
.sidebar-caption-demo { margin:0 2px 7px; color:#94b5b0; font-size:6px; }
.demo-nav-item { display:flex; align-items:center; gap:5px; min-height:23px; padding:0 5px; border-radius:3px; white-space:nowrap; }
.demo-nav-item i { display:grid; place-items:center; width:12px; color:#a7c6c0; font-size:9px; font-style:normal; }
.demo-nav-item.active { color:#f1f7f4; background:rgb(139 200 183 / 18%); box-shadow:inset 2px 0 #a5e1d4; }
.demo-nav-item.active i { color:#b8ead5; }
.demo-nav-item b { margin-left:auto; padding:1px 3px; color:#d7f0e6; background:rgb(154 218 195 / 19%); border-radius:3px; font-size:5px; font-weight:500; }
.demo-nav-spacer { flex:1; min-height:16px; }
.demo-editor-area { min-width:0; }
.demo-editor-area .editor-toolbar { gap:11px; height:31px; padding:0 10px; font-size:6px; }
.demo-editor-area .editor-main { min-height:330px; grid-template-columns:minmax(100px,.72fr) minmax(0,1.5fr) minmax(100px,.72fr); align-items:stretch; gap:7px; padding:8px; }
.copy-resource-demo { min-width:0; overflow:hidden; padding:7px 5px; color:#dae7e3; background:rgb(227 244 237 / 5%); border:1px solid rgb(199 226 217 / 19%); border-radius:4px; }
.demo-panel-title { display:flex; justify-content:space-between; align-items:center; color:#eaf3f0; font-size:7px; }
.demo-panel-title b { color:#bddfd3; font-size:11px; font-weight:400; }
.demo-search { margin:7px 0; padding:5px 4px; color:#91aaa5; border:1px solid rgb(199 226 217 / 19%); border-radius:3px; font-size:6px; }
.copy-item { display:flex; align-items:center; gap:4px; min-height:37px; margin:3px 0; padding:4px 3px; border:1px solid transparent; border-radius:3px; }
.copy-item.selected { background:rgb(151 211 192 / 11%); border-color:rgb(161 218 196 / 25%); }
.copy-item > i { display:grid; place-items:center; flex:0 0 17px; width:17px; height:17px; color:#c5e6d7; background:rgb(147 200 183 / 15%); border-radius:3px; font-size:7px; font-style:normal; }
.copy-item > span { display:grid; gap:3px; min-width:0; }
.copy-item strong,.copy-item b { overflow:hidden; color:#e3eeea; font-size:5px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.copy-item small { color:#a8c0bb; font-size:5px; }
.copy-item em { margin-left:auto; color:#b8e4d0; font-size:7px; font-style:normal; }
.copy-demo-foot { margin:8px 2px 0; padding-top:7px; color:#a6c5bc; border-top:1px solid rgb(207 231 224 / 15%); font-size:5px; }
.demo-preview-head { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-bottom:6px; }
.demo-preview-head > div { display:grid; gap:3px; min-width:0; }
.demo-preview-head b { overflow:hidden; color:#eef5f2; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.demo-preview-head small { overflow:hidden; color:#adc5c0; font-size:5px; text-overflow:ellipsis; white-space:nowrap; }
.demo-preview-head button,.demo-shot-head button { flex:0 0 auto; padding:4px 5px; color:#e9f4ef; background:rgb(166 221 199 / 16%); border:1px solid rgb(171 222 202 / 35%); border-radius:3px; font:inherit; font-size:5px; }
.demo-editor-area .editor-preview { padding:4px; }
.demo-editor-area .scene-caption small { display:none; }
.demo-editor-area .scene-caption strong { font-size:10px; }
.demo-editor-area .preview-status { font-size:5px; }
.demo-shot-head { display:flex; align-items:center; gap:5px; margin:9px 0 4px; color:#e6f0ec; font-size:6px; }
.demo-shot-head > span { margin-right:auto; color:#a9c0bb; font-size:5px; white-space:nowrap; }
.demo-shot-head button { padding:3px 4px; }
.demo-shot-list { display:grid; gap:3px; }
.demo-shot-row { display:grid; grid-template-columns:10px 27px minmax(0,1fr) auto; align-items:center; gap:4px; min-width:0; padding:3px; color:#dce9e5; background:rgb(227 244 237 / 5%); border:1px solid rgb(199 226 217 / 16%); border-radius:3px; font-size:5px; }
.demo-shot-row.active { border-color:rgb(169 225 205 / 55%); background:rgb(141 204 183 / 12%); animation:shot-selected 3s ease-in-out infinite; }
.demo-shot-row > b { color:#a9c7c0; font-size:5px; font-weight:500; }
.shot-thumb { display:block; width:27px; height:19px; border-radius:2px; background:linear-gradient(145deg,#a8bca7 0 35%,#647e75 36% 62%,#3d5d56 63%); }
.shot-b { background:linear-gradient(140deg,#b8c8b0 0 30%,#987e5d 31% 54%,#4b6b61 55%); }
.shot-c { background:linear-gradient(150deg,#c7b88c 0 35%,#718576 36% 58%,#334f4e 59%); }
.demo-shot-row > span:nth-child(3) { display:grid; gap:3px; min-width:0; }
.demo-shot-row strong { overflow:hidden; color:#e3eeea; font-size:5px; font-weight:550; text-overflow:ellipsis; white-space:nowrap; }
.demo-shot-row small { overflow:hidden; color:#a9c0bb; font-size:5px; text-overflow:ellipsis; white-space:nowrap; }
.demo-shot-row > i { color:#b5d9cc; font-size:5px; font-style:normal; white-space:nowrap; }
.demo-editor-area .editor-inspector { padding:7px 6px; }
.demo-setting { display:grid; gap:4px; margin-top:9px; }
.demo-setting small { color:#a8c1bc; font-size:5px; }
.demo-setting strong { overflow:hidden; padding:5px 4px; color:#e5efec; background:rgb(20 47 53 / 23%); border:1px solid rgb(199 226 217 / 19%); border-radius:3px; font-size:5px; font-weight:450; text-overflow:ellipsis; white-space:nowrap; }
.demo-param-note { display:flex; align-items:flex-start; gap:4px; margin-top:12px; color:#aac4bc; font-size:5px; line-height:1.55; }
.demo-param-note i { flex:0 0 5px; width:5px; height:5px; margin-top:1px; border-radius:50%; background:#9ed9c3; }
.editor-statusbar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; padding:0 10px; color:#aec6c1; background:rgb(24 53 59 / 30%); border-top:1px solid rgb(211 237 229 / 16%); font-size:5px; }
.editor-statusbar span:first-child { display:flex; align-items:center; gap:4px; }
.editor-statusbar span:first-child i { width:5px; height:5px; border-radius:50%; background:#9be0c7; }
.editor-media-rail { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 5px 6px; color: #d5e5e1; font-size: 7px; }
.rail-title { grid-column: 1/-1; margin-bottom: 3px; color: #edf5f2; font-size: 8px; }
.media-thumb { position: relative; height: 42px; overflow: hidden; border: 1px solid rgb(197 223 215 / 35%); border-radius: 3px; background: linear-gradient(140deg,#8eb7a6,#647f75 43%,#c0ae86); }
.media-thumb::before,.media-thumb::after { content:""; position:absolute; bottom:-3px; width:70%; height:65%; border-radius:50% 50% 0 0; background:#647d70; transform:rotate(-17deg); }
.media-thumb::after { right:-16px; bottom:-8px; width:72%; height:73%; background:#435f5e; transform:rotate(19deg); }
.thumb-b { background:linear-gradient(145deg,#adc8ba,#899c8d 48%,#506668); }
.thumb-b::before { width:48%; height:48%; left:26%; border-radius:50%; background:#d6c38f; }
.thumb-c { background:linear-gradient(145deg,#c9b78c,#8f9378 54%,#516b65); }
.media-thumb + small { overflow:hidden; color:#c0d6d0; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
.editor-preview-column { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.editor-preview { padding: 6px; border: 1px solid rgb(199 226 217 / 24%); border-radius: 5px; background: rgb(20 47 53 / 25%); }
.preview-scene { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; background: linear-gradient(180deg,#85a9a2 0%,#d1c7a5 47%,#758e79 48%,#536c62 100%); }
.scene-sun { position: absolute; width: 14%; aspect-ratio: 1; top: 13%; right: 17%; border-radius: 50%; background: #e3d5a8; box-shadow: 0 0 32px rgb(237 221 173 / 40%); }
.scene-ridge { position: absolute; bottom: 27%; width: 118%; height: 52%; clip-path: polygon(0 76%,22% 20%,38% 58%,57% 9%,72% 45%,89% 16%,100% 48%,100% 100%,0 100%); }
.ridge-back { left:-8%; background:linear-gradient(135deg,#8ba397,#5e7974); opacity:.8; }
.ridge-front { left:-12%; bottom:14%; background:linear-gradient(125deg,#516e64,#395a57); transform:scaleX(-1); }
.scene-foreground { position:absolute; bottom:-40%; left:24%; width:39%; height:64%; border-radius:48% 48% 0 0; background:linear-gradient(90deg,#453f32,#252f2c 65%); box-shadow:50px 0 0 -17px #34433b; }
.scene-caption { position:absolute; z-index:2; left:8%; bottom:10%; display:grid; gap:4px; color:#f4f1df; text-shadow:0 2px 8px rgb(19 43 43 / 40%); }
.scene-caption small { font-size:7px; letter-spacing:.08em; }
.scene-caption strong { font-size:13px; font-weight:600; letter-spacing:.04em; }
.scene-play { position:absolute; z-index:3; display:grid; place-items:center; width:30px; height:30px; top:50%; left:50%; border:1px solid rgb(255 255 255 / 68%); border-radius:50%; background:rgb(26 64 66 / 42%); transform:translate(-50%,-50%); }
.scene-play svg { width:14px; fill:#fff; }
.preview-status { display:flex; justify-content:space-between; gap:4px; padding:6px 1px 0; color:#bed2ce; font-size:6px; }
.preview-status span:nth-child(2) { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.preview-status i { display:inline-block; width:5px; height:5px; margin-right:3px; border-radius:50%; background:#9be0c7; }
.editor-inspector { min-width:0; padding:8px; border:1px solid rgb(199 226 217 / 24%); border-radius:5px; background:rgb(224 244 237 / 6%); }
.inspector-head { display:flex; align-items:center; justify-content:space-between; color:#e8f2ef; font-size:8px; }
.inspector-head b { padding:2px 5px; color:#c3ead8; font-size:6px; font-weight:500; border-radius:3px; background:rgb(138 210 178 / 16%); }
.inspector-score { display:grid; grid-template-columns:auto 1fr; align-items:end; gap:0 6px; margin:12px 0; }
.inspector-score strong { grid-row:span 2; color:#b4e9d6; font-size:22px; font-weight:550; line-height:1; }
.inspector-score span { color:#c4d9d4; font-size:6px; }
.inspector-score > i { height:3px; overflow:hidden; grid-column:1/-1; margin-top:6px; border-radius:3px; background:rgb(222 241 235 / 15%); }
.inspector-score > i em { display:block; width:92%; height:100%; background:#9dd9c5; border-radius:inherit; }
.inspector-item { display:flex; gap:5px; align-items:flex-start; margin:9px 0; color:#e1eeea; font-size:7px; }
.inspector-item small { display:block; margin-top:2px; color:#b4cbc6; font-size:6px; }
.status-dot { width:5px; height:5px; flex:0 0 5px; margin-top:3px; border-radius:50%; background:#9bd9c3; }
.editor-inspector button { width:100%; margin-top:2px; padding:5px 2px; color:#d0e6df; font-size:6px; }
.editor-timeline { position:relative; overflow:hidden; padding:6px 12px 12px 48px; border-top:1px solid rgb(211 237 229 / 18%); background:rgb(24 53 59 / 23%); }
.timeline-label { position:absolute; top:10px; left:12px; display:grid; gap:3px; color:#e0ece8; font-size:7px; }
.timeline-label span { color:#aec6c1; font-size:6px; }
.timeline-ruler { display:flex; justify-content:space-between; padding:0 1px 4px; color:#b4cbc6; font-size:6px; border-bottom:1px solid rgb(202 228 219 / 15%); }
.timeline-track { position:relative; display:flex; align-items:center; height:21px; margin-top:4px; }
.timeline-track > b { position:absolute; left:-37px; color:#c3d8d3; font-size:6px; font-weight:500; }
.timeline-clips,.caption-clips { display:flex; gap:3px; width:100%; height:15px; }
.clip { display:block; height:100%; border:1px solid rgb(210 239 230 / 28%); border-radius:2px; background:linear-gradient(115deg,#76aaa0,#638b87 48%,#96b2a2); }
.clip-one { width:20%; }.clip-two { width:17%; background:linear-gradient(110deg,#87998c,#b2a783); }.clip-three { width:23%; }.clip-four { width:16%; background:linear-gradient(110deg,#96b09c,#688e87); }.clip-five { width:16%; }
.caption-clips { height:13px; }
.caption-clips i { display:block; width:32%; overflow:hidden; padding:2px 4px; color:#d9efdf; background:rgb(140 195 170 / 20%); border:1px solid rgb(174 222 197 / 28%); border-radius:2px; font-size:5px; font-style:normal; white-space:nowrap; }
.wave-track { display:flex; align-items:center; justify-content:space-between; width:100%; height:14px; padding:0 5px; border-radius:2px; background:rgb(131 188 171 / 14%); }
.wave-track i { display:block; width:2px; height:var(--wave-h,40%); border-radius:2px; background:#b0dfca; animation:wave-pulse 1.2s ease-in-out infinite alternate; }
.wave-track i:nth-child(3n) { --wave-h:72%; animation-delay:-.3s; }.wave-track i:nth-child(4n) { --wave-h:92%; animation-delay:-.7s; }.wave-track i:nth-child(5n) { --wave-h:55%; animation-delay:-.5s; }
.timeline-playhead { position:absolute; z-index:4; top:22px; bottom:8px; left:25%; width:1px; background:#c9f1db; box-shadow:0 0 6px rgb(185 248 210 / 62%); animation:playhead-travel 11s 1s ease-in-out infinite alternate; }
.timeline-playhead::before { content:""; position:absolute; top:-3px; left:-3px; width:7px; height:7px; background:#c9f1db; transform:rotate(45deg); }
.studio-stage-caption { display:flex; justify-content:space-between; margin:11px 3px 0; color:#bdd4d0; font-size:8px; letter-spacing:.08em; }
.studio-float-tag { position:absolute; z-index:3; display:flex; align-items:center; gap:8px; padding:9px 11px; color:#294950; background:rgb(235 247 243 / 95%); border:1px solid rgb(225 245 238 / 85%); border-radius:7px; box-shadow:0 12px 30px rgb(22 58 64 / 21%); animation:float-tag 5s ease-in-out infinite; }
.studio-float-tag b,.studio-float-tag small { display:block; white-space:nowrap; }.studio-float-tag b { font-size:8px; font-weight:650; }.studio-float-tag small { margin-top:2px; color:#698187; font-size:7px; }
.tag-analysis { top:-2px; right:-18px; }.tag-analysis > i { width:7px; height:7px; border-radius:50%; background:#3d9b83; box-shadow:0 0 0 4px #dcefe8; }
.tag-captions { bottom:41px; left:-23px; animation-delay:-2.3s; }.caption-glyph { display:grid; place-items:center; width:25px; height:25px; color:#fff; background:#4c8280; border-radius:5px; font-size:10px; font-weight:600; }
.studio-hero-bottom { position:relative; z-index:1; border-top:1px solid rgb(202 232 224 / 17%); background:rgb(32 72 79 / 15%); }
.studio-capability-line { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; color:#d2e6e1; font-size:9px; letter-spacing:.08em; }
.studio-capability-line i { width:4px; height:4px; border-radius:50%; background:#a5e1d4; box-shadow:0 0 0 4px rgb(165 225 212 / 12%); }

/* 首页内容：工作流线、审核台、产品矩阵、明确的结束 CTA。 */
#page-home .studio-home-content { max-width: 1390px; padding-top: 12px; padding-bottom: 78px; }
.studio-workflow,.studio-feature,.studio-products { margin-top: 83px; }
.studio-section-intro { display:grid; grid-template-columns: minmax(145px,.32fr) minmax(0,1fr) auto; align-items:end; gap:25px; margin-bottom:27px; }
.studio-section-index { align-self:start; padding-top:8px; color:#4f797e; font-size:9px; letter-spacing:.14em; white-space:nowrap; }
.studio-section-intro h2 { color:#233f48; font-size:clamp(24px,3vw,35px); font-weight:620; letter-spacing:-.05em; }
.studio-section-intro p { margin-top:8px; color:#647d82; font-size:13px; }
.studio-flowline { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #c6d9da; border-bottom:1px solid #c6d9da; }
.studio-flowline::before { content:""; position:absolute; top:34px; left:8%; right:8%; height:1px; background:linear-gradient(90deg,#99c9c0,#79aba9,#b9d5ce); }
.flow-step { position:relative; min-height:184px; padding:20px 20px 21px; border-right:1px solid #d0dfe0; transition:background .25s ease, transform .25s ease; }
.flow-step:last-child { border-right:0; }.flow-step:hover { background:rgb(218 235 232 / 58%); transform:translateY(-3px); }
.flow-step > span { position:absolute; top:9px; right:17px; color:#7d9b9d; font-size:9px; letter-spacing:.08em; }
.flow-step-icon { position:relative; z-index:1; display:grid; place-items:center; width:30px; height:30px; margin-bottom:18px; color:#f0f8f5; background:linear-gradient(145deg,#4b8582,#31616b); border:4px solid #eaf0f1; border-radius:50%; box-shadow:0 0 0 1px #8bb8b2; }
.flow-step-icon svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.flow-step h3 { color:#294750; font-size:14px; font-weight:630; letter-spacing:-.02em; }
.flow-step p { max-width:220px; margin-top:7px; color:#687e83; font-size:11px; line-height:1.7; }
.studio-feature { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(35px,7vw,100px); align-items:center; padding:55px clamp(24px,5vw,70px); background:linear-gradient(126deg,#e0eceb,#d7e7e5 55%,#e5efec); border:1px solid #c8dcda; border-radius:13px; }
.feature-copy .studio-section-index { display:block; margin-bottom:18px; }
.feature-copy h2 { color:#294750; font-size:clamp(30px,4vw,46px); font-weight:620; letter-spacing:-.06em; line-height:1.23; }
.feature-copy h2 em { color:#367c7b; font-style:normal; }
.feature-copy p { max-width:420px; margin-top:17px; color:#5d777d; font-size:13px; line-height:1.9; }
.feature-link { display:inline-flex; align-items:center; gap:9px; margin-top:22px; color:#247b7c; font-size:12px; font-weight:650; text-decoration:none; }
.feature-link span { transition:transform .18s ease; }.feature-link:hover span { transform:translate(3px,-2px); }
.review-board { overflow:hidden; padding:13px; background:linear-gradient(145deg,#f6faf8,#e7f0ee); border:1px solid #c1d7d5; border-radius:9px; box-shadow:0 18px 42px rgb(35 78 82 / 11%); transform:rotate(.7deg); }
.review-board-top { display:flex; justify-content:space-between; align-items:center; padding:1px 2px 10px; color:#315860; font-size:10px; font-weight:650; }
.review-badge { display:flex; align-items:center; gap:5px; padding:4px 7px; color:#607f77; background:#e3f0e9; border-radius:4px; font-size:8px; font-weight:500; }
.review-badge i { width:5px; height:5px; border-radius:50%; background:#58a485; }
.review-frame { position:relative; overflow:hidden; aspect-ratio:16/8.6; border:1px solid #b3c9c6; border-radius:5px; background:#77988d; }
.review-image { position:absolute; inset:0; background:linear-gradient(180deg,transparent 44%,rgb(32 54 51 / 50%)),linear-gradient(145deg,#93b7a6 0 28%,#d4c59d 28% 47%,#748e7f 48% 61%,#465f58 62%); }
.review-image::before { content:""; position:absolute; left:12%; bottom:-35%; width:75%; height:80%; clip-path:polygon(0 100%,28% 10%,42% 58%,68% 0,100% 100%); background:linear-gradient(140deg,#567469,#324d4a); }
.review-image::after { content:""; position:absolute; top:15%; right:19%; width:11%; aspect-ratio:1; border-radius:50%; background:#e5d4a6; box-shadow:0 0 30px rgb(244 225 177 / 47%); }
.review-time,.review-frame-tag { position:absolute; bottom:8px; color:#eff5ef; font-size:7px; }.review-time { left:9px; }.review-frame-tag { right:9px; padding:3px 5px; border-radius:3px; background:rgb(32 67 68 / 55%); }
.review-actions { display:flex; align-items:center; gap:10px; padding:10px 1px 8px; color:#5e797d; font-size:8px; }
.review-actions span { display:flex; align-items:center; gap:4px; }.review-check { display:grid; place-items:center; width:12px; height:12px; color:#367b6d; background:#dceee6; border-radius:50%; font-size:7px; font-style:normal; }
.review-actions button { margin-left:auto; padding:6px 8px; color:#f3faf7; background:#477f7d; border:0; border-radius:4px; font:inherit; }
.review-progress { height:3px; overflow:hidden; border-radius:3px; background:#d6e3e1; }.review-progress i { display:block; width:61%; height:100%; background:linear-gradient(90deg,#72aaa1,#39817e); animation:review-progress 6s ease-in-out infinite alternate; }
.studio-products .studio-section-intro { grid-template-columns:minmax(145px,.32fr) minmax(0,1fr) auto; }
#homeProducts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
#homeProducts .pcard { overflow:hidden; min-width:0; padding:23px; background:linear-gradient(145deg,#f5f9f7,#e8f1ef); border-color:#c6d9d9; border-radius:9px; box-shadow:0 6px 20px rgb(44 83 86 / 5%); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
#homeProducts .pcard:hover { transform:translateY(-5px); border-color:#91b9b5; box-shadow:0 16px 30px rgb(44 83 86 / 12%); }
#homeProducts .pcard-icon { color:#2a7778; background:#dcebe8; border:1px solid #c7ddda; }
#homeProducts .pcard-title h3 { color:#28464f; }
#homeProducts .pcard-desc { color:#637b80; }
#homeProducts .pcard-actions .btn-primary { background:#397b7a; box-shadow:none; }
#homeProducts .pcard-meta { border-color:#d3e0df; }
.studio-closing { position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden; margin-top:85px; padding:48px clamp(24px,5vw,66px); color:#eff7f4; background:linear-gradient(112deg,#3b6970,#3e807d 67%,#57938a); border:1px solid #80aaa3; border-radius:12px; }
.studio-closing .studio-section-index { color:#c7e3db; }
.studio-closing h2 { position:relative; z-index:1; margin-top:13px; color:#f2f8f5; font-size:clamp(28px,3.6vw,42px); font-weight:610; line-height:1.22; letter-spacing:-.055em; }
.closing-actions { position:relative; z-index:1; display:grid; justify-items:start; gap:13px; }
.closing-actions .btn-primary { color:#23494d; background:#b7e6db; }
.closing-text-link { color:#e1f0eb; font-size:11px; text-decoration:none; }.closing-text-link:hover { color:#fff; }
.closing-orbit { position:absolute; width:380px; height:380px; right:12%; top:-225px; border:1px solid rgb(214 245 232 / 25%); border-radius:50%; box-shadow:0 0 0 35px rgb(214 245 232 / 5%),0 0 0 75px rgb(214 245 232 / 4%); animation:orbit-drift 15s linear infinite; }

/* 其他官网页面也换信息布局：账号/激活分栏，产品矩阵突出主产品，帮助入口分层。 */
#page-account .wrap,#page-activate .wrap { max-width:1120px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr); align-items:start; gap:0 42px; }
#page-account .page-head,#page-activate .page-head { grid-column:1/-1; }
#page-account .form-card,#page-activate .form-card { grid-column:1; max-width:680px; }
#page-account .tips,#page-activate .tips { grid-column:2; grid-row:2; margin-top:0; padding:25px; background:linear-gradient(145deg,#dfeceb,#e8f0ee); border:1px solid #c8d9d8; box-shadow:none; }
#page-account .tips h3,#page-activate .tips h3 { color:#31545b; }
#page-account .tips li,#page-activate .tips li { color:#60787d; line-height:1.75; }
#page-account .account-head { padding-bottom:17px; border-bottom:1px solid #d3e0df; }
#page-account .kv { margin-top:6px; }
#page-products .page-head { align-items:end; }
#page-products .page-head > div { max-width:760px; }
#page-products .page-head .search { width:min(300px,100%); }
#page-products #productGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#page-products #productGrid .pcard { position:relative; overflow:hidden; min-height:260px; padding:26px; background:linear-gradient(145deg,#f6f9f7,#e9f1ef); border-color:#cbdcdb; transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
#page-products #productGrid .pcard:first-child { grid-column:1/-1; min-height:285px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto 1fr auto; column-gap:35px; background:linear-gradient(118deg,#dcebe9 0%,#e5f0ed 48%,#eff5f2 100%); }
#page-products #productGrid .pcard:first-child .pcard-head,#page-products #productGrid .pcard:first-child .pcard-desc { grid-column:1; }
#page-products #productGrid .pcard:first-child .pcard-desc { max-width:640px; }
#page-products #productGrid .pcard:first-child .pcard-actions { grid-column:1; }
#page-products #productGrid .pcard:first-child .pcard-meta { grid-column:1/-1; }
#page-products #productGrid .pcard:hover { transform:translateY(-3px); border-color:#96b9b7; box-shadow:0 16px 30px rgb(44 83 86 / 10%); }
#page-help .support-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#page-help .support-shortcuts .card { position:relative; display:grid; grid-template-columns:45px 1fr; align-items:center; gap:0 15px; min-height:100px; padding:19px 22px; background:linear-gradient(135deg,#f6f9f7,#eaf2f0); border-color:#d0dfdd; }
#page-help .support-shortcuts .card::before { grid-row:span 2; content:""; display:grid; place-items:center; width:38px; height:38px; color:#eaf6f2; background:linear-gradient(145deg,#4b8582,#315e68); border-radius:9px; }
#page-help .support-shortcuts .card:nth-child(1)::before { content:"↓"; font-size:18px; }
#page-help .support-shortcuts .card:nth-child(2)::before { content:"◈"; font-size:17px; }
#page-help .support-shortcuts .card:nth-child(3)::before { content:"✓"; font-size:16px; }
#page-help .support-shortcuts .card:nth-child(4)::before { content:"↗"; font-size:16px; }
#page-help .support-shortcuts strong { color:#2b4b53; }
#page-help .support-shortcuts span { margin-top:4px; color:#6b8184; }
#page-help .faq-list details { background:#f1f6f4; }
#page-licenses .page-head,#page-records .page-head { align-items:end; }
#page-licenses #licenseGrid { gap:14px; }
#page-licenses .lcard { background:linear-gradient(145deg,#f7faf8,#eaf2f0); border-color:#d0dfdd; }
#page-records .table-card { background:#f5f8f7; border-color:#d0dfdd; }
#page-records .table th { background:#e4eeec; }
#page-scenarios .scenario-grid { gap:14px; }
#page-scenarios .scenario-grid .card { background:linear-gradient(145deg,#f5f9f7,#e8f0ee); border-color:#d0dfdd; }
#page-contact .form-card { background:linear-gradient(145deg,#f7faf8,#e8f1ef); }
#page-manual .manual-toc,#page-manual .manual-article { background:#f4f8f6; border-color:#cfdedd; }
.community-sidebar,.community-toolbar,.community-detail,.community-composer,.community-notifications,.community-discussion { background:#f3f7f5; border-color:#cddcdb; }
.community-discussion { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.community-discussion:hover { transform:translateY(-2px); border-color:#8fb7b3; box-shadow:0 12px 24px rgb(44 83 86 / 9%); }

/* 滚动进入时有轻量层次，页面始终支持减少动态效果。 */
[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .62s cubic-bezier(.2,.65,.25,1),transform .62s cubic-bezier(.2,.65,.25,1); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }

@keyframes editor-enter { from { opacity:0; transform:translate3d(28px,12px,0) rotateY(-4deg) rotateX(1deg) scale(.975); } to { opacity:1; transform:rotateY(-4deg) rotateX(1deg) scale(1); } }
@keyframes editor-float { 0%,100% { translate:0 0; } 50% { translate:0 -6px; } }
@keyframes float-tag { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes playhead-travel { from { left:18%; } to { left:76%; } }
@keyframes wave-pulse { from { transform:scaleY(.45); opacity:.65; } to { transform:scaleY(1); opacity:1; } }
@keyframes review-progress { from { width:48%; } to { width:74%; } }
@keyframes orbit-drift { to { transform:rotate(360deg); } }

@media (max-width:1000px) {
  #page-home .studio-hero-inner { grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr); gap:28px; }
  #page-home .studio-hero h1 { font-size:clamp(36px,4vw,41px); }
  .editor-main { grid-template-columns:72px minmax(0,1fr) 105px; gap:6px; padding:9px; }
  .demo-editor-area .editor-main { grid-template-columns:minmax(82px,.72fr) minmax(0,1.5fr) minmax(82px,.72fr); gap:5px; padding:6px; }
  .app-workspace-demo { grid-template-columns:65px minmax(0,1fr); }
  .editor-media-rail { gap:4px; }
  .studio-float-tag { transform:scale(.9); }
  #page-account .wrap,#page-activate .wrap { gap:0 24px; }
}
@media (max-width:760px) {
  #page-home .studio-hero-inner { grid-template-columns:1fr; gap:24px; min-height:0; padding-top:45px; padding-bottom:40px; }
  #page-home .studio-hero-copy { max-width:650px; }
  .studio-edition { margin-top:25px; }
  #page-home .studio-hero h1 { font-size:clamp(39px,8vw,54px); }
  #page-home .studio-lead { font-size:14px; }
  .studio-stage { width:100%; padding:8px 0 12px; }
  .studio-float-tag { display:none; }
  .editor-window { transform:none; animation:editor-enter .7s .08s cubic-bezier(.17,.72,.24,1) both; }
  .demo-editor-area .editor-main { min-height:300px; }
  .studio-capability-line { justify-content:flex-start; flex-wrap:wrap; gap:7px 9px; padding-top:11px; padding-bottom:11px; font-size:8px; }
  .studio-capability-line i { margin:0 2px; }
  #page-home .studio-home-content { padding-bottom:52px; }
  .studio-workflow,.studio-feature,.studio-products { margin-top:54px; }
  .studio-section-intro,.studio-products .studio-section-intro { grid-template-columns:1fr auto; gap:9px 14px; align-items:start; }
  .studio-section-index { grid-column:1/-1; }
  .studio-section-intro h2 { font-size:25px; }
  .studio-flowline { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studio-flowline::before { display:none; }
  .flow-step { min-height:150px; padding:18px 14px; border-bottom:1px solid #d0dfe0; }
  .flow-step:nth-child(2) { border-right:0; }
  .flow-step:nth-last-child(-n+2) { border-bottom:0; }
  .flow-step-icon { margin-bottom:12px; }
  .studio-feature { grid-template-columns:1fr; gap:25px; padding:30px 21px; }
  .feature-copy h2 { font-size:34px; }
  .review-board { transform:none; }
  #homeProducts { grid-template-columns:1fr; }
  #homeProducts .pcard { padding:19px; }
  .studio-closing { align-items:flex-start; flex-direction:column; margin-top:52px; padding:30px 22px; }
  .studio-closing h2 { font-size:32px; }
  .closing-actions { display:flex; align-items:center; flex-wrap:wrap; }
  #page-account .wrap,#page-activate .wrap { display:block; }
  #page-account .tips,#page-activate .tips { margin-top:16px; }
  #page-products #productGrid { grid-template-columns:1fr; }
  #page-products #productGrid .pcard:first-child { grid-column:auto; display:flex; }
  #page-help .support-shortcuts { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .editor-titlebar { grid-template-columns:1fr auto; }
  .editor-project-name { display:none; }
  .editor-main { grid-template-columns:56px minmax(0,1fr); min-height:190px; padding:7px; }
  .app-workspace-demo { grid-template-columns:1fr; }
  .app-sidebar-demo { display:none; }
  .demo-editor-area .editor-main { grid-template-columns:1fr; min-height:0; padding:7px; }
  .copy-resource-demo,.demo-editor-area .editor-inspector { display:none; }
  .demo-preview-head small { max-width:200px; }
  .demo-shot-row { grid-template-columns:14px 35px minmax(0,1fr) auto; min-height:31px; }
  .shot-thumb { width:35px; height:24px; }
  .editor-toolbar { gap:9px; padding:0 8px; }
  .editor-toolbar .editor-resolution { display:none; }
  .editor-toolbar button { margin-left:auto; }
  .editor-timeline { padding-left:39px; padding-right:8px; }
  .timeline-label { left:8px; }
  .studio-stage-caption { font-size:7px; }
  .studio-capability-line { font-size:7px; }
  .studio-capability-line i { width:3px; height:3px; }
  #page-products .page-head { align-items:flex-start; }
  #page-products .page-head .search { max-width:none; }
}

/* 应用场景：按客户端已有的四种剪辑入口展开，展示对应软件工作区。 */
#page-scenarios { padding-bottom:76px; background:linear-gradient(180deg,#e5edef 0,#edf2f2 300px,#eaf0f1 100%); overflow:hidden; }
#page-scenarios > .scenario-wrap { max-width:1320px; }
.scenario-hero { position:relative; display:grid; grid-template-columns:minmax(0,.85fr) minmax(380px,1.15fr); align-items:center; gap:40px; min-height:335px; margin:30px 0 56px; padding:45px clamp(28px,5vw,66px); overflow:hidden; color:#eef7f3; background:linear-gradient(116deg,#294a55 0%,#315e67 48%,#3c7776 100%); border:1px solid #689497; border-radius:13px; box-shadow:0 22px 55px rgb(34 71 77 / 13%); }
.scenario-hero::before { content:""; position:absolute; width:450px; height:450px; right:-100px; top:-260px; border:1px solid rgb(207 239 229 / 18%); border-radius:50%; box-shadow:0 0 0 36px rgb(207 239 229 / 4%),0 0 0 75px rgb(207 239 229 / 3%); }
.scenario-hero-copy { position:relative; z-index:1; max-width:520px; }
.scenario-hero h1 { margin:18px 0 14px; color:#f1f7f4; font-size:clamp(38px,4.6vw,59px); font-weight:610; line-height:1.18; letter-spacing:-.07em; }
.scenario-hero h1 em { color:#a5e1d4; font-style:normal; }
.scenario-hero-copy > p { max-width:455px; color:#d1e3de; font-size:13px; line-height:1.9; }
.scenario-hero-copy .btn-primary { margin-top:20px; color:#234a4e; background:#b1e5d9; }
.scenario-route-map { position:relative; z-index:1; display:grid; grid-template-columns:1fr 32px 1fr 32px 1fr; align-items:center; gap:4px; padding:27px 21px; background:rgb(228 244 238 / 8%); border:1px solid rgb(205 235 226 / 20%); border-radius:10px; backdrop-filter:blur(6px); }
.route-node { display:grid; justify-items:center; gap:6px; min-width:0; text-align:center; }
.route-node > i { display:grid; place-items:center; width:31px; height:31px; color:#d5f1e5; border:1px solid rgb(185 232 215 / 49%); border-radius:50%; background:rgb(149 213 190 / 14%); font-size:8px; font-style:normal; }
.route-node > b { color:#f0f7f4; font-size:9px; font-weight:600; white-space:nowrap; }
.route-node > small { color:#b5d2ca; font-size:7px; white-space:nowrap; }
.route-choice > i { color:#254f53; background:#b3e6d5; border-color:#c6f1e2; box-shadow:0 0 0 6px rgb(171 226 207 / 10%); }
.route-connector { position:relative; height:1px; background:rgb(196 226 216 / 38%); }
.route-connector::after { content:""; position:absolute; top:-2px; right:0; width:5px; height:5px; border-top:1px solid #c6e7db; border-right:1px solid #c6e7db; transform:rotate(45deg); }
.scenario-route-map .route-route-dot { position:absolute; left:20%; right:20%; top:50%; height:2px; transform:scaleX(.05); transform-origin:left; background:linear-gradient(90deg,#c0f1dc,#87cbb7); box-shadow:0 0 10px #a5e1d4; animation:route-scan 3.8s 1s ease-in-out infinite; }
.scenario-hero-index { position:absolute; right:clamp(28px,5vw,66px); bottom:17px; left:clamp(28px,5vw,66px); display:flex; justify-content:space-between; color:#a9c7c0; font-size:7px; letter-spacing:.16em; }
.scenario-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:19px; }
.scenario-section-head > span { color:#294750; font-size:21px; font-weight:620; letter-spacing:-.04em; }
.scenario-section-head p { color:#657d82; font-size:11px; }
.scenario-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.scenario-mode-card { position:relative; display:grid; grid-template-columns:minmax(140px,.72fr) minmax(0,1.28fr); align-items:center; gap:14px 20px; padding:23px 21px 0; overflow:hidden; background:linear-gradient(145deg,#f5f9f7,#e6efed); border:1px solid #c8dbd9; border-radius:10px; box-shadow:0 7px 22px rgb(38 77 83 / 5%); animation:scenario-rise .55s both; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.scenario-mode-card:nth-child(2) { animation-delay:.07s; }.scenario-mode-card:nth-child(3) { animation-delay:.14s; }.scenario-mode-card:nth-child(4) { animation-delay:.21s; }
.scenario-mode-card:hover { transform:translateY(-4px); border-color:#91b9b5; box-shadow:0 18px 34px rgb(44 83 86 / 11%); }
.scenario-mode-copy { align-self:start; padding-top:5px; }
.scenario-mode-index { color:#568084; font-size:7px; font-weight:650; letter-spacing:.13em; }
.scenario-mode-copy h2 { margin:12px 0 8px; color:#28464f; font-size:21px; font-weight:620; letter-spacing:-.05em; }
.scenario-mode-copy p { color:#60787d; font-size:10px; line-height:1.85; }
.scenario-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:13px; }
.scenario-tags span { padding:4px 6px; color:#477273; background:#e2eeea; border:1px solid #cfdfdc; border-radius:3px; font-size:7px; }
.scenario-miniui { min-width:0; padding:8px 8px 0; overflow:hidden; color:#e4efeb; background:linear-gradient(145deg,#42646a,#34565d 72%,#31545b); border:1px solid #90b2ad; border-radius:6px 6px 0 0; box-shadow:0 10px 24px rgb(34 70 75 / 14%); transform:perspective(900px) rotateY(-2deg); transform-origin:right center; }
.miniui-top { display:flex; align-items:center; gap:8px; min-height:19px; border-bottom:1px solid rgb(211 237 229 / 18%); color:#e8f2ee; font-size:6px; }
.miniui-top span:nth-child(2) { overflow:hidden; margin-left:auto; color:#afc9c2; font-size:5px; text-overflow:ellipsis; white-space:nowrap; }
.miniui-top > i { flex:0 0 5px; width:5px; height:5px; border-radius:50%; background:#a5e1d4; }
.miniui-three { display:grid; grid-template-columns:.72fr 1.5fr .72fr; gap:5px; min-height:119px; padding:8px 0; }
.miniui-copy,.miniui-params { display:grid; align-content:start; gap:6px; padding:6px 5px; background:rgb(227 244 237 / 5%); border:1px solid rgb(199 226 217 / 16%); border-radius:3px; }
.miniui-copy b,.miniui-params b,.miniui-preview b { overflow:hidden; color:#e9f2ef; font-size:6px; font-weight:550; text-overflow:ellipsis; white-space:nowrap; }
.miniui-copy > i,.miniui-params > i { display:block; height:15px; background:rgb(207 234 225 / 8%); border:1px solid rgb(199 226 217 / 16%); border-radius:2px; }
.miniui-copy > i:first-of-type { background:rgb(154 215 193 / 18%); border-color:rgb(172 224 202 / 36%); }
.miniui-preview { display:grid; grid-template-rows:auto 1fr auto auto; gap:5px; min-width:0; }
.miniui-preview > span { position:relative; min-height:57px; overflow:hidden; background:linear-gradient(180deg,#90b2a4 0 36%,#d1c39a 37% 55%,#758c7f 56% 67%,#48645d 68%); border:1px solid rgb(203 230 219 / 29%); border-radius:3px; }
.miniui-preview > span::before { content:""; position:absolute; inset:15% 0 -25%; clip-path:polygon(0 65%,28% 0,44% 53%,69% 12%,100% 61%,100% 100%,0 100%); background:linear-gradient(130deg,#607e70,#345652); }
.miniui-preview > i { justify-self:center; width:15px; height:15px; margin-top:-42px; z-index:1; border:1px solid #d7e8e1; border-radius:50%; background:rgb(28 61 63 / 48%); }
.miniui-preview > small { overflow:hidden; color:#b7d0c8; font-size:5px; text-overflow:ellipsis; white-space:nowrap; }
.miniui-status { display:flex; align-items:center; gap:5px; min-height:19px; margin:0 -8px; padding:0 9px; color:#afc9c2; background:rgb(24 53 59 / 27%); border-top:1px solid rgb(211 237 229 / 16%); font-size:5px; }
.miniui-status > i { width:4px; height:4px; border-radius:50%; background:#9be0c7; }
.scenario-mode-foot { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; border-top:1px solid #d2e0de; color:#617a7d; font-size:8px; }
.scenario-mode-foot a { color:#287b7c; font-size:8px; font-weight:600; text-decoration:none; }
.scenario-mode-foot a:hover { color:#1d5f64; }
.classify-board { display:grid; grid-template-columns:.84fr 1.16fr; gap:6px; min-height:119px; padding:9px 1px; }
.classify-folder,.classify-sequence { display:grid; align-content:start; gap:5px; padding:6px; background:rgb(227 244 237 / 5%); border:1px solid rgb(199 226 217 / 16%); border-radius:3px; }
.classify-folder b,.classify-sequence b { margin-bottom:3px; color:#e9f2ef; font-size:6px; }
.classify-folder i { overflow:hidden; padding:4px 3px; color:#c1d6d1; background:rgb(207 234 225 / 6%); border-radius:2px; font-size:5px; font-style:normal; white-space:nowrap; }
.classify-sequence > div { display:grid; grid-template-columns:11px 30px 1fr; align-items:center; gap:4px; color:#bed3cd; font-size:5px; }
.classify-sequence > div > span { color:#aec9c0; }
.classify-sequence > div > i { height:11px; border:1px solid rgb(208 236 226 / 22%); border-radius:2px; background:linear-gradient(120deg,#83afa3,#507a77); }
.classify-sequence > div:nth-last-child(2) > i { background:linear-gradient(120deg,#9b9d82,#6d8175); }
.classify-sequence > div > em { font-style:normal; }
.speech-screen { display:grid; grid-template-columns:.77fr 1.23fr; gap:7px; min-height:119px; padding:9px 1px; }
.speech-video { position:relative; overflow:hidden; min-height:94px; background:linear-gradient(150deg,#9db5a3 0 27%,#d2c49b 28% 43%,#82977f 44% 59%,#3e615b 60%); border:1px solid rgb(203 230 219 / 29%); border-radius:3px; }
.speech-video > span { position:absolute; inset:53% 0 -16%; clip-path:polygon(0 100%,35% 0,51% 51%,72% 8%,100% 100%); background:#46655c; }
.speech-video > i { position:absolute; top:39%; left:43%; display:grid; place-items:center; width:20px; height:20px; color:#eef6f1; border:1px solid #cce1d8; border-radius:50%; background:rgb(28 61 63 / 44%); font-size:7px; font-style:normal; }
.speech-video > small { position:absolute; bottom:4px; left:5px; color:#edf5f1; font-size:5px; }
.speech-content { display:grid; align-content:start; gap:6px; min-width:0; }
.speech-content > b { color:#e9f2ef; font-size:6px; }
.speech-content > p { overflow:hidden; margin:0; padding:5px; color:#bdd2cc; background:rgb(227 244 237 / 5%); border:1px solid rgb(199 226 217 / 14%); border-radius:2px; font-size:5px; text-overflow:ellipsis; white-space:nowrap; }
.speech-content > p.speech-selected { color:#e7f4eb; background:rgb(150 211 190 / 13%); border-color:rgb(163 220 198 / 40%); }
.speech-wave { display:flex; align-items:center; justify-content:space-between; height:18px; padding:0 4px; background:rgb(137 192 173 / 11%); border-radius:2px; }
.speech-wave i { width:2px; height:var(--bar,40%); border-radius:2px; background:#a8ddc7; animation:wave-pulse 1.2s ease-in-out infinite alternate; }
.speech-wave i:nth-child(3n) { --bar:75%; animation-delay:-.5s; }.speech-wave i:nth-child(4n) { --bar:90%; animation-delay:-.2s; }
.ai-prompt { display:grid; gap:6px; padding:11px 12px 8px; }
.ai-prompt > small { color:#bad1cb; font-size:6px; }
.ai-prompt > div { min-height:55px; padding:8px; color:#e1ede8; background:rgb(20 47 53 / 25%); border:1px solid rgb(199 226 217 / 18%); border-radius:3px; font-size:6px; line-height:1.8; }
.prompt-caret { display:inline-block; width:1px; height:8px; margin-left:2px; vertical-align:-1px; background:#b4ead6; animation:caret-blink 1s steps(2,start) infinite; }
.ai-prompt button { justify-self:end; padding:5px 8px; color:#244b4f; background:#aee2d3; border:0; border-radius:3px; font:inherit; font-size:6px; }
.ai-prompt button b { margin-left:5px; }
.ai-output { display:flex; align-items:center; gap:7px; margin:0 11px 9px; padding:6px; background:rgb(227 244 237 / 7%); border:1px solid rgb(199 226 217 / 18%); border-radius:3px; }
.ai-output-thumb { position:relative; display:grid; place-items:center; width:34px; height:23px; color:white; background:linear-gradient(140deg,#9eb7a6 0 30%,#c5b98d 31% 48%,#46645c 49%); border-radius:2px; font-size:7px; }
.ai-output > span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.ai-output b { overflow:hidden; color:#e4efeb; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
.ai-output small { color:#abc5bd; font-size:5px; }
.ai-output > em { margin-left:auto; color:#c3e8d6; font-size:5px; font-style:normal; white-space:nowrap; }
.scenario-review-strip { position:relative; display:flex; align-items:center; gap:20px; margin-top:37px; padding:26px 32px; overflow:hidden; background:linear-gradient(120deg,#dcebea,#eaf2ef); border:1px solid #c4d9d7; border-radius:9px; }
.review-strip-mark { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; color:#eff8f3; background:linear-gradient(145deg,#4c8782,#32646a); border:5px solid #d4e5e1; border-radius:50%; box-shadow:0 0 0 1px #90b9b3; }
.scenario-review-strip > div:nth-child(2) { position:relative; z-index:1; flex:1; }
.scenario-review-strip h2 { margin:6px 0; color:#294750; font-size:17px; font-weight:620; letter-spacing:-.035em; }
.scenario-review-strip p { max-width:700px; color:#627c80; font-size:10px; line-height:1.75; }
.scenario-review-strip .btn { position:relative; z-index:1; flex:0 0 auto; color:#eff7f4; background:#397b7a; }
.review-strip-orbit { position:absolute; width:180px; height:180px; right:14%; top:-105px; border:1px solid rgb(75 137 130 / 15%); border-radius:50%; box-shadow:0 0 0 23px rgb(75 137 130 / 4%); animation:orbit-drift 18s linear infinite; }

@keyframes shot-selected { 0%,100% { box-shadow:inset 0 0 0 0 rgb(169 225 205 / 0%); } 50% { box-shadow:inset 0 0 0 1px rgb(169 225 205 / 24%); } }
@keyframes route-scan { 0%,15% { transform:scaleX(.05); opacity:.25; } 65%,100% { transform:scaleX(1); opacity:.9; } }
@keyframes scenario-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes caret-blink { to { visibility:hidden; } }
@media (max-width:1000px) {
  .scenario-hero { grid-template-columns:1fr; gap:25px; }
  .scenario-hero-copy { max-width:650px; }
  .scenario-route-map { max-width:690px; }
  .scenario-mode-card { grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr); gap:12px; padding:18px 16px 0; }
}
@media (max-width:760px) {
  .scenario-hero { min-height:0; margin:23px 0 38px; padding:32px 23px 48px; }
  .scenario-hero h1 { font-size:42px; }
  .scenario-route-map { padding:21px 10px; }
  .scenario-route-map { grid-template-columns:1fr 18px 1fr 18px 1fr; }
  .route-node > small { font-size:6px; }
  .scenario-hero-index { right:23px; left:23px; }
  .scenario-section-head { display:block; }
  .scenario-section-head p { margin-top:7px; }
  .scenario-mode-grid { grid-template-columns:1fr; }
  .scenario-mode-card { grid-template-columns:minmax(125px,.72fr) minmax(0,1.28fr); }
  .scenario-review-strip { align-items:flex-start; flex-wrap:wrap; padding:23px; }
  .scenario-review-strip > div:nth-child(2) { flex-basis:calc(100% - 65px); }
  .scenario-review-strip .btn { margin-left:62px; }
}
@media (max-width:520px) {
  .scenario-hero { padding-right:18px; padding-left:18px; }
  .scenario-hero h1 { font-size:36px; }
  .scenario-route-map { gap:1px; padding:17px 3px; }
  .route-node > b { font-size:7px; }
  .route-node > small { max-width:72px; overflow:hidden; font-size:5px; text-overflow:ellipsis; }
  .route-connector { margin:0 1px; }
  .scenario-hero-index { right:18px; left:18px; font-size:6px; }
  .scenario-mode-card { grid-template-columns:1fr; gap:12px; padding:18px 15px 0; }
  .scenario-mode-copy h2 { margin:8px 0 5px; }
  .scenario-mode-copy p { max-width:420px; }
  .scenario-miniui { transform:none; }
  .miniui-three,.classify-board,.speech-screen { min-height:135px; }
  .scenario-mode-foot { grid-column:1; }
  .scenario-review-strip { gap:12px; padding:19px 17px; }
  .scenario-review-strip h2 { font-size:15px; }
  .scenario-review-strip p { font-size:9px; }
  .scenario-review-strip .btn { margin-left:54px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .editor-window,.studio-float-tag,.timeline-playhead,.wave-track i,.review-progress i,.closing-orbit { animation:none !important; }
  .flow-step,.community-discussion,#homeProducts .pcard,.btn { transition:none !important; }
  .scenario-mode-card { animation:none !important; }
  .scenario-route-map .route-route-dot,.review-strip-orbit,.speech-wave i,.demo-shot-row.active,.prompt-caret { animation:none !important; }
}