/* ==========================================================================
   THE SIGN-IN, PRO (owner, 27 Oct 2026). Loaded after signin-v3.css on
   admin/index.html alone. The owner's favourite seed, kept and taken further:
   "u hav a solid direction of impressiveness growing on sign-in page, that
   graphing behind O logo, but imagine steady growth", and "1000s times more
   impressive than sign in page still" (docs/design/UNIVERSE.md).

   What it keeps: the graph paper, the great ō, the huge light words, a real
   product shown in the dark, one lime action (signin-v3.css's button).
   What it adds:
     STEADY GROWTH  signin-growth.mjs draws the graph alive on .au-growth: a
                    business's numbers rising calmly across the paper, a step
                    at a time, meeting in the ō, which is a quiet core with a
                    lime light (.au-core) breathing slowly inside it;
     THE ACCOUNT    the preview is the account as it is now (account-pro.css):
                    the night island with the places' marks and the products
                    at its foot, the light sheet, the serif hello, the figures
                    with a rising sparkline, a decision card whose one lime
                    action is pressed, the project's living line.
   No field, route, message, focus order or security property changes: every
   rule is look, scoped to :root:not([data-theme="classic"]); the classic door
   is <html data-theme="classic"> (theme-first.js).
   ========================================================================== */

@font-face{
  font-family:"tkati Serif Display"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/tkati-serif-display-latin.woff2") format("woff2");
}
/* The display face's whole range: the words are light (tokens.css declares 400–700). */
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/admin/fonts/inter-tight-var.woff2") format("woff2");
}

:root:not([data-theme="classic"]) body:has(#signin){
  --au-frame:#050505;
  --au-stage:#F4F4F2;
  --au-stage-edge:#E6E6E3;
  --pp-lime:#C8F031;
  --pp-ink:#0A0A0A;
  --pp-serif:"tkati Serif Display",Georgia,"Times New Roman",serif;
}

/* ── THE GROUND: the kernel's still sheet stands down for the living one ─── */
:root:not([data-theme="classic"]) .auth-world > .au-kernel{display:none}
:root:not([data-theme="classic"]) .auth-world > .au-growth{
  position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; pointer-events:none;
}
:root[data-theme="classic"] .auth-world > :is(.au-growth, .au-core){display:none}
/* The core's light: a lime glow at the ō's centre, placed by signin-growth.mjs, breathing slowly. */
:root:not([data-theme="classic"]) .auth-world > .au-core{
  position:absolute; z-index:0; left:0; top:0; width:var(--core-d, 0px); height:var(--core-d, 0px);
  transform:translate(calc(var(--core-x, -999px) - 50%), calc(var(--core-y, -999px) - 50%));
  border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(200,240,49,.55), rgba(200,240,49,.20) 42%, rgba(200,240,49,0) 100%);
  opacity:.75;
}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-theme="classic"]) .auth-world > .au-core{animation:au-core 7s ease-in-out infinite}
  :root:not([data-theme="classic"]) #signin:is(.is-still, :has(.auth-access :focus-within)) .auth-world > .au-core{animation-play-state:paused}
}
@keyframes au-core{0%,100%{opacity:.55; transform:translate(calc(var(--core-x, -999px) - 50%), calc(var(--core-y, -999px) - 50%)) scale(.92)} 50%{opacity:1; transform:translate(calc(var(--core-x, -999px) - 50%), calc(var(--core-y, -999px) - 50%)) scale(1.06)}}

/* ── THE WORDS ─────────────────────────────────────────────────────────── */
:root:not([data-theme="classic"]) .auth-statement__h{font-weight:250; letter-spacing:-.045em}
:root:not([data-theme="classic"]) .auth-statement__sub{color:#4A4A4A}

/* ── THE PREVIEW: the old miniature is classic's ─────────────────────────── */
:root:not([data-theme="classic"]) .auth-preview:not(.auth-preview--pro){display:none}
:root[data-theme="classic"] .auth-preview--pro{display:none}
/* A step smaller than the classic miniature, and set lower, so the growth has a horizon of its own to rise along
   between the words and the account. */
@media (min-width:1024px){
  .auth-preview--pro{
    font-size:clamp(7px, min(1.5cqw, 1.2cqh), 12px);
    margin:clamp(40px, 10cqh, 104px) 0 clamp(4px, 1.2cqh, 12px);
    align-self:end;
  }
}

.auth-preview--pro .pp-window{
  position:relative; display:grid; grid-template-columns:14em minmax(0,1fr); gap:.55em;
  width:62em; height:35em; max-width:100%; padding:.55em;
  background:#050505; border:1px solid #1C1C1C; border-radius:1.5em;
  box-shadow:0 3.6em 7em -3em rgba(0,0,0,.75), 0 .3em .8em rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transform:perspective(1400px) rotateX(var(--au-rx, 0deg)) rotateY(var(--au-ry, 0deg));
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  font-family:"Inter",var(--au-body);
}
/* The island. */
.pp-rail{
  display:flex; flex-direction:column; gap:.18em; min-width:0;
  padding:.95em .6em .7em; background:#0B0B0B; border:1px solid #1E1E1E; border-radius:1.05em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pp-who{display:flex; align-items:center; gap:.65em; padding:0 .3em .95em; margin:0 0 .6em; border-bottom:1px solid #1E1E1E}
.pp-o{
  display:grid; place-items:center; flex:none; width:2.3em; height:2.3em; border-radius:.62em;
  background:linear-gradient(180deg,#2A2A2A 0%,#121212 55%,#070707 100%); border:1px solid #2C2C2C;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.pp-o .pv-o{width:1.05em}
.pp-co{display:grid; gap:.15em; min-width:0}
.pp-co b{font:600 1.04em/1.15 "Inter Tight",var(--au-head); letter-spacing:-.01em; color:#FFFFFF; white-space:nowrap}
.pp-co span{font:400 .82em/1.2 var(--au-body); color:#8A8A8A; white-space:nowrap}
.pp-nav{
  position:relative; display:flex; align-items:center; gap:.7em; height:2.35em; padding:0 .55em;
  border-radius:.62em; font:500 .98em/1 var(--au-body); color:#A6A6A6; white-space:nowrap;
}
.pp-nav.is-on{background:#161616; color:#FFFFFF; font-weight:600; box-shadow:inset 0 0 0 1px #262626}
.pp-nav.is-on::before{content:""; position:absolute; left:-.6em; top:.6em; bottom:.6em; width:.2em; border-radius:0 .2em .2em 0; background:var(--pp-lime); box-shadow:0 0 .8em rgba(200,240,49,.6)}
.pp-m{flex:none; width:1.55em; height:1.55em; border-radius:.42em; background:center / 100% 100% no-repeat; box-shadow:0 .15em .4em -.1em rgba(0,0,0,.8)}
.pp-m--overview{background-image:url("/assets/places/overview.svg?v=6f150c68")}
.pp-m--projects{background-image:url("/assets/places/projects.svg?v=7973ad0d")}
.pp-m--approvals{background-image:url("/assets/places/approvals.svg?v=1899c965")}
.pp-m--billing{background-image:url("/assets/places/billing.svg?v=78f15b71")}
.pp-m--requests{background-image:url("/assets/places/requests.svg?v=c3c62cf5")}
.pp-m--files{background-image:url("/assets/places/files.svg?v=270afe5a")}
.pp-n{
  margin-left:auto; display:grid; place-items:center; min-width:1.45em; height:1.45em; padding:0 .4em; border-radius:.4em;
  background:var(--pp-lime); color:#0A0A0A; font:650 .8em/1 var(--au-body); font-variant-numeric:tabular-nums;
  box-shadow:0 0 .9em -.2em rgba(200,240,49,.55);
}
.pp-n--approve, .pp-n--bill{visibility:hidden}          /* the last frame: nothing waits */
.pp-prods{margin-top:auto; padding:.8em .3em 0; border-top:1px solid #1E1E1E; display:grid; gap:.55em}
.pp-pk{font:500 .78em/1 var(--au-body); color:#8A8A8A}
.pp-pl{display:flex; gap:.45em}
.pp-p{width:2.05em; height:2.05em; border-radius:.55em; background:center / 100% 100% no-repeat; box-shadow:0 .4em .8em -.4em #000}
.pp-p--website{background-image:url("/assets/tools/website.svg?v=8efc1d59")}
.pp-p--book{background-image:url("/assets/tools/book.svg?v=906c10f4")}
.pp-p--social{background-image:url("/assets/tools/social.svg?v=9b2f830f")}
.pp-p--care{background-image:url("/assets/tools/care.svg?v=4032136d")}

/* The sheet. */
.pp-sheet{
  position:relative; overflow:hidden; min-width:0; border-radius:1.05em;
  background:#F4F4F2; color:var(--pp-ink);
}
.pp-sheet::before{
  content:""; position:absolute; inset:0 0 auto; height:11em; pointer-events:none;
  background:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px) 0 0 / 1.6em 1.6em,
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px) 0 0 / 1.6em 1.6em;
  -webkit-mask-image:linear-gradient(#000, transparent); mask-image:linear-gradient(#000, transparent);
}
.pp-live{position:relative; display:flex; flex-direction:column; height:100%; padding:1.35em 1.6em 1.3em}
.pp-top{display:flex; align-items:center; justify-content:space-between; gap:1em}
.pp-eye{display:inline-flex; align-items:center; gap:.5em; font:500 .86em/1 var(--au-body); color:#6B6B6B}
.pp-eye i{width:.55em; height:.55em; border-radius:50%; background:var(--pp-lime); box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 0 .28em rgba(200,240,49,.25)}
.pp-sample{font:500 .8em/1 var(--au-body); color:#6B6B6B; padding:.35em .6em; border-radius:99em; background:#EAEAE6}
.pp-hi{margin-top:.55em; font:400 2.65em/1.02 var(--pp-serif); letter-spacing:-.012em; color:#0A0A0A; white-space:nowrap}
.pp-sub{margin-top:.45em; font:400 .98em/1.3 var(--au-body); color:#3A3A3A}
.pp-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75em; margin-top:1.15em}
.pp-tile{
  position:relative; display:flex; flex-direction:column; gap:.35em; min-height:6.4em; padding:.9em 1em .85em;
  background:#FFFFFF; border:1px solid rgba(0,0,0,.055); border-radius:.95em;
  box-shadow:0 .08em .16em rgba(0,0,0,.06), 0 .9em 1.8em -.9em rgba(0,0,0,.2);
}
.pp-k{font:500 .82em/1.2 var(--au-body); color:#555555}
.pp-v{margin-top:auto; font:300 1.72em/1.05 "Inter Tight",var(--au-head); letter-spacing:-.035em; color:#0A0A0A; white-space:nowrap; font-variant-numeric:tabular-nums}
.pp-s{font:400 .76em/1.2 var(--au-body); color:#6B6B6B; white-space:nowrap}
.pp-segs{display:flex; gap:.22em}
.pp-segs i{width:1.25em; height:.36em; border-radius:.2em; background:#E2E2DE}
.pp-segs i:nth-child(-n+2){background:#0A0A0A}
.pp-segs .pp-seg3{background:var(--pp-lime); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.pp-spark{display:block; width:100%; height:1.9em; overflow:visible}
.pp-spark__a{fill:rgba(200,240,49,.28)}
.pp-spark__l{fill:none; stroke:#0A0A0A; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.pp-spark__r{fill:none; stroke:#0A0A0A; stroke-width:7; stroke-linecap:round; vector-effect:non-scaling-stroke}
.pp-spark__d{fill:none; stroke:var(--pp-lime); stroke-width:4.4; stroke-linecap:round; vector-effect:non-scaling-stroke}

/* A state and the one that replaces it, in the same place; the rest state is the last frame. */
.pp-swap{position:relative; display:grid}
.pp-swap > *{grid-area:1 / 1}
.pp-was{visibility:hidden}

/* The decision card. */
.pp-card{
  position:relative; display:grid; grid-template-columns:7.2em minmax(0,1fr) auto; align-items:center; gap:1.05em;
  margin-top:.8em; padding:.75em .9em .75em .75em;
  background:#FFFFFF; border:1px solid rgba(0,0,0,.06); border-radius:1em;
  box-shadow:0 .08em .16em rgba(0,0,0,.06), 0 1.2em 2.4em -1.2em rgba(0,0,0,.28);
}
.pp-card::before{content:""; position:absolute; left:-1px; top:.9em; bottom:.9em; width:.22em; border-radius:0 .2em .2em 0; background:var(--pp-lime)}
.pp-thumb{display:block; width:7.2em; aspect-ratio:16/10; overflow:hidden; border-radius:.55em; box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.pp-thumb img{display:block; width:100%; height:100%; object-fit:cover; object-position:top center}
.pp-cw{display:grid; gap:.3em; min-width:0; justify-items:start}
.pp-ct{font:500 1.18em/1.15 "Inter Tight",var(--au-head); letter-spacing:-.015em; color:#0A0A0A; white-space:nowrap}
.pp-cm{font:400 .8em/1.2 var(--au-body); color:#6B6B6B; white-space:nowrap}
.pp-pill{display:inline-flex; align-items:center; gap:.45em; padding:.28em .65em .28em .55em; border-radius:99em; font:500 .78em/1.2 var(--au-body); white-space:nowrap}
.pp-pill i{width:.48em; height:.48em; border-radius:50%}
.pp-pill--attn{background:var(--pp-lime); color:#0A0A0A; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.pp-pill--attn i{background:#0A0A0A}
.pp-pill--ok{background:#E6F6EE; color:#11744A}
.pp-pill--ok i{background:#2BB673}
.pp-acts{display:grid; gap:.4em; justify-items:stretch}
.pp-btn{display:grid; place-items:center; height:2.15em; padding:0 1em; border-radius:.6em; font:600 .84em/1 var(--au-body); white-space:nowrap; visibility:hidden}
.pp-btn--lime{background:var(--pp-lime); color:#0A0A0A; box-shadow:inset 0 0 0 1px rgba(0,0,0,.85)}
.pp-btn--quiet{background:#FFFFFF; color:#0A0A0A; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.pp-cursor{
  position:absolute; right:3.1em; top:2.2em; z-index:3; width:1.45em; height:auto; overflow:visible;
  fill:#FFFFFF; stroke:#0A0A0A; stroke-width:1.1; stroke-linejoin:round; visibility:hidden;
}

/* The project's living line, as the account draws it. */
.pp-line{display:grid; gap:.6em; margin-top:1.2em; padding:0 .3em}
.pp-track{position:relative; height:.16em; margin:0 .35em; background:#E2E2DE; border-radius:.1em}
.pp-fill{position:absolute; left:0; top:0; bottom:0; width:66.67%; border-radius:.1em; transform-origin:left center;
  background:linear-gradient(90deg, #0A0A0A 0 40%, var(--pp-lime) 50%, #0A0A0A 60% 100%) 0 0 / 260% 100% no-repeat; background-position:0 0}
.pp-dot{position:absolute; top:50%; width:.78em; height:.78em; margin:-.39em 0 0 -.39em; border-radius:50%; background:#FFFFFF; box-shadow:inset 0 0 0 .14em #CFCFCA}
.pp-dot--1{left:0} .pp-dot--2{left:33.33%} .pp-dot--3{left:66.67%} .pp-dot--4{left:100%}
.pp-dot--1, .pp-dot--2{background:#0A0A0A; box-shadow:none}
.pp-dot--3{background:radial-gradient(circle, var(--pp-lime) 0 .17em, #0A0A0A .2em); box-shadow:0 0 0 .3em rgba(200,240,49,.35)}
.pp-steps{display:grid; grid-template-columns:repeat(4,1fr); font:500 .82em/1 var(--au-body); color:#6B6B6B}
.pp-steps span:nth-child(-n+2){color:#3A3A3A}
.pp-steps span:nth-child(2){text-align:center; transform:translateX(-12.5%)}
.pp-steps span:nth-child(3){text-align:center; transform:translateX(12.5%); color:#0A0A0A; font-weight:650}
.pp-steps span:nth-child(4){text-align:right}

/* A message, in from tkati. */
.pp-toast{
  position:absolute; right:1.2em; bottom:1.1em; z-index:2;
  display:grid; grid-template-columns:2.3em minmax(0,1fr) auto; align-items:center; gap:.8em;
  width:min(27em, calc(100% - 2.4em)); padding:.75em .9em;
  background:#0B0B0B; border:1px solid #232323; border-radius:.95em;
  box-shadow:0 1.6em 3em -1.2em rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
}
.pp-av{display:grid; place-items:center; width:2.3em; height:2.3em; border-radius:.62em; background:linear-gradient(180deg,#2A2A2A,#070707); border:1px solid #2C2C2C}
.pp-av .pv-o{width:1.05em}
.pp-msg{display:grid; gap:.18em; min-width:0}
.pp-msg b{font:600 .92em/1.2 var(--au-body); color:#FFFFFF}
.pp-msg span{font:400 .92em/1.3 var(--au-body); color:#CFCFCF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pp-time{align-self:start; font:500 .78em/1.2 var(--au-body); color:#959595}

/* ── THE STORY, one turn of --au-loop (auth.css's beats: approve at 21–25, paid at 44–49, the message at 58–65) ── */
@media (prefers-reduced-motion:no-preference){
  .auth-preview--pro :is(.pp-live, .pp-cursor, .pp-btn, .pp-was, .pp-is, .pp-n, .pp-fill, .pp-dot--3, .pp-step3, .pp-toast, .pp-segs .pp-seg3, .pp-spark__l, .pp-spark__a, .pp-spark__r, .pp-spark__d){
    animation-duration:var(--au-loop); animation-iteration-count:infinite; animation-timing-function:linear; animation-fill-mode:both;
  }
  .auth-preview--pro .pp-live{animation-name:pv-live}
  .auth-preview--pro .pp-cursor{animation-name:pp-cursor; animation-timing-function:cubic-bezier(.45,0,.2,1)}
  .auth-preview--pro .pp-btn{animation-name:pp-btn}
  .auth-preview--pro .pp-btn--lime{animation-name:pp-btn-lime}
  .auth-preview--pro .pp-swap--state .pp-was{animation-name:pp-was-1; animation-timing-function:var(--au-ease)}
  .auth-preview--pro .pp-swap--state .pp-is{animation-name:pp-is-1; animation-timing-function:var(--au-ease)}
  .auth-preview--pro .pp-tile:first-child .pp-was{animation-name:pp-was-2; animation-timing-function:var(--au-ease)}
  .auth-preview--pro .pp-tile:first-child .pp-is{animation-name:pp-is-2; animation-timing-function:var(--au-ease)}
  .auth-preview--pro .pp-swap--bill .pp-was{animation-name:pp-was-3; animation-timing-function:var(--au-ease)}
  .auth-preview--pro .pp-swap--bill .pp-is{animation-name:pp-is-3; animation-timing-function:var(--au-ease)}
  .auth-preview--pro .pp-n--approve{animation-name:pv-n-approve}
  .auth-preview--pro .pp-n--bill{animation-name:pv-n-bill}
  .auth-preview--pro .pp-n--msg{animation-name:pv-n-msg}
  .auth-preview--pro .pp-fill{animation-name:pp-fill; animation-timing-function:var(--au-ease)}
  .auth-preview--pro .pp-dot--3{animation-name:pp-dot}
  .auth-preview--pro .pp-step3{animation-name:pp-step}
  .auth-preview--pro .pp-segs .pp-seg3{animation-name:pp-seg}
  .auth-preview--pro .pp-toast{animation-name:pv-toast; animation-timing-function:var(--au-ease)}
  .auth-preview--pro :is(.pp-spark__l, .pp-spark__a, .pp-spark__r, .pp-spark__d){animation-name:pp-spark; animation-timing-function:var(--au-ease)}
  .auth-preview--pro .pp-spark__l{stroke-dasharray:200; stroke-dashoffset:0; animation-name:pp-spark-l}
  /* The stage the work is at breathes, as the account's does. */
  .auth-preview--pro .pp-dot--3{animation-name:pp-dot, pp-breathe; animation-duration:var(--au-loop), 3.2s; animation-timing-function:linear, ease-in-out; animation-iteration-count:infinite, infinite}
}
@keyframes pp-cursor{
  0%, 8%{visibility:visible; opacity:0; transform:translate(10em, 8em)}
  10%{visibility:visible; opacity:1; transform:translate(9em, 7em)}
  21%{visibility:visible; opacity:1; transform:translate(0, 0)}
  23%{visibility:visible; opacity:1; transform:translate(0, 0) scale(.86)}
  25%{visibility:visible; opacity:1; transform:translate(0, 0) scale(1)}
  33%{visibility:visible; opacity:1; transform:translate(6em, 5em)}
  37%, 100%{visibility:visible; opacity:0; transform:translate(7em, 6em)}
}
@keyframes pp-btn{
  0%, 25.5%{visibility:visible; opacity:1; transform:none}
  29%, 95%{visibility:visible; opacity:0; transform:scale(.96)}
  95.5%, 100%{visibility:visible; opacity:1; transform:none}
}
@keyframes pp-btn-lime{
  0%, 22%{visibility:visible; opacity:1; transform:none; background:#C8F031}
  23.5%{visibility:visible; opacity:1; transform:scale(.94); background:#B4DA22}
  25.5%{visibility:visible; opacity:1; transform:none; background:#C8F031}
  29%, 95%{visibility:visible; opacity:0; transform:scale(.96); background:#C8F031}
  95.5%, 100%{visibility:visible; opacity:1; transform:none; background:#C8F031}
}
/* was → is, at the approval (1), the move to Build (2), the payment (3). */
@keyframes pp-was-1{0%, 25.5%{visibility:visible; opacity:1; transform:none} 28%, 95%{visibility:visible; opacity:0; transform:translateY(-.4em)} 95.5%, 100%{visibility:visible; opacity:1; transform:none}}
@keyframes pp-is-1{0%, 26%{opacity:0; transform:translateY(.4em)} 29%, 95%{opacity:1; transform:none} 95.5%, 100%{opacity:0; transform:translateY(.4em)}}
@keyframes pp-was-2{0%, 33%{visibility:visible; opacity:1; transform:none} 36%, 95%{visibility:visible; opacity:0; transform:translateY(-.4em)} 95.5%, 100%{visibility:visible; opacity:1; transform:none}}
@keyframes pp-is-2{0%, 34%{opacity:0; transform:translateY(.4em)} 37%, 95%{opacity:1; transform:none} 95.5%, 100%{opacity:0; transform:translateY(.4em)}}
@keyframes pp-was-3{0%, 45%{visibility:visible; opacity:1; transform:none} 47.5%, 95%{visibility:visible; opacity:0; transform:translateY(-.4em)} 95.5%, 100%{visibility:visible; opacity:1; transform:none}}
@keyframes pp-is-3{0%, 45.5%{opacity:0; transform:translateY(.4em)} 48.5%, 95%{opacity:1; transform:none} 95.5%, 100%{opacity:0; transform:translateY(.4em)}}
@keyframes pp-fill{0%, 28%{transform:scaleX(.5); background-position:100% 0} 38%{transform:none; background-position:100% 0} 48%, 95%{transform:none; background-position:0 0} 95.5%, 100%{transform:scaleX(.5); background-position:100% 0}}
@keyframes pp-dot{
  0%, 36%{background:#FFFFFF; box-shadow:inset 0 0 0 .14em #CFCFCA}
  38%, 95%{background:radial-gradient(circle, #C8F031 0 .17em, #0A0A0A .2em)}
  95.5%, 100%{background:#FFFFFF; box-shadow:inset 0 0 0 .14em #CFCFCA}
}
@keyframes pp-breathe{0%, 100%{box-shadow:0 0 0 0 rgba(200,240,49,0)} 45%{box-shadow:0 0 0 .38em rgba(200,240,49,.4)}}
@keyframes pp-step{0%, 36%{color:#6B6B6B; font-weight:500} 38%, 95%{color:#0A0A0A; font-weight:650} 95.5%, 100%{color:#6B6B6B; font-weight:500}}
@keyframes pp-seg{0%, 36%{background:#E2E2DE; box-shadow:none} 38%, 95%{background:#C8F031; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)} 95.5%, 100%{background:#E2E2DE; box-shadow:none}}
@keyframes pp-spark{0%, 4%{opacity:0} 14%, 100%{opacity:1}}
@keyframes pp-spark-l{0%, 4%{stroke-dashoffset:200} 18%, 100%{stroke-dashoffset:0}}

/* The words, the preview and the ground arrive as the classic door's do (auth.css au-rise). */

/* ── THE PHONE'S TELLING: notifications, now in the account's light ───────── */
@media (max-width:1023px){
  :root:not([data-theme="classic"]) .auth-ticker .tk{
    background:#FFFFFF; border-color:rgba(0,0,0,.07); box-shadow:0 14px 28px -16px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.06);
    grid-template-columns:28px minmax(0,1fr) auto;
  }
  :root:not([data-theme="classic"]) .auth-ticker .tk-body b{color:#0A0A0A}
  :root:not([data-theme="classic"]) .auth-ticker .tk-body span{color:#3A3A3A}
  :root:not([data-theme="classic"]) .auth-ticker .tk-time{color:#6B6B6B}
  /* Each says what it is by its place's mark: an approval, a payment, a message from tkati. */
  :root:not([data-theme="classic"]) .auth-ticker .tk-dot{width:28px; height:28px; margin:0; border-radius:8px; background:center / 100% 100% no-repeat; box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
  :root:not([data-theme="classic"]) .auth-ticker .tk--1 .tk-dot{background-image:url("/assets/places/approvals.svg?v=1899c965")}
  :root:not([data-theme="classic"]) .auth-ticker .tk--2 .tk-dot{background-image:url("/assets/places/billing.svg?v=78f15b71")}
  :root:not([data-theme="classic"]) .auth-ticker .tk--3 .tk-dot{background-image:url("/assets/places/requests.svg?v=c3c62cf5")}
  :root:not([data-theme="classic"]) .auth-ticker .tk-sample{color:#555555}
}
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  :root:not([data-theme="classic"]) .auth-ticker .tk--1{animation-name:tk-1-pro}
  :root:not([data-theme="classic"]) .auth-ticker .tk--2{animation-name:tk-2-pro}
}
@keyframes tk-1-pro{
  0%, 30%{opacity:1; transform:none}
  32.5%, 63%{opacity:1; transform:translateY(9px) scale(.95)}
  65.5%, 92%{opacity:1; transform:translateY(17px) scale(.9)}
  95%{opacity:0; transform:translateY(17px) scale(.9)}
  96%{opacity:0; transform:translateY(-14px)}
  99%, 100%{opacity:1; transform:none}
}
@keyframes tk-2-pro{
  0%, 30%{opacity:0; transform:translateY(-14px)}
  32.5%, 63%{opacity:1; transform:none}
  65.5%, 92%{opacity:1; transform:translateY(9px) scale(.95)}
  95%, 100%{opacity:0; transform:translateY(9px) scale(.95)}
}
:root:not([data-theme="classic"]) .auth-ticker .tk--2{background:#FFFFFF}
:root:not([data-theme="classic"]) .auth-ticker .tk--1{background:#FFFFFF}

/* ── FORCED COLOURS: pictures go, as the classic door's do ─────────────────── */
@media (forced-colors:active){
  :root:not([data-theme="classic"]) .auth-world > :is(.au-growth, .au-core){display:none}
}