/* /viz — scoped. Load with job.css. Prefix vz- to avoid collisions. */
body.viz {
  --vz-ink: var(--ink, #07111f);
  --vz-muted: var(--muted, #475569);
}
body.viz .vz-svg { width: 100%; height: auto; display: block; }
body.viz .vz-bar { }
body.viz .vz-n {
  font: 600 12px/1 var(--font-sans, system-ui, sans-serif);
  fill: var(--vz-ink);
  font-variant-numeric: tabular-nums;
}
body.viz .vz-n-lg { font-size: 22px; fill: var(--accent2, #155e75); }
body.viz .vz-axis { stroke: var(--line, #c5ceda); stroke-width: 1.25; }
body.viz .vz-axis.vz-thick, body.viz .vz-conn.vz-thick { stroke-width: 2.4; }
body.viz .vz-grid { stroke: var(--track, #dce3ec); stroke-width: 1; }
body.viz .vz-line { fill: none; stroke: var(--accent, #0e7490); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.viz .vz-area { }
body.viz .vz-dot { fill: var(--accent, #0e7490); }
body.viz .vz-conn { stroke: var(--accent, #0e7490); fill: none; stroke-width: 1.8; }
body.viz .vz-dash { stroke: var(--muted, #64748b); stroke-dasharray: 4 3; stroke-width: 1.2; }
body.viz .vz-node { }
body.viz .vz-hub { }
body.viz .vz-slice { }
body.viz .vz-cell { }

body.viz .vz-stage, body.viz .vz-fig {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem .85rem;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #c5ceda);
  border-radius: 16px;
  box-shadow: var(--shadow-soft, 0 1px 0 rgba(10,22,40,.04));
}
body.viz .vz-stage figcaption, body.viz .vz-fig figcaption {
  margin-top: .65rem;
  font-size: .85rem;
  color: var(--vz-muted);
  text-align: center;
}
body.viz .vz-hero-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.25rem 0 0;
}
body.viz .vz-hero-demo .vz-svg {
  background: var(--surface, #fff);
  border-radius: 12px;
  padding: .4rem;
  border: 1px solid var(--line, #c5ceda);
}
@media (max-width: 760px) {
  body.viz .vz-hero-demo { grid-template-columns: 1fr; }
}

body.viz .vz-card .vz-mini {
  display: block;
  height: 7.2rem;
  overflow: hidden;
  margin: 0 0 .7rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 8%, var(--surface, #fff));
}
body.viz .vz-card .vz-mini .vz-svg { height: 7.2rem; }

body.viz .vz-meters { display: grid; gap: .55rem; margin: 1rem 0 1.25rem; }
body.viz .vz-meter {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr 2.4rem;
  gap: .5rem;
  align-items: center;
  font-size: .92rem;
}
body.viz .vz-meter .bar {
  height: .5rem;
  background: color-mix(in srgb, var(--accent, #0e7490) 14%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
body.viz .vz-meter .bar i { display: block; height: 100%; background: var(--accent, #0e7490); border-radius: inherit; }
body.viz .vz-meter b { text-align: right; font-variant-numeric: tabular-nums; }
body.viz .vz-radar-wrap { max-width: 320px; margin: 0 auto 1.5rem; }

body.viz .vz-list { margin: 0 0 1.4rem; padding-left: 1.15rem; }
body.viz .vz-list li { margin: .42rem 0; }
body.viz .vz-steps { margin: 0 0 1.4rem; padding-left: 1.2rem; }
body.viz .vz-steps .hint { display: block; color: var(--vz-muted); font-size: .88rem; margin-top: .15rem; }
body.viz .vz-close { font-size: 1.02rem; margin: 1.4rem 0; }

body.viz .vz-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.75rem;
}
body.viz .vz-table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1rem 0 1.5rem; }
body.viz .vz-table th, body.viz .vz-table td {
  text-align: left;
  padding: .55rem .65rem;
  border-bottom: 1px solid var(--line, #c5ceda);
  vertical-align: top;
}
body.viz .vz-chooser { margin: 0 0 1rem; }
body.viz .vz-chooser input {
  font: inherit;
  padding: .5rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--line, #c5ceda);
  min-width: min(100%, 22rem);
}

body.viz .vz-compare-picks { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
body.viz .vz-compare-picks button, body.viz .vz-quiz button {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--line, #c5ceda);
  background: var(--surface, #fff);
  padding: .35rem .75rem;
}
body.viz .vz-compare-picks button.on, body.viz .vz-quiz button.primary {
  background: var(--accent, #0e7490);
  color: #fff;
  border-color: transparent;
}
body.viz .vz-quiz { max-width: 40rem; }
body.viz .vz-quiz .opts { display: grid; gap: .45rem; margin: .8rem 0 1rem; }
body.viz .vz-quiz .nav { display: flex; gap: .5rem; }

@media (prefers-reduced-motion: reduce) {
  body.viz .vz-svg * { animation: none !important; }
}

body.viz .vz-make { max-width: 52rem; }
body.viz .vz-drop {
  display: grid;
  place-items: center;
  gap: .45rem;
  text-align: center;
  min-height: 11rem;
  padding: 1.4rem 1.1rem;
  margin: 0 0 1rem;
  cursor: pointer;
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--accent, #0e7490) 55%, var(--line, #c5ceda));
  background: color-mix(in srgb, var(--accent, #0e7490) 7%, var(--surface, #fff));
}
body.viz .vz-drop strong { font-size: 1.08rem; }
body.viz .vz-drop p { margin: 0; color: var(--vz-muted); max-width: 36rem; }
body.viz .vz-drop.on {
  border-style: solid;
  background: color-mix(in srgb, var(--accent, #0e7490) 14%, var(--surface, #fff));
}
body.viz .vz-make-status { min-height: 1.4rem; color: var(--vz-muted); }
body.viz .vz-sheets { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
body.viz .vz-sheets button {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--line, #c5ceda);
  background: var(--surface, #fff);
  padding: .35rem .75rem;
}
body.viz .vz-sheets button.on {
  background: var(--accent, #0e7490);
  color: #fff;
  border-color: transparent;
}
body.viz .vz-made figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-top: .55rem;
}
body.viz .vz-made figcaption button {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--line, #c5ceda);
  background: var(--surface, #fff);
  padding: .28rem .7rem;
}
body.viz .credit-table.vz-table { overflow-x: auto; display: block; }

body.viz .vz-lens {
  padding: 1.1rem 1.2rem;
  border-left: 4px solid var(--accent, #0e7490);
  background: color-mix(in srgb, var(--accent, #0e7490) 8%, transparent);
  border-radius: 0 12px 12px 0;
  margin: 1.2rem 0 1.6rem;
  max-width: 52em;
}
body.viz .vz-lens h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
body.viz .vz-lens p { margin: 0 0 .65rem; color: var(--vz-muted); }
body.viz .vz-lens p:last-child { margin-bottom: 0; }

body.viz .vz-make-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
body.viz .vz-make-actions .pill { font:inherit; cursor:pointer; border:0; }

body.viz .vz-oss{margin:1.2rem 0 1.6rem;padding:1rem 1.15rem;border:1px solid color-mix(in srgb,#059669 35%,var(--line,#c5ceda));border-radius:14px;background:color-mix(in srgb,#059669 8%,var(--surface,#fff));max-width:52em}
body.viz .vz-oss h2{margin:0 0 .35rem;font-size:1.05rem}
body.viz .vz-oss .sub{margin:0 0 .55rem;color:var(--vz-muted)}
body.viz .vz-lic{color:var(--vz-muted)}

/* —— Studio creator (/viz/{lang}/studio/) —— */
body.viz .tl-studio {
  --tl-space-1: .25rem;
  --tl-space-2: .5rem;
  --tl-space-3: .75rem;
  --tl-space-4: 1rem;
  --tl-space-5: 1.5rem;
  --tl-radius-sm: 8px;
  --tl-radius-md: 12px;
  --tl-radius-lg: 16px;
  --tl-elev-1: 0 1px 0 rgba(10, 22, 40, .04);
  --tl-elev-2: 0 8px 24px rgba(14, 116, 144, .10);
  --tl-accent: #0e7490;
  --tl-accent-2: #155e75;
  --tl-accent-soft: #0891b2;
  margin: 0 0 2rem;
}
body.viz .tl-studio-top {
  display: flex; flex-wrap: wrap; gap: var(--tl-space-3);
  align-items: center; justify-content: space-between;
  margin: 0 0 var(--tl-space-4);
}
body.viz .tl-studio-tabs {
  display: flex; flex-wrap: wrap; gap: var(--tl-space-2); margin: 0;
}
body.viz .tl-studio-tab {
  font: inherit; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--line, #c5ceda); background: var(--surface, #fff);
  padding: .55rem 1rem; min-height: 44px;
}
body.viz .tl-studio-tab:focus-visible,
body.viz .tl-studio-tool:focus-visible,
body.viz .tl-studio-export .pill:focus-visible,
body.viz .tl-studio-side .pill:focus-visible {
  outline: 2px solid var(--tl-accent); outline-offset: 2px;
}
body.viz .tl-studio-tab.on {
  background: var(--tl-accent); color: #fff; border-color: transparent;
}
body.viz .tl-studio-links { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
body.viz .tl-studio-link {
  font: inherit; font-size: .9rem; color: var(--tl-accent-2);
  text-decoration: none; border: 1px solid var(--line, #c5ceda);
  background: var(--surface, #fff); border-radius: 999px;
  padding: .45rem .85rem; min-height: 44px; display: inline-flex; align-items: center;
  cursor: pointer;
}
body.viz .tl-studio-layout {
  display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  gap: var(--tl-space-4); align-items: start;
}
@media (max-width: 860px) {
  body.viz .tl-studio-layout { grid-template-columns: 1fr; }
}
body.viz .tl-studio-side {
  display: grid; gap: var(--tl-space-3);
  padding: var(--tl-space-4);
  border: 1px solid var(--line, #c5ceda);
  border-radius: var(--tl-radius-lg);
  background: color-mix(in srgb, var(--tl-accent) 6%, var(--surface, #fff));
  box-shadow: var(--tl-elev-1);
}
body.viz .tl-studio-section {
  display: grid; gap: var(--tl-space-2);
  padding-top: var(--tl-space-3);
  border-top: 1px solid color-mix(in srgb, var(--tl-accent) 18%, var(--line, #c5ceda));
}
body.viz .tl-studio-sec-title { font-size: .85rem; color: var(--vz-muted); }
body.viz .tl-studio-tools { display: flex; flex-wrap: wrap; gap: .4rem; }
body.viz .tl-studio-tools .pill,
body.viz .tl-studio-export .pill,
body.viz .tl-studio-zoombar .pill {
  font: inherit; cursor: pointer; border: 1px solid var(--line, #c5ceda);
  background: var(--surface, #fff); min-height: 44px; padding: .45rem .85rem;
  border-radius: 999px;
}
body.viz .tl-studio-tools .pill.active,
body.viz .tl-studio-export .pill.active,
body.viz .tl-studio-zoombar .pill.on {
  background: var(--tl-accent); color: #fff; border-color: transparent;
}
body.viz .tl-studio-tool {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; cursor: pointer; min-height: 44px;
  border: 1px solid var(--line, #c5ceda); background: var(--surface, #fff);
  border-radius: var(--tl-radius-md); padding: .4rem .7rem; color: var(--vz-ink);
}
body.viz .tl-studio-tool svg { flex: 0 0 auto; color: var(--tl-accent); }
body.viz .tl-studio-tool:hover { border-color: var(--tl-accent-soft); }
body.viz .tl-studio-tpls {
  display: grid; grid-template-columns: 1fr 1fr; gap: .45rem;
}
body.viz .tl-studio-tpl {
  font: inherit; cursor: pointer; text-align: left;
  border: 1px solid var(--line, #c5ceda); background: var(--surface, #fff);
  border-radius: var(--tl-radius-md); padding: .65rem .75rem; min-height: 44px;
}
body.viz .tl-studio-tpl:hover { border-color: var(--tl-accent); box-shadow: var(--tl-elev-1); }
body.viz .tl-studio-field {
  display: grid; gap: .25rem; font-size: .9rem; color: var(--vz-muted);
}
body.viz .tl-studio-field.tl-studio-inline { min-width: 6rem; }
body.viz .tl-studio-row {
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: end;
}
body.viz .tl-studio-check {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .88rem; color: var(--vz-muted); min-height: 44px;
}
body.viz .tl-studio-field input[type="text"],
body.viz .tl-studio-field input[type="color"],
body.viz .tl-studio-field select,
body.viz .tl-studio-field textarea {
  font: inherit; padding: .5rem .6rem; border-radius: var(--tl-radius-sm);
  border: 1px solid var(--line, #c5ceda); background: #fff; width: 100%;
  box-sizing: border-box; min-height: 44px;
}
body.viz .tl-studio-field input[type="color"] { min-height: 2.6rem; padding: .2rem; }
body.viz .tl-studio-main { display: grid; gap: var(--tl-space-2); min-width: 0; }
body.viz .tl-studio-zoombar { display: flex; flex-wrap: wrap; gap: .35rem; }
body.viz .tl-studio-stage {
  margin: 0; padding: var(--tl-space-3);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #c5ceda);
  border-radius: var(--tl-radius-lg);
  box-shadow: var(--tl-elev-2);
  min-height: 12rem; overflow: auto;
}
body.viz .tl-studio.is-dark-canvas .tl-studio-stage {
  background: #0b1220; border-color: #1e293b;
}
body.viz .tl-studio-svg { width: 100%; height: auto; display: block; border-radius: 10px; }
body.viz .tl-studio-item { transition: opacity .15s ease; }
body.viz .tl-studio-item:hover { opacity: .92; filter: brightness(1.05); }
body.viz .tl-studio-statusbar {
  display: flex; flex-wrap: wrap; gap: .75rem;
  font-size: .82rem; color: var(--vz-muted); font-variant-numeric: tabular-nums;
  padding: 0 .15rem;
}
body.viz .tl-studio-status-msg { color: var(--tl-accent-2); font-weight: 600; }
body.viz .tl-studio-layers {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem;
  max-height: 9rem; overflow: auto;
}
body.viz .tl-studio-layer-btn {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid transparent; background: color-mix(in srgb, var(--tl-accent) 8%, #fff);
  border-radius: var(--tl-radius-sm); padding: .4rem .55rem; min-height: 40px;
}
body.viz .tl-studio-layer.on .tl-studio-layer-btn {
  border-color: var(--tl-accent); background: color-mix(in srgb, var(--tl-accent) 16%, #fff);
}
body.viz .tl-studio-tip { margin: 0; font-size: .88rem; color: var(--vz-muted); }
body.viz .tl-studio-limits { margin: .5rem 0 0; font-size: .82rem; }
body.viz .tl-studio-export {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  margin-top: var(--tl-space-4);
  padding: var(--tl-space-3);
  border: 1px solid var(--line, #c5ceda);
  border-radius: var(--tl-radius-lg);
  background: color-mix(in srgb, var(--tl-accent) 5%, var(--surface, #fff));
}
body.viz .tl-studio-copied {
  font-size: .85rem; color: var(--tl-accent); font-weight: 600;
}
body.viz .tl-studio-contrast { font-variant-numeric: tabular-nums; margin: 0; }
body.viz .tl-studio-hero-cta .pill.active { font-weight: 600; }
body.viz .tl-studio-toast {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  padding: .7rem 1rem; border-radius: var(--tl-radius-md);
  background: #0f172a; color: #fff; font-size: .9rem;
  box-shadow: var(--tl-elev-2); max-width: min(22rem, 90vw);
}
body.viz .tl-studio-toast.is-err { background: #9f1239; }
body.viz .tl-studio-modal {
  border: 0; border-radius: var(--tl-radius-lg); padding: 0;
  max-width: min(28rem, 92vw); box-shadow: var(--tl-elev-2);
}
body.viz .tl-studio-modal::backdrop { background: rgba(15, 23, 42, .45); }
body.viz .tl-studio-modal-inner { padding: 1.1rem 1.2rem; display: grid; gap: .75rem; }
body.viz .tl-studio-help-pre {
  margin: 0; white-space: pre-wrap; font: .88rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--vz-muted); background: color-mix(in srgb, var(--tl-accent) 6%, #fff);
  padding: .75rem; border-radius: var(--tl-radius-sm);
}
body.viz .vz-studio-gate {
  display: grid; gap: .75rem; margin: 0 0 1.5rem;
  padding: 1rem 1.15rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #0e7490) 40%, var(--line));
  background: color-mix(in srgb, var(--accent, #0e7490) 10%, var(--surface, #fff));
  max-width: 52em;
}
/* Studio route: near full-viewport editor; hub CTA stays large on hub only */
body.viz.vz-studio-page .vz-studio-hero {
  padding: .55rem 0 .35rem;
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}
body.viz.vz-studio-page .vz-studio-hero .lede,
body.viz.vz-studio-page .vz-studio-hero .hint,
body.viz.vz-studio-page .vz-studio-hero .kicker { display: none; }
body.viz.vz-studio-page .vz-studio-hero h1 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  margin: .15rem 0 .35rem;
  letter-spacing: -.02em;
}
body.viz.vz-studio-page .vz-studio-hero .crumbs { margin-bottom: .2rem; font-size: .82rem; }
body.viz.vz-studio-page .vz-studio-hero .vz-cta { margin: .35rem 0 0; }
body.viz.vz-studio-page .vz-studio-main { padding: 0 0 1rem; }
body.viz.vz-studio-page .vz-studio-wrap {
  max-width: none;
  width: 100%;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
body.viz.vz-studio-page .hero-compact { padding-bottom: .35rem; }
body.viz.vz-studio-page .hero-compact .lede { margin-bottom: 0; }
@media (max-width: 860px) {
  body.viz .tl-studio-export-sticky {
    position: sticky; bottom: 0; z-index: 20;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.viz .tl-studio-item { transition: none !important; }
  body.viz .tl-studio-toast { transition: none !important; }
}

body.viz mark { background: #fef08a; color: inherit; padding: 0 .05em; border-radius: 2px; }

/* P1 roadmap */
body.viz .p1-faq{margin:1.5rem 0}\n

/* ---- visual-diff (2026-09-16) ---- */
.vd-photo-strip,.vd-climate-bars,.vd-taste-street,.vd-letterform,.vd-dossier-rail,
.vd-anatomy-overlay,.vd-ashby-weight,.vd-scent-drama,.vd-planner-cal,.vd-chooser-cards{margin:1.25rem 0 1.75rem}
.vd-strip-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(9.5rem,14rem);gap:.65rem;overflow-x:auto;padding-bottom:.35rem;scroll-snap-type:x mandatory}
.vd-strip-tile{position:relative;display:block;min-height:9.5rem;border-radius:14px;background-size:cover;background-position:center;scroll-snap-align:start;overflow:hidden;color:#fff;text-decoration:none;box-shadow:0 2px 10px rgba(15,23,42,.12)}
.vd-strip-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(15,23,42,.78) 88%)}
.vd-strip-meta{position:absolute;left:.7rem;right:.7rem;bottom:.65rem;display:grid;gap:.15rem}
.vd-strip-meta b{font-size:.95rem}.vd-strip-meta i{font-style:normal;font-size:.78rem;opacity:.85}
.vd-clim-row{display:grid;grid-template-columns:minmax(5rem,8rem) 1fr;gap:.5rem;align-items:center;margin:.45rem 0}
.vd-clim-lab{font-size:.86rem;font-weight:650}
.vd-clim-track{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.25rem}
.vd-clim-cell{display:grid;place-items:center;min-height:2rem;border-radius:8px;color:#fff;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.vd-taste-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.75rem}
.vd-taste-card{display:grid;gap:.35rem;padding:.85rem;border-radius:14px;text-decoration:none;color:inherit;background:color-mix(in srgb,var(--vd-accent,#c2410c) 10%,#fff);border:1px solid color-mix(in srgb,var(--vd-accent,#c2410c) 22%,transparent)}
.vd-taste-radar{width:100%;max-width:7.5rem;margin:0 auto;color:var(--vd-accent,#c2410c)}
.vd-street-bar{display:block;height:.45rem;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--vd-accent,#c2410c) 14%,transparent)}
.vd-street-bar i{display:block;height:100%;border-radius:inherit}
.vd-taste-card em{font-style:normal;font-size:.8rem;color:var(--muted,#64748b)}
.vd-letter-rail{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .75rem;font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",Georgia,serif}
.vd-letter{display:grid;place-items:center;min-width:2.6rem;min-height:2.8rem;padding:.2rem .55rem;border-radius:12px;font-size:clamp(1.35rem,3vw,1.9rem);font-weight:800;letter-spacing:-.04em;color:#312e81;background:linear-gradient(160deg,#eef2ff,#c7d2fe 70%,#a5b4fc);transform:rotate(calc((var(--vd-i,0) - 4)*1.2deg));box-shadow:0 1px 0 rgba(49,46,129,.12)}
.vd-name-samples{display:flex;flex-wrap:wrap;gap:.4rem}
.vd-name-chip{padding:.3rem .65rem;border-radius:999px;font-size:.86rem;font-weight:650;background:#eef2ff;color:#3730a3}
.vd-dossier-frame{padding:1rem;border-radius:6px 14px 14px 6px;background:#f4efe6;border:1px solid #d6d3d1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.vd-dossier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.65rem}
.vd-dossier-card{position:relative;display:grid;gap:.3rem;align-content:end;min-height:8.5rem;padding:.85rem;border-radius:10px;text-decoration:none;color:#1c1917;background:#fffdf8;border:1px dashed color-mix(in srgb,var(--vd-accent,#475569) 35%,transparent)}
.vd-dossier-card.has-photo{color:#fff;background-image:linear-gradient(180deg,transparent 15%,#0f172ad9 78%),var(--vd-photo);background-size:cover;background-position:center;border-style:solid}
.vd-dossier-stamp{position:absolute;top:.45rem;right:.45rem;width:2.6rem;height:2.6rem;border:2px solid #b91c1c;border-radius:50%;color:#b91c1c;display:grid;place-content:center;font-size:.62rem;font-weight:800;transform:rotate(-14deg);background:rgba(255,255,255,.7)}
.vd-dossier-card.has-photo .vd-dossier-stamp{background:rgba(255,255,255,.15);color:#fecaca;border-color:#fecaca}
.vd-anat-fig{margin:0}.vd-anat-stage{position:relative;border-radius:16px;overflow:hidden}.vd-anat-stage img{display:block;width:100%;height:auto}
.vd-anat-marks{position:absolute;inset:0;pointer-events:none}
.vd-anat-mark{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:.2rem;color:#fff;text-align:center}
.vd-anat-mark b{width:1.55rem;height:1.55rem;border-radius:50%;display:grid;place-items:center;background:#0f766e;font-size:.78rem;box-shadow:0 0 0 3px rgba(15,118,110,.35)}
.vd-anat-mark i{font-style:normal;font-size:.72rem;max-width:6.5rem;padding:.15rem .35rem;border-radius:6px;background:rgba(15,23,42,.72)}
.vd-anat-list{margin:.75rem 0 0;padding-left:1.15rem}
.vd-ashby{width:100%;height:auto;display:block;color:#1e3a8a}.vd-ashby-bg{fill:#eff6ff}
.vd-scent-drama{margin:1rem 0 1.5rem}
.vd-scent-kicker{margin:0 0 .35rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;color:#f4d6c8}
.vd-scent-stage{position:relative;padding:1rem;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(196,92,122,.42),transparent 55%),radial-gradient(circle at 20% 80%,rgba(244,214,200,.18),transparent 45%);filter:drop-shadow(0 12px 28px rgba(196,92,122,.28))}
.vd-scent-stage .frg-wheel{transform:scale(1.04)}
.vd-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;max-width:36rem}
.vd-cal-day{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;font-size:.78rem;font-variant-numeric:tabular-nums;font-weight:650;background:color-mix(in srgb,#4f46e5 calc(var(--vd-i)*100%),#e2e8f0);color:color-mix(in srgb,#312e81 calc(var(--vd-i)*120%),#64748b)}
.vd-cal-day.on{color:#fff;box-shadow:inset 0 0 0 2px rgba(49,46,129,.25)}
.vd-chooser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));gap:.75rem;margin:0 0 1.25rem}
.vd-chooser-card{display:grid;gap:.4rem;padding:.9rem;border-radius:16px;text-decoration:none;color:inherit;background:#fff;border:1px solid color-mix(in srgb,var(--vd-accent,#0e7490) 22%,#c5ceda);box-shadow:0 2px 8px rgba(7,17,31,.05);transition:transform .15s ease,box-shadow .15s ease}
.vd-chooser-card:hover,.vd-chooser-card:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(14,116,144,.12)}
.vd-chooser-swatch,.vd-chooser-mini{display:block;height:4.2rem;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--vd-accent,#0e7490) 55%,#fff),transparent),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--vd-accent) 18%,transparent) 0 8px,transparent 8px 16px)}
.vd-chooser-use{font-size:.82rem;color:var(--muted,#475569)}.vd-chooser-avoid{font-size:.78rem;color:#be123c}
@media (prefers-reduced-motion:reduce){.vd-letter,.vd-chooser-card,.vd-scent-stage .frg-wheel{transition:none!important;transform:none!important}}


/* ---- hub polish (2026-09-17): Explore packs + chooser/form cards ---- */
body.viz {
  --ink: #0c1220;
  --ink2: #1a2332;
  --muted: #334155;
  --tl-muted: #334155;
}
body.viz .tl-viz-packs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 8px;
}
body.viz .tl-viz-pack {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; min-width: 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid #99f6e4; background: #fff; color: #07111f;
  font-size: .86rem; font-weight: 700; line-height: 1.3; text-decoration: none;
  text-wrap: balance; overflow-wrap: normal; word-break: keep-all;
  hyphens: none; -webkit-hyphens: none;
  box-shadow: 0 1px 2px rgba(7, 17, 31, .05);
}
body.viz .tl-viz-pack > span:not(.tl-preview-pop):not(.tl-dot) {
  flex: 1 1 auto; min-width: 0; text-wrap: balance; overflow-wrap: break-word; word-break: normal;
}
body.viz .tl-viz-pack:hover, body.viz .tl-viz-pack.is-on {
  border-color: color-mix(in srgb, var(--accent, #0e7490) 55%, #5eead4);
  background: #ecfeff; text-decoration: none;
}
body.viz .hint, body.viz .tl-viz-hint, body.viz .tl-viz-cap, body.viz .sub { color: #334155 !important; }
body.viz .vz-card {
  display: grid; gap: 0; padding: 0; overflow: hidden;
  border: 1px solid rgba(7, 17, 31, .1);
  border-top: 3px solid var(--card-accent, var(--accent, #0e7490));
  box-shadow: 0 2px 10px rgba(7, 17, 31, .07); background: #fff;
}
body.viz .vz-card .vz-mini {
  margin: 0; height: 7.6rem; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--card-accent, #0e7490) 18%, #c5ceda);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--card-accent, #0e7490) 16%, #fff), #ecfeff 70%, #fff);
}
body.viz .vz-card-inner { display: grid; gap: 6px; padding: 14px 16px 16px; }
body.viz .vz-card h3 {
  margin: 0; font-size: 1.05rem; font-weight: 780; color: #07111f;
  text-wrap: balance; overflow-wrap: break-word; word-break: keep-all;
}
body.viz .vz-card .sub { color: #334155 !important; }
body.viz .vd-chooser-card {
  border-color: color-mix(in srgb, var(--vd-accent, #0e7490) 30%, #94a3b8);
  box-shadow: 0 3px 12px rgba(14, 116, 144, .1);
  background: #fff;
}
body.viz .vd-chooser-swatch, body.viz .vd-chooser-mini { height: 4.8rem; }
body.viz .vd-chooser-topic {
  display: grid;
  gap: .4rem;
  color: inherit;
  text-decoration: none;
}
body.viz .vd-chooser-studio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: .15rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: #0f172a;
  color: #e0f2fe;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
body.viz .vd-chooser-studio:hover,
body.viz .vd-chooser-studio:focus-visible {
  background: #0369a1;
  color: #fff;
  outline: none;
}
@media (max-width: 720px) {
  body.viz .tl-viz-packs { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  body.viz .vz-card .vz-mini { height: 6.6rem; }
  body.viz:not(.vz-studio-page) main {
    padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px));
  }
  body.viz .tl-studio-export-sticky { max-width: 100%; }
}

/* Wave-2: hub card title wrap + studio props breathing room */
body.viz .vz-card h3,
body.viz .tl-viz-packs a {
  line-height: 1.3;
  overflow-wrap: anywhere;
}
body.viz.vz-studio-page .vz-props {
  gap: .65rem;
  padding-block: .35rem;
}