[hidden]{display:none!important}
:root{--entry-a:#f4dc84;--entry-b:#79bedf;--entry-ink:#203d4a}
html[data-tone=peach]{--entry-a:#e4f6aa;--entry-b:#ff81a6;--entry-ink:#442539}
html[data-tone=mist]{--entry-a:#c9ddc4;--entry-b:#1f5cac;--entry-ink:#17385e}
html[data-tone=sunset]{--entry-a:#fbe693;--entry-b:#fe8e28;--entry-ink:#562b14}
html[data-tone=violet]{--entry-a:#b8a9c6;--entry-b:#2b263f;--entry-ink:#30243e}
html[data-tone=peach] .paper{--tone-start:#e4f6aa;--tone-end:#ff81a6;--tone-ink:#743750}
html[data-tone=violet] .paper{--tone-start:#b8a9c6;--tone-end:#2b263f;--tone-ink:#30243e}
.paper-intro,.paper-account{color:var(--entry-ink);font-family:system-ui,sans-serif;background:linear-gradient(153deg,var(--entry-a),#fdfbf5 52%,var(--entry-b))}
.paper-intro{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center}
.paper-intro h1,.paper-intro p,.paper-account h2,.paper-account p{margin:0}
.paper-intro h1{font-size:clamp(30px,9vw,54px);letter-spacing:.1em}
.paper-intro button{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px}
.paper-intro button,.paper-account button{min-height:44px;padding:8px 14px;border-radius:22px;background:#fff9;color:inherit;border:1px solid #fff}
.intro-letter{width:110px;height:76px;border:1px solid #fff;border-radius:18px;background:#fff9;box-shadow:0 16px 42px #23405235;display:grid;place-items:center;position:relative}
.intro-letter::before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 66%);border-radius:inherit;background:#ffffffe0}
.intro-letter i{z-index:1;font-style:normal;border-radius:50%;background:var(--entry-ink);color:white;width:34px;height:34px;display:grid;place-items:center}
.paper-intro:not([hidden]) .intro-letter{animation:paper-lift .8s cubic-bezier(.2,.7,.2,1) both}
.paper-intro:not([hidden]) h1,.paper-intro:not([hidden]) p{animation:paper-lift .6s .23s both}
.paper-intro:not([hidden]) p{animation-delay:.38s}
.paper-intro.is-leaving{animation:paper-leave .28s both}
@keyframes paper-lift{from{transform:translateY(24px) scale(.91);opacity:0}}
@keyframes paper-leave{to{transform:translateY(-16px);opacity:0}}
.paper-account{position:fixed;width:min(380px,calc(100% - 24px));max-height:88dvh;box-sizing:border-box;border:1px solid #fff;border-radius:30px;padding:20px;box-shadow:0 18px 60px #182b4140}
.paper-account::backdrop{background:#14253075;backdrop-filter:blur(5px)}
.paper-account header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.paper-account small{letter-spacing:.16em;font-size:10px}
.paper-account [role=status]{min-height:20px;margin-top:10px;font-size:13px}
.account-stack{width:min(205px,75%);margin:60px auto 43px;transform:skewY(13deg)}
.account-stack label,.account-stack button{display:block;position:relative;width:100%;border:0;border-radius:0;background:var(--stack,#c2f3ca);box-sizing:border-box}
.account-stack label:first-child{--stack:#d8f7de}.account-stack label:nth-child(3){--stack:#9beb98}
.account-stack button{--stack:#12a422;color:#102718;font-weight:800}
.account-stack label::after,.account-stack button::after{content:"";position:absolute;left:100%;top:0;width:24px;height:100%;transform:skewY(-45deg);transform-origin:left;background:color-mix(in srgb,var(--stack,#c2f3ca),#16462a 16%);pointer-events:none}
.account-stack label:first-child::before{content:"";position:absolute;bottom:100%;left:0;width:100%;height:24px;transform:skewX(-45deg);transform-origin:bottom;background:#e5ffed}
.account-stack input{box-sizing:border-box;width:100%;height:44px;background:transparent;border:1px solid #165c2f22;padding:8px 12px;color:#163021;font:inherit}
.account-stack input:focus-visible{outline:2px solid #226541;outline-offset:-3px}
.account-stack button:hover{--stack:#21f438}
#paperAccountSession:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
@media(prefers-reduced-motion:reduce){.paper-intro *,.paper-intro.is-leaving{animation:none!important}}