.subscription-welcome{--stage-ink:#193a4c;--stage-muted:#637985;--stage-accent:#0876ac;box-sizing:border-box;width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #dce6eb;border-radius:26px;background:#f9fbfc;color:var(--stage-ink);box-shadow:0 32px 100px #102b3d30;overflow:auto;animation:subscription-enter .45s cubic-bezier(.2,.8,.2,1) both}
.subscription-welcome::backdrop{background:#0e1c2866;backdrop-filter:blur(9px);animation:subscription-backdrop .35s ease both}
.subscription-stage{padding:58px 32px 38px;text-align:center;background:radial-gradient(ellipse at 50% 30%,#cdeaf342,transparent 65%)}
.subscription-eyebrow{display:block;font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.22em;color:var(--stage-accent)}
.subscription-welcome h2{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .23em;margin:28px 0 20px;font:normal clamp(34px,6vw,54px)/1.3 Georgia,serif;letter-spacing:-.045em;color:var(--stage-ink);perspective:600px}
.subscription-word{display:inline-flex;white-space:nowrap}
.subscription-letter{display:inline-block;transform-origin:50% 100%;animation:subscription-letter-land .8s cubic-bezier(.22,.7,.3,1) var(--letter-delay) both}
.subscription-stage-line{height:1px;width:72%;margin:0 auto;background:linear-gradient(90deg,transparent,#72b5cb80,transparent);animation:subscription-line 1.2s .2s both}
.subscription-welcome p{max-width:350px;margin:26px auto 30px;font:15px/1.75 system-ui,sans-serif;color:var(--stage-muted);animation:subscription-copy .6s 1.25s both}
.subscription-continue{min-height:44px;padding:11px 30px;border:0;border-radius:12px;background:var(--stage-ink);color:#fff;font:500 14px/1.5 system-ui,sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s;animation:subscription-copy .6s 1.4s both}
.subscription-continue:hover{transform:translateY(-2px);box-shadow:0 6px 20px #102b3d20}.subscription-continue:active{transform:translateY(0)}.subscription-continue:focus-visible{outline:2px solid var(--stage-accent);outline-offset:5px}
html[data-theme=dark] .subscription-welcome{--stage-ink:#eeeae3;--stage-muted:#aaa9a4;--stage-accent:#a1c9dc;background:#222221;border-color:#393938;box-shadow:0 32px 100px #0006}
html[data-theme=dark] .subscription-stage{background:radial-gradient(ellipse at 50% 30%,#79accb0c,transparent 65%)}
html[data-theme=dark] .subscription-continue{background:#eeeae3;color:#232322}
.subscription-welcome.is-leaving{animation:subscription-exit .24s ease both}.subscription-welcome.is-leaving::backdrop{animation:subscription-backdrop .24s ease reverse both}
@keyframes subscription-letter-land{0%{opacity:0;transform:translateY(34px) rotateX(-35deg) scale(.85)}35%{opacity:1;transform:translateY(-15px) rotateX(8deg) scale(1.03)}60%{transform:translateY(3px) rotateX(0) scaleY(.95)}80%{transform:translateY(-4px) scaleY(1.02)}100%{opacity:1;transform:none}}
@keyframes subscription-enter{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes subscription-exit{to{opacity:0;transform:translateY(-8px) scale(.985)}}
@keyframes subscription-backdrop{from{opacity:0}to{opacity:1}}
@keyframes subscription-copy{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes subscription-line{from{opacity:0;transform:scaleX(.5)}to{opacity:1;transform:scaleX(1)}}
@media(max-width:480px){.subscription-stage{padding:44px 20px 30px}.subscription-welcome{border-radius:20px}}
.draft-recovery{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;color:var(--muted,#637985);font-size:13px}.draft-recovery[hidden]{display:none}.draft-recovery button{border:0;background:transparent;color:var(--blue,#0069ad);cursor:pointer;min-height:44px}.draft-recovery button:focus-visible{outline:2px solid currentColor}
.billing-subscription{padding:20px 0;border-bottom:1px solid var(--border,#dce6eb)}
.billing-subscription p{font-size:14px;line-height:1.6;color:var(--muted,#637985);margin:8px 0 16px}
.billing-cancel-confirm{padding:16px;margin-top:12px;background:var(--sidebar,#f2f5f7);border-radius:12px;animation:subscription-copy .2s ease}
.billing-cancel-confirm button{margin-right:16px}.billing-subscription button:disabled{opacity:.5;cursor:wait}
/* Choreography starts after showModal so its first frames are visible. */
.subscription-welcome{width:min(680px,calc(100vw - 24px));border:0;border-radius:32px;animation:none;opacity:0;transform:translateY(30px) scale(.93)}
.subscription-welcome.is-playing{animation:subscription-stage-enter .8s cubic-bezier(.16,1,.3,1) both}
.subscription-stage{position:relative;isolation:isolate;overflow:hidden;padding-top:40px}
.subscription-stage::before{content:'';position:absolute;z-index:-1;top:-120px;left:calc(50% - 220px);width:440px;height:440px;border-radius:50%;background:radial-gradient(ellipse,#74c9ee30,transparent 68%);opacity:0}
.subscription-emblem{position:relative;margin:0 auto 22px;width:68px;height:68px;color:var(--stage-accent);opacity:0}
.subscription-emblem>svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.subscription-ring{stroke-dasharray:170;stroke-dashoffset:170;opacity:.4;transform-origin:center;transform:rotate(-90deg)}
.subscription-check{stroke-width:2.5;stroke-dasharray:40;stroke-dashoffset:40}
.subscription-spark{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:2px;background:currentColor;opacity:0;pointer-events:none}
.subscription-letter,.subscription-eyebrow,.subscription-stage-line,.subscription-welcome p,.subscription-continue{animation:none;opacity:0}
.is-playing .subscription-stage::before{animation:subscription-glow 4s .1s ease both}
.is-playing .subscription-emblem{animation:subscription-emblem-in .9s .1s cubic-bezier(.16,1,.3,1) both}
.is-playing .subscription-ring{animation:subscription-draw 1s .25s ease both}
.is-playing .subscription-check{animation:subscription-draw .5s .65s ease both}
.is-playing .subscription-spark{animation:subscription-burst 1.4s var(--spark-delay) cubic-bezier(.12,.65,.25,1) both}
.is-playing .subscription-eyebrow{animation:subscription-copy .65s .4s both}
.is-playing .subscription-letter{animation:subscription-spring 1.05s var(--letter-delay) both}
.is-playing .subscription-stage-line{animation:subscription-line 1s .65s both}
.is-playing p{animation:subscription-copy .75s 1.65s both}
.is-playing .subscription-continue{animation:subscription-copy .65s 1.9s both}
html[data-theme=dark] .subscription-stage::before{background:radial-gradient(ellipse,#79accb1c,transparent 68%)}
.subscription-welcome.is-leaving{animation:subscription-stage-exit .24s ease both}
@keyframes subscription-spring{0%{opacity:0;transform:translateY(65px) rotate(var(--letter-tilt)) scale(.65,.85);animation-timing-function:cubic-bezier(.12,.65,.3,1)}32%{opacity:1;transform:translateY(-24px) rotate(-3deg) scale(1.03,1.12);animation-timing-function:cubic-bezier(.55,0,1,.55)}55%{transform:translateY(3px) rotate(1deg) scale(1.12,.86);animation-timing-function:cubic-bezier(0,.55,.45,1)}73%{transform:translateY(-9px) rotate(0) scale(.99,1.04);animation-timing-function:ease-in}87%{transform:translateY(1px) scale(1.02,.98)}100%{opacity:1;transform:none}}
@keyframes subscription-stage-enter{to{opacity:1;transform:none}}
@keyframes subscription-stage-exit{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px) scale(.97)}}
@keyframes subscription-emblem-in{from{opacity:0;transform:translateY(22px) scale(.55) rotate(-15deg)}60%{opacity:1;transform:translateY(-5px) scale(1.06) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes subscription-draw{to{stroke-dashoffset:0}}
@keyframes subscription-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:.75}65%{opacity:.4}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.2) rotate(120deg)}}
@keyframes subscription-glow{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.12)}100%{opacity:.65;transform:scale(1)}}
@media(max-width:480px){.subscription-stage{padding:32px 18px 28px}.subscription-emblem{width:56px;height:56px}.subscription-welcome h2{max-width:310px;margin:22px auto}}
@media(prefers-reduced-motion:reduce){.subscription-welcome,.subscription-welcome::backdrop,.subscription-welcome *,.subscription-stage::before{animation:none!important;transition:none!important;transform:none!important}.subscription-welcome,.subscription-emblem,.subscription-eyebrow,.subscription-letter,.subscription-stage-line,.subscription-welcome p,.subscription-continue{opacity:1}.subscription-ring,.subscription-check{stroke-dashoffset:0}.subscription-stage::before{opacity:.65}.subscription-spark{display:none}}
.usage-summary{margin:24px 0;padding:20px 0;border-top:1px solid rgba(127,127,127,.18);border-bottom:1px solid rgba(127,127,127,.18)}
.usage-summary[hidden]{display:none}
.usage-heading,.usage-caption{display:flex;align-items:center;justify-content:space-between;gap:12px}
.usage-heading{font-size:14px;line-height:1.5}
.usage-heading strong{font-weight:500}
#usage-count{font-variant-numeric:tabular-nums;opacity:.75}
.usage-summary progress{display:block;appearance:none;width:100%;height:5px;margin:14px 0 10px;border:0;border-radius:8px;overflow:hidden;background:rgba(127,127,127,.14);color:#3981a2}
.usage-summary progress::-webkit-progress-bar{background:rgba(127,127,127,.14);border-radius:8px}
.usage-summary progress::-webkit-progress-value{background:#3981a2;border-radius:8px}
.usage-summary progress::-moz-progress-bar{background:#3981a2;border-radius:8px}
.usage-caption{font-size:12px;line-height:1.6;opacity:.65;flex-wrap:wrap}
html[data-theme=dark] .usage-summary progress{color:#8caab6}
html[data-theme=dark] .usage-summary progress::-webkit-progress-value{background:#8caab6}
html[data-theme=dark] .usage-summary progress::-moz-progress-bar{background:#8caab6}