/* Task workbench and Skill catalogue. The chrome uses shared theme tokens. */
.vp-skill-story {
  --story-paper: var(--surface, #fff);
  --story-pane: var(--soft, #edf3f8);
  --story-ink: var(--ink, #17283e);
  --story-muted: var(--muted, #4e6075);
  --story-line: var(--line, #d8e1ec);
  --story-accent: var(--blue, #126b81);
  --story-accent-soft: var(--v-accent-soft, var(--success-soft, #e5f3ef));
  --story-code: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  color: var(--story-ink); font-size: 18px; line-height: 1.65;
}
.vp-skill-story *, .vp-skill-story *::before, .vp-skill-story *::after {box-sizing:border-box}
.vp-skill-story :is(h1,h2,h3,p,figure,dl) {margin:0}
.vp-skill-story :is(h1,h2,h3) {color:var(--story-ink);font-family:inherit;font-weight:650;letter-spacing:-.025em}
.vp-skill-story a {color:inherit;text-decoration:none}
.vp-skill-story :is(a,button,summary,[tabindex]):focus-visible {outline:3px solid var(--story-accent);outline-offset:4px}
.vp-skill-story [hidden] {display:none!important}
.vp-story-workspace {display:grid;grid-template-columns:260px minmax(0,1fr);overflow:clip;border:1px solid var(--story-line);border-radius:18px;background:var(--story-paper);box-shadow:0 20px 65px #071a3010}
.vp-story-sidebar {min-width:0;padding:30px 18px;border-right:1px solid var(--story-line);background:var(--story-pane)}
.vp-story-brand {display:flex;align-items:center;gap:12px;padding:0 12px;font-size:22px;font-weight:650;letter-spacing:-.03em}
.vp-story-brand>span {display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--story-line);border-radius:9px;color:var(--story-accent);font:600 16px/1 var(--story-code);background:var(--story-paper)}
.vp-story-sidebar-label {margin:32px 12px 14px!important;color:var(--story-muted);font-size:17px}
.vp-story-tabs {display:grid;gap:7px}
.vp-story-tab {position:relative;display:flex;align-items:center;gap:11px;min-height:58px;padding:12px;border:1px solid transparent;border-radius:9px;color:var(--story-muted)!important;font-size:18px;font-weight:550;line-height:1.5;transition:background-color .2s,color .2s,border-color .2s}
.vp-story-tab:hover {background:var(--story-paper);color:var(--story-ink)!important}
.vp-story-tab[aria-selected=true] {background:var(--story-paper);color:var(--story-ink)!important;border-color:var(--story-line)}
.vp-story-tab[aria-selected=true]::before {content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--story-accent)}
.vp-story-tab-symbol {display:inline-flex;justify-content:center;width:24px;flex:0 0 24px;color:var(--story-accent);font-size:23px;line-height:1}
.vp-story-tab-arrow {margin-left:auto;color:var(--story-accent);opacity:0}
.vp-story-tab[aria-selected=true] .vp-story-tab-arrow {opacity:1}
.vp-story-other-link {display:flex;align-items:center;gap:12px;min-height:56px;margin-top:24px;padding:15px 12px;border-top:1px solid var(--story-line);font-size:18px;color:var(--story-muted)!important}
.vp-story-other-link>span:last-child {margin-left:auto;color:var(--story-accent)}
.vp-story-other-link:hover {color:var(--story-accent)!important}
.vp-story-main {min-width:0}
.vp-story-topline {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;min-height:68px;padding:18px 36px;border-bottom:1px solid var(--story-line)}
.vp-story-topline strong {font:550 17px/1.4 var(--story-code);letter-spacing:-.025em}
.vp-story-topline>span {font-size:16px;color:var(--story-muted)}
.vp-story-panel {padding:30px 36px;scroll-margin-top:130px;min-height:570px}
.vp-story-panel+.vp-story-panel {border-top:1px solid var(--story-line)}
.vp-story-request {width:fit-content;max-width:90%;margin-left:auto;margin-bottom:25px;padding:16px 22px;border:1px solid var(--story-line);border-radius:14px 14px 4px 14px;background:var(--story-pane)}
.vp-story-request>span {display:block;margin-bottom:5px;font-size:16px;color:var(--story-muted)}
.vp-story-request p {font-size:20px;line-height:1.5}
.vp-story-panel h3 {margin:0 0 10px;font-size:clamp(32px,2.6vw,42px);line-height:1.3}
.vp-story-panel header>p {max-width:740px;color:var(--story-muted);font-size:20px}
.vp-story-preparation {display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:24px 0 20px;color:var(--story-muted);font-size:17px}
.vp-story-tags {display:flex;flex-wrap:wrap;align-items:start;gap:8px}
.vp-story-tag {display:inline-flex;padding:6px 11px;border:1px solid var(--story-line);border-radius:6px;background:var(--story-paper);color:var(--story-muted);font-size:16px;line-height:1.5}
.vp-story-result {display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-block:20px}
.vp-story-result-with-preview {grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
.vp-story-result-preview {position:relative;min-width:0;overflow:hidden;border:1px solid var(--story-line);border-radius:10px;background:#fff}
.vp-story-result-preview img {display:block;width:100%;height:220px;object-fit:contain;padding:12px}
.vp-story-result-preview figcaption {padding:8px 12px;border-top:1px solid #e4e9ef;font-size:15px;color:#536171;background:#fff}
.vp-story-result-files {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vp-story-result-with-preview .vp-story-result-files {grid-template-columns:minmax(0,1fr)}
.vp-story-result-label {grid-column:1/-1;color:var(--story-muted);font-size:17px}
.vp-story-output-file {display:flex;align-items:center;gap:18px;min-height:90px;padding:20px;border:1px solid var(--story-line);border-radius:10px;background:var(--story-pane)}
.vp-story-output-file svg {width:28px;height:35px;flex:0 0 28px;fill:none;stroke:var(--story-accent);stroke-width:1.5;stroke-linejoin:round}
.vp-story-output-file strong {font-size:19px;font-weight:550;line-height:1.45}
.vp-story-dependency {margin-top:18px!important;padding-left:14px;border-left:2px solid var(--story-accent);color:var(--story-muted);font-size:17px}
.vp-story-dependency a {color:var(--story-accent);text-decoration:underline;text-underline-offset:3px}
.vp-story-actions {display:flex;flex-wrap:wrap;align-items:center;gap:8px 25px;margin-top:25px}
.vp-story-link {display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--story-accent)!important;font-size:18px;font-weight:550;line-height:1.5}
.vp-story-link:hover {text-decoration:underline;text-underline-offset:5px}
.vp-story-link-primary {padding:12px 18px;border:1px solid var(--story-line);border-radius:8px;background:var(--story-accent-soft);color:var(--story-ink)!important}
.vp-story-workspace-note {padding:17px 36px;border-top:1px solid var(--story-line);color:var(--story-muted);font-size:16px}
.vp-story-workspace-note a {color:var(--story-accent);min-height:30px;display:inline-flex;align-items:center}
/* Overview: factual descriptions, inputs, outputs and matching downloads. */
.vp-story-container {width:min(calc(100% - 72px),1180px);margin-inline:auto}
.vp-story-intro {padding:60px 0 24px}
.vp-story-intro h1 {margin-bottom:20px;font-size:clamp(38px,4vw,56px);line-height:1.2}
.vp-story-intro p {max-width:850px;color:var(--story-muted);font-size:19px}
.vp-story-intro .vp-story-intro-lead {margin-bottom:8px;font-size:22px}
.vp-story-jump {display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:30px;padding-block:20px;border-block:1px solid var(--story-line)}
.vp-story-jump>a {display:inline-flex;align-items:center;min-height:44px;color:var(--story-accent);font-size:18px}
.vp-story-jump>a:hover {text-decoration:underline;text-underline-offset:4px}
.vp-story-card-list {padding-bottom:65px}
.vp-story-card {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:45px;padding-block:44px;border-bottom:1px solid var(--story-line);scroll-margin-top:145px}
.vp-story-card h2 {margin:8px 0 14px;font-size:clamp(28px,3vw,36px);line-height:1.3}
.vp-story-eyebrow {color:var(--story-muted);font-size:17px}
.vp-story-card-copy>.vp-story-lead {color:var(--story-ink);font-size:20px}
.vp-story-io {display:grid;gap:14px;margin-top:25px!important}
.vp-story-io>div {display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;padding-top:15px;border-top:1px solid var(--story-line)}
.vp-story-io dt {font-size:17px;color:var(--story-muted)}
.vp-story-io dd {margin:0;font-size:18px;color:var(--story-muted);line-height:1.6}
.vp-story-resources {display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:9px}
.vp-story-diagram {display:grid;grid-template-columns:minmax(0,.8fr) 24px minmax(0,1fr);gap:14px;align-items:stretch}
.vp-story-source,.vp-story-artifact {display:flex;min-width:0;flex-direction:column;gap:18px;padding:22px;border:1px solid var(--story-line);border-radius:12px;background:var(--story-pane)}
.vp-story-artifact {background:var(--story-paper)}
.vp-story-diagram-label {font-size:17px;font-weight:550}
.vp-story-files {position:relative;width:110px;min-height:110px;align-self:center;margin:10px 0}
.vp-story-files>span {position:absolute;width:72px;height:89px;border:1px solid var(--story-line);border-radius:5px;background:var(--story-paper)}
.vp-story-files>span::after {content:"";position:absolute;left:13px;right:13px;top:24px;height:25px;border-block:2px solid var(--story-line)}
.vp-story-files>span:nth-child(1) {left:1px;top:11px;transform:rotate(-9deg)}
.vp-story-files>span:nth-child(2) {left:26px;top:10px;transform:rotate(7deg)}
.vp-story-files>span:nth-child(3) {left:17px;top:0;border-top:3px solid var(--story-accent)}
.vp-story-transfer {display:grid;place-items:center;color:var(--story-accent);font-size:25px}
.vp-story-artifact svg {display:block;align-self:center;width:100%;max-width:320px;height:auto;min-height:108px}
.vp-story-diagram .vp-story-tags {margin-top:auto}
.vp-story-grid,.vp-story-axis {stroke:var(--story-line);stroke-width:1;fill:none}
.vp-story-frame {stroke:var(--story-muted);stroke-width:1.6;fill:none}
.vp-story-curve {stroke:var(--story-accent);stroke-width:3;fill:none}
.vp-story-curve-alt {stroke:var(--teal);fill:none}
.vp-story-page {fill:var(--story-paper);stroke:var(--story-line);stroke-width:1.5}
.vp-story-page-back,.vp-story-table-head {fill:var(--story-pane)}
.vp-story-letter {fill:var(--story-muted);font:600 12px/1 var(--story-code)}
.vp-story-table-mark {stroke:var(--story-line);stroke-width:5;stroke-linecap:round}
.vp-story-ink-line {stroke:var(--story-muted);stroke-width:4;fill:none;stroke-linecap:round}
.vp-story-source-mark {fill:var(--story-accent-soft);stroke:var(--story-accent);stroke-width:1}
.vp-story-connector,.vp-story-edit {fill:none;stroke:var(--story-accent);stroke-width:2}
.vp-story-diagram figcaption {grid-column:1/-1;color:var(--story-muted);font-size:16px}
.vp-story-secondary-section {display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:35px;padding-block:45px;border-bottom:1px solid var(--story-line);scroll-margin-top:145px}
.vp-story-secondary-section h2 {font-size:32px;line-height:1.3;margin-bottom:12px}
.vp-story-secondary-section p {font-size:18px;color:var(--story-muted)}
.vp-story-secondary-section nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.vp-story-secondary-section nav>a {display:flex;align-items:center;min-height:58px;padding:13px 0;border-bottom:1px solid var(--story-line);font-size:18px;color:var(--story-muted)}
.vp-story-secondary-section nav>a:hover {color:var(--story-accent);text-decoration:underline;text-underline-offset:4px}
.vp-story-next {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:25px;margin-top:40px}
.vp-story-next h2 {font-size:30px;margin-bottom:10px}
.vp-story-next p {color:var(--story-muted);font-size:18px}
@media(max-width:1000px) {
  .vp-story-workspace {grid-template-columns:235px minmax(0,1fr)}
  .vp-story-panel,.vp-story-topline {padding-inline:26px}
  .vp-story-result-with-preview {grid-template-columns:1fr}
  .vp-story-result-with-preview .vp-story-result-files {grid-template-columns:repeat(2,minmax(0,1fr))}
  .vp-story-card {grid-template-columns:1fr;gap:30px}
  .vp-story-card .vp-story-diagram {max-width:680px}
}
@media(max-width:760px) {
  .vp-story-workspace {grid-template-columns:1fr;border-radius:14px}
  .vp-story-sidebar {padding:22px;border-right:0;border-bottom:1px solid var(--story-line)}
  .vp-story-brand {padding:0;font-size:22px}
  .vp-story-sidebar-label {margin:18px 0 12px!important;font-size:17px}
  .vp-story-tabs {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .vp-story-tab {min-height:72px;padding:12px 10px;gap:8px;font-size:17px}
  .vp-story-tab-symbol {flex-basis:20px;width:20px;font-size:21px}
  .vp-story-tab-arrow {display:none}
  .vp-story-other-link {margin-top:15px;min-height:52px;font-size:18px}
  .vp-story-topline {padding:17px 22px;gap:8px}
  .vp-story-topline>span {font-size:16px}
  .vp-story-panel {padding:24px 22px;min-height:0}
  .vp-story-request {max-width:100%;padding:16px 18px;margin-bottom:25px}
  .vp-story-request p,.vp-story-panel header>p {font-size:18px}
  .vp-story-panel h3 {font-size:30px}
  .vp-story-preparation {gap:10px;margin-top:20px}
  .vp-story-result,.vp-story-result-with-preview {grid-template-columns:1fr}
  .vp-story-result-files,.vp-story-result-with-preview .vp-story-result-files {grid-template-columns:1fr}
  .vp-story-output-file {min-height:76px;padding:18px}
  .vp-story-output-file strong {font-size:19px}
  .vp-story-workspace-note {padding:17px 22px}
  .vp-story-actions {gap:12px 20px}
  .vp-story-link {font-size:17px}
  .vp-story-container {width:calc(100% - 44px)}
  .vp-story-intro {padding-top:38px}
  .vp-story-intro .vp-story-intro-lead {font-size:20px}
  .vp-story-jump {gap:7px 22px;padding-block:15px;margin-top:25px}
  .vp-story-card {padding-block:35px}
  .vp-story-card-copy>.vp-story-lead {font-size:19px}
  .vp-story-io>div {grid-template-columns:1fr;gap:6px}
  .vp-story-diagram {grid-template-columns:1fr;gap:12px}
  .vp-story-source {display:grid;grid-template-columns:minmax(0,1fr) 95px;align-items:center}
  .vp-story-source .vp-story-files {grid-column:2;grid-row:1/3;transform:scale(.8);transform-origin:center}
  .vp-story-transfer {transform:rotate(90deg);height:25px}
  .vp-story-secondary-section {grid-template-columns:1fr;gap:24px}
  .vp-story-secondary-section nav {grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce) {.vp-skill-story * {transition:none!important;scroll-behavior:auto!important}}
html[data-reduced-motion=true] .vp-skill-story * {transition:none!important;scroll-behavior:auto!important}

/* Overview: short task cards lead into the existing Skill detail anchors. */
.vp-story-overview .vp-story-intro {padding:44px 0 30px}
.vp-story-overview .vp-story-intro h1 {font-size:clamp(32px,3.2vw,44px);line-height:1.35;max-width:920px}
.vp-story-overview .vp-story-intro-lead {margin-top:14px!important;font-size:21px}
.vp-story-overview .vp-story-intro .vp-story-actions {margin-top:21px}
.vp-story-compact-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:18px 0 38px}
.vp-story-task-card {display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--story-line);border-radius:13px;background:var(--story-paper);scroll-margin-top:110px;transition:border-color .18s ease,box-shadow .18s ease}
.vp-story-task-art {height:140px;display:flex;align-items:center;justify-content:center;background:var(--story-pane);border-bottom:1px solid var(--story-line);padding:15px 28px}
.vp-story-task-art svg {width:215px;height:114px;display:block}
.vp-story-task-art img {height:116px;width:100%;object-fit:contain;display:block}
.vp-story-task-copy {padding:24px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.vp-story-task-copy h2 {font-size:23px;line-height:1.45;letter-spacing:-.025em}
.vp-story-task-copy p {font-size:18px;line-height:1.75;color:var(--story-muted);margin:12px 0 18px!important;flex:1}
.vp-story-task-output {font-size:15px;line-height:1.7;color:var(--story-muted);padding-top:15px;border-top:1px solid var(--story-line);width:100%}
.vp-story-task-cta {display:flex;gap:18px;align-items:center;justify-content:space-between;font-size:17px;color:var(--story-accent);font-weight:600;padding-top:20px;width:100%}
.vp-story-mechanism-ion {fill:var(--story-accent);stroke:none}
.vp-story-mechanism-ligand {fill:var(--story-paper);stroke:var(--story-accent);stroke-width:2}
.vp-story-task-art .vp-story-mechanism-ion~.vp-story-letter {fill:#fff}
.vp-story-overview .vp-story-secondary-section {padding-top:30px;margin-top:0;border-top:1px solid var(--story-line)}
.vp-story-overview .vp-story-secondary-section nav {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px}
.vp-story-overview .vp-story-secondary-section nav a {padding:11px 0;font-size:17px;line-height:1.6;min-height:48px}
@media(hover:hover) {.vp-story-task-card:hover {border-color:var(--story-accent);box-shadow:0 13px 32px #071a3010}.vp-story-task-card:hover .vp-story-task-cta {text-decoration:underline;text-underline-offset:5px}}
@media(max-width:1080px) {.vp-story-compact-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.vp-story-overview .vp-story-secondary-section {grid-template-columns:1fr}.vp-story-overview .vp-story-secondary-section nav {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px) {.vp-story-compact-grid {grid-template-columns:1fr;gap:20px}.vp-story-task-copy {padding:22px}.vp-story-task-art {height:124px}.vp-story-overview .vp-story-secondary-section nav {grid-template-columns:1fr}.vp-story-overview .vp-story-intro {padding:30px 0 22px}}