[data-experience=cinema] .account-page{--account-ease:cubic-bezier(.22, 1, .36, 1);--account-pink:var(--brand-pink);--account-strand:var(--brand-strand);--account-shadow:color-mix(in srgb, var(--brand-deep) 34%, transparent);--account-word-a:56%;--account-word-b:44%;--account-word-c:30%;isolation:isolate;position:relative}html[data-theme=dark] [data-experience=cinema] .account-page{--account-strand:var(--brand-strand);--account-shadow:#0000009e;--account-word-a:46%;--account-word-b:30%;--account-word-c:14%}[data-experience=cinema] .account-story>.eyebrow{align-items:center;gap:16px;display:flex}[data-experience=cinema] .account-story>.eyebrow:after{content:"";background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--account-pink) 30%, transparent));transform-origin:0;width:56px;height:1px}html[dir=rtl] [data-experience=cinema] .account-story>.eyebrow:after{transform-origin:100%;background:linear-gradient(270deg, var(--accent), color-mix(in srgb, var(--account-pink) 30%, transparent))}[data-experience=cinema] .account-story h1 span:not([class]){color:var(--muted)}[data-experience=cinema] .account-art{margin-top:34px;container-type:inline-size}[data-experience=cinema] .account-art-drift{position:relative}[data-experience=cinema] .account-art-tilt{width:56%;margin-inline-start:auto;position:relative}[data-experience=cinema] .account-art img{filter:drop-shadow(0 38px 34px var(--account-shadow))}[data-experience=cinema] .account-art>span{color:#0000;background:linear-gradient(100deg, color-mix(in srgb, var(--accent) var(--account-word-a), transparent), color-mix(in srgb, var(--account-pink) var(--account-word-b), transparent) 64%, color-mix(in srgb, var(--account-pink) var(--account-word-c), transparent));-webkit-background-clip:text;background-clip:text;padding-inline-end:.08em;font-size:clamp(64px,21cqi,150px);top:calc(50% - .56em)}html[dir=rtl] [data-experience=cinema] .account-art>span{background-image:linear-gradient(260deg, color-mix(in srgb, var(--accent) var(--account-word-a), transparent), color-mix(in srgb, var(--account-pink) var(--account-word-b), transparent) 64%, color-mix(in srgb, var(--account-pink) var(--account-word-c), transparent));padding-inline:.08em 0;left:auto;right:0}[data-experience=cinema] .account-strands{top:4%;z-index:-1;fill:none;width:128%;height:94%;stroke:var(--account-strand);stroke-width:1.1px;opacity:.38;pointer-events:none;position:absolute;inset-inline-start:-3%;-webkit-mask-image:linear-gradient(90deg,#0000,#000 12% 74%,#0000);mask-image:linear-gradient(90deg,#0000,#000 12% 74%,#0000)}html[dir=rtl] [data-experience=cinema] .account-strands{scale:-1 1}[data-experience=cinema] .account-stage{isolation:isolate;align-self:start;width:100%;max-width:480px;position:relative}[data-experience=cinema] .account-halo{opacity:1;inset-block:-20% -14%;inset-inline:-42% -7%}[data-experience=cinema] .account-panel{z-index:1;background:radial-gradient(90% 55% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(70% 40% at 100% 100%, color-mix(in srgb, var(--account-pink) 9%, transparent), transparent 70%), color-mix(in srgb, var(--surface) 80%, transparent);max-width:none;box-shadow:inset 0 1px 0 #ffffff1a, 0 60px 100px -64px color-mix(in srgb, var(--accent) 80%, #000), 0 28px 48px -40px var(--account-shadow);padding:clamp(28px,3vw,44px);position:relative}html[dir=rtl] [data-experience=cinema] .account-panel{background:radial-gradient(90% 55% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--account-pink) 9%, transparent), transparent 70%), color-mix(in srgb, var(--surface) 80%, transparent)}[data-experience=cinema] .account-panel:before{content:"";pointer-events:none;background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--ink) 12%, transparent) 34%, color-mix(in srgb, var(--ink) 8%, transparent) 68%, color-mix(in srgb, var(--account-pink) 60%, transparent));-webkit-mask-composite:xor;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}html[dir=rtl] [data-experience=cinema] .account-panel:before{background:linear-gradient(205deg, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--ink) 12%, transparent) 34%, color-mix(in srgb, var(--ink) 8%, transparent) 68%, color-mix(in srgb, var(--account-pink) 60%, transparent))}[data-experience=cinema] .account-panel:after{content:"";top:-22px;pointer-events:none;background:linear-gradient(90deg, transparent, var(--account-pink) 26%, color-mix(in srgb, var(--accent) 45%, #fff) 50%, var(--account-pink) 74%, transparent) 50% 50% / 100% 1px no-repeat, radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 72%);height:44px;position:absolute;inset-inline:6%}[data-experience=cinema] .account-panel>.eyebrow{color:var(--accent);align-items:center;gap:11px;margin-bottom:12px;display:flex}[data-experience=cinema] .account-panel>.eyebrow:before{content:"";background:var(--accent);width:7px;height:7px;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);border-radius:50%;flex:none}[data-experience=cinema] .account-panel h2{font-size:clamp(30px,2.6vw,36px)}[data-experience=cinema] .account-panel>p.muted{margin-bottom:26px}[data-experience=cinema] .account-panel label{letter-spacing:.02em;position:relative}html[dir=rtl] [data-experience=cinema] .account-panel label{letter-spacing:0}[data-experience=cinema] .account-panel label input{background:color-mix(in srgb, var(--surface) 58%, transparent);border-color:color-mix(in srgb, var(--ink) 15%, transparent);transition:border-color .3s var(--account-ease), background-color .3s var(--account-ease)}[data-experience=cinema] .account-panel label input:hover{border-color:color-mix(in srgb, var(--ink) 34%, transparent)}[data-experience=cinema] .account-panel label input:focus{background:color-mix(in srgb, var(--surface) 86%, transparent);border-color:color-mix(in srgb, var(--accent) 34%, transparent)}[data-experience=cinema] .account-panel label input:focus-visible{outline-offset:3px}[data-experience=cinema] .account-panel label:after{content:"";inset-inline:0;pointer-events:none;background:linear-gradient(90deg, var(--accent), var(--account-pink));transform-origin:0;height:2px;transition:transform .55s var(--account-ease);position:absolute;bottom:0;transform:scaleX(0)}html[dir=rtl] [data-experience=cinema] .account-panel label:after{transform-origin:100%;background:linear-gradient(270deg, var(--accent), var(--account-pink))}[data-experience=cinema] .account-panel label:focus-within:after{transform:scaleX(1)}[data-experience=cinema] .account-panel form>.button{margin-top:10px}[data-experience=cinema] .account-panel .account-switches,[data-experience=cinema] .account-panel>.text-link{margin-top:26px}[data-experience=cinema] .account-timeline{--row:72px;border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent);position:relative}[data-experience=cinema] .account-timeline:before{content:"";inset-inline-start:6px;z-index:1;width:1px;height:calc(var(--row) / 2);pointer-events:none;background:linear-gradient(180deg, transparent, var(--accent));transform-origin:50% 0;position:absolute;top:0}[data-experience=cinema] .account-action{min-height:var(--row);border-top-color:color-mix(in srgb, var(--ink) 9%, transparent);font:500 18px/1.3 var(--display);letter-spacing:-.02em;transition:color .35s var(--account-ease);padding-block:20px;padding-inline-start:42px;position:relative}html[dir=rtl] [data-experience=cinema] .account-action{letter-spacing:0}[data-experience=cinema] .account-action svg{width:20px;color:var(--muted);transition:translate .5s var(--account-ease), color .35s var(--account-ease);flex:none}html[dir=rtl] [data-experience=cinema] .account-action svg{rotate:180deg}[data-experience=cinema] .account-action:before{content:"";inset-inline-start:6px;pointer-events:none;background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--account-pink) 80%, transparent));transform-origin:50% 0;width:1px;height:calc(100% + 1px);position:absolute;top:50%}[data-experience=cinema] .account-action:last-child:before{background:linear-gradient(180deg, color-mix(in srgb, var(--account-pink) 80%, transparent), transparent);height:50%}[data-experience=cinema] .account-action:after{content:"";inset-inline-start:0;z-index:1;pointer-events:none;border:1px solid color-mix(in srgb, var(--accent) 85%, transparent);background:radial-gradient(circle, var(--accent) 0 2.5px, color-mix(in srgb, var(--surface) 94%, var(--accent)) 3px);width:13px;height:13px;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);transition:transform .5s var(--account-ease);border-radius:50%;margin-top:-6.5px;position:absolute;top:50%}[data-experience=cinema] .account-action:focus-visible:after{transform:scale(1.4)}[data-experience=cinema] .demo-accounts{border-top:0;margin-top:40px;padding-top:28px;position:relative}[data-experience=cinema] .demo-accounts:before{content:"";top:0;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 16%, transparent) 18%, color-mix(in srgb, var(--accent) 55%, transparent) 50%, color-mix(in srgb, var(--ink) 16%, transparent) 82%, transparent);height:1px;position:absolute;inset-inline:0}[data-experience=cinema] .demo-accounts>div{gap:10px}[data-experience=cinema] .demo-accounts button{--chip-face:linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #fff 8%), color-mix(in srgb, var(--surface) 60%, transparent));isolation:isolate;border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);background:var(--chip-face);min-height:44px;box-shadow:inset 0 1px 0 #ffffff29, inset 0 -1px 0 #00000012, 0 10px 20px -16px color-mix(in srgb, var(--accent) 70%, #000);transition:translate .45s var(--account-ease), scale .2s var(--account-ease), border-color .45s var(--account-ease);border-radius:999px;justify-content:flex-start;gap:10px;padding-block:10px;padding-inline:13px 15px;font-size:12px;font-weight:500;line-height:1.3;position:relative}[data-experience=cinema] .demo-accounts button:hover{background:var(--chip-face)}[data-experience=cinema] .demo-accounts button:focus-visible{outline-offset:3px}[data-experience=cinema] .demo-accounts button:before{content:"";background:var(--accent);width:6px;height:6px;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);border-radius:50%;flex:none}[data-experience=cinema] .demo-accounts button:after{content:"";z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 150% at 50% 130%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);box-shadow:0 16px 28px -16px color-mix(in srgb, var(--accent) 85%, transparent);opacity:0;transition:opacity .45s var(--account-ease);position:absolute;inset:0}[data-experience=cinema] .demo-accounts button svg{transition:translate .45s var(--account-ease);flex:none;margin-inline-start:auto}html[dir=rtl] [data-experience=cinema] .demo-accounts button svg{scale:-1 1}[data-experience=cinema] .demo-accounts button:active:not(:disabled){transition-duration:.12s;scale:.965}@media (hover:hover) and (pointer:fine){[data-experience=cinema] .demo-accounts button:hover:not(:disabled){border-color:color-mix(in srgb, var(--accent) 45%, transparent);translate:0 -2px}[data-experience=cinema] .demo-accounts button:hover:not(:disabled):after{opacity:1}[data-experience=cinema] .demo-accounts button:hover:not(:disabled) svg{translate:2px -2px}html[dir=rtl] [data-experience=cinema] .demo-accounts button:hover:not(:disabled) svg{translate:-2px -2px}[data-experience=cinema] .demo-accounts button:active:not(:disabled){translate:0}[data-experience=cinema] .account-action:hover{color:var(--accent)}[data-experience=cinema] .account-action:hover:after{transform:scale(1.4)}[data-experience=cinema] .account-action:hover svg{color:var(--accent);translate:5px}html[dir=rtl] [data-experience=cinema] .account-action:hover svg{translate:-5px}[data-experience=cinema] .account-panel form>.button:hover:not(:disabled){transform:translateY(-2px)}[data-experience=cinema] .account-panel form>.button:active:not(:disabled){transform:translateY(0)scale(.98)}}@media (prefers-reduced-motion:no-preference){[data-experience=cinema] .account-story>.eyebrow[data-cine-live]:after{animation:account-draw-x 1.1s var(--account-ease) .35s backwards}[data-experience=cinema] .account-art[data-cine-live] .account-strands path{stroke-dasharray:1 1;animation:1.9s cubic-bezier(.65,0,.35,1) both account-draw-path}[data-experience=cinema] .account-strands path:nth-child(2){animation-delay:.14s}[data-experience=cinema] .account-strands path:nth-child(3){animation-delay:.28s}[data-experience=cinema] .account-panel[data-cine-live]:after{animation:account-edge 1.4s var(--account-ease) .3s backwards}[data-experience=cinema] .account-panel>.eyebrow:before{animation:3.4s ease-in-out infinite account-breathe}[data-experience=cinema] .account-action:nth-child(2){--step:1}[data-experience=cinema] .account-action:nth-child(3){--step:2}[data-experience=cinema] .account-panel[data-cine-live] .account-timeline:before{animation:.34s cubic-bezier(.65,0,.35,1) .28s backwards account-thread}[data-experience=cinema] .account-panel[data-cine-live] .account-action:after{animation:account-node .7s var(--account-ease) backwards;animation-delay:calc(.52s + var(--step,0) * .36s)}[data-experience=cinema] .account-panel[data-cine-live] .account-action:before{animation:.52s cubic-bezier(.65,0,.35,1) backwards account-thread;animation-delay:calc(.64s + var(--step,0) * .36s)}[data-experience=cinema] .account-panel[data-cine-live] .demo-accounts>div>button{animation:account-chip .7s var(--account-ease) backwards;animation-delay:calc(.3s + var(--chip,0) * 50ms)}[data-experience=cinema] .demo-accounts button:nth-child(2){--chip:1}[data-experience=cinema] .demo-accounts button:nth-child(3){--chip:2}[data-experience=cinema] .demo-accounts button:nth-child(4){--chip:3}[data-experience=cinema] .demo-accounts button:nth-child(5){--chip:4}[data-experience=cinema] .demo-accounts button:nth-child(6){--chip:5}[data-experience=cinema] .demo-accounts button:nth-child(7){--chip:6}[data-experience=cinema] .demo-accounts button:nth-child(8){--chip:7}}@keyframes account-draw-x{0%{transform:scaleX(0)}}@keyframes account-draw-path{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes account-edge{0%{opacity:0;transform:scaleX(0)}}@keyframes account-breathe{50%{opacity:.45}}@keyframes account-node{0%{opacity:0;transform:scale(.2)}}@keyframes account-thread{0%{transform:scaleY(0)}}@keyframes account-chip{0%{opacity:0}}@media (max-width:800px){[data-experience=cinema] .account-stage{max-width:none}[data-experience=cinema] .account-halo{inset:-10% -3% -6%}[data-experience=cinema] .account-panel{padding:26px 20px 28px}[data-experience=cinema] .account-timeline{--row:64px}[data-experience=cinema] .account-action{font-size:16px}[data-experience=cinema] .demo-accounts>div{gap:8px}[data-experience=cinema] .demo-accounts button{gap:8px;padding-inline:11px 12px;font-size:11px}}@media (max-width:480px){[data-experience=cinema] .demo-accounts button{white-space:nowrap;padding-inline:14px 12px}[data-experience=cinema] .demo-accounts button:before{display:none}}@media (prefers-reduced-motion:reduce){[data-experience=cinema] .account-panel label:after,[data-experience=cinema] .account-action,[data-experience=cinema] .account-action:after,[data-experience=cinema] .account-action svg,[data-experience=cinema] .demo-accounts button,[data-experience=cinema] .demo-accounts button:after,[data-experience=cinema] .demo-accounts button svg{transition-duration:.01ms}}
.account-panel>.account-continue{width:100%;margin-bottom:28px}.account-panel>a.account-continue+.account-switch-account{width:fit-content;margin:-14px 0 28px;display:flex}.account-story,.account-stage,.account-panel{min-width:0}.account-story h1,.account-panel h2,.account-panel>p.muted,.account-context{overflow-wrap:anywhere}.account-context{color:var(--muted);margin:-8px 0 24px;font-size:14px;line-height:1.6}.reset-password>h3{font-size:20px;line-height:1.3}.account-panel form>.account-hint{color:var(--muted);margin-top:-12px;font-size:12px}.account-switches{flex-direction:column;align-items:flex-start;gap:14px;margin-top:25px;display:flex}.account-panel .account-switches>.switch-auth{margin-top:0}