:root{color-scheme:light;--ink:#3e2e24;--muted:#796550;--paper:#fff6e5;--line:#a48b6859;--book-font:Georgia,'Times New Roman','Noto Serif SC',serif;font-family:var(--book-font);color:var(--ink);background:#f5eee1;font-synthesis:none}
.shelf-settings{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}.reading-picker{min-width:115px;max-width:100%;border:1px solid #baa585;background:#fff9ed;padding:10px 30px 10px 12px;border-radius:7px;color:var(--ink);font:16px/1.4 Arial,sans-serif;cursor:pointer}@media(max-width:760px){.shelf-settings{width:100%;justify-content:flex-end;gap:12px}.reading-picker{font-size:15px;padding:9px 25px 9px 10px}}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#fffaf0,#f5eee1 75%);min-height:100dvh}button,textarea,select{font:inherit}button{color:inherit;cursor:pointer;border:0;touch-action:manipulation}button:disabled{cursor:default;opacity:.28}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a87535;outline-offset:4px}button,img,textarea{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}#app{max-width:1650px;margin:auto;padding:18px 22px 25px}.shelf{max-width:1080px;margin:auto;padding:26px 14px}.shelf-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:0 15px 24px}.eyebrow{font:15px/1.5 Arial,sans-serif;color:var(--muted);margin:0 0 9px}.shelf h1{font-size:clamp(34px,4vw,50px);font-weight:400;letter-spacing:-1px;margin:0}.language-picker{display:flex;flex-direction:column;gap:7px;font:13px/1.4 Arial,sans-serif;color:var(--muted)}.language-picker select{min-width:160px;border:1px solid #baa585;background:#fff9ed;padding:10px 34px 10px 12px;border-radius:7px;color:var(--ink);font-size:16px;cursor:pointer}.resume,.text-button{background:none;padding:9px 0;text-decoration:underline;text-decoration-color:#b8a080;text-underline-offset:5px;line-height:1.5}.resume{display:block;margin:0 18px 25px;font-size:18px}
.bookshelf{padding:18px 28px 0;border:16px solid #986b45;border-top:22px solid #b58b60;border-bottom-width:23px;border-radius:10px 10px 4px 4px;background:repeating-linear-gradient(93deg,#64462f12 0 2px,transparent 3px 47px),linear-gradient(90deg,#a37b54,#bfa07a 48%,#a07b58);box-shadow:inset 5px 0 12px #40240d55,0 9px 0 #745136,0 19px 28px #61472b22;position:relative}
.bookshelf:before,.bookshelf:after{content:'';position:absolute;bottom:-36px;width:28px;height:15px;background:#765033}.bookshelf:before{left:4px}.bookshelf:after{right:4px}.shelf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8%;padding:18px 28px 0;margin:0 -28px 28px;position:relative;align-items:end;border-bottom:18px solid #c49a6d;box-shadow:0 5px 0 #8c5f3b,0 11px 12px #42271144;background:linear-gradient(0deg,#3724163b,transparent 26%)}.shelf-row:last-child{margin-bottom:0;border-bottom:0;box-shadow:none;padding-bottom:10px}.story-card{display:block;padding:0;width:100%;max-width:245px;margin:auto;text-align:left;background:none;position:relative;transform-origin:bottom center;transition:transform .22s}.story-card:hover{transform:translateY(-7px) rotate(-1deg)}.cover-wrap{display:block;position:relative;aspect-ratio:.76;overflow:hidden;border-radius:4px 12px 8px 2px;border-left:9px solid #69513c;background:var(--cover-color,#e5d6bd);box-shadow:inset 6px 0 8px #3d291d44,4px 0 0 #f3e8d0,7px 1px 0 #b69c77,7px 9px 13px #33200d40}.cover-wrap:after{content:'';position:absolute;inset:0;box-shadow:inset 6px 0 10px #412e2844,inset 0 0 0 1px #f6dfb866;pointer-events:none}.cover-wrap img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}.cover-wrap.loaded img{opacity:1}.cover-placeholder{position:absolute;inset:9% 8% 30%;display:grid;place-items:center;color:#674e34;font-size:55px}.card-label{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;gap:6px;padding:38px 13px 15px;color:#fff9e9;text-align:center;background:linear-gradient(transparent,#312416c9 48%);text-shadow:0 1px 3px #352515}.card-label strong{font-size:clamp(20px,2.3vw,28px);font-weight:400;line-height:1.15;text-wrap:balance}.card-label small{font:12px/1.3 Arial,sans-serif;color:#fff4de}.shelf-note{text-align:center;color:var(--muted);font-size:15px;margin:38px 0 12px;line-height:1.6}.shelf-note span{display:inline-block;margin:0 6px}.shelf-details{margin:22px auto 0;max-width:650px;color:var(--muted);font:13px/1.6 Arial,sans-serif}.shelf-details summary{cursor:pointer;text-align:center}.shelf-actions{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.shelf-actions button{font-size:13px}
.play{max-width:1440px;width:100%;margin:0 auto}.book-stage{margin-inline:auto}.book-navigation{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px}.page-arrow{background:none;padding:10px 4px;width:44px;min-height:60px;border-radius:50%;color:#83613d;transition:background .15s,transform .15s}.page-arrow:not(:disabled):hover{background:#e3d2b46b;transform:scale(1.06)}.page-arrow svg{width:28px;height:42px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.storybook{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:8%;padding:7% 8.1% 8% 8.1%;min-height:620px;background:url('/art/book-desktop.webp') center/100% 100% no-repeat;filter:drop-shadow(0 12px 16px #583f2518);touch-action:pan-y}
.illustrated-page,.reading-page{position:relative;min-width:0;z-index:1}.illustrated-page{display:flex;align-items:center}.scene-picture{position:relative;isolation:isolate;width:100%;aspect-ratio:.97;overflow:hidden;background:#e5d6b855;border-radius:45% 44% 6% 5% / 7% 6% 5% 5%;mask-image:linear-gradient(to bottom,#000 93%,transparent)}.scene-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:filter .55s,opacity .6s,transform .65s}.scene-picture img:not([src]){visibility:hidden}.scene-before{z-index:0;filter:blur(14px);transform:scale(1.07);opacity:0}.scene-image{z-index:1;opacity:0}.scene-picture.has-image .scene-image{opacity:1}.scene-picture.is-loading .scene-image,.scene-picture.is-loading .scene-before{filter:blur(13px);transform:scale(1.07);opacity:.8}.scene-picture.revealing .scene-before{opacity:1}.scene-picture.revealing .scene-image{opacity:0}.picture-status{position:absolute;z-index:2;inset:45% 7% auto;text-align:center;font:15px/1.5 var(--book-font);color:#6c573f}.scene-picture.has-image .picture-status{inset:auto 5% 7%;color:#fffdf4;text-shadow:0 1px 5px #211706;background:#3d2c1e70;border-radius:3px;padding:5px 8px;font-size:13px}.scene-picture:not(.is-loading):not(.image-failed) .picture-status{opacity:0;pointer-events:none}
.reading-page{display:flex;flex-direction:column;justify-content:center;padding:10px 0 32px}.story-title{font-weight:700;font-size:clamp(29px,3.1vw,44px);line-height:1.12;letter-spacing:-.6px;margin:0 0 24px;text-wrap:balance;overflow-wrap:anywhere}.story-copy{font-size:clamp(23px,2.25vw,31px);line-height:1.48;overflow-wrap:anywhere}.story-copy p{margin:0;white-space:pre-line}.story-copy .question{margin-top:13px}.writing-area{margin-top:23px}.writing-area form{position:relative}#answer{display:block;resize:none;width:100%;min-height:94px;max-height:210px;border:0;border-radius:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 41px,var(--line) 41px,var(--line) 42px);padding:1px 3px 0;color:#4a3929;font:400 clamp(23px,2.2vw,30px)/42px var(--book-font);caret-color:#8c5c2d}#answer::placeholder{color:#8b7861;opacity:1}#answer:focus{outline:none}#answer:focus-visible{box-shadow:inset 0 -2px #987346}#answer:disabled{opacity:.65}.writing-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 0;color:#8a735a;font:12px/1.5 Arial,sans-serif}#send{background:none;font:25px/1 Arial,sans-serif;width:44px;min-height:40px;color:#8c6d48}.saved-answer{font-size:clamp(22px,2vw,28px);line-height:1.5;color:#806044;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;border-bottom:1px solid var(--line);padding:7px 0 12px}.busy{display:block;color:var(--muted);font:13px/1.5 Arial,sans-serif;margin-top:8px}.feedback{color:#846345;font-size:14px;line-height:1.5;margin:8px 0 0}.feedback:empty{display:none}.error{color:#9b4432;font:14px/1.5 Arial,sans-serif;margin:12px 0}.ending{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.ending p{flex-basis:100%;font-size:23px;margin:0}.ending .text-button{font-size:14px}.page-number{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:13px;color:#9a8265;font-variant-numeric:tabular-nums}.spiral{display:none}
.book-footer{display:grid;grid-template-columns:160px minmax(0,1fr) 160px;align-items:center;min-height:122px;padding:0 50px;margin-top:-7px}.bookshelf-button{display:block;background:none;padding:0;width:105px;justify-self:start;transition:transform .2s}.bookshelf-button:hover{transform:translateY(-3px)}.bookshelf-button img{width:100%;display:block}.under-book{text-align:center;align-self:center}.page-progress{position:static;text-align:center}#progress-dots{display:flex;justify-content:center;gap:9px;align-items:center}.progress-dot{display:block;width:13px;height:13px;border:1.7px solid #b49d7b;border-radius:50%;background:transparent;transition:background .4s}.progress-dot.filled{background:#8b775c;border-color:#8b775c}.swipe-hint{display:none}
.treasure-chest{position:relative;width:160px;aspect-ratio:1.1;justify-self:end;z-index:6;user-select:none;filter:drop-shadow(0 5px 5px #6b47261c);transform-origin:50% 85%}.chest-art{width:100%;height:100%;display:block;overflow:visible}.treasure-chest strong{position:absolute;left:50.6%;top:87%;transform:translate(-50%,-50%);text-align:center;font:700 var(--counter-size,20px)/1 var(--book-font);color:#ffe4a2;text-shadow:0 1px 1px #4c2c14;white-space:nowrap;max-width:55%;overflow:hidden}#chest-mouth{position:absolute;left:51%;top:56%;width:1px;height:1px}.star-burst{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}.flying-star{position:absolute;width:var(--star-size,95px);height:var(--star-size,95px);will-change:transform,opacity;filter:drop-shadow(0 6px 10px #a76e2555);object-fit:contain}.reward-pop{position:absolute;transform:translate(-50%,-50%);text-align:center;color:#764714;font:700 clamp(27px,3vw,43px)/1.2 var(--book-font);text-shadow:0 2px 0 #fff4d7,0 0 14px #fff3cf;white-space:nowrap}.storybook.turning .reading-page{animation:page-arrive .4s ease both;transform-origin:left center}.storybook.turning .illustrated-page{animation:picture-arrive .4s ease both}@keyframes page-arrive{from{opacity:.25;transform:perspective(1100px) rotateY(-10deg) translateX(10px)}to{opacity:1;transform:none}}@keyframes picture-arrive{from{opacity:.65}to{opacity:1}}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1450px){.storybook{min-height:700px}.story-copy{font-size:32px}}
@media(min-width:761px) and (max-width:1050px){#app{padding-inline:8px}.storybook{min-height:590px;padding-inline:8%;gap:7%}.story-title{font-size:30px}.story-copy{font-size:24px}.book-footer{min-height:110px}.treasure-chest{width:140px}}
@media(max-width:760px){
#app{padding:12px 6px 18px}.play{max-width:540px}.book-navigation{grid-template-columns:27px minmax(0,1fr) 27px;gap:0}.page-arrow{width:27px;padding:8px 2px;min-height:52px}.page-arrow svg{width:21px;height:34px}.storybook{display:flex;flex-direction:column;gap:16px;min-height:600px;padding:25px 20px 26px 33px;background:linear-gradient(90deg,#e8dbc0,#fff7e7 12%,#fff9ec 90%,#f0e5cf);border:1px solid #d3c2a4;border-left:7px solid #b4a18a;border-radius:5px 12px 12px 4px;box-shadow:3px 4px 0 #e7d8bc,5px 7px 0 #c2ae8b,0 12px 20px #60472b1c;filter:none}
.storybook:after{content:'';position:absolute;top:18px;bottom:18px;left:24px;width:1px;background:#cb989240;pointer-events:none}.spiral{display:flex;position:absolute;left:-17px;top:20px;bottom:20px;width:27px;flex-direction:column;justify-content:space-between;z-index:3;pointer-events:none}.spiral span{height:10px;width:27px;border:2px solid #8b867b;border-bottom-color:#d4d1c5;border-radius:50%;background:linear-gradient(180deg,#f9f7ec,#a5a092 45%,#e9e4d5 70%,transparent 71%);box-shadow:1px 3px 2px #67533a33;position:relative}.spiral span:after{content:'';position:absolute;width:7px;height:8px;border-radius:50%;right:-2px;top:0;background:#776951;z-index:-1}
.illustrated-page{display:block;width:100%}.scene-picture{aspect-ratio:1.7;border-radius:7px;max-height:220px;mask-image:linear-gradient(#000 94%,transparent)}.reading-page{display:flex;padding:0 0 25px;flex:1;justify-content:flex-start}.story-title{font-size:clamp(25px,6.4vw,34px);margin:0 0 15px;letter-spacing:-.4px}.story-copy{font-size:clamp(22px,5.4vw,27px);line-height:1.43}.story-copy .question{margin-top:11px}.writing-area{margin-top:17px}#answer{font-size:23px;line-height:36px;min-height:78px;max-height:180px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--line) 35px,var(--line) 36px)}.writing-meta{font-size:11px;gap:8px}#send{min-height:36px;width:38px}.saved-answer{font-size:22px}.feedback{font-size:12px}.page-number{font-size:12px;bottom:0}.ending p{font-size:21px}.ending .text-button{font-size:13px}.scene-picture.has-image .picture-status{font-size:11px}
.book-footer{grid-template-columns:78px minmax(0,1fr) 88px;padding:10px 22px 0;min-height:104px;margin-top:0}.bookshelf-button{width:72px}.treasure-chest{width:93px}.treasure-chest strong{font-size:var(--counter-size-mobile,14px)}#progress-dots{gap:6px}.progress-dot{width:10px;height:10px;border-width:1.5px}.swipe-hint{display:block;font:10px/1.4 Arial,sans-serif;color:#9a866b;margin:10px 0 0}
.shelf{padding:14px 8px}.shelf-heading{align-items:flex-start;flex-direction:column;gap:20px;margin:0 8px 20px}.shelf h1{font-size:35px}.eyebrow{font-size:13px}.language-picker{flex-direction:row;align-items:center;gap:12px;width:100%;justify-content:space-between}.language-picker select{min-width:130px;font-size:15px;padding:9px 25px 9px 10px}.resume{margin:0 8px 18px;font-size:16px}.bookshelf{padding:7px 10px 0;border-width:9px;border-top-width:14px;border-bottom-width:14px}.shelf-row{gap:9%;margin:0 -10px 18px;padding:15px 10px 0;border-bottom-width:13px}.cover-wrap{border-left-width:5px;border-radius:2px 7px 5px 1px;aspect-ratio:.62;box-shadow:2px 0 0 #f3e8d0,4px 1px 0 #b69c77,4px 5px 8px #33200d40}.card-label{padding:25px 5px 9px;gap:0}.card-label strong{font-size:clamp(14px,3.7vw,20px);line-height:1.15}.card-label small{display:none}.cover-placeholder{font-size:32px}.shelf-note{font-size:13px;margin-top:31px}.shelf-details{font-size:12px;margin-top:22px}.shelf-actions{gap:15px}
}
@media(max-width:370px){.storybook{padding-right:14px;padding-left:28px;min-height:580px}.story-copy{font-size:21px}.story-title{font-size:25px}.book-footer{padding-inline:16px;grid-template-columns:65px minmax(0,1fr) 80px}.treasure-chest{width:85px}.bookshelf-button{width:65px}#progress-dots{gap:4px}.swipe-hint{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.flying-star{display:none}}