/* A drawn world around a real, working little piece of software. */
:root {
  --bg:#111317; --surface:#1a1e25; --surface-2:#252c36;
  --ink:#f6f7fb; --muted:#adb5c3; --line:#38424f;
  --accent:#88b9ff; --accent-solid:#347ced; --accent-soft:#1d304a;
  --mint:#8de3bd; --coral:#ff8d80; --yellow:#ffd76b;
  --header:rgba(17,19,23,.9);
}
:root[data-theme=light] {
  --bg:#fff; --surface:#f2f6fb; --surface-2:#e6eef7;
  --ink:#172433; --muted:#56677b; --line:#c6d3e1;
  --accent:#2863b5; --accent-solid:#296bda; --accent-soft:#e9f2ff;
  --mint:#237d63; --coral:#bc514d; --yellow:#93690c;
  --header:rgba(255,255,255,.9);
}
.software-world:before { content:none; }
.story-copy[data-story-copy="1"] h2 { font-size:clamp(58px,6.7vw,120px); }
.story-copy[data-story-copy="2"] h2 { font-size:clamp(48px,5.3vw,100px); line-height:1.07; }
.story-copy[data-story-copy="3"] h2 { font-size:clamp(52px,5.9vw,108px); }
.story-chapter { color:var(--coral); }
.story-copy[data-story-copy="2"] .story-chapter { color:var(--mint); }
.story-copy[data-story-copy="3"] .story-chapter { color:var(--yellow); }
.story-copy .idea-form button { box-shadow:none; }
.story-copy .idea-form { border-color:color-mix(in srgb,var(--muted),transparent 20%); }
.story-cta:hover { box-shadow:3px 3px 0 var(--accent-soft); }
.story-detail-list li { color:var(--muted); }
.story-detail-list li+li::before { content:"·"; display:inline-block; margin-right:14px; color:var(--accent); }
.story-detail-list { gap:8px 14px; }

/* The same ink and colored fills continue through the service drawings. */
.capability-art {
  --bg:#eef5ff; --surface:#fff; --surface-2:#dceaff;
  --ink:#26384b; --line:#91a7bf; --muted:#5b7088;
  --accent:#377fda; --accent-soft:#d9eaff; --mint:#268b6c;
  border:1.5px solid #58728f; border-radius:18px 15px 20px 14px;
  box-shadow:5px 6px 0 #253952;
}
[data-theme=light] .capability-art { box-shadow:5px 6px 0 #d5e5fa; }
.world-example { border:0; border-radius:0; }
.world-example>div {
  --line:#7a8fa8; --muted:#b1bdd0; --ink:#e9f1fd;
  --accent:#78b1ff; --accent-soft:#203752; --mint:#8de3bd;
}
.world-example:nth-child(2)>div { --accent:#8de3bd; --accent-soft:#203c37; --mint:#78b1ff; }
.world-example:nth-child(3)>div { --accent:#ff9b8f; --accent-soft:#422c30; --mint:#ffd76b; }
[data-theme=light] .world-example>div { --line:#95abc3; --muted:#5b7088; --ink:#26384b; --accent:#377fda; --accent-soft:#e3efff; --mint:#268b6c; }
[data-theme=light] .world-example:nth-child(2)>div { --accent:#268b6c; --accent-soft:#e2f5ed; --mint:#377fda; }
[data-theme=light] .world-example:nth-child(3)>div { --accent:#bb6153; --accent-soft:#fff0eb; --mint:#937120; }
.world-heading .handnote { color:var(--mint); }
.connections {
  --bg:#edf4ff; --surface:#fff; --surface-2:#e0ecfc;
  --ink:#20334a; --muted:#526781; --line:#c3d4e8;
  --accent:#346cbb; --accent-solid:#296bda; --accent-soft:#deebff; --mint:#268b6c;
  background:var(--bg);
}
.connections .system-core { background:#dbeaff; border:1.5px solid #45617f; box-shadow:4px 5px 0 #aac4e5; }
.system-wires path[data-wire=inventory] { stroke:#3ca580; }
.system-wires path[data-wire=crm] { stroke:#d77e66; }
.system-wires path[data-wire=messaging] { stroke:#bd973e; }
.node-inventory .node-glyph { color:#268b6c; }
.node-crm .node-glyph { color:#bb6153; }
.node-messaging .node-glyph { color:#937120; }
.engineering-item:nth-child(3n+2) { --accent:var(--mint); }
.engineering-item:nth-child(3n+3) { --accent:var(--coral); }
.speed-number .handnote { color:var(--coral); }
.start-heading>.handnote { color:var(--mint); }

@media(max-height:800px) and (min-width:761px) {
  .story-copy[data-story-copy="1"] h2 { font-size:clamp(56px,6.3vw,90px); }
  .story-copy[data-story-copy="2"] h2 { font-size:clamp(45px,5.1vw,77px); }
}
@media(max-width:760px) {
  .story-copy[data-story-copy="1"] h2 { font-size:clamp(43px,10vw,70px); }
  .story-copy[data-story-copy="2"] h2 { font-size:clamp(34px,8.3vw,58px); }
  .story-copy[data-story-copy="3"] h2 { font-size:clamp(37px,8.7vw,61px); }
  .story-detail-list { gap:6px 12px; }
  .story-detail-list li+li::before { content:none; }
  .capability-art { box-shadow:3px 4px 0 #253952; }
}