:root{color-scheme:light;--mist: #aebdc0;--mist-light: #ccd5d5;--sage: #355e55;--sage-dark: #18332f;--paper: #d9d5c6;--paper-warm: #e6b18d;--peach: #d98c6b;--ink: #172724;--muted: #62716c;--line: rgba(23, 39, 36, .16);--shadow: 0 32px 90px rgba(23, 39, 36, .24);--serif: Iowan Old Style, Palatino Linotype, Palatino, Georgia, serif;--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box}html{min-height:100%;background:var(--mist);color:var(--ink)}body{position:relative;min-height:100vh;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 32%,rgba(235,239,233,.64) 0 18%,rgba(204,216,214,.26) 44%,transparent 68%),linear-gradient(180deg,#c8d4d4 0%,var(--mist) 50%,#97aaab 100%);font-family:var(--sans);letter-spacing:0}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,rgba(23,39,36,.025) 0 1px,transparent 1px 5px);opacity:.42}button{font:inherit}img{display:block;max-width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.book-app{position:relative;z-index:1;min-height:100svh;display:grid;place-items:center;padding:clamp(18px,4vw,48px)}.book-picker{width:min(1060px,90vw);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));place-items:center;gap:clamp(14px,2.4vw,32px)}.book-choice{position:relative;width:min(100%,230px);aspect-ratio:3 / 4;display:grid;align-items:end;overflow:hidden;padding:clamp(14px,2.2vw,24px);border:3px solid rgba(45,33,31,.18);border-radius:2px 10px 10px 2px;background:#7b8f83;color:#fff9f1;box-shadow:-8px 7px #17272424,0 24px 68px #17272438;cursor:pointer;transform:rotate(-1.5deg) translateY(0);transition:box-shadow .18s ease,transform .18s ease}.book-choice:before{content:"";position:absolute;inset:0 auto 0 0;width:13%;background:#2d211f1f;mix-blend-mode:multiply}.book-choice:hover,.book-choice:focus-visible{box-shadow:-11px 10px #17272429,0 32px 82px #17272442;outline:none;transform:rotate(0) translateY(-5px)}.book-choice:nth-child(2){transform:rotate(1.2deg) translateY(7px)}.book-choice:nth-child(3){transform:rotate(-.7deg) translateY(-4px)}.book-choice:nth-child(4){transform:rotate(1.6deg) translateY(4px)}.book-choice:nth-child(2):hover,.book-choice:nth-child(2):focus-visible,.book-choice:nth-child(3):hover,.book-choice:nth-child(3):focus-visible,.book-choice:nth-child(4):hover,.book-choice:nth-child(4):focus-visible{transform:rotate(0) translateY(-5px)}.book-choice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--cover-position, 50% 50%)}.book-choice span{position:relative;z-index:1;max-width:8ch;font-family:var(--serif);font-size:clamp(34px,4.8vw,58px);line-height:.9;text-align:left;text-shadow:0 2px 22px rgba(45,33,31,.24);overflow-wrap:anywhere}.reader{position:relative;width:min(100%,1040px);min-height:calc(100svh - clamp(36px,8vw,96px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.6vw,18px);align-items:center}.reader[hidden],.book-picker[hidden]{display:none}.reader-actions{z-index:4;display:flex;justify-content:space-between;gap:10px}.reader-actions button{min-height:38px;padding:8px 12px;border:2px solid rgba(23,39,36,.2);border-radius:999px;background:#d9d5c647;color:var(--ink);font-size:12px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(10px)}.reader-actions button[aria-pressed=true]{background:var(--ink);color:#fff9f1}.page-stage{position:relative;min-height:0;display:grid;grid-template-rows:minmax(0,auto) auto;align-content:center;justify-items:center;gap:clamp(14px,2.4vh,24px);isolation:isolate;touch-action:none;perspective:1600px}.page-stage:before{content:"";position:absolute;z-index:7;inset:clamp(14px,4vw,42px) clamp(8px,3vw,34px);pointer-events:none;background:radial-gradient(circle at 50% 52%,rgba(255,229,193,.18),transparent 34%),linear-gradient(90deg,rgba(26,48,43,.13),transparent 18%,transparent 82%,rgba(26,48,43,.12));mix-blend-mode:multiply;opacity:.74;animation:stageMist 14s ease-in-out infinite}.page-stage:after{content:"";position:absolute;z-index:-1;bottom:clamp(94px,15vh,132px);left:50%;width:min(68vw,760px);height:clamp(48px,7vh,86px);border-radius:50%;background:#12232052;filter:blur(22px);transform:translate(-50%)}.page-book{width:min(86vw,920px);height:min(57svh,560px);min-height:360px;filter:drop-shadow(0 34px 52px rgba(18,35,32,.3)) drop-shadow(-18px 16px 18px rgba(18,35,32,.12));transform:translateY(clamp(4px,2vh,18px)) rotateX(1.2deg)}.book-page{position:relative;overflow:hidden;border:1px solid rgba(53,94,85,.18);border-radius:1px;background:#8ea7a2;transform-style:preserve-3d;backface-visibility:hidden}.book-page:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(45,33,31,.08),transparent 11%,transparent 89%,rgba(45,33,31,.09));opacity:.34;mix-blend-mode:multiply}.book-page-inner{position:relative;width:100%;height:100%;display:grid;overflow:hidden;background:#8ea7a2}.book-page img{width:100%;height:100%;min-height:0;object-fit:cover;background:#8ea7a2;animation:artBreath 16s ease-in-out infinite;filter:saturate(.98) contrast(.98) sepia(.02);transform-origin:center}.storybook-overlay{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}.storybook-overlay:before{content:"";position:absolute;inset:-6%;background:radial-gradient(circle at 50% 48%,rgba(255,225,173,.18),transparent 28%),linear-gradient(90deg,rgba(20,42,37,.08),transparent 18%,transparent 82%,rgba(20,42,37,.1));mix-blend-mode:screen;opacity:.66;animation:glowBreath 7.5s ease-in-out infinite}.storybook-particles,.storybook-eyes{position:absolute;inset:0}.storybook-particles span{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:999px;background:#f6da96b8;box-shadow:0 0 12px #f6da9685;opacity:0;transform:translate(-50%,-50%);animation:particleFloat 6.2s ease-in-out var(--delay) infinite}.book-page[data-tone=night] .storybook-particles span,.book-page[data-tone=dark] .storybook-particles span{background:#fbe5a9d1;box-shadow:0 0 16px #fbe5a999}.book-page[data-tone=warm] .storybook-particles span,.book-page[data-tone=cover] .storybook-particles span{background:#f4b17c9e;box-shadow:0 0 14px #f4b17c80}.storybook-eye{position:absolute;left:var(--eye-x);top:var(--eye-y);width:var(--eye-size);height:calc(var(--eye-size) * 1.16);border-radius:999px;background:#0e1f1ce0;box-shadow:0 0 1px #0e1f1ce6,0 0 5px #fff0be29;transform:translate(-50%,-50%) scaleY(1);transform-origin:center;opacity:.72;animation:blinkOverlay 5.6s ease-in-out var(--blink-delay) infinite}.floating-words{position:relative;z-index:8;width:min(82vw,840px);min-height:clamp(78px,11vh,118px);display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:.18em .42em;pointer-events:none;transform:translateY(-2px)}.floating-word{display:inline-block;white-space:nowrap;opacity:0;color:#122521d6;font-family:var(--serif);font-size:clamp(27px,4.2vw,54px);line-height:.98;text-shadow:0 1px 0 rgba(238,220,192,.28),0 8px 28px rgba(23,39,36,.18);transform:translateY(0) rotate(var(--rot)) scale(1);animation:wordSettle 1.2s cubic-bezier(.18,.84,.22,1) var(--delay) forwards,wordWave 6.8s ease-in-out calc(var(--delay) + var(--wave-delay)) infinite;will-change:transform,opacity,filter}.floating-word:nth-child(3n){color:#81533dd6}.floating-word:nth-child(4n){color:#315a50db}.stf__parent{margin-inline:auto;cursor:grab}.stf__parent:active{cursor:grabbing}.stf__wrapper{border-radius:1px;overflow:hidden}.stf__wrapper:after{content:"";position:absolute;inset:0;z-index:30;pointer-events:none;background:linear-gradient(90deg,transparent 47.6%,rgba(255,238,207,.38) 49.2%,rgba(18,39,35,.32) 50%,rgba(255,238,207,.2) 50.8%,transparent 52.5%),linear-gradient(180deg,#ffefd314,#1727241a);mix-blend-mode:multiply}.page-progress{display:flex;justify-content:center;gap:8px}.page-progress span{width:10px;height:10px;border:2px solid rgba(23,39,36,.38);border-radius:999px;background:transparent}.page-progress .is-current{background:var(--ink)}@keyframes artBreath{0%,to{transform:translateY(0) scale(1.035) rotate(0)}50%{transform:translateY(-2px) scale(1.06) rotate(-.08deg)}}@keyframes glowBreath{0%,to{opacity:.44;transform:translate(0) scale(1)}50%{opacity:.74;transform:translate(8px) scale(1.02)}}@keyframes particleFloat{0%,to{opacity:0;transform:translate(-50%,-50%) scale(.72)}20%{opacity:.78}68%{opacity:.42;transform:translate(calc(-50% + var(--drift-x)),calc(-50% + var(--drift-y))) scale(1.08)}}@keyframes blinkOverlay{0%,76%,84%,to{transform:translate(-50%,-50%) scaleY(1);opacity:.72}80%{transform:translate(-50%,-50%) scaleY(.12);opacity:.86}}@keyframes stageMist{0%,to{opacity:.62;transform:translate(0)}50%{opacity:.84;transform:translate(10px)}}@keyframes wordSettle{0%{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}@keyframes wordWave{0%,to{transform:translateY(0) rotate(var(--rot)) scale(1)}50%{transform:translateY(calc(var(--float) * -1)) rotate(calc(var(--rot) * -.45)) scale(1.01)}}@media(max-width:680px){.book-app{padding:16px}.book-picker{width:min(440px,92vw);grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}.book-choice{width:min(100%,190px);box-shadow:-5px 5px #1727241f,0 14px 44px #1727242e}.book-choice span{font-size:clamp(29px,9vw,44px)}.reader{min-height:calc(100svh - 32px);gap:10px}.reader-actions{padding-inline:2px}.reader-actions button{min-height:34px;padding-inline:10px;font-size:10px}.page-book{width:min(94vw,430px);height:calc(100svh - 202px);min-height:0}.floating-words{width:88vw;min-height:74px;gap:.16em .34em}.floating-word{font-size:clamp(24px,7.2vw,40px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;transition-duration:1ms!important}}