/* Kinetic number reveal. The graphic never chooses or changes the generated numbers. */
:root { --motion-paper:#d7f5e8; --motion-green:#087f69; --motion-deep:#123b30; --motion-lime:#ceef6e; }
:root[data-theme="dark"] { --motion-paper:#204536; --motion-green:#acdaca; --motion-deep:#d2f1e3; --motion-lime:#d0e893; }
.stage { border-radius:16px; background:var(--motion-paper); box-shadow:none; height:550px; }
.stage-heading { pointer-events:auto; inset:18px 22px auto; color:var(--motion-deep); align-items:center; letter-spacing:.06em; }
.stage-heading select { background:transparent; color:var(--motion-deep); border:1px solid color-mix(in srgb,var(--motion-green) 25%,transparent); border-radius:30px; min-height:34px; padding:5px 26px 5px 10px; font-size:11px; max-width:140px; }
.stage-heading label { margin:0; }
.stage-caption { border:0; border-radius:8px; background:color-mix(in srgb,var(--panel) 80%,transparent); font-size:12px; font-weight:600; z-index:2; bottom:57px; }
.stage-note { color:var(--motion-deep); opacity:.85; font-size:10px; padding:12px 22px 15px; }
.scene[data-renderer="motion"] .scene-fallback { visibility:hidden; }
.number-motion { position:absolute; inset:0; overflow:hidden; container-type:inline-size; color:var(--motion-deep); }
.number-motion-grid { position:absolute; inset:0; background-image:linear-gradient(#087f6910 1px,transparent 1px),linear-gradient(90deg,#087f6910 1px,transparent 1px); background-size:9% 9%; }
.number-orbit { position:absolute; width:85%; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--motion-green) 25%,transparent); border-radius:50%; left:24%; top:22%; }
.orbit-two { width:58%; left:36%; top:35%; }
.number-poster { position:absolute; inset:0; }
.number-edition { position:absolute; left:8%; top:22%; font-size:2cqw; letter-spacing:.12em; font-weight:650; }
.number-poster>strong { position:absolute; left:7%; top:30%; font-size:13.2cqw; line-height:1.06; letter-spacing:-.085em; font-weight:820; }
.number-poster>strong em { font-style:normal; color:var(--motion-green); }
.number-six { position:absolute; right:8%; top:64%; font-size:16cqw; line-height:1; font-weight:850; letter-spacing:-.06em; color:var(--motion-green); transform:rotate(-12deg); }
.number-six>span { font-size:5cqw; letter-spacing:-.04em; }
.number-ticker { position:absolute; left:-20%; width:140%; top:32%; transform:rotate(-18deg); opacity:0; }
.number-ticker>span { display:block; white-space:nowrap; font-size:20cqw; font-weight:850; letter-spacing:-.04em; line-height:1.1; color:var(--motion-green); }
.number-ticker>span+span { -webkit-text-stroke:1.5px var(--motion-green); color:transparent; }
.number-motion.is-mixing .number-ticker { opacity:1; }
.number-motion.is-mixing .number-poster,.number-motion.has-results .number-poster { opacity:0; }
.number-results { display:none; position:absolute; inset:16% 9% 20%; align-content:center; }
.has-results .number-results { display:grid; }
.number-result-title { color:var(--motion-deep); font-size:2.1cqw; letter-spacing:.16em; text-align:center; margin-bottom:7%; font-weight:700; }
.number-result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.draw-number { display:grid; place-items:center; aspect-ratio:1; border-radius:50%; background:var(--surface-card,var(--panel)); color:var(--motion-deep); font-size:8cqw; line-height:1; font-weight:800; letter-spacing:-.065em; }
.draw-number:nth-child(2),.draw-number:nth-child(6) { background:var(--motion-green); color:var(--bg); }
.draw-number:nth-child(4) { background:var(--motion-lime); color:#123b30; }
.panel { border-radius:16px; box-shadow:none; }
.actions .primary { border-radius:50px; box-shadow:none; }
.chip { box-shadow:none; }
@media(prefers-reduced-motion:no-preference) {
  .number-poster>strong { animation:number-poster-in .75s cubic-bezier(.16,1,.3,1) both; }
  .is-mixing .number-ticker>span { animation:number-roll .8s linear infinite; }
  .is-mixing .number-ticker>span+span { animation-direction:reverse; }
  .number-motion[data-playing="false"] * { animation-play-state:paused!important; }
}
@keyframes number-poster-in { from {opacity:0;transform:translateY(40px) rotate(5deg)} to {opacity:1;transform:translateY(0) rotate(0)} }
@keyframes number-roll { from {transform:translateX(0)} to {transform:translateX(-35%)} }
@media(max-width:820px) { .stage { height:390px; } .number-motion { container-type:normal; } .number-edition { font-size:11px; top:23%; } .number-poster>strong { font-size:54px; top:34%; } .number-six { font-size:90px; top:35%; right:14%; } .number-six>span { font-size:25px; } .number-result-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; } .number-results { inset:22% 6% 27%; } .number-result-title { font-size:11px; margin-bottom:24px; } .draw-number { font-size:30px; } .number-ticker>span { font-size:110px; } }
@media(max-width:560px) { .stage,.embedded .stage { height:300px; border-radius:12px; } .stage-heading { inset:14px 16px auto; font-size:9px; } .stage-heading select { font-size:10px; min-height:30px; padding:4px 10px; max-width:117px; } .stage-caption { left:14px; right:14px; bottom:46px; font-size:11px; } .stage-note { padding:10px 15px; font-size:9px; } .number-poster>strong { font-size:42px; top:32%; left:7%; } .number-edition { top:22%; font-size:9px; } .number-six { font-size:65px; top:53%; right:8%; } .number-six>span { font-size:19px; } .number-results { inset:23% 8% 23%; } .number-result-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px 17px; max-width:225px; margin:auto; width:100%; } .draw-number { font-size:25px; max-height:57px; } .number-result-title { font-size:9px; margin-bottom:10px; } .number-ticker>span { font-size:75px; } }