/* Shamir's Secret Sharing — the threshold scheme, made visible. The secret is the
   value of a polynomial at x = 0. With a threshold of three, the secret is hidden on
   a degree-2 curve (a parabola) and each share is one point on it. Any three points
   pin down a unique parabola, so three shares reconstruct the secret -- but with two
   or fewer, an infinite family of parabolas fits and the secret could be anything.
   Fewer than the threshold reveals nothing; the threshold reveals everything. That
   clean all-or-nothing boundary, from nothing but polynomial interpolation, is
   Shamir's 1979 scheme. Vanilla JS + inline SVG, no deps, no build.
   Palette shared with siblings: cyan = a collected share, green = the recovered
   secret / unique curve (the win), dim = an uncollected share or ambiguous guess.
   No red. */

#secret-sharing {
  --ss-share: #5ac8fa;
  --ss-secret: #30d158;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.ss-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.ss-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.ss-plot { width: 100%; height: auto; display: block; background: #0c0c0f; border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; }
.ss-axis { stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.ss-axislbl { fill: var(--color-text-tertiary, rgba(255,255,255,0.4)); font-family: var(--font-mono, monospace); font-size: 10px; }
.ss-cand { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ss-curve { fill: none; stroke: var(--ss-secret); stroke-width: 2.5; }
.ss-share-pt { fill: rgba(255,255,255,0.16); stroke: rgba(255,255,255,0.35); stroke-width: 1.5; }
.ss-share-pt.on { fill: var(--ss-share); stroke: #fff; }
.ss-share-pt.win { fill: var(--ss-secret); stroke: #fff; }
.ss-secret-pt { fill: var(--ss-secret); stroke: #0c0c0f; stroke-width: 2; }
.ss-secret-q { fill: var(--ss-share); font-family: var(--font-mono, monospace); font-weight: 700; }
.ss-secret-v { fill: var(--ss-secret); font-family: var(--font-mono, monospace); font-weight: 700; }

.ss-shares { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.ss-share { appearance: none; cursor: pointer; font: inherit; font-family: var(--font-mono, monospace); font-size: 0.8rem; font-weight: 600; border: 1px solid var(--color-border, rgba(255,255,255,0.16)); background: var(--color-bg-surface, #1a1a1a); color: var(--color-text-secondary, rgba(255,255,255,0.78)); padding: 6px 11px; border-radius: 8px; transition: border-color 0.16s, color 0.16s, background 0.16s; }
.ss-share:hover { color: #fff; border-color: var(--ss-share); }
.ss-share.on { color: #0b0b0b; background: var(--ss-share); border-color: transparent; }
.ss-reset { appearance: none; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--color-border, rgba(255,255,255,0.16)); background: transparent; color: var(--color-text-tertiary, rgba(255,255,255,0.6)); padding: 6px 11px; border-radius: 8px; margin-left: auto; }
.ss-reset:hover { color: #fff; border-color: rgba(255,255,255,0.35); }

.ss-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 4px; }
.ss-stat { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; padding: 10px 12px; }
.ss-stat .ss-k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-bottom: 4px; }
.ss-stat .ss-v { font-family: var(--font-mono, monospace); font-size: 1.15rem; font-weight: 650; }
.ss-stat .ss-v.locked { color: var(--ss-secret); }
.ss-stat .ss-v.hidden { color: var(--ss-share); }

.ss-caption { margin-top: 14px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.ss-caption b { color: #fff; }
.ss-caption .ss-hl { color: var(--ss-secret); font-weight: 650; }
.ss-caption .ss-lo { color: var(--ss-share); font-weight: 650; }
.ss-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }