:root { --ink:#3b2c35; --muted:#7d6874; --paper:#fffaf2; --accent:#cc6f99; }
* { box-sizing:border-box; }
html { background:#f7eee8; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 10% 10%,#f8d4e2 0,transparent 30rem),radial-gradient(circle at 90% 20%,#d6edf0 0,transparent 31rem),linear-gradient(145deg,#fffaf4,#f8eff7 50%,#fff5df); font-family:Arial,sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
.storybook { position:relative; min-height:100svh; overflow:hidden; padding:20px clamp(12px,3vw,38px) 24px; }
.glow { position:fixed; width:20rem; height:20rem; border-radius:50%; opacity:.42; pointer-events:none; }
.glow-left { left:-10rem; bottom:-9rem; background:#efa6c3; }
.glow-right { right:-10rem; top:18%; background:#f6cf77; }
header { position:relative; z-index:2; width:min(1050px,100%); margin:0 auto 13px; display:flex; align-items:end; justify-content:space-between; gap:15px; }
.brand { margin:0; color:#98506f; font-size:.76rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.hint { margin:5px 0 0; color:var(--muted); font-size:.78rem; }
.counter { display:flex; align-items:center; gap:8px; margin:0; color:#705765; font:700 .84rem Georgia,serif; }
.counter span { width:28px; height:1px; background:#b993a5; }
.book { position:relative; width:min(920px,100%); margin:auto; padding:13px; border:1px solid #6b4d5b1c; border-radius:34px; background:#ffffff7a; box-shadow:0 28px 75px #5e43521f,inset 0 1px white; backdrop-filter:blur(17px); perspective:1800px; }
.page { display:flex; flex-direction:column; overflow:hidden; border:1px solid #4a33400f; border-radius:24px; background:var(--paper); box-shadow:0 10px 28px #4e37441a; transform-origin:left center; }
.turn-next { animation:nextPage .5s cubic-bezier(.2,.8,.2,1) both; }
.turn-prev { animation:prevPage .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nextPage { from{opacity:.45;transform:rotateY(-12deg) translateX(16px)} to{opacity:1;transform:none} }
@keyframes prevPage { from{opacity:.45;transform:rotateY(10deg) translateX(-13px)} to{opacity:1;transform:none} }
.movie { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#eadfda; }
.movie-main { width:100%; height:100%; display:block; object-fit:contain; }
.copy { position:relative; display:flex; min-height:330px; flex-direction:column; justify-content:center; padding:clamp(31px,5vw,58px) clamp(27px,6vw,70px); background:radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 12rem),linear-gradient(145deg,#fffdf8,#fff8ed); }
.copy:before { content:""; position:absolute; inset:17px; border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-radius:17px; pointer-events:none; }
.kicker { position:relative; margin:0 0 9px; color:var(--accent); font-size:.71rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
h1 { position:relative; margin:0; font:500 clamp(2.15rem,4.3vw,4.55rem)/.96 Georgia,serif; letter-spacing:-.045em; }
.flourish { position:relative; display:flex; align-items:center; gap:8px; margin:18px 0 20px; color:var(--accent); }
.flourish i { width:40px; height:1px; background:currentColor; opacity:.45; }
.flourish span { font-size:.78rem; }
.story-text { position:relative; margin:0 0 14px; font:clamp(1rem,1.42vw,1.24rem)/1.56 Georgia,serif; }
.contact { position:relative; margin-top:20px; padding-top:18px; border-top:1px solid color-mix(in srgb,var(--accent) 33%,transparent); }
.signature { margin:0 0 7px; font:italic 700 1.04rem Georgia,serif; }
.keepsake-note { margin:0; color:var(--muted); font:italic .84rem/1.45 Georgia,serif; }
.arrow { position:absolute; z-index:5; top:31%; width:48px; height:48px; display:grid; place-items:center; padding:0 0 4px; border:1px solid #5f42521f; border-radius:50%; color:#634959; background:#fffdf8ed; box-shadow:0 8px 20px #4f374517; font:2.05rem/1 Georgia,serif; cursor:pointer; transform:translateY(-50%); }
.arrow:disabled { opacity:0; pointer-events:none; }
.previous { left:-12px; }.next { right:-12px; }
.dots { position:relative; z-index:2; width:min(520px,90%); margin:16px auto 0; display:flex; justify-content:center; gap:6px; }
.dots button { width:7px; height:7px; padding:0; border:0; border-radius:99px; background:#c8b3be; cursor:pointer; transition:.25s; }
.dots button[aria-current="page"] { width:25px; background:#9e5575; }
@media(max-width:760px){
  .storybook{padding:13px 8px 18px;overflow-y:auto}.hint{display:none}.brand{font-size:.62rem;letter-spacing:.1em}.book{padding:7px;border-radius:23px}.page{border-radius:17px}.movie{aspect-ratio:16/9}.copy{min-height:0;justify-content:flex-start;padding:26px 26px 29px}.copy:before{inset:9px;border-radius:11px}h1{font-size:clamp(1.95rem,9.8vw,3.2rem)}.story-text{font-size:.97rem;line-height:1.5}.flourish{margin:12px 0 14px}.arrow{top:23%;width:42px;height:42px}.previous{left:0}.next{right:0}.contact{margin-top:16px}.dots{margin-top:11px;gap:5px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}