.auth{--rail:clamp(78px,22vw,620px);--key-h:max(calc(var(--rail) / 5.2),calc(100vh / 43));--black-w:58%;--key-out:20px;display:grid;grid-template-columns:var(--rail) 1fr;min-height:100dvh;background:var(--auth-bg);overflow:clip}.auth,.auth-rail{position:relative}.auth-rail{z-index:2}.auth-keys{position:absolute;inset:0 0 auto 0;display:flex;flex-direction:column;touch-action:manipulation}.akey{position:relative;flex:0 0 var(--key-h);margin-left:calc(-1 * var(--key-out));border-bottom:1px solid var(--key-groove);background:linear-gradient(180deg,var(--key-sheen) 0 1px,transparent 1px),linear-gradient(92deg,var(--key-ivory-shade) 0,var(--key-ivory-back) 10%,var(--key-ivory) 46%,var(--key-ivory-lit) 88%,var(--key-ivory-back) 100%);box-shadow:inset 0 -4px 7px -4px var(--key-groove);transition:transform .26s var(--ease-out),filter var(--dur) var(--ease);cursor:pointer}.akey,.akey:after{border-radius:0 var(--radius-3) var(--radius-3) 0}.akey:after{content:"";position:absolute;inset:1px 0 1px auto;width:7px;background:linear-gradient(90deg,transparent,var(--key-lip-lit));opacity:.7;pointer-events:none}@media (hover:hover){.akey:hover{transform:translateX(4px);filter:brightness(1.05)}}.akey[data-down]{transform:translateX(9px);filter:brightness(.93);transition-duration:.07s}.akey-blacks{position:absolute;inset:0 0 auto calc(-1 * var(--key-out));z-index:3;pointer-events:none}.akey-black{position:absolute;left:0;top:calc(var(--key-h) * (var(--n) + .6));width:calc(var(--black-w) + var(--key-out));height:calc(var(--key-h) * .8);border-radius:0 4px 4px 0;pointer-events:auto;cursor:pointer;transition:transform .26s var(--ease-out),filter var(--dur) var(--ease);background:linear-gradient(92deg,var(--key-ebony-base) 0,var(--key-ebony-deep) 24%,var(--key-ebony) 62%,var(--key-ebony-top) 100%);box-shadow:inset 0 2px 2px var(--key-sheen-soft),inset 0 -3px 3px var(--key-ebony-base),5px 5px 12px -3px var(--key-shadow-deep)}@media (hover:hover){.akey-black:hover{transform:translateX(4px);filter:brightness(1.3)}}.akey-black[data-down]{transform:translateX(9px);filter:brightness(.86);transition-duration:.07s}.akey-black:before{content:"";position:absolute;inset:20% 10% auto 0;height:24%;border-radius:0 var(--radius-3) var(--radius-3) 0;background:linear-gradient(90deg,transparent,var(--piano-gloss-2))}.auth-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px clamp(20px,4vw,64px) 40px clamp(20px,3vw,56px);background:radial-gradient(70% 48% at 100% 0,var(--auth-panel-glow) 0,transparent 62%),radial-gradient(56% 38% at 0 100%,var(--auth-panel-warm) 0,transparent 60%),linear-gradient(152deg,var(--auth-panel-1) 0,var(--auth-panel-2) 56%,var(--auth-panel-3) 100%)}.auth-panel:before{inset:0 auto 0 0;width:110px;z-index:1;background:linear-gradient(90deg,var(--auth-panel-edge),transparent)}.auth-panel:after,.auth-panel:before{content:"";position:absolute;pointer-events:none}.auth-panel:after{inset:0;z-index:0;background:radial-gradient(38% 30% at 30% 22%,var(--auth-blob-tomato),transparent 70%),radial-gradient(42% 34% at 78% 78%,var(--auth-blob-warm),transparent 72%);animation:auth-blobs 24s ease-in-out infinite alternate}@keyframes auth-blobs{to{transform:translate3d(-3%,2.5%,0) scale(1.1)}}.auth-sheet{position:relative;z-index:2;width:100%;max-width:424px;padding:32px 30px 28px;border:1px solid var(--auth-glass-line);border-radius:24px;background:var(--auth-glass);backdrop-filter:blur(22px) saturate(150%);box-shadow:0 24px 60px -28px var(--auth-glass-drop),0 2px 10px -6px var(--auth-glass-drop);animation:auth-in .44s var(--ease-out) both}.auth-sheet:before{content:"";position:absolute;inset:-1px 24px auto;height:1px;border-radius:1px;background:linear-gradient(90deg,transparent,var(--auth-glass-edge) 36%,var(--auth-glass-edge) 64%,transparent);pointer-events:none}@supports not (backdrop-filter:blur(1px)){.auth-sheet{background:var(--auth-glass-solid)}}@keyframes auth-in{0%{opacity:0;transform:translateY(12px)}}.auth-brand{display:flex;align-items:center;gap:12px;height:42px;margin-bottom:30px}.auth-brand img{height:42px;width:auto}.auth-brand b{display:block;color:var(--auth-fg);font-size:19px;line-height:23px;font-weight:700;letter-spacing:-.03em}.auth-brand i{display:block;margin-top:1px;color:var(--auth-fg-dim);font-size:var(--text-sm);line-height:18px;font-style:normal;font-weight:500}.auth-title{margin:0;color:var(--auth-fg);font-size:clamp(27px,2.6vw,34px);line-height:1.26;letter-spacing:-.04em;font-weight:800}.auth-lede{margin:9px 0 30px;color:var(--auth-fg-dim);font-size:var(--text-sm);line-height:22px;word-break:keep-all}.auth-form{display:grid;gap:18px}.auth-field{position:relative;display:grid;gap:8px}.auth-field>label{color:var(--auth-fg);font-size:var(--text-caption);font-weight:600;letter-spacing:-.01em}.auth-box{position:relative;display:flex;align-items:center}.auth-box>svg{position:absolute;left:15px;color:var(--auth-fg-faint);pointer-events:none;transition:color .18s var(--ease)}.auth-box:focus-within>svg{color:var(--primary)}.auth-input{width:100%;height:54px;padding:0 15px 0 45px;border:1px solid var(--auth-line);border-radius:14px;background:var(--auth-well);box-shadow:inset 0 1px 2px var(--auth-well-shade);color:var(--auth-fg);caret-color:var(--primary);font:inherit;font-size:var(--text-base);letter-spacing:-.01em;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease)}.auth-input::placeholder{color:var(--auth-fg-faint)}@media (hover:hover){.auth-input:hover{border-color:var(--auth-line-lit);background:var(--auth-well-lit)}}.auth-input:focus,.auth-input:focus-visible{outline:none;border-color:var(--input-focus);background:var(--auth-well-lit);box-shadow:inset 0 1px 2px var(--auth-well-shade),var(--focus-halo)}.auth-peek{position:absolute;right:5px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:11px;background:none;color:var(--auth-fg-faint);cursor:pointer;transition:color .16s var(--ease),background-color .16s var(--ease)}@media (hover:hover){.auth-peek:hover{color:var(--auth-fg);background:var(--auth-panel-3)}}.auth-input-peek{padding-right:52px}.auth-hint{color:var(--auth-fg-faint);line-height:18px}.auth-caps,.auth-hint{margin:0;font-size:12.5px}.auth-caps{color:var(--auth-alert-fg);font-weight:600}.auth-note{margin-top:14px;margin:0;color:var(--auth-fg-faint);font-size:12.5px;line-height:19px;word-break:keep-all}.auth-form+.auth-note{margin-top:26px}.auth-switch{display:inline-flex;align-items:center;height:44px;margin-top:22px;padding:0;border:0;background:none;color:var(--auth-fg-dim);font:inherit;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--auth-line-lit);cursor:pointer;transition:color .16s var(--ease)}@media (hover:hover){.auth-switch:hover{color:var(--primary)}}.auth-switch.is-quiet{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.auth-switch.is-quiet:focus-visible{position:static;width:auto;height:44px;margin-top:22px;overflow:visible;clip-path:none}.auth-back{display:inline-flex;align-items:center;gap:4px;height:44px;margin-bottom:4px;color:var(--auth-fg-dim);font-size:13.5px;font-weight:600;text-decoration:none;transition:color .16s var(--ease)}@media (hover:hover){.auth-back:hover{color:var(--auth-fg)}}.auth-otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.auth-otp-box{padding:0;text-align:center;font-size:var(--text-title);font-weight:700;font-variant-numeric:tabular-nums}.auth-resend{display:flex;align-items:center;justify-content:space-between;gap:10px}.auth-resend>span{color:var(--auth-fg-dim);font-size:var(--text-caption);font-variant-numeric:tabular-nums}.auth-resend>button{height:44px;padding:0 10px;border:0;border-radius:11px;background:none;color:var(--auth-fg);font:inherit;font-size:var(--text-caption);font-weight:600;cursor:pointer;transition:color .16s var(--ease)}@media (hover:hover){.auth-resend>button:hover:not(:disabled){color:var(--primary)}}.auth-resend>button:disabled{opacity:.5;cursor:default}@media (max-width:719px){.auth{--key-out:0px;height:100dvh;grid-template-columns:1fr;grid-template-rows:1fr;background:radial-gradient(70% 40% at 100% 0,var(--auth-panel-glow) 0,transparent 62%),radial-gradient(60% 34% at 0 62%,var(--auth-panel-warm) 0,transparent 62%),linear-gradient(160deg,var(--auth-panel-1) 0,var(--auth-panel-2) 52%,var(--auth-panel-3) 100%)}.auth-panel,.auth-rail{grid-area:1/1}.auth-rail{align-self:end;height:clamp(200px,36vh,420px);z-index:1}.auth-panel{z-index:2;background:none;pointer-events:none;justify-content:flex-start;padding:clamp(20px,7vh,72px) 16px calc(16px + env(safe-area-inset-bottom))}.auth-sheet{pointer-events:auto}.auth-panel:after,.auth-panel:before{display:none}.auth-rail:before{content:"";position:absolute;inset:0 0 auto 0;height:16px;z-index:4;pointer-events:none;background:linear-gradient(180deg,var(--auth-panel-edge),transparent)}.auth-sheet{background:var(--auth-glass-over);box-shadow:0 10px 24px -16px var(--auth-glass-drop),0 2px 6px -4px var(--auth-glass-drop)}.auth-keys{inset:0;flex-direction:row;user-select:none;-webkit-tap-highlight-color:transparent}.akey{flex:1 0 0;height:100%;margin:0;border-bottom:0;border-right:1px solid var(--key-groove);border-radius:var(--radius-3) var(--radius-3) 0 0;background:linear-gradient(0deg,var(--key-ivory-shade) 0,var(--key-ivory-back) 8%,var(--key-ivory) 42%,var(--key-ivory-lit) 88%,var(--key-ivory-lip) 100%);box-shadow:inset 0 -12px 14px -12px var(--key-shadow)}.akey:nth-child(n+8){display:none}.akey:nth-child(7){border-right:0}.akey:after{inset:0 1px auto;width:auto;height:6px;border-radius:var(--radius-3) var(--radius-3) 0 0;background:linear-gradient(0deg,transparent,var(--key-lip-lit))}.akey-blacks{inset:0}.akey-black{top:auto;bottom:0;left:calc(100% / 7 * (var(--n) + .71));width:calc(100% / 7 * .58);height:52%;border-radius:4px 4px 0 0;background:linear-gradient(0deg,var(--key-ebony-base) 0,var(--key-ebony-deep) 24%,var(--key-ebony) 62%,var(--key-ebony-top) 100%);box-shadow:inset 2px 0 2px var(--key-sheen-soft),inset -3px 0 3px var(--key-ebony-base),5px -5px 12px -3px var(--key-shadow-deep)}.akey-black:nth-child(n+6){display:none}.akey-black:before{inset:20% auto 0 12%;width:22%;height:auto;border-radius:var(--radius-3) var(--radius-3) 0 0;background:linear-gradient(0deg,transparent,var(--piano-gloss-2))}.akey-black[data-down],.akey[data-down]{transform:translateY(4px)}@media (hover:hover){.akey-black:hover,.akey:hover{transform:translateY(2px)}}.auth-sheet{max-width:none;padding:20px 18px 18px;border-radius:20px}.auth-brand{margin-bottom:16px}.auth-title{font-size:26px;line-height:1.2;letter-spacing:-.03em}.auth-lede{margin:6px 0 16px;font-size:var(--text-15);line-height:22px}.auth-form{gap:14px}.auth-field>label{font-size:var(--text-sm)}.auth-field{gap:6px}.auth-input{height:52px;padding-left:44px}.auth-box>svg{left:14px}.auth-hint,.auth-note{font-size:var(--text-caption);line-height:18px;color:var(--auth-fg-dim)}.auth-switch{margin-top:16px;font-size:var(--text-sm)}.auth-otp{gap:4px}.auth-otp-box{height:52px;font-size:var(--text-stat-sm)}}@media (max-width:719px) and (max-height:720px){.auth-rail{height:clamp(170px,32vh,260px)}.auth-panel{padding:calc(10px + env(safe-area-inset-top)) 16px 10px}.auth-brand{margin-bottom:10px}.auth-title{font-size:24px}.auth-lede{margin:5px 0 12px;font-size:var(--text-sm);line-height:20px}.auth-form{gap:11px}.auth-input{height:50px}.keybtn{height:52px}.auth-note{line-height:17px}}@media (max-width:719px) and (max-height:650px){.auth-rail{height:clamp(150px,28vh,210px)}.auth-brand,.auth-brand img{height:28px}.auth-brand i{display:none}}@media (max-width:719px) and (max-height:560px){.auth-lede{display:none}.auth-panel{padding-top:14px}}@media (prefers-reduced-motion:reduce){.auth-sheet{animation:none}.akey{transition:none}}.auth-why{position:relative;display:flex;align-items:flex-start;gap:7px;margin:7px 0 0;padding:9px 12px;border:1px solid var(--auth-alert-line);border-radius:var(--radius-lg);background:var(--auth-alert-solid);color:var(--auth-alert-fg);font-size:12.5px;line-height:17px;font-weight:500;word-break:keep-all;animation:auth-why-in var(--dur) var(--ease-out) both}.auth-why:before{content:"";flex:none;width:14px;height:14px;margin-top:1.5px;background:currentColor;-webkit-mask:var(--glyph-triangle-alert) center /contain no-repeat;mask:var(--glyph-triangle-alert) center /contain no-repeat}.auth-why:after{content:"";position:absolute;top:-6px;left:16px;width:11px;height:11px;background:var(--auth-alert-solid);border-left:1px solid var(--auth-alert-line);border-top:1px solid var(--auth-alert-line);border-top-left-radius:var(--radius-3);transform:rotate(45deg)}@keyframes auth-why-in{0%{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion:reduce){.auth-why{animation:none}}.auth-input[aria-invalid=true],.auth-input[aria-invalid=true]:focus{border-color:var(--auth-alert-line)}