/* Temporary hashrate joins the client flow while the physical route waits. */
@media (max-width: 900px) {
  .instant-page .subpage-hero-streams { opacity: 1; }
}

.instant-intro { max-width: 800px; margin-bottom: clamp(24px, 3vw, 36px); color: var(--muted); font-size: 16px; line-height: 1.85; }
.instant-intro p { margin: 0; }
.instant-intro p + p { margin-top: 20px; }
.instant-intro .instant-intro-result { color: var(--text); font-size: clamp(20px, 2vw, 24px); line-height: 1.4; }
.instant-intro-result strong { font-weight: 700; }
.instant-design-title { margin: 0 0 36px; font: 600 clamp(26px, 2.5vw, 32px)/1.3 var(--font-display); letter-spacing: -.03em; }
.instant-diagram { display: grid; grid-template-columns: minmax(280px, 1.6fr) 205px minmax(110px, .5fr) minmax(220px, 1fr); align-items: center; max-width: 1020px; margin: 0 auto; padding: 18px 0 24px; }
.instant-supply { position: relative; height: 290px; }
.instant-temporary { position: absolute; top: 0; left: 0; }
.instant-temporary h3 { margin: 0 0 7px; color: var(--text); font: 500 18px/1.4 var(--font-display); letter-spacing: -.02em; }
.instant-temporary p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.instant-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.instant-paths path { stroke-linecap: round; vector-effect: non-scaling-stroke; }
.instant-live-path { stroke: #4d9fe8; stroke-width: 1.8; }
.instant-live-path-deep { stroke: #025995; }
.instant-pending-path { stroke: #b8cbd9; stroke-width: 1.3; stroke-dasharray: 5 7; }
.instant-paths-mobile { display: none; }
.instant-arrival { position: absolute; top: 210px; left: 18.0556%; width: 42px; height: 46px; transform: translate(-50%, -50%); }
.instant-arrival > img { display: block; width: 42px; height: 46px; object-fit: contain; }
.instant-arrival > div { position: absolute; top: 52px; left: 50%; width: 150px; transform: translateX(-50%); text-align: center; }
.instant-arrival strong { display: block; font-size: 14px; font-weight: 500; color: var(--muted); }
.instant-arrival span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.instant-routing { padding: 0 10px; transform: translateY(5px); }
.instant-routing img { display: block; width: 100%; height: auto; }
.instant-routing .instant-logo-white { display: none; }
[data-theme="dark"] .instant-routing .instant-logo-color { display: none; }
[data-theme="dark"] .instant-routing .instant-logo-white { display: block; }
.instant-worker-connection { position: relative; height: 1px; margin: 10px 20px 0 10px; background: #4d9fe8; }
.instant-worker { padding: 20px 16px; border: 1px solid rgba(77,159,232,.28); border-radius: 12px; background: var(--panel); text-align: center; transform: translateY(5px); }
.instant-eyebrow { display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.instant-worker-icon { display: block; margin: 14px auto 12px; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.instant-active { display: flex; align-items: center; justify-content: center; gap: 8px; color: #168365; font: 500 19px/1.4 var(--font-display); letter-spacing: -.02em; }
.instant-active svg { flex-shrink: 0; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.instant-worker p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 1000px) and (min-width: 761px) {
  .instant-diagram { grid-template-columns: minmax(200px, 1.4fr) 155px 96px minmax(190px, 1fr); }
  .instant-worker { padding: 20px 12px; }
  .instant-worker-connection { margin-right: 10px; }
  .instant-active { font-size: 17px; }
}
@media (max-width: 760px) {
  .instant-diagram { grid-template-columns: 1fr; max-width: 360px; padding-top: 4px; }
  .instant-supply { height: 270px; }
  .instant-paths-desktop { display: none; }
  .instant-paths-mobile { display: block; }
  .instant-temporary { top: 0; }
  .instant-temporary h3 { font-size: 17px; }
  .instant-arrival { top: 145px; left: 80.5556%; right: auto; }
  .instant-arrival > div { top: 8px; left: auto; right: 52px; width: 115px; transform: none; text-align: right; }
  .instant-arrival span { max-width: 140px; font-size: 11px; }
  .instant-routing { width: 185px; padding: 14px 0; margin: 0 auto; transform: none; }
  .instant-worker-connection { width: 1px; height: 40px; margin: 0 auto; }
  .instant-worker { width: 100%; max-width: 250px; justify-self: center; transform: none; padding: 20px 16px; }
  .instant-worker-icon { margin: 14px auto 12px; }
}

/* One source hands over to the other; the worker flow never pauses. */
.instant-live-path { transition: stroke 1.8s ease; }
.instant-shared-path { stroke: #4d9fe8; stroke-width: 1.8; }
.instant-miner-live { stroke: #4d9fe8; stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.7s ease, opacity 1.2s ease; opacity: 0; }
.instant-pending-path, .instant-arrival > svg { transition: opacity 1.5s ease, stroke 1.5s ease; }
.instant-particle { stroke: #4d9fe8; stroke-width: 2.7; stroke-dasharray: .012 .23; animation: instant-particles .8228s linear infinite; }
.instant-particle-shared { animation-name: instant-shared-particles; animation-duration: .8228s; }
@keyframes instant-shared-particles { from { stroke-dashoffset: var(--instant-shared-start); } to { stroke-dashoffset: var(--instant-shared-end); } }
.instant-particle-miner { opacity: 0; }
.instant-diagram[data-phase="arriving"] .instant-live-path,
.instant-diagram[data-phase="physical"] .instant-live-path { stroke: #c1ced8; }
.instant-diagram[data-phase="arriving"] .instant-miner-live,
.instant-diagram[data-phase="physical"] .instant-miner-live { stroke-dashoffset: 0; opacity: 1; }
.instant-diagram[data-phase="arriving"] .instant-pending-path,
.instant-diagram[data-phase="physical"] .instant-pending-path { opacity: 0; }
.instant-diagram[data-phase="arriving"] .instant-arrival > svg,
.instant-diagram[data-phase="physical"] .instant-arrival > svg { stroke: var(--accent); }
.instant-diagram:not([data-phase="temporary"]) .instant-particle-temporary { opacity: 0; }
.instant-diagram[data-phase="physical"] .instant-particle-miner { opacity: 1; }
/* Continue the incoming particle rhythm through to the client worker. */
.instant-output-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.instant-output-particles { stroke: #4d9fe8; stroke-width: 2.7; stroke-linecap: round; animation: instant-output .8228s linear infinite; }
.instant-diagram.is-paused .instant-particle,
.instant-diagram.is-paused .instant-output-particles { animation-play-state: paused; }
@keyframes instant-particles { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -.242; } }
@keyframes instant-output { to { stroke-dashoffset: var(--instant-output-period); } }
@media (prefers-reduced-motion: reduce) {
  .instant-diagram .instant-particle, .instant-output-particles { display: none; }
  .instant-diagram path, .instant-arrival > svg { transition: none; }
}
/* Normalized path lengths must follow the SVG coordinate system when resized. */
.instant-paths .instant-miner-live, .instant-paths .instant-particle { vector-effect: none; }

.instant-paths .instant-miner-mask { vector-effect: none; stroke-linecap: butt; }
.instant-particle-second { animation-delay: -.5s; }
.instant-arrival { transition: none; animation: none; }
.instant-diagram.is-resetting .instant-live-path,
.instant-diagram.is-resetting .instant-miner-live,
.instant-diagram.is-resetting .instant-pending-path,
.instant-diagram.is-resetting .instant-arrival > svg { transition: none; }

/* Keep two highlight streams through either source and the shared output. */
.instant-output-secondary { animation-delay: -.5s; }