:root{color-scheme:light;--ink:#183f48;--muted:#52666c;--snow:#f0f6f7;--amber:#f5c770;--paper:#fff;--font:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--snow);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible,audio:focus-visible{outline:3px solid #a9510e;outline-offset:5px}[hidden]{display:none!important}.site-header{max-width:1160px;margin:auto;padding:26px 36px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-weight:750;font-size:18px;display:flex;gap:10px;align-items:center}.brand>span{font-size:31px;color:#397a86;line-height:1}.demo-badge{border:1px solid #b7cdd1;border-radius:30px;padding:3px 13px;font-size:14px;color:var(--muted)}main{max-width:1120px;margin:20px auto 0;padding:0 24px}.story{background:var(--paper);display:grid;grid-template-columns:1fr 1.04fr;border-radius:26px;overflow:hidden;box-shadow:0 12px 50px #183f480b}.illustration{position:relative;background:#173c48;min-height:610px}.illustration img{position:absolute;display:block;width:100%;height:100%;object-fit:cover;object-position:48% center}.date{position:absolute;top:27px;left:27px;background:#fff9e9;color:#25434a;width:90px;padding:8px 5px 13px;border-radius:6px 6px 35px 35px;text-align:center;box-shadow:0 3px 16px #102e4620;font-size:14px;font-weight:650;line-height:1.25}.date-number{display:block;font-size:46px;font-weight:750;line-height:1.15}.image-note{position:absolute;bottom:16px;left:20px;font-size:12px;color:#fff;background:#153f49d9;padding:3px 10px;border-radius:20px}.story-content{padding:43px 38px 35px;align-self:center}.intro{font-size:14px;margin:0 0 16px;color:var(--muted)}h1{font-size:clamp(28px,3vw,37px);font-weight:780;line-height:1.17;letter-spacing:-1.2px;margin:0 0 19px}.description{font-size:17px;line-height:1.65;color:var(--muted);margin:0 0 28px;max-width:37ch}.play-button{border:0;border-radius:16px;padding:18px 20px;min-height:64px;width:100%;background:var(--ink);color:white;display:flex;align-items:center;justify-content:center;gap:13px;font-weight:700;font-size:18px;cursor:pointer;transition:background .15s}.play-button:hover{background:#245b66}.play-button:active{background:#102f37}#play-icon{font-size:19px;min-width:24px;text-align:center}.duration{margin:11px 0 10px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:14px;color:var(--muted)}audio{display:block;width:100%;height:44px}.demo-note{font-size:12px;color:var(--muted);text-align:center;margin:9px 0 0}.audio-error{font-size:14px;color:#833d18}.audio-error a{color:inherit}.activity{margin-top:25px;border-top:1px solid #dce7e9;padding-top:22px;display:flex;gap:13px}.activity-star{font-size:33px;color:#ad6c18;line-height:1}h2{font-size:16px;line-height:1.4;margin:0 0 7px;font-weight:750}.activity p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}.closing{text-align:center;margin:23px 0 0;color:var(--muted);font-size:15px}footer{text-align:center;padding:30px 20px 28px;font-size:12px;line-height:1.8;color:#5a6d72}
@media(max-width:760px){.site-header{padding:18px 20px}.brand{font-size:16px}.brand>span{font-size:27px}.demo-badge{font-size:12px}main{margin:4px auto 0;padding:0 16px;max-width:520px}.story{grid-template-columns:1fr;border-radius:22px}.illustration{min-height:0;aspect-ratio:1.6}.illustration img{object-position:center 54%}.date{top:17px;left:17px;width:68px;padding:5px 4px 10px;font-size:12px;border-radius:5px 5px 26px 26px}.date-number{font-size:35px}.image-note{bottom:11px;left:15px;font-size:11px}.story-content{padding:25px 23px 27px}.intro{font-size:13px;margin-bottom:12px}h1{font-size:29px;letter-spacing:-.8px;margin-bottom:13px}.description{font-size:16px;margin-bottom:20px}.play-button{font-size:17px;min-height:62px;padding:16px}.activity{margin-top:23px}.closing{font-size:13px;margin-top:21px}footer{padding-top:23px}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:350px){.site-header{padding-left:16px;padding-right:16px}.brand{font-size:14px}.story-content{padding:23px 18px}h1{font-size:26px}.play-button{font-size:16px;padding-inline:12px}}