*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#fff2f9,#eff9ff);font-family:system-ui,Noto Sans Thai,Tahoma,sans-serif;color:#3b4154}button,input{font:inherit}button{cursor:pointer;border:1px solid #e6cadc;border-radius:24px;background:#fff;padding:10px 16px;color:#805277}button:disabled{opacity:.45;cursor:not-allowed}.app{max-width:1000px;margin:auto;min-height:100vh;padding-bottom:100px}header{text-align:center;padding:28px 14px 12px}header h1{color:#d52e83;font-size:clamp(25px,5vw,39px);margin:5px}header p{color:#697c8a}.eyebrow{color:#ad4e94;font-size:13px;font-weight:700}main{padding:12px}.panel{background:#fff;border:1px solid #f4ddeb;border-radius:24px;padding:clamp(16px,3vw,28px);margin-bottom:18px;box-shadow:0 10px 32px #a9669212}.panel h2{color:#0d8193;margin:7px 0 14px}.panel p{line-height:1.8}.panel label{display:block;margin:12px 0 7px}input[type=date]{display:block;border:1px solid #decbdc;border-radius:12px;padding:11px;width:min(100%,340px)}.primary,.emergency{display:inline-block;background:#e82e91;color:#fff;border:0;text-decoration:none;border-radius:22px;padding:12px 20px;margin-top:10px}.emergency{background:#c93654;font-weight:700}.hint{font-size:13px;color:#737889}.highlight{background:#fff0f8;border-radius:12px;padding:13px;margin:12px 0}.controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center;margin:16px 0}.controls label{margin:0;font-size:13px}.book{background:#b68d70;padding:12px;border-radius:18px;box-shadow:0 10px #e2c5a7,0 20px 30px #bd9aa74a}.page{aspect-ratio:16/9;display:grid;grid-template-columns:42% 58%;background:linear-gradient(120deg,#fce8f3,#e9f9ff);border-radius:9px;overflow:hidden}.illustration{padding:10px;display:grid;place-items:center;min-width:0}.illustration img{max-width:100%;max-height:100%;object-fit:contain}.placeholder{height:100%;width:100%;align-items:center;justify-content:center;flex-direction:column;font-size:48px;color:#d35c9a}.placeholder small{font-size:12px;text-align:center;padding:10px}.words{padding:clamp(8px,3vw,30px);display:flex;flex-direction:column;justify-content:center}.words h2{font-size:clamp(16px,3vw,32px);margin:7px 0}.words p{font-size:clamp(11px,1.6vw,18px);line-height:1.6;margin:0}.thumbs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.thumbs .selected{background:#e82e91;color:#fff}.question{border-top:1px solid #eee;padding:16px 0}.question label{display:block;background:#fdf3fa;border-radius:12px;padding:10px;margin:8px 0}.warning{background:#fff0f0;border-left:4px solid #d44859;padding:16px;border-radius:10px}nav{position:fixed;bottom:0;left:0;right:0;background:#ffffffed;border-top:1px solid #f1d9e7;display:flex;justify-content:center;z-index:5;padding:8px max(8px,calc((100vw - 1000px)/2))}nav button{flex:1;max-width:240px;border:0;border-radius:12px;background:transparent;font-size:12px;padding:6px}nav button span{display:block;font-size:24px}nav button.active{color:#d82b84;background:#ffedf7}@media(max-width:560px){.book{padding:6px}.page{grid-template-columns:40% 60%}.illustration{padding:4px}.words{padding:6px}.words h2{font-size:clamp(12px,3vw,18px)}.words p{font-size:clamp(9px,2vw,12px)}.eyebrow{font-size:10px}.panel{padding:12px}}.page.page-full{display:block;position:relative;width:100%;aspect-ratio:16/9;background:#fff;overflow:hidden}.full-page-image{display:block;width:100%;height:100%;object-fit:contain}.narration-text{margin:16px 0 4px;background:#fff7fb;border:1px solid #f3d5e6;border-radius:14px;padding:12px 16px}.narration-text summary{cursor:pointer;color:#945276;font-weight:600}.narration-text p{margin:8px 0 0;line-height:1.8}@media(max-width:560px){.page.page-full{display:block;aspect-ratio:16/9}.book{padding:5px;border-radius:12px}.narration-text{font-size:14px}}