:root{color-scheme:light dark;--bg:light-dark(#f3f5f9,#191d21);--paper:light-dark(#fafbfdf5,#23292ff5);--ink:light-dark(#17243c,#e4e9ee);--muted:light-dark(#526078,#abb3bb);--line:light-dark(#dce2ed,#404a54);--accent:light-dark(#284aa6,#a5b5c7);--button-ink:light-dark(#fff,#191d21)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}body{min-height:100svh;background:var(--bg);display:flex;flex-direction:column}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.shape-defs{position:absolute;width:0;height:0;overflow:hidden}.landscape{position:fixed;inset:-45px;overflow:hidden;filter:blur(35px);background:light-dark(linear-gradient(140deg,#e7ecf4,#e1e7f1 45%,#c5d0df),linear-gradient(140deg,#252c36,#1c232c 45%,#323d4b));z-index:-1}.ridge{position:absolute;width:120%;height:60%;bottom:-15%;left:-25%;border-radius:50% 70% 0 0;transform:rotate(18deg);background:light-dark(linear-gradient(130deg,#d9e1ef,#91a5c7),linear-gradient(130deg,#334457,#202b38))}.ridge.back{left:45%;bottom:0;transform:rotate(-20deg);background:light-dark(linear-gradient(130deg,#dce4f0,#bac9dd),linear-gradient(130deg,#3c4857,#252d37))}header{height:112px;display:flex;align-items:center;padding:0 5.3vw}.brand{color:var(--ink);display:flex;align-items:center;gap:10px;font-size:28px;font-weight:650;text-decoration:none;letter-spacing:-1.1px}.brand svg{width:33px;height:33px;fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round}main{display:flex;align-items:center;justify-content:center;flex:1;padding:32px 24px 112px}.card-shadow{filter:drop-shadow(0 16px 40px light-dark(#24355612,#0003));width:420px;max-width:100%}.card{position:relative;padding:38px;background:var(--paper);clip-path:url(#card-squircle);backdrop-filter:blur(28px)}.card-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--line);stroke-width:1.5}.screen{position:relative}.eyebrow{display:block;font-size:11px;font-weight:650;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}h1{font-size:34px;font-weight:680;line-height:1.15;letter-spacing:-.035em;margin:0 0 36px}h1:focus{outline:none}.primary{border:0;background:var(--accent);color:var(--button-ink);border-radius:9px;min-height:49px;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;font-weight:550;padding:0 17px;text-decoration:none}.primary:hover{filter:brightness(1.08)}.primary:disabled{opacity:.45;cursor:wait}.arrow{margin-left:auto;font-size:18px}.tailscale{display:grid;grid-template-columns:repeat(3,4px);gap:3px}.tailscale i{width:4px;height:4px;background:currentColor;border-radius:50%}.tailscale i:nth-child(3n){opacity:.4}.tailscale i:nth-child(3n + 1){opacity:.7}label{display:block;font-size:12px;color:var(--muted);margin-bottom:9px}input{width:100%;padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px}input::placeholder{color:var(--muted);opacity:.7}form .primary{margin-top:22px}.quiet{display:block;background:none;border:0;color:var(--muted);font-size:11px;padding:0;margin:20px auto 0}.quiet:hover{color:var(--accent)}#login-error{color:var(--muted);font-size:12px;text-align:center;margin:18px 0 0}.receipt{display:flex;gap:10px;align-items:center;font-size:12px;padding:15px 0}.receipt #receipt-email{overflow-wrap:anywhere;min-width:0}.pending{margin-left:auto;color:var(--muted);font-size:11px}.pulse{width:6px;height:6px;flex-shrink:0;background:#a9904f;border-radius:50%}@media(max-width:600px){header{height:86px;padding:0 24px}.brand{font-size:25px}main{padding:24px 20px 86px}.card{padding:32px 28px}h1{font-size:30px}}



header{justify-content:space-between}.theme-picker{display:flex;gap:3px;border:1px solid var(--line);border-radius:9px;padding:3px}.theme-picker button{background:transparent;border:0;color:var(--muted);width:30px;height:29px;display:grid;place-items:center;border-radius:5px;font-size:17px}.theme-picker button[aria-pressed=true]{background:light-dark(#e8eeff,#303d49);color:var(--accent)}.theme-picker svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}#recognized{display:flex;align-items:center;gap:12px;min-height:49px}#recognized>div{min-width:0}#recognized-name{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}#recognized-email{display:block;font-size:12px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}.user-avatar{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:light-dark(#e8eeff,#303d49);color:var(--accent);font-size:16px;font-weight:600}.user-check{margin-left:auto;color:light-dark(#15976c,#54d5ac)}

#entry-progress{display:flex;align-items:center;gap:9px;min-height:22px;margin-top:24px;color:var(--muted);font-size:12px}.entry-spinner{display:inline-block;flex:0 0 14px;width:14px;height:14px;border:1.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:entry-spin .85s linear infinite}@keyframes entry-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.entry-spinner{animation:none}}

/* Match the Dashboard sidebar wordmark, including the Loom/Ops weight split. */
.entry-brand{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:21px;line-height:1.55;letter-spacing:-.045em;font-weight:400;color:var(--ink)}
.entry-brand b{font-weight:650;color:var(--accent)}
/* Common identity and host placement across every gateway state. */
header{justify-content:flex-end}
.entry-stack{width:420px;max-width:100%;display:flex;align-items:center;flex-direction:column}
.card-shadow{width:100%}
.card{padding:38px;text-align:center;min-height:224px}
.entry-identity{position:relative;margin-bottom:30px}
.wordmark{display:flex;align-items:center;justify-content:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:21px;line-height:1.55;letter-spacing:-.045em;font-weight:400;color:var(--ink)}
.wordmark b{font-weight:650;color:var(--accent)}
.wordmark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round;flex:none}
.hostname{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.primary{justify-content:center;text-align:center;border-radius:10px;font-size:13px}
#entry-progress{justify-content:center;margin:0;line-height:1.8}
#recognized{justify-content:center;min-height:0;margin-bottom:18px}
#recognized-email,.email{font-size:16px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.request-state{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:12px;line-height:1.8;color:var(--muted)}
.pending{margin:0;font-size:12px;white-space:pre-line}
#request-again{margin-top:22px}
#login-error,#request-error{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 18px}
#request-error{margin:16px 0 0}
.retry{display:flex;align-items:center;gap:7px;margin-top:20px;padding:6px 10px;background:none;border:0;color:var(--muted);font-size:11px}
.retry svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.retry:disabled{opacity:.5;cursor:wait}
iframe[data-gateway-probe]{display:none}
@media(max-width:600px){.card{padding:32px 28px}}

#request-form .primary{display:flex;align-items:center;gap:9px;padding-inline:12px}
#request-form .primary svg{width:19px;height:19px;flex:none}
.request-note{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0 0;white-space:pre-line;word-break:keep-all}
.text-action{border:0;background:none;color:var(--ink);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;margin-top:18px;padding:6px}

.card-shadow[hidden],#gateway-loading[hidden],[data-stage][hidden]{display:none!important}
#gateway-loading{display:flex;align-items:center;gap:10px;min-height:100px;font-size:12px;color:var(--muted)}
#request-visual{width:64px;height:64px;margin:0 auto 24px;color:var(--accent)}
#request-visual svg{width:100%;height:100%}
.state-surface{fill:currentColor;opacity:.09}
.state-symbol{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#sent .email{font-size:15px;letter-spacing:-.02em}
#sent .request-state{margin-top:20px}
#sent .pending{color:var(--ink);font-size:13px;font-weight:500;line-height:1.8}
#sent .request-note{font-size:11px;line-height:1.8;margin-top:10px}
#sent .text-action{margin-top:24px}

/* Shared motion/material tokens; opacity belongs to surfaces, never the text. */
:root{--entry-ease:cubic-bezier(.22,1,.36,1);--entry-fast:180ms;--entry-morph:420ms;--entry-card:light-dark(rgb(250 252 255 / .34),rgb(32 39 46 / .34));--entry-input:light-dark(rgb(255 255 255 / .30),rgb(12 19 26 / .24));--entry-control:light-dark(rgb(255 255 255 / .22),rgb(35 45 55 / .28))}
.card{background:var(--entry-card);backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);box-shadow:none}
.card-outline{display:none}
input{background:var(--entry-input);border-color:light-dark(rgb(122 145 176 / .18),rgb(185 203 220 / .16));box-shadow:inset 0 1px 0 light-dark(rgb(255 255 255 / .38),rgb(255 255 255 / .025));transition:background var(--entry-fast),border-color var(--entry-fast),box-shadow var(--entry-fast)}
input:focus{border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent);outline:none}
.primary{background:light-dark(rgb(40 74 166 / .62),rgb(165 181 199 / .60));box-shadow:inset 0 1px 0 rgb(255 255 255 / .13);transition:background var(--entry-fast),transform var(--entry-fast) var(--entry-ease)}
.primary:hover{filter:none;background:light-dark(rgb(40 74 166 / .74),rgb(179 195 212 / .72))}
.primary:active{transform:scale(.985)}
.theme-picker{background:var(--entry-control);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:light-dark(rgb(122 145 176 / .13),rgb(185 203 220 / .12))}
.theme-picker button[aria-pressed=true]{background:light-dark(rgb(234 240 255 / .66),rgb(64 80 96 / .52))}
.motion-ghost{pointer-events:none!important;position:absolute!important;margin:0!important;z-index:1}
@media(prefers-reduced-motion:reduce){.primary,input{transition:none}.primary:active{transform:none}}

#request-form .primary{background:linear-gradient(135deg,light-dark(rgb(39 83 195 / .64),rgb(174 204 234 / .64)),light-dark(rgb(29 59 158 / .60),rgb(130 165 202 / .57)));background-size:100% 100%}
#request-form .primary:hover{background:linear-gradient(135deg,light-dark(rgb(39 83 195 / .75),rgb(174 204 234 / .74)),light-dark(rgb(29 59 158 / .70),rgb(130 165 202 / .67)))}

/* Motion backdrop loads after the entry UI; acrylic is confined to the card. */
.landscape{inset:0;filter:none;background:light-dark(#edf1f7,#171e28);pointer-events:none}
#loom-brand-scene{position:absolute;width:min(1050px,100vw);height:min(1050px,100vw);left:50%;top:50%;filter:blur(19px);opacity:0;transform:translate(-50%,-50%) scale(.97);transition:opacity 1.1s ease,transform 1.5s cubic-bezier(.2,.7,.3,1)}
.loom-scene-ready #loom-brand-scene{opacity:.7;transform:translate(-50%,-50%) scale(1)}
/* An ancestor filter isolates the card from the scene it needs to blur. */
.card-shadow{filter:none}
@media(max-width:700px){#loom-brand-scene{width:760px;height:760px}}
@media(prefers-reduced-motion:reduce){#loom-brand-scene{transition:none;transform:translate(-50%,-50%)}}
/* Brand animation is decorative, never a live Job/status indicator. */
:root{--loom-brand-accent:light-dark(#436fc7,#9bb9f1)}
.loom-logo{overflow:visible;--loom-logo-blue:var(--loom-brand-accent)}
.wordmark svg.loom-logo,#pai-studio .pa-brand .pa-mark svg.loom-logo{fill:none;stroke:none}
.loom-logo .loom-logo-base,#pai-studio .pa-brand .pa-mark .loom-logo .loom-logo-base{fill:light-dark(#424548,#e1e3e6);stroke:none}
.loom-logo .loom-logo-gate,.loom-logo .loom-logo-token,#pai-studio .pa-brand .pa-mark .loom-logo .loom-logo-gate,#pai-studio .pa-brand .pa-mark .loom-logo .loom-logo-token{fill:var(--loom-logo-blue);stroke:none;transform-box:view-box}
.loom-logo-gate{animation:loom-gate 8s ease-in-out infinite both}
.loom-logo-token{animation:loom-token-move 8s ease-in-out infinite both,loom-token-fade 8s ease-in-out infinite both}
#pai-studio .loom-logo-gate{animation-name:loom-desk-gate;animation-duration:12s}
#pai-studio .loom-logo-token{animation-name:loom-desk-token-move,loom-desk-token-fade;animation-duration:12s,12s}
html[data-loom-motion-hidden] .loom-logo path{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.loom-logo .loom-logo-gate,.loom-logo .loom-logo-token{animation:none!important;transform:none}.loom-logo .loom-logo-token{opacity:0}}
@keyframes loom-gate{0.00000%{transform:translate(0,0)}20.00000%{transform:translate(0,0)}26.25000%{transform:translate(9px,-6px)}36.25000%{transform:translate(9px,-6px)}42.50000%{transform:translate(0,0)}66.25000%{transform:translate(0,0)}72.50000%{transform:translate(9px,-6px)}81.25000%{transform:translate(9px,-6px)}87.50000%{transform:translate(0,0)}100.00000%{transform:translate(0,0)}}
@keyframes loom-token-move{0.00000%{transform:translate(0,-20px)}26.25000%{transform:translate(0,-20px)}36.25000%{transform:translate(0,0)}72.50000%{transform:translate(0,0)}81.25000%{transform:translate(25px,0)}81.37500%{transform:translate(0,-20px)}100.00000%{transform:translate(0,-20px)}}
@keyframes loom-token-fade{0.00000%{opacity:0}27.50000%{opacity:0}31.25000%{opacity:1}75.00000%{opacity:1}79.37500%{opacity:0}100.00000%{opacity:0}}
@keyframes loom-desk-gate{0.00000%{transform:translate(0,0)}33.33333%{transform:translate(0,0)}37.50000%{transform:translate(9px,-6px)}44.16667%{transform:translate(9px,-6px)}48.33333%{transform:translate(0,0)}64.16667%{transform:translate(0,0)}68.33333%{transform:translate(9px,-6px)}74.16667%{transform:translate(9px,-6px)}78.33333%{transform:translate(0,0)}100.00000%{transform:translate(0,0)}}
@keyframes loom-desk-token-move{0.00000%{transform:translate(0,-20px)}37.50000%{transform:translate(0,-20px)}44.16667%{transform:translate(0,0)}68.33333%{transform:translate(0,0)}74.16667%{transform:translate(25px,0)}74.25000%{transform:translate(0,-20px)}100.00000%{transform:translate(0,-20px)}}
@keyframes loom-desk-token-fade{0.00000%{opacity:0}38.33333%{opacity:0}40.83333%{opacity:1}70.00000%{opacity:1}72.91667%{opacity:0}100.00000%{opacity:0}}