/* VibeDraw 产品站的品牌层：沿用 Hermit 官网的令牌与栅格，只加应用专属版式。
   品牌色取自应用图标本身的洋红。 */
:root {
  --app:#ff2b92; --app-ink:#fff; --app-soft:#ffe9f4; --app-line:#f8b8d6; --app-deep:#d4106f;
}
:root[data-theme="dark"] { --app-soft:#3d0f28; --app-line:#7a2450; --app-deep:#ff77ba; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --app-soft:#3d0f28; --app-line:#7a2450; --app-deep:#ff77ba; }
}

.accent { color:var(--app-deep); }
.app-button { background:var(--app); color:var(--app-ink); }
.app-icon { background:var(--app-soft); color:var(--app-deep); }

.app-hero { display:grid; grid-template-columns:1.02fr 1fr; align-items:center; gap:var(--space-7); padding:var(--section-space) 0; }
.app-hero .lead { max-width:640px; }
.app-hero .fine { margin-top:20px; }
.app-meta { display:flex; align-items:center; gap:14px; margin-top:var(--space-5); color:var(--muted); font-size:var(--text-label); }
.app-meta img { width:56px; height:56px; border-radius:16px; }

/* 画布示意：涂鸦层与成图层叠在同一块画布上。 */
.studio { position:relative; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.studio-bar { display:flex; align-items:center; gap:9px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; color:var(--muted); }
.studio-dot { width:11px; height:11px; border-radius:4px; background:var(--app); }
.studio-live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; background:var(--app-soft); color:var(--app-deep); font-size:10px; letter-spacing:.08em; }
.studio-live i { width:6px; height:6px; border-radius:50%; background:var(--app-deep); animation:blink 1.6s var(--ease) infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.studio-stage { position:relative; height:236px; margin:18px 0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--soft); }
.studio-layer { position:absolute; inset:0; }
.studio-layer.sketch { z-index:2; }
.studio-layer.sketch svg { width:100%; height:100%; }
.studio-layer.sketch path { stroke:var(--ink); opacity:.82; fill:none; }
.studio-layer.render { border-radius:0; overflow:hidden; }
.studio-layer.render .sun { position:absolute; right:16%; top:14%; width:56px; height:56px; border-radius:50%; background:radial-gradient(circle,var(--app-soft),var(--app) 78%); opacity:.85; }
.studio-layer.render .ridge { position:absolute; left:-8%; right:-8%; height:74%; border-radius:50% 50% 0 0 / 46% 46% 0 0; }
.studio-layer.render .ridge.back { bottom:-16%; background:rgba(255,43,146,.34); }
.studio-layer.render .ridge.front { bottom:-30%; background:rgba(212,16,111,.62); }
.studio-tools { display:flex; gap:8px; }
.tool { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--soft); color:var(--muted); font-size:14px; }
.tool.on { background:var(--app); color:var(--app-ink); }
.tool.alt { margin-left:auto; background:var(--app-soft); color:var(--app-deep); }
.studio-prompt { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--bg); font-size:12px; color:var(--muted); }
.studio-prompt i { color:var(--app-deep); }
.studio-prompt em { margin-left:auto; font-style:normal; font-size:10px; padding:4px 8px; border-radius:8px; background:var(--app-soft); color:var(--app-deep); white-space:nowrap; }
.studio .art-caption { margin-top:16px; }

.live-band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--section-space) 0; }
.live-band .split { align-items:start; }
.live-band .mini-steps { margin-top:var(--space-5); }
.ladder-card { padding:var(--card-space); }
.ladder-row { display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.ladder-row:last-of-type { border-bottom:0; }
.ladder-tag { align-self:start; padding:5px 8px; border-radius:9px; background:var(--soft); color:var(--muted); font-size:11px; font-weight:700; text-align:center; }
.ladder-tag.live { background:var(--app); color:var(--app-ink); }
.ladder-row strong { display:block; font-size:15px; margin-bottom:6px; }
.ladder-row p { margin:0; font-size:13px; line-height:1.75; }
.ladder-card .fine { margin-top:var(--space-4); }

.provider-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:var(--space-4); }
.provider-grid article { padding:var(--space-5); border:1px solid var(--line); border-top:3px solid var(--app); border-radius:18px; background:var(--surface); }
.provider-grid h3 { font-size:15px; display:flex; align-items:center; gap:9px; }
.provider-grid h3 i { color:var(--app-deep); font-size:13px; }
.provider-grid p { margin:0; font-size:13px; line-height:1.78; }
.provider-grid code { font-size:12px; padding:1px 5px; border-radius:6px; background:var(--soft); }

.hardware-card { margin-top:var(--space-5); padding:var(--card-space); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.hardware-card h3 { font-size:20px; margin-bottom:var(--space-4); }
.hardware-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4); }
.hardware-grid > div { padding:var(--space-4); border-radius:16px; background:var(--bg); }
.hardware-tier { display:inline-block; margin-bottom:10px; padding:4px 10px; border-radius:8px; background:var(--app); color:var(--app-ink); font-size:11px; font-weight:750; letter-spacing:.04em; }
.hardware-grid p { margin:0; font-size:13px; line-height:1.75; }
.hardware-card .fine { margin:var(--space-4) 0 0; }

.grid-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:var(--space-4); }
.card.slim { padding:var(--space-5); }
.card.slim h3 { font-size:16px; display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.card.slim h3 i { color:var(--app-deep); font-size:14px; }
.card.slim p { font-size:13px; line-height:1.75; }

.install-card { padding:var(--card-space); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.install-head { display:flex; align-items:center; gap:15px; margin-bottom:26px; }
.install-head img { width:62px; height:62px; border-radius:18px; }
.install-head h2 { font-size:27px; margin:0 0 4px; }
.install-head p { margin:0; font-size:13px; }
.install-card .button-row { margin-top:var(--space-5); }

.sibling-card { display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:var(--space-6); padding:var(--card-space); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.sibling-card img { width:132px; height:132px; border-radius:32px; justify-self:end; }
.sibling-card h2 { font-size:27px; }
.sibling-card .button-row { margin-top:var(--space-4); }

@media(max-width:1000px) {
  .app-hero { grid-template-columns:1fr; gap:var(--space-6); }
  .studio { max-width:520px; }
}
@media(max-width:760px) {
  .live-band { padding:var(--space-7) 0; }
  .live-band .split { grid-template-columns:1fr; gap:var(--space-5); }
  .studio-stage { height:206px; }
  .sibling-card { grid-template-columns:1fr; gap:var(--space-5); }
  .sibling-card img { justify-self:start; width:104px; height:104px; border-radius:26px; }
  .studio-prompt { flex-wrap:wrap; }
  .studio-prompt em { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { .studio-live i { animation:none; } }