/* Reading: a little reading room. Cream, taro purple, and a very pale blue. */
#reading-world{--rd-taro:#8f78bd;--rd-taro-soft:#f2edf8;--rd-blue:#7e9cc4;--rd-cream:#fbf7ef;--rd-wood:#c9ad86;--rd-ink:var(--global-text-color,#30303c)}
#reading-world button{font:inherit;color:inherit;cursor:pointer}
#reading-world p{line-height:1.75}
.rd-pair{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin:-.6rem 0 0;font-family:Georgia,serif;font-style:italic;font-size:1rem;color:var(--muted)}
.rd-pair span:first-child{color:var(--rd-taro)}
.rd-block{margin-top:3.4rem}
.rd-head{text-align:center;margin-bottom:1.4rem}
.rd-head h3{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.45rem,3vw,1.85rem);margin:.4rem 0 0}

/* three bookshelves */
.rd-shelves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.rd-shelf{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding:1rem 1rem 1.1rem;border:1px solid var(--global-divider-color,#ece6dc);border-radius:8px;background:var(--rd-cream);text-align:left;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.rd-shelf:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(80,60,40,.1)}
.rd-shelf[aria-expanded=true]{border-color:var(--rd-taro);box-shadow:0 0 0 3px rgba(143,120,189,.14)}
.rd-shelf:focus-visible{outline:2px solid var(--rd-taro);outline-offset:3px}
.rd-spines{display:flex;align-items:flex-end;gap:4px;width:100%;height:74px;padding:0 .4rem;margin-bottom:.6rem;border-bottom:6px solid var(--rd-wood);border-radius:0 0 2px 2px}
.rd-spines i{display:block;width:16%;max-width:22px;height:var(--h);border-radius:3px 3px 0 0;background:var(--c);box-shadow:inset -3px 0 0 rgba(0,0,0,.06),inset 0 8px 0 rgba(255,255,255,.35);transition:transform .3s ease}
.rd-shelf:hover .rd-spines i:nth-child(2n){transform:translateY(-4px)}
.rd-shelf strong{font-size:1rem}
.rd-shelf small{font-size:.74rem;line-height:1.5;color:var(--muted)}

/* panels */
.rd-panel{margin-top:1.4rem;padding:1.4rem 1.4rem 1.5rem;border-radius:8px;background:var(--rd-cream)}
.rd-panel.is-opening{animation:rd-open .35s ease both}
.rd-panel-line{margin:0 0 1rem;font-size:.8rem;color:var(--muted);text-align:center}
.rd-books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.rd-book{display:grid;grid-template-columns:64px 1fr;gap:1rem;align-items:start;padding:1rem;border-radius:6px;background:var(--global-bg-color,#fff)}
.rd-cover{display:grid;place-items:center;height:92px;border-radius:2px 5px 5px 2px;background:linear-gradient(90deg,#7d67ad 0 8px,#9d88c6 8px);color:#fff;box-shadow:0 6px 14px rgba(90,70,140,.25)}
.rd-cover span{writing-mode:vertical-rl;font-family:'Songti SC','Noto Serif SC','STSong',serif;font-size:.95rem;letter-spacing:.2em}
.rd-book h4{font-size:1.05rem;margin:0 0 .15rem}
.rd-sub{font-size:.7rem!important;color:var(--muted);margin:0 0 .5rem!important}
.rd-book p{font-size:.84rem;margin:0}
.rd-book-later{border:1px dashed #d6cce6;background:transparent}
.rd-book-later .rd-cover{background:none;border:1px dashed #c7b8e0;color:var(--rd-taro);box-shadow:none}
.rd-book-later .rd-cover span{writing-mode:horizontal-tb}
.rd-book-later p{color:var(--muted)}

/* story worlds on a little plank */
.rd-worlds{display:flex;justify-content:center;gap:.9rem;overflow-x:auto;padding:2.6rem .6rem .2rem;border-bottom:6px solid var(--rd-wood);scroll-snap-type:x mandatory;scrollbar-width:thin}
.rd-world{position:relative;flex:0 0 auto;width:76px;height:76px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--global-bg-color,#fff);scroll-snap-align:center;box-shadow:0 4px 12px rgba(80,60,40,.08);transition:transform .25s ease,box-shadow .25s ease}
.rd-world svg{width:44px;height:44px;fill:none;stroke:var(--rd-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rd-world svg .f{fill:var(--rd-blue);stroke:none}.rd-world svg .r{stroke:#d9908f}.rd-world svg .h{stroke:#e0a85c}
.rd-world:hover,.rd-world.is-on{transform:translateY(-6px);box-shadow:0 12px 24px rgba(80,60,40,.14)}
.rd-world.is-on svg{stroke:var(--rd-taro)}.rd-world.is-on svg .f{fill:var(--rd-taro)}
.rd-world:focus-visible{outline:2px solid var(--rd-taro);outline-offset:3px}
.rd-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,4px);padding:.2rem .55rem;border-radius:12px;background:#3d3552;color:#fff;font-size:.66rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.rd-world:hover .rd-tip,.rd-world:focus-visible .rd-tip{opacity:1;transform:translate(-50%,0)}
.rd-world-caption{margin:.9rem 0 0;text-align:center;font-family:Georgia,serif;font-style:italic;font-size:.95rem;min-height:1.6em}

/* curiosity tags */
.rd-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;list-style:none;margin:0;padding:0}
#reading-world .rd-tags li>*{display:inline-block;padding:.4rem .85rem;border-radius:20px;background:var(--global-bg-color,#fff);border:1px solid #e3dccf;font-size:.78rem;line-height:1.4}
.rd-tags button{border-color:#d6cce6!important;color:var(--rd-taro)!important;transition:background .2s}
.rd-tags button:hover{background:var(--rd-taro-soft)}
.rd-note{font-size:.74rem!important;color:var(--muted);text-align:center;margin:.9rem 0 0}

/* pick a shelf for me */
.rd-pick-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.rd-pick-buttons button{padding:.55rem 1.1rem;border-radius:30px;border:1px solid var(--rd-taro);background:none;color:var(--rd-taro);font-size:.82rem;transition:background .2s,color .2s}
.rd-pick-buttons button:hover,.rd-pick-buttons [aria-pressed=true]{background:var(--rd-taro);color:#fff}
.rd-ticket{max-width:440px;margin:1.4rem auto 0;padding:1.2rem 1.4rem 1rem;text-align:center;border-radius:6px;background:linear-gradient(#fbf7ef,#f3eef9);border-top:3px solid var(--rd-taro);box-shadow:0 12px 30px rgba(90,70,140,.12)}
.rd-ticket h4{font-family:Georgia,serif;font-weight:400;font-size:1.25rem;margin:.4rem 0 .4rem}
.rd-ticket p{margin:0;font-size:.9rem}
.rd-ticket a{color:var(--rd-taro)}
.rd-ticket.is-drawn{animation:rd-draw .4s ease both}

/* recommend me a book */
.rd-form{max-width:560px;margin:0 auto;padding:1.6rem 1.6rem 1.4rem;border-radius:8px;background:var(--rd-cream)}
.rd-form h3{font-family:Georgia,serif;font-weight:400;font-size:1.6rem;margin:.4rem 0 .2rem}
.rd-form>.rd-note:first-of-type{text-align:left;margin:0 0 1.2rem}
.rd-form label{display:block;margin-bottom:.8rem;font-size:.78rem;color:var(--muted)}
.rd-form input:not([type=checkbox]),.rd-form textarea,.rd-form select{display:block;box-sizing:border-box;width:100%;margin-top:.3rem;padding:.5rem .65rem;border:1px solid #e0d8cb;border-radius:4px;background:var(--global-bg-color,#fff);color:var(--rd-ink);font:inherit;font-size:.86rem}
.rd-form input:focus,.rd-form textarea:focus,.rd-form select:focus{outline:2px solid rgba(143,120,189,.45);outline-offset:1px}
.rd-form-pair{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.rd-form .rd-consent{display:flex;gap:.55rem;font-size:.7rem}
.rd-consent input{margin-top:.25rem;flex-shrink:0}
.rd-primary{display:block;width:100%;margin-top:.4rem;padding:.65rem 1rem;border:0;border-radius:30px;background:var(--rd-taro);color:#fff!important;font-size:.84rem;transition:filter .2s}
.rd-primary:hover{filter:brightness(1.08)}
.rd-form>.rd-note:last-of-type{text-align:left}
#book-result{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--global-divider-color,#ddd)}
#book-result p,#book-result a{font-size:.74rem}

@keyframes rd-open{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rd-draw{from{opacity:0;transform:translateY(8px) rotate(-1deg)}to{opacity:1;transform:none}}
html[data-theme=dark] #reading-world{--rd-cream:#2a2733;--rd-taro-soft:#3a3248;--rd-wood:#7a6650}
html[data-theme=dark] .rd-ticket{background:linear-gradient(#2a2733,#332c42)}
@media(max-width:650px){
 .rd-shelves{grid-template-columns:1fr;gap:.8rem}.rd-spines{height:56px}
 .rd-books,.rd-form-pair{grid-template-columns:1fr}
 .rd-worlds{justify-content:flex-start}
 .rd-panel,.rd-form{padding:1.1rem}
}
@media(prefers-reduced-motion:reduce){#reading-world *{animation:none!important;transition:none!important}}