/* PIN gate page (gate.html). Tokens first: one set per theme, no colour literals below this block.
   Another site overrides only --gate-brand / --gate-brand-deep / --gate-on-brand. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(jbmono-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(jbmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root,html[data-theme="dark"]{
  --gate-bg:#0d0c11;--gate-card:#17161cee;--gate-card-edge:#2f2d37;--gate-fg:#ecebf0;--gate-muted:#a29eab;
  --gate-cell:#1f1e25;--gate-cell-edge:#3a3743;--gate-ring:#ffffff16;--gate-grid:#ffffff0b;--gate-planet:#6d6a78;
  --gate-brand:#3573dc;--gate-brand-deep:#1f4fa8;--gate-on-brand:#ffffff;
  --gate-ok:#3ccf91;--gate-error:#ff6b6b;--gate-shadow:0 30px 80px #000000b0;
  --gate-glow-a:.22;color-scheme:dark}
html[data-theme="light"]{
  --gate-bg:#f3f2f5;--gate-card:#ffffffee;--gate-card-edge:#e1dfe6;--gate-fg:#1d1b22;--gate-muted:#5f5b68;
  --gate-cell:#f1f0f4;--gate-cell-edge:#cfccd6;--gate-ring:#1d1b2220;--gate-grid:#1d1b2210;--gate-planet:#8d8996;
  --gate-brand:#003c96;--gate-brand-deep:#002a6b;--gate-on-brand:#ffffff;
  --gate-ok:#13845a;--gate-error:#c8283a;--gate-shadow:0 26px 70px #3b2a4a26;
  --gate-glow-a:.13;color-scheme:light}
:root{--rt-brand:var(--gate-brand);--rt-on-brand:var(--gate-on-brand);--gate-spring:cubic-bezier(.34,1.56,.64,1);--gate-ease:cubic-bezier(.22,.8,.24,1)}

*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
@media (min-width:1900px){html{font-size:19px}}
@media (min-width:2600px){html{font-size:25px}}
@media (min-width:3400px){html{font-size:32px}}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--gate-bg);color:var(--gate-fg);font:400 1rem/1.5 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Background: a faint grid and slow orbits seen at an angle. Only transforms animate. */
.gate-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;perspective:1500px;
  background:radial-gradient(60rem 36rem at 50% -8%,color-mix(in srgb,var(--gate-brand) calc(var(--gate-glow-a) * 100%),transparent),transparent 70%)}
.gate-bg::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--gate-grid) 1px,transparent 1px),linear-gradient(90deg,var(--gate-grid) 1px,transparent 1px);background-size:3.2rem 3.2rem;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 48%,#000 0%,transparent 78%);mask-image:radial-gradient(ellipse 70% 60% at 50% 48%,#000 0%,transparent 78%)}
.gate-orbits{position:absolute;inset:0;transform-style:preserve-3d;transform:translateY(6%) rotateX(68deg)}
.gate-orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid var(--gate-ring);transform:translate(-50%,-50%) rotate(0deg);animation:gate-spin 120s linear infinite}
.gate-orbit::after{content:"";position:absolute;top:-.3rem;left:50%;width:.6rem;height:.6rem;margin-left:-.3rem;border-radius:50%;background:var(--gate-planet)}
.gate-orbit.o1{width:min(64vmax,64rem);height:min(64vmax,64rem);animation-duration:90s}
.gate-orbit.o1::after{background:var(--gate-brand);box-shadow:0 0 1.4rem .2rem color-mix(in srgb,var(--gate-brand) 55%,transparent)}
.gate-orbit.o2{width:min(96vmax,96rem);height:min(96vmax,96rem);animation-duration:150s;animation-direction:reverse}
.gate-orbit.o3{width:min(132vmax,132rem);height:min(132vmax,132rem);animation-duration:220s}
@keyframes gate-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Card */
.gate{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:1.5rem 1rem}
.gate-card{position:relative;width:min(100%,27rem);padding:clamp(1.6rem,5vw,2.6rem) clamp(1.3rem,5vw,2.4rem) 1.5rem;border-radius:8px;background:var(--gate-card);border:1px solid var(--gate-card-edge);box-shadow:var(--gate-shadow);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:gate-rise .7s var(--gate-spring) both}
.gate-card::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gate-brand),transparent);opacity:.9}
@keyframes gate-rise{from{opacity:0;transform:translateY(1.4rem) scale(.97)}to{opacity:1;transform:none}}

.gate-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.7rem;animation:gate-rise .7s .06s var(--gate-spring) both}
.gate-brand .brand-icon{display:grid;flex:none;filter:drop-shadow(0 .3rem 1rem color-mix(in srgb,var(--gate-brand) 38%,transparent))}
.gate-brand svg{width:2.7rem;height:2.7rem;display:block}
.rt-brand-text{display:flex;flex-direction:column;font-weight:800;font-size:1.05rem;letter-spacing:.2em;line-height:1.1}
.rt-brand-text small{margin-top:.28rem;font:500 .6rem/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em;color:var(--gate-muted)}

.gate h1{margin:0 0 1.3rem;font-size:clamp(1.35rem,4.6vw,1.65rem);line-height:1.2;font-weight:700;letter-spacing:-.01em;animation:gate-rise .7s .12s var(--gate-spring) both}

/* Digit cells */
.gate-form{margin:0}
.gate-stage{position:relative;animation:gate-rise .7s .18s var(--gate-spring) both}
.gate-cells{display:flex;justify-content:space-between;gap:clamp(.5rem,2.4vw,.8rem);transition:opacity .3s var(--gate-ease),transform .45s var(--gate-ease)}
.gate-cell{position:relative;flex:1 1 0;max-width:5.2rem;aspect-ratio:4/5;display:grid;place-items:center;border-radius:8px;background:var(--gate-cell);border:1px solid var(--gate-cell-edge);
  transition:border-color .2s,box-shadow .25s,transform .35s var(--gate-spring),background-color .2s}
.gate-cell input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:transparent;caret-color:transparent;text-align:center;
  font:600 1.7rem/1 'JetBrains Mono',ui-monospace,monospace;outline:none;-webkit-appearance:none;appearance:none;cursor:text}
.gate-cell input::selection{background:transparent}
.gate-cell i{width:.9rem;height:.9rem;border-radius:50%;background:var(--gate-fg);transform:scale(0);transition:transform .32s var(--gate-spring),background-color .2s;pointer-events:none}
.gate-cell.is-filled i{transform:scale(1)}
.gate-cell:focus-within{border-color:color-mix(in srgb,var(--gate-brand) 70%,var(--gate-cell-edge));box-shadow:0 0 0 .22rem color-mix(in srgb,var(--gate-brand) 24%,transparent),0 .5rem 1.6rem color-mix(in srgb,var(--gate-brand) 18%,transparent);transform:translateY(-.15rem)}
.gate-cell:focus-within:not(.is-filled)::after{content:"";position:absolute;width:2px;height:1.5rem;border-radius:1px;background:var(--gate-brand);animation:gate-caret 1.05s steps(1) infinite;pointer-events:none}
@keyframes gate-caret{50%{opacity:0}}

/* States */
.gate-form[data-state="checking"] .gate-cell{animation:gate-pulse .9s ease-in-out infinite;animation-delay:calc(var(--n) * 110ms)}
@keyframes gate-pulse{50%{transform:translateY(-.2rem);border-color:var(--gate-brand)}}
.gate-form[data-state="wrong"] .gate-cell,.gate-form[data-state="limited"] .gate-cell,.gate-form[data-state="offline"] .gate-cell{border-color:var(--gate-error);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--gate-error) 20%,transparent)}
.gate-form[data-state="wrong"] .gate-cell i,.gate-form[data-state="limited"] .gate-cell i,.gate-form[data-state="offline"] .gate-cell i{background:var(--gate-error)}
.gate-form[data-state="ok"] .gate-cells{opacity:0;transform:scale(.82)}
.gate-form[data-state="ok"] .gate-cell{border-color:var(--gate-ok)}

.gate-check{position:absolute;left:50%;top:50%;width:4.4rem;height:4.4rem;margin:-2.2rem 0 0 -2.2rem;color:var(--gate-ok);opacity:0;transform:scale(.6);transition:opacity .25s,transform .55s var(--gate-spring);pointer-events:none}
.gate-check circle,.gate-check path{stroke-dasharray:1;stroke-dashoffset:1}
.gate-form[data-state="ok"] .gate-check{opacity:1;transform:scale(1);transition-delay:.12s}
.gate-form[data-state="ok"] .gate-check circle{animation:gate-draw .55s .15s var(--gate-ease) forwards}
.gate-form[data-state="ok"] .gate-check path{animation:gate-draw .4s .5s var(--gate-ease) forwards}
@keyframes gate-draw{to{stroke-dashoffset:0}}
.gate-form[data-state="ok"] ~ .gate-note{opacity:0}
.gate-card:has(.gate-form[data-state="ok"]){border-color:color-mix(in srgb,var(--gate-ok) 55%,var(--gate-card-edge));box-shadow:var(--gate-shadow),0 0 3rem color-mix(in srgb,var(--gate-ok) 16%,transparent);transition:border-color .3s,box-shadow .4s}

.gate-msg{min-height:1.5rem;margin:1rem 0 0;font-size:.9rem;font-weight:500;text-align:center;color:var(--gate-muted);transition:color .2s}
.gate-form[data-state="wrong"] .gate-msg,.gate-form[data-state="limited"] .gate-msg,.gate-form[data-state="offline"] .gate-msg{color:var(--gate-error)}
.gate-form[data-state="ok"] .gate-msg{color:var(--gate-ok)}

.gate-note{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--gate-card-edge);font-size:.78rem;color:var(--gate-muted);animation:gate-rise .7s .3s var(--gate-spring) both;transition:opacity .3s}
.gate-note svg{width:.95rem;height:.95rem;flex:none}
.gate-nojs{margin:1rem 0 0;font-size:.85rem;color:var(--gate-error);text-align:center}

@media (max-width:420px){.gate{padding:1rem .75rem}.gate-cell input{font-size:1.5rem}}
@media (max-height:560px){.gate{place-items:start center}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .gate-check circle,.gate-check path{stroke-dashoffset:0}
}

:root{--lenta-accent:#ffb900}