/* GENERATED by tools/sync-portal.mjs from site/public/styles.css (the eclipse mark and the buttons). Do not edit. */
/* the eclipse mark, as the dashboard draws it */
.eclipse { position: relative; font-size: 34px; width: 1em; height: 1em; flex: none; }
.eclipse i { position: absolute; border-radius: 50%; display: block; }
.eclipse .e-glow { inset: -.3em; background: radial-gradient(circle closest-side at 53% 47%, transparent 50%, rgba(var(--b-rgb), .7) 55.5%, rgba(var(--a-rgb), .42) 62%, rgba(var(--a-rgb), .14) 76%, transparent 100%); animation: breathe 5.5s ease-in-out infinite; }
.eclipse .e-rays { inset: -.4em; background: repeating-conic-gradient(from 0deg, rgba(var(--corona-rgb), .6) 0 .9deg, transparent .9deg 7.5deg); -webkit-mask: radial-gradient(circle, transparent 40%, #000 46%, transparent 63%); mask: radial-gradient(circle, transparent 40%, #000 46%, transparent 63%); animation: spin 70s linear infinite; opacity: .5; }
.eclipse .e-sun { inset: .06em; background: conic-gradient(from -36deg, var(--a) 0deg, var(--b) 40deg, var(--corona) 86deg, var(--b) 132deg, var(--a) 174deg, var(--a) 360deg); box-shadow: 0 0 .06em rgba(var(--corona-rgb), .6), 0 0 .26em .01em rgba(var(--b-rgb), .55); }
.eclipse .e-moon { inset: .052em; transform: translate(-.05em, .042em); background: radial-gradient(circle at 34% 70%, rgba(var(--a-rgb), .3), transparent 58%), radial-gradient(circle at 40% 35%, #0b0a18, var(--moon) 70%); box-shadow: 0 0 0 .012em rgba(var(--a-rgb), .6); }
.eclipse .e-ring { width: .16em; height: .16em; left: calc(50% + .26em); top: calc(50% - .36em); background: #fff; box-shadow: 0 0 .2em .06em rgba(var(--corona-rgb), .95), 0 0 .5em .16em rgba(var(--b-rgb), .55); animation: pulse 3.2s ease-in-out infinite; }
.eclipse .e-ring::before, .eclipse .e-ring::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.eclipse .e-ring::before { width: .95em; height: .05em; transform: translate(-50%, -50%) rotate(-9deg); background: linear-gradient(90deg, transparent, rgba(var(--corona-rgb), .95) 50%, transparent); }
.eclipse .e-ring::after { width: .05em; height: .66em; transform: translate(-50%, -50%) rotate(-9deg); background: linear-gradient(180deg, transparent, rgba(var(--corona-rgb), .95) 50%, transparent); }
@keyframes breathe { 50% { transform: scale(1.07); opacity: .8; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.35); opacity: .75; } }

/* buttons: the primary one carries a bead of light round its edge */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes orbit { to { --ang: 360deg; } }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 99px; border: 1px solid rgba(var(--line-rgb), 1); background: rgba(var(--surface-rgb), .55); color: var(--text); font: 600 13px var(--ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(10px); transition: transform .25s, box-shadow .25s, border-color .25s; }
.btn:hover { transform: translateY(-1px); border-color: rgba(var(--a-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--a-rgb), .12); }
.btn.small { height: 36px; padding: 0 16px; font-size: 11.5px; }
.btn.primary { border-color: transparent; background: linear-gradient(135deg, rgba(var(--a-rgb), .30), rgba(var(--b-rgb), .18)); }
.btn.primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang), rgba(var(--line-rgb), .95) 0 62%, var(--b) 84%, #fff 92%, rgba(var(--line-rgb), .95) 97%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: orbit 4.5s linear infinite; pointer-events: none; }