.signin{--stage-deep:#04181a;--stage-ink:#f3efe4;--stage-muted:#e2eee8b3;--stage-gold:#e2b56b;background:var(--color-canvas);grid-template-columns:minmax(0,1.12fr) minmax(440px,.88fr);min-block-size:100dvh;display:grid;position:relative}.stage{isolation:isolate;margin:12px;color:var(--stage-ink);animation:stage-in .9s var(--ease-out) both;background:radial-gradient(90% 60% at 20% 0,#0d4a45 0%,#0000 60%),linear-gradient(#072a28 0%,#041a1c 55%,#020f11 100%);border-radius:28px;margin-inline-end:0;position:relative;overflow:hidden;box-shadow:0 30px 80px -30px #04181a8c,inset 0 0 0 1px #ffffff0f}.stage__aurora{z-index:-3;filter:blur(80px)saturate(130%);position:absolute;inset:-20%}.stage__aurora i{mix-blend-mode:screen;border-radius:50%;animation:26s ease-in-out infinite alternate drift;position:absolute}.stage__aurora i:first-child{opacity:.55;background:#0f8f7c;block-size:34%;inline-size:44%;inset-block-start:10%;inset-inline-start:10%}.stage__aurora i:nth-child(2){opacity:.45;background:#0b5f7a;block-size:30%;inline-size:36%;animation-duration:31s;animation-delay:-8s;inset-block-start:16%;inset-inline-end:8%}.stage__aurora i:nth-child(3){opacity:.16;background:#d9a957;block-size:18%;inline-size:22%;animation-duration:35s;animation-delay:-14s;inset-block-start:6%;inset-inline-start:40%}.stage__globe{z-index:-1;block-size:100%;inline-size:100%;animation:planet-in 1.6s var(--ease-out) .2s both;position:absolute;inset:0}.stage__grain{z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.stage__content{z-index:1;grid-template-rows:auto auto 1fr;gap:clamp(22px,3.6vh,40px);block-size:100%;padding:clamp(28px,4.4vw,56px);display:grid;position:relative}.stage__brand{letter-spacing:-.01em;align-items:center;gap:10px;font-size:17px;font-weight:700;display:flex}.stage__brand .brand-mark{background:#ffffff1a;box-shadow:inset 0 0 0 1px #ffffff38,0 8px 24px #00000040}.stage__hero{max-inline-size:640px}.stage__headline{font-family:var(--font-sans);letter-spacing:-.04em;animation:rise .9s var(--ease-out) .12s both;margin:0;font-size:clamp(38px,3.9vw,62px);font-weight:680;line-height:1.02}:root[lang=ar] .stage__headline{letter-spacing:0;font-weight:650;line-height:1.25}.stage__headline em{color:#0000;background:linear-gradient(95deg,#a6f0d9 0%,#6fd6bd 38%,#e9c27c 100%);-webkit-background-clip:text;background-clip:text;font-style:normal;display:block}:root[dir=rtl] .stage__headline em{background-image:linear-gradient(265deg,#a6f0d9 0%,#6fd6bd 38%,#e9c27c 100%)}.stage__lede{color:#f3efe4d1;max-inline-size:500px;animation:rise .9s var(--ease-out) .24s both;margin:18px 0 0;font-size:16.5px;line-height:1.6}.signin__side{background:radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--color-brand) 7%, transparent), transparent 70%), var(--color-canvas);place-items:center;padding:72px clamp(20px,4vw,56px) 48px;display:grid;position:relative}.signin__language{z-index:3;border:1px solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-ink-2);font:inherit;background:color-mix(in srgb, var(--color-surface-raised) 80%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;transition:border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), translate var(--duration) var(--ease-out);align-items:center;gap:7px;padding:7px 13px;font-size:13px;font-weight:600;display:inline-flex;position:absolute;inset-block-start:20px;inset-inline-end:20px}.signin__language:hover{border-color:var(--color-border-strong);color:var(--color-ink);translate:0 -1px}.signin__panel{background:linear-gradient(var(--color-surface-raised), var(--color-surface-raised)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--color-brand) 45%, transparent), var(--color-border) 38%, var(--color-border) 64%, color-mix(in srgb, var(--color-accent) 55%, transparent)) border-box;inline-size:min(100%,420px);animation:card-in .8s var(--ease-out) .12s both;border:1px solid #0000;border-radius:24px;gap:22px;padding:36px 34px 30px;display:grid;position:relative;box-shadow:0 1px 2px #102f2c0d,0 14px 34px -12px #102f2c24,0 44px 90px -36px #102f2c38}:root[data-theme=dark] .signin__panel{box-shadow:inset 0 1px #ffffff0a,0 20px 50px -20px #0009,0 60px 120px -40px #0000008c}.signin__panel--shake{animation:.42s cubic-bezier(.36,.07,.19,.97) shake}.signin__mark{display:flex}.signin__stack{gap:18px;display:grid}.signin__title{letter-spacing:-.03em;margin:0;font-size:30px;font-weight:680;line-height:1.12}:root[lang=ar] .signin__title{font-family:var(--font-arabic);letter-spacing:0;font-size:29px;font-weight:650}.signin__subtitle{color:var(--color-muted);margin:8px 0 0;font-size:14.5px}.signin__form{gap:16px;display:grid}.signin .input{background:var(--color-surface);block-size:48px;transition:border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), background var(--duration) var(--ease-out);border-radius:13px}.signin .input:hover{border-color:var(--color-border-strong)}.signin .input:focus{border-color:color-mix(in srgb, var(--color-brand) 70%, transparent);background:var(--color-surface-raised);box-shadow:0 0 0 4px color-mix(in srgb, var(--color-brand) 15%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--color-brand) 45%, transparent);outline:none}.signin__submit{background:linear-gradient(135deg, color-mix(in srgb, var(--color-brand) 82%, #fff 18%) 0%, var(--color-brand) 45%, color-mix(in srgb, var(--color-brand) 70%, #000 30%) 100%);block-size:50px;box-shadow:0 1px 0 #ffffff40 inset, 0 12px 26px -10px color-mix(in srgb, var(--color-brand) 75%, transparent);transition:translate var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), filter var(--duration) var(--ease-out);border:none;border-radius:14px;gap:10px;margin-block-start:4px;font-size:15px;font-weight:700;position:relative;overflow:hidden}.signin__submit:after{content:"";background:linear-gradient(100deg,#0000,#ffffff59,#0000);inline-size:45%;transition:inset-inline-start;position:absolute;inset-block:0;inset-inline-start:-60%;transform:skew(-18deg)}.signin__submit:hover:not(:disabled){box-shadow:0 1px 0 #ffffff40 inset, 0 18px 34px -12px color-mix(in srgb, var(--color-brand) 85%, transparent);translate:0 -1px}.signin__submit:hover:not(:disabled):after{transition:inset-inline-start .75s var(--ease-out);inset-inline-start:120%}.signin__submit:active:not(:disabled){filter:brightness(.96);translate:0}.signin__arrow{transition:translate var(--duration) var(--ease-out)}.signin__submit:hover .signin__arrow{translate:3px}:root[dir=rtl] .signin__submit:hover .signin__arrow{translate:-3px}.signin__error{animation:rise .3s var(--ease-out) both}.signin__extras{gap:10px;display:grid}.signin__notice{border-block-start:1px solid var(--color-border);color:var(--color-muted);margin:0;padding-block-start:16px;font-size:12.5px}.rise{animation:rise .42s var(--ease-out) both;animation-delay:calc(40ms + var(--i,0) * 45ms)}@media (width<=980px){.signin{grid-template-rows:auto 1fr;grid-template-columns:1fr}.stage{border-radius:0 0 28px 28px;min-block-size:300px;margin:0}.stage__content{grid-template-rows:auto auto;gap:22px;padding:22px 22px 84px}.stage__headline{font-size:clamp(30px,8vw,42px)}.stage__lede{display:none}.signin__side{background:0 0;place-items:start center;margin-block-start:-64px;padding:0 16px 32px}.signin__panel{padding:28px 22px 24px}.signin__mark{display:none}.signin__language{color:var(--stage-ink);background:#ffffff1a;border-color:#fff3}}@media (height<=880px) and (width>=981px){.stage__lede{display:none}.stage__content{gap:22px}.demo__body{gap:10px;min-block-size:280px}}@keyframes stage-in{0%{opacity:0;transform:scale(.985)}}@keyframes planet-in{0%{opacity:0;transform:translateY(60px)}}@keyframes card-in{0%{opacity:0;transform:translateY(16px)scale(.985)}}@keyframes rise{0%{opacity:0;filter:blur(3px);transform:translateY(12px)}}@keyframes pop{0%{opacity:0;transform:translateY(10px)scale(.92)}}@keyframes drift{0%{transform:translate(0,0)scale(1)}50%{transform:translate(8%,-6%)scale(1.12)}to{transform:translate(-6%,8%)scale(.94)}}@keyframes step-in{0%{opacity:0;transform:translateY(8px)}}@keyframes caret{50%{opacity:0}}@keyframes pulse{70%{box-shadow:0 0 0 9px #2fc7a700}to{box-shadow:0 0 #2fc7a700}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.password-field{display:block;position:relative}.password-field .input{padding-inline-end:44px}.password-field__toggle{position:absolute;inset-block-start:50%;inset-inline-end:6px;translate:0 -50%}.field__hint--warn{color:var(--color-warning);font-weight:560}.auth__identity{border-radius:var(--radius-md);background:var(--color-sunken);color:var(--color-muted);align-items:flex-start;gap:10px;padding:12px 14px;display:flex}.auth__identity>span{gap:2px;display:grid}.auth__identity strong{color:var(--color-ink);font-size:15px}.auth__identity small{font-size:12.5px}.settings__password{max-inline-size:440px}.settings__actions{justify-content:flex-end;gap:8px;display:flex}.signin__switch{justify-self:center}
