.autumn-hello{position:relative;isolation:isolate;padding:24px 26px;border:1px solid #eee4ff36;border-radius:28px;background:radial-gradient(ellipse at 80% 12%,#ffa57326,transparent 58%),linear-gradient(120deg,#272248,#183e47);overflow:hidden}
.autumn-hello .eyebrow{color:#ffdeb1}.autumn-hello p{max-width:470px;color:#e1dff2}.autumn-hello h1{max-width:600px}
.autumn-orbit{position:relative;display:grid;place-items:center;flex:0 0 126px;height:126px;font-style:normal;animation:autumn-float 6s ease-in-out infinite}
.autumn-orbit i,.autumn-orbit b{position:absolute;font-style:normal;line-height:1}.autumn-orbit i{font-size:31px;right:0;bottom:4px;transform:rotate(18deg)}.autumn-orbit b{font-size:27px;left:3px;top:7px;color:#ffe3ac}
.mode-picker{grid-template-columns:repeat(4,minmax(0,1fr))}.mode-picker button{overflow:hidden;min-width:0;transition:transform .2s ease,box-shadow .2s ease}.mode-picker strong{font-size:21px;overflow-wrap:anywhere}.mode-picker button>span{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 6px;border-radius:16px;background:#ffdaa7;color:#27203c;transition:transform .2s ease}
.mode-picker button[data-mode=read]>span{background:#bdebbd}.mode-picker button[data-mode=watch]>span{background:#e0caff}.mode-picker button[data-mode=write]>span{background:#aee5f2}
.mode-picker button:hover>span,.mode-picker button:focus-visible>span{transform:rotate(-8deg) translateY(-3px)}.mode-picker button[aria-pressed=true]{box-shadow:0 0 0 2px #ffffff24,0 8px 26px #0d102622}.mode-picker button[aria-pressed=true]>span{animation:autumn-wiggle .6s ease-in-out}
.autumn-pocket{border:1px solid #ffdfa344;border-radius:18px;margin:18px 0 6px;background:#2c2942;overflow:hidden}.autumn-pocket summary{min-height:52px;display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:14px;font-weight:750;color:#ffebc7;cursor:pointer;list-style:none}.autumn-pocket summary::-webkit-details-marker{display:none}.autumn-pocket summary:after{content:'+';margin-left:auto;flex:none;font-size:22px}.autumn-pocket[open] summary:after{content:'−'}.autumn-pocket summary:focus-visible{outline:3px solid #ffba55;outline-offset:-4px}
.autumn-adventures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 12px 12px}.autumn-adventure{display:flex;align-items:center;gap:10px;text-align:left;min-width:0;min-height:76px;padding:12px;border:1px solid #ffffff38;border-radius:14px;background:#f6d5b7;color:#30223c}.autumn-adventure:nth-child(2){background:#d7d0ff}.autumn-adventure:nth-child(3){background:#cce8bc}.autumn-adventure>span{font-size:29px;flex:none}.autumn-adventure strong{display:block;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.autumn-adventure small{display:block;font-size:11px;margin-top:4px;color:#554562}.autumn-adventure:hover>span,.autumn-adventure:focus-visible>span{animation:autumn-wiggle .6s ease-in-out}
footer{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
@keyframes autumn-float{50%{transform:translateY(-6px) rotate(-5deg)}}@keyframes autumn-wiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}
@media(max-width:700px){.autumn-hello{padding:20px;border-radius:23px;gap:4px}.autumn-hello h1{font-size:31px}.autumn-orbit{flex-basis:70px;height:86px;font-size:53px}.autumn-orbit i{font-size:23px}.autumn-orbit b{font-size:18px}.autumn-adventures{grid-template-columns:1fr}.autumn-adventure{min-height:68px}.autumn-pocket summary{font-size:12px;padding:10px 12px}.mode-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-picker button{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:12px 8px;column-gap:9px}.mode-picker button>span{width:38px;height:38px;border-radius:13px;margin:0}.mode-picker strong{font-size:19px}.mode-picker small{max-width:none;flex:0 0 100%;font-size:10px}}
@media(max-width:380px){.autumn-hello{padding:18px}.autumn-hello h1{font-size:30px}.autumn-orbit{display:none}.autumn-hello p{max-width:none}}
@media(prefers-reduced-motion:reduce){.autumn-orbit,.autumn-adventure>span{animation:none!important}.mode-picker button,.mode-picker button>span{transition:none}.mode-picker button:hover>span,.mode-picker button:focus-visible>span{transform:none}}