*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:#bae6fd;min-height:100vh;font-family:Nunito,sans-serif;overflow-x:hidden}.story-wrapper{position:relative}.sticky-tree{z-index:0;background-color:var(--active-color,#0ea5e9);justify-content:center;align-items:center;width:100%;height:100svh;transition:background-color .9s;display:flex;position:sticky;top:0;overflow:hidden}.sticky-tree svg{z-index:1;drop-shadow:0 4px 24px #0000001a;max-width:min(90vw,90svh);max-height:min(90vw,90svh);position:relative}.sticky-tree:before{content:"";pointer-events:none;background:radial-gradient(180px 80px at 15% 20%,#ffffff8c 0%,#0000 70%),radial-gradient(140px 60px at 80% 15%,#ffffff73 0%,#0000 70%),radial-gradient(100px 50px at 50% 80%,#ffffff4d 0%,#0000 70%);position:absolute;inset:0}.scroll-sections{z-index:1;pointer-events:none;margin-top:-100svh;position:relative}.scroll-section{padding-bottom:clamp(32px,6svh,64px);justify-content:center;align-items:flex-end;height:100svh;padding-inline:16px;display:flex}.section-panel{pointer-events:auto;-webkit-backdrop-filter:blur(12px);text-align:center;background:#ffffffe0;border-radius:24px;width:100%;max-width:480px;padding:24px 32px;box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014}.section-step{letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:8px;font-size:12px;font-weight:600}.section-title{color:#0f172a;margin-bottom:10px;font-family:Fredoka One,cursive;font-size:clamp(2rem,5vw,3rem);line-height:1.1}.section-subtitle{color:#334155;font-size:clamp(1rem,2.5vw,1.3rem);font-style:italic;font-weight:600;line-height:1.4}.section-hint{color:#475569;margin-top:12px;font-size:.95rem;font-weight:600}.vehicle-overlay-img{object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 24px #00000047);width:clamp(130px,20vw,240px);height:auto}.card-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#00000080;position:fixed;inset:0}.character-card{z-index:101;overscroll-behavior:contain;background:#fff;border-radius:28px;width:min(420px,100vw - 32px);height:fit-content;max-height:calc(100svh - 32px);margin:auto;position:fixed;inset:0;overflow-y:auto;box-shadow:0 24px 80px #0000004d}.card-close{color:#fff;cursor:pointer;z-index:10;background:#ffffff4d;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;font-weight:700;transition:background .2s;display:flex;position:absolute;top:14px;right:14px}.card-close:hover{background:#ffffff80}.card-header{border-radius:28px 28px 0 0;justify-content:center;align-items:center;height:180px;display:flex;position:relative;overflow:hidden}.card-pup-img{object-fit:cover;border:5px solid #ffffff80;border-radius:50%;width:150px;height:150px;box-shadow:0 4px 20px #0003}.card-body{flex-direction:column;gap:12px;padding:20px 24px 28px;display:flex}.card-name-row{align-items:center;gap:10px;display:flex}.card-emoji{font-size:2rem;line-height:1}.card-name{font-family:Fredoka One,cursive;font-size:2.2rem;line-height:1}.card-role{letter-spacing:.06em;text-transform:uppercase;color:#64748b;margin-top:-6px;font-size:.9rem;font-weight:700}.card-catchphrase{color:#1e293b;border-left:4px solid var(--pup-color,#2563eb);padding-left:12px;font-size:1.1rem;font-style:italic;font-weight:700;line-height:1.4}.card-vehicle{background:#f8fafc;border-radius:16px;align-items:center;gap:14px;padding:10px 16px;display:flex}.card-vehicle-img{object-fit:contain;width:70px;height:50px}.card-vehicle-name{color:#334155;font-size:1rem;font-weight:700}.card-funfact{color:#475569;background:#f1f5f9;border-radius:12px;padding:10px 14px;font-size:.95rem;line-height:1.5}.card-sound-btn{color:#fff;cursor:pointer;border:none;border-radius:16px;width:100%;padding:14px;font-family:Fredoka One,cursive;font-size:1.1rem;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 12px #00000026}.card-sound-btn:active{transform:scale(.97);box-shadow:0 2px 6px #0000001f}