/*
 * depo0 — common styles (after the front CSS: globals, site, app, site-chrome, header).
 * The page ground is the animated background (js/background.js, fixed, z-index -1) on
 * --d0-ground; blocks sit in .d0-blok wrappers that take no box of their own.
 */
html { background: var(--d0-ground); }
body.d0-body { background: transparent; color: var(--d0-ink); }
.d0-main { padding: 0; }
.d0-blok { display: contents; }
.d0-page .header { z-index: 60; }

/* visually hidden, for headings the design does not show */
.d0-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ?tune — demo20's live background controls */
.bg-tuner {
    position: fixed; right: 16px; bottom: 16px; z-index: 50; width: min(320px, calc(100vw - 32px));
    max-height: calc(100vh - 32px); overflow: auto; padding: 12px 14px;
    background: rgb(24 23 26 / 0.92); border: 1px solid rgb(255 255 255 / 0.16); border-radius: 12px;
    color: #fff; font: 400 13px/1.4 "Lato", system-ui, sans-serif; backdrop-filter: blur(8px);
}
.bg-tuner__title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.bg-tuner.is-folded .bg-tuner__body { display: none; }
.bg-tuner.is-folded .bg-tuner__title { margin: 0; }
.bg-tuner__row { display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: center; gap: 8px; margin: 6px 0; }
.bg-tuner__row input[type="range"] { width: 100%; accent-color: #469a58; }
.bg-tuner__row input[type="color"] { grid-column: 2 / span 2; width: 100%; height: 28px; padding: 0; border: 0; background: none; }
.bg-tuner__row select { grid-column: 2 / span 2; padding: 4px 6px; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 6px; background: #27262b; color: #fff; font: inherit; }
.bg-tuner__row input[type="checkbox"] { justify-self: start; accent-color: #469a58; }
.bg-tuner__row output { min-width: 3ch; text-align: right; color: #ffb500; font-variant-numeric: tabular-nums; }
.bg-tuner button { padding: 6px 12px; border: 0; border-radius: 999px; background: #469a58; color: #fff; font: 700 12px/1 "Lato", system-ui, sans-serif; cursor: pointer; }
.bg-tuner__fold { padding: 2px 9px !important; background: rgb(255 255 255 / 0.12) !important; }
.bg-tuner__actions { display: flex; gap: 8px; margin: 10px 0 8px; }
.bg-tuner__out { width: 100%; padding: 8px; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 8px; background: #111; color: #cfe9d6; font: 12px/1.4 ui-monospace, Menlo, monospace; resize: vertical; }
.bg-tuner__sub { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / 0.12); color: #a1a1aa; font-size: 12px; }
.bg-tuner__row select optgroup { color: #a1a1aa; }
.bg-tuner__save { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / 0.12); }
.bg-tuner__save input { flex: 1 1 140px; min-width: 0; padding: 6px 8px; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 6px; background: #27262b; color: #fff; font: inherit; }
.bg-tuner__save button[data-act="delete"] { background: #5a2a30; }
.bg-tuner__msg { min-height: 1.4em; margin: 4px 0; color: #ffb500; }

/*
 * Sign up / Log in buttons (guest header, home hero). Log in = DEPO UI kit #001 "glow" (demo30):
 * a green light drifting inside a dark pill. Sign up = the same pill in grey, with a dark-golden
 * ray that sweeps across it from time to time (--sweep = one cycle; the ray runs in its last fifth).
 */
@property --b-x { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --b-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@keyframes b-glow-drift { 0% { --b-x: 8%; --b-y: 30%; } 50% { --b-x: 60%; --b-y: 80%; } 100% { --b-x: 95%; --b-y: 40%; } }
@keyframes b-gold-sweep {
    0%, 70% { transform: translateX(-180%) skewX(-20deg); opacity: 0; }
    74% { opacity: 1; }
    92% { opacity: 1; }
    96%, 100% { transform: translateX(380%) skewX(-20deg); opacity: 0; }
}
.b {
    --c1: #53f57e; --c2: #469a58; --c3: #18171a; --fg: #ffffff;
    --r: 40px; --px: 26px; --py: 13px; --fs: 15px; --fw: 600; --sp: 4s; --bw: 1px;
    --ff: "Poppins", "Lato", system-ui, sans-serif;
    position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    max-width: 100%; padding: var(--py) var(--px); border: 0; border-radius: var(--r); background: none;
    color: var(--fg); font: var(--fw) var(--fs)/1.15 var(--ff); letter-spacing: .01em; white-space: nowrap; text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background-color .35s, color .35s, filter .35s;
}
a.b, a.b:hover, a.b:visited { color: var(--fg); text-decoration: none; }
.b:focus-visible { outline: 2px solid var(--c1); outline-offset: 4px; }
.b__t, .b__i { position: relative; z-index: 2; display: inline-block; }
.b__i:empty { display: none; }
.b:active { transform: scale(.97); }
.b--glow {
    background: radial-gradient(120% 220% at var(--b-x) var(--b-y), color-mix(in srgb, var(--c1) 34%, transparent), transparent 62%), var(--c3);
    box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 22%, transparent);
    animation: b-glow-drift calc(var(--sp) * 2) ease-in-out infinite alternate;
}
.b--glow:hover { box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 50%, transparent), 0 10px 40px -12px color-mix(in srgb, var(--c1) 60%, transparent); }
.b--gold {
    --c1: #a9a8a4; --c3: #2f2e33; --fg: #ecebe6; --gold: #b8860b; --sweep: 6s;
    overflow: hidden; clip-path: inset(0 round var(--r));   /* the blurred ray never leaks past the rounded edge */
    background: radial-gradient(120% 220% at var(--b-x) var(--b-y), color-mix(in srgb, var(--c1) 22%, transparent), transparent 62%), var(--c3);
    box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 26%, transparent);
    animation: b-glow-drift calc(var(--sp) * 2) ease-in-out infinite alternate;
}
.b--gold::before {
    content: ""; position: absolute; z-index: 1; top: -30%; bottom: -30%; left: 0; width: 38%; pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent) 40%, color-mix(in srgb, #f3c64a 70%, transparent) 50%, color-mix(in srgb, var(--gold) 55%, transparent) 60%, transparent);
    filter: blur(1.5px); mix-blend-mode: screen;
    transform: translateX(-180%) skewX(-20deg); opacity: 0;
    animation: b-gold-sweep var(--sweep) ease-in-out infinite;
}
.b--gold:hover { box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--gold) 60%, transparent), 0 10px 40px -12px color-mix(in srgb, var(--gold) 70%, transparent); }
.b--gold:focus-visible { outline-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
    .b--glow, .b--gold { animation: none; }
    .b--gold::before { animation: none; }
}

/* the guest header: the buttons take the place of "We are in beta" */
#site-header .d0-auth { gap: 12px; }
@media (max-width: 1199px) {
    #site-header .d0-auth { flex: none; justify-content: flex-start; height: auto; padding: 12px 0; }
}