/* Storybook edition. Learning diagrams retain their established layouts. */
:root { --ink:#302840; --paper:#fffdf8; --honey:#f3c86a; }
body { background:radial-gradient(ellipse at 12% 0,#e9e1f6 0,transparent 42%),radial-gradient(ellipse at 100% 35%,#e7f2e9 0,transparent 48%),#fbf7ef; }
header .brand { color:#55416f; }
.card { border-color:#e9e0d8; background:var(--paper); box-shadow:0 9px 30px #5d49630a; }
button,.button { transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease; }
button:active:not(:disabled) { transform:translateY(2px) scale(.98); }
button:disabled { transform:none; }
.character-portrait { display:inline-block; flex-shrink:0; width:88px; aspect-ratio:1; background-repeat:no-repeat; border-radius:28%; vertical-align:middle; background-color:var(--soft); }
.header-avatar .character-portrait { width:52px; border-radius:50%; box-shadow:0 0 0 3px white; }
.header-avatar .avatar { font-size:34px; }
.picker-intro { position:relative; margin:12px auto 30px; }
.picker-intro h1 { margin:9px 0 12px; color:#40324f; }
.intro-stars { color:#bc8a36; font-size:26px; letter-spacing:20px; line-height:1.7; padding-left:20px; }
.intro-stars span { display:inline-block; color:#8e76af; font-size:40px; }
.profile { position:relative; overflow:hidden; background:var(--paper); border:2px solid var(--soft); padding:22px; gap:24px; box-shadow:0 7px 0 var(--soft),0 15px 36px #4b325210; min-height:220px; }
.profile-art { position:relative; flex-shrink:0; }
.profile-art .character-portrait { width:136px; border-radius:42% 42% 36% 36%; box-shadow:0 0 0 6px var(--soft); }
.profile-emoji { position:absolute; right:-10px; bottom:-8px; background:white; border:3px solid var(--soft); border-radius:50%; width:44px; height:44px; text-align:center; font-size:24px; line-height:38px; }
.profile-copy { display:grid; gap:7px; }
.profile-copy .eyebrow { font-size:11px; letter-spacing:1.6px; }
.profile strong { font-size:36px; }
.profile-streak { font-size:16px; color:#665a72; }
.profile-enter { font-size:17px; color:var(--accent); margin-top:6px; }
.guest-picker .profile { min-height:70px; box-shadow:none; border:1px dashed #d6c8dc; padding:10px 18px; }
.guest-picker .profile .avatar { font-size:32px; }
.guest-picker .profile strong { font-size:18px; }
.guest-picker .profile .profile-emoji,.guest-picker .profile .eyebrow,.guest-picker .profile-enter { display:none; }
.guest-picker .profile-streak { font-size:14px; }
.guest-picker .profile-copy { gap:2px; }
.goal { border:1px solid #e8d6b8; background:linear-gradient(115deg,#fff7e4,#fffdf8); }
.goal h2 { margin:4px 0; }
.goal p { margin:8px 0 14px; }
.goal .meter { background:#eae1d3; }
.goal .meter span { background:linear-gradient(90deg,#c48d36,#e6ba58); }
.home-hero { position:relative; overflow:hidden; background:linear-gradient(155deg,var(--soft),var(--paper) 75%); }
.home-hero h1 { margin:10px 0 6px; }
.home-hero p { margin:6px 0 18px; }
.companion-scene { position:relative; width:220px; height:190px; margin:16px auto 0; display:grid; place-items:center; }
.home-companion { width:180px; border-radius:48% 48% 38% 38%; box-shadow:0 0 0 7px #ffffffaa,0 16px 24px #56416c15; }
.star-companion { display:inline-grid; place-items:center; font-size:92px; color:#aa7e31; }
.scene-spark { position:absolute; font-size:32px; color:#ac802b; }
.spark-one { top:10px; left:0; transform:rotate(-12deg); }
.spark-two { right:0; bottom:28px; font-size:24px; }
.home-controls { padding:24px; }
.home-actions .adventure-action { display:flex; align-items:center; gap:18px; text-align:left; min-height:112px; border-radius:24px; padding:18px 22px; font-size:25px; }
.adventure-action>span:nth-child(2) { flex:1; min-width:0; }
.adventure-action small { display:block; font-size:15px; line-height:1.45; font-weight:550; margin-top:6px; color:inherit; }
.action-symbol { display:inline-grid; place-items:center; width:52px; min-width:52px; height:56px; border-radius:18px; background:#ffffff26; font-size:32px; }
.home-actions .rd-button { background:#e8f2eb; color:#2e6256; border-color:#d4e5dc; }
.home-actions .rd-button .action-symbol { background:#ffffff88; }
.home-actions .secondary.adventure-action { background:#fff1d7; color:#725322; }
.themes button { display:flex; align-items:center; justify-content:flex-start; gap:10px; font-size:17px; }
.theme-portrait { width:48px; border-radius:50%; }
.star-companion.theme-portrait { font-size:38px; }
.story-crew { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:20px 28px; margin:24px 0; border-radius:26px; background:#ffffff99; border:1px solid #e9e0d8; }
.story-crew strong { display:block; font-size:21px; }
.story-crew small { display:block; margin-top:4px; font-size:15px; }
.story-crew>div { display:flex; flex-wrap:wrap; gap:12px; }
.crew-portrait { width:62px; border-radius:50%; box-shadow:0 0 0 3px white; }
.library-heading { padding:16px 0 22px; text-align:center; }
.library-heading h1 { margin:12px 0; }
.library-heading p { font-size:20px; color:#6b6073; }
.rd-library>h2 { font-size:25px; margin-top:28px; }
.rd-shelf { gap:24px; align-items:stretch; }
.rd-shelf .rd-button { position:relative; padding:12px 12px 18px; border-radius:12px 22px 22px 12px; background:var(--paper); border-color:#e5d9cb; box-shadow:4px 4px 0 #e6dacb,0 8px 20px #503c5112; }
.rd-shelf .book-cover { display:block; width:100%; aspect-ratio:1; height:auto; max-height:none; object-fit:cover; border-radius:7px 15px 15px 7px; }
.story-scene { display:block; background-repeat:no-repeat; background-size:300% 200%; aspect-ratio:1; background-color:#f2e6d6; }
.rd-shelf strong { font-size:21px; line-height:1.3; padding:0 5px; }
.book-new { color:#755316; background:#fff0c9; border-radius:999px; padding:5px 10px; font-size:12px!important; font-weight:800; }
.rd-page { box-shadow:0 8px 24px #58444e0b; border:1px solid #e6dacd; background:#fffdf8; }
.rd-page .story-scene { width:min(46%,440px); max-width:46%; height:auto; max-height:100%; flex-shrink:0; border-radius:18px; }
.rd-text { padding:12px 18px; }
.rd-controls .rd-button { border-radius:20px; }
.rd-lookback .evidence-picture { width:130px; max-height:160px; object-fit:contain; border-radius:12px; }
.rd-lookback .story-scene { height:130px; }
.reward-friend { position:relative; width:148px; margin:6px auto 24px; }
.reward-portrait { display:block; width:148px; border-radius:42%; margin:auto; box-shadow:0 0 0 8px var(--soft); }
.reward-seal { position:absolute; right:-14px; bottom:-12px; color:#8d6012; background:#ffdb7d; border:5px solid var(--paper); border-radius:50%; width:58px; height:58px; line-height:48px; font-size:32px; }
.rd-reward .reward-friend { width:94px; margin-bottom:18px; }
.rd-reward .reward-portrait { width:94px; }
.rd-reward .reward-seal { width:44px; height:44px; line-height:34px; font-size:22px; }
.screen { animation:none; }
.screen.screen-enter { animation:storybook-enter .36s cubic-bezier(.2,.75,.25,1) both; }
.screen-enter .profile { animation:card-arrive .45s cubic-bezier(.2,.75,.25,1) both; }
.screen-enter .profile:nth-child(2) { animation-delay:70ms; }
.screen-enter .home-companion { animation:friend-arrive .7s cubic-bezier(.2,.75,.25,1) both; }
.screen-enter .scene-spark { animation:spark-arrive .8s ease-out both; }
.screen-enter .reward-friend { animation:friend-arrive .65s cubic-bezier(.2,.75,.25,1) both; }
.page-forward .rd-page { animation:page-forward .28s ease-out both; }
.page-back .rd-page { animation:page-back .28s ease-out both; }
.feedback,.rd-feedback { animation:feedback-arrive .24s ease-out both; }
@keyframes storybook-enter { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes card-arrive { from{opacity:0;transform:translateY(16px) rotate(-1deg)} to{opacity:1;transform:none} }
@keyframes friend-arrive { 0%{opacity:0;transform:translateY(12px) scale(.93) rotate(-4deg)} 65%{opacity:1;transform:translateY(-3px) scale(1.015) rotate(1deg)} 100%{opacity:1;transform:none} }
@keyframes spark-arrive { from{opacity:0;transform:scale(.3) rotate(-35deg)} to{opacity:1;transform:scale(1)} }
@keyframes page-forward { from{opacity:.25;transform:translateX(14px)} to{opacity:1;transform:none} }
@keyframes page-back { from{opacity:.25;transform:translateX(-14px)} to{opacity:1;transform:none} }
@keyframes feedback-arrive { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@media(hover:hover) and (pointer:fine) { .profile:hover,.rd-shelf .rd-button:hover{transform:translateY(-4px);box-shadow:0 10px 24px #55396a22}.adventure-action:hover{transform:translateY(-2px)} }
@media(max-width:700px) {
 .profile{min-height:170px;padding:20px;gap:20px}.profile-art .character-portrait{width:100px}.profile strong{font-size:30px}
 .home-controls{padding:18px}.home-actions .adventure-action{font-size:23px;padding:15px;gap:12px}
 .story-crew{padding:18px}.crew-portrait{width:48px}.story-crew>div{gap:10px}.rd-shelf{gap:18px}.rd-shelf strong{font-size:18px}
 .rd-shelf .rd-button{padding:9px 9px 14px}.rd-shelf .rd-tag{font-size:13px!important}
}
@media(orientation:portrait),(max-width:650px) {
 .rd-page .story-scene{width:auto;max-width:100%;height:38%;max-height:300px;aspect-ratio:1;flex-shrink:0}
 .rd-lookback .evidence-picture{width:100px;height:100px}.rd-text{padding:8px}
}
@media(max-width:420px) { .rd-title h1{font-size:22px}.rd-title .rd-button{font-size:15px;padding:10px}.rd-page{padding:12px}.rd-controls .rd-button{font-size:17px;min-height:58px}.rd-controls{gap:6px}.home-controls .themes{grid-template-columns:1fr 1fr}.themes button{font-size:15px;gap:6px;padding:8px}.theme-portrait{width:38px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} button:hover,button:active{transform:none!important} }