/* 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:#e4262e;--gate-brand-deep:#a8121a;--gate-on-brand:#ffffff;
  --gate-ok:#3ccf91;--gate-error:#ff6b6b;--gate-shadow:0 30px 80px #000000b0;
  --gate-glow-a:.22;color-scheme:dark;
  --gate-video-bg:#000000;--gate-video-fg:#ffffff;--gate-video-scrim:#000000c4;--gate-video-track:#ffffff3d;--gate-video-buf:#ffffff6b;--gate-cue-bg:#000000b8}
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:#d61f27;--gate-brand-deep:#9d1016;--gate-on-brand:#ffffff;
  --gate-ok:#13845a;--gate-error:#c8283a;--gate-shadow:0 26px 70px #3b2a4a26;
  --gate-glow-a:.13;color-scheme:light;
  --gate-video-bg:#000000;--gate-video-fg:#ffffff;--gate-video-scrim:#000000b0;--gate-video-track:#ffffff3d;--gate-video-buf:#ffffff6b;--gate-cue-bg:#000000b8}
: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}

/* Show materials next to the code card (owner, 14.11.2026): the film and the deck are open before the code.
   Wide screens: materials left, the code right; narrow: the code first, materials under it. */
.gate.has-show{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem 1rem}
.gate.has-show .gate-card{flex:none}
.show-card{position:relative;width:min(100%,27rem);padding:1.4rem 1.4rem 1.2rem;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 .1s var(--gate-spring) both}
@media (min-width:1080px){
  .gate.has-show{flex-direction:row;align-items:center;gap:2rem;padding:2rem}
  .gate.has-show .show-card{order:-1;width:min(52rem,calc(100vw - 27rem - 6rem));padding:1.6rem 1.6rem 1.3rem}
}
.show-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;margin-bottom:1rem}
.show-head h2{margin:0;font-size:1.15rem;line-height:1.25;font-weight:700;letter-spacing:-.005em}
.show-head p{margin:0;font-size:.85rem;color:var(--gate-muted)}

.show-player{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--gate-video-bg);border:1px solid var(--gate-card-edge);isolation:isolate}
.show-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:var(--gate-video-bg)}
.show-player video::cue{background:var(--gate-cue-bg);color:var(--gate-video-fg);font-family:'Inter',system-ui,sans-serif;font-size:1rem;line-height:1.35}
.show-player:fullscreen{border:0;border-radius:0;aspect-ratio:auto;width:100%;height:100%}
.show-player:fullscreen video::cue{font-size:1.6rem}

.show-big{position:absolute;left:50%;top:50%;z-index:2;display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.3rem .85rem 1.05rem;border:0;border-radius:8px;
  background:var(--gate-brand);color:var(--gate-on-brand);font:600 1rem/1 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap;transform:translate(-50%,-50%);
  box-shadow:0 .8rem 2.4rem color-mix(in srgb,var(--gate-brand) 45%,transparent);transition:transform .35s var(--gate-spring),opacity .25s var(--gate-ease),box-shadow .25s}
.show-big svg{width:1.25rem;height:1.25rem}
.show-big:hover{transform:translate(-50%,-50%) scale(1.05)}
.show-big:focus-visible{outline:none;box-shadow:0 0 0 .25rem color-mix(in srgb,var(--gate-video-fg) 55%,transparent),0 .8rem 2.4rem color-mix(in srgb,var(--gate-brand) 45%,transparent)}
.show-player:not([data-state="idle"]) .show-big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}

.show-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:.35rem;padding:2.2rem .6rem .5rem;color:var(--gate-video-fg);
  background:linear-gradient(to top,var(--gate-video-scrim),transparent);opacity:0;transform:translateY(.4rem);pointer-events:none;transition:opacity .25s var(--gate-ease),transform .3s var(--gate-ease)}
.show-player:not([data-state="idle"]):is(:hover,:focus-within,.is-awake,[data-state="paused"],[data-state="ended"]) .show-bar{opacity:1;transform:none;pointer-events:auto}
.show-player[data-state="playing"]:not(.is-awake):not(:focus-within){cursor:none}
.show-ctl{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer;transition:background-color .2s,color .2s}
.show-ctl svg{width:1.15rem;height:1.15rem}
.show-ctl:hover,.show-ctl:focus-visible{outline:none;background:color-mix(in srgb,var(--gate-video-fg) 16%,transparent)}
.show-ctl[aria-pressed="true"]{color:var(--gate-brand)}
.show-ctl .i-pause,.show-ctl .i-mute{display:none}
.show-player[data-state="playing"] .i-play{display:none}
.show-player[data-state="playing"] .i-pause{display:block}
.show-player.is-muted .i-sound{display:none}
.show-player.is-muted .i-mute{display:block}
.show-time{flex:none;min-width:5.6rem;font:500 .78rem/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:.9}
.show-time b{font-weight:600}
.show-seek{position:relative;flex:1 1 auto;height:1.6rem;cursor:pointer;touch-action:none;outline:none}
.show-seek i,.show-seek::before{content:"";position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.show-seek::before{right:0;background:var(--gate-video-track)}
.show-buf{width:0;background:var(--gate-video-buf)}
.show-fill{width:0;background:var(--gate-brand)}
.show-knob{position:absolute;top:50%;left:0;width:.8rem;height:.8rem;margin:-.4rem 0 0 -.4rem;border-radius:50%;background:var(--gate-video-fg);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--gate-brand) 60%,transparent);transform:scale(.6);transition:transform .25s var(--gate-spring)}
.show-seek:hover .show-knob,.show-seek:focus-visible .show-knob,.show-seek.is-drag .show-knob{transform:scale(1)}
.show-seek:focus-visible::before{box-shadow:0 0 0 .18rem color-mix(in srgb,var(--gate-video-fg) 40%,transparent)}

.show-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.show-btn{flex:1 1 12rem;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:2.75rem;padding:.6rem 1rem;border-radius:8px;border:1px solid var(--gate-cell-edge);
  background:var(--gate-cell);color:var(--gate-fg);font:600 .92rem/1.2 'Inter',system-ui,sans-serif;text-decoration:none;transition:border-color .2s,box-shadow .25s,transform .35s var(--gate-spring),background-color .2s}
.show-btn svg{width:1.1rem;height:1.1rem;flex:none}
.show-btn.is-primary{background:var(--gate-brand);border-color:var(--gate-brand);color:var(--gate-on-brand)}
.show-btn:hover{transform:translateY(-.12rem);box-shadow:0 .5rem 1.4rem color-mix(in srgb,var(--gate-brand) 20%,transparent);text-decoration:none}
.show-btn:focus-visible{outline:none;box-shadow:0 0 0 .22rem color-mix(in srgb,var(--gate-brand) 30%,transparent)}
.show-note{margin:.85rem 0 0;font-size:.78rem;color:var(--gate-muted)}

@media (max-width:420px){.gate{padding:1rem .75rem}.gate-cell input{font-size:1.5rem}.show-card{padding:1rem}.show-big{padding:.7rem 1rem .7rem .85rem;font-size:.92rem}.show-time{min-width:0;font-size:.7rem}.show-ctl{width:1.9rem}}
@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}
}