html, body { height: 100%; overflow: hidden; }

#pascal-app {
  background:
    radial-gradient(circle at 69% 38%, rgba(105, 139, 161, 0.12), transparent 34%),
    radial-gradient(circle at 76% 67%, rgba(0, 96, 190, 0.1), transparent 31%),
    linear-gradient(145deg, #010204, #070a0e 56%, #02050a);
}

.pascal-stage { isolation: isolate; }

#pascal-prism-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#pascal-svg {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
#pascal-svg.is-dragging { cursor: grabbing; }

#pascal-app.has-mage-prisms .pascal-cell .pascal-cell-back,
#pascal-app.has-mage-prisms .pascal-cell .pascal-cell-side-a,
#pascal-app.has-mage-prisms .pascal-cell .pascal-cell-side-b,
#pascal-app.has-mage-prisms .pascal-cell .pascal-cell-front {
  fill: transparent;
  stroke: transparent;
}
#pascal-app.has-mage-prisms .pascal-cell .pascal-cell-sheen { display: none; }
#pascal-app.has-mage-prisms .pascal-cell.is-source .pascal-cell-front,
#pascal-app.has-mage-prisms .pascal-cell.is-destination .pascal-cell-front,
#pascal-app.has-mage-prisms .pascal-cell.is-partner .pascal-cell-front,
#pascal-app.has-mage-prisms .pascal-cell.is-row .pascal-cell-front,
#pascal-app.has-mage-prisms .pascal-cell.is-diagonal .pascal-cell-front,
#pascal-app.has-mage-prisms .pascal-cell.is-traced .pascal-cell-front,
#pascal-app.has-mage-prisms .pascal-cell.is-mod .pascal-cell-front {
  fill: transparent;
  stroke: transparent;
}
#pascal-app.has-mage-prisms .pascal-cell.is-source .pascal-cell-front,
#pascal-app.has-mage-prisms .pascal-cell.is-partner .pascal-cell-front,
#pascal-app.has-mage-prisms .pascal-cell.is-row .pascal-cell-front {
  stroke: rgba(226, 239, 247, 0.34);
}
#pascal-app.has-mage-prisms .pascal-cell.is-diagonal .pascal-cell-front,
#pascal-app.has-mage-prisms .pascal-cell.is-traced .pascal-cell-front {
  stroke: rgba(62, 154, 236, 0.42);
}
#pascal-app.has-mage-prisms .pascal-cell.is-focus .pascal-cell-front {
  fill: transparent;
  stroke: rgba(116, 207, 255, 0.96);
  stroke-width: 2;
  filter: drop-shadow(0 0 7px rgba(0, 132, 255, 0.82));
}
/* Remainder classes encode mathematics, so keep them legible over the metal. */
#pascal-app.has-mage-prisms .pascal-cell.is-mod .pascal-cell-front {
  fill: var(--pascal-residue-fill);
  fill-opacity: .9;
}
#pascal-app.has-mage-prisms .pascal-cell.is-mod:not(.is-focus) .pascal-cell-front {
  stroke: var(--pascal-residue-stroke);
}

.pascal-network-line {
  fill: none;
  stroke: rgba(204, 222, 233, 0.2);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pascal-network-line.is-parent { stroke: rgba(226, 239, 247, 0.82); filter: drop-shadow(0 0 5px rgba(170, 214, 239, 0.45)); }
.pascal-network-line.is-stick { stroke: rgba(59, 163, 255, 0.92); filter: drop-shadow(0 0 6px rgba(0, 123, 255, 0.58)); }
.pascal-network-line.is-diagonal { stroke: rgba(84, 154, 217, 0.58); stroke-dasharray: 2 5; }
.pascal-network-line.is-accumulation { stroke: rgba(210, 232, 245, 0.78); filter: drop-shadow(0 0 5px rgba(103, 183, 235, 0.42)); }
.pascal-network-line.is-path { stroke: rgba(113, 168, 207, 0.25); }
.pascal-network-line.is-traced { stroke: rgba(50, 158, 255, 0.96); filter: drop-shadow(0 0 6px rgba(0, 123, 255, 0.68)); }

.pascal-cell { cursor: pointer; outline: none; }
.pascal-cell .pascal-cell-back { fill: rgba(17, 22, 28, 0.98); stroke: rgba(201, 219, 231, 0.32); }
.pascal-cell .pascal-cell-side-a { fill: rgba(4, 7, 11, 0.99); }
.pascal-cell .pascal-cell-side-b { fill: rgba(25, 32, 39, 0.96); }
.pascal-cell .pascal-cell-front {
  fill: rgba(9, 13, 18, 0.98);
  stroke: rgba(192, 211, 224, 0.52);
  stroke-width: 1;
  transition: fill 160ms ease, stroke 160ms ease, filter 160ms ease, opacity 160ms ease;
  vector-effect: non-scaling-stroke;
}
.pascal-cell .pascal-cell-sheen {
  fill: url(#pascal-cell-sheen-gradient);
  opacity: .3;
  pointer-events: none;
}
.pascal-cell text {
  fill: rgba(248, 252, 255, 0.96);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  pointer-events: none;
  text-anchor: middle;
}
.pascal-cell:hover .pascal-cell-front,
.pascal-cell:focus-visible .pascal-cell-front { stroke: rgba(116, 207, 255, 0.96); fill: rgba(0, 82, 192, 0.98); filter: drop-shadow(0 0 7px rgba(0, 132, 255, 0.7)); }
.pascal-cell:focus-visible .pascal-cell-front { stroke-width: 2.5; }
.pascal-cell.is-muted .pascal-cell-back,
.pascal-cell.is-muted .pascal-cell-side-a,
.pascal-cell.is-muted .pascal-cell-side-b,
.pascal-cell.is-muted .pascal-cell-front,
.pascal-cell.is-muted .pascal-cell-sheen { opacity: .76; }
.pascal-cell.is-muted text { opacity: .76; }
.pascal-cell.is-source .pascal-cell-front { fill: rgba(190, 207, 219, 0.98); stroke: rgba(248, 252, 255, 0.96); filter: drop-shadow(0 0 7px rgba(168, 213, 240, 0.45)); }
.pascal-cell.is-source text { fill: #07131c; text-shadow: 0 1px 1px rgba(255,255,255,.28); }
.pascal-cell.is-destination .pascal-cell-front { fill: rgba(5, 76, 190, 0.98); stroke: rgba(104, 197, 255, 0.98); filter: drop-shadow(0 0 9px rgba(0, 124, 255, 0.68)); }
.pascal-cell.is-destination text { fill: #fff; }
.pascal-cell.is-source .pascal-cell-sheen,
.pascal-cell.is-destination .pascal-cell-sheen { opacity: .3; }
.pascal-cell.is-partner .pascal-cell-front { fill: rgba(177, 197, 210, 0.97); stroke: rgba(247, 252, 255, 0.92); }
.pascal-cell.is-partner text { fill: #07131c; }
.pascal-cell.is-row .pascal-cell-front { fill: rgba(58, 75, 88, 0.97); stroke: rgba(208, 226, 237, 0.7); }
.pascal-cell.is-diagonal .pascal-cell-front { fill: rgba(10, 45, 80, 0.96); stroke: rgba(93, 169, 233, 0.78); }
.pascal-cell.is-traced .pascal-cell-front { fill: rgba(0, 91, 204, 0.98); stroke: rgba(109, 200, 255, 0.96); }
.pascal-cell.is-row.is-destination .pascal-cell-front,
.pascal-cell.is-diagonal.is-destination .pascal-cell-front { fill: rgba(5, 76, 190, 0.98); stroke: rgba(104, 197, 255, 0.98); filter: drop-shadow(0 0 9px rgba(0, 124, 255, 0.68)); }
.pascal-cell .pascal-cell-arithmetic { fill: rgba(225,239,248,.9); font-weight: 500; letter-spacing: -.01em; }
.pascal-cell .pascal-cell-term { fill: rgba(164,211,245,.82); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0; }

.pascal-cell.is-mod .pascal-cell-front { fill: var(--pascal-residue-fill); stroke: var(--pascal-residue-stroke); }
.pascal-cell.is-mod text { fill: var(--pascal-residue-text); text-shadow: 0 1px 2px rgba(0,0,0,.85); }
.pascal-cell.is-focus .pascal-cell-front { fill: rgba(0, 84, 217, 0.99); stroke: rgba(116, 207, 255, 1); filter: drop-shadow(0 0 10px rgba(0, 132, 255, 0.82)); }
.pascal-cell.is-focus text { fill: #fff; opacity: 1; text-shadow: 0 1px 3px rgba(0, 9, 30, 0.92); }
/* Selection outlines a residue without changing its mathematical class. */
.pascal-cell.is-mod.is-focus .pascal-cell-front { fill: var(--pascal-residue-fill); }
.pascal-cell.is-mod.is-focus text { fill: var(--pascal-residue-text); }

.pascal-stage-equation {
  position: absolute;
  z-index: 3;
  top: clamp(12px, 2.5vh, 25px);
  left: var(--sfi-visual-center-x);
  max-width: min(660px, 55vw);
  padding: 7px 12px;
  border: 1px solid rgba(191, 232, 251, 0.16);
  border-radius: var(--sfi-radius-control);
  background: rgba(3, 8, 14, 0.62);
  color: rgba(245, 251, 255, 0.82);
  font-size: clamp(9px, 1.05vw, 12px);
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(11px);
  pointer-events: none;
}
.pascal-stage-equation.is-binomial {
  display: flex;
  max-width: min(760px, 61vw);
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  color: rgba(255,255,255,.75);
  pointer-events: auto;
  scrollbar-width: thin;
  white-space: nowrap;
}
.pascal-stage-equation.is-binomial > strong { flex: 0 0 auto; color: rgba(245,251,255,.92); font-family: Georgia, "Times New Roman", serif; font-size: 1.08em; font-weight: 400; }
.pascal-stage-equation.is-binomial button {
  min-height: 26px;
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: rgba(229,246,255,.72);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: inherit;
}
.pascal-stage-equation.is-binomial button:hover,
.pascal-stage-equation.is-binomial button:focus-visible,
.pascal-stage-equation.is-binomial button[aria-pressed="true"] { border-color: rgba(99,184,255,.62); background: rgba(0,112,230,.15); color: #dff3ff; }
.pascal-stage-equation sup { font-size: .68em; line-height: 0; vertical-align: super; }

.pascal-figurate {
  z-index: 3;
  display: grid;
  width: clamp(188px, 18vw, 258px);
  justify-items: center;
  padding: 8px;
  pointer-events: auto;
}
.pascal-figurate[hidden] { display: none; }
.pascal-figurate .sfi-floating-visual-header { width: 100%; }
.pascal-figurate svg { width: 100%; height: 156px; overflow: hidden; cursor: default; touch-action: none; }
.pascal-figurate.is-tetrahedral svg { cursor: grab; }
.pascal-figurate.is-tetrahedral svg:active { cursor: grabbing; }
.pascal-figurate circle { fill: rgba(113, 192, 248, 0.9); stroke: rgba(240, 249, 255, 0.72); stroke-width: 0.5; }
.pascal-figurate-total { color: rgba(137, 207, 255, 0.96); font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 400; }
.pascal-figurate > small { min-height: 11px; color: rgba(255,255,255,.38); font-size: 7px; line-height: 1.35; text-align: center; }

.pascal-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  background: rgba(0, 0, 0, 0.25);
}
#pascal-panel .pascal-mode-grid button { min-width: 0; min-height: 31px; padding: 5px 3px; border-color: transparent; font-size: 8.5px; letter-spacing: .035em; }
.pascal-mode-controls { min-height: 37px; }
.pascal-view-actions { --sfi-button-columns: 3; margin-top: 7px; }
.pascal-control-group { display: grid; }
.pascal-control-group[hidden] { display: none; }
#pascal-panel .pascal-control-group button { min-height: 34px; }
.pascal-path-controls {
  display: grid;
  gap: 5px;
}
.pascal-path-stepper {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 6px;
}
.pascal-path-controls[hidden], .pascal-discovery-grid[hidden] { display: none; }
#pascal-panel .pascal-path-stepper button { width: 34px; min-height: 34px; padding: 0; font-size: 20px; }
.pascal-path-stepper span { display: grid; justify-items: center; gap: 2px; }
.pascal-path-stepper small { color: rgba(255,255,255,.38); font-size: 7px; letter-spacing: .11em; text-transform: uppercase; }
.pascal-path-stepper strong { color: rgba(137, 207, 255, 0.96); font-size: 11px; font-weight: 500; }
.pascal-path-playback { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 5px; }
#pascal-panel .pascal-path-playback button { min-height: 31px; padding: 5px 8px; font-size: 9px; }
#pascal-panel .pascal-path-playback #pascal-path-play { border-color: rgba(191,232,251,.35); color: rgba(229,248,255,.84); }
#pascal-panel .pascal-path-playback #pascal-path-play[aria-pressed="true"] { border-color: rgba(99,184,255,.62); background: rgba(0,112,230,.15); color: rgba(177, 222, 255, 0.98); }
.pascal-path-playback-note { color: rgba(191,232,251,.48); font-size: 7px; line-height: 1.35; text-align: center; }
.pascal-path-playback-note[hidden] { display: none; }
.pascal-discovery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
#pascal-panel .pascal-discovery-grid button { min-width: 0; min-height: 34px; padding: 5px 3px; font-size: 9px; }

.pascal-result-value { margin-top: 1px; font-family: Georgia, "Times New Roman", serif; font-size: 29px !important; font-weight: 400 !important; line-height: 1.02 !important; }
.pascal-mode-result { margin: 5px 0 3px; color: rgba(244,251,255,.92); font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.42; font-variant-numeric: tabular-nums; }
.pascal-mode-result:empty { display: none; }
.pascal-calculation { display: grid; gap: 2px; margin-top: 4px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.09); }
.pascal-calculation.is-compact { margin-top: 2px; padding-top: 4px; border-top-color: rgba(255,255,255,.055); }
.pascal-calculation.is-compact .pascal-factorial,
.pascal-calculation.is-compact .pascal-cancellation,
.pascal-calculation.is-compact .pascal-expanded { display: none; }
.pascal-calculation.is-hidden { display: none; }
.pascal-coefficient { color: var(--sfi-blue); font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-variant-numeric: tabular-nums; }
.pascal-calculation.is-compact .pascal-coefficient { color: rgba(191,232,251,.58); font-size: 11px; }
.pascal-factorial, .pascal-cancellation, .pascal-expanded { color: rgba(255,255,255,.67); font-family: Georgia, "Times New Roman", serif; font-size: 11px; line-height: 1.48; font-variant-numeric: tabular-nums; }
.pascal-cancellation { color: rgba(139,199,238,.75); font-size: 8px; letter-spacing: .035em; }
.pascal-expanded { color: rgba(255,255,255,.86); }
.pascal-result-detail { margin-top: 2px; }

.pascal-binomial { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; white-space: nowrap; }
.pascal-binomial-paren { font-size: 1.62em; font-weight: 300; line-height: .75; }
.pascal-binomial-stack { display: inline-grid; min-width: 1.05em; justify-items: center; font-size: .72em; line-height: .82; }
.pascal-math-fraction { display: inline-grid; min-width: 2.4em; justify-items: stretch; vertical-align: middle; line-height: 1.08; }
.pascal-math-fraction > span:first-child { padding: 0 4px 2px; border-bottom: 1px solid currentColor; text-align: center; }
.pascal-math-fraction > span:last-child { padding: 2px 4px 0; text-align: center; }
.pascal-math-equals { display: inline-block; padding-inline: 4px; }
.pascal-factorial sup,
.pascal-expanded sup { font-size: .7em; line-height: 0; vertical-align: super; }

.pascal-explanation { min-height: 53px; margin-top: 9px; color: rgba(255,255,255,.58); font-size: 10px; line-height: 1.45; }
.pascal-explanation strong { color: rgba(255,255,255,.9); font-weight: 520; }
.pascal-explanation .pascal-identity { display: block; margin-top: 5px; color: var(--sfi-blue-muted); font-variant-numeric: tabular-nums; }
.pascal-combinations { display: flex; max-height: 84px; flex-wrap: wrap; gap: 4px; margin-top: 8px; overflow-y: auto; }
.pascal-combinations[hidden] { display: none; }
.pascal-combinations span { padding: 3px 6px; border: 1px solid rgba(191,232,251,.17); border-radius: 999px; color: rgba(255,255,255,.62); font-size: 8px; }

@media (max-width: 820px) {
  .pascal-stage-equation { top: 7px; max-width: calc(100vw - 106px); padding: 5px 8px; font-size: 8px; }
  .pascal-figurate { width: 168px; padding: 7px; }
  .pascal-figurate svg { height: 104px; }
  .pascal-figurate .sfi-floating-visual-title { font-size: 10px; }
  .pascal-figurate .sfi-floating-visual-kicker { display: none; }
  .pascal-figurate-total { font-size: 14px; }
  .pascal-mode-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 3px; }
  #pascal-panel .pascal-mode-grid button { min-height: 38px; padding: 4px 1px; font-size: 7px; letter-spacing: 0; }
  .pascal-mode-controls { min-height: 34px; }
  .pascal-explanation { min-height: 42px; font-size: 9px; }
  .pascal-result-value { font-size: 22px !important; }
  .pascal-mode-result { margin-block: 3px 1px; font-size: 11px; }
  .pascal-factorial, .pascal-cancellation, .pascal-expanded { font-size: 9px; }
  .pascal-stage-equation.is-binomial { max-width: calc(100vw - 94px); }
}

@media (max-width: 430px) {
  .pascal-mode-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #pascal-panel .pascal-mode-grid button { min-height: 34px; }
  .pascal-combinations { max-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .pascal-cell .pascal-cell-front { transition: none; }
}