/* Room studio: the original storybook rendering plus layered photographic scenery. */ .room-experience{border:1px solid #dddccd;border-radius:11px;overflow:hidden;background:#f1efe6;box-shadow:0 8px 25px #59482f12}.studio-bar{padding:10px 13px;display:flex;justify-content:space-between;gap:12px;background:#eeede4;border-bottom:1px solid #dddece}.studio-presets,.size-presets{display:flex;gap:3px;align-items:center}.studio-bar button{font-size:10px;border-radius:5px;padding:7px 10px;color:#8b8e7d;white-space:nowrap}.studio-bar button.selected{background:#fffdf5;color:#526449;box-shadow:0 1px 4px #27361d0d}.studio-presets button.selected:before{content:'✦';color:#ad9a71;margin-right:6px}.room-viewport{overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#abac93 #e8e7db;position:relative;scroll-behavior:smooth;outline-offset:-3px}.room{border:0;border-radius:0;box-shadow:none}.room-viewport[data-size="large"] .room{min-width:1350px;aspect-ratio:2}.room-viewport[data-size="grand"] .room{min-width:1800px;aspect-ratio:2.65}.explore-bar{display:flex;align-items:center;gap:15px;justify-content:space-between;padding:12px 15px;border-top:1px solid #dddece;color:#919782;font-size:9px;line-height:1.4}.explore-bar button{font-size:9px;color:#657653}.explore-bar button span{margin-left:7px}.real-shell,.real-photo,.real-fire-glow,.case-photo{display:none}.option-symbol{font-size:22px;line-height:23px;color:#8d967b}.design-hint{font-size:10px;line-height:1.7;color:#999c8a;margin:12px 0 0}.decor-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.decor-pick{border:1px solid #dfe2d2;border-radius:8px;padding:16px 10px;background:#fffdf6;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;color:#858e75}.decor-pick .decoration-svg{width:64px;height:64px}.decor-pick:hover,.decor-pick.selected{border-color:#81956c;background:#eaf0e1}.empty-decor{display:block;font-size:20px;color:#c9c3a0;opacity:.5}.shelf-decoration[data-decor="none"]{opacity:0}.shelf-row:hover .shelf-decoration[data-decor="none"],.shelf-decoration[data-decor="none"]:focus-visible{opacity:1}.shelf-row{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}.shelf-row::-webkit-scrollbar{display:none}.shelf-book{flex-shrink:0}.shelf-decoration{flex-shrink:0;margin-left:auto}.shelf-row.has-stack{min-height:0}.shelf-row.has-stack .shelf-decoration{position:relative}.scene-thumb,.companion-thumb{width:100%;height:44px;border-radius:4px;background-repeat:no-repeat}.scene-thumb{background-image:url('assets/window-scenes.png');background-size:300% 200%}.scene-thumb[data-view="meadow"],.scene-thumb[data-view="forest"]{background-position:0 0}.scene-thumb[data-view="rain"]{background-position:50% 0}.scene-thumb[data-view="mountains"]{background-position:100% 0}.scene-thumb[data-view="night"]{background-position:0 100%}.scene-thumb[data-view="ocean"]{background-position:50% 100%}.scene-thumb[data-view="dragons"]{background-position:100% 100%}.companion-thumb{background-image:url('assets/reading-companions-cutout.png');background-size:300% 200%;height:61px}.companion-thumb[data-companion="cat"]{background-position:0 0}.companion-thumb[data-companion="dog"]{background-position:50% 0}.companion-thumb[data-companion="fox"]{background-position:100% 0}.companion-thumb[data-companion="dragon"]{background-position:0 100%}.companion-thumb[data-companion="owl"]{background-position:50% 100%}.companion-thumb[data-companion="rabbit"]{background-position:100% 100%} /* Shelf colors and ornamentation work in both visual styles. */ .room[data-wood="green"]{--wood:#2c4435;--wood-light:#56704e;--wood-dark:#182a20}.room[data-wood="black"]{--wood:#292d29;--wood-light:#53584c;--wood-dark:#171b17}.room[data-wood="mahogany"]{--wood:#633d2e;--wood-light:#966a4b;--wood-dark:#38241d}.room{--trim:#bea26b}.room[data-trim="brass"]{--trim:#968554}.room[data-trim="none"]{--trim:var(--wood-light)}.room[data-trim="gold"] .bookcase-crown,.room[data-trim="brass"] .bookcase-crown{border-top:2px solid var(--trim);border-bottom:2px solid var(--trim)}.room[data-crown="false"] .bookcase-crown{height:5px;top:-8px;border:0}.room[data-crown="false"] .ceiling-trim{height:1%}.room[data-trim="gold"] .cabinet-base i,.room[data-trim="brass"] .cabinet-base i{border-color:var(--trim);box-shadow:inset 0 0 0 2px #6b704333}.room[data-size="large"] .bookcase{width:17.5%!important;left:calc(2% + var(--case-index)*19%)!important;right:auto!important}.room[data-size="large"] .bookcase[data-bank="tbr"]{left:63%!important}.room[data-size="large"] .bookcase[data-bank="future"]{left:82%!important}.room[data-size="grand"] .bookcase{width:12%!important;left:calc(1% + var(--case-index)*13%)!important;right:auto!important}.room[data-size="grand"] .bookcase[data-bank="tbr"]{left:62%!important}.room[data-size="grand"] .bookcase[data-bank="future"]{left:75%!important}.room[data-size="grand"] .bookcase[data-bank="dreams"]{left:88%!important}.room[data-size="large"] .room-window,.room[data-size="grand"] .room-window{width:20%;left:40%}.room[data-size="large"] .center-frame,.room[data-size="grand"] .center-frame{width:19%;left:40.5%}.room[data-size="large"] .fireplace,.room[data-size="grand"] .fireplace{width:19%;left:40.5%}.room[data-size="large"] .armchair{width:13%}.room[data-size="grand"] .armchair{width:10%}.room[data-size="large"] .room-pet{width:8%}.room[data-size="grand"] .room-pet{width:6%} /* Photographic layers retain independent visibility and shelf customization. */ .room[data-style="realistic"]{--photo-width:100%;aspect-ratio:1.5;background:#af9574;isolation:isolate}.room[data-style="realistic"][data-size="large"]{--photo-width:80%}.room[data-style="realistic"][data-size="grand"]{--photo-width:60%}.room[data-style="realistic"] .real-shell{display:block;position:absolute;inset:0;background:url('assets/room-shell.png') center/100% 100% no-repeat;z-index:-2}.room[data-style="realistic"] .real-photo{display:block;position:absolute;top:0;left:calc((100% - var(--photo-width))/2);width:var(--photo-width);height:100%;background:url('assets/realistic-library.png') center/100% 100% no-repeat;pointer-events:none;z-index:1}.room[data-style="realistic"] .real-curtains{clip-path:polygon(37% 0,63% 0,63% 33%,37% 33%)}.room[data-style="realistic"] .real-hearth{clip-path:polygon(36.4% 46.9%,63.2% 46.9%,63.2% 74.8%,36.4% 74.8%);z-index:5}.room[data-style="realistic"] .real-chair{left:auto;right:0;clip-path:polygon(78% 57.5%,87% 58%,94% 60%,94% 69%,96% 74%,96% 82%,100% 85%,100% 100%,84% 100%,84% 94%,71.2% 93%,71% 76%,70% 72%,71% 64%,77.5% 62%);z-index:7}.room[data-style="realistic"] .real-plant{left:0;clip-path:polygon(0 28%,8.5% 28%,8.5% 78%,0 78%);z-index:5}.room[data-style="realistic"] .real-fire-glow{display:block;position:absolute;left:calc(50% - var(--photo-width)*.062);top:61%;width:calc(var(--photo-width)*.12);height:12%;background:radial-gradient(ellipse at 50% 50%,#ffb34388,#da661c44 30%,transparent 65%);mix-blend-mode:screen;animation:hearth-breathe 3s infinite alternate;z-index:6;pointer-events:none}.room[data-style="realistic"]>.room-grain,.room[data-style="realistic"]>.wallpaper-pattern,.room[data-style="realistic"]>.room-floor,.room[data-style="realistic"]>.room-rug,.room[data-style="realistic"]>.hanging-vine,.room[data-style="realistic"]>.wall-light,.room[data-style="realistic"]>.fireplace,.room[data-style="realistic"]>.room-plant,.room[data-style="realistic"]>.armchair{display:none}.room[data-style="realistic"] .ceiling-trim{height:3%;background:linear-gradient(#3e392b,#82744f 12%,#c5b995 19%,#514b36 35%,#b6a782 44%,#d7c5a0 60%,#958464 75%,#524834 85%,#a18e69);border-bottom:1px solid var(--trim);box-shadow:0 4px 7px #28211677;z-index:4}.room[data-style="realistic"][data-crown="false"] .ceiling-trim{display:none} .room[data-style="realistic"] .bookcase{top:4.3%;left:7.3%;right:auto;width:29.5%;height:69.5%;background:none;border:0;border-radius:0;box-shadow:4px 7px 9px #161b1644;z-index:4}.room[data-style="realistic"] .bookcase-right{left:63.2%}.room[data-style="realistic"] .case-photo{display:block;position:absolute;inset:0;background-image:url('assets/realistic-library.png');background-size:339% 143.88%;background-position:10.35% 14.1%;z-index:-1;pointer-events:none}.room[data-style="realistic"] .bookcase-crown{top:0;height:8%;left:0;width:100%;background:linear-gradient(0deg,#19231b55,#a78d4c55 10%,#26362955 20%,#17261c66 50%,#61735555 75%,#17261c88);border-radius:0;box-shadow:0 2px 3px #12161255;pointer-events:none}.room[data-style="realistic"] .cabinet-base{display:none}.room[data-style="realistic"] .shelf-heading{position:absolute;top:7%;left:12%;width:76%;height:3.4%;padding:0;text-align:center;font-size:clamp(5px,.56cqw,8px);letter-spacing:1.2px;color:#cfb982;text-shadow:0 1px 2px #000;z-index:4}.room[data-style="realistic"] .shelf-heading span{font-size:8px}.room[data-style="realistic"] .shelf-row{position:absolute;left:11%;width:78%;top:calc(9.4% + var(--row-index)*19.6%);height:18%;border:0;background:none;box-shadow:none;padding:0 3% 1%;gap:3%;overflow-x:auto;overflow-y:hidden;align-items:flex-end;justify-content:flex-start}.room[data-style="realistic"] .shelf-row:after{display:none}.room[data-style="realistic"] .shelf-book{height:83%;width:24%;max-width:24%;box-shadow:3px 3px 4px #070c0acc}.room[data-style="realistic"] .shelf-book .cover-art{background:linear-gradient(100deg,#ffffff18,transparent 30%,#00000030),var(--cover);box-shadow:inset -2px 0 0 #e8d5ae66;filter:saturate(.7)}.room[data-style="realistic"] .shelf-book .cover-title{font-size:clamp(5px,.77cqw,12px)}.room[data-style="realistic"] .shelf-book.spine{width:9%;max-width:9%;height:86%}.room[data-style="realistic"] .shelf-book.spine .cover-title{font-size:clamp(5px,.64cqw,10px)}.room[data-style="realistic"] .shelf-book.stacked{height:20%;width:39%;max-width:39%;left:0;bottom:2%}.room[data-style="realistic"] .shelf-book.stacked.stack-2{bottom:24%;width:37%;max-width:37%}.room[data-style="realistic"] .shelf-book.stacked.stack-3{bottom:46%;width:35%;max-width:35%}.room[data-style="realistic"] .shelf-book.stacked .cover-title{font-size:clamp(4px,.56cqw,8px)}.room[data-style="realistic"] .shelf-row.has-stack{padding-left:43%}.room[data-style="realistic"] .shelf-decoration{height:75%;width:24%;max-width:24%;filter:drop-shadow(3px 3px 4px #070c0a99) saturate(.6)}.room[data-style="realistic"] .bookcase:after{content:'';position:absolute;inset:7% 2% 5%;border:1px solid var(--trim);box-shadow:inset 1px 0 0 #eddb9c44,1px 0 0 #1d251e99;opacity:.55;pointer-events:none;z-index:3}.room[data-style="realistic"][data-trim="none"] .bookcase:after{display:none}.room[data-style="realistic"][data-trim="none"] .case-photo{filter:grayscale(.75)}.room[data-style="realistic"][data-wood="black"] .case-photo{filter:grayscale(1) brightness(.7)}.room[data-style="realistic"][data-wood="walnut"] .case-photo{filter:sepia(.8) saturate(.65) brightness(1.06)}.room[data-style="realistic"][data-wood="oak"] .case-photo{filter:sepia(1) saturate(.7) brightness(1.5)}.room[data-style="realistic"][data-wood="ivory"] .case-photo{filter:grayscale(.8) brightness(2.7) contrast(.7)}.room[data-style="realistic"][data-wood="mahogany"] .case-photo{filter:sepia(1) saturate(1.8) hue-rotate(329deg) brightness(1.1)}.room[data-style="realistic"][data-crown="false"] .bookcase-crown{background:var(--wood);height:7%;border-top:1px solid var(--trim);border-bottom:0} .room[data-style="realistic"] .room-window{left:calc(50% - var(--photo-width)*.0685);width:calc(var(--photo-width)*.137);height:27.7%;top:2.6%;background:transparent;border:0;padding:0;box-shadow:none;border-radius:50% 50% 0 0;z-index:2}.room[data-style="realistic"] .window-sky{inset:0;border-radius:50% 50% 0 0;box-shadow:inset 0 0 8px #17231955;background-image:url('assets/window-scenes.png');background-size:300% 200%;background-position:0 0}.room[data-style="realistic"] .window-sky>.moon,.room[data-style="realistic"] .window-sky>.mountain,.room[data-style="realistic"] .window-sky>.forest-trees,.room[data-style="realistic"] .window-sky>.window-stars,.room[data-style="realistic"] .window-sky:after,.room[data-style="realistic"] .window-curtain{display:none}.room[data-style="realistic"] .window-frame{border:3px solid #3f3a2e;border-radius:50% 50% 0 0;box-shadow:inset 0 0 0 1px #beaa7a,0 0 0 1px #beac84}.room[data-style="realistic"] .window-cross{background:linear-gradient(90deg,transparent 24%,#453e30 24.5% 26%,transparent 26.5% 49%,#453e30 49.5% 51%,transparent 51.5% 74%,#453e30 74.5% 76%,transparent 76.5%)}.room[data-style="realistic"] .window-cross:after{height:2px;top:39%;background:#453e30;box-shadow:0 1px 0 #af9e73,0 56px 0 #453e30}.room[data-style="realistic"] .window-sill{height:4px;left:-3%;width:106%;bottom:-4px;background:linear-gradient(#ddd0b0,#9c8b69);box-shadow:0 2px 2px #574c3966} .room[data-style="realistic"] .center-frame{left:41%;top:33%!important;width:18%;min-height:12%;max-height:28%!important;padding:1%;background:linear-gradient(115deg,#d6c9a6,#eee2c6 55%,#c3b28c);border:4px solid #927345;box-shadow:0 0 0 2px #c6a76c,0 0 0 4px #726046,3px 4px 7px #271d1955,inset 0 0 0 1px #a19070;z-index:6;transform:none}.room[data-style="realistic"] .frame-flourish{display:none}.room[data-style="realistic"] .center-frame>span{font-size:clamp(4px,.43cqw,7px);letter-spacing:1.5px}.room[data-style="realistic"] .center-frame h3{font-size:clamp(9px,1.15cqw,17px);margin:2% 0 4%;line-height:1.16}.room[data-style="realistic"] .center-frame ol{font-size:clamp(5px,.59cqw,9px);padding-left:14%;line-height:1.1;margin:0}.room[data-style="realistic"] .center-frame li{margin:3% 0}.room[data-style="realistic"] .center-frame li span{display:inline;margin-left:5px;font-size:clamp(3px,.32cqw,5px)}.room[data-style="realistic"] .center-frame button{font-size:clamp(5px,.48cqw,8px);margin-top:4%}.room[data-style="realistic"] .room-caption{left:42%;bottom:3%;font-size:clamp(6px,.7cqw,10px);color:#e7d5b0;text-shadow:0 1px 4px #281c0b}.room[data-style="realistic"] .room-sparkles{opacity:.35}.room[data-style="realistic"] .room-pet{left:30%;bottom:11%;width:13%;height:17%;z-index:8;filter:drop-shadow(3px 5px 3px #20170c66)}.room-pet .companion-sprite{display:none}.room[data-style="realistic"] .room-pet>.cat-tail,.room[data-style="realistic"] .room-pet>.cat-body,.room[data-style="realistic"] .room-pet>.cat-head{display:none}.room[data-style="realistic"] .companion-sprite{display:block;position:absolute;inset:0;background-image:url('assets/reading-companions-cutout.png');background-size:300% 200%;background-repeat:no-repeat}.room-pet[data-companion="cat"] .companion-sprite{background-position:0 0}.room-pet[data-companion="dog"] .companion-sprite{background-position:50% 0}.room-pet[data-companion="fox"] .companion-sprite{background-position:100% 0}.room-pet[data-companion="dragon"] .companion-sprite{background-position:0 100%}.room-pet[data-companion="owl"] .companion-sprite{background-position:50% 100%}.room-pet[data-companion="rabbit"] .companion-sprite{background-position:100% 100%}.room[data-style="illustrated"] .room-pet:not([data-companion="cat"])>.cat-tail,.room[data-style="illustrated"] .room-pet:not([data-companion="cat"])>.cat-body,.room[data-style="illustrated"] .room-pet:not([data-companion="cat"])>.cat-head{display:none}.room[data-style="illustrated"] .room-pet:not([data-companion="cat"]) .companion-sprite{display:block;position:absolute;inset:0;background-image:url('assets/reading-companions-cutout.png');background-size:300% 200%;filter:contrast(.9) saturate(.6)}.room[data-style="realistic"] .pet-sleep{top:4%;left:20%;color:#d2bf96;font-family:Georgia;opacity:.8}.room[data-style="realistic"] .dragon-decor{top:2%;left:32%;width:5%;height:9%;filter:saturate(.5) drop-shadow(2px 3px 3px #15231999)} /* Style and atmosphere overlays affect materials without dimming the controls. */ .room[data-style="realistic"][data-theme="moonlit"] .real-shell{filter:brightness(.62) saturate(.45) sepia(.15) hue-rotate(160deg)}.room[data-style="realistic"][data-theme="moonlit"] .real-photo{filter:brightness(.8) saturate(.6)}.room[data-style="realistic"][data-theme="rose"] .real-shell{filter:brightness(1.13) saturate(.6)}.room[data-style="realistic"][data-theme="academy"] .real-shell{filter:brightness(.74) saturate(.65)}.room[data-style="realistic"][data-theme="academy"] .real-photo{filter:brightness(.85)}.room[data-style="realistic"][data-wall="botanical"] .wallpaper-pattern,.room[data-style="realistic"][data-wall="stars"] .wallpaper-pattern{display:block;opacity:.09;z-index:-1}.room[data-style="realistic"][data-floor="stone"] .room-floor,.room[data-style="realistic"][data-floor="checker"] .room-floor{display:block;height:27.5%;border:0;z-index:0;opacity:.72}.room[data-style="realistic"][data-floor="stone"] .room-rug,.room[data-style="realistic"][data-floor="checker"] .room-rug{display:block;z-index:0;bottom:1%;width:58%;left:21%;height:15%;opacity:.55} .room-window[data-view="rain"] .window-sky,.room-window[data-view="meadow"] .window-sky,.room-window[data-view="mountains"] .window-sky,.room-window[data-view="dragons"] .window-sky{background-image:url('assets/window-scenes.png');background-size:300% 200%}.room-window[data-view="meadow"] .window-sky{background-position:0 0}.room-window[data-view="rain"] .window-sky{background-position:50% 0}.room-window[data-view="mountains"] .window-sky{background-position:100% 0}.room-window[data-view="dragons"] .window-sky{background-position:100% 100%}.room[data-style="realistic"] .room-window[data-view="night"] .window-sky{background-image:url('assets/window-scenes.png');background-size:300% 200%;background-position:0 100%}.room[data-style="realistic"] .room-window[data-view="ocean"] .window-sky{background-image:url('assets/window-scenes.png');background-size:300% 200%;background-position:50% 100%}.room[data-style="realistic"] .room-window[data-view="forest"] .window-sky{background-image:url('assets/window-scenes.png');background-size:300% 200%;background-position:0 0;filter:saturate(.8) hue-rotate(20deg)}.room-window[data-view="meadow"] .moon,.room-window[data-view="meadow"] .mountain,.room-window[data-view="meadow"] .forest-trees,.room-window[data-view="rain"] .moon,.room-window[data-view="rain"] .mountain,.room-window[data-view="rain"] .forest-trees,.room-window[data-view="mountains"] .moon,.room-window[data-view="mountains"] .mountain,.room-window[data-view="mountains"] .forest-trees,.room-window[data-view="dragons"] .moon,.room-window[data-view="dragons"] .mountain,.room-window[data-view="dragons"] .forest-trees{display:none}.window-rain{display:none;position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.room-window[data-view="rain"] .window-rain{display:block}.window-rain i{position:absolute;top:-40%;left:calc(var(--rain-index)*5.7%);height:18%;width:1px;background:linear-gradient(transparent,#dbebeacc,transparent);transform:rotate(12deg);animation:rain-fall calc(.65s + var(--rain-index)*.025s) linear infinite;animation-delay:calc(var(--rain-index)*-.13s)}.flying-dragons{display:none;position:absolute;inset:0;pointer-events:none;color:#2e2925;overflow:hidden}.room-window[data-view="dragons"] .flying-dragons{display:block}.flying-dragons svg{position:absolute;width:33%;height:20%;top:24%;left:-40%;fill:currentColor;animation:dragon-pass 15s linear infinite;filter:drop-shadow(0 0 1px #85795e66)}.flying-dragons svg:last-child{width:18%;height:12%;top:38%;animation-delay:6s;animation-duration:21s;opacity:.65}.room[data-style="realistic"][data-size="large"] .room-pet{width:10%;left:36%}.room[data-style="realistic"][data-size="grand"] .room-pet{width:8%;left:38%} @keyframes rain-fall{to{top:110%;transform:translateX(-10px) rotate(12deg)}}@keyframes dragon-pass{0%{left:-40%;transform:translateY(5px) scaleY(.85)}25%{transform:translateY(-6px) scaleY(1)}55%{left:120%;transform:translateY(7px) scaleY(.85)}100%{left:140%}}@keyframes hearth-breathe{to{opacity:.35;transform:scale(.95)}} @media(max-width:760px){.studio-bar{flex-direction:column;padding:9px;gap:7px}.studio-presets,.size-presets{justify-content:center}.studio-bar button{font-size:9px;padding:7px 9px}.size-presets{border-top:1px solid #dedfd0;padding-top:6px}.explore-bar{flex-wrap:wrap;justify-content:center;text-align:center;font-size:8px;padding:10px;gap:7px}.explore-bar>span:nth-child(2){display:none}.explore-bar button{font-size:8px}.room[data-style="realistic"]{min-width:740px;aspect-ratio:1.5}.room-viewport{max-height:505px}.room-viewport[data-size="large"] .room{min-width:1200px}.room-viewport[data-size="grand"] .room{min-width:1640px}.room-viewport[data-size="large"],.room-viewport[data-size="grand"]{max-height:620px}.room[data-style="realistic"] .center-frame{padding:1%;min-height:12%;top:33%!important;left:41%;width:18%}.room[data-style="realistic"] .center-frame>span{font-size:4px}.room[data-style="realistic"] .center-frame h3{font-size:9px}.room[data-style="realistic"] .center-frame ol{font-size:5px}.room[data-style="realistic"] .center-frame li span{font-size:3px}.room[data-style="realistic"] .center-frame button{font-size:5px}.room[data-style="realistic"] .bookcase{top:4.3%;height:69.5%;width:29.5%;left:7.3%;border:0}.room[data-style="realistic"] .bookcase-right{left:63.2%;right:auto}.room[data-style="realistic"] .shelf-heading{font-size:5px;padding:0}.room[data-style="realistic"] .bookcase-crown{top:0;height:8%}.room[data-style="realistic"] .shelf-row{border:0;padding:0 3% 1%}.room[data-style="realistic"] .shelf-row.has-stack{padding-left:43%}.room[data-style="realistic"] .room-caption{left:42%;font-size:6px}.decor-pick{font-size:9px}.decor-pick .decoration-svg{width:50px;height:50px}.decor-picker{gap:8px}} .phone-preview .studio-bar{flex-direction:column;padding:9px;gap:7px}.phone-preview .studio-presets,.phone-preview .size-presets{justify-content:center}.phone-preview .studio-bar button{font-size:9px;padding:7px 9px}.phone-preview .size-presets{border-top:1px solid #dedfd0;padding-top:6px}.phone-preview .explore-bar{flex-wrap:wrap;justify-content:center;text-align:center;font-size:8px;padding:10px;gap:7px}.phone-preview .explore-bar>span:nth-child(2){display:none}.phone-preview .explore-bar button{font-size:8px}.phone-preview .room[data-style="realistic"]{min-width:740px;aspect-ratio:1.5}.phone-preview .room-viewport{max-height:505px}.phone-preview .room-viewport[data-size="large"] .room{min-width:1200px}.phone-preview .room-viewport[data-size="grand"] .room{min-width:1640px}.phone-preview .room-viewport[data-size="large"],.phone-preview .room-viewport[data-size="grand"]{max-height:620px}.phone-preview .room[data-style="realistic"] .bookcase{top:4.3%;height:69.5%;width:29.5%;left:7.3%;border:0}.phone-preview .room[data-style="realistic"] .bookcase-right{left:63.2%;right:auto}.phone-preview .room[data-style="realistic"] .bookcase-crown{top:0;height:8%}.phone-preview .room[data-style="realistic"] .shelf-heading{font-size:5px;padding:0}.phone-preview .room[data-style="realistic"] .shelf-row{border:0;padding:0 3% 1%}.phone-preview .room[data-style="realistic"] .shelf-row.has-stack{padding-left:43%}.phone-preview .room[data-style="realistic"] .center-frame{left:41%;top:33%!important;width:18%;padding:1%;min-height:12%}.phone-preview .room[data-style="realistic"] .center-frame>span{font-size:4px}.phone-preview .room[data-style="realistic"] .center-frame h3{font-size:9px}.phone-preview .room[data-style="realistic"] .center-frame ol{font-size:5px}.phone-preview .room[data-style="realistic"] .center-frame li span{font-size:3px}.phone-preview .room[data-style="realistic"] .center-frame button{font-size:5px}.phone-preview .room[data-style="realistic"] .room-caption{left:42%;font-size:6px} .pan-hint{display:none}.room-viewport[data-size="large"]+.explore-bar .pan-hint,.room-viewport[data-size="grand"]+.explore-bar .pan-hint{display:block;color:#7d886d}.phone-preview .pan-hint{display:block;color:#7d886d}@media(max-width:760px){.pan-hint{display:block;color:#7d886d}} /* Responsive silhouette masks keep the photographic companions separate from the room. */ .companion-thumb[data-companion="cat"],.room-pet[data-companion="cat"] .companion-sprite{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M7 58C4 50 8 39 12 35L9 26L22 32C36 15 58 17 75 23C92 27 100 47 97 63C94 81 56 85 32 80C20 84 10 78 7 69Z' fill='white'/%3E%3C/svg%3E");mask-size:100% 100%}.companion-thumb[data-companion="dog"],.room-pet[data-companion="dog"] .companion-sprite{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M4 63C3 53 9 38 18 34C19 24 33 27 39 31C51 20 71 27 83 35C98 44 99 57 95 68C88 79 68 77 59 78L50 82L35 79L23 79C8 79 2 72 4 63Z' fill='white'/%3E%3C/svg%3E");mask-size:100% 100%}.companion-thumb[data-companion="fox"],.room-pet[data-companion="fox"] .companion-sprite{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M7 58C9 47 20 41 21 33L20 20L32 24L40 19L54 13L57 26C75 18 92 34 96 49C101 65 91 77 80 81C65 89 23 87 10 79C5 74 3 64 7 58Z' fill='white'/%3E%3C/svg%3E");mask-size:100% 100%}.companion-thumb[data-companion="dragon"],.room-pet[data-companion="dragon"] .companion-sprite{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M3 74L2 50L11 40L9 20L17 35L27 24L32 19L28 30L34 34C47 8 64 8 82 16L100 30L88 27L95 37L86 38L96 56C102 76 89 90 72 94L22 93C9 92 2 84 3 74Z' fill='white'/%3E%3C/svg%3E");mask-size:100% 100%}.companion-thumb[data-companion="owl"],.room-pet[data-companion="owl"] .companion-sprite{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M19 58C20 47 26 39 25 30C24 9 41 0 55 3C69 4 82 19 79 34C79 44 88 60 85 71L75 82L74 91L83 94L76 98L62 95L54 93L47 97L38 93L26 97L21 94L31 89L28 81C22 74 17 65 19 58Z' fill='white'/%3E%3C/svg%3E");mask-size:100% 100%}.companion-thumb[data-companion="rabbit"],.room-pet[data-companion="rabbit"] .companion-sprite{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M13 32C15 19 24 8 42 7C53 6 64 11 68 23C86 27 95 52 91 66L93 71L85 83L74 89L55 88L40 92L29 88L31 79L29 67C21 62 23 57 24 52C14 49 7 43 13 32Z' fill='white'/%3E%3C/svg%3E");mask-size:100% 100%} .room[data-style="realistic"] .room-pet{width:14%;height:21%;bottom:6%}.room[data-style="realistic"][data-size="large"] .room-pet{width:11%;height:23%}.room[data-style="realistic"][data-size="grand"] .room-pet{width:8.5%;height:23%}.room[data-style="realistic"][data-size="large"] .center-frame{width:15%;left:42.5%}.room[data-style="realistic"][data-size="grand"] .center-frame{width:13%;left:43.5%}.room[data-style="realistic"][data-size="large"] .shelf-book .cover-title,.room[data-style="realistic"][data-size="grand"] .shelf-book .cover-title{font-size:clamp(5px,.47cqw,10px)}.room[data-style="realistic"][data-size="large"] .shelf-book .cover-symbol,.room[data-style="realistic"][data-size="grand"] .shelf-book .cover-symbol{font-size:clamp(10px,1cqw,20px)}.room[data-style="realistic"][data-size="large"] .shelf-book .cover-author,.room[data-style="realistic"][data-size="grand"] .shelf-book .cover-author{font-size:clamp(2px,.2cqw,4px)} @media(prefers-reduced-motion:reduce){.window-rain i,.flying-dragons svg,.real-fire-glow{animation:none}.flying-dragons svg{left:35%}.flying-dragons svg:last-child{left:65%}.room-viewport{scroll-behavior:auto}} /* Keep each square image-sheet cell intact, regardless of the room's proportions. */ .room .room-pet{height:auto!important;aspect-ratio:1; padding:0} .room .room-pet>.cat-tail,.room .room-pet>.cat-body,.room .room-pet>.cat-head{display:none} .room[data-style="realistic"] .room-pet .companion-sprite{inset:0;filter:none} .room .room-pet .companion-sprite{display:none!important} .companion-menu{width:min(360px,calc(100vw - 24px));max-height:80dvh;overflow:auto;padding:20px;border:1px solid var(--line,#d8d8c8);border-radius:20px;background:var(--surface,#fffdf7);color:var(--ink,#48523f);box-shadow:0 12px 45px #19231b33} .companion-menu::backdrop{background:#19231b18} .companion-menu-heading{display:flex;align-items:center;gap:14px} .companion-menu-heading .cartoon-thumb{flex:0 0 64px;width:64px;height:64px} .companion-menu-heading>button{margin-left:auto;font-size:24px} .companion-menu h2{font-family:var(--sans,"Segoe UI",sans-serif);font-size:22px;font-weight:750;letter-spacing:-.6px;margin:6px 0 12px} .companion-menu h2.companion-greeting{font-size:25px;margin:0} .companion-menu h3{font-size:15px;margin-top:20px} .companion-menu p{font-size:13px;line-height:1.7} .companion-menu-actions{display:grid;gap:10px;margin:18px 0;max-height:40dvh;overflow:auto} .companion-menu-actions button{display:block;text-align:left;border:1px solid var(--line,#d8d8c8);border-radius:10px;padding:13px;background:var(--surface,#fffdf7);color:inherit;min-height:44px} .companion-menu-actions small{display:block;margin-top:5px} .companion-menu button:focus-visible{outline:2px solid currentColor;outline-offset:3px} .companion-menu footer{border-top:1px solid var(--line,#d8d8c8);padding-top:10px;margin-top:18px;display:flex;justify-content:space-between;gap:10px} .companion-menu footer button{font-size:11px;opacity:.8;min-height:32px} .companion-menu footer .companion-help-link{font-size:13px;font-weight:700;opacity:1} .companion-primary-actions button[data-companion-action=read]{border:0;background:linear-gradient(120deg,#6451d9,#b23cb4);color:#fff;box-shadow:0 5px 16px #7652d52b;padding:17px;border-radius:15px} .companion-primary-actions strong{font-size:18px;letter-spacing:-.25px} .companion-primary-actions small{color:#fff;opacity:.95;font-size:11px} .companion-coins{display:flex;align-items:center;gap:13px;width:100%;padding:10px 14px;border:1px solid #efcc78;border-radius:14px;background:linear-gradient(120deg,#fff8da,#ffebbb);color:#71420e;text-align:left;box-shadow:inset 0 1px #fff9,0 3px 12px #d99b1812} .companion-coin-art{position:relative;display:block;flex:0 0 57px;width:57px;height:49px;perspective:160px} .companion-coin{position:absolute;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:3px solid #eaa52a;background:radial-gradient(circle at 30% 25%,#fff4b0,#ffd355 55%,#e9a221);color:#a75b0c;font-size:23px;text-shadow:0 1px #fff5c9;box-shadow:inset 0 0 0 2px #ffe69a,0 3px 0 #b87d1c,0 5px 8px #b77b1826;overflow:hidden} .companion-coin-back{left:2px;top:10px;transform:rotate(-18deg)} .companion-coin-front{left:17px;top:3px;animation:companion-coin-float 4s ease-in-out infinite} .companion-coin-front::after{content:'';position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 35%,#fff9 48%,transparent 61%);transform:translateX(-100%);animation:companion-coin-shine 6s ease-in-out infinite} .companion-coin-spark{position:absolute;right:-4px;top:-4px;color:#c88312;font-size:17px;animation:companion-coin-twinkle 3s ease-in-out infinite} .companion-coin-balance strong{display:block;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.5px} .companion-coin-balance small{display:block;margin-top:4px;font-size:10px;font-weight:650} .companion-coin-link{margin-left:auto;font-size:20px} @keyframes companion-coin-float{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-3px) rotate(-5deg)}} @keyframes companion-coin-shine{0%,65%,100%{transform:translateX(-100%)}85%{transform:translateX(100%)}} @keyframes companion-coin-twinkle{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}} @media(prefers-reduced-motion:reduce){.companion-coin-front,.companion-coin-front::after,.companion-coin-spark{animation:none}} .companion-totals{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0} .companion-totals>button{padding:8px 11px;border-radius:12px;background:linear-gradient(130deg,#e1f8ff,#dbe9ff);border:1px solid #b5d9ff;color:#1b4e92} .companion-totals>button+div{background:linear-gradient(130deg,#ffedf5,#f0e0ff);border-color:#e8bffa;color:#783486} .companion-totals strong{display:block;font-size:20px;line-height:1.2} .companion-totals small,.companion-milestone small{font-size:10px} .companion-milestone{font-size:12px;line-height:1.6} .companion-marathon{--reward-start:#843cff;--reward-end:var(--brand-cyan,#009ffc);margin-top:10px;padding:10px;border:1px solid #c9ddfa;border-radius:13px;background:linear-gradient(120deg,#f2edff,#edf5ff 60%,#e6fbff);color:var(--brand-navy,#001c60);box-shadow:inset 0 1px 0 #fff,0 2px 8px #0069fb0d} .companion-marathon-heading{display:flex;align-items:center;gap:7px;margin-bottom:7px} .companion-marathon-icon{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:8px;background:linear-gradient(135deg,#e1d3ff,#c6efff);font-size:16px} .companion-marathon-heading>div{min-width:0;flex:1} .companion-marathon-heading strong{display:block;font-size:12px;line-height:1.4} .companion-marathon-eyebrow{display:none} .companion-marathon-status{padding:2px 7px;border-radius:20px;background:linear-gradient(100deg,#7439df,var(--brand-blue,#0069fb));color:#fff;font-size:9px;font-weight:750;white-space:nowrap} .companion-marathon .companion-marathon-caption{display:block;color:#506388;font-size:10px;line-height:1.5} .companion-marathon-clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:6px} .companion-marathon-clock>span{min-width:0;padding:5px 2px 4px;text-align:center;border:1px solid #d8c7fb;border-radius:8px;background:#e9ddff;color:#59349c} .companion-marathon-clock>span:nth-child(2){background:#dde6ff;border-color:#c1cff6;color:#2b4797} .companion-marathon-clock>span:nth-child(3){background:#d9edff;border-color:#b5d8fa;color:#145a98} .companion-marathon-clock>span:nth-child(4){background:#d3f5fb;border-color:#a9e3f1;color:#146478} .companion-marathon-clock b{display:block;font-size:18px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.5px} .companion-marathon-clock small{display:block;margin-top:2px;color:inherit;font-size:9px} .companion-marathon-reading strong{display:block;font-size:12px;margin-bottom:3px} .companion-marathon-reading small{font-variant-numeric:tabular-nums;color:#506388} .companion-marathon progress{height:7px;margin:6px 0} .companion-marathon.is-complete{--reward-start:#843cff;--reward-end:var(--brand-cyan,#009ffc);border-color:#a9d9f5;background:linear-gradient(135deg,#eee6ff,#ddf7ff)} .companion-marathon.is-complete .companion-marathon-status{background:var(--brand-gradient,linear-gradient(90deg,#004ffa,#009ffc));color:#fff} .companion-marathon progress,.companion-marathon progress::-webkit-progress-bar{background:#dbe9f8} .companion-reward-symbol{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--reward-start),var(--reward-end));color:#fff;width:23px;height:23px;border-radius:8px;margin-left:4px;font-size:16px;text-shadow:0 1px 2px #0003} .companion-milestone progress{appearance:none;border:0;border-radius:8px;overflow:hidden;display:block;width:100%;height:9px;margin:8px 0;background:#e8e0f6;accent-color:var(--reward-end)} .companion-milestone progress::-webkit-progress-bar{background:#e8e0f6;border-radius:8px} .companion-milestone progress::-webkit-progress-value{background:linear-gradient(90deg,var(--reward-start),var(--reward-end));border-radius:8px} .companion-milestone progress::-moz-progress-bar{background:linear-gradient(90deg,var(--reward-start),var(--reward-end));border-radius:8px} .companion-chat-panel{display:flex;flex-direction:column;height:min(510px,calc(100dvh - 96px));max-height:calc(var(--companion-panel-height,100dvh) - 42px);min-height:0} .companion-chat-panel>.companion-menu-heading,.companion-chat-panel>form,.companion-chat-panel>footer{flex-shrink:0} .companion-chat-panel>.companion-menu-heading{border-bottom:1px solid var(--line,#d8d8c8);padding-bottom:10px} .companion-chat-panel>.companion-menu-heading h2{font-size:19px;margin:0} .companion-chat-log{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px;padding:16px 3px;margin:0} .companion-menu .companion-chat-message{flex-shrink:0;margin:0;padding:11px 13px;background:var(--surface-alt,#eeeafa);border-radius:13px 13px 13px 3px;font-size:12px;line-height:1.65;overflow-wrap:anywhere;max-width:94%;align-self:flex-start} .companion-menu .companion-chat-message p{margin:4px 0 0;font-size:12px;line-height:1.65;white-space:pre-wrap} .companion-chat-speaker{display:block;font-size:10px;font-weight:750;letter-spacing:.3px;opacity:.8} .companion-menu .companion-chat-message.is-user{align-self:flex-end;background:#6451d9;color:#fff;border-radius:13px 13px 3px 13px;max-width:85%} .companion-chat-choices{display:grid;gap:7px;margin:12px 0 0} .companion-chat-choices button,.companion-support-link{padding:9px 10px;text-align:left;border:1px solid #bcb0f1;border-radius:9px;font-size:12px;line-height:1.5;min-height:40px;background:var(--surface,#fffdf7);color:var(--ink,#443075)} .companion-chat-panel>form{border-top:1px solid var(--line,#d8d8c8);padding-top:12px} .companion-chat-input-label{font-size:11px} .companion-chat-panel>footer{margin-top:8px;padding-top:0;border:0} .companion-chat-compose{display:flex;gap:8px;margin-top:6px} .companion-chat-compose input{flex:1;width:0} .companion-chat-compose button{background:#6451d9;color:white;border-radius:9px;padding:0 13px} .companion-menu .companion-support-note{font-size:11px} .companion-current-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:40dvh;overflow:auto;padding:5px} .companion-current-books button{min-width:0;text-align:left} .companion-current-books .cover-art{width:100%;height:116px;overflow:hidden} .companion-current-books strong,.companion-current-books small{display:block;font-size:11px;overflow-wrap:anywhere;margin-top:6px} .companion-current-books small{font-size:10px;opacity:.75} .companion-session-note{padding:10px;border:1px solid var(--line,#d8d8c8);border-radius:10px} .companion-session-note button{text-decoration:underline} .cartoon-companion{display:none;width:100%;height:100%;overflow:visible} .room .cartoon-companion,.cartoon-thumb .cartoon-companion{display:block} .companion-thumb,.cartoon-thumb{display:block;width:61px;height:61px;flex-shrink:0;margin-inline:auto} .room .room-pet .pet-sleep{top:0;left:5%;z-index:1;pointer-events:none} /* Direct scene navigation: hidden scrollbars, native touch momentum, mouse grab. */ .room .room-pet{touch-action:none;user-select:none;cursor:grab} .room .room-pet[data-activity="dragging"]{cursor:grabbing} .room-pet[data-activity="dragging"] .pet-bright-eyes{display:block} .room-pet[data-activity="dragging"] .pet-sleepy-eyes{display:none} .room-pet[data-activity="greeting"] .cartoon-companion,.room-pet[data-activity="greeting"] .companion-sprite{animation:companion-wake .65s ease-out both} @keyframes companion-wake{0%{transform:scaleY(.86)}55%{transform:translateY(-5px) scaleY(1.04)}100%{transform:scaleY(1)}} .room .room-pet{transition:left var(--pet-travel,0ms) linear,bottom var(--pet-travel,0ms) ease-in-out;z-index:12;animation:none;--pet-facing:1} .room-pet .cartoon-companion,.room-pet .companion-sprite{transform-origin:50% 92%;transition:transform .65s ease} .room-pet[data-activity="resting"] .cartoon-companion,.room-pet[data-activity="resting"] .companion-sprite{transform:scaleY(.86);animation:companion-breathe 4s ease-in-out infinite} .room-pet[data-activity="walking"] .cartoon-companion,.room-pet[data-activity="walking"] .companion-sprite{animation:companion-step .48s ease-in-out infinite} .room-pet .pet-sleep{display:none} .room-pet[data-activity="resting"] .pet-sleep{display:block} .companion-legs{display:none} .pet-bright-eyes{display:none} .room-pet[data-activity="walking"] .pet-bright-eyes,.room-pet[data-activity="greeting"] .pet-bright-eyes{display:block} .room-pet[data-activity="walking"] .pet-sleepy-eyes,.room-pet[data-activity="greeting"] .pet-sleepy-eyes{display:none} .room-pet[data-activity="walking"] .companion-legs{display:block} .pet-leg-one{animation:companion-paws .48s ease-in-out infinite alternate;transform-origin:50% 75%} .pet-leg-two{animation:companion-paws .48s ease-in-out infinite alternate-reverse;transform-origin:50% 75%} .companion-speech{position:absolute;bottom:105%;left:50%;transform:translateX(-50%);width:max-content;max-width:190px;padding:10px 12px;border:1px solid #cbb991;border-radius:12px;background:#fff9ea;color:#5e513a;font:12px/1.5 Georgia,serif;box-shadow:0 4px 14px #30251a22;pointer-events:none;white-space:normal} .room-pet[data-spot="chair"] .companion-speech{left:auto;right:0;transform:none} .companion-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid #dddece;background:#f7f4e9;color:#778068;font-size:10px} .companion-controls button{border:1px solid #dadcc9;border-radius:20px;padding:7px 10px;color:#637253;background:#fffdf6;font-size:10px} .companion-controls button[aria-pressed="true"]{background:#e5ecd9;border-color:#a5b792} .companion-controls button:disabled{opacity:.4;cursor:default} .companion-controls button:focus-visible,.room-pet:focus-visible{outline:2px solid #738958;outline-offset:3px} .companion-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} @keyframes companion-step{0%,100%{transform:scaleX(var(--pet-facing)) translateY(0) rotate(-2deg)}50%{transform:scaleX(var(--pet-facing)) translateY(-4px) rotate(2deg)}} @keyframes companion-paws{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}} @keyframes companion-breathe{0%,100%{transform:scaleY(.86)}50%{transform:scaleY(.89)}} @media(prefers-reduced-motion:reduce){.room .room-pet{transition:none}.room-pet .cartoon-companion,.room-pet .companion-sprite,.room-pet .pet-sleep,.pet-leg-one,.pet-leg-two{animation:none!important;transition:none}} .room-viewport{scrollbar-width:none;scroll-behavior:auto;touch-action:pan-x pan-y pinch-zoom} /* Keep animated scene layers still while the browser scales their surfaces. */ .is-room-pinching *,.is-room-pinching *::before,.is-room-pinching *::after{animation-play-state:paused!important} /* Travel uses articulated animals and photographic pose frames, never the nap image. */ .companion-travel-art{display:none;position:absolute;inset:0;transform:scaleX(var(--pet-facing,1));transform-origin:50% 85%;pointer-events:none} .room-pet[data-activity="walking"] .companion-travel-art{display:block} .room .room-pet[data-activity="walking"]>.cartoon-companion,.room .room-pet[data-activity="walking"]>.companion-sprite{display:none!important} .animated-companion{display:none;width:100%;height:100%;overflow:visible} .room .animated-companion{display:block;animation:animal-walk-body var(--pet-gait) linear infinite} .animal-leg{transform-box:view-box;transform-origin:var(--joint-x) 57px} .stride-a{animation:animal-stride var(--pet-gait) ease-in-out infinite} .stride-b{animation:animal-stride var(--pet-gait) ease-in-out infinite;animation-delay:calc(var(--pet-gait)*-.5)} .animal-tail{transform-box:view-box;transform-origin:var(--tail-x) var(--tail-y);animation:animal-tail-swish calc(var(--pet-gait)*2) ease-in-out infinite} .room-pet[data-companion="dog"] .animal-tail{animation-duration:var(--pet-gait)} .animal-head{transform-box:view-box;transform-origin:35px 43px;animation:animal-head-nod var(--pet-gait) ease-in-out infinite} .animal-ear{transform-box:view-box;transform-origin:34px 29px;animation:animal-ear-flop var(--pet-gait) ease-in-out infinite} .animal-wing{transform-box:view-box;transform-origin:50px 49px;animation:animal-wingbeat var(--pet-gait) ease-in-out infinite} .wing-far{animation-delay:calc(var(--pet-gait)*-.12)} .room .room-pet[data-locomotion="fly"] .animated-companion{animation:animal-flight-body calc(var(--pet-gait)*2) ease-in-out infinite} .room .room-pet[data-locomotion="hop"] .animated-companion{animation:animal-rabbit-hop var(--pet-gait) ease-in-out infinite} .rabbit-haunch{transform-box:view-box;transform-origin:58px 55px;animation:animal-rabbit-kick var(--pet-gait) ease-in-out infinite} .rabbit-front-paws{transform-box:view-box;transform-origin:36px 57px;animation:animal-rabbit-reach var(--pet-gait) ease-in-out infinite} .rabbit-ears{transform-box:view-box;transform-origin:34px 32px;animation:animal-ear-flop var(--pet-gait) ease-in-out infinite} .photo-motion{display:none;position:absolute;inset:0;background:url('assets/companion-locomotion.png') 0 0/400% 600% no-repeat;animation:animal-photo-frames var(--pet-gait) steps(1,end) infinite} .room .photo-motion{display:none} .photo-motion[data-animal="cat"]{background-position-y:0%} .photo-motion[data-animal="dog"]{background-position-y:20%} .photo-motion[data-animal="fox"]{background-position-y:40%} .photo-motion[data-animal="dragon"]{background-position-y:60%} .photo-motion[data-animal="owl"]{background-position-y:80%} .photo-motion[data-animal="rabbit"]{background-position-y:100%} @keyframes animal-photo-frames{0%,100%{background-position-x:0%}25%{background-position-x:33.333333%}50%{background-position-x:66.666667%}75%{background-position-x:100%}} @keyframes animal-stride{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}} @keyframes animal-tail-swish{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(14deg)}} @keyframes animal-head-nod{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}} @keyframes animal-ear-flop{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(12deg)}} @keyframes animal-wingbeat{0%,100%{transform:rotate(-18deg) scaleY(1)}50%{transform:rotate(65deg) scaleY(.85)}} @keyframes animal-walk-body{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-2px)}} @keyframes animal-flight-body{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}} @keyframes animal-rabbit-hop{0%,100%{transform:translateY(0) scaleY(.9)}30%{transform:translateY(-5px) rotate(4deg)}55%{transform:translateY(-15px) scaleY(1) rotate(-5deg)}80%{transform:translateY(-3px) rotate(-3deg)}} @keyframes animal-rabbit-kick{0%,100%{transform:rotate(0)}35%{transform:rotate(-28deg)}65%{transform:rotate(15deg)}} @keyframes animal-rabbit-reach{0%,100%{transform:rotate(10deg)}50%{transform:rotate(35deg)}80%{transform:rotate(-15deg)}} @media(prefers-reduced-motion:reduce){.companion-travel-art *{animation:none!important}} .room-viewport::-webkit-scrollbar{display:none;width:0;height:0} .room-viewport.can-pan{cursor:grab} .room-viewport.is-panning,.room-viewport.is-panning *{cursor:grabbing!important;user-select:none} .room-viewport button{cursor:pointer} .room-viewport .shelf-book[draggable="true"]{cursor:grab} .room-filters{position:absolute;pointer-events:none;overflow:hidden} /* A taller arched opening reveals more of the outdoor scene. */ .room[data-style="realistic"] .real-curtains{transform:scale(1.1,1.38);transform-origin:50% 0;clip-path:polygon(37% 0,63% 0,63% 31.3%,37% 31.3%)} .room[data-style="realistic"] .room-window{top:3.2%;height:38%;left:calc(50% - var(--photo-width)*.0755);width:calc(var(--photo-width)*.151)} .room[data-style="realistic"] .window-cross:after{top:36%;height:2px;box-shadow:0 1px 0 #af9e73} .room[data-style="realistic"] .window-cross:before{content:'';position:absolute;left:0;right:0;top:69%;height:2px;background:#453e30;box-shadow:0 1px 0 #af9e73} .room[data-style="realistic"] .window-cross{border-radius:50% 50% 0 0;overflow:hidden} .room[data-style="realistic"] .real-hearth{transform:translateY(8%)} .room[data-style="realistic"] .center-frame,.phone-preview .room[data-style="realistic"] .center-frame{top:43%!important;height:11%;min-height:11%;max-height:11%!important;padding:.65%} .room[data-style="realistic"] .center-frame h3,.phone-preview .room[data-style="realistic"] .center-frame h3{font-size:clamp(8px,.92cqw,14px);margin:1% 0 2%} .room[data-style="realistic"] .center-frame ol,.phone-preview .room[data-style="realistic"] .center-frame ol{font-size:clamp(4px,.48cqw,7px)} .room[data-style="realistic"] .center-frame li{margin:1% 0} .room[data-style="realistic"] .center-frame button{margin-top:2%;font-size:clamp(4px,.42cqw,6px)} .room[data-style="illustrated"] .room-window{top:5%;height:63%} /* Local light flicker preserves the photographed flames and logs. */ .real-fire-motion{display:none;pointer-events:none} .room[data-style="realistic"] .real-fire-motion{display:block;position:absolute;z-index:6;left:calc(50% - var(--photo-width)*.062);top:64.7%;width:calc(var(--photo-width)*.124);height:14.4%;background:url('assets/realistic-library.png') 50% 66.24%/806.45% 694.44% no-repeat;filter:brightness(1);mask-image:radial-gradient(ellipse at 50% 53%,#000 0 34%,#000c 53%,transparent 78%);animation:photo-hearth-flicker 2.9s linear infinite;transform-origin:50% 85%} .room[data-style="realistic"] .real-fire-glow{top:69%;animation:hearth-breathe 2.3s infinite alternate,living-firelight .85s linear infinite} @keyframes living-firelight{0%,100%{opacity:.88}17%{opacity:1}34%{opacity:.76}51%{opacity:.95}69%{opacity:.82}83%{opacity:.98}} @keyframes photo-hearth-flicker{0%,100%{filter:brightness(1);opacity:.85}9%{filter:brightness(1.08);opacity:.95}14%{filter:brightness(1.02);opacity:.88}27%{filter:brightness(1.12);opacity:1}33%{filter:brightness(1.04);opacity:.9}48%{filter:brightness(1.07);opacity:.94}56%{filter:brightness(1);opacity:.85}63%{filter:brightness(1.1);opacity:.98}76%{filter:brightness(1.03);opacity:.89}87%{filter:brightness(1.09);opacity:.96}94%{filter:brightness(1.02);opacity:.87}} @media(prefers-reduced-motion:reduce){.room[data-style="realistic"] .real-fire-motion{filter:brightness(1.1);animation:none}.room[data-style="realistic"] .real-fire-glow{animation:none}} /* Density and in-flow piles allow mixed book displays anywhere on a shelf. */ #room .arranged-shelf{--book-width:18%;--spine-width:7%;gap:2%;padding-left:3%;padding-right:3%} #room .arranged-shelf[data-density="6"]{--book-width:11.3%;--spine-width:5.5%;gap:1.5%} #room .arranged-shelf[data-density="8"]{--book-width:8.3%;--spine-width:4.5%;gap:1.25%} #room .arranged-shelf>.shelf-book{width:var(--book-width);max-width:none;flex:0 0 var(--book-width);height:83%} #room .arranged-shelf>.shelf-book.spine{width:calc(var(--spine-width)*var(--thickness,1));flex-basis:calc(var(--spine-width)*var(--thickness,1));height:86%} #room .arranged-shelf .book-pile{width:calc(var(--book-width)*1.6);flex:0 0 calc(var(--book-width)*1.6);height:74%;display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:3%;align-self:flex-end} #room .arranged-shelf .book-pile>.shelf-book.stacked{position:relative;inset:auto;width:100%;max-width:100%;height:calc(18%*var(--thickness,1));flex:0 0 calc(18%*var(--thickness,1));transform:none} #room .arranged-shelf .book-pile>.shelf-book.stacked:nth-child(2){width:96%;align-self:center} #room .arranged-shelf .book-pile>.shelf-book.stacked:nth-child(3){width:92%;align-self:center} #room .arranged-shelf .stacked .cover-art img{display:none} #room .arranged-shelf .stacked .cover-art:before,#room .arranged-shelf .stacked .cover-art:after{display:none} #room .arranged-shelf .cover-title{overflow:hidden;overflow-wrap:anywhere} #room .arranged-shelf .stacked .cover-title{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:clamp(5px,.6cqw,9px)} #room .arranged-shelf .shelf-decoration{width:18%;max-width:18%;flex:0 0 18%;min-height:24px} #room .arranged-shelf .shelf-decoration[data-decor="none"]{opacity:.35} #room .arranged-shelf .shelf-book:focus-visible{outline:2px solid #ead6a8;outline-offset:-2px} .placement-hint{font-size:11px;line-height:1.6;color:#777d70} #room .arranged-shelf .book-pile{height:83%} #room .arranged-shelf .book-pile>.shelf-book.stacked{height:calc((100% - (var(--pile-count) - 1)*3%)/max(3,var(--pile-count)));flex-basis:calc((100% - (var(--pile-count) - 1)*3%)/max(3,var(--pile-count)))} .edition-search{padding:16px;background:#f2f3e9;border:1px solid #dce0d1;border-radius:8px;margin-bottom:20px}.edition-search>label{font-family:var(--serif);font-size:20px}.edition-search-bar{display:flex;gap:8px;margin-top:10px}.edition-search-bar input{min-width:0;flex:1;padding:10px;border:1px solid #ccd2bf;border-radius:5px;background:#fffdf8}.edition-search p,.edition-search small{font-size:12px;line-height:1.6}.edition-search a{text-decoration:underline}#editionResults{max-height:330px;overflow:auto}.edition-result{display:flex;gap:14px;text-align:left;width:100%;padding:12px;border:1px solid #d9dece;border-radius:6px;background:#fffdf8;margin-bottom:8px}.edition-result:hover,.edition-result[aria-pressed="true"]{border-color:#627e51;background:#e7efdf}.edition-thumb{width:60px;height:90px;flex-shrink:0;background:#e8e4d9;display:grid;place-items:center;font-size:10px}.edition-thumb img{width:100%;height:100%;object-fit:contain}.edition-result>span{display:flex;flex-direction:column;gap:4px;min-width:0}.edition-result strong{font-family:var(--serif);font-size:17px}.edition-result span,.edition-result small{overflow-wrap:anywhere}.edition-result b{font-size:11px;color:#526b43}.spine-art{position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:8% 10%;color:#f6ecd5;background:linear-gradient(90deg,#0006,transparent 18%,#ffffff20 42%,transparent 70%,#0007),var(--cover);border-radius:2px;box-shadow:inset 1px 0 1px #fff4,inset -2px 0 2px #0006}.spine-art strong,.spine-art span{writing-mode:vertical-rl;font-family:var(--serif);font-size:clamp(5px,.65cqw,11px);max-height:95%;overflow:hidden}.spine-art span{font-size:clamp(4px,.38cqw,7px)}.spine-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.stacked .spine-art{padding:2% 5%}.stacked .spine-art strong,.stacked .spine-art span{writing-mode:horizontal-tb;white-space:nowrap}.stacked .spine-art img{width:100%;height:auto;max-height:none;top:50%;left:50%;aspect-ratio:1/7;transform:translate(-50%,-50%) rotate(-90deg);width:14%;height:700%}#room .shelf-book:not(.spine):not(.stacked){border-right:calc(2px*var(--thickness,1)) solid #e4dac4;box-shadow:3px 3px 5px #0007}#room .shelf-book .cover-art img{object-fit:fill}#room .shelf-book .cover-art{filter:none}@media(max-width:520px){.edition-search-bar{flex-direction:column}} .spine-art{color:var(--spine-ink,#f6ecd5);background-image:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 3px),linear-gradient(90deg,#0006,transparent 18%,#ffffff20 42%,transparent 70%,#0007)} .spine-art:after{content:'';position:absolute;inset:7% 0;pointer-events:none;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.25} .spine-art:has(img):after{display:none} /* Full-length fabric is independent of the photographic window crop. */ .room{--curtain:#d6c4a4;--light:#ffe3a0;--stone:#a79980;--stone-light:#c0b399;--stone-dark:#726853} .room[data-curtain-color="sage"]{--curtain:#78846b}.room[data-curtain-color="rose"]{--curtain:#b58a8b}.room[data-curtain-color="navy"]{--curtain:#384960}.room[data-curtain-color="plum"]{--curtain:#71536c}.room[data-curtain-color="gold"]{--curtain:#b99250} .room .window-curtain{top:0;height:125%;width:22%;border-radius:3% 3% 1% 1%;transform:none;background:linear-gradient(90deg,#0005,transparent 22%,#fff3 43%,transparent 60%,#0004),repeating-linear-gradient(90deg,#0002 0 8%,#fff2 14%,transparent 24%),var(--curtain);box-shadow:2px 4px 5px #211b3340;clip-path:polygon(0 0,100% 0,78% 26%,70% 47%,98% 100%,0 100%);z-index:4} .room .curtain-left{left:-16%}.room .curtain-right{right:-16%;transform:scaleX(-1)} .room[data-style="realistic"] .real-curtains{display:none!important} .room[data-style="realistic"] .window-curtain{display:block;height:191%;width:40%;top:0} .room[data-style="realistic"] .curtain-left{left:-42%}.room[data-style="realistic"] .curtain-right{right:-42%} /* One continuous wall texture eliminates the baked-in side wallpaper seam. */ .room[data-style="realistic"] .real-shell{background-size:115% 100%} .room[data-style="realistic"] .wallpaper-pattern{inset:3% 0 27.5%;z-index:0;pointer-events:none;background-position:center top} .room[data-style="realistic"][data-wall="botanical"] .wallpaper-pattern,.room[data-style="realistic"][data-wall="stars"] .wallpaper-pattern{opacity:.3} .room[data-light-color="purple"]{--light:#c493ff}.room[data-light-color="blue"]{--light:#86caff}.room[data-light-color="orange"]{--light:#ffab65}.room[data-light-color="pink"]{--light:#ffadd4} .room .fairy-lights i{width:clamp(4px,.7cqw,10px);height:clamp(6px,1cqw,14px);background:var(--light);box-shadow:0 0 9px 3px color-mix(in srgb,var(--light) 55%,transparent);color:var(--light);flex-shrink:0} .room[data-light-color="rainbow"] .fairy-lights i{--light:var(--bulb-color)} .room[data-light-shape="stars"] .fairy-lights i,.room[data-light-shape="hearts"] .fairy-lights i,.room[data-light-shape="moons"] .fairy-lights i{background:none;box-shadow:none;width:1em;height:1em;font-size:clamp(9px,1.7cqw,23px);line-height:1;filter:drop-shadow(0 0 4px var(--light));border-radius:0} /* Material choices retain the same hearth opening in both renderers. */ .room[data-fireplace-style="marble"]{--stone:#d4d0c8;--stone-light:#f0ece3;--stone-dark:#928f89} .room[data-fireplace-style="brick"]{--stone:#884b3d;--stone-light:#b9775a;--stone-dark:#60382e} .room[data-fireplace-style="slate"]{--stone:#41464b;--stone-light:#72777c;--stone-dark:#272b30} .room .mantel,.room .hearth{background:linear-gradient(var(--stone-light),var(--stone),var(--stone-dark))} .room .fireplace-body{background:repeating-linear-gradient(0deg,transparent 0 18%,#ffffff26 18% 20%),linear-gradient(90deg,var(--stone),var(--stone-light) 28% 75%,var(--stone-dark))} .room[data-fireplace-style="brick"] .fireplace-body{background:repeating-linear-gradient(0deg,transparent 0 17%,#bba88c 18% 20%),repeating-linear-gradient(90deg,transparent 0 23%,#bba88c 24% 26%),var(--stone)} .room[data-fireplace-style="marble"] .fireplace-body{background:repeating-linear-gradient(133deg,transparent 0 23%,#88858b33 24%,transparent 25% 48%),linear-gradient(90deg,var(--stone),var(--stone-light),var(--stone))} .room .fireplace-opening{border-color:var(--stone-dark)} /* Narrow tongues flicker upward from embers without distorting the photograph. */ .room[data-style="realistic"] .real-fire-motion{top:64.7%;height:14.4%;background:url('assets/realistic-library.png') 50% 66.24%/806.45% 694.44% no-repeat;filter:brightness(1);mask-image:radial-gradient(ellipse at 50% 53%,#000 0 34%,#000c 53%,transparent 78%);animation:photo-hearth-flicker 2.9s linear infinite;overflow:hidden;mix-blend-mode:normal} .real-fire-motion> *{display:none} .fire-tongue{position:absolute;bottom:9%;left:calc(5% + var(--tongue)*10%);width:13%;height:var(--height);background:linear-gradient(0deg,#ff681c,#ffc34c 48%,#ffeab8 85%,transparent);border-radius:80% 20% 65% 35%;filter:blur(.6px) drop-shadow(0 0 3px #ff8b22);transform-origin:50% 100%;animation:fire-rise var(--rise) ease-in-out var(--delay) infinite alternate} .fire-embers{position:absolute;bottom:0;left:10%;width:80%;height:16%;background:radial-gradient(ellipse,#ffd278,#f4551666 48%,transparent 75%)} @keyframes fire-rise{0%{transform:scale(.85,.65) skewX(-8deg);opacity:.65}35%{transform:scale(1,1.06) skewX(5deg);opacity:1}70%{transform:scale(.75,.85) skewX(-3deg);opacity:.8}100%{transform:scale(.9,1.2) skewX(7deg);opacity:.95}} /* Short, staggered streaks traverse the glass at constant speed. */ .room .window-rain i{top:-12%;left:var(--rain-left);height:var(--rain-length);width:1px;opacity:var(--rain-opacity);background:linear-gradient(transparent,#dfeaf2);animation:natural-rain var(--rain-speed) linear var(--rain-delay) infinite;transform:none} @keyframes natural-rain{from{top:-12%;transform:translateX(0) rotate(4deg)}to{top:112%;transform:translateX(-5px) rotate(4deg)}} @media(prefers-reduced-motion:reduce){.room .window-rain i,.fire-tongue{animation:none}.room .window-rain i{top:calc(var(--rain-index)*2.8%)}.fire-tongue{transform:scaleY(.8)}} /* The bulbs follow the cord's curve; no second empty cord sits below them. */ .room .fairy-lights{border:0;height:15%} .room .fairy-lights:before{content:'';position:absolute;inset:0 0 auto;height:clamp(12px,4.4cqw,64px);border-bottom:1px solid #665a3d88;border-radius:0 0 50% 50%;z-index:-1} .room .fairy-lights i{font-style:normal;font-family:Georgia,serif;text-align:center} /* Every realistic finish keeps the photographic masonry and its depth. */ .room[data-style="realistic"] .fireplace{display:none!important} .room[data-style="realistic"][data-fireplace-style="marble"] .real-hearth{filter:grayscale(.85) brightness(1.38) contrast(.88)} .room[data-style="realistic"][data-fireplace-style="brick"] .real-hearth{filter:sepia(.6) saturate(1.7) hue-rotate(335deg) brightness(.85)} .room[data-style="realistic"][data-fireplace-style="slate"] .real-hearth{filter:grayscale(1) brightness(.56) contrast(1.2)} .room[data-style="realistic"][data-theme="academy"][data-fireplace-style="marble"] .real-hearth{filter:grayscale(.85) brightness(1.17) contrast(.88)} .room[data-style="realistic"][data-theme="academy"][data-fireplace-style="brick"] .real-hearth{filter:sepia(.6) saturate(1.7) hue-rotate(335deg) brightness(.73)} .room[data-style="realistic"][data-theme="academy"][data-fireplace-style="slate"] .real-hearth{filter:grayscale(1) brightness(.48) contrast(1.2)} /* Complete-room palettes: shared materials keep both renderers cohesive. */ .room{--theme-wall:#c8c7ad;--theme-rug:#778565;--theme-chair:#78846b} .room[data-theme]{background:radial-gradient(ellipse at 50% 30%,#ffffff30,transparent 65%),var(--theme-wall)} .room[data-theme] .real-shell{filter:var(--theme-shellFilter)} .room[data-theme][data-style="realistic"] .real-chair{filter:var(--theme-chairFilter)} .room[data-theme] .real-plant{filter:saturate(.65) brightness(.95)} .room[data-theme] .room-floor{background:repeating-linear-gradient(105deg,transparent 0 6%,#30251d26 6.3% 6.6%),repeating-linear-gradient(0deg,var(--wood-light) 0 22%,var(--wood) 23% 47%,var(--wood-dark) 48% 50%)} .room[data-theme][data-floor="stone"] .room-floor{background:repeating-linear-gradient(0deg,transparent 0 24%,#fff2 25% 26%),repeating-linear-gradient(95deg,#0001 0 19%,#fff2 20% 21%),#929994} .room[data-theme][data-floor="checker"] .room-floor{background:conic-gradient(#777a75 25%,#d4d0c5 0 50%,#777a75 0 75%,#d4d0c5 0) 0 0/9% 55%} .room[data-theme][data-style="realistic"] .room-floor{display:block;bottom:0;height:27.5%;border:0;z-index:0;opacity:.7} .room[data-theme] .room-rug{background:repeating-radial-gradient(ellipse,var(--theme-rug) 0 18%,#ded1b0 19% 21%,var(--theme-rug) 22% 28%);border:3px solid #d4c6a0;border-radius:50%;box-shadow:0 5px 9px #221c2533;transform:rotate(-2deg);opacity:.9} .room[data-theme][data-style="realistic"] .room-rug{display:block;z-index:1;bottom:2%;left:25%;width:50%;height:13%;opacity:.85} .room[data-theme] .chair-back,.room[data-theme] .chair-seat,.room[data-theme] .chair-arm{background:linear-gradient(90deg,#0003,transparent 48%,#fff2),var(--theme-chair);border-color:var(--theme-chair)} .room[data-theme] .chair-pillow{background:var(--curtain);border-color:#ffffff40;color:#f6eedc} .room[data-theme] .window-frame{border-color:var(--wood);box-shadow:inset 0 0 0 2px var(--trim)} .room[data-theme] .plant-pot{background:linear-gradient(90deg,#0003,#fff2,#0003),var(--theme-rug)} /* A quiet framed reading edit, with a separately scrollable list. */ .room[data-theme] .center-frame{background:#f4eee1;border:3px solid var(--wood);border-radius:3px;box-shadow:0 0 0 1px var(--trim),0 5px 12px #201c2433;transform:none;display:flex;flex-direction:column;max-height:29%!important;overflow:hidden;padding:1%;top:35%!important} .room[data-theme][data-style="realistic"] .center-frame{top:34%!important;max-height:25%!important;min-height:0} .room[data-theme] .center-frame h3{color:#353c35;line-height:1.2;margin:4% 0 5%;overflow-wrap:anywhere;flex-shrink:0} .room[data-theme] .center-frame>span{color:#6d715f;letter-spacing:1px;flex-shrink:0} .room[data-theme] .center-frame ol{overflow:auto;min-height:0;scrollbar-width:thin;color:#51574a;line-height:1.4;margin:0;padding-left:16%;flex:1} .room[data-theme] .center-frame li span{color:#747666} .room[data-theme] .center-frame button{color:#445f42;border-top:1px solid #d8d5c8;width:100%;padding:5% 0 1%;margin-top:5%;flex-shrink:0} .room[data-theme] .frame-flourish{display:none} /* Themes lead the studio; personalization stays small and approachable. */ .design-drawer{width:min(480px,100vw);background:#ffffff} .drawer-intro{font-size:13px;line-height:1.7;color:#70776c} .design-section h3{font-size:13px;letter-spacing:0;color:#3c493b} .design-section{border-bottom:1px solid #e2e4dc;padding-bottom:24px} .design-option{border-radius:10px;transition:border-color .18s,background .18s;min-height:44px} .option-grid.themes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .option-grid.themes .design-option{position:relative;overflow:hidden;padding:0 0 12px;display:flex;flex-direction:column;text-align:left;align-items:stretch;border:1px solid #d7dcd1;background:#fffefa;gap:0} .option-grid.themes .design-option.selected{border:2px solid #52694b;box-shadow:0 0 0 2px #52694b12} .option-grid.themes .option-label{padding:12px 12px 5px;font-size:13px;font-weight:600;color:#344433} .option-grid.themes small{padding:0 12px;line-height:1.5;font-size:11px;color:#687162;min-height:50px} .theme-selected{padding:10px 12px 0;font-size:10px;font-weight:600;color:#5d7154} .theme-preview{position:relative;display:block;aspect-ratio:1.75;background:linear-gradient(0deg,#756653 0 21%,transparent 21%),radial-gradient(ellipse at 50% 30%,#fff6,transparent 70%),var(--preview-wall);overflow:hidden} .preview-window{position:absolute;left:39%;top:12%;width:22%;height:50%;border:4px solid var(--preview-accent);border-radius:40% 40% 0 0;background:linear-gradient(#afc4cd,#d7d9b8 60%,#718873)} .preview-shelf{position:absolute;top:17%;width:27%;height:64%;border:5px solid var(--preview-accent);background:repeating-linear-gradient(0deg,transparent 0 25%,var(--preview-accent) 26% 31%),repeating-linear-gradient(90deg,#d4bd8e 0 9%,#627a70 10% 16%,#ae7e6f 17% 23%,#414c54 24% 31%);box-shadow:2px 3px 5px #0003} .preview-shelf.left{left:7%}.preview-shelf.right{right:7%} .preview-rug{position:absolute;bottom:4%;left:30%;width:40%;height:13%;border-radius:50%;background:var(--preview-rug);border:2px solid #d9c9a8} .theme-preview[data-preview="moonlit"] .preview-window{background:radial-gradient(circle at 70% 24%,#e8e4c8 0 9%,transparent 10%),linear-gradient(#283749,#66778b)} .theme-preview[data-preview="academy"] .preview-window{background:repeating-linear-gradient(100deg,transparent 0 10%,#fff3 11% 12%),linear-gradient(#73818b,#afbab6)} .theme-preview[data-preview="coastal"] .preview-window,.theme-preview[data-preview="gallery"] .preview-window{background:linear-gradient(#bdd7e0 0 55%,#78a7b4 56% 75%,#e2d6b4 76%)} @media(max-width:520px){.design-drawer{padding:22px 18px}.option-grid.themes small{min-height:64px}.drawer-header h2{font-size:26px}} @media(prefers-reduced-motion:reduce){.design-option{transition:none}} .room[data-theme][data-style="realistic"] .real-shell{background-color:var(--theme-wall);background-blend-mode:luminosity} .room[data-theme][data-style="realistic"] .room-rug{left:19%;width:62%;height:16%;bottom:-1%;border-radius:3%;transform:perspective(500px) rotateX(38deg);background:repeating-linear-gradient(0deg,#ffffff0d 0 1px,#0000000d 1px 2px),repeating-linear-gradient(90deg,transparent 0 12%,#ded1b055 12.2% 12.5%),var(--theme-rug);border:5px double #d4c6a0;outline:1px solid #544c4133;outline-offset:-10px;pointer-events:none} /* Living Library: keep the photographed floor and rug as one continuous surface. */ .room[data-theme][data-style="realistic"] .room-floor, .room[data-theme][data-style="realistic"] .room-rug{display:none} .room[data-theme][data-style="realistic"] .real-shell{background-size:100% 100%;filter:var(--theme-shellFilter);background-color:var(--theme-wall);background-blend-mode:luminosity} /* Crops share the wall treatment; feather the plant crop instead of showing a rectangle. */ .room[data-theme][data-style="realistic"] .real-plant{background-color:var(--theme-wall);background-blend-mode:luminosity;filter:var(--theme-shellFilter);mask-image:linear-gradient(90deg,#000 0 6.5%,transparent 10%);clip-path:polygon(0 28%,10% 28%,10% 80%,0 80%)} .room[data-theme][data-style="realistic"] .wallpaper-pattern{display:block;inset:3% 0 27.5%;z-index:2;opacity:.12;mask-image:linear-gradient(90deg,#000,transparent 12% 88%,#000);pointer-events:none} .room[data-theme][data-style="realistic"][data-wall="plain"] .wallpaper-pattern{display:none} /* The opening ends just above the mantel; the reading edit sits beneath the glass. */ .room[data-theme][data-style="realistic"] .room-window{top:3.2%;height:36.5%;left:calc(50% - var(--photo-width)*.0755);width:calc(var(--photo-width)*.151);z-index:4} .room[data-theme][data-style="realistic"] .window-curtain{height:140%;width:30%} .room[data-theme][data-style="realistic"] .curtain-left{left:-30%} .room[data-theme][data-style="realistic"] .curtain-right{right:-30%} .room[data-theme][data-style="realistic"] .center-frame, .phone-preview .room[data-theme][data-style="realistic"] .center-frame{top:40.5%!important;left:calc(50% - var(--photo-width)*.083);width:calc(var(--photo-width)*.166);height:11%;min-height:0;max-height:11%!important;z-index:6;opacity:1;pointer-events:auto} /* Scenery motion stays inside the glass and never shifts the window frame. */ .room[data-theme][data-style="realistic"] .window-sky{filter:none} .room[data-theme][data-style="realistic"] .window-sky:after{content:'';display:block;position:absolute;inset:0;background:radial-gradient(ellipse at 30% 24%,#ffffff35,transparent 55%);opacity:.35;animation:window-daylight 8s ease-in-out infinite alternate;pointer-events:none} .room[data-theme][data-style="realistic"] .room-window[data-view="night"] .window-sky:after{background:radial-gradient(circle at 72% 18%,#fff8,transparent 30%);animation-duration:5s} .room[data-theme][data-style="realistic"] .room-window[data-view="ocean"] .window-sky:after{background:repeating-linear-gradient(0deg,transparent 0 12%,#d7eeff33 13% 14%,transparent 15% 24%);inset:55% 0 0;animation:ocean-shimmer 5s ease-in-out infinite alternate} @keyframes window-daylight{from{opacity:.2;transform:translateX(-2%)}to{opacity:.65;transform:translateX(2%)}} @keyframes ocean-shimmer{from{opacity:.2;transform:translateY(-2%)}to{opacity:.55;transform:translateY(3%)}} @media(prefers-reduced-motion:reduce){.room[data-theme][data-style="realistic"] .window-sky:after{animation:none}} .room[data-theme][data-style="realistic"] .real-plant{clip-path:polygon(0 0,10% 0,10% 100%,0 100%)} .room[data-theme][data-style="realistic"] .real-chair{clip-path:polygon(78% 58%,87% 58%,94% 61%,94% 69%,96% 74%,96% 81%,100% 85%,100% 94%,97% 96%,94% 95%,94% 99%,92% 99%,91% 95%,85% 94%,84% 91%,74% 90%,73% 94%,71% 94%,71% 76%,70% 72%,71% 64%,77.5% 62%)} .room[data-theme][data-style="realistic"] .center-frame, .phone-preview .room[data-theme][data-style="realistic"] .center-frame{height:12%;max-height:12%!important;padding:.35% .65%} .room[data-theme][data-style="realistic"] .center-frame h3{margin:1% 0 2%} .room[data-theme][data-style="realistic"] .center-frame button{padding:2% 0 0;margin-top:2%} /* App home uses the available screen for the room, with controls outside the scene. */ .app-header,.app-room-navigation{display:none} .app-preview-controls{display:flex;justify-content:center;padding:10px;gap:8px} .app-preview-controls .view-switch button{min-height:36px} body:has(.app-preview) .phone-preview{margin-top:0} .app-preview .topbar,.app-preview .page-heading,.app-preview footer{display:none} .app-preview .app-statusbar{background:#ffffff;padding:10px 20px 4px} .app-preview .app-statusbar>span:nth-child(2){visibility:hidden} .app-preview .app-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:58px;padding:4px 18px 8px;background:#ffffff;border-bottom:1px solid #e3e4db;gap:12px} .app-preview .app-header h1{font-size:23px;line-height:1.2;margin:0;letter-spacing:-.6px} .app-preview .app-add-book{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:22px;background:#e9eddf;color:#445d3b;font-size:12px;font-weight:600;white-space:nowrap} .app-preview main{padding:16px;scrollbar-width:thin} .app-preview[data-active-tab="library"] main{padding:0;overflow:hidden;display:flex;flex-direction:column} .app-preview[data-active-tab="library"] #libraryView{display:flex;flex:1;flex-direction:column;min-height:0;width:100%} .app-preview #libraryView .room-toolbar, .app-preview #libraryView .studio-bar, .app-preview #libraryView .explore-bar, .app-preview #libraryView .room-bottom, .app-preview #libraryView .below-room{display:none} .app-preview .room-experience{position:relative;display:flex;flex:1;flex-direction:column;min-height:0;border:0;border-radius:0;box-shadow:none} .app-preview .room-viewport{flex:1;min-height:0;max-height:none!important;overflow-x:auto;overflow-y:hidden;container-type:size;scroll-behavior:smooth;touch-action:pan-x} .app-preview .room-viewport .room{height:100%;min-width:0!important;width:max(100%,194cqh);aspect-ratio:auto;border:0} .app-preview .room-viewport .room[data-style="realistic"]{width:max(100%,150cqh)} .app-preview .room-viewport .room[data-size="large"]{width:max(100%,200cqh)} .app-preview .room-viewport .room[data-size="grand"]{width:max(100%,265cqh)} .app-preview .app-room-navigation{display:flex;justify-content:center;position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:25;padding:4px;border:1px solid #ffffff50;gap:2px;border-radius:28px;background:#fcfaf3ed;backdrop-filter:blur(14px);box-shadow:0 3px 16px #1e251a33;white-space:nowrap} .app-preview .app-room-navigation button{min-height:44px;min-width:76px;padding:0 12px;border-radius:22px;font-size:11px;color:#59644f} .app-preview .app-room-navigation button[aria-pressed="true"]{background:#e0e8d7;color:#344c2d;font-weight:600} .app-preview .room-caption,.app-preview .room-fullscreen{display:none} .app-preview .mobile-nav{background:#ffffff;border-top:1px solid #dedfd4;box-shadow:0 -2px 10px #25332106} .app-preview .mobile-nav button{font-size:11px;gap:5px} .app-preview .mobile-nav button.active{font-weight:600} .app-preview .catalog-toolbar{margin-bottom:16px} .app-preview .search-field input,.app-preview .catalog-toolbar select{min-height:44px} @media(min-width:761px){.app-preview{height:min(880px,calc(100dvh - 86px));min-height:480px}} @media(max-width:760px){body:has(.app-preview){overflow:hidden}.app-preview{height:100dvh;min-height:0}.app-preview-controls{padding:16px 0 0}.app-preview-controls .view-switch{width:100%}.app-preview-controls .view-switch button{flex:1;justify-content:center;min-height:44px}} @media(prefers-reduced-motion:reduce){.app-preview .room-viewport{scroll-behavior:auto}} /* Phone previews own their design sheet; fixed bounds follow the visible frame. */ .design-in-preview.drawer-overlay, .design-in-preview.design-drawer{position:fixed;inset:auto;left:var(--design-left);top:var(--design-top);width:var(--design-width);height:var(--design-height);max-width:none;max-height:none;box-sizing:border-box} .design-in-preview.design-drawer{padding:20px;overscroll-behavior:contain;scrollbar-width:thin;box-shadow:none;overflow-x:hidden;overflow-y:auto} .design-in-preview .drawer-header{position:sticky;top:-20px;z-index:2;padding:12px 0;background:#ffffff;border-bottom:1px solid #e2e4dc} .design-in-preview .drawer-header h2{font-size:25px} .design-in-preview #closeDesign{min-width:44px;min-height:44px} .design-in-preview .drawer-intro{font-size:12px;margin:12px 0 20px} .design-in-preview .option-grid.themes small{min-height:64px} .design-in-preview .toggle-option,.design-in-preview .design-option{min-height:44px} .design-in-preview .drawer-footer{position:sticky;bottom:-20px;z-index:2;padding:12px 0 max(12px,env(safe-area-inset-bottom));margin-bottom:0;background:#ffffff;gap:8px} .design-in-preview .drawer-footer .button{min-height:44px} /* Hover labels share one restrained style across books, companions and controls. */ .nook-tooltip{position:fixed;z-index:100;max-width:260px;width:max-content;padding:10px 14px;border:1px solid #ffffff20;border-radius:10px;background:#273c31f5;color:#faf8f0;box-shadow:0 6px 22px #17291c26,0 2px 5px #17291c1a;font:500 12px/1.5 var(--sans);letter-spacing:.05px;pointer-events:none;overflow-wrap:anywhere;animation:tooltip-appear .14s ease-out} .tooltip-label,.tooltip-detail{display:block} .tooltip-detail{color:#d0dccd;font-size:11px;font-weight:400;margin-top:3px} .companion-speech{border:1px solid #ffffff20;border-radius:12px;background:#273c31f5;color:#faf8f0;box-shadow:0 6px 22px #17291c26;font:500 12px/1.55 var(--sans);padding:11px 14px;max-width:210px} @keyframes tooltip-appear{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.nook-tooltip{animation:none}} /* Design is a regular phone tab; navigation stays available while changes autosave. */ .design-save-note{font-size:11px;color:#687660;margin:18px 0 4px} .phone-preview .design-as-tab{position:static;inset:auto;width:100%;height:auto;max-height:none;padding:0;background:transparent;box-shadow:none;overflow:visible;border:0} .phone-preview .design-as-tab .drawer-header{position:static;padding:0;border:0;background:transparent} .phone-preview .design-as-tab #closeDesign{display:none} .phone-preview .design-as-tab .drawer-intro{margin-bottom:14px} .phone-preview .design-as-tab .design-save-note{position:static} .phone-preview[data-active-tab="design"] .page-heading{display:none} .phone-preview #designView{padding-bottom:12px} .phone-preview .design-as-tab .option-grid.themes small{min-height:64px} .phone-preview .design-as-tab .design-option,.phone-preview .design-as-tab .toggle-option{min-height:44px} .phone-preview .design-as-tab .drawer-header h2{font-size:25px} /* A white canvas makes the collection's covers and small color accents stand out. */ body,body:has(.phone-preview),body:has(.app-preview),.app-shell,.main-wrapper,.sidebar,.topbar,.phone-preview,.app-preview .app-statusbar,.app-preview .app-header,.app-preview .mobile-nav,.mobile-nav,.design-drawer{background:#ffffff} .sidebar{border-color:#edf0e9} .view-switch{background:#f5f7f2}.view-switch button.selected{background:#ffffff} /* A quiet collection grid with covers sized by column width, not screen height. */ .app-shell[data-active-tab="books"] .page-heading .eyebrow, .app-shell[data-active-tab="books"] #pageSubtitle{display:none} .app-shell[data-active-tab="books"] #pageTitle{font:650 32px/1.2 var(--sans);letter-spacing:-1px;margin:0} .app-shell[data-active-tab="books"] .page-heading{align-items:center;margin-bottom:26px} .app-shell[data-active-tab="books"] .page-heading>.button{margin-top:0} #booksView .catalog-toolbar{margin-bottom:16px;gap:0;flex-direction:row} #booksView .search-field{min-width:0} #booksView .search-field input{background:#f5f6f5;border:1px solid transparent;border-radius:10px;min-height:44px;padding-left:40px;font-size:13px;color:#344638} #booksView .search-field .icon{top:14px;left:14px;color:#879087} .catalog-filters{display:flex;gap:24px;border-bottom:1px solid #edf0ec;margin-bottom:16px;overflow-x:auto} .catalog-filters button{flex-shrink:0;min-height:44px;padding:8px 0 12px;border-bottom:2px solid transparent;color:#7b847b;font-size:13px;font-weight:500;white-space:nowrap} .catalog-filters button[aria-pressed="true"]{color:#526949;border-bottom-color:#526949} .catalog-filters button:focus-visible,.catalog-book:focus-visible{outline:2px solid #718768;outline-offset:4px} .catalog-summary{display:flex;margin-bottom:20px} #catalogCount{font-size:12px;color:#879087} #booksView .book-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:28px 24px;align-items:start} #booksView .catalog-book{display:flex;flex-direction:column;min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left;transform:none;color:#344638} #booksView .catalog-cover{position:relative;display:block;width:100%;height:auto;max-width:none;aspect-ratio:2/3;margin:0 0 12px;border-radius:4px;box-shadow:0 4px 9px #24312a18;overflow:hidden;isolation:isolate;transition:box-shadow .2s} #booksView .catalog-cover .cover-art{width:100%;height:100%;border-radius:inherit} #booksView .catalog-cover img{width:100%;height:100%;object-fit:cover;border-radius:inherit} #booksView .catalog-book:hover .catalog-cover{transform:none;box-shadow:0 6px 16px #24312a30} .catalog-title{font:600 13px/1.45 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;margin-bottom:3px;overflow-wrap:anywhere} .catalog-author{display:block;font-size:11px;line-height:1.5;color:#8b928b;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .catalog-meta{display:flex;flex-direction:column;gap:6px;margin-top:8px;font-size:10px;line-height:1.4;color:#939993} .catalog-meta[data-status="reading"]{color:#637d56} .catalog-progress{display:block;width:100%;height:3px;background:#edf0eb;border-radius:3px;overflow:hidden} .catalog-progress>span{display:block;height:100%;background:#859c76;border-radius:inherit} #booksView .catalog-favorite{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffffffed;color:#ac687e;font-size:12px;box-shadow:0 1px 4px #00000012} .phone-preview #booksView .book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px} .phone-preview .catalog-filters{gap:20px} .phone-preview #booksView .catalog-cover .cover-title{font-size:12px;letter-spacing:.2px} .phone-preview #booksView .catalog-cover .cover-kicker{font-size:4px;letter-spacing:.4px} .phone-preview #booksView .catalog-cover .cover-author{font-size:5px;letter-spacing:.3px} .phone-preview #booksView .catalog-cover .cover-symbol{font-size:26px} .phone-preview .catalog-title{font-size:11px} .phone-preview .catalog-author{font-size:10px} @media(max-width:760px){ #booksView .book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px} .catalog-filters{gap:20px} .catalog-title{font-size:11px} .catalog-author{font-size:10px} #booksView .catalog-cover .cover-title{font-size:12px;letter-spacing:.2px} #booksView .catalog-cover .cover-kicker{font-size:4px;letter-spacing:.4px} #booksView .catalog-cover .cover-author{font-size:5px;letter-spacing:.3px} #booksView .catalog-cover .cover-symbol{font-size:26px} .app-shell[data-active-tab="books"] #pageTitle{font-size:27px} } /* Keep three complete rows visible in the phone collection. */ .phone-preview #booksView{--compact-cover-height:clamp(48px,calc((100dvh - 530px)/3),112px)} .phone-preview #booksView .book-grid{gap:12px 12px} .phone-preview #booksView .catalog-cover{height:var(--compact-cover-height);width:calc(var(--compact-cover-height)*2/3);max-width:100%;margin:0 auto 7px} .phone-preview #booksView .catalog-title{display:block;min-height:0;line-height:1.4;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px} .phone-preview #booksView .catalog-author{font-size:9px;line-height:1.4} .phone-preview #booksView .catalog-meta{font-size:9px;line-height:1.3;margin-top:4px;gap:3px} .phone-preview #booksView .catalog-toolbar{margin-bottom:6px} .phone-preview #booksView .catalog-filters{margin-bottom:8px} .phone-preview #booksView .catalog-summary{margin-bottom:12px} .phone-preview[data-active-tab="books"] .page-heading{margin-bottom:18px} @media(max-width:760px){ #booksView{--compact-cover-height:clamp(48px,calc((100dvh - 530px)/3),112px)} #booksView .book-grid{gap:12px 12px} #booksView .catalog-cover{height:var(--compact-cover-height);width:calc(var(--compact-cover-height)*2/3);max-width:100%;margin:0 auto 7px} #booksView .catalog-title{display:block;min-height:0;line-height:1.4;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px} #booksView .catalog-author{font-size:9px;line-height:1.4} #booksView .catalog-meta{font-size:9px;line-height:1.3;margin-top:4px;gap:3px} #booksView .catalog-toolbar{margin-bottom:6px} #booksView .catalog-filters{margin-bottom:8px} #booksView .catalog-summary{margin-bottom:12px} .app-shell[data-active-tab="books"] .page-heading{margin-bottom:18px} } /* Rounded, wider book thumbnails follow the reference collection. */ #booksView .catalog-cover{border-radius:7px;box-shadow:none;aspect-ratio:3/4} #booksView .catalog-cover img{object-fit:cover} .catalog-rating{display:flex;color:#ffd000;font-size:14px;line-height:16px;letter-spacing:1px;margin-top:4px} .catalog-rating-empty{color:#d6e3eb} .catalog-rating>span{display:flex;gap:1px} .catalog-star{display:block;width:16px;height:16px;flex-shrink:0} body:has(.app-shell[data-active-tab="books"]), .app-shell[data-active-tab="books"], .app-shell[data-active-tab="books"] .main-wrapper, .app-shell[data-active-tab="books"] main, .app-shell[data-active-tab="books"] #booksView, .app-shell[data-active-tab="books"] .book-grid, .app-shell[data-active-tab="books"] .catalog-book, .app-shell[data-active-tab="books"] .page-heading, .app-shell[data-active-tab="books"] .topbar, .app-shell[data-active-tab="books"] .app-statusbar, .app-shell[data-active-tab="books"] .app-header, .app-shell[data-active-tab="books"] .mobile-nav{background:#ffffff} #catalogSearchToggle{display:none} .phone-preview #booksView{--compact-cover-height:clamp(65px,calc((100dvh - 465px)/3),142px)} .phone-preview #booksView .catalog-cover{width:calc(var(--compact-cover-height)*3/4);margin:0 0 6px} .phone-preview #booksView .catalog-book{width:calc(var(--compact-cover-height)*3/4);max-width:100%;justify-self:center} .phone-preview #booksView .catalog-toolbar{display:none} .phone-preview #booksView.search-expanded .catalog-toolbar{display:flex} .phone-preview #booksView .catalog-summary{display:none} .phone-preview #catalogSearchToggle{display:grid;place-items:center;margin-left:auto;order:1;width:28px} .phone-preview #catalogSearchToggle .icon{width:16px;height:16px} .phone-preview #booksView .catalog-filters{gap:16px;margin-bottom:20px} .phone-preview #booksView .catalog-meta{display:none} .phone-preview #booksView .catalog-meta[data-status="reading"]{display:flex} .phone-preview #booksView .catalog-author{color:#717771} .phone-preview #booksView .catalog-rating{font-size:12px;letter-spacing:0;line-height:14px;margin-top:3px} .phone-preview #booksView .catalog-star{width:14px;height:14px} .phone-preview #booksView .catalog-favorite{width:16px;height:16px;font-size:9px;right:4px;top:4px} @media(max-width:760px){ #booksView{--compact-cover-height:clamp(65px,calc((100dvh - 465px)/3),142px)} #booksView .catalog-cover{width:calc(var(--compact-cover-height)*3/4);margin:0 0 6px} #booksView .catalog-book{width:calc(var(--compact-cover-height)*3/4);max-width:100%;justify-self:center} #booksView .catalog-toolbar{display:none} #booksView.search-expanded .catalog-toolbar{display:flex} #booksView .catalog-summary{display:none} #catalogSearchToggle{display:grid;place-items:center;margin-left:auto;order:1;width:28px} #catalogSearchToggle .icon{width:16px;height:16px} #booksView .catalog-filters{gap:16px;margin-bottom:20px} #booksView .catalog-meta{display:none} #booksView .catalog-meta[data-status="reading"]{display:flex} #booksView .catalog-author{color:#717771} #booksView .catalog-rating{font-size:12px;letter-spacing:0;line-height:14px;margin-top:3px} #booksView .catalog-star{width:14px;height:14px} #booksView .catalog-favorite{width:16px;height:16px;font-size:9px;right:4px;top:4px} } /* Starter stats reflect the saved collection without a setup step. */ .stats-intro{margin:4px 0 24px} .stats-kicker{font-size:10px;letter-spacing:1.5px;font-weight:600;color:#69855b} .stats-intro h2{font:500 28px/1.3 var(--serif);letter-spacing:-.5px;margin:10px 0} .stats-intro p,.stats-note{font-size:12px;line-height:1.7;color:#6d786b} .reading-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .reading-stat{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;border:1px solid #e6ece1;border-radius:16px;background:#f0f7ec;color:#4b7250} .reading-stat[data-stat-tone="purple"]{background:#f4f0fc;color:#7964a4;border-color:#ebe3f5} .reading-stat[data-stat-tone="blue"]{background:#edf5fc;color:#527eaa;border-color:#e1ecf6} .reading-stat[data-stat-tone="rose"]{background:#fff0f4;color:#b05f7b;border-color:#f7e3ea} .reading-stat strong{font:500 40px/1.1 var(--serif);color:#2b3e30} .reading-stat>span:last-child{font-size:12px;color:#52614e} .stats-note{margin:20px 0} .phone-preview .reading-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .phone-preview .reading-stat{padding:20px 16px} .phone-preview .stats-intro h2{font-size:25px} @media(max-width:760px){.reading-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reading-stat{padding:20px 16px}} /* My Booknook: one scalable signature across the website and phone headers. */ .brand{margin:0 0 32px;padding:0;letter-spacing:normal;width:100%;min-height:52px} .brand-image{display:block;width:100%;height:auto;object-fit:contain} .brand .brand-image{width:190px;max-width:100%} .mobile-brand-logo{display:none} .app-preview .app-header h1:has(.app-brand-logo){width:210px;max-width:calc(100% - 112px);margin:0;line-height:1} .app-brand-logo{width:210px;max-width:100%;height:auto} .phone-preview[data-active-tab="library"] .page-heading .eyebrow, .phone-preview[data-active-tab="library"] .nook-heading-text{display:none} .phone-preview[data-active-tab="library"] .mobile-brand-logo{display:block;width:240px;max-width:100%} .phone-preview[data-active-tab="library"] #pageTitle{line-height:1;margin:0 0 8px} .phone-preview[data-active-tab="library"] .page-heading>.button{margin-top:6px} @media(max-width:760px){.app-shell[data-active-tab="library"] .page-heading .eyebrow,.app-shell[data-active-tab="library"] .nook-heading-text{display:none}.app-shell[data-active-tab="library"] .mobile-brand-logo{display:block;width:240px;max-width:100%}.app-shell[data-active-tab="library"] #pageTitle{line-height:1;margin:0 0 8px}.app-shell[data-active-tab="library"] .page-heading>.button{margin-top:6px}} /* Expanded room keeps live book shelves on three walls. */ .space-presets button{min-height:44px;border:1px solid #d8ddcf;border-radius:10px;background:#f8f7ef;color:#445b3b;padding:8px 12px;text-align:left} .space-presets button[aria-pressed="true"]{background:#445b3b;color:#fff;border-color:#445b3b} .space-presets{display:flex;gap:5px}.space-presets button{font-size:12px;min-height:34px} .app-preview .companion-controls[hidden]{display:none} .companion-current-books .cover-title{font-size:12px}.companion-current-books .cover-author{font-size:8px}.companion-current-books .cover-symbol{font-size:24px}.companion-current-books .cover-kicker{font-size:5px} /* Compact companion quick actions */ .companion-menu .companion-totals>button{text-align:left;cursor:pointer} .companion-level-summary,.companion-menu .companion-marathon{display:block;width:100%;text-align:left;cursor:pointer} .companion-level-summary{padding:11px 12px;border:1px solid #dacaf5;border-radius:13px;background:linear-gradient(120deg,#f5edff,#edf4ff);color:#463268} .companion-level-heading{display:flex;align-items:center;justify-content:space-between;gap:10px} .companion-level-heading span>small,.companion-level-heading span>strong{display:block} .companion-level-heading span>small{font-size:9px;letter-spacing:1px;font-weight:750;color:#715397} .companion-level-heading span>strong{font-size:15px} .companion-level-heading>b{text-align:right;font-size:22px;line-height:1.1} .companion-level-heading>b small{display:block;font-size:9px;font-weight:500;margin-top:3px} .companion-social-summary,.companion-streak-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;margin-top:9px;border-radius:13px;text-align:left;cursor:pointer} .companion-social-summary{background:linear-gradient(110deg,#edf9ff,#ecf4ff);border:1px solid #badff1;color:#245477} .companion-streak-summary{background:linear-gradient(110deg,#fff2db,#ffe7e8);border:1px solid #f3d2a4;color:#8b4524} .companion-social-summary strong,.companion-streak-summary strong{display:block;font-size:12px} .companion-social-summary small,.companion-streak-summary small{display:block;font-size:10px;margin-top:3px;line-height:1.4} .companion-social-summary>b,.companion-streak-summary>b{flex-shrink:0;border-radius:20px;padding:5px 8px;background:#ffffffb3;font-size:11px} .companion-quick-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px} .companion-quick-links button{border:1px solid var(--border,#d9dce7);background:var(--surface,#fff);color:inherit;border-radius:10px;padding:9px 5px;font-size:11px;cursor:pointer} .companion-marathon-heading{justify-content:space-between;margin-bottom:4px} .companion-marathon-compact{display:flex;justify-content:space-between;align-items:center;gap:8px} .companion-marathon-compact strong{font-size:12px} .companion-menu .companion-marathon progress{height:6px;margin:5px 0} .companion-menu button:focus-visible{outline:3px solid #8270ed;outline-offset:2px} [data-app-theme="dark"] .companion-level-summary{background:linear-gradient(120deg,#30233f,#202f48);border-color:#57466d;color:#eee4ff} [data-app-theme="dark"] .companion-level-heading span>small{color:#c7b1e8} [data-app-theme="dark"] .companion-social-summary{background:linear-gradient(110deg,#173844,#24324e);border-color:#365b70;color:#d4efff} [data-app-theme="dark"] .companion-streak-summary{background:linear-gradient(110deg,#493323,#452838);border-color:#79513d;color:#ffe2be} [data-app-theme="dark"] .companion-social-summary>b,[data-app-theme="dark"] .companion-streak-summary>b{background:#ffffff15} /* Companion home: balance in the corner, clear actions and a reading snapshot. */ .companion-menu:has(.companion-home){padding:16px;background:radial-gradient(ellipse at 0 0,#eee8ff88,transparent 50%),var(--surface,#fffdf7)} .companion-home-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .companion-home-eyebrow{font-size:9px;letter-spacing:1.6px;font-weight:750;opacity:.6} .companion-home-close{width:30px;height:30px;border:0;border-radius:50%;background:#8c75bb15;color:inherit;font-size:22px;cursor:pointer} .companion-home-welcome{display:flex;align-items:center;gap:8px;margin-bottom:15px} .companion-home-welcome .companion-menu-heading{flex:1;min-width:0;gap:8px} .companion-home-welcome .cartoon-thumb{width:43px;height:48px;flex-basis:43px} .companion-home-welcome h2.companion-greeting{font-size:18px;overflow-wrap:anywhere;letter-spacing:-.4px} .companion-home-welcome .companion-menu-heading small{display:block;font-size:9px;line-height:1.5;opacity:.65;margin-top:3px} .companion-home #companionQuickCoins{flex:0 0 auto;max-width:45%} .companion-home .companion-coins{gap:5px;padding:7px 8px;border-radius:14px;min-height:50px} .companion-home .companion-coin-art{flex-basis:36px;width:36px;height:34px} .companion-home .companion-coin{width:24px;height:24px;border-width:2px;font-size:15px} .companion-home .companion-coin-back{left:0;top:7px} .companion-home .companion-coin-front{left:10px;top:2px} .companion-home .companion-coin-spark{right:-1px;font-size:12px} .companion-home .companion-coin-balance{min-width:0} .companion-home .companion-coin-balance strong{font-size:17px;overflow-wrap:anywhere} .companion-home .companion-coin-balance small{font-size:8px;margin-top:2px} .companion-home .companion-coin-link{display:none} .companion-timer-launch{display:flex;align-items:center;gap:11px;width:100%;padding:13px 12px;border:0;border-radius:16px;background:linear-gradient(110deg,#6852c9,#447cce);color:#fff;text-align:left;box-shadow:0 5px 14px #6554bb25;cursor:pointer} .companion-timer-launch>span:nth-child(2){flex:1;min-width:0} .companion-timer-launch strong{display:block;font-size:14px} .companion-timer-launch small{display:block;font-size:9px;line-height:1.5;margin-top:4px;opacity:.9} .companion-timer-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;background:#ffffff20;border:1px solid #ffffff30;border-radius:12px} .companion-timer-icon svg{width:25px;height:25px} .companion-home .companion-totals{margin:12px 0 9px;gap:8px} .companion-home .companion-totals>button{display:flex;align-items:center;gap:7px;padding:8px 10px;background:#8073b609;border-color:#9d8dc326;color:inherit} .companion-home .companion-totals strong{font-size:18px} .companion-home .companion-totals small{font-size:9px} .companion-home .companion-level-summary{padding:12px;background:linear-gradient(120deg,#eee8ff88,#e6f4ff88)} .companion-level-heading .companion-level-charm{width:46px;height:46px;flex:0 0 46px;margin-right:3px} .companion-level-charm .reader-badge-gem{font-size:23px;border-width:2px} .companion-level-heading>span:not(.reader-badge){flex:1;min-width:0} .companion-level-heading span>strong{font-size:14px} .companion-level-heading>b{font-size:20px;flex-shrink:0} .companion-quick-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:11px;background:#ffffff65} .companion-quick-icon svg{width:21px;height:21px} .companion-summary-copy{flex:1;min-width:0} .companion-home .companion-streak-summary{border-color:#edcaa8;background:radial-gradient(ellipse at 0 100%,#ffe4ae,transparent 75%),linear-gradient(110deg,#fff3e6,#ffedf1);padding:11px} .companion-home .companion-social-summary{padding:11px;background:linear-gradient(110deg,#e8f6ff,#eeeaff);border-color:#cdd9f2} .companion-home .companion-social-summary small{font-size:9px} .companion-home .companion-quick-links button{display:flex;align-items:center;justify-content:center;gap:6px;background:#8a77b409} .companion-quick-links svg{width:16px;height:16px;flex-shrink:0} .companion-home footer{margin-top:12px;padding-top:9px} html[data-app-theme=dark] .companion-home .companion-level-summary{background:linear-gradient(120deg,#36294b,#25384d)} html[data-app-theme=dark] .companion-home .companion-streak-summary{background:linear-gradient(110deg,#493222,#432b3b);border-color:#77543c} html[data-app-theme=dark] .companion-home .companion-social-summary{background:linear-gradient(110deg,#213847,#302d4d);border-color:#415674} html[data-app-theme=dark] .companion-home .companion-quick-icon{background:#ffffff12}