@import "https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@400;500;700&family=Permanent+Marker&display=swap";:root{--paper-base:#fdf9ee;--paper-warm:#f8f2e1;--ink-soft:#3d3730;--ink-strong:#201a15;--frame-white:#fff;--line:#e9e0cc;--line-strong:#d2c6ad;--accent:#7a3d31;--accent-hover:#9c4f3f;--button-disabled:#c9b99a;--shadow:0 18px 44px #34230f33;--serif:"Cormorant Garamond", Georgia, serif;--sans:"Manrope", "Avenir Next", sans-serif;--hand:"Caveat", cursive;--marker:"Permanent Marker", cursive}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink-soft);font-family:var(--sans);background-image:radial-gradient(circle at 12% 18%, #cab99b3d, transparent 42%), radial-gradient(circle at 84% 92%, #bda68033, transparent 39%), repeating-linear-gradient(0deg, transparent, transparent 28px, #6e5f4917 28px, #6e5f4917 30px), repeating-linear-gradient(90deg, transparent, transparent 34px, #96846712 34px, #96846712 35px), linear-gradient(160deg, var(--paper-base), var(--paper-warm));margin:0;position:relative}body:before{content:"";pointer-events:none;opacity:.2;background-image:radial-gradient(circle at 10% 12%,#78664a33 0 1px,#0000 2px),radial-gradient(circle at 88% 14%,#78664a33 0 1px,#0000 2px),radial-gradient(circle at 85% 87%,#78664a33 0 1px,#0000 2px),radial-gradient(circle at 18% 82%,#78664a33 0 1px,#0000 2px);background-size:220px 220px;position:fixed;inset:0}#root{min-height:100vh}.story-page{grid-template-rows:auto auto auto auto;align-content:start;gap:1rem;width:min(920px,100% - 2rem);min-height:100vh;margin:0 auto;padding:2.75rem 0 2.5rem;animation:.48s ease-out both entry-fade;display:grid}.story-header{text-align:center;margin-bottom:.5rem}.story-overline{letter-spacing:.15em;text-transform:uppercase;color:#3d3730b8;margin:0;font-size:.78rem}.story-header h1{font-family:var(--serif);letter-spacing:.02em;color:var(--ink-strong);margin:.2rem 0 0;font-size:clamp(2rem,5vw,3.4rem);line-height:1}.story-frame-shell{aspect-ratio:16/9;justify-self:center;width:min(760px,100%);position:relative}.story-frame{background:var(--frame-white);border:8px solid var(--frame-white);width:100%;height:100%;box-shadow:var(--shadow);border-color:#fffefb;border-radius:8px;margin:0;position:relative;overflow:hidden;transform:rotate(-.25deg)}.story-frame:before{content:"";pointer-events:none;mix-blend-mode:multiply;border:1.5px dashed #755b3d59;border-radius:6px;position:absolute;inset:0}.story-frame:after{content:"";pointer-events:none;background:radial-gradient(circle,#0000 56%,#241c141f 100%);position:absolute;inset:0}.story-image{object-fit:cover;width:100%;height:100%;display:block}.story-pdf{background:#fff;border:0;width:100%;height:100%;display:block}.story-pdf-fallback{width:100%;height:100%;font-family:var(--sans);color:#3d3730d6;text-align:center;place-items:center;margin:0;padding:1rem;font-size:.95rem;display:grid}.story-pdf-fallback a{color:var(--accent)}.story-image-empty{color:#3d3730b8;font-family:var(--sans);place-items:center;padding:1.5rem;font-weight:500;display:grid}.story-question-screen{text-align:center;background:radial-gradient(circle at 50% 40%,#ffffffe0,#ffffffa8),repeating-linear-gradient(0deg,#0000,#0000 28px,#755b3d17 28px 29px);place-items:center;width:100%;height:100%;padding:1.5rem;display:grid}.story-question-text{font-family:var(--hand);color:var(--ink-strong);text-shadow:0 1px #fffc;margin:0;font-size:clamp(2rem,5vw,3rem);line-height:1.1}.story-caption-wrap{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;border-radius:0;justify-items:center;gap:.5rem;min-height:98px;margin-top:.5rem;padding:.2rem .1rem;display:grid}.story-caption{color:var(--ink-strong);font-family:var(--hand);letter-spacing:.01em;text-align:center;margin:0;font-size:clamp(1.8rem,3.6vw,2.35rem);line-height:1.18}.credits-button{color:var(--accent);font-family:var(--hand);letter-spacing:.02em;cursor:pointer;background:#fffdf6e0;border:2px solid #7a3d31a6;border-radius:999px;padding:.52rem 1.12rem;font-size:1.24rem;font-weight:700;line-height:1;transition:transform .16s,background-color .16s,color .16s}.credits-button:hover{color:var(--accent-hover);background:#fffaf0;transform:translateY(-1px)rotate(-.3deg)}.story-credits-screen{background:radial-gradient(circle at 50% 30%,#fffffff0,#ffffffbd),linear-gradient(#f8f0e07a,#f0e4cda8);justify-content:center;align-items:flex-end;width:100%;height:100%;padding:1rem;display:flex;position:relative;overflow:hidden}.story-credits-screen:after{content:"";pointer-events:none;background:linear-gradient(#fffffff5 0%,#ffffff1a 14%,#fff0 84%,#fffffff0 100%);position:absolute;inset:0}.story-credits-roll{text-align:center;width:min(88%,560px);animation:credits-roll var(--credits-duration,20s) linear forwards;transform:translateY(102%)}.story-credits-line{font-family:var(--serif);letter-spacing:.06em;text-transform:uppercase;color:#231c14f0;margin:0 0 .9rem;font-size:clamp(1.2rem,2.4vw,1.8rem);line-height:1.25}.typing-cursor{opacity:0;font-family:var(--hand)}.typing-cursor.is-visible{opacity:1;animation:.7s step-end infinite blink}.story-controls{grid-template-columns:1fr 1fr;align-items:center;gap:.75rem;padding-top:.2rem;display:grid}.nav-button{color:var(--accent);font-family:var(--hand);letter-spacing:.02em;cursor:pointer;background:#fffdf6db;border:2px solid #7a3d31a6;border-radius:999px;align-items:center;gap:.46rem;padding:.58rem 1.06rem;font-size:1.28rem;font-weight:600;line-height:1;transition:transform .16s,background-color .16s,color .16s;display:inline-flex;box-shadow:0 6px 16px #4e342024}.nav-button:hover:enabled{color:var(--accent-hover);background:#fffaf0;transform:translateY(-1px)rotate(-.3deg)}.nav-button:disabled{color:#7a3d3185;cursor:not-allowed;background:#d6cab280;border-color:#91765959}.nav-arrow{font-family:var(--marker);letter-spacing:.04em;font-size:1rem;line-height:1;display:inline-block}.nav-arrow-left{transform:rotate(-4deg)}.nav-arrow-right{transform:rotate(4deg)}.story-controls .nav-button:first-child{justify-self:start}.story-controls .nav-button:last-child{justify-self:end}@keyframes blink{50%{opacity:0}}@keyframes entry-fade{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes credits-roll{0%{transform:translateY(102%)}to{transform:translateY(-140%)}}@media (width<=900px){.story-page{gap:.9rem;width:min(920px,100% - 1rem);padding-top:1.6rem}.story-frame{border-width:6px;border-radius:8px;transform:none}.story-caption-wrap{min-height:88px}.story-controls{grid-template-columns:1fr;justify-items:center;gap:.6rem}.story-controls .nav-button,.story-controls .nav-button:first-child,.story-controls .nav-button:last-child{justify-self:center;width:min(280px,100%)}.story-controls .nav-button:first-child{order:1}.story-controls .nav-button:last-child{order:2}}