/* ==========================================================================
   MADAREK GULF — design system
   Written fresh for Gulf. It shares an attitude with the Almutgadmah site (dark, precise, restrained)
   but not its stylesheet. Logical properties throughout, so Arabic can be added without a rewrite.
   ========================================================================== */

:root {
  /* Surfaces: matte black into gunmetal. Neutral, not blue-black, which sets Gulf apart from Almutgadmah. */
  --bg: #08090a;
  --bg-raise: #0e1011;
  --gunmetal: #16191b;
  --gunmetal-2: #1e2225;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f2f3f1;
  --text-2: #a2a7a4;
  --text-3: #7d8380;                          /* was #666c69: the small labels were hard to read, so they are a shade brighter as well as larger */

  /* Accent. One green, used sparingly: the primary action, the active state, the measuring line. */
  --accent: #3de07a;                           /* electric green, chosen by Waqas */
  --accent-ink: #03150a;                       /* text on the accent */
  --accent-soft: rgba(61, 224, 122, 0.14);

  /* The drawing */
  --ink: rgba(208, 219, 213, 0.46);
  --ink-thin: rgba(208, 219, 213, 0.24);
  --ink-faint: rgba(208, 219, 213, 0.11);

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --wrap: 1440px;                              /* was 1320: the page edge moved 60px left on wide screens, at Waqas's request */
  --gutter: clamp(20px, 3.2vw, 48px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height: 100vh; overflow-x: hidden; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.g-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Navigation ---------- */
.g-nav { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 20; padding-block: 22px; }
.g-nav-in { display: flex; align-items: center; gap: 18px; }
.g-back {
  position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%;
  color: var(--text-2); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
  transition: color .25s ease, border-color .25s ease, transform .4s var(--ease);
}
/* a glowing green accent arc riding the ring, rotating on hover */
.g-back::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 150deg, transparent 0 55%, color-mix(in srgb, var(--accent) 35%, transparent) 63%, var(--accent) 78%, transparent 90%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 55%, transparent));
  opacity: .85; transition: transform .6s var(--ease), opacity .3s ease;
}
.g-back:hover { color: var(--text); border-color: var(--line-strong); transform: translateX(-2px); }
.g-back:hover::before { transform: rotate(130deg); opacity: 1; }
[dir='rtl'] .g-back svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .g-back:hover::before { transform: none; } }
.g-logo { flex: none; }
.g-logo img { height: 46px; width: auto; }
.g-links { display: flex; gap: 4px; margin-inline-start: auto; }
.g-links a { padding: 9px 14px; font-size: 0.97rem; font-weight: 500; color: var(--text-2); border-radius: 8px; transition: color .2s ease, background .2s ease; }
.g-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.g-nav-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: 10px; }

/* ---------- Buttons: solid and square-shouldered, not pills. A different hand from Almutgadmah. ---------- */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px; border-radius: 10px; border: 1px solid transparent;
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: transform .35s var(--ease), background .25s ease, border-color .25s ease, color .25s ease;
}
.g-btn svg { transition: transform .4s var(--ease); }
.g-btn:hover svg { transform: translateX(3px); }
[dir='rtl'] .g-btn svg { transform: scaleX(-1); }
.g-btn-sm { padding: 10px 16px; font-size: 0.92rem; border-radius: 8px; }
.g-btn-primary { background: var(--accent); color: var(--accent-ink); }
.g-btn-primary:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 88%, #fff); }
.g-btn-ghost { color: var(--text); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.02); }
.g-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.05); }

/* ---------- Hero ---------- */
.g-hero {
  position: relative; isolation: isolate; min-height: max(100svh, 760px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: 132px 0;
  background:
    radial-gradient(70% 55% at 78% 42%, rgba(255, 255, 255, 0.035), transparent 70%),
    linear-gradient(180deg, #0a0c0d 0%, var(--bg) 60%);
}
/* technical grid: 8mm and 40mm, like drafting film */
.g-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--ink-faint) 1px, transparent 1px), linear-gradient(90deg, var(--ink-faint) 1px, transparent 1px),
    linear-gradient(rgba(208, 219, 213, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(208, 219, 213, 0.045) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  -webkit-mask-image: radial-gradient(95% 80% at 72% 48%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  mask-image: radial-gradient(95% 80% at 72% 48%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  opacity: 0; animation: gFade 1.6s ease .15s forwards;
}

/* drawing-sheet border with zone references */
.g-sheet { position: absolute; inset: 96px 18px 18px; z-index: -1; pointer-events: none; border: 1px solid var(--line); opacity: 0; animation: gFade 1.4s ease .5s forwards; }
.g-sheet-x, .g-sheet-y { position: absolute; display: flex; font-family: var(--mono); font-size: 0.66rem; color: var(--text-3); letter-spacing: 0.1em; }
.g-sheet-x { inset-inline: 0; inset-block-end: 100%; padding-block-end: 5px; }
.g-sheet-x span { flex: 1; text-align: center; border-inline-start: 1px solid var(--line); }
.g-sheet-x span:first-child { border-inline-start: 0; }
.g-sheet-y { inset-block: 0; inset-inline-start: -14px; flex-direction: column; }
.g-sheet-y span { flex: 1; display: grid; place-items: center; }

.g-hero-in { --copy: 640px; --gap: clamp(24px, 3vw, 56px); display: grid; grid-template-columns: minmax(0, var(--copy)) minmax(0, 1fr); align-items: center; gap: var(--gap); flex: 1; }

.g-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.86rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.g-eyebrow i { width: 28px; height: 1px; background: var(--accent); }

.g-h1 {
  margin-block-start: 26px;
  font-size: clamp(2.45rem, 3.45vw, 3.85rem); line-height: 1.04; letter-spacing: -0.04em;
  font-weight: 620; font-stretch: 110%; text-wrap: balance;
}
.g-h1 em { font-style: normal; color: var(--text-2); }
.g-lead { margin-block-start: 26px; max-width: 46ch; font-size: clamp(1rem, 1.08vw, 1.14rem); line-height: 1.65; color: var(--text-2); }
.g-cta { margin-block-start: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.g-standards { margin-block-start: 44px; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.18em; color: var(--text-3); }
.g-standards b { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }

/* copy enters once, quietly */
.g-eyebrow, .g-h1, .g-lead, .g-cta, .g-standards { opacity: 0; transform: translateY(14px); animation: gRise .9s var(--ease) forwards; }
.g-eyebrow { animation-delay: .35s; } .g-h1 { animation-delay: .45s; } .g-lead { animation-delay: .58s; } .g-cta { animation-delay: .7s; } .g-standards { animation-delay: .82s; }
.g-nav { opacity: 0; animation: gFade .9s ease .2s forwards; }
@keyframes gRise { to { opacity: 1; transform: none; } }
@keyframes gFade { to { opacity: 1; } }

/* ---------- The drawing ---------- */
/* It runs from the copy column out to the edge of the screen, so it grows with the display */
.g-drawing {
  --side: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  position: relative; justify-self: start;
  /* the space kept clear at the right edge grows with the screen, so the drawing moves left with the text instead of stretching */
  width: min(1220px, calc(100vw - var(--side) - var(--copy) - var(--gap) - clamp(44px, 4.5vw, 104px)));
}
.g-drawing-svg svg { width: 100%; height: auto; overflow: visible; }
.dw { fill: none; stroke: var(--ink); stroke-width: 0.26; stroke-linecap: round; stroke-linejoin: round; }
.dw .thin { stroke: var(--ink-thin); stroke-width: 0.13; }
.dw .hid { stroke: var(--ink-thin); stroke-width: 0.13; stroke-dasharray: 1.1 0.7; }
.dw .ctr { stroke: var(--ink-thin); stroke-width: 0.12; stroke-dasharray: 5 1 1 1; }
.dw .mask { fill: #0a0b0c; }                                   /* parts in front hide the thread behind them */
.dw .hatch { stroke: var(--ink-faint); stroke-width: 0.1; }
.dw .dim { stroke: color-mix(in srgb, var(--accent) 62%, transparent); stroke-width: 0.11; }
.dw .arrow { fill: color-mix(in srgb, var(--accent) 80%, transparent); stroke: none; }
.dw text { font-family: var(--mono); font-size: 2.15px; letter-spacing: 0.06em; fill: color-mix(in srgb, var(--accent) 78%, #cfd8d3); stroke: none; }
.dw text.note { fill: var(--text-3); font-size: 1.9px; letter-spacing: 0.12em; }
.dw text.title { fill: var(--text-2); font-size: 2.3px; letter-spacing: 0.14em; }
.dw .hit { fill: transparent; stroke: none; pointer-events: all; cursor: crosshair; }
/* Only the parts listen to the pointer. The measuring line sits right under the cursor, so if it could be hit it would steal every hover. */
.dw .tracker, .dw .dims, .dw .late, .dw .ctr, .dw text { pointer-events: none; }

.dw .part { transition: stroke .35s ease, opacity .35s ease; }
.dw .part .thin, .dw .part .hid { transition: stroke .35s ease; }
.dw.has-active .part:not(.is-active) { opacity: 0.4; }
.dw .part.is-active { stroke: var(--accent); }
.dw .part.is-active .thin, .dw .part.is-active .hid { stroke: color-mix(in srgb, var(--accent) 60%, transparent); }

/* reveal: outlines are drawn, fine detail and dimensions follow */
.dw .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gDraw 1.9s cubic-bezier(.45, 0, .15, 1) .7s forwards; }
.dw .late { opacity: 0; animation: gFade 1.1s ease 1.9s forwards; }
.dw .dims { opacity: 0; animation: gFade 1s ease 2.5s forwards; }
/* the solid occluder fills (bolt head, washer, nut) reveal WITH the linework, not before it —
   scoped to the home hero (#gulfDrawing) so the fabrication/CP .mask faces are untouched.
   fill-opacity animates the fill only, so each part's outline still draws in via .draw */
#gulfDrawing .mask { fill-opacity: 0; animation: gDraw 1.9s cubic-bezier(.45, 0, .15, 1) .7s forwards, gMaskFill 1.1s ease 1.9s forwards; }
@keyframes gDraw { to { stroke-dashoffset: 0; } }
@keyframes gMaskFill { to { fill-opacity: 1; } }

/* the measuring line */
.dw .track { stroke: var(--accent); stroke-width: 0.16; opacity: 0; transition: opacity .3s ease; }
.dw .track-on .track, .dw .track-on .track-label { opacity: 1; }
.dw .track-label { opacity: 0; transition: opacity .3s ease; fill: var(--accent); font-size: 2.3px; }

/* The readout lives in the flow under the drawing, pulled up into the empty band left of the title block.
   In the flow it can only ever push downwards, so it can never cover the ruler, whatever the screen size. */
.g-readout {
  position: relative; width: 55%; max-width: 460px; min-height: 140px; margin-block: -10% -16px;
  padding-inline-start: 14px; border-inline-start: 1px solid var(--accent);
  opacity: 0; animation: gFade 1s ease 2.7s forwards;
}
.g-readout-k { display: block; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.g-readout-v { display: block; margin-block: 2px 7px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; font-stretch: 105%; }
.g-readout-l > div { display: grid; grid-template-columns: 2.6em 1fr auto; column-gap: 10px; align-items: baseline; padding-block: 3px; border-block-start: 1px solid var(--line); font-size: 0.84rem; line-height: 1.35; }
.g-readout-l dt { font-family: var(--mono); color: var(--accent); }
.g-readout-l dd { color: var(--text-2); }
.g-readout-l dd.val { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.g-readout-l dt:empty { display: none; }
.g-readout-l dt:empty + dd { grid-column: 1 / span 2; }
.g-readout-l dd.val:empty { display: none; }

/* ---------- Category index: an editorial table of contents, not three glowing cards ---------- */
/* the third description is the longest, so its column is a little wider and all three stay on one line */
.g-index { list-style: none; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.25fr); border-block-start: 1px solid var(--line); margin-block-start: clamp(28px, 4vh, 56px); opacity: 0; animation: gFade 1s ease 1.1s forwards; }
.g-index li + li { border-inline-start: 1px solid var(--line); }
.g-index a { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 6px; padding: 26px clamp(14px, 1.6vw, 28px) 30px; transition: background .3s ease; }
.g-index li:first-child a { padding-inline-start: 0; }
.g-index a:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent); }
.g-index .n { grid-row: span 2; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--accent); padding-block-start: 7px; }
.g-index .t { font-size: clamp(1.1rem, 1.45vw, 1.3rem); font-weight: 600; letter-spacing: -0.015em; font-stretch: 106%; }
.g-index .d { font-size: clamp(0.88rem, 1.08vw, 0.98rem); color: var(--text-3); transition: color .3s ease; }
.g-index a:hover .d { color: var(--text-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .g-links { display: none; }
  .g-nav-actions { margin-inline-start: auto; }
}
/* shorter screens: claw back a little height so the three categories stay in view */
@media (min-width: 1041px) and (max-height: 880px) {
  .g-hero { padding-block-start: 112px; }
}
@media (max-width: 1320px) {
  .g-readout { width: auto; max-width: 520px; margin-block: 6px -16px; }
}
@media (max-width: 1040px) {
  .g-hero { padding-block-start: 112px; }
  .g-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .g-drawing { width: 100%; max-width: 760px; }
  .g-sheet { inset: 84px 10px 10px; }
  .g-sheet-y { display: none; }
}
@media (max-width: 720px) {
  .g-nav { padding-block: 16px; }
  .g-logo img { height: 30px; }
  .g-h1 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .g-btn { padding: 14px 20px; flex: 1 1 auto; }
  .g-index { grid-template-columns: 1fr; }
  .g-index li + li { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .g-index a, .g-index li:first-child a { padding: 18px 0 20px; }
  .g-index .t { font-size: 1.14rem; }   /* the long category names stay on one line on a phone */
  .g-index .d { font-size: 0.9rem; }
  .g-sheet-x { display: none; }
  .g-standards { flex-wrap: wrap; row-gap: 8px; margin-block-start: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .dw .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ---------- Arrival from the split entry page: the veil lifts, the header is already in place ---------- */
html.arriving::after {
  content: ''; position: fixed; inset: 0; z-index: 999; background: var(--bg); pointer-events: none;
  animation: gArrive 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both;
}
html.arriving .g-nav { animation: none; opacity: 1; }          /* the logo the visitor just watched glide is already here */
@keyframes gArrive { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.arriving::after { display: none; } }

/* ---------- Sheets 2 and 3: the fabrication and CP drawings, one screen each, after the hero ---------- */
.g-screen { min-height: max(100svh, 720px); padding-block: 88px 56px; justify-content: center; border-block-start: 1px solid var(--line); }
.g-screen .g-sheet { inset: 40px 18px 22px; }
.g-screen .g-h1 { font-size: clamp(2.15rem, 3vw, 3.35rem); }
.g-screen--cp .g-eyebrow i, .g-screen--cp .g-readout { border-color: var(--amber-cp, #e0a23c); background-color: transparent; }
.g-screen--cp .g-eyebrow i { background: var(--amber-cp, #e0a23c); }
.dw .amber { fill: var(--amber-cp, #e0a23c); stroke: none; }

/* drawing on the left, words on the right */
.g-hero--flip .g-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, var(--copy)); }
.g-hero--flip .g-hero-copy { order: 2; }
.g-hero--flip .g-drawing { order: 1; justify-self: end; }

/* these screens are below the fold: the words fade in and the drawing draws itself when the screen arrives (site.js adds .in) */
.g-screen .g-eyebrow, .g-screen .g-h1, .g-screen .g-lead, .g-screen .g-cta, .g-screen .g-standards { animation: none; opacity: 1; transform: none; }
.g-screen .g-sheet, .g-screen::before { animation: none; opacity: 1; }
.g-screen .dw .draw, .g-screen .dw .late, .g-screen .dw .dims, .g-screen .g-readout { animation-play-state: paused; }
.g-screen .g-drawing.in .dw .draw, .g-screen .g-drawing.in .dw .late, .g-screen .g-drawing.in .dw .dims, .g-screen .g-drawing.in .g-readout { animation-play-state: running; }
.g-screen .dw .draw { animation-delay: .15s; } .g-screen .dw .late { animation-delay: 1.5s; } .g-screen .dw .dims { animation-delay: 2s; } .g-screen .g-readout { animation-delay: 2.2s; }

@media (max-width: 1040px) {
  .g-hero--flip .g-hero-in { grid-template-columns: 1fr; }
  .g-hero--flip .g-hero-copy { order: 1; }
  .g-hero--flip .g-drawing { order: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .g-screen .dw .draw, .g-screen .dw .late, .g-screen .dw .dims, .g-screen .g-readout { animation-play-state: running; }
}

/* ---------- Sheet 2 (fabrication, the part being made) and sheet 3 (CP, the ground cut open) ---------- */
/* fabrication: solid faces so the object reads as a solid; the faces take a zinc tint when galvanized (--zinc 0..1) */
.dw-fab { --zinc: 0; }
.dw-fab .face { fill: color-mix(in srgb, rgba(190, 206, 214, 0.28) calc(var(--zinc) * 100%), #0a0b0c); transition: fill .4s ease; }
.dw-fab .hole { fill: #0a0b0c; stroke: var(--ink); stroke-width: 0.22; }
.dw-fab .cutline { fill: none; stroke: var(--accent); stroke-width: 0.34; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dw-fab .spark { fill: #fff; stroke: none; filter: drop-shadow(0 0 1.2px var(--accent)) drop-shadow(0 0 2.4px var(--accent)); }
.dw-fab .bead { fill: none; stroke: var(--accent); stroke-width: 0.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.dw-fab .mk { fill: transparent; stroke: var(--line-strong); stroke-width: 0.18; transition: stroke .3s ease, fill .3s ease; }
.dw-fab .mkn { fill: var(--text-3); font-size: 1.9px; }
.dw-fab .mkl { fill: var(--text-2); font-size: 2.05px; letter-spacing: 0.1em; }
.dw-fab .part.is-done .mk { stroke: color-mix(in srgb, var(--accent) 55%, transparent); }
.dw-fab .part.is-done .mkl { fill: var(--text); }
.dw-fab .part.is-active .mk { stroke: var(--accent); fill: var(--accent-soft); }
.dw-fab .part.is-active .mkl, .dw-fab .part.is-active .mkn { fill: var(--accent); }
.dw-fab.has-active .part:not(.is-active) { opacity: 0.7; }
.dw-fab .dot { fill: var(--accent); stroke: none; }
.dw-fab .hid { stroke: var(--ink); stroke-width: 0.2; stroke-dasharray: 1 0.7; }
/* the dimension lines fade in with the finished part, driven from script — not on the generic 2.5s timer */
.dw-fab #fabDims { animation: none; }
/* the stage markers sit on the right; on a phone the sheet is cropped to the object */
@media (max-width: 720px) { .dw-fab .part[data-part^='s'], .dw-fab .dot { display: none; } }

/* toggle between the two worked examples: tucked into the empty band under the drawing, with the readout below it (not over it) */
.fab-toggle { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 3; margin: clamp(-118px, -9%, -56px) 0 14px; padding-inline-start: 2px; }
#fab-screen .g-readout { margin-top: 0; }
.fab-toggle button {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--text-3); cursor: pointer; transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.fab-toggle button:hover { color: var(--text); border-color: var(--line-strong); }
.fab-toggle button[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }

/* CP: the soil, the anodes, and the current that flows once the screen has arrived */
.dw-cp .soil { fill: url(#cSoil); stroke: none; }
.dw-cp .soilhatch { stroke: rgba(208, 219, 213, 0.07); stroke-width: 0.12; }
.dw-cp .amber { fill: var(--amber-cp, #e0a23c); stroke: none; }
.dw-cp .amberline { fill: none; stroke: var(--amber-cp, #e0a23c); stroke-width: 0.26; }
.dw-cp text.amb { fill: var(--amber-cp, #e0a23c); }
.dw-cp .flow { fill: none; stroke: var(--accent); stroke-width: 0.22; stroke-dasharray: 1.1 1.3; opacity: 0; transition: opacity .8s ease; }
.dw-cp.is-live .flow { opacity: 0.85; animation: gFlow 1.3s linear infinite; }
.dw-cp.is-live .flow.slow { animation-duration: 1.9s; }
.dw-cp .hitline { fill: none; stroke: transparent; stroke-width: 3; pointer-events: stroke; }
.dw-cp .part.is-active .flow { stroke-width: 0.3; opacity: 1; }
@keyframes gFlow { to { stroke-dashoffset: -2.4; } }
@media (prefers-reduced-motion: reduce) { .dw-cp.is-live .flow { animation: none; } }