/* ChemDraw Skill landing page.
   The page is a ChemDraw document: white paper, the faint drawing grid, ACS 1996
   bond weights, CPK oxygen red only on atom labels, and ChemDraw's teal selection
   colour as the one accent. The memorable element is the vertical reaction scheme
   in "How it works"; everything around it stays quiet. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #16232a;
  --ink-2: #42545d;
  --mute: #66787f;
  --canvas: #ffffff;
  --sheet: #f2f5f6;
  --grid: #e3eaed;
  --rule: #cfdadf;
  --teal: #007c83;
  --teal-ink: #005c62;
  --teal-wash: #e2f1f1;
  --oxygen: #cf3a31;
  --nitrogen: #2a5bd7;
  --sulfur: #a77b00;
  --halogen: #2b9246;
  --bromine: #9b4a14;
  --plate: #ffffff;
  --code-bg: #16232a;
  --code-ink: #e6eef0;
  --code-mute: #8a9ea6;
  --code-line: #2c3d45;
  --code-var: #8fe0c8;
  --on-teal: #ffffff;

  --sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    Helvetica, Arial, sans-serif;
  --display: "Schibsted Grotesk", "Segoe UI Variable Display", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace;
  /* ChemDraw's own label face, used wherever the page imitates the drawing window */
  --chem: Arial, Helvetica, sans-serif;

  --measure: 36rem;
  --gutter: clamp(16px, 4vw, 40px);
  --wide: 1180px;
  color-scheme: light;
}

/* Dark follows the system unless the visitor chose a theme with the header button */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e7eef0;
    --ink-2: #b8c6cb;
    --mute: #8b9da4;
    --canvas: #0f191e;
    --sheet: #15222a;
    --grid: #1c2b32;
    --rule: #2a3c44;
    --teal: #3fb7bd;
    --teal-ink: #72d1d5;
    --teal-wash: #113539;
    --oxygen: #ff7a6e;
    --nitrogen: #7ea6ff;
    --sulfur: #e3bb45;
    --halogen: #5fd47d;
    --bromine: #e0955f;
    --plate: #ffffff;
    --code-bg: #0a1216;
    --code-ink: #dbe6e9;
    --code-mute: #7f949b;
    --code-line: #23343b;
    --on-teal: #062226;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e7eef0;
  --ink-2: #b8c6cb;
  --mute: #8b9da4;
  --canvas: #0f191e;
  --sheet: #15222a;
  --grid: #1c2b32;
  --rule: #2a3c44;
  --teal: #3fb7bd;
  --teal-ink: #72d1d5;
  --teal-wash: #113539;
  --oxygen: #ff7a6e;
  --nitrogen: #7ea6ff;
  --sulfur: #e3bb45;
  --halogen: #5fd47d;
  --bromine: #e0955f;
  --plate: #ffffff;
  --code-bg: #0a1216;
  --code-ink: #dbe6e9;
  --code-mute: #7f949b;
  --code-line: #23343b;
  --on-teal: #062226;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 1rem/1.7 var(--sans);
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
code, pre { font-family: var(--mono); }
:not(pre) > code {
  font-size: .88em;
  background: var(--sheet);
  border: 1px solid var(--grid);
  padding: .05em .35em;
  border-radius: 4px;
}
button { font: inherit; color: inherit; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; z-index: 10; background: var(--canvas); padding: 6px 10px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--grid);
}
.top .wrap { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand {
  display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font: 680 1.04rem/1 var(--display); letter-spacing: -.01em;
}
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; font-size: .94rem; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav .gh {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 13px;
}
.nav .gh svg { width: 17px; height: 17px; }
.theme {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--rule); border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer;
}
.theme:hover { color: var(--ink); border-color: var(--ink-2); }
.theme[hidden] { display: none; }
.theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme[data-mode="dark"] .moon, .theme[data-mode="light"] .sun { display: none; }
@media (max-width: 760px) { .nav .hide-sm { display: none; } .nav { gap: 14px; } }

/* Hero: the pitch on the left, a ChemDraw window on the right */
.hero {
  position: relative;
  padding: clamp(44px, 7vw, 88px) 0 clamp(52px, 7vw, 96px);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  border-bottom: 1px solid var(--grid);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--canvas) 30%, color-mix(in srgb, var(--canvas) 40%, transparent) 62%, transparent);
}
.hero .wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 940px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero::after { background: linear-gradient(var(--canvas) 45%, color-mix(in srgb, var(--canvas) 70%, transparent)); }
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.3rem, 4.9vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  font-weight: 760;
  margin: 0 0 22px;
  text-wrap: balance;
}
:lang(en) .hero h1 { font-size: clamp(2.2rem, 4.3vw, 3.45rem); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.18rem); color: var(--ink-2); max-width: 34rem; margin: 0 0 28px; }

.install {
  display: flex; align-items: stretch; max-width: 34rem;
  background: var(--code-bg); color: var(--code-ink);
  border: 1px solid var(--code-line); border-radius: 10px; overflow: hidden; font-size: .9rem;
}
.install code { flex: 1; padding: 13px 16px; overflow-x: auto; white-space: nowrap; background: none; border: 0; }
.install code::before { content: "$ "; color: var(--code-mute); }
.copy {
  font-family: var(--sans); font-size: .85rem;
  border: 0; border-left: 1px solid var(--code-line); background: transparent; color: var(--code-ink);
  padding: 0 16px; cursor: pointer; min-width: 4.5rem;
}
.copy:hover { background: color-mix(in srgb, var(--code-ink) 10%, transparent); }
.copy[data-done] { color: var(--code-var); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 8px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--rule); color: var(--ink); background: var(--canvas);
}
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn.primary:hover { background: var(--teal-ink); border-color: var(--teal-ink); }
.agents { margin: 24px 0 0; font-size: .9rem; color: var(--mute); max-width: 34rem; }
.agents b { color: var(--ink-2); font-weight: 600; }

/* The ChemDraw window: title bar, tool palette, drawing canvas, agent log */
.doc {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--grid), 0 28px 64px -32px rgb(22 35 42 / .4);
  overflow: hidden;
}
.doc-bar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 14px; font-size: .8rem; color: var(--mute);
  border-bottom: 1px solid var(--grid); background: var(--sheet);
}
.doc-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.doc-bar span { margin-left: 6px; }
.doc.live { grid-template-columns: 36px minmax(0, 1fr); }
.doc-tabs { display: flex; gap: 2px; margin-left: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.doc-tabs::-webkit-scrollbar { display: none; }
.doc-tabs[hidden] { display: none; }
.doc-tabs button {
  border: 0; background: none; color: var(--mute); font: inherit;
  padding: 3px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.doc-tabs button:hover { color: var(--ink); background: var(--canvas); }
.doc-tabs button[aria-selected="true"] { color: var(--ink); background: var(--canvas); box-shadow: 0 0 0 1px var(--rule); }
.doc-tabs button[aria-selected="true"]::after { content: ".cdxml"; color: var(--mute); }
.doc-tabs button[data-edited]::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: var(--teal); vertical-align: 1px;
}
.replay {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; background: none; color: var(--mute);
  font-size: .78rem; padding: 3px 9px; border-radius: 6px; cursor: pointer;
}
.replay:hover { color: var(--ink); border-color: var(--rule); background: var(--canvas); }
.replay svg { width: 13px; height: 13px; }
.replay[hidden] { display: none; }

.palette {
  margin: 0; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--sheet); border-right: 1px solid var(--grid);
}
.palette[hidden] { display: none; }
.palette button {
  width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 4px; background: none; color: var(--ink-2); cursor: pointer;
}
.palette button:hover:not(:disabled) { background: var(--grid); color: var(--ink); }
.palette button[aria-pressed="true"] {
  background: var(--teal-wash); color: var(--teal-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 45%, transparent);
}
.palette button:disabled { opacity: .35; cursor: default; }
.palette [data-undo] { margin-top: auto; }
.palette svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.palette .fill { fill: currentColor; stroke: none; }
.palette text { fill: currentColor; stroke: none; font: 700 13px var(--chem); }

.doc-canvas {
  position: relative; padding: 16px 16px 12px;
  background-image: radial-gradient(var(--rule) 1px, transparent 1.2px);
  background-size: 14px 14px;
}
.mol { width: 100%; max-width: 350px; margin: 0 auto; display: block; overflow: visible; user-select: none; -webkit-user-select: none; }
.mol .b { stroke: var(--ink); stroke-width: 2.1; stroke-linecap: round; fill: none; }
.mol .a { fill: var(--oxygen); font: 600 19px var(--chem); }
.mol .el-C { fill: var(--ink); }
.mol .el-N { fill: var(--nitrogen); }
.mol .el-S { fill: var(--sulfur); }
.mol .el-F, .mol .el-Cl { fill: var(--halogen); }
.mol .el-Br { fill: var(--bromine); }
.mol .sel { fill: none; stroke: var(--teal); stroke-width: 1.2; stroke-dasharray: 5 4; }
.mol .handle { fill: var(--canvas); stroke: var(--teal); stroke-width: 1.2; }
.mol .warn { fill: none; stroke: var(--oxygen); stroke-width: 1.4; stroke-dasharray: 3 3; }

/* What the editor clicks on: wide, invisible targets over every bond and atom */
.mol .hit { cursor: pointer; }
.mol .hit path { fill: none; stroke: transparent; stroke-width: 15; stroke-linecap: round; }
.mol .hit circle { fill: transparent; }
.doc.live .hit path:hover { stroke: color-mix(in srgb, var(--teal) 30%, transparent); }
.doc.live .hit circle:hover { fill: color-mix(in srgb, var(--teal) 24%, transparent); }
.doc[data-tool="move"] .hit path { pointer-events: none; }
.doc[data-tool="move"] .hit { cursor: grab; }
.doc[data-tool="move"] .mol { touch-action: none; }
.doc.dragging .hit, .doc.dragging .hit * { cursor: grabbing; }

/* A dot that snaps to the drawing grid under the pointer */
.snap {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; z-index: 1;
  border-radius: 50%; background: var(--teal); opacity: .5; pointer-events: none;
}
.snap[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .snap { transition: transform .06s linear; } }

.foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin-top: 2px; }
.side { flex: 1 1 12rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.status { margin: 0; min-height: 2.8em; font: .76rem/1.4 var(--sans); color: var(--mute); }
.status[data-state="warn"] { color: var(--oxygen); }
.reset {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: .76rem/1.4 var(--sans); color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px;
}
.reset[hidden] { display: none; }

/* ChemDraw's Analysis caption, as it lands on the page from Structure > Analysis */
.analysis {
  width: fit-content;
  font: 400 12px/1.45 var(--chem); color: var(--ink);
}
.analysis div { white-space: nowrap; }

.log {
  grid-column: 1 / -1;
  margin: 0; padding: 14px 18px 16px; list-style: none;
  font: .8rem/1.75 var(--mono); color: var(--ink-2);
  border-top: 1px solid var(--grid);
}
.log li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; }
.log .k { color: var(--teal-ink); }
.log .ok { color: var(--teal-ink); font-weight: 700; }
.log .no { color: var(--oxygen); font-weight: 700; }
.log .ask { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 3.6em; color: var(--ink); font-family: var(--sans); font-size: .9rem; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px dashed var(--grid); }

/* One orchestrated load sequence: bonds draw, labels and selection follow, the
   Analysis caption appears with the readback line. editor.js sets .play. */
@media (prefers-reduced-motion: no-preference) {
  .play .mol .b { stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw .32s ease-out forwards; animation-delay: calc(.5s + var(--i) * .11s); }
  .play .mol .a { opacity: 0; animation: show .3s ease-out forwards; animation-delay: calc(.5s + var(--i) * .11s); }
  .play .mol .selg { opacity: 0; animation: show .35s ease-out 2.25s forwards; }
  .play .analysis { opacity: 0; animation: show .35s ease-out 2.6s forwards; }
  .play .log li { opacity: 0; transform: translateY(3px); animation: line .3s ease-out forwards; animation-delay: calc(var(--t) * 1s); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes show { to { opacity: 1; } }
@keyframes line { to { opacity: 1; transform: none; } }

/* Sections */
section { padding: clamp(64px, 9vw, 112px) 0; }
section + section { border-top: 1px solid var(--grid); }
.head { max-width: var(--measure); margin-bottom: clamp(28px, 4vw, 44px); }
h2 {
  font-family: var(--display); font-weight: 720;
  font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.18; letter-spacing: -.022em;
  margin: 0 0 12px; text-wrap: balance;
}
h3 { font-size: 1.08rem; line-height: 1.4; margin: 0 0 6px; letter-spacing: -.005em; }
.head p { margin: 0; color: var(--ink-2); font-size: 1.06rem; }
.head p + p { margin-top: 12px; }

/* Before / after viewer: two comparisons behind tabs */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 18px; border-bottom: 1px solid var(--rule); }
.tabs button {
  border: 0; background: none; cursor: pointer;
  padding: 10px 14px 11px; margin-bottom: -1px;
  color: var(--mute); font-weight: 600; font-size: .98rem;
  border-bottom: 2px solid transparent;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--teal); }
.panel > p { margin: 0 0 18px; max-width: 46rem; color: var(--ink-2); }
.panel[hidden] { display: none; }
.panel.narrow .compare, .panel.narrow .compare-legend { max-width: 720px; }

.compare {
  position: relative; background: var(--plate);
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  touch-action: pan-y;
}
.compare img { width: 100%; }
.compare .after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut, 50%)); background: var(--plate); }
.compare .seam { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: var(--teal); transform: translateX(-1px); pointer-events: none; }
.compare .seam::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 4px rgb(255 255 255 / .9);
}
.compare input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.compare input:focus-visible + .seam { box-shadow: 0 0 0 3px var(--teal-wash); }
.compare-legend { display: flex; justify-content: space-between; gap: 16px; font-size: .88rem; color: var(--mute); margin-top: 10px; }
.compare-legend b { color: var(--ink); font-weight: 600; }

/* Gallery: two large plates, then four small ones, captioned like journal figures */
.works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin-top: clamp(56px, 7vw, 88px); }
.works figure { margin: 0; }
.works figure.lg { grid-column: span 2; }
.works .plate { background: var(--plate); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.works figcaption { margin-top: 12px; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.works figcaption b { color: var(--ink); font-weight: 650; }
.works figure.lg figcaption { font-size: .96rem; max-width: 34rem; }
@media (max-width: 900px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .works { grid-template-columns: minmax(0, 1fr); }
  .works figure.lg { grid-column: auto; }
}

/* How it works: a vertical reaction scheme. Each step is a reaction arrow with
   the tool written beside it, as reagents are, leading to the file it produces. */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.how .head { position: sticky; top: 96px; }
@media (max-width: 900px) { .how { grid-template-columns: minmax(0, 1fr); } .how .head { position: static; } }

.scheme { margin: 0; min-width: 0; }
.scheme ol { list-style: none; margin: 0; padding: 0; }
.cpd {
  display: inline-block; max-width: 100%;
  margin: 0; padding: 9px 14px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--canvas);
  font-size: .92rem; overflow-wrap: anywhere;
}
.cpd code { font-size: .86rem; background: none; border: 0; padding: 0; }
.cpd.src { font-weight: 600; }
.cpd.end { border-color: var(--teal); background: var(--teal-wash); color: var(--teal-ink); font-weight: 600; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(20px, 4vw, 48px);
}
.step > .cpd { grid-column: 1 / -1; justify-self: start; }
.rxn {
  position: relative; min-height: 112px;
  padding: 16px 0 22px 64px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  font-size: .84rem; color: var(--ink-2); line-height: 1.45;
}
/* The arrow: a thin shaft and ChemDraw's notched, filled head */
.rxn::before {
  content: ""; position: absolute; left: 30px; top: 8px; bottom: 14px;
  border-left: 1.6px solid var(--ink);
}
.rxn::after {
  content: ""; position: absolute; left: 25px; bottom: 6px; width: 12px; height: 14px;
  background: var(--ink); clip-path: polygon(0 0, 50% 28%, 100% 0, 50% 100%);
}
.rxn code { font-size: .82rem; background: none; border: 0; padding: 0; color: var(--teal-ink); font-weight: 600; }
.why { align-self: center; padding: 14px 0; }
.why h3 { margin-bottom: 4px; }
.why p { margin: 0; color: var(--ink-2); font-size: .96rem; max-width: 30rem; }
.leg { display: contents; }
@media (max-width: 600px) {
  .step { grid-template-columns: minmax(0, 1fr); }
  /* On phones the arrow spans the tool and the explanation together */
  .leg { display: block; position: relative; padding: 14px 0 28px 52px; }
  .leg::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 14px; border-left: 1.6px solid var(--ink); }
  .leg::after { content: ""; position: absolute; left: 17px; bottom: 6px; width: 12px; height: 14px; background: var(--ink); clip-path: polygon(0 0, 50% 28%, 100% 0, 50% 100%); }
  .rxn { min-height: 0; padding: 0; }
  .rxn::before, .rxn::after { display: none; }
  .why { padding: 10px 0 0; }
}

/* Each step can show the command it ran and what came back */
.cmd { margin-top: 10px; }
.cmd summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  font-size: .86rem; color: var(--teal-ink);
}
.cmd summary::-webkit-details-marker { display: none; }
.cmd summary::before {
  content: ""; width: 6px; height: 6px; margin-right: 1px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg);
  transition: transform .15s;
}
.cmd[open] summary::before { transform: rotate(45deg); }
.cmd pre {
  margin: 8px 0 0; padding: 12px 14px; overflow-x: auto;
  background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-line); border-radius: 8px;
  font-size: .76rem; line-height: 1.65;
}
.cmd .run { color: var(--code-var); }
.cmd .out { display: block; margin-top: 4px; color: var(--code-mute); }

/* Scroll in: each reaction arrow draws, then the compound it leads to appears.
   Only when scripts run (app.js sets .reveal) and motion is welcome; otherwise it is all just there. */
@media (prefers-reduced-motion: no-preference) {
  .reveal .step .rxn::before, .reveal .step .leg::before { transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
  .reveal .step .rxn::after, .reveal .step .leg::after { opacity: 0; transition: opacity .2s .6s; }
  .reveal .step .rxn > *, .reveal .step .why { opacity: 0; transition: opacity .5s .25s; }
  .reveal .step > .cpd { opacity: 0; transform: translateY(6px); transition: opacity .45s .7s, transform .45s .7s; }
  .reveal .step.in .rxn::before, .reveal .step.in .leg::before { transform: none; }
  .reveal .step.in .rxn::after, .reveal .step.in .leg::after { opacity: 1; }
  .reveal .step.in .rxn > *, .reveal .step.in .why { opacity: 1; }
  .reveal .step.in > .cpd { opacity: 1; transform: none; }
}

/* Capabilities: a definition list, read like a reference table */
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0; }
.caps div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--grid); }
.caps dt { font-weight: 650; }
.caps dd { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 900px) { .caps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .caps div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Calculator: text on the left, a screenshot of the page on the right (the layout of .how) */
.head ul { margin: 18px 0 0; padding-left: 1.1rem; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.head li + li { margin-top: 8px; }
.calc-shot { margin: 0; }
.calc-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 8px; background: var(--plate); }
/* One screenshot per colour scheme; the one that does not apply is not displayed, so it is not fetched either */
.calc-shot .dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .calc-shot .light { display: none; }
  :root:not([data-theme="light"]) .calc-shot .dark { display: block; }
}
:root[data-theme="dark"] .calc-shot .light { display: none; }
:root[data-theme="dark"] .calc-shot .dark { display: block; }
.calc-shot figcaption { margin-top: 12px; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }

/* Quick start */
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .start { grid-template-columns: minmax(0, 1fr); } }
.start ol { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.start ol > li { counter-increment: q; margin-bottom: 26px; }
.start ol > li > h3::before { content: counter(q) ". "; color: var(--teal-ink); }
.start p { margin: 0 0 10px; color: var(--ink-2); font-size: .95rem; }

.choose { display: grid; gap: 14px; margin: 0 0 28px; padding: 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); }
.choose[hidden] { display: none; }
.choose fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choose legend { padding: 0; margin-bottom: 8px; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: inline-block; padding: 5px 12px; font-size: .88rem; line-height: 1.4;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--canvas); color: var(--ink-2);
}
.seg label:hover span { border-color: var(--ink-2); color: var(--ink); }
.seg input:checked + span { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.seg input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }

.code {
  position: relative; margin: 0; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-line);
  border-radius: 10px; padding: 16px 84px 16px 18px; font-size: .84rem; line-height: 1.7;
  overflow-x: auto;
}
.code .copy { position: absolute; top: 8px; right: 8px; border: 1px solid var(--code-line); border-radius: 6px; padding: 4px 10px; min-width: 0; }
.code [data-var] { color: var(--code-var); }
.say {
  border-left: 3px solid var(--teal); background: var(--teal-wash);
  padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 0;
}
.start .say { color: var(--ink); font-size: 1rem; }
.note { font-size: .9rem; color: var(--mute); margin-top: 14px; }

/* FAQ */
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--grid); }
.faq details:last-child { border-bottom: 1px solid var(--grid); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-weight: 600; font-size: 1.04rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { margin: 0 0 20px; color: var(--ink-2); max-width: var(--measure); }

/* Footer */
footer { border-top: 1px solid var(--grid); background: var(--sheet); padding: 40px 0 48px; font-size: .88rem; color: var(--mute); }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
footer p { margin: 0 0 6px; max-width: 46rem; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 700px) { footer .wrap { grid-template-columns: minmax(0, 1fr); } }

.brand, .nav a { white-space: nowrap; }
@media (max-width: 520px) {
  .top .wrap { gap: 12px; }
  .nav { gap: 12px; font-size: .88rem; }
  .nav .gh { padding: 4px 10px; }
  .nav a[href="#start"] { display: none; }
  .doc.live { grid-template-columns: 30px minmax(0, 1fr); }
  .palette button { width: 22px; height: 22px; }
  .palette svg { width: 15px; height: 15px; }
  .doc-canvas { padding: 12px 10px 10px; }
  .analysis { font-size: 10.5px; }
  .status { min-height: 4.2em; }
  .log { padding-inline: 14px; font-size: .74rem; }
  .log li { grid-template-columns: 5.4rem minmax(0, 1fr); gap: 6px; }
  .log li span { overflow-wrap: anywhere; }
}