.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{max-inline-size:470px;color:var(--stage-muted);animation:rise .9s var(--ease-out) .24s both;margin:18px 0 0;font-size:15.5px;line-height:1.6}.stage__card{inline-size:min(100%,440px);animation:rise 1s var(--ease-out) .42s both;align-self:start}.demo{-webkit-backdrop-filter:blur(24px)saturate(140%);backdrop-filter:blur(24px)saturate(140%);background:linear-gradient(165deg,#0c2e2cc7,#051819d1) padding-box padding-box,linear-gradient(160deg,#a6f0d973,#ffffff0f 40%,#ffffff0a 70%,#e9c27c66) border-box;border:1px solid #0000;border-radius:22px;position:relative;overflow:hidden;box-shadow:0 60px 120px -40px #000c,0 24px 48px -24px #0009,inset 0 1px #ffffff1a}.demo:before{pointer-events:none;content:"";background:radial-gradient(closest-side,#6fd6bd29,#0000);block-size:80%;inline-size:80%;position:absolute;inset-block-start:-40%;inset-inline-start:-20%}.demo__bar{color:var(--stage-muted);border-block-end:1px solid #ffffff12;align-items:center;gap:12px;padding:13px 18px;font-size:12px;font-weight:600;display:flex}.demo__dots{gap:6px;display:inline-flex}.demo__dots i{background:#ffffff29;border-radius:50%;block-size:9px;inline-size:9px}.demo__dots i:first-child{background:#e2b56bbf}.demo__state{border-radius:var(--radius-pill);animation:rise .36s var(--ease-out) both;align-items:center;gap:7px;margin-inline-start:auto;padding:3px 10px;font-size:11.5px;display:inline-flex}.demo__state--working{color:#9fe3d1;background:#2fc7a71f}.demo__state--done{color:var(--stage-gold);background:#e2b56b24}.demo__pulse{background:#2fc7a7;border-radius:50%;block-size:7px;inline-size:7px;animation:1.2s ease-out infinite pulse}.demo__body{grid-template-rows:auto 1fr auto;gap:12px;min-block-size:304px;padding:18px;display:grid;position:relative}.demo__prompt{color:#0b2826;background:linear-gradient(#fff,#eaf4f0);border-radius:16px 16px 4px;justify-self:end;min-block-size:42px;max-inline-size:92%;padding:11px 15px;font-size:14px;line-height:1.45;box-shadow:0 10px 24px -12px #0009}:root[dir=rtl] .demo__prompt{border-radius:16px 16px 16px 4px}.demo__caret{vertical-align:-.15em;background:#0d5f59;block-size:1.05em;inline-size:2px;margin-inline-start:2px;animation:.9s step-end infinite caret;display:inline-block}.demo__steps{align-content:start;gap:8px;display:grid}.demo-step{animation:step-in .48s var(--ease-out) both;animation-delay:calc(var(--i) * .12s);transition:background .4s var(--ease-out), border-color .4s var(--ease-out);background:#ffffff0d;border:1px solid #ffffff14;border-radius:13px;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:8px 11px 8px 8px;display:grid}:root[dir=rtl] .demo-step{padding:8px 8px 8px 11px}.demo-step--done{border-color:color-mix(in srgb, var(--agent) 35%, transparent);background:color-mix(in srgb, var(--agent) 10%, transparent)}.demo-step__avatar{color:#062220;background:var(--agent);block-size:28px;inline-size:28px;box-shadow:0 0 18px -4px var(--agent);border-radius:9px;place-items:center;display:grid}.demo-step__text{color:#e8f2edd9;white-space:nowrap;text-overflow:ellipsis;gap:7px;min-inline-size:0;font-size:13px;display:flex;overflow:hidden}.demo-step__text b{color:#fff;flex:none;font-weight:700}.demo-step__status{color:#ffffff80;place-items:center;display:grid}.demo-step--done .demo-step__status{color:var(--agent);animation:.38s cubic-bezier(.2,1.4,.3,1) both pop}.demo-step__spin{animation:.9s linear infinite spin}.demo__outcome{color:#102826;opacity:0;min-block-size:44px;transition:opacity .36s var(--ease-out), transform .46s cubic-bezier(.2, 1.3, .3, 1);background:linear-gradient(100deg,#f6e2b8,#e2b56b);border-radius:13px;align-items:center;gap:9px;padding:11px 14px;font-size:13.5px;font-weight:700;display:flex;transform:translateY(8px)scale(.97);box-shadow:0 16px 34px -16px #e2b56bcc}.demo__outcome--shown{opacity:1;transform:none}.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__card{display:none}.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}
