/* Scoped to the standalone design studio: no styles reach the calculator. */
.matrix-studio .matrix-orb { pointer-events: none; }
.matrix-studio .orb-skeleton { fill: #fffaf0; fill-opacity: .3; stroke: #b9a77f; stroke-width: 1.3; opacity: .78; }
.matrix-studio .orb-material,
.matrix-studio .orb-bubble,
.matrix-studio .orb-burst-ring,
.matrix-studio .orb-flash,
.matrix-studio .orb-aura,
.matrix-studio .orb-digit { transform-box: fill-box; transform-origin: center; }
.matrix-studio .orb-material { filter: drop-shadow(0 3px 3px #34231140); }
.matrix-studio .orb-base { stroke: var(--orb-color); stroke-width: 1.25; }
.matrix-studio .orb-rim { fill: none; stroke: #fffef0; stroke-width: 1.3; opacity: .82; }
.matrix-studio .orb-inner-rim { fill: none; stroke: #fff; stroke-width: .75; opacity: .38; }
.matrix-studio .orb-pearl-highlight { fill: #fff; opacity: .22; }
.matrix-studio .orb-glass-finish,
.matrix-studio .orb-glass-glint,
.matrix-studio .orb-glass-reflection { opacity: 0; }
.matrix-studio .orb-glass-glint { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.matrix-studio .orb-glass-reflection { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; }
.matrix-studio .orb-aura { fill: none; stroke: var(--orb-color); stroke-width: 5; opacity: .055; }
.matrix-studio[data-orb="glass"] .orb-pearl-finish,
.matrix-studio[data-orb="glass"] .orb-pearl-highlight { opacity: 0; }
.matrix-studio[data-orb="glass"] .orb-glass-finish { opacity: 1; }
.matrix-studio[data-orb="glass"] .orb-glass-glint { opacity: .83; }
.matrix-studio[data-orb="glass"] .orb-glass-reflection { opacity: .53; }
.matrix-studio[data-orb="glass"] .orb-rim { stroke-width: 1.9; opacity: .96; }
.matrix-studio[data-orb="glass"] .orb-inner-rim { opacity: .18; }
.matrix-studio[data-orb="glass"] .orb-aura { stroke-width: 7; opacity: .14; }
.matrix-studio[data-orb="glass"] .orb-material { filter: drop-shadow(0 2px 4px #392d2345); }
.matrix-studio .orb-digit {
  fill: var(--orb-ink); text-anchor: middle; dominant-baseline: central;
  font-family: 'Matrix Engraved', Georgia, 'Times New Roman', serif; font-size: var(--digit-size); font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.055em;
  paint-order: stroke fill; stroke: #000; stroke-opacity: .13; stroke-width: .6;
}
.matrix-studio[data-numerals="modern"] .orb-digit {
  font-family: 'Matrix Silk', 'Palatino Linotype', Georgia, serif;
  font-size: var(--digit-modern-size); font-weight: 600; letter-spacing: -.065em;
}
.matrix-studio .orb-bubble,
.matrix-studio .orb-burst-ring,
.matrix-studio .orb-flash,
.matrix-studio .orb-droplet,
.matrix-studio .orb-burst-ray { opacity: 0; }
.matrix-studio .orb-bubble { stroke: #fff; stroke-width: 1.5; }
.matrix-studio .orb-burst-ring { fill: none; stroke: var(--orb-color); stroke-width: 2.7; }
.matrix-studio .orb-droplet { fill: var(--orb-color); stroke: #fff; stroke-width: .65; transform-box: fill-box; transform-origin: center; }
.matrix-studio .orb-burst-ray { fill: none; stroke: #b99142; stroke-width: 1.1; stroke-linecap: round; }

.matrix-studio[data-phase="ready"] .orb-material,
.matrix-studio[data-phase="ready"] .orb-digit,
.matrix-studio[data-phase="ready"] .orb-aura,
.matrix-studio[data-phase="playing"]:not(.revealing) .orb-material,
.matrix-studio[data-phase="playing"]:not(.revealing) .orb-digit,
.matrix-studio[data-phase="playing"]:not(.revealing) .orb-aura { opacity: 0; }

.matrix-studio.revealing .orb-material {
  animation: matrix-orb-condense calc(650ms * var(--tempo, 1)) cubic-bezier(.2,.7,.25,1) var(--delay) both;
}
.matrix-studio.revealing .orb-bubble {
  animation: matrix-orb-bubble calc(650ms * var(--tempo, 1)) ease-out var(--delay) both;
}
.matrix-studio.revealing .orb-burst-ring {
  animation: matrix-orb-ring calc(450ms * var(--tempo, 1)) ease-out calc(var(--delay) + 215ms * var(--tempo, 1)) both;
}
.matrix-studio.revealing .orb-flash {
  animation: matrix-orb-flash calc(390ms * var(--tempo, 1)) ease-out calc(var(--delay) + 150ms * var(--tempo, 1)) both;
}
.matrix-studio.revealing .orb-droplet {
  animation: matrix-orb-droplet calc(445ms * var(--tempo, 1)) ease-out calc(var(--delay) + 220ms * var(--tempo, 1) + var(--drop-lag)) both;
}
.matrix-studio.revealing .orb-burst-ray {
  animation: matrix-orb-ray calc(360ms * var(--tempo, 1)) ease-out calc(var(--delay) + 240ms * var(--tempo, 1) + var(--drop-lag)) both;
}
.matrix-studio.revealing .orb-digit {
  animation: matrix-orb-digit calc(380ms * var(--tempo, 1)) cubic-bezier(.2,.8,.25,1) calc(var(--delay) + 270ms * var(--tempo, 1)) both;
}
.matrix-studio.revealing .orb-aura {
  animation: matrix-orb-aura calc(700ms * var(--tempo, 1)) ease-out var(--delay) backwards;
}

@keyframes matrix-orb-condense {
  0%, 27% { opacity: 0; transform: scale(.5); }
  48% { opacity: 1; transform: scale(1.16); }
  73% { opacity: 1; transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes matrix-orb-bubble {
  0% { opacity: 0; transform: scale(.4); }
  20% { opacity: .9; transform: scale(.9); }
  38% { opacity: 1; transform: scale(1.2); }
  48% { opacity: .78; transform: scale(1.34); }
  66%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes matrix-orb-ring {
  0% { opacity: 0; transform: scale(.94); }
  16% { opacity: .95; }
  100% { opacity: 0; transform: scale(1.9); stroke-width: .4; }
}
@keyframes matrix-orb-flash {
  0% { opacity: 0; transform: scale(.16); }
  30% { opacity: .94; transform: scale(.97); }
  67% { opacity: .14; }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes matrix-orb-droplet {
  0% { opacity: 0; transform: translateX(0) scale(.35); }
  22% { opacity: 1; transform: translateX(calc(var(--drop-distance) * .25)) scale(1.13); }
  100% { opacity: 0; transform: translateX(var(--drop-distance)) scale(.2); }
}
@keyframes matrix-orb-ray {
  0%, 100% { opacity: 0; }
  22% { opacity: .86; }
}
@keyframes matrix-orb-digit {
  0% { opacity: 0; transform: scale(.52) translateY(5px); filter: blur(2px); }
  48% { opacity: 1; transform: scale(1.13) translateY(-1px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes matrix-orb-aura {
  0%, 20% { opacity: 0; transform: scale(.7); }
  48% { opacity: .3; transform: scale(1.16); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .matrix-studio.revealing .orb-material,
  .matrix-studio.revealing .orb-digit { animation: none; opacity: 1; transform: none; filter: none; }
  .matrix-studio.revealing .orb-aura { animation: none; }
  .matrix-studio.revealing .orb-bubble,
  .matrix-studio.revealing .orb-burst-ring,
  .matrix-studio.revealing .orb-flash,
  .matrix-studio.revealing .orb-droplet,
  .matrix-studio.revealing .orb-burst-ray { animation: none; opacity: 0; }
}