/* ===========================================================================================
   AUTH GATE (sign in / sign up). Everything is scoped to #auth-gate, so no rule here can reach
   the app. Colours come from the palette tokens; /auth/gate.js blends them ON #auth-gate only
   (inline custom properties on the gate), so the member's own palette is untouched after sign-in.
   Built from auth-demos/demo-04 (owner picked "all three, rotating", 26-Sep-2026).
   =========================================================================================== */
#auth-gate{ --ease:cubic-bezier(.2,.8,.2,1); background:rgb(var(--c-cream)); color:rgb(var(--c-charcoal)); font-family:Inter, system-ui, sans-serif; }
#auth-gate .ag-shell{ position:relative; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(440px,1fr); }
#auth-gate .serif, #auth-gate .ag-h, #auth-gate h2{ font-family:"DM Serif Display", Georgia, serif; font-weight:400; }
#auth-gate button{ font:inherit; }
#auth-gate :focus-visible{ outline:2px solid rgb(var(--c-brass)); outline-offset:2px; }

/* ------------------------------ the form side ------------------------------ */
#auth-gate .ag-side{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:40px clamp(28px,5vw,80px) 48px;
  background:rgb(var(--c-paper)); min-height:100%; }
#auth-gate .ag-back{ position:absolute; top:22px; right:26px; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500;
  color:rgb(var(--c-muted)); text-decoration:none; padding:6px 10px; border-radius:8px; }
#auth-gate .ag-back:hover{ color:rgb(var(--c-charcoal)); background:rgb(var(--c-cream)); }
#auth-gate .ag-back svg{ width:15px; height:15px; }
#auth-gate .ag-card{ width:100%; max-width:400px; margin:0 auto; }
#auth-gate .ag-brand{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
#auth-gate .ag-mark{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgb(var(--c-navy));
  color:rgb(var(--c-brass)); font:22px/1 "DM Serif Display", Georgia, serif; }
#auth-gate .ag-brand b{ display:block; font:17px/1.1 "DM Serif Display", Georgia, serif; font-weight:400; color:rgb(var(--c-heading)); }
#auth-gate .ag-brand small{ display:block; font-size:11.5px; color:rgb(var(--c-muted)); }
#auth-gate .ag-h{ margin:0; font-size:clamp(28px,3.1vw,34px); line-height:1.08; letter-spacing:-.01em; color:rgb(var(--c-heading)); }
#auth-gate .ag-lede{ margin:8px 0 20px; font-size:14px; line-height:1.5; color:rgb(var(--c-muted)); }
#auth-gate .ag-center{ text-align:center; }

#auth-gate .ag-seg{ position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4px; margin-bottom:24px; border-radius:12px;
  background:rgb(var(--c-cream)); border:1px solid rgb(var(--c-hair)); }
#auth-gate .ag-seg[hidden]{ display:none; }
#auth-gate .ag-seg button{ position:relative; z-index:1; height:38px; border:0; background:none; border-radius:9px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:rgb(var(--c-muted)); transition:color .25s var(--ease), transform .12s; }
#auth-gate .ag-seg button[aria-selected="true"]{ color:rgb(var(--c-heading)); }
#auth-gate .ag-seg button:active{ transform:scale(.97); }
#auth-gate .ag-seg .thumb{ position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:9px; background:rgb(var(--c-paper));
  box-shadow:0 1px 2px rgb(0 0 0 / .08), 0 4px 14px -6px rgb(0 0 0 / .18); transition:transform .45s var(--ease); }
#auth-gate .ag-seg.up .thumb{ transform:translateX(100%); }

/* panels: app.js toggles .hidden; each arrival replays this */
#auth-gate .ag-panel:not(.hidden), #auth-gate .ag-step:not(.hidden){ animation:ag-in .45s var(--ease) both; }
@keyframes ag-in{ from{ opacity:0; transform:translateX(18px) } }

/* floating-label fields */
#auth-gate .agf{ position:relative; margin-bottom:12px; }
#auth-gate .agf input{ width:100%; height:54px; padding:20px 44px 6px 44px; border-radius:12px; border:1px solid rgb(var(--c-hair));
  background:rgb(var(--c-paper)); color:rgb(var(--c-charcoal)); font-size:16px; outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color .2s, box-shadow .2s; }
#auth-gate .agf label{ position:absolute; left:44px; right:44px; top:17px; font-size:14.5px; color:rgb(var(--c-muted)); pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transform-origin:0 0; transition:transform .22s var(--ease), color .2s; }
#auth-gate .agf input:focus + label, #auth-gate .agf input:not(:placeholder-shown) + label{ transform:translateY(-10px) scale(.78); right:0; }
#auth-gate .agf input:focus{ border-color:rgb(var(--c-brass)); box-shadow:0 0 0 4px rgb(var(--c-brass) / .14); }
#auth-gate .agf input:focus + label{ color:rgb(var(--c-accink)); }
#auth-gate .agf-ic{ position:absolute; left:14px; top:17px; width:20px; height:20px; color:rgb(var(--c-muted)); pointer-events:none; transition:color .2s; }
#auth-gate .agf input:focus ~ .agf-ic{ color:rgb(var(--c-brass)); }
#auth-gate .agf.bad input{ border-color:#B02A2A; }
#auth-gate .agf .ag-pw-toggle{ top:27px; right:6px; width:40px; height:40px; border-radius:9px; }
#auth-gate .agf-hint{ margin:-6px 2px 10px; font-size:12.5px; color:rgb(var(--c-muted)); }
#auth-gate .agf-hint:empty{ display:none; }
#auth-gate .agf-hint.bad{ color:#B02A2A; } #auth-gate .agf-hint.good{ color:rgb(var(--c-success)); }
:root[data-appearance="night"] #auth-gate .agf-hint.bad{ color:#F0786E; }
#auth-gate .agf-hint button{ border:0; background:none; padding:0; color:rgb(var(--c-accink)); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
#auth-gate .ag-meter{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:-4px 2px 8px; }
#auth-gate .ag-meter i{ height:4px; border-radius:4px; background:rgb(var(--c-hair)); transition:background .3s; }
#auth-gate .ag-meter[data-s="1"] i:nth-child(-n+1){ background:#B02A2A; }
#auth-gate .ag-meter[data-s="2"] i:nth-child(-n+2){ background:rgb(var(--c-brass)); }
#auth-gate .ag-meter[data-s="3"] i:nth-child(-n+3){ background:rgb(var(--c-success) / .75); }
#auth-gate .ag-meter[data-s="4"] i{ background:rgb(var(--c-success)); }

#auth-gate .ag-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 18px; font-size:13.5px; }
#auth-gate .ag-check{ position:relative; display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13.5px; line-height:1.45; color:rgb(var(--c-charcoal)); }
#auth-gate .ag-check input{ position:absolute; opacity:0; width:1px; height:1px; }
#auth-gate .ag-check .box{ flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid rgb(var(--c-hair)); background:rgb(var(--c-paper));
  display:grid; place-items:center; transition:background .2s, border-color .2s, transform .15s; }
#auth-gate .ag-check .box svg{ width:13px; height:13px; color:rgb(var(--c-onacc)); stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .3s var(--ease); }
#auth-gate .ag-check input:checked + .box{ background:rgb(var(--c-brass)); border-color:rgb(var(--c-brass)); }
#auth-gate .ag-check input:checked + .box svg{ stroke-dashoffset:0; }
#auth-gate .ag-check input:focus-visible + .box{ outline:2px solid rgb(var(--c-brass)); outline-offset:2px; }
#auth-gate .ag-check:active .box{ transform:scale(.9); }
#auth-gate .ag-agree{ margin:6px 0 16px; font-size:13px; }
#auth-gate .ag-agree.bad .box{ border-color:#B02A2A; }
#auth-gate .ag-link{ color:rgb(var(--c-accink)); font-weight:600; text-decoration:none; }
#auth-gate .ag-link:hover{ text-decoration:underline; text-underline-offset:3px; }
#auth-gate .ag-backlink{ display:inline-flex; align-items:center; gap:4px; margin:0 0 10px; font-size:13.5px; }
#auth-gate .ag-backlink svg{ width:16px; height:16px; }
#auth-gate .ag-foot{ margin:14px 0 0; text-align:center; font-size:13.5px; color:rgb(var(--c-muted)); }
#auth-gate .ag-secure{ margin:18px 0 0; text-align:center; font-size:11.5px; color:rgb(var(--c-muted) / .8); }

#auth-gate .ag-go{ position:relative; width:100%; height:52px; border:0; border-radius:12px; cursor:pointer;
  background:rgb(var(--c-brass)); color:rgb(var(--c-onacc)); font-size:15px; font-weight:600; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 1px 0 rgb(255 255 255 / .25) inset, 0 10px 24px -12px rgb(var(--c-brass) / .9); transition:transform .12s ease-out, filter .2s; }
#auth-gate .ag-go:hover{ filter:brightness(1.06); }
#auth-gate .ag-go:active{ transform:scale(.98); }
#auth-gate .ag-go svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
#auth-gate .ag-go:hover svg{ transform:translateX(3px); }
#auth-gate .ag-go[disabled]{ cursor:default; filter:saturate(.5) opacity(.75); }
#auth-gate .ag-go[hidden]{ display:none; }
#auth-gate .ag-go + .ag-go{ margin-top:10px; }
#auth-gate .ag-ghost{ background:rgb(var(--c-paper)); color:rgb(var(--c-heading)); border:1px solid rgb(var(--c-hair)); box-shadow:none; }
#auth-gate #ag-error:empty{ display:none; }

#auth-gate .ag-steps{ display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:12px; font-weight:600; color:rgb(var(--c-muted)); }
#auth-gate .ag-steps .bar{ flex:1; height:4px; border-radius:4px; background:rgb(var(--c-hair)); overflow:hidden; }
#auth-gate .ag-steps .bar i{ display:block; height:100%; width:50%; border-radius:4px; background:rgb(var(--c-brass)); transition:width .5s var(--ease); }
#auth-gate .ag-steps.two .bar i{ width:100%; }
#auth-gate .ag-ref summary{ list-style:none; cursor:pointer; font-size:13.5px; font-weight:600; color:rgb(var(--c-accink)); margin:2px 0 12px; }
#auth-gate .ag-ref summary::-webkit-details-marker{ display:none; }

#auth-gate .ag-addr{ display:inline-block; margin:0 0 12px; padding:6px 12px; border-radius:999px; background:rgb(var(--c-cream));
  border:1px solid rgb(var(--c-hair)); font-weight:600; color:rgb(var(--c-heading)); word-break:break-all; }
#auth-gate .ag-tips{ text-align:left; margin:16px 0 0; padding:12px 14px; border-radius:12px; background:rgb(var(--c-cream)); border:1px solid rgb(var(--c-hair));
  font-size:13px; color:rgb(var(--c-muted)); }
#auth-gate .ag-tips b{ display:block; margin-bottom:4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--c-accink)); }
#auth-gate .ag-tips ul{ margin:0; padding-left:18px; list-style:disc; } #auth-gate .ag-tips li{ margin:3px 0; }
#auth-gate .ag-icon{ width:64px; height:64px; margin:4px auto 16px; border-radius:18px; display:grid; place-items:center; background:rgb(var(--c-brass) / .12); color:rgb(var(--c-brass)); }
#auth-gate .ag-env{ width:96px; height:96px; margin:4px auto 14px; perspective:400px; }
#auth-gate .ag-env .e{ position:relative; width:96px; height:68px; margin-top:18px; border-radius:10px; background:rgb(var(--c-brass) / .14);
  border:1.5px solid rgb(var(--c-brass) / .55); transform-style:preserve-3d; animation:ag-env .9s var(--ease) both; }
#auth-gate .ag-env .flap{ position:absolute; left:-1.5px; right:-1.5px; top:-1.5px; height:44px; transform-origin:50% 0; animation:ag-flap 1s .5s var(--ease) both; }
#auth-gate .ag-env .flap::before{ content:""; position:absolute; inset:0; background:rgb(var(--c-brass)); clip-path:polygon(0 0,100% 0,50% 100%); border-radius:10px 10px 0 0; }
#auth-gate .ag-env .letter{ position:absolute; left:12px; right:12px; top:8px; height:50px; border-radius:6px; background:rgb(var(--c-paper));
  box-shadow:0 2px 8px rgb(0 0 0 / .12); animation:ag-letter .8s 1.1s var(--ease) both; }
#auth-gate .ag-env .letter::before, #auth-gate .ag-env .letter::after{ content:""; position:absolute; left:10px; height:5px; border-radius:3px; background:rgb(var(--c-hair)); }
#auth-gate .ag-env .letter::before{ top:12px; right:26px; } #auth-gate .ag-env .letter::after{ top:24px; right:12px; }
@keyframes ag-env{ from{ transform:translateY(20px) rotateX(30deg); opacity:0 } }
@keyframes ag-flap{ to{ transform:rotateX(180deg) } }
@keyframes ag-letter{ to{ transform:translateY(-26px) } }

/* ------------------------------ the art side ------------------------------ */
#auth-gate .ag-art{ position:relative; overflow:hidden; isolation:isolate; background:rgb(var(--c-navy)); min-height:100%; }
#auth-gate .ag-scene{ position:absolute; inset:0; overflow:hidden; isolation:isolate; opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.035); transition:opacity 1.1s var(--ease), transform 1.4s var(--ease), visibility 0s 1.1s; }
#auth-gate .ag-scene.on{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity 1.1s var(--ease), transform 1.4s var(--ease), visibility 0s; }
#auth-gate .ag-scene.on.settled{ transition:none; }
#auth-gate .rot{ position:absolute; z-index:20; right:clamp(18px,3vw,36px); bottom:clamp(18px,3.5vh,32px); display:flex; gap:6px; padding:5px;
  border-radius:999px; background:rgb(0 0 0 / .22); border:1px solid rgb(255 255 255 / .16); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
#auth-gate .rot button{ position:relative; overflow:hidden; border:0; border-radius:999px; padding:6px 12px; background:transparent; color:rgb(255 255 255 / .75);
  font-size:12px; font-weight:600; cursor:pointer; }
#auth-gate .rot button[aria-current="true"]{ background:rgb(255 255 255 / .16); color:#fff; }
#auth-gate .rot button i{ position:absolute; left:0; bottom:0; height:2px; width:0; background:rgb(var(--c-brass)); }
#auth-gate .rot button[aria-current="true"] i{ width:var(--p,0%); }
#auth-gate .ag-art[data-s="2"] .rot{ background:rgb(var(--c-paper) / .7); border-color:rgb(var(--c-hair)); }
#auth-gate .ag-art[data-s="2"] .rot button{ color:rgb(var(--c-muted)); }
#auth-gate .ag-art[data-s="2"] .rot button[aria-current="true"]{ background:rgb(var(--c-navy)); color:#fff; }
#auth-gate .ag-toast{ position:absolute; z-index:30; left:50%; top:18px; transform:translate(-50%,-20px); opacity:0; padding:9px 14px; border-radius:999px;
  background:rgb(var(--c-paper)); color:rgb(var(--c-charcoal)); font-size:13px; font-weight:500; box-shadow:0 10px 30px -10px rgb(0 0 0 / .5);
  transition:opacity .3s, transform .5s var(--ease); pointer-events:none; white-space:nowrap; max-width:92%; overflow:hidden; text-overflow:ellipsis; }
#auth-gate .ag-toast.on{ opacity:1; transform:translate(-50%,0); }

/* scene 1: Counsel */
#auth-gate .s1{ background:radial-gradient(60% 50% at var(--lx,50%) var(--ly,35%), rgb(var(--c-brass) / .22), transparent 70%),
  radial-gradient(120% 90% at 50% 10%, rgb(var(--c-navy2)), rgb(var(--c-navy)) 60%, rgb(0 0 0 / .9) 140%);
  color:#fff; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; }
#auth-gate .s1.dragging{ cursor:grabbing; }
#auth-gate .s1 .floor{ position:absolute; left:-50%; right:-50%; bottom:-8%; height:52%; z-index:0; pointer-events:none;
  transform:perspective(600px) rotateX(72deg); transform-origin:50% 100%;
  background-image:linear-gradient(rgb(var(--c-brass) / .28) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-brass) / .28) 1px, transparent 1px);
  background-size:64px 64px; animation:ag-drift 14s linear infinite;
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%); mask-image:linear-gradient(to top, #000 10%, transparent 85%); }
@keyframes ag-drift{ to{ background-position:0 64px } }
#auth-gate .s1 .halo{ position:absolute; z-index:0; left:calc(var(--advocate-x,50%) - 190px); top:calc(var(--advocate-y,20%) - 60px); width:380px; height:380px; border-radius:50%;
  background:radial-gradient(closest-side, rgb(var(--c-brass) / .35), transparent); filter:blur(8px); pointer-events:none; }
#auth-gate .s1 .adv-key{ z-index:2; }
#auth-gate .s1 .shadow{ position:absolute; z-index:1; left:calc(var(--advocate-x,50%) - 120px); bottom:4%; width:240px; height:36px; border-radius:50%;
  background:radial-gradient(closest-side, rgb(0 0 0 / .55), transparent); pointer-events:none; }
#auth-gate .s1 .card{ position:absolute; left:0; top:0; width:250px; padding:14px 16px 15px; border-radius:16px; color:#fff; text-align:left;
  background:linear-gradient(160deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05)); border:1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 20px 40px -20px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .25); cursor:pointer; transition:opacity .5s, filter .4s; will-change:transform; }
#auth-gate .s1 .card .k{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:color-mix(in srgb, rgb(var(--c-brass)) 55%, #fff); }
#auth-gate .s1 .card .t{ margin:5px 0 4px; font:21px/1.15 "DM Serif Display", Georgia, serif; }
#auth-gate .s1 .card .d{ font-size:12.5px; line-height:1.45; color:rgb(255 255 255 / .78); }
#auth-gate .s1 .card .q{ margin-top:10px; padding:8px 10px; border-radius:10px; background:rgb(0 0 0 / .22); font-size:12px; line-height:1.4; color:rgb(255 255 255 / .92); }
#auth-gate .s1 .card .q::before{ content:"Try: "; color:color-mix(in srgb, rgb(var(--c-brass)) 60%, #fff); font-weight:600; }
#auth-gate .s1 .card.swap{ opacity:0 !important; }
#auth-gate .s1::after{ content:""; position:absolute; z-index:3; left:0; right:0; bottom:0; height:38%; pointer-events:none;
  background:linear-gradient(to top, rgb(var(--c-navy)) 8%, rgb(var(--c-navy) / .7) 45%, transparent); }
#auth-gate .s1 .caption{ position:absolute; z-index:4; left:clamp(24px,4vw,56px); bottom:clamp(70px,10vh,96px); max-width:420px; pointer-events:none; }
#auth-gate .s1 .caption h2{ margin:0; font-size:clamp(30px,3.4vw,46px); line-height:1.05; letter-spacing:-.015em; color:#fff; }
#auth-gate .s1 .caption h2 em{ color:color-mix(in srgb, rgb(var(--c-brass)) 70%, #fff); }
#auth-gate .s1 .caption p{ margin:10px 0 0; color:rgb(255 255 255 / .72); font-size:14px; }
#auth-gate .s1 .hint{ position:absolute; z-index:4; top:22px; left:clamp(24px,4vw,56px); right:24px; display:flex; align-items:center; gap:10px; font-size:12px; color:rgb(255 255 255 / .6); }
#auth-gate .s1 .hint .mk{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgb(255 255 255 / .1); border:1px solid rgb(255 255 255 / .18);
  font:18px/1 "DM Serif Display", Georgia, serif; color:color-mix(in srgb, rgb(var(--c-brass)) 60%, #fff); }

/* scene 2: Casebook */
#auth-gate .s2{ background:radial-gradient(80% 70% at var(--lx,50%) var(--ly,40%), rgb(var(--c-paper) / .9), transparent 70%),
  linear-gradient(160deg, rgb(var(--c-cream)), color-mix(in srgb, rgb(var(--c-cream)) 82%, rgb(var(--c-navy)))); }
:root[data-appearance="night"] #auth-gate .s2{ background:radial-gradient(80% 70% at var(--lx,50%) var(--ly,40%), rgb(var(--c-navy) / .5), transparent 70%), rgb(var(--c-cream)); }
#auth-gate .s2 .sect{ position:absolute; z-index:0; right:-6%; top:-8%; font:400 560px/1 "DM Serif Display", Georgia, serif; color:rgb(var(--c-navy) / .06);
  transform:perspective(900px) rotateY(var(--sy,0deg)) rotateX(var(--sx,0deg)); pointer-events:none; user-select:none; }
#auth-gate .s2 .head{ position:absolute; z-index:2; left:clamp(22px,4vw,48px); right:clamp(22px,4vw,48px); top:clamp(22px,4.5vh,44px); }
#auth-gate .s2 .head .mk{ display:flex; align-items:center; gap:10px; margin-bottom:22px; font-size:12.5px; color:rgb(var(--c-muted)); }
#auth-gate .s2 .head .mk b{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgb(var(--c-navy)); color:rgb(var(--c-brass)); font:19px/1 "DM Serif Display", Georgia, serif; }
#auth-gate .s2 .head h2{ margin:0; font-size:clamp(28px,2.9vw,40px); line-height:1.06; color:rgb(var(--c-heading)); letter-spacing:-.012em; }
#auth-gate .s2 .head h2 em{ color:rgb(var(--c-accink)); }
#auth-gate .s2 .head p{ margin:8px 0 0; font-size:14px; color:rgb(var(--c-muted)); max-width:380px; }
#auth-gate .s2 .deck{ position:absolute; z-index:2; left:50%; top:56%; width:min(360px, 78%); height:300px; transform:translate(-50%,-50%); perspective:1200px; touch-action:pan-y; outline:none; }
#auth-gate .s2 .tiltwrap{ position:absolute; inset:0; transform-style:preserve-3d; }
#auth-gate .s2 .brief{ position:absolute; inset:0; border-radius:20px; padding:20px 22px; cursor:grab; user-select:none; -webkit-user-select:none;
  background:rgb(var(--c-paper)); border:1px solid rgb(var(--c-hair)); box-shadow:0 1px 0 rgb(255 255 255 / .7) inset, 0 24px 50px -24px rgb(0 0 0 / .35);
  transform-origin:50% 120%; will-change:transform; backface-visibility:hidden; }
#auth-gate .s2 .brief.grab{ cursor:grabbing; }
#auth-gate .s2 .brief .tab{ position:absolute; top:-1px; right:22px; padding:5px 10px 6px; border-radius:0 0 9px 9px; background:rgb(var(--c-navy)); color:#fff; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
#auth-gate .s2 .brief .k{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:rgb(var(--c-accink)); }
#auth-gate .s2 .brief .t{ margin:8px 0 6px; font:400 27px/1.1 "DM Serif Display", Georgia, serif; color:rgb(var(--c-heading)); }
#auth-gate .s2 .brief .d{ font-size:13.5px; line-height:1.5; color:rgb(var(--c-muted)); }
#auth-gate .s2 .brief .demo{ position:absolute; left:18px; right:18px; bottom:16px; }
#auth-gate .s2 .bubble{ display:inline-block; max-width:100%; padding:9px 12px; border-radius:14px 14px 4px 14px; background:rgb(var(--c-navy)); color:#fff; font-size:12.5px; line-height:1.4; min-height:36px; float:right; }
#auth-gate .s2 .bubble .cur{ display:inline-block; width:2px; height:1em; margin-left:1px; vertical-align:-2px; background:currentColor; animation:ag-blink 1s steps(1) infinite; }
@keyframes ag-blink{ 50%{ opacity:0 } }
#auth-gate .s2 .ans{ clear:both; display:flex; gap:6px; flex-wrap:wrap; padding-top:10px; }
#auth-gate .s2 .ans span{ padding:5px 9px; border-radius:999px; font-size:11.5px; font-weight:600; background:rgb(var(--c-cream)); color:rgb(var(--c-heading));
  border:1px solid rgb(var(--c-hair)); opacity:0; transform:translateY(6px); transition:opacity .35s, transform .5s var(--ease); }
#auth-gate .s2 .ans.on span{ opacity:1; transform:none; }
#auth-gate .s2 .ans.on span:nth-child(2){ transition-delay:.12s } #auth-gate .s2 .ans.on span:nth-child(3){ transition-delay:.24s }
#auth-gate .s2 .big{ font:400 58px/1 "DM Serif Display", Georgia, serif; color:rgb(var(--c-brass)); letter-spacing:-.02em; }
#auth-gate .s2 .seal{ position:absolute; right:18px; bottom:16px; width:54px; height:54px; border-radius:50%; border:1.5px dashed rgb(var(--c-brass) / .6);
  display:grid; place-items:center; color:rgb(var(--c-brass)); font:22px/1 "DM Serif Display", Georgia, serif; transform:rotate(-12deg); }
#auth-gate .s2 .ctl{ position:absolute; z-index:2; left:clamp(22px,4vw,48px); bottom:clamp(18px,3.5vh,32px); display:flex; align-items:center; gap:12px; }
#auth-gate .s2 .ctl .nav{ width:38px; height:38px; border-radius:50%; border:1px solid rgb(var(--c-hair)); background:rgb(var(--c-paper)); color:rgb(var(--c-charcoal));
  display:grid; place-items:center; cursor:pointer; transition:transform .12s; }
#auth-gate .s2 .ctl .nav:active{ transform:scale(.92); }
#auth-gate .s2 .ctl svg{ width:18px; height:18px; }
#auth-gate .s2 .dots{ display:flex; gap:6px; }
#auth-gate .s2 .dots i{ width:7px; height:7px; border-radius:6px; background:rgb(var(--c-hair)); transition:width .4s var(--ease), background .3s; }
#auth-gate .s2 .dots i.on{ width:22px; background:rgb(var(--c-brass)); }

/* scene 3: Atlas */
#auth-gate .s3{ background:radial-gradient(70% 60% at 50% 42%, rgb(var(--c-navy2)), rgb(var(--c-navy)) 55%, color-mix(in srgb, rgb(var(--c-navy)) 55%, #000));
  color:#fff; touch-action:pan-y; cursor:grab; }
#auth-gate .s3.dragging{ cursor:grabbing; }
#auth-gate .s3 canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none; }
#auth-gate .s3 .top{ position:absolute; z-index:2; left:clamp(22px,4vw,56px); right:clamp(22px,4vw,56px); top:clamp(22px,4.5vh,44px); pointer-events:none; }
#auth-gate .s3 .top h2{ margin:0; max-width:430px; font-size:clamp(28px,3vw,42px); line-height:1.06; letter-spacing:-.012em; color:#fff; }
#auth-gate .s3 .top h2 em{ color:color-mix(in srgb, rgb(var(--c-brass)) 65%, #fff); }
#auth-gate .s3 .top p{ margin:10px 0 0; max-width:380px; font-size:14px; color:rgb(255 255 255 / .7); }
#auth-gate .s3 .focus{ position:absolute; z-index:2; left:clamp(22px,4vw,56px); bottom:clamp(70px,10vh,96px); width:min(420px, calc(100% - 44px));
  padding:16px 18px; border-radius:18px; text-align:left; color:#fff; cursor:pointer;
  background:linear-gradient(160deg, rgb(255 255 255 / .14), rgb(255 255 255 / .05)); border:1px solid rgb(255 255 255 / .2);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 20px 50px -24px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .22); transition:transform .12s; }
#auth-gate .s3 .focus:active{ transform:scale(.985); }
#auth-gate .s3 .focus .k{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:color-mix(in srgb, rgb(var(--c-brass)) 60%, #fff); }
#auth-gate .s3 .focus .n{ margin:6px 0; font:400 26px/1.1 "DM Serif Display", Georgia, serif; }
#auth-gate .s3 .focus .q{ font-size:14px; line-height:1.45; color:rgb(255 255 255 / .86); }
#auth-gate .s3 .focus .go{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; font-weight:600; color:color-mix(in srgb, rgb(var(--c-brass)) 55%, #fff); }
#auth-gate .s3 .focus .go svg{ width:15px; height:15px; }
#auth-gate .s3 .focus .swap{ transition:opacity .25s, transform .4s var(--ease); }
#auth-gate .s3 .focus.changing .swap{ opacity:0; transform:translateY(6px); }
#auth-gate .s3 .stats{ position:absolute; z-index:2; left:clamp(22px,4vw,56px); right:clamp(22px,4vw,56px); bottom:clamp(70px,10vh,96px); display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
#auth-gate .s3 .stats div{ padding:14px 14px 12px; border-radius:16px; background:rgb(255 255 255 / .08); border:1px solid rgb(255 255 255 / .16);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:0; transform:translateY(12px); transition:opacity .45s, transform .6s var(--ease); }
#auth-gate .s3.counted .stats div{ opacity:1; transform:none; }
#auth-gate .s3 .stats div:nth-child(2){ transition-delay:.08s } #auth-gate .s3 .stats div:nth-child(3){ transition-delay:.16s } #auth-gate .s3 .stats div:nth-child(4){ transition-delay:.24s }
#auth-gate .s3 .stats b{ display:block; font:400 30px/1 "DM Serif Display", Georgia, serif; font-variant-numeric:tabular-nums; }
#auth-gate .s3 .stats span{ display:block; margin-top:5px; font-size:12px; color:rgb(255 255 255 / .7); }
#auth-gate .s3[data-mode="signin"] .stats, #auth-gate .s3[data-mode="signup"] .focus{ display:none; }

/* ------------------------------ phones and tablets: art on top, the form rises over it ------------------------------ */
@media (max-width:1023px){
  #auth-gate .ag-shell{ display:block; }
  #auth-gate .ag-art{ height:400px; min-height:0; }
  #auth-gate .ag-side{ z-index:2; margin-top:-26px; border-radius:26px 26px 0 0; justify-content:flex-start; padding:30px 20px 40px; min-height:0;
    box-shadow:0 -12px 32px -14px rgb(0 0 0 / .35); }
  #auth-gate .ag-back{ position:static; align-self:flex-start; margin:-8px 0 14px -10px; }
  #auth-gate .ag-brand{ display:none; }
  #auth-gate .rot{ top:14px; right:14px; bottom:auto; padding:4px; }
  #auth-gate .rot button{ padding:0; width:9px; height:9px; font-size:0; background:rgb(255 255 255 / .35); }
  #auth-gate .rot button[aria-current="true"]{ width:26px; }
  #auth-gate .rot button i{ height:100%; }
  #auth-gate .ag-art[data-s="2"] .rot button{ background:rgb(var(--c-hair)); }

  #auth-gate .s1 .card{ width:178px; padding:11px 12px 12px; border-radius:13px; }
  #auth-gate .s1 .card .t{ font-size:16px; } #auth-gate .s1 .card .d{ display:none; } #auth-gate .s1 .card .q{ font-size:11px; margin-top:6px; }
  #auth-gate .s1 .caption{ display:none; } #auth-gate .s1 .hint span{ display:none; } #auth-gate .s1 .hint{ top:16px; left:20px; }
  #auth-gate .s1 .halo{ width:260px; height:260px; left:calc(var(--advocate-x,70%) - 130px); }
  #auth-gate .s2 .head{ top:18px; } #auth-gate .s2 .head .mk{ margin-bottom:10px; } #auth-gate .s2 .head h2{ font-size:26px; } #auth-gate .s2 .head p{ display:none; }
  #auth-gate .s2 .deck{ top:61%; height:170px; width:min(330px, 84%); }
  #auth-gate .s2 .brief{ padding:15px 16px; border-radius:16px; }
  #auth-gate .s2 .brief .t{ font-size:21px; margin:5px 0 3px; } #auth-gate .s2 .brief .d{ font-size:12.5px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  #auth-gate .s2 .brief .demo, #auth-gate .s2 .seal{ display:none; } #auth-gate .s2 .big{ font-size:40px; }
  #auth-gate .s2 .ctl{ left:50%; transform:translateX(-50%); bottom:38px; } #auth-gate .s2 .ctl .nav{ width:34px; height:34px; }
  #auth-gate .s2 .sect{ font-size:360px; }
  #auth-gate .s3 .top h2{ font-size:24px; max-width:60%; } #auth-gate .s3 .top p{ display:none; } #auth-gate .s3 .top{ top:18px; left:20px; }
  #auth-gate .s3 .focus{ left:16px; bottom:40px; width:calc(62% - 16px); padding:11px 12px; border-radius:14px; }
  #auth-gate .s3 .focus .n{ font-size:18px; margin:3px 0 2px; } #auth-gate .s3 .focus .q{ font-size:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #auth-gate .s3 .focus .go{ display:none; }
  #auth-gate .s3 .stats{ left:16px; right:16px; bottom:40px; grid-template-columns:repeat(2,1fr); gap:8px; }
  #auth-gate .s3 .stats div{ padding:9px 11px; border-radius:12px; } #auth-gate .s3 .stats b{ font-size:21px; } #auth-gate .s3 .stats span{ font-size:11px; margin-top:3px; }
}
@media (prefers-reduced-motion: reduce){
  #auth-gate *, #auth-gate *::before{ animation-duration:.01ms !important; animation-delay:0s !important; }
  #auth-gate .ag-scene{ transform:none !important; }
}