/* The door (sign in, begin, your keys), worn through Kaleidoscope's HERE lens. Every value is a Kaleidoscope token,
   from /assets/kaleidoscope/glass.css and lens-here.css: the page sets <html class="ink" data-lens="here">, so the door
   keeps the night ground it has had since 2026-07-31. Chester and the page's own token map are gone; the page's
   structure, class names and script are unchanged. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{background:var(--ground);color:var(--ink);min-height:100vh;overflow-x:hidden;position:relative;
  font:400 var(--t-m)/var(--lh-m) var(--f-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;padding:max(var(--s5),env(safe-area-inset-top)) var(--s4) max(var(--s5),env(safe-area-inset-bottom))}
.aurora{display:none}   /* HERE has no brand colour: the ground is the ground */
.wrap{width:100%;max-width:400px;text-align:center;margin:auto}

/* the mark: the living HERE graph with igni at its centre, both centred on the stage */
.stage{position:relative;width:76px;height:76px;margin:var(--s2) auto var(--s5);animation:orbIn var(--d-rise) var(--spring) both}
@keyframes orbIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.here-graph{position:absolute;left:50%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.aura{position:absolute;inset:10px;border-radius:50%;filter:blur(14px);animation:breathe 4.8s ease-in-out infinite;
  background:radial-gradient(circle,rgba(255,165,70,.45),rgba(244,60,45,.16) 45%,transparent 70%)}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.18);opacity:.95}}
.igni-logo{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 4px 12px rgba(247,107,28,.45))}

/* the voice speaks the one question a page asks; the hands carry everything a person operates */
h1{font:400 var(--t-d1)/var(--lh-d1) var(--f-voice);letter-spacing:-.01em;margin-bottom:var(--s2)}
h1 em{font-style:normal}
.lede{color:var(--ink-2);font-size:var(--t-m);line-height:var(--lh-m);margin:0 auto var(--s4);max-width:34ch;text-wrap:balance}
.ctx{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-s);line-height:var(--lh-s);color:var(--ink);background:var(--tint);
  box-shadow:var(--ring);border-radius:var(--r-pill,999px);padding:var(--s1) var(--s3);margin:0 auto var(--s4)}
.ctx svg{width:16px;height:16px;opacity:.75}

.card{position:relative;text-align:left;border-radius:var(--r2);padding:var(--s2) 0;background:var(--surface);box-shadow:var(--ring),var(--shadow);
  animation:rise var(--d-rise) var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card>.msg{margin:var(--s3) var(--s4) var(--s1)}
.sec{padding:var(--s3) var(--s4)}
.sec+.sec{box-shadow:inset 0 1px 0 var(--line)}
form[data-one] .sec{padding:var(--s3) var(--s4)}
form[data-one] .sec+.sec{box-shadow:none}
form[data-one]>.sec:first-of-type{padding-top:var(--s4)}
form[data-one]>.sec:last-child{padding-bottom:var(--s4)}
.sech{font-size:var(--t-xs);line-height:var(--lh-xs);font-weight:600;color:var(--ink-2);margin:0 0 var(--s1)}
.secd{font-size:var(--t-s);line-height:var(--lh-s);color:var(--ink-2);margin:0 0 var(--s3)}
.q{font:400 var(--t-l)/var(--lh-l) var(--f-voice);margin:0 0 var(--s1)}
.qd{font-size:var(--t-s);line-height:var(--lh-s);color:var(--ink-2);margin:0 0 var(--s3)}

.field{margin-bottom:var(--s4)}.field:last-child{margin-bottom:var(--s1)}
.field label{display:block;font-size:var(--t-s);line-height:var(--lh-s);font-weight:500;color:var(--ink-2);margin:0 0 var(--s2)}
.field label .opt{font-weight:400;color:var(--ink-2)}
/* 16 px in a field, so a phone never zooms into it */
.field input{width:100%;min-height:var(--h-l);font:400 var(--t-m)/var(--lh-m) var(--f-ui);color:var(--ink);background:var(--sunk);
  border:0;box-shadow:var(--ring-2);border-radius:var(--r1);padding:var(--s3) var(--s4);outline:none;transition:box-shadow var(--d-micro,160ms) var(--ease)}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{box-shadow:var(--ring-2),var(--focus)}
.field input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--bad)}
.field input:disabled{opacity:.6}
.field .hint{font-size:var(--t-s);line-height:var(--lh-s);color:var(--ink-2);margin:var(--s2) 0 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.row2 .field{margin-bottom:var(--s4)}
.pw{position:relative}
.pw input{padding-right:72px}
.eye{position:absolute;right:var(--s1);top:50%;transform:translateY(-50%);min-height:var(--h-s);background:none;border:0;color:var(--ink-2);
  font:600 var(--t-s)/var(--lh-s) var(--f-ui);padding:var(--s1) var(--s3);border-radius:var(--r0);cursor:pointer}
.eye:focus-visible{outline:0;box-shadow:var(--focus)}

/* The form's Enter key (LANE 437): present to the browser, absent to the eye and to assistive tech. */
button.enterkey{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
button.b,a.b{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;min-height:var(--h-l);
  font:500 var(--t-m)/var(--lh-m) var(--f-ui);text-decoration:none;padding:var(--s3) var(--s4);
  border-radius:var(--r1);border:0;margin-top:var(--s3);cursor:pointer;
  transition:transform var(--d-micro,160ms) var(--spring),background var(--d-micro,160ms) var(--ease),box-shadow var(--d-micro,160ms) var(--ease),opacity var(--d-micro,160ms)}
button.b:active,a.b:active{transform:scale(.975)}
button.b:focus-visible,a.b:focus-visible,a.link:focus-visible,button.link:focus-visible{outline:0;box-shadow:var(--focus)}
/* the one action of the moment is the metal; every other button stays matte */
.b.p{background:var(--cta);color:var(--cta-ink);box-shadow:var(--cta-shadow);font-weight:600}
.b.p:focus-visible{box-shadow:var(--cta-shadow),var(--focus)}
/* your keys has a section per way in, each with its own action: none of them is THE action of the moment, so they
   take the light fill, and the metal stays for a page that asks one thing (sign in, continue, begin) */
.sec:has(> .sech) .b.p{background:var(--light);color:var(--on-ink);box-shadow:none}
.sec:has(> .sech) .b.p:focus-visible{box-shadow:var(--focus)}
.b.s{background:var(--tint);color:var(--ink);box-shadow:var(--ring-2)}
.b.s:hover{background:var(--tint-2)}
/* the irreversible one (remove a key) keeps an outline and the failed ink, so it never reads as the next step */
.b.ch-destructive{background:none;color:var(--bad);box-shadow:var(--ring-2)}
.b.ch-destructive:hover{background:var(--tint);box-shadow:inset 0 0 0 1px var(--bad)}
.b svg{width:20px;height:20px;flex:none}
.b.busy{opacity:.65;pointer-events:none}
.b.busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.social{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--s2)}
.social .b{margin-top:0;font-size:var(--t-s);gap:var(--s2);padding:var(--s3) var(--s2);min-height:var(--h-l)}
.social .b svg{width:16px;height:16px}
.social+.b,.b+.social{margin-top:var(--s3)}
button.link,a.link{display:inline-block;background:none;border:0;color:var(--ink);font:500 var(--t-s)/var(--lh-s) var(--f-ui);
  text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;padding:var(--s2) 0 var(--s1);cursor:pointer;width:auto;min-height:0;margin:0}
button.link:hover,a.link:hover{text-decoration-color:var(--ink-2)}
.center{text-align:center}
.summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:var(--t-s);line-height:var(--lh-s);color:var(--ink-2);
  padding:0 0 var(--s3);margin-bottom:var(--s2);box-shadow:inset 0 -1px 0 var(--line)}
.summary b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.summary .link{padding:var(--s1) 0}
.qr{display:block;margin:var(--s2) auto var(--s3);width:168px;height:168px;border-radius:var(--r2);background:#fff;padding:var(--s3)}   /* a QR code reads only dark on white */
.codeblock{background:var(--sunk);box-shadow:var(--ring-2);border-radius:var(--r1);padding:var(--s3) var(--s4);font:var(--t-s)/var(--lh-m) var(--f-mono);color:var(--ink);overflow-wrap:anywhere;margin-bottom:var(--s3)}
.txt{color:var(--ink-2);font-size:var(--t-m);line-height:var(--lh-m);margin-bottom:var(--s3);overflow-wrap:anywhere}   /* an authenticator's secret is one long word */
.divider{display:flex;align-items:center;gap:var(--s3);color:var(--ink-2);font-size:var(--t-s);line-height:var(--lh-s);margin:var(--s2) var(--s4)}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--line)}
form[data-one] .divider{margin:var(--s2) var(--s4)}
.msg{border-radius:var(--r1);padding:var(--s3) var(--s3);font-size:var(--t-s);line-height:var(--lh-s);margin-bottom:var(--s3);color:var(--ink)}
.msg.error{background:var(--bad-soft);box-shadow:inset 0 0 0 1px var(--bad)}
.msg.info{background:var(--glass-soft)}
.msg.ok{background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)}
.msg a{color:inherit;font-weight:600;text-underline-offset:3px}
.field .msg{margin:var(--s2) 0 0}
.switch{text-align:center;color:var(--ink-2);font-size:var(--t-m);line-height:var(--lh-l);margin-top:var(--s4)}
.switch a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;font-weight:500}
.foot{color:var(--ink-2);font-size:var(--t-xs);line-height:var(--lh-xs);margin-top:var(--s4)}
.foot a{color:var(--ink-2);text-decoration:none}
.ref{font:var(--t-xs)/var(--lh-xs) var(--f-mono);color:var(--ink-2);margin:var(--s3) 0 0}
[hidden]{display:none!important}

/* The sign-up is two steps in ONE form: who you are, then how you will sign in (LANE 500). The fields of
   step 1 stay in the form on step 2 (Kratos and the passkey script read them by name, and a password
   manager files the new password under the email), only out of sight. */
form[data-at="1"] [data-step="2"],form[data-at="2"] [data-step="1"]{display:none}
form[data-at="2"] .who{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;padding:0;border:0}

@media (max-width:380px){.social .b span{font-size:var(--t-s)}.row2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}