/* Adapter only. Tokens, fonts and five scenes come from the existing sign-in. */
:root {
  --auth-font: var(--li-ui-font);
  --auth-display: var(--li-ui-display);
  --auth-panel: var(--li-ui-surface);
  --auth-ink: var(--li-ui-ink);
  --auth-line: var(--li-ui-line);
  --auth-accent: var(--li-ui-accent);
  --auth-input-radius: var(--li-ui-radius);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--li-ui-bg); color:var(--li-ui-ink); font:15px/1.75 var(--li-ui-font); }
a { color:var(--li-ui-accent); text-underline-offset:3px; }
button, input { font:inherit; }
button { cursor:pointer; }
button:focus-visible, a:focus-visible { outline:2px solid var(--li-ui-accent); outline-offset:4px; }
.page-header { max-width:1200px; margin:auto; padding:26px 32px 0; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.wordmark { font-size:22px; font-weight:500; letter-spacing:.01em; }
.preview-label { color:var(--li-ui-muted); font-size:12px; }
.auth-layout { max-width:1200px; margin:auto; padding:40px 32px 34px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(340px,.9fr); gap:clamp(40px,7vw,100px); align-items:start; }
.visual-column { min-width:0; }
.li-api-auth-visual-copy { padding:18px 0 0; }
.hero-title { font-family:var(--li-ui-display); font-size:clamp(40px,4.3vw,64px); font-weight:400; line-height:1.17; letter-spacing:0; margin:0 0 20px; }
.hero-title em { font-style:normal; color:var(--li-ui-accent); }
.hero-description { color:var(--li-ui-muted); font-size:15px; line-height:1.8; max-width:34em; margin:0; }
.style-caption { font:12px/1.6 var(--li-ui-font); letter-spacing:.12em; color:var(--li-ui-muted); margin:18px 0 0; }
/* Dedicated normal-flow stage avoids measuring viewport copy/form positions. */
.scene-host { position:relative; width:100%; height:340px; margin-top:18px; min-width:0; overflow:visible; }
.scene-host[data-state="fallback"] { display:flex; align-items:center; justify-content:center; color:var(--li-ui-muted); }
/* Keep archive caption/reading aids lower, never beneath the bamboo cords. */
html[data-style="archive"] .scene-host { margin-top:32px; }
html[data-style="archive"] .term-section { margin-top:26px; }
.term-section { margin-top:8px; border-top:1px solid var(--li-ui-line); padding-top:18px; }
.term-heading { display:flex; gap:12px; justify-content:space-between; align-items:baseline; }
.term-heading h2 { margin:0; font:500 15px/1.6 var(--li-ui-font); }
.term-heading span { font-size:12px; color:var(--li-ui-muted); }
.term-list { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.term-chip { color:var(--li-ui-ink); background:var(--li-ui-surface); border:1px solid var(--li-ui-line); border-radius:var(--li-ui-radius); padding:5px 10px; font-size:13px; line-height:1.5; }
.term-chip[aria-pressed="true"] { color:var(--li-ui-accent); border-color:var(--li-ui-accent); }
.definition-card { background:var(--li-ui-surface); border:1px solid var(--li-ui-line); border-radius:var(--li-ui-radius); padding:16px 18px; min-width:0; overflow-wrap:anywhere; }
.definition-card h3 { margin:0 0 4px; font:500 18px/1.5 var(--li-ui-display); }
.definition-source { font-size:12px; display:inline-block; margin:0 0 8px; }
.definition-card p { margin:0; line-height:1.8; }
.audience-row { display:grid; grid-template-columns:48px minmax(0,1fr); gap:10px; padding-top:10px; margin-top:10px; border-top:1px solid var(--li-ui-line); font-size:13px; line-height:1.7; }
.audience-row b { color:var(--li-ui-accent); font-weight:500; }
.li-api-auth-card { background:var(--li-ui-surface); border:1px solid var(--li-ui-line); border-top:3px solid var(--li-ui-line-strong); border-radius:var(--li-ui-radius); padding:32px; margin-top:12px; box-shadow:var(--li-ui-shadow); min-width:0; }
.card-overline { color:var(--li-ui-muted); font:400 18px/1.5 var(--li-ui-display); margin:0; }
.li-api-auth-card h1 { font:500 30px/1.3 var(--li-ui-font); margin:18px 0 8px; }
.card-description { margin:0 0 24px; color:var(--li-ui-muted); font-size:14px; }
.li-api-auth-card label { display:block; margin:0 0 8px; font-size:14px; }
.li-api-auth-card input[type="password"] { display:block; width:100%; color:var(--li-ui-ink); background:var(--li-ui-input); border:1px solid var(--li-ui-line); border-radius:var(--li-ui-radius); padding:11px 12px; min-height:44px; }
.li-api-auth-card input:focus { outline:2px solid var(--li-ui-accent); outline-offset:2px; }
.submit-preview { display:block; width:100%; min-height:44px; color:var(--li-ui-button-ink); background:var(--li-ui-button); border:1px solid var(--li-ui-button); border-radius:var(--li-ui-button-radius); margin-top:20px; padding:10px 16px; }
.form-status { font-size:13px; color:var(--li-ui-muted); margin:10px 0 0; }
.team-entry { border-top:1px solid var(--li-ui-line); margin-top:24px; padding-top:18px; font-size:13px; line-height:1.9; }
.footer-note { max-width:1200px; padding:0 32px 100px; margin:auto; font-size:12px; color:var(--li-ui-muted); }
@media(max-width:900px) {
  .page-header { padding:20px 20px 0; }
  .preview-label { font-size:11px; }
  .auth-layout { grid-template-columns:1fr; gap:28px; padding:28px 20px; }
  .hero-title { font-size:clamp(36px,8vw,48px); }
  .scene-host { height:280px; }
  .li-api-auth-card { padding:24px; margin:0; }
  .footer-note { padding:0 20px 100px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

body:has(.auth-layout) .wrap { max-width:none; padding:0; }
.auth-layout form { max-width:none; }
.auth-layout h2 { border:0; padding:0; }
.auth-layout .team-entry { background:none; border-radius:0; padding:18px 0 0; }
.auth-layout .definition-card h3,.auth-layout .term-heading h2 { font-family:var(--li-ui-font); }
.auth-layout .term-chip { margin:0; }
.auth-layout .submit-preview { color:var(--li-ui-button-ink)!important; background:var(--li-ui-button)!important; }