/* TWJ SOC front door: sign-in screens + device gate (web/boot.js). The app's markup stays hidden until sign-in completes. */
body:not(.twj-app)>:not(.bt-auth):not(.bt-gate):not(script){display:none!important}
.bt-auth,.bt-gate{--bt-bg:#f4f5fb;--bt-card:#fff;--bt-txt:#1b2030;--bt-mut:#5f6b80;--bt-line:#dfe3ee;--bt-acc:#6d4dff;--bt-acc2:#5638f0;--bt-ok:#18794e;--bt-err:#c92a2a;--bt-field:#fbfbfe;
  font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--bt-txt)}
@media(prefers-color-scheme:dark){.bt-auth,.bt-gate{--bt-bg:#0e1220;--bt-card:#161b2c;--bt-txt:#e7eaf3;--bt-mut:#9aa4ba;--bt-line:#2a3149;--bt-acc:#8f78ff;--bt-acc2:#a796ff;--bt-ok:#4cc38a;--bt-err:#ff8787;--bt-field:#11162a}}
body.twj-auth{background:var(--bt-bg,#f4f5fb)}
@media(prefers-color-scheme:dark){body.twj-auth{background:#0e1220}}
.bt-auth{position:fixed;inset:0;overflow:auto;z-index:50;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 16px;background:radial-gradient(1200px 600px at 20% -10%,color-mix(in srgb,var(--bt-acc) 18%,transparent),transparent 60%),var(--bt-bg)}
.bt-card{width:100%;max-width:420px;background:var(--bt-card);border:1px solid var(--bt-line);border-radius:20px;padding:28px 28px 22px;box-shadow:0 18px 50px rgba(20,24,40,.12);animation:btIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes btIn{from{opacity:0;translate:0 8px}}
.bt-logo{display:flex;align-items:center;gap:8px;font:700 18px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px;margin-bottom:18px}.bt-logo img{border-radius:8px;flex:none}
.bt-card h1{font-size:22px;margin:0 0 6px}.bt-sub{color:var(--bt-mut);margin:0 0 16px}.bt-mut{color:var(--bt-mut)}.bt-small-t{font-size:12px;margin:4px 0 0;text-align:center}
.bt-note{background:color-mix(in srgb,var(--bt-acc) 10%,transparent);border:1px solid color-mix(in srgb,var(--bt-acc) 30%,transparent);border-radius:10px;padding:8px 12px;font-size:14px}
.bt-card form{display:flex;flex-direction:column;gap:12px}.bt-card label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.bt-card input{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--bt-line);background:var(--bt-field);color:var(--bt-txt);transition:border-color .15s,box-shadow .15s}
.bt-card input:focus{outline:none;border-color:var(--bt-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--bt-acc) 25%,transparent)}
.bt-hint,.bt-legal{font-size:12px;font-weight:400;color:var(--bt-mut);margin:0}
.bt-btn{font:600 15px/1 inherit;padding:12px 16px;border-radius:12px;border:1px solid transparent;background:var(--bt-acc);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background-color .15s,transform .12s,opacity .15s}
.bt-btn:hover:not(:disabled){background:var(--bt-acc2)}.bt-btn:active:not(:disabled){transform:scale(.98)}.bt-btn:disabled{opacity:.55;cursor:default}
.bt-ghost{background:transparent;color:var(--bt-txt);border-color:var(--bt-line)}.bt-ghost:hover:not(:disabled){background:color-mix(in srgb,var(--bt-acc) 8%,transparent)}
.bt-oauth{display:flex;flex-direction:column;gap:8px}.bt-or{display:flex;align-items:center;gap:10px;color:var(--bt-mut);font-size:12px;margin:14px 0 12px}.bt-or:before,.bt-or:after{content:"";flex:1;height:1px;background:var(--bt-line)}
.bt-msg{margin:0;font-size:14px;min-height:0}.bt-msg.err{color:var(--bt-err)}.bt-msg.ok{color:var(--bt-ok)}
.bt-links{text-align:center;font-size:14px;margin:16px 0 0;color:var(--bt-mut)}.bt-links a,.bt-dev a{color:var(--bt-acc);font-weight:600;text-decoration:none}.bt-links a:hover{text-decoration:underline}
.bt-dev{font-size:12px;text-align:center;color:var(--bt-mut);border-top:1px dashed var(--bt-line);padding-top:10px;margin:14px 0 0}
.bt-ic{color:var(--bt-acc);margin-bottom:8px}
.bt-foot{max-width:520px;text-align:center;font-size:12px;color:var(--bt-mut)}.bt-foot a,.bt-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bt-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--bt-line);border-top-color:var(--bt-acc);border-radius:50%;animation:btSpin .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes btSpin{to{rotate:360deg}}
.bt-gate{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 20px;background:var(--bt-bg)}
.bt-gate.bt-small{background:color-mix(in srgb,var(--bt-bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bt-gate h1{font-size:22px;margin:8px 0}.bt-gate p{max-width:440px;margin:6px 0;color:var(--bt-mut)}.bt-gate b{color:var(--bt-txt)}
@media(prefers-reduced-motion:reduce){.bt-card,.bt-spin{animation:none}}
.bt-card input.bt-code{font:600 22px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.25em;text-align:center} /* two-step sign-in code */
body.twj-auth{display:block} /* the app stylesheet makes body a 2-column grid; the signed-out screens need the full width */
/* sign-in -> lab: the auth screen fades out, then the lab (with the intro on top) fades in. Provider buttons are links. */
.bt-auth.bt-leave{opacity:0;transition:opacity .45s ease}
body.twj-app{animation:bt-fadein .6s ease both}
@keyframes bt-fadein{from{opacity:0}}
a.bt-btn{text-decoration:none}
@media (prefers-reduced-motion:reduce){.bt-auth.bt-leave{transition:none}body.twj-app{animation:none}}
/* sign-in steps: passkey (highlighted) or email; the card glides between steps (boot.js screen()) */
.bt-choices{display:flex;flex-direction:column;gap:10px;position:relative}
.bt-choices .bt-btn{width:100%;padding:15px 18px;font-size:17px;gap:10px}
.bt-pkbtn{box-shadow:0 8px 22px -8px color-mix(in srgb,var(--bt-acc) 75%,transparent)}
.bt-choices + .bt-msg:not(:empty){margin-top:12px}
.bt-card{position:relative}.bt-card.bt-resize{transition:height .32s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.bt-gone{position:absolute;pointer-events:none;animation:bt-gone .22s ease both}.bt-gone.bt-back{animation-name:bt-goneb}
@keyframes bt-gone{to{opacity:0;transform:translateX(-16px)}}
@keyframes bt-goneb{to{opacity:0;transform:translateX(16px)}}
.bt-step{animation:bt-step .32s cubic-bezier(.2,.8,.2,1) both}.bt-step.bt-back{animation-name:bt-stepb}
@keyframes bt-step{from{opacity:0;transform:translateX(16px)}}
@keyframes bt-stepb{from{opacity:0;transform:translateX(-16px)}}
@media (prefers-reduced-motion:reduce){.bt-card.bt-resize{transition:none}.bt-step,.bt-gone{animation:none}}
/* the scribble: "Recommended!" written by hand next to the passkey button, then a short arrow drawn from the word to the button.
   System handwriting fonts only (Bradley Hand / Noteworthy on Mac, Segoe Print / Ink Free on Windows): nothing downloaded.
   Wide windows: beside the card, level with the button. Narrow: inside the card above the button, the arrow curving down. */
.bt-scribble{position:absolute;left:calc(100% + 8px);top:12px;display:flex;align-items:center;gap:6px;pointer-events:none;color:var(--bt-txt)}
@media (prefers-color-scheme:dark){.bt-scribble{color:#fff}}
.bt-scr-t{display:inline-block;font:700 23px/1.1 "Bradley Hand","Segoe Print","Noteworthy","Ink Free","Comic Sans MS",cursive;white-space:nowrap;transform:rotate(-4deg);
 animation:bt-write .9s .45s cubic-bezier(.45,.05,.35,1) both}
.bt-scribble svg{flex:none;overflow:visible;order:-1}
.bt-scribble path{stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:bt-draw .4s 1.35s ease-out both}
.bt-scribble .bt-scr-h{animation-duration:.2s;animation-delay:1.72s}
/* drawn after the word, starting at the word's side; invisible until its turn (no stray dot from the round line cap) */
@keyframes bt-write{from{clip-path:inset(-30% 100% -30% 0)}to{clip-path:inset(-30% -5% -30% 0)}}
@keyframes bt-draw{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.bt-scr-a2{display:none}
@media (max-width:860px){.bt-scribble{left:auto;right:2px;top:-40px;align-items:flex-start;gap:2px}.bt-scr-t{font-size:21px}.bt-scr-a{display:none}.bt-scr-a2{display:block}}
@media (prefers-reduced-motion:reduce){.bt-scr-t{animation:none}.bt-scribble path{animation:none;stroke-dashoffset:0}}
.bt-msg.bt-tip{color:var(--bt-txt);background:color-mix(in srgb,var(--bt-acc) 10%,transparent);border:1px solid color-mix(in srgb,var(--bt-acc) 28%,transparent);border-radius:10px;padding:8px 12px;font-size:13.5px;animation:bt-step .3s ease both}
.bt-card input.bt-eacode{text-transform:uppercase;letter-spacing:.18em;font-size:20px} /* early access code */