#holy{width:min(1060px,calc(100% - 24px));max-height:calc(100svh - 24px);overflow-y:auto;background:#f5ead0;color:#23463d;border:1px solid #c8aa67;border-radius:20px}#holy::backdrop{background:#082b26d9;backdrop-filter:blur(5px)}.holy-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;background:#163e36;color:#f7e8bf;position:sticky;top:0;z-index:4;font:12px system-ui;letter-spacing:.04em}.holy-nav button{color:inherit;background:none;border:1px solid #d8c38a60;border-radius:24px;padding:10px 14px;font:14px system-ui;min-height:44px}.holy-nav>span{font:18px Georgia}.holy-content{padding:28px 36px;background:radial-gradient(ellipse at top,#fff9e8,#ecdfbb)}.school-heading{text-align:center;margin-bottom:22px}.school-heading h1{font-size:38px;margin:8px 0 12px}.school-heading>p:not(.eyebrow){font:16px/1.5 system-ui;margin:0;color:#587061}.school-heading .eyebrow,.friendship .eyebrow{color:#927438}.school-layout{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center}.teacher{position:relative;text-align:center}.teacher img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:90px 90px 20px 20px;border:4px solid #e5d2a7;box-shadow:0 8px 28px #5a46281a}.teacher .name-badge{position:relative;margin-top:-23px}.teacher>p{font:italic 18px/1.4 Georgia;color:#4d6050}.children{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.child{position:relative;padding:0 0 12px;border:1px solid #a78a4c60;background:#fff7e4;border-radius:18px;overflow:hidden;color:#27483d;box-shadow:0 5px 16px #5d472016;transition:transform .15s,box-shadow .15s}.child:hover{transform:translateY(-4px);box-shadow:0 10px 24px #5d472033}.child:focus-visible{outline:3px solid #237260;outline-offset:3px}.portrait{display:block;aspect-ratio:1;background-size:300% 200%;background-repeat:no-repeat}.name-badge{display:inline-block;position:relative;background:#173f36;color:#fff0be;border:1px solid #ac945c;border-radius:20px;padding:7px 16px;font:600 14px system-ui;box-shadow:0 3px 10px #183b2f20}.child .name-badge{margin-top:-16px}.save-note{font:12px/1.5 system-ui;color:#69715d;text-align:center;margin:22px 0 0}.conversation{display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:center;max-width:740px;margin:30px auto}.speech{background:#fff9e9;padding:30px;border:1px solid #baa36d70;border-radius:24px;box-shadow:0 12px 35px #634d2315}.speech>p{font:28px/1.4 Georgia;margin:0 0 18px}.speech>span{font:15px/1.5 system-ui;color:#6c755f}.story-primary{display:block;margin:24px auto 0;min-height:48px;background:#1b5244;color:#fff0bb;border:1px solid #799774;border-radius:26px;padding:13px 28px;font:600 16px system-ui}.reset-actions{display:flex;gap:12px;flex-wrap:wrap}.reset-confirm{border:1px solid #d6b976;border-radius:25px;background:none;color:#ffe6ad;padding:12px 22px;font:600 14px system-ui}.memory-complete:before{content:'✓';position:absolute;bottom:6%;right:12%;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#194c3b;color:#ffe2a0;border:2px solid #ffe2a0;font:bold 20px system-ui}.memory-next{border:2px solid #ffe29a88;box-shadow:0 0 20px #ffdf8e55}.friendship-art{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:14px;background:#e7d9b0 url('assets/friendship.png') center/cover}.friendship-art:before{content:'';position:absolute;inset:0;background:#eeddbdcc;backdrop-filter:blur(16px)}.sprite-pair{position:absolute;inset:5% 0;animation:float-together 8s ease-in-out forwards}.friend-sprite{position:absolute;top:0;width:50%;height:100%;background-image:url('assets/friendship-sprites.png');background-size:200% 100%;background-repeat:no-repeat}.friend-sprite.agy{left:0;background-position:left center;animation:agy-arrives 1.7s ease-out forwards}.friend-sprite.john{right:0;background-position:right center;animation:john-arrives 1.7s ease-out forwards}.friend-name{position:absolute;bottom:6%;background:#133f36;color:#ffedb5;border:1px solid #e0c57b;border-radius:22px;padding:7px 18px;font:600 14px system-ui}.agy-name{left:21%}.john-name{right:20%}.high-five-spark{position:absolute;top:6%;left:49%;font-size:48px;color:#fff6be;opacity:0;animation:high-five 8s ease-out forwards}.friendship-copy{text-align:center;padding:28px 0 4px}.friendship-copy h1{font-size:36px}.friendship-copy>p:not(.eyebrow):not(.save-note){font:16px/1.5 system-ui;color:#5d6f59}.sound-button{position:absolute;top:12px;right:12px;z-index:3;border:1px solid #bca477;background:#fff6deed;color:#224739;border-radius:22px;padding:10px 14px;font:13px system-ui;min-height:44px}.sound-caption{font:12px system-ui;color:#69715d}.friendship-copy .story-primary{animation:reveal-return 8s linear forwards}@keyframes agy-arrives{from{transform:translateX(-120%)}to{transform:translateX(7%)}}@keyframes john-arrives{from{transform:translateX(120%)}to{transform:translateX(-7%)}}@keyframes float-together{0%,58.75%{transform:translateY(0);opacity:1}82%{transform:translateY(-70%);opacity:.8}100%{transform:translateY(-125%);opacity:0}}@keyframes high-five{0%,20%{opacity:0;transform:scale(.3)}21.25%,27%{opacity:1;transform:scale(1.15)}32%,100%{opacity:0;transform:scale(1.8)}}@keyframes reveal-return{0%,90%{opacity:.6}100%{opacity:1}}@media(max-width:700px){.holy-content{padding:24px 16px}.holy-nav{padding:10px 12px}.holy-nav>span{display:none}.school-heading h1{font-size:30px}.school-layout{grid-template-columns:1fr;gap:18px}.school-layout>.teacher{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:center;text-align:left}.school-layout>.teacher img{width:74px;border-radius:50%;aspect-ratio:1}.school-layout>.teacher .name-badge{position:absolute;left:83px;top:0;margin:0;font-size:12px}.school-layout>.teacher>p{grid-column:2;margin:26px 0 0;font-size:16px}.children{gap:10px}.child{border-radius:12px}.name-badge{font-size:12px;padding:6px 10px}.conversation{grid-template-columns:100px 1fr;gap:14px;margin:20px auto}.conversation .teacher .name-badge{font-size:10px;padding:5px 8px}.speech{padding:18px}.speech>p{font-size:22px}.friendship-copy h1{font-size:29px}.friend-name{padding:5px 10px;font-size:11px}.sound-button{top:8px;right:8px;padding:7px 10px}.high-five-spark{font-size:28px}}@media(prefers-reduced-motion:reduce){.sprite-pair,.friend-sprite,.high-five-spark,.friendship-copy .story-primary{animation:none!important}.friend-sprite.agy{transform:translateX(7%)}.friend-sprite.john{transform:translateX(-7%)}.high-five-spark{opacity:1}.friendship-copy .story-primary{opacity:1}}

.holy-content{position:relative}.holy-content:has(.player-view){padding-bottom:62px}.player-view{position:absolute;bottom:0;left:8px;width:100px;pointer-events:none;text-align:center}.player-view img{display:block;width:100%;height:110px;object-fit:contain;object-position:bottom}.player-view span{display:block;background:#173f36;color:#ffedb5;border-radius:12px 12px 0 0;padding:4px 8px;font:11px system-ui}.holy-content:has(.player-view) .save-note{margin-bottom:8px}@media(max-width:700px){.player-view{width:64px;left:4px}.player-view img{height:76px}.player-view span{font-size:9px}.holy-content:has(.player-view){padding-bottom:65px}}

.player-view{pointer-events:auto}.player-trigger{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;border-radius:18px;min-height:44px}.player-trigger:disabled{cursor:default}.player-speech{position:absolute;bottom:calc(100% + 10px);left:8px;width:250px;max-width:calc(100vw - 64px);padding:20px 28px 18px 18px;text-align:left;background:#fff9e9;color:#284b3f;border:1px solid #b59a5f;border-radius:18px;box-shadow:0 8px 26px #57452124;z-index:5}.player-speech:after{content:"";position:absolute;bottom:-9px;left:22px;width:16px;height:16px;background:#fff9e9;border-right:1px solid #b59a5f;border-bottom:1px solid #b59a5f;transform:rotate(45deg)}.player-speech[hidden]{display:none}.player-line{margin:0;font:18px/1.45 Georgia}.player-speech-dismiss{position:absolute;top:2px;right:2px;width:32px;height:32px;border:0;background:transparent;color:#375648;font-size:22px}.player-trigger:hover{filter:brightness(1.08)}
/* Keep the full intermission and its caption together, including short screens. */
.holy-content:has(.friendship){padding-top:18px;padding-bottom:18px}.friendship-art{width:min(100%,720px,calc(max(120px,100svh - 380px) * 1.5));margin-inline:auto}.friendship-copy{padding:18px 0 0}.friendship-copy .eyebrow{margin-bottom:8px}.friendship-copy h1{margin-bottom:8px}.friendship-copy>p:not(.eyebrow):not(.save-note){margin:8px 0}.friendship-copy .story-primary{margin-top:14px}.friendship-copy .save-note{margin-top:12px}