:root{--blue:#1769d2;--deep:#103a73;--pink:#e44288;--paper:#f8fbff}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Trebuchet MS,Verdana,sans-serif;color:#fff;background:#123f70 url("../books/Sam the cat/images/background.png") center/cover no-repeat}button{font:inherit}.tool-button[hidden]{display:none!important}.app{height:100%;min-height:360px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(6px,1.2vh,14px);padding:clamp(8px,1.5vh,18px) clamp(10px,2vw,28px);background:linear-gradient(180deg,#07234f1a,#051c404d)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;width:100%;margin:auto}.tools{display:flex;gap:12px;padding:3px 4px 7px}.library-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:58px;padding:0 20px;border:4px solid #fff;border-radius:21px;color:#fff;background:linear-gradient(180deg,#8deaff 0 15%,#22bce9 22% 72%,#0877b9 76%);box-shadow:0 6px #075183,0 10px 15px #041f4652,inset 0 3px 3px #ffffffa6;font-size:19px;font-weight:900;text-decoration:none;text-shadow:0 2px 2px rgba(0,48,91,.35);transition:transform .18s,filter .18s,box-shadow .18s}.library-button:hover{transform:translateY(-5px);filter:brightness(1.08);box-shadow:0 11px #075183,0 16px 20px #041f464d,inset 0 3px 3px #ffffffa6}.library-button:active{transform:translateY(2px);box-shadow:0 2px #075183,0 5px 8px #041f4640}.library-arrow{width:15px;height:15px;border:solid #fff;border-width:0 0 5px 5px;transform:rotate(45deg);filter:drop-shadow(0 2px 1px rgba(0,48,91,.35))}.loading-home-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;margin-top:12px;padding:0 22px;border:3px solid #fff;border-radius:18px;color:#fff;background:linear-gradient(180deg,#7de5ff,#18aee5 62%,#0875b8);box-shadow:0 5px #075183,0 9px 14px #041f464d;font-size:18px;font-weight:900;text-decoration:none;text-shadow:0 2px 2px rgba(0,48,91,.35);transition:transform .18s,filter .18s,box-shadow .18s}.loading-home-button:hover{transform:translateY(-5px);filter:brightness(1.09);box-shadow:0 10px #075183,0 15px 20px #041f4647}.loading-home-button:active{transform:translateY(2px);box-shadow:0 2px #075183}.tool-button,.nav-button,.close-button,.close-icon{position:relative;isolation:isolate;color:#fff;cursor:pointer;transition:transform .16s,filter .16s,box-shadow .16s}.tool-button{--button-top:#36d5fa;--button-mid:#13aee4;--button-bottom:#0872bb;--button-rim:#07558d;width:64px;height:64px;min-width:64px;padding:0;border:3px solid #fff;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 24%,rgba(255,255,255,.72) 0 5%,transparent 22%),linear-gradient(180deg,var(--button-top),var(--button-mid) 58%,var(--button-bottom));box-shadow:0 0 0 3px #15bceae6,0 6px 0 var(--button-rim),0 9px 13px #041f466b,inset 0 0 0 3px #ffffff38,inset 0 -7px 9px #00306633}.tool-button:before{content:"";position:absolute;z-index:-1;inset:6px 9px auto;height:38%;border-radius:50%;background:linear-gradient(#ffffff6b,#fff0);pointer-events:none}.sound-tool{--button-top:#45ddff;--button-mid:#13b7ed;--button-bottom:#087abf;--button-rim:#07598e}.favorite-tool{--button-top:#ffef6a;--button-mid:#ffbd20;--button-bottom:#ef7f12;--button-rim:#a84d0a;box-shadow:0 0 0 3px #ffc11feb,0 6px 0 var(--button-rim),0 9px 13px #041f466b,inset 0 0 0 3px #ffffff47,inset 0 -7px 9px #72300033}.favorite-image{display:block;width:45px;height:45px;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(103,47,0,.38));transition:transform .18s,filter .18s,opacity .18s;pointer-events:none}.favorite-tool[aria-pressed=false] .favorite-image{opacity:.52;filter:grayscale(.65) drop-shadow(0 2px 1px rgba(50,50,50,.25));transform:scale(.86)}.favorite-tool[aria-pressed=true] .favorite-image{opacity:1;transform:scale(1.05)}.info-tool{--button-top:#f27dea;--button-mid:#d94ccd;--button-bottom:#a92ba9;--button-rim:#6f1c84;box-shadow:0 0 0 3px #de4fd5e6,0 6px 0 var(--button-rim),0 9px 13px #041f466b,inset 0 0 0 3px #ffffff38,inset 0 -7px 9px #4d005833}.fullscreen-tool{--button-top:#55dfcf;--button-mid:#17b9b7;--button-bottom:#087f9f;--button-rim:#075d78;box-shadow:0 0 0 3px #23c5bee6,0 6px 0 var(--button-rim),0 9px 13px #041f466b,inset 0 0 0 3px #ffffff38,inset 0 -7px 9px #003d5c33}.tool-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.tool-button:hover,.nav-button:hover:not(:disabled),.close-button:hover,.close-icon:hover{filter:brightness(1.12);transform:translateY(-2px)}.tool-button:active,.nav-button:active:not(:disabled),.close-button:active{transform:translateY(3px);box-shadow:inset 0 2px 4px #0003,0 2px #0b3e82}.game-icon{position:relative;display:inline-grid;place-items:center;width:34px;height:36px;color:#fff;filter:drop-shadow(0 3px 1px rgba(0,44,94,.42))}.sound-image{display:block;width:39px;height:39px;object-fit:contain;filter:drop-shadow(0 3px 1px rgba(0,44,94,.42));pointer-events:none}.sound-tool[aria-pressed=false] .sound-image{opacity:.72}.sound-tool[aria-pressed=false]:after{content:"";position:absolute;z-index:3;width:38px;height:5px;border-radius:5px;background:#fff;transform:rotate(-45deg);box-shadow:0 2px 1px #002c5e59}.info-icon{width:35px;height:38px;font:italic 900 39px/.9 Georgia,serif;text-shadow:0 3px 1px rgba(87,12,103,.42)}.fullscreen-icon:before{content:"";position:absolute;inset:2px;background:linear-gradient(#fff,#fff) left top/12px 4px no-repeat,linear-gradient(#fff,#fff) left top/4px 12px no-repeat,linear-gradient(#fff,#fff) right top/12px 4px no-repeat,linear-gradient(#fff,#fff) right top/4px 12px no-repeat,linear-gradient(#fff,#fff) left bottom/12px 4px no-repeat,linear-gradient(#fff,#fff) left bottom/4px 12px no-repeat,linear-gradient(#fff,#fff) right bottom/12px 4px no-repeat,linear-gradient(#fff,#fff) right bottom/4px 12px no-repeat}.book-stage{min-height:260px;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;justify-items:center;gap:clamp(10px,1.5vw,22px);overflow:visible;touch-action:none}.flip-book{width:100%;height:100%;min-width:0;min-height:260px;aspect-ratio:1.414 / 1;filter:drop-shadow(0 18px 18px rgba(3,20,50,.42))}.flip-book.stf__parent{width:min(100%,calc((100vh - 155px)*1.414))!important;height:min(100%,calc(100vh - 155px))!important;min-width:180px;min-height:255px}.flip-book.stf__parent{transition:transform .72s cubic-bezier(.35,.05,.2,1)}.flip-book.is-front-cover{transform:translate(-25%)}.flip-book.is-back-cover{transform:translate(25%)}.flip-book .stf__parent{margin:auto}.book-page{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff,#edf5ff);border:0}.book-page:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 1px #08234840}.book-page img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#f8fbff;user-select:none;-webkit-user-drag:none}.book-page.blank-page{background:#fff!important}.book-page.blank-page:before{content:none}.book-page.back-cover{display:grid;place-items:center;color:#fff;font-size:clamp(24px,4vw,52px);text-align:center;background:radial-gradient(circle at 38% 24%,#35b8df,#1652a7 72%)}.book-page.back-cover:before{content:"The End";font-weight:900;text-shadow:0 3px 0 #0b3e79}.book-page.cover-page.missing-page{display:grid;place-items:center;padding:12%;color:#fff;text-align:center;font-size:clamp(24px,4vw,52px);font-weight:900;background:radial-gradient(circle at 38% 24%,#35b8df,#1652a7 72%);text-shadow:0 3px 0 #0b3e79}.stf__block{perspective:2200px!important}.side-nav{position:relative;z-index:20;display:grid;place-items:center;visibility:visible;flex:0 0 66px;width:66px;height:66px;padding:0;border:3px solid #fff;border-radius:50%;color:#fff;cursor:pointer;background:radial-gradient(circle at 36% 24%,rgba(255,255,255,.72) 0 5%,transparent 22%),linear-gradient(180deg,#45ddff,#13ace9 58%,#0876bf);box-shadow:0 0 0 3px #15bceae6,0 6px #07558d,0 9px 13px #041f466b,inset 0 0 0 3px #ffffff38,inset 0 -7px 9px #00306633;transition:transform .16s,filter .16s,box-shadow .16s}.side-nav:before{content:"";position:absolute;inset:6px 9px auto;height:38%;border-radius:50%;background:linear-gradient(#ffffff6b,#fff0)}.side-nav:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px) scale(1.03)}.side-nav:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 3px #15bceae6,0 1px #07558d}.side-nav:disabled{cursor:default;filter:saturate(.25);opacity:.45;transform:none}.side-arrow{position:absolute;z-index:2;top:50%;left:50%;width:22px;height:22px;border:solid #fff;border-width:0 6px 6px 0;filter:drop-shadow(0 3px 1px rgba(0,44,94,.42))}.side-arrow-left{transform:translate(-36%,-50%) rotate(135deg)}.side-arrow-right{transform:translate(-64%,-50%) rotate(-45deg)}.page-status{min-height:24px;text-align:center;font-weight:900;font-size:clamp(14px,1.7vw,20px);text-shadow:0 2px 3px #092d61}.close-button,.close-icon{border:3px solid #fff;color:#fff;cursor:pointer;background:linear-gradient(180deg,#ff8ad0,#ed4fab 52%,#c92e88);box-shadow:0 0 0 2px #e54cac,inset 0 3px 2px #ffffff94,inset 0 -4px 6px #6c054c40,0 6px #901c62,0 10px 16px #03163761}.close-button{min-height:56px;border-radius:28px;padding:10px 28px;font-size:20px;font-weight:900}.modal[hidden]{display:none}.modal{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:#03132fb8}.modal-panel{position:relative;width:min(560px,94vw);padding:clamp(24px,5vw,48px);border:4px solid #fff;border-radius:30px;text-align:center;color:#153865;background:linear-gradient(145deg,#f8fcff,#dff4ff);box-shadow:0 20px 60px #00000073,inset 0 0 0 7px #66d0ed}.modal-panel h2{margin:0 30px 20px;font-size:clamp(25px,4vw,40px);color:#1658ac}.modal-panel p{margin:10px 0;font-size:clamp(17px,2.2vw,23px);font-weight:700}.close-icon{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;font-size:30px;line-height:35px}.close-button{margin:20px auto 0;min-width:160px;background:linear-gradient(#ef68a0,#cf2670)}.loading-screen{position:fixed;z-index:50;inset:0;display:grid;place-items:center;background:#103f7a url("../books/Sam the cat/images/background.png") center/cover no-repeat;transition:opacity .35s,visibility .35s}.loading-screen.done{opacity:0;visibility:hidden}.loading-screen.ready{background:#0520497a;backdrop-filter:blur(2px)}.loading-card{display:grid;justify-items:center;gap:22px;padding:30px;border-radius:28px;font-size:clamp(22px,4vw,38px);text-shadow:0 3px #0a3974;background:#0a4187b8;box-shadow:0 15px 35px #0000004d}.book-loader{width:72px;height:52px;border:6px solid #fff;border-radius:8px 8px 16px 16px;animation:bob .8s ease-in-out infinite alternate}.loading-screen.ready .book-loader{display:none}.start-book-button{min-width:230px;min-height:64px;padding:10px 28px;border:3px solid #fff;border-radius:32px;color:#fff;font-size:clamp(20px,3vw,28px);font-weight:900;cursor:pointer;background:linear-gradient(180deg,#ff8ad0,#ed4fab 52%,#c92e88);box-shadow:0 0 0 3px #e54cac,inset 0 3px 2px #ffffff94,inset 0 -4px 6px #6c054c40,0 7px #901c62,0 12px 20px #0316376b;text-shadow:0 2px 1px rgba(72,5,53,.55);transition:transform .16s,filter .16s}.start-book-button:hover{filter:brightness(1.1);transform:translateY(-2px)}.start-book-button:active{transform:translateY(5px);box-shadow:0 0 0 3px #e54cac,0 2px #901c62}@keyframes bob{to{transform:translateY(-9px) rotate(-2deg)}}.rotate-message{display:none;position:fixed;inset:auto 12px 6px;margin:0;text-align:center;font-size:12px}@media(max-width:760px){.tools{gap:9px}.tool-button{width:54px;height:54px;min-width:54px}.game-icon{transform:scale(.84)}.book-stage{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 58px;column-gap:82px;row-gap:5px;padding-inline:12px}.flip-book{grid-column:1/-1;grid-row:1}.side-nav{width:54px;height:54px;grid-row:2}.side-nav.previous{grid-column:1;justify-self:end}.side-nav.next{grid-column:2;justify-self:start}.side-arrow{width:18px;height:18px;border-width:0 5px 5px 0}}@media(max-width:620px){.library-button{width:56px;min-width:56px;height:54px;min-height:54px;padding:0;border-radius:50%}.library-button span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.library-arrow{margin-left:5px}}@media(max-width:480px)and (orientation:portrait){.rotate-message{display:block}.app{padding-bottom:27px}}@media(prefers-reduced-motion:reduce){.tool-button,.nav-button,.close-button{transition:none}}