/* 小互出品（2026-10-23 方案 A 产品展台 + 三扇门）。只作用于 .v3-studio。
   颜色只用外壳令牌；原型里 HISTYLE 的紫、CoWe 的黄、「能用」的绿没有对应令牌，分别换成玫红 / 金 / 玫红。
   布局按页面实际宽度（容器查询）断行，侧栏开着关着都一样。 */
.v3-studio{container:v3studio/inline-size}
.v3-studio .st{padding-top:44px;padding-bottom:96px}
.v3-studio .v3-kick .dot{width:6px;height:6px;border-radius:50%;background:var(--sv-rose)}

/* 标题 + 三个数 */
.v3-studio .st-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--sv-line)}
.v3-studio .st-t{font-size:clamp(30px,2.9vw,42px);line-height:1.15}
.v3-studio .st-t em{font-style:normal;background:linear-gradient(92deg,var(--sv-rose) 10%,color-mix(in srgb,var(--sv-rose) 62%,var(--sv-bg)) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
html.dark .v3-studio .st-t em{background-image:linear-gradient(92deg,var(--sv-rose) 10%,color-mix(in srgb,var(--sv-rose) 62%,var(--sv-ink)) 90%)}
.v3-studio .st-s{font-size:14px;color:var(--sv-ink-2);margin:8px 0 0;max-width:46em;line-height:1.7}
.v3-studio .st-n{display:flex;gap:28px;flex:none}
.v3-studio .st-n div{display:grid}
.v3-studio .st-n b{font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.v3-studio .st-n span{font-size:12px;color:var(--sv-ink-3);margin-top:6px}

/* 展台 */
.v3-studio .band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:32px;padding:44px;border-radius:32px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--sv-line)}
.v3-studio .hs{background:linear-gradient(140deg,color-mix(in srgb,var(--sv-violet) 10%,var(--sv-bg)),var(--sv-bg-2) 62%)}
.v3-studio .cw{background:linear-gradient(140deg,var(--sv-gold-soft),var(--sv-bg-2) 62%)}
.v3-studio .k{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--sv-ink-3)}
.v3-studio .copy h2{font-size:clamp(28px,3.2vw,42px);line-height:1.15;letter-spacing:-.035em;font-weight:700;margin:10px 0 0}
.v3-studio .copy p{font-size:15px;color:var(--sv-ink-2);margin:12px 0 0;line-height:1.75;max-width:32em}
.v3-studio .ck{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.v3-studio .ck li{display:flex;gap:8px;align-items:baseline;font-size:13.5px;color:var(--sv-ink-2)}
.v3-studio .ck-i{flex:none;color:var(--sv-ok);transform:translateY(2px)}
.v3-studio .chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.v3-studio .chips span:not(.v3-tbd){font-size:12px;padding:4px 10px;border-radius:999px;background:var(--sv-raise);box-shadow:inset 0 0 0 1px var(--sv-line);color:var(--sv-ink-2)}
.v3-studio .chips .v3-tbd{margin-left:4px}
.v3-studio .go{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.v3-studio .ic{flex:none}
.v3-studio .pl{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:0;border-radius:999px;padding:2px 9px;line-height:16px;white-space:nowrap}
.v3-studio .pl.ok{color:var(--sv-ok);background:var(--sv-ok-soft)}
.v3-studio .pl.bt{color:var(--sv-gold);background:var(--sv-gold-soft)}
.v3-studio .pl.cu{color:var(--sv-ink-2);background:var(--sv-bg-3)}

/* HISTYLE：手机里自动慢滚一篇排好的长文；悬停 / 聚焦时停住，系统要求少动画时不滚、改成可以自己划 */
.v3-studio .phone{--st-scr:538px;justify-self:center;width:290px;height:560px;padding:11px;border-radius:44px;background:var(--sv-ink);box-shadow:var(--sv-sh-3),inset 0 0 0 1px var(--sv-line-2)}
html.dark .v3-studio .phone{background:var(--sv-bg-3);box-shadow:var(--sv-sh-3),inset 0 0 0 1px var(--sv-line-2)}
.v3-studio .scr{width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--sv-raise);position:relative;outline:none}
.v3-studio .scr:focus-visible{box-shadow:0 0 0 2px var(--sv-rose)}
.v3-studio .scr img{width:100%;height:auto;animation:v3-studio-scroll 26s ease-in-out infinite alternate}
.v3-studio .phone:hover .scr img,.v3-studio .scr:focus img{animation-play-state:paused}
@keyframes v3-studio-scroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + var(--st-scr)))}}

/* CoWe：品牌卡 + 工作台截图 + 「AI 在等你拍板」浮条 */
.v3-studio .vis{position:relative;padding-bottom:40px}
.v3-studio .card{border-radius:20px;overflow:hidden;box-shadow:var(--sv-sh-3),0 0 0 1px var(--sv-line)}
.v3-studio .card img{width:100%;height:auto}
.v3-studio .ws{position:absolute;right:-18px;bottom:0;width:60%;border-radius:14px;box-shadow:var(--sv-sh-3),0 0 0 1px var(--sv-line)}
.v3-studio .ws img{width:100%;height:auto;border-radius:14px}
.v3-studio .float{position:absolute;left:-22px;bottom:-14px;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--sv-ink-2);padding:7px 11px;border-radius:12px;background:var(--sv-raise);box-shadow:var(--sv-sh-3),0 0 0 1px var(--sv-line);white-space:nowrap}
.v3-studio .float i{width:8px;height:8px;border-radius:50%;background:var(--sv-gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--sv-gold) 25%,transparent)}
.v3-studio .float b{color:var(--sv-ink)}

/* 小标题 */
.v3-studio .lab{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:40px 0 14px}
.v3-studio .lab h2{font-size:21px;letter-spacing:-.02em;font-weight:700;margin:0}
.v3-studio .lab span{font-size:13px;color:var(--sv-ink-3)}
.v3-studio .dlab{margin-top:56px}

/* CoWe 应用卡 */
.v3-studio .apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.v3-studio .ap{min-width:0;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--sv-raise);box-shadow:var(--sv-sh-1),0 0 0 1px var(--sv-line)}
.v3-studio .ap-s{aspect-ratio:16/10;background:var(--sv-bg-2);display:grid;place-items:center;overflow:hidden}
.v3-studio .ap-s img{width:100%;height:100%;object-fit:cover;object-position:top left}
.v3-studio .ph{width:100%;height:100%;display:grid;place-items:center;font-size:12px;color:var(--sv-ink-3);background:repeating-linear-gradient(135deg,var(--sv-bg-2) 0 10px,var(--sv-bg-3) 10px 20px)}
.v3-studio .ap-d{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
.v3-studio .ap-d b{font-size:15px;letter-spacing:-.01em}
.v3-studio .ap-d p{font-size:12.5px;color:var(--sv-ink-3);margin:4px 0 0;line-height:1.55}
.v3-studio .ap-f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:12px;font-size:11.5px;color:var(--sv-ink-3)}
.v3-studio .ap-b{align-self:flex-start;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--sv-rose)}
.v3-studio .ap-b:hover{text-decoration:underline}
.v3-studio .next{align-items:center;justify-content:center;text-align:center;padding:18px;gap:6px;background:var(--sv-bg-2);box-shadow:inset 0 0 0 1px var(--sv-line)}
.v3-studio .next img{width:96px;height:auto}
.v3-studio .next b{font-size:16px}
.v3-studio .next p{font-size:12.5px;color:var(--sv-ink-3);line-height:1.55;margin:0 0 6px}

/* 三扇门 */
.v3-studio .doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v3-studio .door{min-width:0;display:flex;flex-direction:column;padding:24px;border-radius:24px;background:var(--sv-raise);box-shadow:var(--sv-sh-1),0 0 0 1px var(--sv-line)}
.v3-studio .door.d1{background:linear-gradient(165deg,color-mix(in srgb,var(--sv-violet) 9%,var(--sv-raise)),var(--sv-raise) 55%)}
.v3-studio .door.d2{background:linear-gradient(165deg,var(--sv-gold-soft),var(--sv-raise) 55%)}
.v3-studio .door.d3{background:linear-gradient(165deg,color-mix(in srgb,var(--sv-rose) 10%,var(--sv-raise)),var(--sv-raise) 55%)}
.v3-studio .door small{font-size:12px;font-weight:600;color:var(--sv-ink-3)}
.v3-studio .door h3{font-size:22px;letter-spacing:-.025em;font-weight:700;margin:6px 0 0}
.v3-studio .door p{font-size:13.5px;color:var(--sv-ink-2);margin:8px 0 0;line-height:1.65}
.v3-studio .door ul,.v3-studio .door ol{list-style:none;margin:14px 0 0;padding:0;display:grid}
.v3-studio .door li{display:flex;gap:10px;align-items:baseline;justify-content:space-between;padding:8px 0;border-top:1px solid var(--sv-line);font-size:13px}
.v3-studio .door li b{flex:none}
.v3-studio .door li span{color:var(--sv-ink-3);text-align:right}
.v3-studio .door li .pl{align-self:center}
.v3-studio .door ol{counter-reset:st}
.v3-studio .door ol li{justify-content:flex-start;counter-increment:st}
.v3-studio .door ol li::before{content:"0" counter(st);flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--sv-rose);font-weight:700;min-width:20px}
.v3-studio .door ol li span{text-align:left}
.v3-studio .dgo{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:18px}

/* 表单（主体样式在 common.css 的 .v3-form） */
.v3-studio .st-form{margin-top:24px;scroll-margin-top:72px}
.v3-studio .st-form .v3-seg{justify-self:start}

@media (prefers-reduced-motion:reduce){
  .v3-studio .scr{overflow-y:auto;overscroll-behavior:contain}
  .v3-studio .scr img{animation:none}
}

@container v3studio (max-width:1000px){
  .v3-studio .apps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container v3studio (max-width:860px){
  .v3-studio .band{grid-template-columns:1fr;gap:28px;padding:28px}
  .v3-studio .cw .vis{order:2}
  .v3-studio .doors{grid-template-columns:1fr}
}
@container v3studio (max-width:700px){
  .v3-studio .apps{grid-template-columns:1fr 1fr;gap:10px}
}
@container v3studio (max-width:640px){
  .v3-studio .st{padding-top:24px;padding-bottom:72px}
  .v3-studio .st-n{gap:18px}
  .v3-studio .st-n b{font-size:24px}
  .v3-studio .band{padding:20px;border-radius:24px}
  .v3-studio .ck{grid-template-columns:1fr}
  .v3-studio .phone{--st-scr:418px;width:230px;height:440px;border-radius:38px}
  .v3-studio .scr{border-radius:28px}
  .v3-studio .ws{right:-8px;width:62%}
  .v3-studio .float{left:-6px;font-size:11px}
  .v3-studio .ap-d{padding:12px}
  .v3-studio .ap-d p{display:none}
  .v3-studio .door{padding:20px}
}