:root{--bg-primary: #fcf8f8;--bg-card: #fbefef;--bg-soft: #f9dfdf;--accent-main: #f5afaf;--accent-strong: #ff5afa;--text-main: #333333;--text-muted: #666666}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-main)}.screen{width:100vw;height:100vh;padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--bg-primary)}.screen h1{font-size:2.2rem;margin-bottom:8px}.screen h2{font-size:1.6rem;margin-bottom:16px}.screen p{font-size:1rem;color:var(--text-muted);margin-bottom:24px}.start-button,.pilih-cerita-button{background:var(--accent-main);color:#fff;border:none;padding:14px 28px;margin:8px 0;font-size:1.05rem;font-weight:600;border-radius:18px;cursor:pointer;box-shadow:0 10px 20px #00000026;transition:transform .15s ease,box-shadow .15s ease}.start-button:hover,.pilih-cerita-button:hover{transform:translateY(-2px);box-shadow:0 14px 24px #0000002e}.start-button:active,.pilih-cerita-button:active{transform:scale(.96)}.avatar{font-size:4rem;margin-bottom:12px;animation:float 3s ease-in-out infinite}.story-stage{width:100vw;height:100vh;padding:24px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;transition:background .8s ease}.bg-narrator{background:linear-gradient(180deg,var(--bg-primary),#ffe9f1)}.bg-naga{background:linear-gradient(180deg,var(--bg-primary),#ffe0e0)}.bg-peri{background:linear-gradient(180deg,var(--bg-primary),#f5eaff)}.bg-default{background:var(--bg-primary)}.story-progress{display:flex;gap:10px}.story-progress .dot{width:10px;height:10px;border-radius:50%;background:var(--bg-soft)}.story-progress .dot.active{background:var(--accent-strong);transform:scale(1.4)}.character-wrapper{flex:1;display:flex;align-items:center;justify-content:center}.character-main{width:260px;max-width:70%;-webkit-user-select:none;user-select:none;animation:float 3s ease-in-out infinite}.character-wrapper.speaking .character-main{animation:talk .8s infinite}.character-wrapper.listening .character-main{filter:drop-shadow(0 0 25px rgba(245,175,175,.8))}.story-caption{background:var(--bg-card);border-radius:22px;padding:16px 20px;font-size:1.1rem;line-height:1.5;max-width:90%;box-shadow:0 10px 25px #00000026;animation:fadeUp .4s ease}.voice-indicator{margin-bottom:12px;font-size:.9rem;color:var(--text-muted)}.voice-indicator.listening{animation:pulseText 1.4s infinite}.disclaimer-footer{position:fixed;bottom:10px;left:50%;transform:translate(-50%);width:calc(100% - 32px);max-width:520px;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:8px 12px;font-size:.75rem;color:var(--text-muted);text-align:center;box-shadow:0 4px 12px #00000014;z-index:50}.disclaimer-footer b{color:var(--text-main);font-weight:600}.disclaimer-footer p{margin:0;line-height:1.3}.story-stage .disclaimer-footer{opacity:.6}.character-wrapper.speaking~.disclaimer-footer{opacity:.4}.story-setup{justify-content:flex-start;padding-top:64px;overflow-y:auto}.story-setup h2{margin-bottom:12px}.story-grid{width:100%;max-width:960px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;margin-bottom:80px}.story-card-grid{position:relative;width:100%;aspect-ratio:3 / 4;border-radius:28px;overflow:hidden;cursor:pointer;box-shadow:0 14px 30px #0000002e;transition:transform .2s ease,box-shadow .2s ease}.story-card-grid:hover{transform:translateY(-6px);box-shadow:0 18px 36px #00000038}.story-card-grid:active{transform:scale(.96)}.story-card-grid img{width:100%;height:100%;object-fit:cover;opacity:.5}.story-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#00000059,#0009)}.story-card-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:20px;z-index:2}.story-card-center h3{margin:0;font-size:1.25rem}.story-card-center p{margin-top:8px;font-size:.9rem;opacity:.9;color:#fff}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes talk{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseText{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}@media(max-width:480px){.story-stage{padding:16px}.story-progress{margin-top:6px}.character-main{width:300px;max-width:85%}.story-caption{position:sticky;bottom:24px;font-size:1rem;border-radius:20px}.voice-indicator{font-size:.85rem;margin-bottom:6px}.mic-waveform{margin-bottom:12px}.disclaimer-footer{font-size:.7rem;bottom:6px;padding:6px 10px}}@media(max-width:900px){.story-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.story-grid{grid-template-columns:1fr}.story-setup{padding-top:48px}}