/* S1 sign-in surface. Ported from Claude Design canvas 8d06322c (docs/design-system/source/claude-design-export/nikuniku Sign-in.dc.html); values only from docs/design-system/tokens/studio.json. */
#signin{max-width:34rem;margin-inline:auto;padding-block:64px;display:flex;flex-direction:column;gap:32px}
#signin h1,#signin h2{margin:0;font-size:32px;line-height:1.25;font-weight:600;letter-spacing:-0.01em;text-wrap:balance}
:lang(zh-Hant) #signin h1,:lang(zh-Hans) #signin h1,:lang(ja) #signin h1,:lang(ko) #signin h1,:lang(zh-Hant) #signin h2,:lang(zh-Hans) #signin h2,:lang(ja) #signin h2,:lang(ko) #signin h2{letter-spacing:0}
#signin .lead{margin:12px 0 0}
#signin section{display:flex;flex-direction:column;gap:16px}
#signin section[hidden]{display:none}
#signin form{display:flex;flex-direction:column;gap:12px}
#signin label.field{font-size:14px;font-weight:600}
#signin input[type=email],#signin input[type=text]{height:44px;padding:0 12px;border:1px solid #171717;border-radius:0;background:#f5ecdd;color:#171717;font:inherit;font-size:16px}
#signin button{min-height:44px;padding:0 20px;border-radius:0;font:inherit;font-size:16px;cursor:pointer}
#signin button.primary{background:#b62c45;color:#f5ecdd;border:0;font-weight:600}
#signin button.secondary{background:transparent;color:#171717;border:1px solid #171717}
#signin button:disabled{cursor:not-allowed;opacity:.6}
#signin :is(input,button,a,[tabindex]):focus-visible{outline:2px solid #b62c45;outline-offset:2px}
#signin .hint{margin:0;font-size:14px;line-height:1.7}
#signin .check{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 0;font-size:16px;line-height:1.5;cursor:pointer}
#signin .check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:#b62c45}
#signin a{color:#b62c45;text-decoration:underline;text-underline-offset:2px}
#signin .check a,#signin .docs{display:inline-flex;align-items:center;min-height:44px}
#signin .docs{align-self:flex-start}
#signin a:hover{color:#171717}
#signin .status{margin:0;padding:12px 16px;border-inline-start:4px solid #c6b9a9;font-size:16px;line-height:1.7;text-wrap:pretty}
#signin .status.warn{border-inline-start-color:#b62c45}
#signin .status:empty{display:none}
#signin .confirm-email{margin:0;padding:12px 16px;border:1px solid #171717;font-size:16px;font-weight:600;line-height:1.7;word-break:break-all;unicode-bidi:isolate}
#key-value{padding:16px;border:1px solid #171717;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.7;word-break:break-all;user-select:all;-webkit-user-select:all;cursor:text}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* W9.2/W9.3 provider buttons. Google's sign-in branding guidelines fix the light button colours (white fill, #747775
   border, #1F1F1F text) and the four-colour G; Discord uses the same neutral button without a logo. */
#signin .providers{display:flex;flex-direction:column;gap:12px}
#signin .providers[hidden],#signin .provider[hidden]{display:none}
#signin .or{margin:0;font-size:14px;text-align:center;color:#171717}
#signin a.provider{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 20px;border:1px solid #747775;background:#ffffff;color:#1f1f1f;font-size:16px;font-weight:600;text-decoration:none}
#signin a.provider:hover{background:#f5ecdd;color:#1f1f1f}
#signin a.provider svg{flex:none}
/* W8.4 Turnstile widget (Cloudflare renders a fixed 300x65 iframe; keep its row from collapsing while it loads). */
#signin .turnstile{min-height:65px}
#signin .turnstile[hidden]{display:none}