@import url("assets/guide-content.css?v=guide-unified-3");

@font-face{
  font-family:"Brand Noto Sans SC";
  src:url("assets/fonts/noto-sans-sc-vf.ttf") format("truetype");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

/* Guide content tokens: interface chrome stays neutral-dark, while light
   demonstration canvases keep a separate, explicit token set. */
:root{
  --guide-ui-canvas:var(--shell-canvas,#09090b);
  --guide-ui-surface:var(--shell-raised,#18181b);
  --guide-ui-surface-hover:var(--shell-soft,#27272a);
  --guide-ui-border:var(--shell-border,#27272a);
  --guide-ui-border-strong:var(--shell-border-strong,#3f3f46);
  --guide-ui-divider:rgba(255,255,255,.075);
  --guide-ui-text:var(--shell-text,#fafafa);
  --guide-ui-text-muted:var(--shell-text-muted,#a1a1aa);
  --guide-ui-text-subtle:var(--shell-text-subtle,#71717a);
  --guide-ui-title-muted:#797d86;
  --guide-ui-focus:var(--shell-focus,#d4d4d8);
  --guide-ui-accent:var(--brand-blue,#007bfd);
  --guide-ui-radius-sm:6px;
  --guide-ui-radius-md:10px;
  --guide-ui-radius-lg:12px;
  --guide-ui-radius-xl:16px;
  --guide-ui-radius-pill:999px;
  --guide-ui-motion-fast:160ms ease;

  --guide-demo-surface:#fafafa;
  --guide-demo-paper:#eef0f3;
  --guide-demo-field:#e5e8ec;
  --guide-demo-ink:#101216;
  --guide-demo-border:#d3d7de;
  --guide-demo-text-muted:#686e78;
  --guide-demo-text-subtle:#777d87;
}

/* Guide 各页共享：左窄目录 + 右宽内容
   参考 brandpad.io/international 右侧正文，brandpad.io/selleb 的左说明右示意
   v6：全局字号统一下调 1 号；字体预览加入本地变量字体与交互控件 */
.gsplit{display:grid;grid-template-columns:1fr;min-height:calc(100dvh - 48px)}
.gwrap{padding:28px 64px 80px;max-width:1420px}
.ghead{border-bottom:1px solid var(--guide-ui-divider);padding-bottom:26px;margin-bottom:38px}
.ghead h1,.ghead h2{font-size:37px;line-height:1.1;font-weight:600;letter-spacing:-.035em;margin:0}
.ghead p{margin:13px 0 0;font-size:15.5px;color:var(--ink2);line-height:1.68;max-width:660px}
.ghead .acts{margin-top:20px;display:flex;gap:10px}

/* GitHub Brand Toolkit 信息架构：面包屑 + 正文 + 右侧本页目录。 */
.guide-breadcrumbs{display:flex;align-items:center;gap:7px;margin:0 0 34px;color:var(--ink3);font-size:12.5px;line-height:1.4}
.guide-breadcrumbs a{color:var(--brand-blue)}
.guide-breadcrumbs i{font-style:normal;color:var(--ink4)}
.guide-document{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:52px;align-items:start}
.guide-article{min-width:0;max-width:930px}
.guide-article .guide-page-head{margin-bottom:28px}
.ghead .guide-page-title{
  max-width:900px;margin:0;color:var(--guide-ui-title-muted);
  font-size:clamp(35px,3.35vw,49px);font-weight:400;line-height:1.125;letter-spacing:-.04em;
  text-wrap:balance;
}
.ghead .guide-page-title strong,.ghead .guide-page-title span{font:inherit;letter-spacing:inherit}
.ghead .guide-page-title strong{color:var(--guide-ui-text);font-weight:inherit}
.ghead .guide-page-title span{color:var(--guide-ui-title-muted)}
.guide-reference-note{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin:0 0 26px;padding:16px 18px;border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-md);background:var(--guide-ui-surface)}
.guide-reference-note strong{display:block;font-size:13.5px;font-weight:600}
.guide-reference-note p{margin:5px 0 0;color:var(--ink2);font-size:12.5px;line-height:1.6}
.guide-reference-note a{font-size:12.5px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.guide-related-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.guide-related-links a{padding:6px 9px;border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-sm);font-size:12.5px}
.manual-section.no-media{display:block;max-width:760px}
.manual-section.no-media .manual-copy{max-width:760px}
.guide-index-list{border-top:1px solid var(--guide-ui-divider)}
.guide-index-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px 2px;border-bottom:1px solid var(--guide-ui-divider)}
.guide-index-card h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}
.guide-index-card p{max-width:680px;margin:7px 0 0;color:var(--ink2);font-size:13.5px;line-height:1.65}
.guide-index-card span{color:var(--ink3);font:500 12px/1 var(--font-mono)}
.guide-toc{position:sticky;top:26px;min-width:0;padding-top:2px}
.guide-toc p{margin:0 0 13px;color:var(--ink3);font:600 11px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.guide-toc nav{display:grid;gap:3px}
.guide-toc a{padding:6px 0;color:var(--ink2);font-size:12.5px;line-height:1.45}
.guide-toc a:hover{color:var(--ink)}

/* 条目：左说明 / 右示意 */
/* 条目：左说明 / 右示意
   列宽用 minmax + 百分比，避免主内容区变窄时右列被挤成 0 宽 */
.ent{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:44px;padding:34px 0;border-bottom:1px solid var(--guide-ui-divider)}
@media (max-width:1100px){.ent{grid-template-columns:minmax(0,1fr);gap:24px}}
.ent:last-child{border-bottom:0}
.ent h3{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0}
.ent .txt{margin:11px 0 0;font-size:14px;color:var(--ink2);line-height:1.7}
.ent .li{margin:13px 0 0;font-size:13.5px;color:var(--ink3);line-height:1.9}
.ent .dl{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-size:13.5px;color:var(--ink)}
.ent .dl svg{width:14px;height:14px}

/* 示意图：直接引用设计师提供的 SVG / PNG 素材，容器不加边框以免与图内的
   标注线冲突；图片按原始比例自适应宽度 */
.fig{display:block;width:100%;height:auto}
.figbox{background:var(--guide-demo-surface);border-radius:var(--guide-ui-radius-md);padding:0;display:flex;align-items:center;justify-content:center}
.figbox.pad{background:var(--guide-demo-surface);border:1px solid var(--guide-ui-border);padding:26px}
.figbox.basic-canvas{min-height:360px;padding:28px;background:var(--guide-demo-surface);border:1px solid var(--guide-ui-border)}
.figbox.basic-canvas .fig{width:auto;max-width:100%;max-height:310px;object-fit:contain}
.fig-basic-logo,.fig-basic-clearspace,.fig-basic-minsize{width:min(514px,100%)!important}
.fig-basic-color{max-height:330px!important}
.fig-basic-misuse{max-width:620px}
/* 品牌延展图：整幅铺满，深底图不加内边距 */
.figfull{display:block;width:100%;height:auto;border-radius:12px}

/* 示意画布 */
.stage{border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-lg);background:var(--guide-demo-surface);min-height:210px;
  display:grid;place-items:center;padding:26px;position:relative}
.stage.dk{background:#141416;border-color:#2a2a2c}
.wm{font-size:29px;font-weight:800;letter-spacing:-.03em}
.wm.iv{color:#fff}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.cell{border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-md);background:var(--guide-demo-surface);min-height:112px;display:grid;place-items:center;position:relative;overflow:hidden}
.cell .cap{position:absolute;left:0;right:0;bottom:0;padding:6px 9px;font-size:11.5px;color:var(--guide-ui-text-subtle);background:rgba(255,255,255,.94);border-top:1px solid var(--guide-ui-border)}
.cell.bad{border-color:#f0d6d1}
.cell.bad .cap{color:#c0392b;background:#fff6f4;border-top-color:#f0d6d1}
.cell.ok .cap{color:#1a7a48;background:#f3faf6;border-top-color:#d3ecdf}
/* clearspace 蓝框示意 */
.cs{position:relative;width:186px;height:150px;background:#dce7fb}
.cs i{position:absolute;inset:19px 28px;background:#eef3fe;display:grid;place-items:center;font-style:normal;font-size:19px;font-weight:800}
.tickr{position:absolute;font-size:11px;color:#5a7fc0}

/* ── Vessa-style live guideline pages ─────────────────────── */
.guide-vessa{
  --guide-blue:var(--guide-ui-accent);--guide-paper:var(--guide-demo-paper);--guide-field:var(--guide-demo-field);--guide-ink:var(--guide-demo-ink);
  max-width:1240px;
}
.guide-panel{min-width:0;background:var(--guide-ui-surface);border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-lg);overflow:hidden}
.vessa-frame{
  padding:clamp(14px,2.4vw,30px);border-radius:12px;overflow:hidden;
  background-color:var(--guide-blue);
  background-image:radial-gradient(circle,rgba(255,255,255,.92) 0 1px,transparent 1.25px);
  background-size:6px 6px;
}
.vessa-paper{background:var(--guide-paper);color:var(--guide-ink);border-radius:8px;overflow:hidden}
.vessa-paper-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:30px 34px;border-bottom:1px solid var(--guide-demo-border)}
.vessa-paper-head h3{margin:0;font-size:32px;font-weight:600;letter-spacing:-.035em}
.vessa-paper-head p{margin:7px 0 0;max-width:620px;color:var(--guide-demo-text-muted);font-size:13.5px;line-height:1.65}
.vessa-kicker{margin:0 0 8px!important;color:var(--guide-demo-text-subtle)!important;font-size:11.5px!important;text-transform:uppercase;letter-spacing:.09em}
.vessa-link{color:var(--guide-ink);font-size:13px;text-decoration:underline;text-decoration-color:var(--guide-demo-border);text-underline-offset:5px}
.vessa-link:hover{text-decoration-color:var(--guide-blue);color:var(--guide-blue)}

/* Font */
.specimen-section{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:42px;padding:38px 34px;border-bottom:1px solid var(--guide-demo-border)}
.specimen-section:last-child{border-bottom:0}
.specimen-copy h4{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.specimen-copy .txt{margin:11px 0 0;color:var(--guide-demo-text-muted);font-size:13.5px;line-height:1.7}
.specimen-family{margin-top:23px;padding-top:16px;border-top:1px solid var(--guide-demo-border);font-size:12.5px;color:var(--guide-demo-text-muted)}
.specimen-family b{display:block;margin-bottom:4px;color:var(--guide-ink);font-size:13.5px;font-weight:600}
.specimen-list{min-width:0}
.guide-panel.specimen-list{padding:24px 28px}
.specimen-row{display:grid;grid-template-columns:minmax(0,1fr) 132px;align-items:end;gap:18px;padding:18px 0;border-bottom:1px solid var(--guide-demo-border)}
.specimen-row:first-child{padding-top:0}.specimen-row:last-child{padding-bottom:0;border-bottom:0}
.type-sample{min-width:0;font-family:"FZVariable-LanTingHei","FZLanTingHei","方正兰亭可变黑","Noto Sans SC",sans-serif;color:var(--guide-ink);letter-spacing:-.045em;overflow:hidden}
.type-sample.cn{font-size:clamp(28px,2.65vw,39px);line-height:1.08;white-space:nowrap}
.type-sample.en{font-size:clamp(19px,2.15vw,31px);line-height:1.02;overflow-wrap:anywhere}
.type-sample.w-heavy{font-weight:900}.type-sample.w-demi{font-weight:650}.type-sample.w-regular{font-weight:400}.type-sample.w-light{font-weight:300}
.type-label{color:var(--guide-demo-text-subtle);font-size:12.5px;line-height:1.45}.type-label b{display:block;color:var(--guide-ink);font-weight:500}

/* 字形预览：固定字号，只用 Noto Sans SC Variable 的 wght 轴表现连续粗细变化。 */
.font-playground{margin:34px 0;padding:0 0 34px;border-bottom:1px solid var(--guide-ui-divider)}
.font-playground-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.font-playground-head h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em}
.font-playground-head p{margin:8px 0 0;color:var(--ink2);font-size:13.5px;line-height:1.65}
.font-playground-status{flex:none;color:var(--ink3);font:500 11px/1 var(--font-mono);letter-spacing:.03em}
.font-playground-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-md);background:var(--guide-ui-surface)}
.font-control{display:grid;grid-template-columns:auto 124px;align-items:center;gap:8px;margin-left:0;color:var(--ink3);font-size:11.5px;white-space:nowrap}.font-weight-control{margin-left:auto}
.font-control span{display:flex;align-items:center;gap:5px}.font-control output{min-width:44px;color:var(--ink2);font:500 11px/1 var(--font-mono);text-align:right}
.font-control input{width:124px;height:3px;accent-color:var(--guide-ui-focus);cursor:pointer}
.font-reset{border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-sm);background:transparent;color:var(--guide-ui-text-muted);padding:7px 10px;font:500 11.5px/1 var(--font);cursor:pointer;transition:color var(--guide-ui-motion-fast),border-color var(--guide-ui-motion-fast),background var(--guide-ui-motion-fast)}
.font-reset:hover{border-color:var(--guide-ui-border-strong);background:var(--guide-ui-surface-hover);color:var(--guide-ui-text)}
.font-text-field{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:12px;margin:14px 0 20px;color:var(--ink3);font-size:12px}
.font-text-field input{min-width:0;border:1px solid var(--guide-ui-border);border-radius:7px;background:var(--guide-ui-surface);color:var(--guide-ui-text);padding:10px 12px;font:400 13px/1.4 "Brand Noto Sans SC",var(--font);outline:none;transition:border-color var(--guide-ui-motion-fast),background var(--guide-ui-motion-fast)}
.font-text-field input:hover{border-color:var(--guide-ui-border-strong)}.font-text-field input:focus{border-color:var(--guide-ui-text-subtle);background:var(--guide-ui-surface-hover)}
.font-variable-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:22px;min-height:176px;margin-bottom:18px;padding:28px 30px;border-radius:var(--guide-ui-radius-lg);overflow:hidden;background:var(--guide-ui-text);color:var(--guide-ui-canvas)}
.font-variable-sample{display:block;min-width:0;font-family:"Brand Noto Sans SC","Noto Sans SC",system-ui,sans-serif;font-size:53px;font-weight:var(--font-preview-weight,400);font-variation-settings:"wght" var(--font-preview-weight,400);line-height:1.12;letter-spacing:var(--font-tracking,-.04em);overflow-wrap:anywhere;transition:font-weight .22s cubic-bezier(.2,.8,.2,1),letter-spacing .15s ease}
.font-variable-meta{display:grid;justify-items:end;gap:5px;padding-bottom:5px;white-space:nowrap}.font-variable-meta b{font-size:12px;font-weight:600}.font-variable-meta code{font:500 11px/1 var(--font-mono);opacity:.6}
.font-preset-label{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 2px 10px;color:var(--ink2);font-size:12px}.font-preset-label span{font-weight:600}.font-preset-label small{color:var(--ink3);font-size:11px}
.font-rows{display:grid;gap:8px;border-top:0}
.font-specimen-row{display:grid;grid-template-columns:minmax(0,1fr) 108px;align-items:center;gap:18px;min-width:0;border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-md);background:var(--guide-ui-surface);color:var(--guide-ui-text);padding:17px 18px;text-align:left;cursor:pointer;transition:transform var(--guide-ui-motion-fast),border-color var(--guide-ui-motion-fast),background var(--guide-ui-motion-fast),box-shadow var(--guide-ui-motion-fast)}
.font-specimen-row:hover{transform:translateX(2px);border-color:var(--guide-ui-border-strong);background:var(--guide-ui-surface-hover)}
.font-specimen-row.is-active{border-color:var(--guide-ui-border-strong);background:var(--guide-ui-surface-hover);box-shadow:inset 2px 0 0 var(--guide-ui-text)}
.font-specimen-sample{display:block;min-width:0;font-family:"Brand Noto Sans SC","Noto Sans SC",system-ui,sans-serif;font-size:28px;font-weight:var(--font-row-weight,400);font-variation-settings:"wght" var(--font-row-weight,400);line-height:1.16;letter-spacing:var(--font-tracking,-.04em);overflow-wrap:anywhere;transition:letter-spacing .15s ease}
.font-specimen-meta{display:grid;justify-items:end;gap:4px;color:var(--ink3);font-size:11.5px;line-height:1.2}
.font-specimen-meta b{color:var(--ink);font-size:12px;font-weight:600}.font-specimen-meta code{font:500 11px/1 var(--font-mono);color:var(--ink3)}
.font-playground-note{display:flex;align-items:center;gap:8px;margin-top:13px;color:var(--ink3);font-size:11.5px;line-height:1.5}
.font-playground-note i{display:block;width:6px;height:6px;border-radius:50%;background:var(--guide-ui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--guide-ui-accent) 18%,transparent)}

/* Motion */
.motion-content{padding:34px}
.motion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.motion-case{min-width:0}
.motion-stage{position:relative;min-height:330px;overflow:hidden;background:var(--guide-ui-surface);border-radius:var(--guide-ui-radius-sm);display:grid;place-items:center}
.motion-case-head{position:absolute;z-index:2;left:14px;right:14px;top:12px;display:flex;align-items:center;justify-content:space-between;color:var(--guide-ui-text-subtle);font-size:11.5px}
.motion-replay{border:1px solid var(--guide-ui-border);background:var(--guide-ui-surface);color:var(--guide-ui-text-muted);border-radius:var(--guide-ui-radius-pill);padding:5px 9px;font:500 11.5px/1 var(--font);cursor:pointer;transition:background var(--guide-ui-motion-fast),border-color var(--guide-ui-motion-fast),color var(--guide-ui-motion-fast)}
.motion-replay:hover{background:var(--guide-ui-surface-hover);border-color:var(--guide-ui-border-strong);color:var(--guide-ui-text)}
.motion-enter-card{width:42%;aspect-ratio:1.6;border-radius:8px;background:var(--guide-blue);transform-origin:center}
.motion-demo.is-playing .motion-enter-card{animation:guide-enter 2.8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes guide-enter{0%,16%{opacity:0;transform:translateY(22px) scale(.72)}42%,78%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(.96)}}
.motion-node{position:absolute;width:58px;height:58px;border-radius:var(--guide-ui-radius-md);background:var(--guide-ui-border-strong)}
.motion-node.n1{left:17%;top:39%}.motion-node.n2{left:50%;top:24%}.motion-node.n3{right:15%;top:41%}.motion-node.n4{left:38%;bottom:18%}.motion-node.n5{right:23%;bottom:23%}
.motion-node.active{background:var(--guide-blue);z-index:1;left:17%;top:39%}
.motion-demo.is-playing .motion-node.active{animation:guide-move 3.4s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes guide-move{0%,12%{transform:translate(0,0)}30%{transform:translate(210%,-82%)}50%{transform:translate(430%,4%)}70%{transform:translate(330%,205%)}88%,100%{transform:translate(120%,176%)}}
.motion-caption{padding:13px 1px 0}.motion-caption h4{margin:0;font-size:14px;font-weight:600}.motion-caption p{margin:5px 0 0;color:var(--guide-ui-text-muted);font-size:12.5px;line-height:1.55}
.motion-tokens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:34px;border-top:1px solid var(--guide-ui-border);border-bottom:1px solid var(--guide-ui-border)}
.guide-panel.motion-tokens{margin-top:0}
.motion-token{padding:16px;border-right:1px solid var(--guide-ui-border)}.motion-token:last-child{border-right:0}
.motion-token span{display:block;color:var(--guide-ui-text-subtle);font-size:11.5px}.motion-token b{display:block;margin-top:5px;font:500 13px/1.4 var(--font-mono);overflow-wrap:anywhere}

/* 入门页 Brandbook：完整展示三张页面，用一主两辅的编辑式画廊建立阅读顺序。 */
.brandbook-intro{margin-top:22px}
.brandbook-intro-head{align-items:flex-end}.brandbook-intro-head>div{max-width:680px}.brandbook-intro-head>span{color:var(--ink3);font:500 11px/1 var(--font-mono);letter-spacing:.08em}
.brandbook-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;border-radius:16px;background:radial-gradient(circle at 18% 10%,rgba(0,123,253,.2),transparent 38%),#0c0d12}
.brandbook-card{position:relative;min-width:0;aspect-ratio:16/9;margin:0;overflow:hidden;border-radius:11px;background:#02030b;box-shadow:0 0 0 1px rgba(255,255,255,.07);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
.brandbook-card.is-cover{grid-column:1/-1;aspect-ratio:2560/1383}.brandbook-card img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.brandbook-card:hover{z-index:1;transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.12)}
.brandbook-card:hover img{transform:scale(1.006)}

/* Moodboard：Brandbook 局部取景 + 用户提供素材，可筛选、聚焦与重排。 */
.moodboard-module{grid-template-columns:minmax(0,1fr);gap:22px}.moodboard-module>div:first-child{max-width:660px}
.mood-content{padding:18px}
.mood-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 2px 12px;color:var(--guide-ui-text-muted);font-size:12px}
.mood-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.mood-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-pill);background:var(--guide-ui-surface)}
.mood-switch button{border:0;border-radius:var(--guide-ui-radius-pill);background:transparent;color:var(--guide-ui-text-muted);padding:5px 10px;font:500 11.5px/1 var(--font);cursor:pointer}
.mood-switch button.on{background:var(--guide-ui-text);color:var(--guide-ui-canvas)}
.mood-shuffle{border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-pill);background:var(--guide-ui-surface);color:var(--guide-ui-text-muted);padding:7px 10px;font:500 11.5px/1 var(--font);cursor:pointer;transition:background var(--guide-ui-motion-fast),border-color var(--guide-ui-motion-fast),color var(--guide-ui-motion-fast)}.mood-shuffle:hover{background:var(--guide-ui-surface-hover);border-color:var(--guide-ui-border-strong);color:var(--guide-ui-text)}.mood-shuffle:active{transform:scale(.97)}
.mood-cloud{position:relative;height:610px;overflow:hidden;border-radius:8px;background:var(--guide-field);transition:height .28s ease}
.mood-tile{position:absolute;margin:0;padding:0;overflow:hidden;border:0;border-radius:8px;outline:0;appearance:none;background:transparent;color:#fff;text-align:left;cursor:pointer;box-shadow:none;clip-path:inset(0 round 8px);transition:transform .28s cubic-bezier(.2,.8,.2,1),width .28s ease,height .28s ease,opacity .22s ease,filter .22s ease,box-shadow .2s ease}
.mood-tile img{display:block;width:100%;height:100%;border:0;border-radius:inherit;outline:0;object-fit:cover}
.mood-tile>span:last-child{position:absolute;z-index:2;left:7px;right:7px;bottom:7px;padding:6px 7px;border-radius:5px;background:rgba(7,8,10,.74);color:#fff;font-size:10px;line-height:1.2;opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;backdrop-filter:blur(8px)}
.mood-tile:hover>span:last-child,.mood-tile:focus-visible>span:last-child,.mood-tile.is-focused>span:last-child{opacity:1;transform:none}
.mood-tile:focus-visible{outline:2px solid var(--guide-blue);outline-offset:3px}.mood-tile.is-focused{z-index:12;transform:scale(1.07)!important;box-shadow:0 16px 46px rgba(0,0,0,.36)}
.mood-tile.is-filtered{opacity:.075;filter:grayscale(1);pointer-events:none}
.mood-tile.a{left:3%;top:5%;width:30%;height:25%;transform:rotate(-.5deg)}.mood-tile.a img{object-position:56% 50%}
.mood-tile.b{left:36%;top:4%;width:20%;height:27%;transform:rotate(1deg)}.mood-tile.b img{object-position:93% 48%;transform:scale(1.8)}
.mood-tile.c{right:4%;top:5%;width:22%;height:auto;aspect-ratio:3/4;transform:rotate(.6deg)}.mood-tile.c img{object-fit:contain;object-position:center}
.mood-tile.d{left:4%;bottom:5%;width:22%;height:58%;transform:rotate(.4deg)}.mood-tile.d img{object-position:center}
.mood-tile.e{left:29%;top:36%;width:43%;height:auto;aspect-ratio:2883/1127;transform:rotate(-.35deg)}.mood-tile.e img{object-fit:contain;object-position:center}
.mood-tile.g{left:29%;bottom:5%;width:27%;height:28%;transform:rotate(-1deg)}.mood-tile.g img{object-position:66% 53%;transform:scale(1.75)}
.mood-tile.j{right:30%;bottom:5%;width:12%;height:22%;display:grid;place-items:center;background:radial-gradient(circle at 20% 14%,rgba(255,255,255,.38),transparent 38%),linear-gradient(145deg,#007bfd 0%,#66b4ff 52%,#fef8b6 100%);color:#08101e;transform:rotate(1.2deg)}
.mood-wordmark{font-size:21px;font-weight:720;line-height:.95;letter-spacing:-.05em}
.mood-cloud[data-mood-variant="1"] .a{transform:translate(12px,12px) rotate(1deg)}.mood-cloud[data-mood-variant="1"] .b{transform:translate(-10px,16px) rotate(-1.5deg)}.mood-cloud[data-mood-variant="1"] .c{transform:translate(-10px,9px) rotate(-.8deg)}.mood-cloud[data-mood-variant="1"] .d{transform:translate(8px,-11px) rotate(-1deg)}.mood-cloud[data-mood-variant="1"] .e{transform:translate(8px,-6px) rotate(.6deg)}.mood-cloud[data-mood-variant="1"] .g{transform:translate(-12px,10px) rotate(1.3deg)}.mood-cloud[data-mood-variant="1"] .j{transform:translate(-10px,14px) rotate(-1.2deg)}
.mood-cloud[data-mood-variant="2"] .a{transform:translate(-8px,18px) rotate(-1.2deg)}.mood-cloud[data-mood-variant="2"] .b{transform:translate(12px,6px) rotate(1.8deg)}.mood-cloud[data-mood-variant="2"] .c{transform:translate(-18px,16px) rotate(1deg)}.mood-cloud[data-mood-variant="2"] .d{transform:translate(14px,-4px) rotate(1.1deg)}.mood-cloud[data-mood-variant="2"] .e{transform:translate(-6px,7px) rotate(-.7deg)}.mood-cloud[data-mood-variant="2"] .g{transform:translate(14px,-10px) rotate(-1.4deg)}.mood-cloud[data-mood-variant="2"] .j{transform:translate(14px,5px) rotate(1.4deg)}
.mood-board.is-columns .mood-cloud{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px}
.mood-board.is-columns .mood-tile{position:relative;inset:auto;width:auto;height:190px;transform:none!important}.mood-board.is-columns .mood-tile.is-filtered{display:none}
.mood-board.is-columns .mood-tile.c{height:auto;aspect-ratio:3/4}.mood-board.is-columns .mood-tile.e{height:auto;aspect-ratio:2883/1127}
.mood-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}.mood-tags span{padding:6px 9px;border:1px solid var(--guide-ui-border);border-radius:var(--guide-ui-radius-pill);color:var(--guide-ui-text-muted);font-size:11.5px}

/* Assets */
.assets-content{padding:0 34px 34px}
.assets-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:30px 0 24px;border-bottom:1px solid var(--guide-ui-border)}
.assets-intro p{margin:0;max-width:560px;color:var(--guide-ui-text-muted);font-size:13px;line-height:1.65}
.asset-group{padding-top:34px}.asset-group-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:9px}
.asset-group-head h4{margin:0;font-size:14.5px;font-weight:600}.asset-group-head p{margin:4px 0 0;color:var(--guide-ui-text-subtle);font-size:11.5px}
.asset-list{border-top:1px solid var(--guide-ui-border)}
.asset-row{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:15px;min-height:72px;border-bottom:1px solid var(--guide-ui-border)}
.asset-preview{width:66px;height:44px;display:grid;place-items:center;border-radius:var(--guide-ui-radius-sm);background:var(--guide-ui-surface);overflow:hidden;border:1px solid var(--guide-ui-border)}
.asset-preview.dk{background:#101216}.asset-preview img{display:block;max-width:88%;max-height:88%;object-fit:contain}
.asset-preview .swatches{display:grid;grid-template-columns:repeat(2,1fr);width:100%;height:100%}.asset-preview .swatches i:nth-child(1){background:#ff6200}.asset-preview .swatches i:nth-child(2){background:#fef8b6}.asset-preview .swatches i:nth-child(3){background:#007bfd}.asset-preview .swatches i:nth-child(4){background:#66b4ff}
.asset-name{font-size:13px;font-weight:500}.asset-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:3px;color:var(--guide-ui-text-muted);font-size:11px}.asset-action{font-size:12px;text-decoration:underline;text-decoration-color:var(--guide-ui-border-strong);text-underline-offset:5px}.asset-action:hover{color:var(--guide-ui-text);text-decoration-color:var(--guide-ui-text-muted)}
.asset-font-note{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px;border-bottom:1px solid var(--guide-ui-border);font-size:13px}.asset-font-note span{color:var(--guide-ui-text-muted);font-size:11.5px}
.guide-panel.asset-list{padding:0 22px}
.guide-panel.asset-list .asset-row:last-child{border-bottom:0}
.asset-font-panel{padding:0 22px}.asset-font-panel .asset-font-note{border-bottom:0}

/* IP 下载库：同一参考板以裁切窗口展示 15 个姿势，默认加载两排。 */
.ip-library{padding:0 18px 16px}
.ip-library-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--guide-ui-border)}
.ip-library-head b{display:block;font-size:13.5px;font-weight:600}
.ip-library-head span{display:block;margin-top:3px;color:var(--guide-ui-text-muted);font-size:11.5px}
.ip-library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:14px}
.ip-tile{position:relative;min-width:0;aspect-ratio:1.64;overflow:hidden;border:0;border-radius:6px;background:#f2f4f5;box-shadow:none;transition:transform .18s ease}
.ip-tile:hover{z-index:1;transform:translateY(-2px)}
/* 向内裁掉源参考板的卡片描边、列间线和下方标签，只保留纯色图像区。 */
.ip-tile img{position:absolute;width:844%;height:auto;max-width:none;left:-2.75%;top:-18.5%;filter:contrast(1.08) brightness(1.015)}
.ip-tile.c1 img{left:-108.25%}.ip-tile.c2 img{left:-213.75%}.ip-tile.c3 img{left:-319.25%}.ip-tile.c4 img{left:-424.75%}.ip-tile.c5 img{left:-530.25%}.ip-tile.c6 img{left:-635.75%}.ip-tile.c7 img{left:-741.25%}
.ip-tile.r1 img{top:-159%}
.ip-tile.ip-extra{display:none}.ip-library.is-expanded .ip-tile.ip-extra{display:block}
.ip-library-more{display:block;margin:14px auto 0;border:1px solid var(--guide-ui-border);border-radius:8px;background:var(--guide-ui-surface);color:var(--guide-ui-text-muted);padding:7px 12px;font:500 12px/1 var(--font);cursor:pointer;transition:background var(--guide-ui-motion-fast),border-color var(--guide-ui-motion-fast),color var(--guide-ui-motion-fast),transform var(--guide-ui-motion-fast)}
.ip-library-more:hover{background:var(--guide-ui-surface-hover);border-color:var(--guide-ui-border-strong);color:var(--guide-ui-text)}.ip-library-more:active{transform:translateY(1px)}.ip-library-more:focus-visible{outline:2px solid var(--guide-ui-focus);outline-offset:2px}
.life-ip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 0 2px}
.life-ip-tile{position:relative;min-width:0;aspect-ratio:1.64;overflow:hidden;border-radius:8px;background:var(--guide-ui-surface);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.life-ip-tile:hover{transform:translateY(-2px)}
.life-ip-tile img{display:block;width:100%;height:100%;object-fit:cover}
.life-ip-tile:nth-child(1) img{object-position:80% 48%}
.life-ip-tile:nth-child(2) img{object-position:58% 54%}
.life-ip-tile:nth-child(3) img{object-position:44% 48%}
.life-ip-tile:nth-child(4) img{object-position:center}

/* Data-driven Guide modules: Assets / Moodboard / Motion / Color. */
.guide-data-page{--guide-blue:var(--guide-ui-accent);--guide-field:var(--guide-ui-surface);--guide-ink:var(--guide-ui-text)}
.guide-data-page .motion-enter-card,.guide-data-page .motion-node.active{background:var(--guide-ui-accent)}

.guide-color-section{margin:0 0 52px}
.guide-color-section+ .guide-color-section{padding-top:8px}
.guide-color-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:0 0 18px}
.guide-color-section-head h2{margin:0;color:var(--guide-ui-text);font-size:20px;font-weight:600;letter-spacing:-.02em}
.guide-color-section-head p{max-width:650px;margin:8px 0 0;color:var(--guide-ui-text-muted);font-size:13.5px;line-height:1.65}
.guide-color-section-head>span{flex:0 0 auto;color:var(--guide-ui-text-subtle);font:500 10.5px/1 var(--font-mono);letter-spacing:.08em}
.color-library{display:grid;gap:14px}
.color-library-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 12px;border-top:1px solid var(--guide-ui-border);border-bottom:1px solid var(--guide-ui-border)}
.color-library-bar>div:first-child{display:grid;gap:5px}.color-library-kicker{color:var(--guide-ui-text);font:600 11px/1 var(--font-mono);letter-spacing:.08em}.color-library-bar small{color:var(--guide-ui-text-subtle);font-size:11.5px}
.color-library-count{color:var(--guide-ui-text-subtle);font:500 10.5px/1 var(--font-mono);letter-spacing:.08em}
.color-band-list{display:grid;gap:13px}
.color-band{min-width:0;border-radius:12px;overflow:hidden;background:var(--band-surface);color:var(--band-ink);isolation:isolate}
.color-band-title{box-sizing:border-box;min-height:76px;margin:0;padding:15px 17px 32px;color:inherit;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.color-band-strip{display:grid;grid-template-columns:repeat(var(--token-count),minmax(0,1fr));min-width:0;overflow:hidden}
.color-band-token{position:relative;display:grid;align-content:end;gap:4px;min-width:0;min-height:65px;padding:11px 12px 13px;border:0;border-right:1px solid color-mix(in srgb,var(--token-ink) 10%,transparent);background:var(--token-color);color:var(--token-ink);text-align:left;cursor:pointer;transition:filter .14s ease,box-shadow .14s ease}
.color-band-token:last-child{border-right:0}
.color-band-token:hover{z-index:1;filter:brightness(1.045);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--token-ink) 26%,transparent)}
.color-band-token:active{filter:brightness(.97)}
.color-band-token:focus-visible{z-index:2;outline:2px solid var(--guide-ui-focus);outline-offset:-2px}
.color-band-token b,.color-band-token span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.color-band-token b{font-size:10.5px;font-weight:620;line-height:1.25}.color-band-token span{font:500 9.5px/1.2 var(--font-mono);opacity:.62}
.color-band-token::after{content:"✓";position:absolute;right:7px;top:7px;width:17px;height:17px;border-radius:50%;background:color-mix(in srgb,var(--token-ink) 86%,transparent);color:var(--token-color);font:700 11px/18px var(--font);text-align:center;opacity:0;transform:scale(.75);transition:opacity .14s ease,transform .14s ease}
.color-band-token.is-copied::after{opacity:1;transform:scale(1)}
.base-color-system{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:148px;gap:12px}
.base-color-cell{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-width:0;padding:18px;border:0;border-radius:18px;overflow:hidden;background:var(--cell-color);color:var(--cell-ink);text-align:left;cursor:pointer;transition:transform .18s ease,filter .18s ease}
.base-color-cell:hover{transform:translateY(-2px);filter:saturate(1.05)}
.base-color-cell:active{transform:translateY(0) scale(.995)}
.base-color-cell:focus-visible{outline:2px solid var(--guide-ui-focus);outline-offset:3px}
.base-color-cell span{font:400 clamp(18px,2vw,24px)/1 var(--font);letter-spacing:-.03em}
.base-color-cell small{margin-top:7px;font:500 10.5px/1 var(--font-mono);letter-spacing:.05em;opacity:.72;text-transform:uppercase}
.base-color-cell::after{content:"已复制";position:absolute;right:14px;top:14px;padding:5px 7px;border-radius:var(--guide-ui-radius-pill);background:color-mix(in srgb,var(--guide-ui-canvas) 82%,transparent);color:var(--guide-ui-text);font:500 10px/1 var(--font);opacity:0;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease}
.base-color-cell.is-copied::after{opacity:1;transform:none}
.base-color-cell.is-blue{grid-column:span 6}.base-color-cell.is-orange{grid-column:span 4}.base-color-cell.is-yellow{grid-column:span 2}
.base-color-cell.is-blue-soft{grid-column:span 3}.base-color-cell.is-blue-tint{grid-column:span 4}.base-color-spectrum{grid-column:span 5}
.base-color-spectrum{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:18px;border-radius:18px;overflow:hidden;color:#08101e;background:linear-gradient(100deg,var(--spectrum-orange) 0%,#ff9a31 25%,var(--spectrum-yellow) 48%,#96d7ff 72%,var(--spectrum-blue) 100%)}
.base-color-spectrum::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 5%,rgba(255,255,255,.38),transparent 36%),linear-gradient(90deg,rgba(255,255,255,.08),transparent);mix-blend-mode:screen}
.base-color-spectrum span,.base-color-spectrum small{position:relative;z-index:1}.base-color-spectrum span{font-size:18px;letter-spacing:-.02em}.base-color-spectrum small{margin-top:7px;font:500 10.5px/1 var(--font-mono);opacity:.72}

.member-color-lab{--mx:48%;--my:54%;--tier-accent:var(--tier-orange);--member-paper:#f4f4f2;--member-ink:#4b4b4c;--member-stage:#030407;--member-title:#454547;--member-muted:#858589;--member-subtle:#9b9b9e;--member-control:#e8e8e7;--member-border:#d4d4d6;--member-control-ink:#77777a;--member-active:#161619;--member-note:#68686c;--member-swatch-outline:#999;--member-light:#fff;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(245px,.72fr);min-height:520px;border-radius:18px;overflow:hidden;background:var(--member-paper);color:var(--member-ink)}
.member-color-lab[data-tier="vip"]{--tier-accent:var(--tier-yellow)}
.member-color-stage{position:relative;min-width:0;min-height:520px;overflow:hidden;background:var(--member-stage);cursor:crosshair;isolation:isolate;outline:none}
.member-color-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--member-light)}
.member-color-glow{position:absolute;inset:-20%;background:radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--tier-blue) 94%,white 6%) 0 4%,color-mix(in srgb,var(--tier-blue) 86%,transparent) 17%,transparent 42%),radial-gradient(circle at calc(var(--mx) - 38%) calc(var(--my) + 20%),color-mix(in srgb,var(--tier-accent) 94%,white 6%) 0 5%,color-mix(in srgb,var(--tier-accent) 82%,transparent) 20%,transparent 47%),radial-gradient(circle at 50% 50%,#121821 0%,#050609 52%,#000 78%);filter:saturate(1.1);transform:scale(1.05);transition:background .35s ease}
.member-color-glow::after{content:"";position:absolute;inset:0;opacity:.16;background-image:repeating-radial-gradient(circle at 31% 47%,rgba(255,255,255,.22) 0 .55px,transparent .7px 2.2px);mix-blend-mode:soft-light}
.member-crosshair{position:absolute;z-index:2;display:block;background:rgba(255,255,255,.82);pointer-events:none;transition:left .08s linear,top .08s linear}
.member-crosshair.is-x{left:0;right:0;top:var(--my);height:1px}.member-crosshair.is-y{top:0;bottom:0;left:var(--mx);width:1px}
.member-life-mark{position:absolute;z-index:3;left:var(--mx);top:var(--my);display:grid;gap:1px;color:var(--member-light);font:500 35px/.82 var(--font);letter-spacing:.16em;transform:translate(-50%,-50%);text-shadow:0 2px 18px rgba(0,0,0,.25);pointer-events:none;transition:left .08s linear,top .08s linear}
.member-life-mark span:last-child{letter-spacing:.2em}
.member-color-hint{position:absolute;z-index:3;left:18px;bottom:15px;margin:0;color:rgba(255,255,255,.62);font:500 10.5px/1 var(--font-mono);letter-spacing:.04em;pointer-events:none}
.member-color-copy{display:flex;flex-direction:column;min-width:0;padding:34px 30px 28px;background:var(--member-paper)}
.member-color-kicker{margin:0 0 16px;color:var(--member-subtle);font:500 10.5px/1 var(--font-mono);letter-spacing:.08em}
.member-color-copy h3{margin:0;color:var(--member-title);font-size:clamp(27px,3vw,40px);font-weight:400;letter-spacing:-.04em}
.member-color-copy>p[data-member-tier-description]{margin:24px 0 0;color:var(--member-muted);font-size:13px;line-height:1.7}
.member-tier-tabs{display:inline-flex;align-self:flex-start;gap:4px;margin-top:24px;padding:3px;border:1px solid var(--member-border);border-radius:var(--guide-ui-radius-pill);background:var(--member-control)}
.member-tier-tabs button{min-width:52px;border:0;border-radius:var(--guide-ui-radius-pill);background:transparent;color:var(--member-control-ink);padding:7px 11px;font:600 11.5px/1 var(--font);cursor:pointer;transition:background .18s ease,color .18s ease}
.member-tier-tabs button.is-active{background:var(--member-active);color:var(--member-light)}
.member-color-swatches{display:flex;gap:8px;margin-top:25px}
.member-color-swatches button{width:27px;height:27px;border:3px solid var(--member-paper);border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px var(--member-swatch-outline);cursor:pointer;transition:transform .16s ease}
.member-color-swatches button:hover{transform:scale(1.12)}
.member-color-swatches button.is-copied{box-shadow:0 0 0 2px var(--member-active)}
.member-color-note{margin:auto 0 0!important;color:var(--member-note)!important;font-size:11px!important;line-height:1.5!important;text-align:right}
.member-token-library{margin-top:18px}
.member-token-band .color-band-title{min-height:64px;padding-bottom:22px}
.member-token{grid-template-rows:auto auto auto;align-content:end;min-height:88px}
.member-token code{display:block;min-width:0;overflow:hidden;color:inherit;font:500 8.5px/1.25 var(--font-mono);opacity:.54;text-overflow:ellipsis;white-space:nowrap}
.color-token-code-window{margin-top:18px}

/* Theme palettes: prompt-first handoff, aligned with the existing Guide token language. */
.theme-prompt-section{padding-top:8px}
.theme-prompt-lab{display:grid;grid-template-columns:minmax(210px,.42fr) minmax(0,1.58fr);gap:16px;align-items:stretch}
.theme-prompt-tabs{display:grid;align-content:start;border-top:1px solid var(--guide-ui-border)}
.theme-prompt-tab{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:4px;min-width:0;padding:17px 4px 17px 0;border:0;border-bottom:1px solid var(--guide-ui-border);background:transparent;color:var(--guide-ui-text-muted);text-align:left;cursor:pointer;transition:color .18s ease,background .18s ease,padding .18s ease}
.theme-prompt-tab:hover{padding-left:7px;color:var(--guide-ui-text);background:color-mix(in srgb,var(--guide-ui-surface-hover) 58%,transparent)}
.theme-prompt-tab:active{transform:translateY(1px)}
.theme-prompt-tab:focus-visible{outline:2px solid var(--guide-ui-focus);outline-offset:-2px}
.theme-prompt-tab.is-active{padding-left:7px;color:var(--guide-ui-text);background:var(--guide-ui-surface)}
.theme-prompt-tab-swatches{grid-row:1/3;display:flex;align-self:stretch;min-height:42px;overflow:hidden;border-radius:6px}
.theme-prompt-tab-swatches i{flex:1;min-width:0;background:var(--theme-swatch)}
.theme-prompt-tab b{align-self:end;font-size:13px;font-weight:620;letter-spacing:-.01em}
.theme-prompt-tab small{min-width:0;overflow:hidden;color:var(--guide-ui-text-subtle);font-size:10.5px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.theme-prompt-window{min-width:0;overflow:hidden;border:1px solid var(--guide-ui-border);border-radius:14px;background:#0f1014;color:#f7f8fa;box-shadow:0 18px 50px rgba(0,30,75,.12)}
.theme-prompt-panel[hidden]{display:none!important}
.theme-prompt-window-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;height:48px;padding:0 14px;border-bottom:1px solid #272b33;background:#15171d}
.theme-prompt-window-bar>div{display:flex;align-items:center;gap:6px;min-width:0}.theme-prompt-window-bar i{width:7px;height:7px;border-radius:50%;background:#3b404a}.theme-prompt-window-bar i:nth-child(1){background:#ff6200}.theme-prompt-window-bar i:nth-child(2){background:#fef8b6}.theme-prompt-window-bar i:nth-child(3){background:#007bfd}
.theme-prompt-window-bar span{min-width:0;margin-left:7px;overflow:hidden;color:#8f97a5;font:550 9.5px/1 var(--font-mono);letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap}
.theme-prompt-window-bar button{flex:0 0 auto;padding:7px 10px;border:1px solid #343944;border-radius:6px;background:#20232a;color:#dce0e7;font:550 10.5px/1 var(--font);cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease}
.theme-prompt-window-bar button:hover{background:#f4f5f7;color:#111318}.theme-prompt-window-bar button:active{transform:translateY(1px)}.theme-prompt-window-bar button:focus-visible{outline:2px solid #66b4ff;outline-offset:2px}.theme-prompt-window-bar button.is-copied{background:#007bfd;border-color:#007bfd;color:#fff}
.theme-prompt-palette{display:grid;grid-template-columns:repeat(var(--theme-token-count,5),minmax(0,1fr));min-height:112px}
.theme-prompt-palette span{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-width:0;padding:12px;background:var(--theme-color);color:var(--theme-ink)}
.theme-prompt-palette b,.theme-prompt-palette small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-prompt-palette b{font-size:10px;font-weight:650}.theme-prompt-palette small{font:500 9px/1 var(--font-mono);opacity:.65}
.theme-prompt-copy{min-height:132px;margin:0;padding:22px 22px 18px;overflow:auto;border:0;background:#0f1014;white-space:pre-wrap}.theme-prompt-copy code{color:#e7e9ed;font:450 12.5px/1.78 var(--font-mono)}
.theme-prompt-token-windows{grid-column:1/-1;min-width:0}.theme-prompt-token-windows>.guide-rule-data{margin-top:0}.theme-prompt-token-windows>[hidden]{display:none!important}

.long-style-foundation,.long-style-theme{padding:38px 0 54px;border-bottom:1px solid var(--guide-ui-border)}
.long-style-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:22px}.long-style-section-head h2,.long-style-section-head h3{margin:0;color:var(--guide-ui-text);letter-spacing:-.035em}.long-style-section-head h2{font-size:30px}.long-style-section-head h3{font-size:21px}.long-style-section-head p{max-width:650px;margin:0;color:var(--guide-ui-muted);font-size:13px;line-height:1.65}
.long-style-foundation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid var(--guide-ui-border);border-radius:14px;background:var(--guide-ui-panel)}
.long-style-foundation-fact{display:grid;gap:7px;min-height:124px;padding:20px;border-right:1px solid var(--guide-ui-border);border-bottom:1px solid var(--guide-ui-border)}.long-style-foundation-fact:nth-child(3n){border-right:0}.long-style-foundation-fact:nth-last-child(-n+3){border-bottom:0}.long-style-foundation-fact span{color:var(--guide-ui-muted);font-size:11px}.long-style-foundation-fact b{color:var(--guide-ui-text);font-size:25px;letter-spacing:-.04em}.long-style-foundation-fact code{overflow:hidden;color:#757d8c;font:500 9.5px/1.35 var(--font-mono);text-overflow:ellipsis;white-space:nowrap}
.long-style-type-system{display:grid;margin-top:18px;border-top:1px solid var(--guide-ui-border)}.long-style-type-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.5fr);align-items:center;gap:24px;min-height:94px;border-bottom:1px solid var(--guide-ui-border)}.long-style-type-sample{min-width:0;color:var(--guide-ui-text);overflow-wrap:anywhere}.long-style-type-sample.is-display{font-size:43px;font-weight:650;line-height:.94;letter-spacing:-.055em}.long-style-type-sample.is-heading{font-size:30px;font-weight:600;line-height:1.08;letter-spacing:-.035em}.long-style-type-sample.is-body{font-size:17px;line-height:1.45}.long-style-type-sample.is-label{font-size:12px;font-weight:650;letter-spacing:.06em}.long-style-type-row>span:last-child{display:grid;gap:6px}.long-style-type-row b{color:var(--guide-ui-text);font-size:12px}.long-style-type-row code{color:var(--guide-ui-muted);font:500 10px/1.4 var(--font-mono)}
.long-style-theme{padding-top:72px}.long-style-theme-hero{display:grid;grid-template-columns:310px minmax(0,1fr);align-items:center;gap:clamp(38px,7vw,100px);min-height:590px;padding:34px;border:1px solid var(--guide-ui-border);border-radius:18px;background:var(--guide-ui-panel)}
.long-style-poster{position:relative;justify-self:center;width:280px;min-height:500px;padding:20px;overflow:hidden;border-radius:10px;background:var(--li-background);color:var(--li-ink);box-shadow:0 24px 58px rgba(0,0,0,.28);font-variant-numeric:tabular-nums}.long-style-poster::before{content:"";position:absolute;top:-70px;right:-70px;width:190px;height:190px;border-radius:50%;background:var(--li-primary);filter:blur(54px);opacity:.26}.long-style-poster-brand{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}.long-style-poster-brand span{font-size:11px;font-weight:750}.long-style-poster-brand small{color:var(--li-muted);font:600 7px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.long-style-poster h3{position:relative;max-width:220px;margin:62px 0 18px;color:var(--li-ink);font-size:29px;line-height:.96;letter-spacing:-.055em}.long-style-poster-metric{position:relative;display:grid;gap:3px;padding:16px;border-radius:14px;background:var(--li-accent);color:#101318}.long-style-poster-metric strong{font-size:42px;line-height:.9;letter-spacing:-.06em}.long-style-poster-metric span{font-size:8px;font-weight:650}.long-style-poster-chart{position:relative;display:flex;align-items:end;gap:6px;height:112px;margin-top:10px;padding:16px;border-radius:14px;background:var(--li-surface)}.long-style-poster-chart::after{content:"";position:absolute;right:16px;bottom:35%;left:16px;height:2px;background:var(--li-primary);transform:rotate(-8deg);transform-origin:left center}.long-style-poster-chart i{flex:1;border-radius:4px 4px 1px 1px;background:var(--li-soft)}.long-style-poster-chart i:nth-child(1){height:34%}.long-style-poster-chart i:nth-child(2){height:52%;background:var(--li-secondary)}.long-style-poster-chart i:nth-child(3){height:43%}.long-style-poster-chart i:nth-child(4){height:76%;background:var(--li-primary)}.long-style-poster-chart i:nth-child(5){height:66%}.long-style-poster-chart i:nth-child(6){height:92%;background:var(--li-secondary)}.long-style-poster-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.long-style-poster-row i{height:70px;border-radius:14px;background:var(--li-surface)}.long-style-poster-row i:last-child{background:var(--li-soft)}.long-style-poster-note{display:flex;align-items:center;gap:9px;margin-top:14px;color:var(--li-muted);font-size:8px;line-height:1.35}.long-style-poster-note b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--li-primary);color:#fff;font-size:8px}
.long-style-theme[data-long-style-theme="brand-campaign"] .long-style-poster-metric{background:var(--li-primary);color:#fff}.long-style-theme[data-long-style-theme="brand-campaign"] .long-style-poster-chart{background:#f7f8fa}.long-style-theme[data-long-style-theme="brand-campaign"] .long-style-poster-row i:first-child{background:var(--li-primary)}
.long-style-theme-system{padding-top:24px}.long-style-theme-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid var(--guide-ui-border);border-radius:14px;background:var(--guide-ui-panel)}.long-style-theme-tab{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 12px;min-width:0;padding:18px;border:0;border-right:1px solid var(--guide-ui-border);background:transparent;color:var(--guide-ui-muted);text-align:left;cursor:pointer;transition:background .16s ease,color .16s ease}.long-style-theme-tab:last-child{border-right:0}.long-style-theme-tab:hover{background:var(--guide-ui-surface-hover);color:var(--guide-ui-text)}.long-style-theme-tab:focus-visible{position:relative;z-index:2;outline:2px solid var(--guide-ui-focus);outline-offset:-3px}.long-style-theme-tab.is-active{background:var(--guide-ui-text);color:var(--guide-ui-bg)}.long-style-theme-tab>span{grid-row:1/3;color:currentColor;font:600 10px/1 var(--font-mono);opacity:.52}.long-style-theme-tab b{align-self:end;font-size:15px}.long-style-theme-tab small{min-width:0;overflow:hidden;font-size:10.5px;line-height:1.25;opacity:.65;text-overflow:ellipsis;white-space:nowrap}.long-style-theme[hidden]{display:none!important}
.long-style-poster.long-preview-data,.long-style-poster.long-preview-conversion,.long-style-poster.long-preview-campaign{font-variant-numeric:tabular-nums}.long-style-poster.long-preview-data::before,.long-style-poster.long-preview-conversion::before,.long-style-poster.long-preview-campaign::before{display:none}.long-preview-brand{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px}.long-preview-brand span{font-size:11px;font-weight:760}.long-preview-brand small{font:620 7px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.long-preview-data{min-height:540px!important;padding:16px!important;border-radius:8px!important;background:var(--li-background)!important;color:var(--li-ink)!important}.long-preview-data .long-preview-brand{padding-bottom:13px;border-bottom:1px solid color-mix(in srgb,var(--li-ink) 14%,transparent)}.long-preview-data .long-preview-brand small{color:var(--li-muted)}.long-data-heading{padding:25px 0 14px}.long-data-heading small{color:var(--li-muted);font:600 6.5px/1 var(--font-mono);letter-spacing:.08em}.long-style-poster .long-data-heading h3{max-width:230px;margin:7px 0 0;font-size:26px;line-height:.98}.long-data-metric{display:grid;grid-template-columns:.9fr 1.1fr;min-height:82px;border:1px solid color-mix(in srgb,var(--li-ink) 12%,transparent);border-radius:var(--li-module-radius);background:var(--li-surface)}.long-data-metric>div:first-child{display:grid;align-content:center;padding:12px;background:var(--li-accent);border-radius:calc(var(--li-module-radius) - 1px)}.long-data-metric span,.long-data-metric dt{font-size:6.5px}.long-data-metric strong{font-size:34px;line-height:.9;letter-spacing:-.06em}.long-data-metric dl{display:grid;grid-template-columns:1fr 1fr;margin:0}.long-data-metric dl div{display:grid;align-content:center;gap:5px;padding:10px;border-left:1px solid color-mix(in srgb,var(--li-ink) 10%,transparent)}.long-data-metric dt{color:var(--li-muted)}.long-data-metric dd{margin:0;font-size:12px;font-weight:720}.long-data-line{margin-top:8px;padding:12px;border-radius:var(--li-module-radius);background:var(--li-surface)}.long-data-line header{display:flex;align-items:center;justify-content:space-between;gap:8px}.long-data-line header b{font-size:8px}.long-data-line header span{color:var(--li-muted);font-size:5.8px}.long-data-line svg{display:block;width:100%;height:92px;margin-top:9px;overflow:visible}.long-data-line path{fill:none;vector-effect:non-scaling-stroke}.long-data-line .grid{stroke:color-mix(in srgb,var(--li-ink) 9%,transparent);stroke-width:1}.long-data-line .area{fill:color-mix(in srgb,var(--li-primary) 11%,transparent);stroke:none}.long-data-line .primary{stroke:var(--li-primary);stroke-width:2.3}.long-data-line .secondary{stroke:var(--li-secondary);stroke-width:1.7;stroke-dasharray:4 4}.long-data-mini-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:8px;margin-top:8px}.long-data-bars,.long-data-donut{min-height:99px;border-radius:var(--li-module-radius);background:var(--li-surface)}.long-data-bars{display:flex;align-items:end;gap:7px;padding:14px 12px 10px}.long-data-bars span{display:grid;grid-template-rows:1fr auto;align-self:stretch;flex:1;gap:5px}.long-data-bars i{align-self:end;height:var(--v);border-radius:2px 2px 0 0;background:var(--li-primary)}.long-data-bars span:nth-child(even) i{background:var(--li-secondary)}.long-data-bars b{color:var(--li-muted);font-size:5.5px;font-weight:500;text-align:center}.long-data-donut{display:grid;place-content:center;place-items:center;position:relative}.long-data-donut i{grid-area:1/1;width:58px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--li-primary) 0 62%,var(--li-soft) 62% 100%)}.long-data-donut i::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--li-surface)}.long-data-donut strong,.long-data-donut span{position:relative;z-index:2;grid-area:1/1}.long-data-donut strong{font-size:13px}.long-data-donut span{align-self:end;margin-bottom:20px;color:var(--li-muted);font-size:5.5px;transform:translateY(100%)}.long-preview-source{margin:10px 0 0;color:var(--li-muted);font:500 5.5px/1.4 var(--font-mono)}
.long-preview-conversion{min-height:552px!important;padding:10px!important;border-radius:30px!important;background:var(--li-background)!important;color:var(--li-ink)!important}.long-conversion-cover{min-height:180px;padding:17px;border-radius:26px;background:var(--li-primary);color:#fff}.long-conversion-cover .long-preview-brand{margin-bottom:32px}.long-conversion-cover .long-preview-brand small{color:rgba(255,255,255,.7)}.long-conversion-cover>small{font-size:7px;font-weight:650}.long-style-poster .long-conversion-cover h3{max-width:210px;margin:7px 0 9px;color:#fff;font-size:27px;line-height:.96}.long-conversion-cover p{max-width:210px;margin:0;color:rgba(255,255,255,.74);font-size:7.5px;line-height:1.45}.long-conversion-benefit{display:grid;grid-template-columns:1fr 24px 1.15fr;align-items:stretch;margin-top:8px;overflow:hidden;border-radius:var(--li-module-radius);background:var(--li-surface)}.long-conversion-benefit>div{display:grid;align-content:center;gap:4px;min-height:90px;padding:12px}.long-conversion-benefit>i{display:grid;place-items:center;color:var(--li-primary);font-style:normal;font-weight:800}.long-conversion-benefit small,.long-conversion-benefit span{color:var(--li-muted);font-size:6px}.long-conversion-benefit b{font-size:12px}.long-conversion-benefit .is-after{background:var(--li-accent);color:#101318}.long-conversion-benefit .is-after b{font-size:26px;line-height:.9}.long-conversion-benefit .is-after span,.long-conversion-benefit .is-after small{color:#303218}.long-conversion-steps{margin-top:8px;padding:14px;border-radius:var(--li-module-radius);background:var(--li-soft)}.long-conversion-steps header,.long-campaign-industry header{display:flex;justify-content:space-between;gap:10px}.long-conversion-steps header b{font-size:9px}.long-conversion-steps header span{color:var(--li-muted);font-size:6px}.long-conversion-steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0 0;padding:0;list-style:none}.long-conversion-steps li{position:relative;display:grid;gap:6px}.long-conversion-steps li:not(:last-child)::after{content:"";position:absolute;top:9px;right:-6px;width:8px;border-top:1px solid var(--li-primary)}.long-conversion-steps li b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--li-primary);color:#fff;font-size:6px}.long-conversion-steps li span{font-size:6.3px;line-height:1.3}.long-conversion-action{display:grid;grid-template-columns:1fr 64px;gap:10px;margin-top:8px;padding:13px;border:1px solid color-mix(in srgb,var(--li-primary) 20%,transparent);border-radius:var(--li-module-radius);background:var(--li-surface)}.long-conversion-action>div{display:grid;align-content:center;gap:4px}.long-conversion-action small,.long-conversion-action span{color:var(--li-muted);font-size:6px}.long-conversion-action b{font-size:9px}.long-conversion-action>i{display:grid;place-items:center;aspect-ratio:1;border:5px solid #fff;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0/10px 10px;box-shadow:0 0 0 1px #d4dae3}.long-conversion-action>i span{width:16px;aspect-ratio:1;background:var(--li-primary);box-shadow:0 0 0 3px #fff}
.long-preview-campaign{min-height:570px!important;padding:17px!important;border-radius:3px!important;background:radial-gradient(circle at 82% 17%,color-mix(in srgb,var(--li-primary) 38%,transparent),transparent 34%),var(--li-background)!important;color:var(--li-ink)!important}.long-preview-campaign .long-preview-brand small{color:var(--li-muted)}.long-campaign-ribbon{display:flex;align-items:center;justify-content:space-between;height:30px;margin:22px -17px 0;padding:0 17px;border-radius:var(--li-section-radius);background:linear-gradient(90deg,var(--li-accent),#dfff00);color:#101318}.long-campaign-ribbon::after{content:"";position:absolute;right:0;left:0;height:4px;margin-top:34px;background:var(--li-primary)}.long-campaign-ribbon span,.long-campaign-ribbon b{font-size:8px}.long-style-poster.long-preview-campaign>h3{max-width:220px;margin:30px 0 14px;color:var(--li-ink);font-size:28px;line-height:.94}.long-campaign-honor{position:relative;display:grid;align-content:end;min-height:144px;padding:14px;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:var(--li-module-radius);background:var(--li-honor);color:#17140e;box-shadow:0 18px 42px rgba(0,0,0,.28)}.long-campaign-honor::before{content:"";position:absolute;inset:-40% 42% -40% -20%;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.72) 48%,transparent 68%);transform:rotate(9deg)}.long-campaign-honor small,.long-campaign-honor strong,.long-campaign-honor span{position:relative;z-index:2}.long-campaign-honor small{align-self:start;font:650 6px/1 var(--font-mono);letter-spacing:.08em}.long-campaign-honor strong{font-size:45px;line-height:.88;letter-spacing:-.065em}.long-campaign-honor span{margin-top:4px;font-size:7px;font-weight:650}.long-campaign-honor>i{position:absolute;right:-20px;bottom:-28px;width:110px;aspect-ratio:1;border:1px solid rgba(45,36,17,.28);border-radius:50%;box-shadow:0 0 0 12px rgba(255,255,255,.09),0 0 0 25px rgba(59,44,16,.08)}.long-campaign-statgrid{display:grid;grid-template-columns:1fr 1fr;margin-top:8px;overflow:hidden;border-radius:var(--li-module-radius);background:#f7f8fa;color:#14171c}.long-campaign-statgrid>div{display:grid;gap:4px;min-height:57px;padding:10px;border-right:1px solid #d5d8dd;border-bottom:1px solid #d5d8dd}.long-campaign-statgrid>div:nth-child(2n){border-right:0}.long-campaign-statgrid>div:nth-last-child(-n+2){border-bottom:0}.long-campaign-statgrid small{color:#7a818d;font-size:5.5px}.long-campaign-statgrid b{font-size:15px}.long-campaign-industry{margin-top:8px;padding:11px 12px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}.long-campaign-industry header b{font-size:7px}.long-campaign-industry header span{color:var(--li-muted);font-size:5px}.long-campaign-industry>div{display:flex;align-items:end;gap:16px;height:44px;margin-top:8px}.long-campaign-industry i{display:flex;align-items:end;justify-content:center;gap:3px;flex:1;height:100%}.long-campaign-industry i span,.long-campaign-industry i em{display:block;width:8px}.long-campaign-industry i span{height:var(--a);background:var(--li-primary)}.long-campaign-industry i em{height:var(--b);background:#cbd1da}
.long-style-theme-copy{max-width:680px}.long-style-index{margin:0 0 16px;color:#767f90;font:600 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.long-style-theme-copy h2{margin:0;color:var(--guide-ui-text);font-size:clamp(48px,7vw,92px);line-height:.88;letter-spacing:-.065em}.long-style-theme-copy>p:not(.long-style-index){max-width:620px;margin:26px 0 0;color:var(--guide-ui-muted);font-size:16px;line-height:1.75}.long-style-theme-copy dl{display:grid;gap:13px;margin:32px 0 0;padding-top:20px;border-top:1px solid var(--guide-ui-border)}.long-style-theme-copy dl div{display:grid;grid-template-columns:72px 1fr;gap:14px}.long-style-theme-copy dt{color:#747d8d;font-size:11px}.long-style-theme-copy dd{margin:0;color:var(--guide-ui-text);font-size:12.5px;line-height:1.55}
.long-style-theme>.long-style-section-head{margin-top:44px}.long-style-palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));min-height:130px;overflow:hidden;border-radius:14px}.long-style-color{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-width:0;padding:12px;background:var(--li-color);color:var(--li-color-ink)}.long-style-color b,.long-style-color span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.long-style-color b{font-size:10px}.long-style-color span{font:500 9px/1 var(--font-mono);opacity:.67}
.long-style-detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;margin-top:20px;overflow:hidden;border:1px solid var(--guide-ui-border);border-radius:14px;background:var(--guide-ui-border)}.long-style-detail-grid>section{padding:24px;background:var(--guide-ui-panel)}.long-style-detail-grid h3,.long-style-guidelines h3{margin:0 0 18px;color:var(--guide-ui-text);font-size:15px}.long-style-components{display:flex;flex-wrap:wrap;gap:8px}.long-style-components span{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--guide-ui-border);border-radius:999px;color:var(--guide-ui-text);font-size:11px}.long-style-components code{color:#798292;font:550 9px/1 var(--font-mono)}.long-style-detail-grid ul,.long-style-guidelines ul{margin:0;padding-left:18px;color:var(--guide-ui-muted);font-size:12.5px;line-height:1.75}
.long-style-guidelines{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.long-style-guidelines section{padding:24px;border:1px solid var(--guide-ui-border);border-radius:14px;background:var(--guide-ui-panel)}.long-style-guidelines section::before{display:block;margin-bottom:13px;font:700 11px/1 var(--font-mono)}.long-style-guidelines .is-do::before{content:"DO";color:#33b474}.long-style-guidelines .is-dont::before{content:"DON'T";color:#e36d6d}
.long-style-prompt{display:grid;grid-template-columns:210px minmax(0,1fr);margin-top:20px;overflow:hidden;border:1px solid #2c3039;border-radius:14px;background:#0d0f13}.long-style-prompt>div{display:grid;align-content:start;gap:9px;padding:24px;border-right:1px solid #2c3039}.long-style-prompt span{color:#737c8c;font:600 9px/1 var(--font-mono);letter-spacing:.12em}.long-style-prompt b{color:#eef0f4;font-size:13px}.long-style-prompt pre{margin:0;padding:24px;white-space:pre-wrap}.long-style-prompt code{color:#cfd4dd;font:450 11.5px/1.8 var(--font-mono)}
.long-data-donut i{position:relative}.long-data-donut i::after{inset:9px}.long-style-palette{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}.long-style-color.is-gradient{min-width:184px}

.long-style-theme-system{padding-top:0}.long-style-theme{padding-top:34px}.long-style-theme-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:24px;align-items:start}.long-style-theme-content,.long-style-theme-code{min-width:0}.long-style-theme-content .long-style-theme-hero{grid-template-columns:1fr;align-items:start;gap:30px;min-height:0;padding:24px}.long-style-theme-content .long-style-theme-copy{max-width:none}.long-style-theme-content .long-style-theme-copy h2{font-size:clamp(46px,5vw,72px)}.long-style-theme-content .long-style-theme-copy>p:not(.long-style-index){font-size:14px}.long-style-theme-content .long-style-section-head{align-items:flex-start;flex-direction:column;gap:7px;margin-top:34px}.long-style-theme-content .long-style-palette{grid-template-columns:repeat(2,minmax(0,1fr))}.long-style-theme-content .long-style-color.is-gradient{grid-column:1/-1;min-width:0}.long-style-theme-content .long-style-detail-grid,.long-style-theme-content .long-style-guidelines{grid-template-columns:1fr}.long-style-theme-content .long-style-prompt{grid-template-columns:1fr}.long-style-theme-content .long-style-prompt>div{border-right:0;border-bottom:1px solid #2c3039}.long-style-theme-code{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto;scrollbar-width:thin}.long-style-theme-code>.guide-rule-data{margin-top:0;border-radius:14px}.long-style-theme-code .guide-rule-code{max-height:48vh;white-space:pre;overflow:auto}.long-style-theme-code .guide-rule-explanation{grid-template-columns:1fr;gap:5px}.long-style-theme-code .guide-rule-explanation code{font-size:10.5px}.long-style-theme-code .guide-rule-explanation span{font-size:12px}

@supports not (color:color-mix(in srgb,red,blue)){
  .member-color-glow{background:radial-gradient(circle at var(--mx) var(--my),#007bfd 0 6%,rgba(0,123,253,.82) 19%,transparent 43%),radial-gradient(circle at calc(var(--mx) - 38%) calc(var(--my) + 20%),var(--tier-accent) 0 6%,transparent 46%),#020306}
}

@media (max-width:1450px){
  .specimen-section{grid-template-columns:1fr;gap:28px}
  .specimen-copy{max-width:680px}
  .guide-module-ent{grid-template-columns:minmax(0,1fr);gap:22px}
  .base-color-cell.is-orange,.base-color-cell.is-yellow{grid-column:span 3}
}

@media (max-width:1180px){
  .gwrap{padding-left:34px;padding-right:34px}
  .ent{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px}
  .guide-document{grid-template-columns:minmax(0,1fr)}
  .guide-toc{display:none}
}
@media (max-width:1100px){
  .ent,.ent.ip-assets-ent{grid-template-columns:minmax(0,1fr);gap:24px}
  .color-band-strip{grid-template-columns:repeat(var(--token-count),minmax(70px,1fr));overflow-x:auto;scrollbar-width:thin}
  .theme-prompt-lab{grid-template-columns:1fr}.theme-prompt-tabs{grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--guide-ui-border)}.theme-prompt-tab{padding-left:10px;border-right:1px solid var(--guide-ui-border)}.theme-prompt-tab:hover,.theme-prompt-tab.is-active{padding-left:14px}
}
@media (max-width:860px){
  .gwrap{padding:24px 18px 56px}
  .ghead h1,.ghead h2{font-size:32px}
  .ghead .guide-page-title{font-size:29px;line-height:1.18;letter-spacing:-.035em;text-wrap:pretty}
  .ghead .acts{flex-wrap:wrap}
  .guide-breadcrumbs{margin-bottom:24px;overflow-x:auto;white-space:nowrap}
  .guide-reference-note{grid-template-columns:1fr}
  .guide-index-card{grid-template-columns:1fr;gap:8px}
  .ent{grid-template-columns:1fr;gap:20px;padding:28px 0}
  .figbox.basic-canvas{min-height:260px;padding:18px}
  .figbox.basic-canvas .fig{max-height:260px}
  .vessa-frame{padding:10px}
  .vessa-paper-head{align-items:flex-start;flex-direction:column;padding:24px 20px}
  .specimen-section{grid-template-columns:1fr;gap:24px;padding:28px 20px}
  .guide-panel.specimen-list{padding:22px 20px}.specimen-row{grid-template-columns:1fr;gap:8px}.type-sample.cn{white-space:normal}
  .motion-content,.assets-content{padding:20px}.motion-grid{grid-template-columns:1fr}.motion-stage{min-height:280px}
  .motion-tokens{grid-template-columns:repeat(2,1fr)}.motion-token:nth-child(2){border-right:0}.motion-token:nth-child(-n+2){border-bottom:1px solid var(--guide-ui-border)}
  .brandbook-gallery{grid-template-columns:1fr;grid-template-rows:none;min-height:0}.brandbook-card.is-cover{grid-row:auto}
  .mood-toolbar{align-items:flex-start;flex-direction:column}.mood-toolbar-actions{justify-content:flex-start}.mood-cloud{height:520px}.mood-board.is-columns .mood-cloud{grid-template-columns:1fr 1fr}
  .asset-row{grid-template-columns:78px minmax(0,1fr) auto}
  .base-color-system{grid-auto-rows:120px}.base-color-cell.is-blue,.base-color-cell.is-orange,.base-color-cell.is-yellow,.base-color-cell.is-blue-soft,.base-color-cell.is-blue-tint,.base-color-spectrum{grid-column:span 6}
  .member-color-lab{grid-template-columns:1fr;min-height:0}.member-color-stage{min-height:420px}.member-color-copy{min-height:330px}
}
@media (max-width:620px){
  .ip-library{padding:0 10px 12px}.ip-library-grid{gap:5px;padding-top:10px}.ip-library-head{align-items:flex-start}.ip-library-head>div{min-width:0}.ip-library-head span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.life-ip-grid{gap:7px}
  .brandbook-gallery{grid-template-rows:none}
  .mood-source-switch{width:100%}.mood-source-switch button{flex:1}.mood-cloud{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}
  .mood-tile,.mood-tile.a,.mood-tile.b,.mood-tile.c,.mood-tile.d,.mood-tile.e,.mood-tile.g,.mood-tile.j{position:relative;inset:auto;width:auto;height:150px;transform:none!important}.mood-board.is-columns .mood-tile{height:150px}
  .mood-tile.c,.mood-board.is-columns .mood-tile.c{height:auto;aspect-ratio:3/4}.mood-tile.e,.mood-board.is-columns .mood-tile.e{height:auto;aspect-ratio:2883/1127}
  .assets-intro{flex-direction:column}.asset-row{grid-template-columns:50px minmax(0,1fr)}.asset-preview{width:42px;height:42px}.asset-action{grid-column:2;justify-self:start;margin-bottom:14px}
  .guide-color-section-head{align-items:flex-start;flex-direction:column}.guide-color-section-head>span{display:none}.base-color-system{grid-template-columns:1fr 1fr;grid-auto-rows:112px}.base-color-cell.is-blue,.base-color-cell.is-orange,.base-color-cell.is-yellow,.base-color-cell.is-blue-soft,.base-color-cell.is-blue-tint,.base-color-spectrum{grid-column:span 1}.base-color-spectrum{grid-column:1/-1}
  .member-color-stage{min-height:350px}.member-color-copy{padding:28px 22px 24px;min-height:310px}
  .theme-prompt-tabs{grid-template-columns:1fr}.theme-prompt-palette{grid-template-columns:repeat(var(--theme-token-count,5),minmax(78px,1fr));overflow-x:auto}.theme-prompt-copy{padding:18px;min-height:160px}
}
@media (max-width:720px){
  .color-library-bar{align-items:flex-start;flex-direction:column}.color-library-count{display:none}
  .color-band-title{min-height:62px;padding-bottom:24px}.color-band-strip{grid-template-columns:repeat(var(--token-count),minmax(92px,1fr))}
  .font-playground-head{align-items:flex-start;flex-direction:column;gap:8px}
  .font-playground-toolbar{align-items:stretch;flex-direction:column}
  .font-control{grid-template-columns:auto minmax(0,1fr);width:100%;margin-left:0}
  .font-control input{width:100%}
  .font-reset{align-self:flex-start}
  .font-specimen-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .font-specimen-meta{justify-items:start;display:flex;align-items:center;gap:8px}
  .font-text-field{grid-template-columns:1fr;gap:6px}
  .font-variable-stage{grid-template-columns:1fr;align-items:start;min-height:150px;padding:22px}.font-variable-sample{font-size:37px}.font-variable-meta{justify-items:start;padding-bottom:0}.font-preset-label{align-items:flex-start;flex-direction:column;gap:4px}
}

@media (prefers-reduced-motion:reduce){.base-color-cell,.member-crosshair,.member-life-mark,.theme-prompt-tab{transition:none}.base-color-cell:hover{transform:none}}

@media (max-width:1100px){
  .long-style-theme-hero{grid-template-columns:260px minmax(0,1fr);gap:34px;padding:26px}.long-style-poster{width:240px;min-height:440px}.long-style-palette{grid-template-columns:repeat(4,minmax(0,1fr))}.long-style-color{min-height:92px}
}
@media (max-width:860px){
  .long-style-foundation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.long-style-foundation-fact:nth-child(3n){border-right:1px solid var(--guide-ui-border)}.long-style-foundation-fact:nth-child(2n){border-right:0}.long-style-foundation-fact:nth-last-child(-n+3){border-bottom:1px solid var(--guide-ui-border)}.long-style-foundation-fact:nth-last-child(-n+2){border-bottom:0}.long-style-theme-hero{grid-template-columns:1fr}.long-style-poster{width:280px;min-height:500px}.long-style-theme-copy{max-width:none}.long-style-theme-copy h2{font-size:58px}.long-style-detail-grid,.long-style-guidelines{grid-template-columns:1fr}.long-style-prompt{grid-template-columns:1fr}.long-style-prompt>div{border-right:0;border-bottom:1px solid #2c3039}
}
@media (max-width:620px){
  .long-style-section-head{align-items:flex-start;flex-direction:column;gap:8px}.long-style-foundation-grid{grid-template-columns:1fr}.long-style-foundation-fact,.long-style-foundation-fact:nth-child(2n),.long-style-foundation-fact:nth-child(3n),.long-style-foundation-fact:nth-last-child(-n+2){border-right:0;border-bottom:1px solid var(--guide-ui-border)}.long-style-foundation-fact:last-child{border-bottom:0}.long-style-type-row{grid-template-columns:1fr;gap:10px;padding:18px 0}.long-style-type-sample.is-display{font-size:34px}.long-style-theme{padding-top:48px}.long-style-theme-hero{padding:18px}.long-style-poster{width:240px;min-height:440px}.long-style-theme-copy h2{font-size:47px}.long-style-palette{grid-template-columns:repeat(2,minmax(0,1fr))}.long-style-prompt pre{padding:18px}
}

@media (max-width:1100px){.long-style-color.is-gradient{grid-column:span 2}}
@media (max-width:620px){.long-style-theme-tabs{grid-template-columns:repeat(3,minmax(180px,1fr));overflow-x:auto}.long-style-theme-tab{padding:14px}.long-style-poster.long-preview-data,.long-style-poster.long-preview-conversion,.long-style-poster.long-preview-campaign{width:240px;min-height:540px!important}}
@media (max-width:620px){.long-style-theme-layout{grid-template-columns:1fr}.long-style-theme-code{position:static;max-height:none}.long-style-theme-code .guide-rule-code{max-height:none}.long-style-theme-content .long-style-theme-hero{padding:18px}}

.long-style-theme-system>.long-style-theme-tabs{display:flex;grid-template-columns:none;align-items:center;width:max-content;max-width:100%;gap:2px;padding:3px;overflow-x:auto;border-radius:9px;background:var(--guide-ui-panel)}.long-style-theme-system .long-style-theme-tab{display:inline-flex;grid-template-columns:none;grid-template-rows:none;align-items:center;gap:6px;min-width:max-content;padding:7px 10px;border:0;border-radius:6px;font-size:12px;line-height:1;white-space:nowrap}.long-style-theme-system .long-style-theme-tab>span{display:block;grid-row:auto;font-size:8.5px;opacity:.45}.long-style-theme-system .long-style-theme-tab b{font-size:12px;font-weight:620}.long-style-theme-system .long-style-theme-tab small{display:none}
.long-style-make-preview{position:relative;justify-self:center;width:min(100%,320px);height:420px;margin:0;overflow:hidden;border:0;border-radius:12px;background:#0b0c10;box-shadow:0 22px 56px rgba(0,24,64,.2)}.long-style-make-preview .market-preview-shell{position:absolute;inset:0 0 auto;overflow:hidden;border:0;border-radius:inherit;background:#111318}.long-style-make-preview .poster-document{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0}.long-style-make-preview .poster-module::after,.long-style-make-preview .poster-module-delete,.long-style-make-preview .poster-resize-handle{display:none!important}.long-style-make-preview figcaption{position:absolute;z-index:3;top:27px;left:27px;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(9,11,15,.78);color:#fff;backdrop-filter:blur(10px);pointer-events:none}.long-style-make-preview figcaption span{font:650 8.5px/1 var(--font-mono);letter-spacing:.06em}.long-style-make-preview figcaption small{color:rgba(255,255,255,.58);font-size:8px}
@media (max-width:620px){.long-style-theme-system>.long-style-theme-tabs{display:flex}.long-style-theme-system .long-style-theme-tab{padding:7px 9px}.long-style-make-preview{width:min(100%,280px);height:378px}}

.long-style-theme-system>.long-style-theme-tabs{gap:1px;padding:2px;border-color:#28282e;border-radius:8px;background:#17171c}.long-style-theme-system .long-style-theme-tab{gap:5px;padding:6px 9px;border-radius:6px;background:transparent;color:#92929c;transition:background .16s ease,color .16s ease}.long-style-theme-system .long-style-theme-tab>span{display:none}.long-style-theme-system .long-style-theme-tab::before{content:"";display:block;width:10px;color:#fff;font-size:10px;line-height:1}.long-style-theme-system .long-style-theme-tab:hover{background:#202026;color:#d8d8de}.long-style-theme-system .long-style-theme-tab.is-active{background:#2a2a31;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.long-style-theme-system .long-style-theme-tab.is-active::before{content:"✓"}.long-style-theme-system .long-style-theme-tab:focus-visible{outline:2px solid #6ab5ff;outline-offset:2px}.long-style-detail-grid.is-components-only{grid-template-columns:1fr}.long-style-detail-grid.is-components-only>section{min-height:0}
.long-style-theme-content .long-style-theme-hero{display:block;min-height:0;padding:0;border:0;border-radius:0;background:transparent}.long-style-theme-content .long-style-make-preview{justify-self:stretch;width:100%;max-width:none;height:auto;aspect-ratio:16/21;margin-inline:0}
.long-style-theme-system{overflow-anchor:none}.long-style-theme-content .long-style-palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;min-height:0;overflow:visible;border-radius:0;background:var(--guide-ui-border)}.long-style-theme-content .long-style-color{min-height:88px;padding:12px;border-radius:0}.long-style-theme-content .long-style-color.is-gradient{grid-column:1/-1;min-width:0}
.guide-page-long-image-themes.gwrap{max-width:none}.guide-page-long-image-themes .guide-document{grid-template-columns:minmax(0,1fr);gap:0}.guide-page-long-image-themes .guide-article{max-width:none}.guide-page-long-image-themes .long-style-theme-layout{grid-template-columns:minmax(360px,.75fr) minmax(520px,1.25fr);gap:16px}
@media (max-width:620px){.long-style-theme-content .long-style-palette{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep the original page composition; only the requested code cards span the content width. */
.guide-page-motion-overview #motion-tokens>.guide-rule-data,
.guide-page-motion-events #motion-tokens>.guide-rule-data,
.guide-page-motion-identity #motion-tokens>.guide-rule-data{grid-column:1/-1}

/* The Guide document can omit its optional on-page contents column. */
.guide-document:not(:has(>.guide-toc)){grid-template-columns:minmax(0,1fr)}