/* Prototype 3 — Motion Webtoon. One column, white gutters that darken with the dread. */
:root{
  --col:min(100vw,720px);--u:calc(var(--col) / 100);--bar:52px;--ink:#171312;--crimson:#a3242f;--gold:#c8a25a;
  --t-cream:#fbf7f1;--t-linen:#f3ede5;--t-ash:#e4ddd5;--t-dusk:#2a2321;--t-night:#121010;--t-void:#090808;--t-day:#eef1f3;--t-mist:#d9dfe4;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:#0e0c0b;-webkit-text-size-adjust:100%;scroll-behavior:auto}
body.mw{margin:0;min-height:100vh;background:#0e0c0b;color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* desktop ambilight: the active panel, blurred, behind the column */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0e0c0b}
.ambient-layer{position:absolute;inset:-12%;background:center/cover no-repeat;filter:blur(56px) saturate(1.3) brightness(.5);opacity:0;transition:opacity 1.8s ease}
.ambient-layer.on{opacity:1}
@media (max-width:760px){.ambient{display:none}}

/* the strip */
.strip{position:relative;z-index:1;width:var(--col);margin:0 auto;background:var(--tone,var(--t-cream));transition:background-color 1.6s ease;container-type:inline-size;overflow-x:clip;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 90px rgba(0,0,0,.55)}
body[data-tone=cream] .strip{--tone:var(--t-cream)}
body[data-tone=linen] .strip{--tone:var(--t-linen)}
body[data-tone=ash] .strip{--tone:var(--t-ash)}
body[data-tone=dusk] .strip{--tone:var(--t-dusk)}
body[data-tone=night] .strip{--tone:var(--t-night)}
body[data-tone=void] .strip{--tone:var(--t-void)}
body[data-tone=day] .strip{--tone:var(--t-day)}
body[data-tone=mist] .strip{--tone:var(--t-mist)}

/* top chrome */
.progress{position:fixed;top:0;left:50%;width:var(--col);height:3px;transform:translateX(-50%);z-index:45;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--crimson));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.mw-bar{position:fixed;top:0;left:50%;width:var(--col);height:var(--bar);transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:8px;padding:0 10px 0 6px;color:#f4ece4;background:rgba(17,13,12,.78);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:transform .35s cubic-bezier(.3,.7,.2,1),background-color .4s,color .4s}
.mw-bar.hide{transform:translate(-50%,-105%)}
.mw-bar.hide:focus-within{transform:translateX(-50%)}
.on-cover .mw-bar{background:rgba(251,247,241,0);color:#2a201c;-webkit-backdrop-filter:none;backdrop-filter:none}
.mw-back{display:grid;place-items:center;width:40px;height:40px;font-size:28px;line-height:1;text-decoration:none;border-radius:50%}
.mw-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.mw-series{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-ep{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.on-cover .mw-title{opacity:0;transition:opacity .3s}
.mw-chip{height:32px;padding:0 13px;border-radius:99px;font-size:13px;font-weight:650;background:rgba(255,255,255,.12);white-space:nowrap}
.on-cover .mw-chip{background:rgba(42,32,28,.08)}
.mw-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%}
.mw-icon svg{width:22px;height:22px}
.mw-icon .x{display:none}.mw-icon.off .waves{display:none}.mw-icon.off .x{display:inline}
.mw-steps{display:flex;align-items:center;flex:none;border-radius:12px;background:rgba(255,255,255,.07)}   /* previous / next episode, from series.js */
.on-cover .mw-steps{background:rgba(42,32,28,.06)}
.mw-step{display:grid;place-items:center;width:34px;height:40px;border-radius:10px;text-decoration:none}
.mw-step svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.mw-step.off{opacity:.28}
a.mw-step:hover{background:rgba(255,255,255,.12)}
.on-cover a.mw-step:hover{background:rgba(42,32,28,.08)}
@media (max-width:420px){.mw-chip{padding:0 11px}.mw-bar{gap:4px}.mw-step{width:32px}.started .mw-chip{display:none}}   /* once reading, the floating button is Watch/Pause */

/* cover */
.cover{position:relative;height:100svh;min-height:560px;max-height:1500px;overflow:hidden;background:#efe7dc;isolation:isolate}
.cover{--cw:min(100%,calc(100svh * 9 / 16))}
.cover:before{content:"";position:absolute;inset:-40px;z-index:0;background:var(--cover-art,url("stories/family-chat/episode-01/motion-webtoon/posters/cover.webp")) center/cover;filter:blur(30px) brightness(.85) saturate(1.1)}
.cover .media{position:absolute;top:0;bottom:0;left:50%;width:var(--cw);height:100%;transform:translateX(-50%);object-fit:cover;object-position:60% 50%;z-index:0}
.cover video{opacity:0;transition:opacity .6s}.cover video.live{opacity:1}
.cover:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(250,245,238,.55) 0%,rgba(250,245,238,0) 26%,rgba(15,11,10,0) 52%,rgba(15,11,10,.72) 76%,rgba(12,9,8,.95) 100%)}
.cover-title{position:absolute;z-index:2;left:0;right:0;top:calc(var(--bar) + 2.2svh);text-align:center;padding:0 calc(6 * var(--u));animation:rise 1.2s .15s both cubic-bezier(.2,.7,.2,1)}
.kicker{display:inline-flex;align-items:center;gap:10px;font:700 10.5px/1 system-ui,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#6e5c53;margin:0 0 12px}
.kicker:before,.kicker:after{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.logo{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-style:italic;font-size:clamp(36px,min(calc(11.4 * var(--u)),6.3svh),80px);line-height:.9;letter-spacing:-.015em;color:#211816;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.logo span{display:block}
.logo .ahead{color:var(--crimson)}
.cover-foot{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 calc(7 * var(--u)) calc(26px + env(safe-area-inset-bottom));text-align:center;color:#f6eee7;animation:rise 1.2s .45s both cubic-bezier(.2,.7,.2,1)}
.ep-tag{display:inline-block;font:700 11px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#f0d9a8;margin-bottom:10px;text-shadow:0 1px 8px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.6)}
.cover-hook{text-wrap:balance;margin:0 auto 20px;max-width:30ch;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(21px,calc(5.6 * var(--u)),31px);line-height:1.18;font-weight:500}
.cover-hook em{color:#f1b9b0}
.cover-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:99px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s,background-color .2s}
.btn:active{transform:scale(.97)}
.btn.light{background:#f6eee7;color:#1b1311}
.btn.ghost-light{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.cover-note{margin:14px 0 0;font-size:12.5px;color:rgba(246,238,231,.72)}
.cover-note button{text-decoration:underline;text-underline-offset:3px}
.scroll-cue{display:block;margin:12px auto 0;width:22px;height:22px;border-right:2px solid rgba(255,255,255,.55);border-bottom:2px solid rgba(255,255,255,.55);transform:rotate(45deg);animation:cue 2s infinite}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cue{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(6px) rotate(45deg);opacity:1}}

/* blocks */
.block{position:relative}
.gutter{height:calc(var(--h) * var(--u))}
.panel{position:relative;margin:0 auto;width:calc(var(--w,100) * var(--u))}
.panel[data-align=left]{margin-left:calc(5 * var(--u))}.panel[data-align=right]{margin-right:calc(5 * var(--u))}
.art{position:relative;overflow:hidden;background:#d8cfc4;width:100%}
.panel.inset .art{box-shadow:0 0 0 2px #151010}
.panel.inset.soft .art{box-shadow:0 0 0 1.5px #151010,0 14px 40px rgba(0,0,0,.18)}
.art>.media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.art>.media.cropped{inset:auto;object-fit:fill}
.art>video.media{opacity:0;transition:opacity .3s}
.art>video.media.live{opacity:1}
.art[data-grade=cool]>.media{filter:saturate(.85) brightness(.96) hue-rotate(-4deg)}
.art[data-grade=dark]>.media{filter:brightness(.55) saturate(.8) contrast(1.05)}
.art[data-grade=night]>.media{filter:brightness(.34) saturate(.6) contrast(1.1)}
.art[data-grade=dark]:after,.art[data-grade=night]:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(0,0,0,.55) 100%);z-index:3}

/* entrances, keyed to panel intent */
.js .panel{opacity:0;transform:translateY(26px)}
.js .panel.in{opacity:1;transform:none;transition:opacity .85s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js .panel[data-enter=cut]{transform:none}
.js .panel[data-enter=cut].in{transition:none}
.js .panel[data-enter=impact]{transform:scale(1.035)}
.js .panel[data-enter=impact].in{transform:none;transition:opacity .12s linear,transform .5s cubic-bezier(.2,1.5,.35,1)}
.js .panel[data-enter=wipe]{opacity:1;transform:none}
.js .panel[data-enter=wipe] .art{clip-path:inset(0 0 100% 0)}
.js .panel[data-enter=wipe].in .art{clip-path:inset(0 0 0 0);transition:clip-path 1.3s cubic-bezier(.65,0,.2,1)}
.js .panel[data-enter=slide]{transform:translateX(7%)}
.js .panel[data-enter=focus]{transform:scale(1.02);filter:blur(7px)}
.js .panel[data-enter=focus].in{filter:none;transition:opacity .9s,transform 1.3s cubic-bezier(.2,.7,.2,1),filter 1.1s}
.js .panel[data-enter=slow].in{transition:opacity 1.8s ease,transform 2s cubic-bezier(.2,.7,.2,1)}
.js .panel.in[data-enter]{opacity:1;transform:none}
.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
.thump{animation:thump .9s ease-out}
.flash:before{content:"";position:absolute;inset:0;z-index:5;background:#fff;animation:flash .6s ease-out forwards;pointer-events:none}
@keyframes shake{10%,90%{transform:translate(-1px,0)}20%,80%{transform:translate(3px,1px)}30%,50%,70%{transform:translate(-5px,-1px)}40%,60%{transform:translate(5px,1px)}}
@keyframes thump{0%{transform:scale(1)}12%{transform:scale(1.025)}24%{transform:scale(1)}36%{transform:scale(1.018)}60%,100%{transform:scale(1)}}
@keyframes flash{from{opacity:.85}to{opacity:0}}

/* lettering */
.bubble{position:absolute;z-index:6;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--bw) * 1%);display:flex;pointer-events:none}
.bub{position:relative;width:fit-content;max-width:100%}
.bub svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.bub .copy{position:relative;z-index:1;display:block;text-wrap:balance;white-space:pre-line}
.bubble.speech .copy{font:600 clamp(15px,calc(4.1 * var(--u)),23px)/1.24 "Shantell Sans","Comic Sans MS",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.012em;text-align:center;color:#141010;padding:.95em 1.45em}
.bubble.speech path{fill:#fff;stroke:#161111;stroke-width:2.2;stroke-linejoin:round}
.bubble.thought .copy{font:italic 500 clamp(15px,calc(4.05 * var(--u)),22px)/1.3 "Shantell Sans","Comic Sans MS",system-ui,sans-serif;color:#3a2e29;padding:.7em 1.05em;text-align:left}
.bubble.thought rect{fill:#fffdf8;stroke:#a08f82;stroke-width:1.4;filter:drop-shadow(0 3px 8px rgba(60,40,30,.12))}
.bubble.caption .copy{font:600 clamp(15px,calc(3.85 * var(--u)),20px)/1.3 "Shantell Sans",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#f7f1ea;padding:.8em 1.2em}
.bubble.caption rect{fill:#141111;stroke:#141111}
.js .bubble .bub{opacity:0;transform:scale(.62)}
.js .bubble.on .bub{opacity:1;transform:none;transition:opacity .16s ease,transform .42s cubic-bezier(.2,1.55,.35,1)}
.js .bubble.thought .bub,.js .bubble.caption .bub{transform:translateY(10px) scale(1)}
.js .bubble.thought.on .bub,.js .bubble.caption.on .bub{transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.bubble.speaking .bub{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.018)}}
body[data-tone=dusk] .bubble.thought rect,body[data-tone=night] .bubble.thought rect,body[data-tone=void] .bubble.thought rect{fill:#f6efe6;stroke:#f6efe6}
body[data-tone=dusk] .gutter .bubble.caption rect,body[data-tone=night] .gutter .bubble.caption rect{fill:#f6efe6}
body[data-tone=dusk] .gutter .bubble.caption .copy,body[data-tone=night] .gutter .bubble.caption .copy{color:#141010}

.sfx{position:absolute;z-index:7;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:rotate(var(--rot));white-space:nowrap;pointer-events:none;font:400 clamp(40px,calc(12.5 * var(--u)),86px)/.9 Bangers,Impact,"Arial Black",sans-serif;letter-spacing:.035em;color:#2a1f1b;-webkit-text-stroke:.085em #fff;paint-order:stroke fill;text-shadow:.04em .06em 0 rgba(60,40,30,.18)}
.sfx span{display:inline-block;margin-right:.18em}
.js .sfx span{opacity:0}
.sfx.on span{animation:sfx-pop .44s cubic-bezier(.2,1.7,.4,1) both;animation-delay:var(--d,0s)}
.sfx.buzz{font-size:clamp(22px,calc(6.4 * var(--u)),40px);color:#2f2a28;letter-spacing:.08em}
.sfx.buzz.on span{animation:sfx-pop .3s both,buzz .09s linear .3s 8}
.sfx.beat{color:#8e1b26;font-size:clamp(30px,calc(9 * var(--u)),60px)}
.sfx.beat.on span{animation:sfx-pop .3s both var(--d),thump-l .8s ease-out calc(var(--d) + .3s)}
.sfx.clink{font-size:clamp(20px,calc(5.4 * var(--u)),34px);color:#5b4a3f}
.sfx.knock{color:#2e2220}
.sfx.crash{font-size:clamp(54px,calc(17 * var(--u)),120px);color:#a3242f;-webkit-text-stroke:.07em #fff;letter-spacing:.02em}
.sfx.crash.on span{animation:sfx-pop .32s cubic-bezier(.2,1.8,.4,1) both,buzz .07s linear .32s 5}
.sfx.swip{font-size:clamp(26px,calc(7.5 * var(--u)),48px);color:#3b302b;font-style:italic;letter-spacing:.12em}
@keyframes sfx-pop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}60%{opacity:1;transform:scale(1.14) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes buzz{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}}
@keyframes thump-l{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
body[data-tone=dusk] .sfx,body[data-tone=night] .sfx,body[data-tone=void] .sfx{color:#f2e8de;-webkit-text-stroke-color:#120e0d}

/* lock-screen notification in the gutter */
.notify{position:absolute;z-index:6;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--bw) * 1%);display:grid;grid-template-columns:auto 1fr;gap:3px 11px;align-items:center;padding:12px 14px 13px;border-radius:18px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(30,20,15,.2),0 0 0 1px rgba(0,0,0,.05);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1b1d20}
.js .notify{opacity:0;transform:translateY(-16px) scale(.96)}
.js .notify.on{opacity:1;transform:none;transition:opacity .3s,transform .55s cubic-bezier(.2,1.3,.35,1)}
.nt-icon{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:linear-gradient(140deg,#c9a45c,#a3242f);color:#fff;font-weight:800;font-size:18px}
.nt-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#6a6e73}
.nt-meta b{letter-spacing:.08em;color:#2a2c2f;font-size:11.5px}
.nt-when{color:var(--crimson);font-weight:700}
.nt-body{font-size:clamp(14px,calc(3.7 * var(--u)),17px);line-height:1.3}

/* Explicit per-card opt-in. Unmarked notifications keep the original rules above. */
.js .notify.card-cartoon{transform:translateY(26px) scale(.84);transform-origin:50% 85%}
.js .notify.card-cartoon.on{transition:none;animation:card-arrive 480ms both}
.card-cartoon .card-word{display:inline-block}
.card-cartoon .card-kittens{display:flex;gap:16px;padding-top:9px}
.card-cartoon .card-kitten{display:block;transform-origin:50% 90%;line-height:0}
.js .card-cartoon.on .nt-meta{animation:card-copy 180ms 100ms both}
.js .card-cartoon.on .card-word{animation:card-copy 220ms var(--card-line-delay,180ms) both}
.js .card-cartoon.on .nt-photo,.js .card-cartoon.on .nt-fig{animation:card-copy 220ms 400ms both}
.js .card-cartoon.on .nt-icon,.js .card-cartoon.on .card-kitten{animation:card-icon 340ms var(--card-icon-delay,300ms) both}
.card-cartoon .card-ear{transform-box:fill-box;transform-origin:50% 100%}
.js .card-cartoon.on .card-ear{animation:card-ear 240ms calc(var(--card-icon-delay) + 250ms) both}
.js .card-cartoon.on .card-ear-right{animation-direction:reverse}
@keyframes card-arrive{0%{opacity:0;transform:translateY(26px) scale(.84)}55%{opacity:1;transform:translateY(-5px) scale(1.035)}78%{transform:translateY(2px) scale(.985)}100%{opacity:1;transform:none}}
@keyframes card-copy{from{opacity:0}to{opacity:1}}
@keyframes card-icon{0%{opacity:0;transform:translateY(5px) scale(.3)}60%{opacity:1;transform:translateY(-3px) scale(1.12)}80%{transform:scale(.95)}100%{opacity:1;transform:none}}
@keyframes card-ear{0%,100%{transform:rotate(0)}30%{transform:rotate(-13deg)}65%{transform:rotate(9deg)}}
.js .notify.card-cartoon.on.card-settled,.js .notify.card-cartoon.on.card-settled *{animation:none!important;transition:none!important;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .notify.card-cartoon.on,.js .notify.card-cartoon.on *{animation:none!important;transition:none!important;opacity:1;transform:none}
}

/* phone UI composited onto the blank screens */
.phone-ui{position:absolute;z-index:4;display:flex;flex-direction:column;overflow:hidden;border-radius:7%/4%;background:#fbfcfd;color:#1c2024;font:500 clamp(12px,calc(4.15 * var(--u)),21px)/1.32 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;transform-origin:50% 50%}
.ph-head{display:flex;align-items:center;gap:.5em;padding:2.3em .8em .65em;border-bottom:1px solid rgba(0,0,0,.08);background:transparent}
.ph-back{font-size:1.6em;line-height:.8;color:#2b7de9;margin-right:-.1em}
.ph-avatar{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:linear-gradient(140deg,#c9a45c,#a3242f);color:#fff;font-weight:800;font-size:.85em;flex:none}
.ph-name{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;line-height:1.15}
.ph-name b{font-size:.86em;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-name:has(.ph-acct) small{display:none}   /* the account chip replaces the member list (which only ever showed "Mom, D…") */
.ph-name small{font-size:.66em;color:#666d74;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* account chip: this handset reads LIN FAMILY through Grandma's seat (series plant) */
.ph-acct{align-self:flex-start;margin-top:.22em;flex:none;display:flex;align-items:center;gap:.38em;padding:.2em .6em .2em .36em;border-radius:99px;background:#eaf3ee;box-shadow:inset 0 0 0 1px #b9d6c6;color:#2d5f4a;font-size:max(10px,.6em);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ph-acct:before{content:"";width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9fbf1 0 12%,#8fd1ae 30%,#3f9a72 70%,#2a6f52);box-shadow:0 0 0 1.5px #a3242f}
.ph-list{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.65em;padding:.9em .7em .7em;overflow:hidden}
.ph-item{display:none}
.ph-item.on{display:flex}
.ph-item.on:not(.static){animation:msg-in .42s cubic-bezier(.2,1.35,.35,1) both}
.ph-item.static{opacity:.55}
@keyframes msg-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.ph-msg{gap:.45em;align-items:flex-end}
.ph-av{display:grid;place-items:center;flex:none;width:1.75em;height:1.75em;border-radius:50%;font-size:.78em;font-weight:800;color:#fff;background:#7b8794}
.ph-msg[data-who=Mother] .ph-av{background:#7d2633}
.ph-msg[data-who=Yuting] .ph-av{background:#d08a4e}
.ph-msg[data-who=Jun] .ph-av{background:#2c3442}
.ph-msg[data-who=Dad] .ph-av{background:#5a4a3a}
a.next-card{color:inherit;text-decoration:none;transition:background .2s}
a.next-card:hover{background:rgba(255,255,255,.1)}
a.next-card:focus-visible{outline:2px solid #c8a25a;outline-offset:3px}
.ph-col{display:flex;flex-direction:column;min-width:0}
.ph-who{font-size:max(11px,.68em);color:#5d646c;margin:0 0 .18em .3em}
/* countdown chip on a forecast message ("in 45 min") and system lines (removals) */
.ph-when{display:inline-block;white-space:nowrap;margin-left:.45em;padding:.08em .5em;border-radius:99px;background:rgba(163,36,47,.1);color:#a3242f;font-weight:800;letter-spacing:.02em}
.ph-sys{align-self:center;max-width:92%;padding:.32em .85em;border-radius:99px;background:rgba(20,24,28,.06);color:#5b6168;font-size:max(12px,.74em);font-weight:600;text-align:center}
.ph-txt{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);border-radius:1.05em 1.05em 1.05em .3em;padding:.5em .78em;font-size:.95em}
.ph-date{align-self:center;padding:.38em .95em;border-radius:99px;background:var(--crimson);color:#fff;font-weight:800;letter-spacing:.2em;font-size:.66em;position:relative}
.ph-item.ph-date.on:not(.static){animation:glitch .9s steps(2) both}
@keyframes glitch{0%{opacity:0;transform:translateX(-6px);text-shadow:3px 0 #00e5ff,-3px 0 #ff2d55}20%{opacity:1;transform:translateX(5px)}40%{transform:translateX(-3px);text-shadow:-2px 0 #00e5ff,2px 0 #ff2d55}60%{transform:translateX(2px)}100%{transform:none;text-shadow:none}}
.ph-photo{flex-direction:column;align-self:flex-start;max-width:84%}
.ph-frame{padding:.32em;background:#111;border-radius:.5em;box-shadow:inset 0 0 0 1px #c8a25a}
.ph-frame img{display:block;width:100%;aspect-ratio:3/3.4;object-fit:cover;object-position:50% 18%;filter:grayscale(.3) contrast(1.05);border-radius:.25em}
.ph-cap{margin:.4em 0 0 .2em;font-size:.86em;color:#7a2a31;font-weight:700}
.phone-ui.dim{filter:brightness(.92)}
.ph-photo.erased,.ph-group.erased{animation:erase 1.4s steps(1) forwards}
.ph-group{display:flex;flex-direction:column;gap:.65em}
@keyframes erase{0%{filter:none}8%{filter:hue-rotate(90deg) saturate(3);transform:translateX(-4px);clip-path:inset(0 0 40% 0)}16%{transform:translateX(5px);clip-path:inset(30% 0 0 0)}24%{filter:invert(1);transform:none;clip-path:inset(10% 0 55% 0)}34%{filter:none;opacity:.6;clip-path:inset(0)}46%{opacity:.25;transform:skewX(8deg)}60%,100%{opacity:0;transform:scaleY(.02);max-height:0;margin:0;padding:0}}
/* lock screen variant (top-down phone): black until it wakes */
.phone-ui.lock{background:#030405;color:#eef2f8;text-align:center;justify-content:flex-start;padding-top:12%;border-radius:9%/5%;transition:box-shadow .9s ease}
.phone-ui.lock:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,#24304a 0%,#0b0f18 58%,#05060a 100%);opacity:0;transition:opacity .9s ease}
.phone-ui.lock>*{position:relative;z-index:1;opacity:0;transition:opacity .8s ease .15s}
.phone-ui.lock.awake{box-shadow:0 0 calc(10 * var(--u)) calc(2 * var(--u)) rgba(130,165,255,.26)}
.phone-ui.lock.awake:before,.phone-ui.lock.awake>*{opacity:1}
.lock-time{font:300 clamp(36px,calc(13 * var(--u)),78px)/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.02em}
.lock-date{font-size:.9em;opacity:.75;margin-top:.35em;letter-spacing:.06em}
.phone-ui.lock .ph-list{justify-content:flex-start;padding:16% .7em 1em;gap:.7em}
.ph-notif{flex-direction:column;align-items:stretch;text-align:left;padding:.75em .85em;border-radius:1em;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nt-top{display:flex;justify-content:space-between;font-size:.66em;letter-spacing:.1em;opacity:.8}
.nt-top .nt-when{color:#ff8f8f}
.ph-notif .nt-body{font-size:1.28em;margin-top:.3em;font-weight:650;letter-spacing:-.01em}
.ph-typing{align-items:center;gap:.5em;font-size:.95em;opacity:.85;padding-left:.4em}
.ph-typing .ph-who{margin:0;color:inherit}
.dots{letter-spacing:.15em;animation:dots 1.2s infinite}
@keyframes dots{50%{opacity:.25}}
.art.buzzing{animation:phone-buzz .09s linear 9}
@keyframes phone-buzz{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px) rotate(-.3deg)}50%{transform:translate(2px,0)}75%{transform:translate(-1px,-1px) rotate(.3deg)}}

/* memorial portrait */
.panel.memorial{padding:calc(2.6 * var(--u));background:#0c0c0c;box-shadow:0 0 0 1px #000,0 22px 50px rgba(0,0,0,.35)}
.panel.memorial:before{content:"";position:absolute;inset:calc(1.3 * var(--u));border:1px solid rgba(200,162,90,.8);z-index:4;pointer-events:none}
.panel.memorial:after{content:"";position:absolute;top:0;right:0;width:24%;aspect-ratio:1;z-index:5;background:linear-gradient(45deg,transparent 47%,#050505 47.5%,#050505 62%,transparent 62.5%);pointer-events:none}
.panel .art>img.media{transform:scale(var(--kb,1))}   /* Ken Burns on any still flagged kenburns (the engine sets --kb) */
.panel.memorial .media{transform:scale(var(--kb,1));transform-origin:50% 30%;filter:grayscale(.42) contrast(1.06) brightness(.97)}

/* scroll-scrubbed close-up */
.scrub{--ph:min(calc(100 * var(--u) * 16 / 9),calc(100svh - var(--bar) - 76px));height:calc(var(--ph) + var(--len) * 100svh)}
.scrub-stick{position:sticky;top:calc((100svh - var(--ph)) / 2 + var(--bar) / 2)}
.scrub .panel{width:calc(var(--ph) * 9 / 16);max-width:calc(100 * var(--u))}
.scrub-hint{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);font:700 13px/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff4ea;background:rgba(20,14,12,.72);border:1px solid rgba(255,236,220,.35);border-radius:999px;padding:8px 14px 8px 16px;white-space:nowrap;transition:opacity .5s;animation:hint-nudge 1.6s ease-in-out infinite}
.scrub-hint:after{content:" ↓";letter-spacing:0}
@keyframes hint-nudge{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)}}
@media (prefers-reduced-motion:reduce){.scrub-hint{animation:none}}
.scrub-hint.gone{opacity:0}
.scrub .art:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(0,0,0,calc(.2 + var(--sp,0) * .5)) 100%)}

/* end */
.end{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:calc(16 * var(--u)) calc(7 * var(--u)) calc(90px + env(safe-area-inset-bottom));color:#eee5dc;text-align:center}
.end-inner{width:100%;max-width:560px;margin:auto 0}
.end-kicker{font:700 11px/1 system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#a99a8f;margin:0 0 14px}
.tbc{margin:0 0 34px;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(40px,calc(12 * var(--u)),78px);line-height:.95;color:#f5ece3}
.next-card{display:flex;gap:16px;align-items:center;text-align:left;padding:12px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);margin-bottom:22px}
.next-card img{width:84px;height:84px;object-fit:cover;object-position:50% 25%;border-radius:10px;filter:grayscale(.2)}
.next-card small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#c8a25a}
.next-card strong{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:600;line-height:1.1;margin:3px 0}
.next-card span{font-size:12.5px;color:#a99a8f}
.end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* episode strip: the last thing on every episode page (WEBTOON's episode carousel) */
.ep-strip{width:100%;margin-top:calc(16 * var(--u));padding-top:20px;border-top:1px solid rgba(255,255,255,.1);text-align:left}
.eps-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px}
.eps-title{margin:0;font:700 11px/1 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#a99a8f}
.eps-all{display:inline-block;padding:8px 0;margin:-8px 0;font-size:13px;font-weight:650;color:#e7c98f;text-decoration:none}
.eps-all:after{content:" ›"}
.eps-all:hover{text-decoration:underline;text-underline-offset:3px}
.eps-wrap{display:flex;align-items:center;gap:6px}
.eps-row{list-style:none;margin:0 -6px;padding:6px;display:flex;gap:12px;width:max-content;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.eps-row::-webkit-scrollbar{display:none}
.eps-wrap.over .eps-row{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.eps-row li{flex:none;scroll-snap-align:center}
.eps-tile{display:block;width:clamp(92px,calc(22 * var(--u)),128px);color:inherit;text-decoration:none;border-radius:10px}
.eps-thumb{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#231d1b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.eps-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a.eps-tile:hover .eps-thumb img{transform:scale(1.05)}
.eps-thumb.ph{background:linear-gradient(150deg,#2c2422,#151110)}
.eps-thumb.ph:after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border:2px solid rgba(231,201,143,.55);border-radius:50%;background:linear-gradient(rgba(231,201,143,.55),rgba(231,201,143,.55)) 50% 30%/2px 7px no-repeat,linear-gradient(rgba(231,201,143,.55),rgba(231,201,143,.55)) 68% 56%/6px 2px no-repeat}
.eps-tile.current .eps-thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2.5px #c8a25a}
.eps-label{display:block;margin-top:8px;font-size:13px;font-weight:700;color:#eee5dc}
.eps-note{display:block;margin-top:1px;font-size:11.5px;color:#a99a8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eps-tile.current .eps-label{color:#e7c98f}
.eps-tile.current .eps-note{color:#c8a25a;font-weight:650}
.eps-tile.soon{cursor:default}
.eps-tile.soon .eps-thumb,.eps-tile.soon .eps-label{opacity:.55}
.eps-tile.soon .eps-note{color:#c9837f}
a.eps-tile:focus-visible{outline:2px solid #c8a25a;outline-offset:3px}
.eps-arrow{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-bottom:34px;border-radius:50%;background:rgba(255,255,255,.08);color:#eee5dc}
.eps-arrow:disabled{opacity:.25;cursor:default}
.eps-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.eps-thumb img{transition:none}a.eps-tile:hover .eps-thumb img{transform:none}}

/* floating watch button + sound hint */
.fab{transition:opacity .4s,transform .4s,visibility .4s;position:fixed;z-index:35;right:max(14px,calc((100vw - var(--col)) / 2 + 14px));bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:9px;height:48px;padding:0 19px 0 15px;border-radius:99px;background:rgba(20,15,14,.86);color:#fff;font-weight:700;font-size:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.12);transition:opacity .4s,transform .4s}
.fab .fab-ico{display:grid;place-items:center;width:22px;height:22px}
.fab .fab-ico:before{content:"";border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.fab[data-mode=pause] .fab-ico:before{border:0;width:10px;height:13px;margin:0;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor}
.fab[data-mode=replay] .fab-ico:before{content:"↺";border:0;margin:0;font-size:19px;line-height:1}
.on-cover:not(.started) .fab{opacity:0;transform:translateY(20px);pointer-events:none;visibility:hidden}
.watching .fab{background:rgba(163,36,47,.9)}
.sound-hint{position:fixed;z-index:36;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;padding:10px 16px;border-radius:99px;background:#f6eee7;color:#1b1311;font-weight:700;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:opacity .3s,transform .3s;white-space:nowrap}
.sound-hint.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .js .panel,.js .panel.in{transform:none!important;filter:none!important;transition:opacity .4s!important}
  .js .panel[data-enter=wipe] .art{clip-path:none}
  .shake,.thump,.art.buzzing,.sfx.on span,.bubble.speaking .bub{animation:none!important}
  .js .sfx.on span{opacity:1;transition:opacity .3s}
  .js .bubble .bub,.js .bubble.on .bub,.js .notify,.js .notify.on{transform:none!important;transition:opacity .3s!important}
  .ph-item.on,.ph-item.ph-date.on,.ph-photo.erased{animation:none!important}
  .ph-photo.erased,.ph-group.erased{display:none}
  .dots{animation:none}
  .js .cover-title{animation:none!important;opacity:1}
  .cover-title,.cover-foot,.scroll-cue{animation:none}
}

/* review fixes: focus, no-js, chat composer, font-ready title, targets */
#strip:focus{outline:none}
.no-js .cover-actions,.no-js .cover-note,.no-js .cover-keys,.no-js #watch-btn,.no-js #sound-btn,.no-js .scroll-cue,.no-js .fab{display:none}
.cover-nojs{margin:10px auto 0;max-width:32ch;font-size:14px;color:#f6eee7}
.cover-nojs a{color:#f0d9a8}
.cover-keys{display:none;margin:8px 0 0;font-size:11.5px;letter-spacing:.06em;color:rgba(246,238,231,.6)}
@media (pointer:fine){.cover-keys{display:block}}
.js .cover-title{opacity:0;animation:none}
.js.fonts-ready .cover-title{opacity:1;animation:rise 1.2s .05s both cubic-bezier(.2,.7,.2,1)}
.ph-compose{margin:0 .7em .75em;padding:.42em .85em;border-radius:99px;background:rgba(236,240,244,.9);color:#8b929a;font-size:.78em;flex:none}
.phone-ui.lock .ph-who{color:#d9dde3}   /* only the dark lock screen needs light text; chat UIs stay white under any grade */
.phone-ui.lock .ph-name small{color:#c4c9cf}
#start-silent,#sound-on{padding:12px 8px;margin:-12px -8px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.on-cover .mw-bar :focus-visible{outline-color:#2a201c}
.mw-chip{min-height:40px}

.notify.has-photo .nt-photo,.notify.has-photo .nt-fig{grid-column:1/-1;margin:6px 0 0}
.nt-photo{display:block;width:100%;max-height:calc(46 * var(--u));object-fit:cover;border-radius:10px;border:2px solid #c9a45c}
.nt-fig figcaption{margin-top:4px;font-size:12px;font-weight:700;color:var(--crimson)}

/* Episode 5: Grandma's seat on a notify card (jade edge + chip), typing dots, a card replaced by the next one, small live-HTML tags */
.notify.nt-grandma{box-shadow:0 12px 34px rgba(20,40,30,.24),0 0 0 2px #4f9a78}
.nt-grandma .nt-icon{background:linear-gradient(140deg,#7cc4a0,#2d5f4a)}
.nt-chip{margin-left:7px;padding:1px 6px;border-radius:99px;background:#eaf3ee;box-shadow:inset 0 0 0 1px #b9d6c6;color:#2d5f4a;font-size:9.5px;letter-spacing:.08em;vertical-align:1px}
.nt-typing{color:#4d5a54;font-style:italic}
.nt-dots{display:inline-flex;gap:3px;margin-left:5px;vertical-align:middle}
.nt-dots i{width:5px;height:5px;border-radius:50%;background:#4f9a78;animation:ntdot 1.1s infinite ease-in-out}
.nt-dots i:nth-child(2){animation-delay:.18s}.nt-dots i:nth-child(3){animation-delay:.36s}
@keyframes ntdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.js .notify.on.gone,.js .tag.on.gone{opacity:0;transition:opacity .25s}
.tag{position:absolute;z-index:6;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);pointer-events:none}
.tag.sized{width:calc(var(--bw) * 1%)}
.js .tag{opacity:0}.js .tag.on{opacity:1;transition:opacity .3s}
.tag.live{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:6px;background:rgba(18,16,16,.62);color:#fff;font:800 11px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.12em}
.tag.live::before{content:"";width:8px;height:8px;border-radius:50%;background:#e8323c;box-shadow:0 0 6px #e8323c;animation:livedot 1.2s infinite}
.tag.live.off{background:rgba(18,16,16,.45);color:rgba(255,255,255,.6)}
.tag.live.off::before{background:#8a8a8a;box-shadow:none;animation:none}
@keyframes livedot{50%{opacity:.35}}
.tag.paper{display:flex;flex-direction:column;justify-content:center;padding:6% 9%;box-sizing:border-box;white-space:pre-line;color:#2b2420;font:700 calc(var(--qh, 60px) * var(--fs, .105))/1.25 "Cormorant Garamond",Georgia,serif;text-align:center;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.nt-dots i,.tag.live::before{animation:none;opacity:1}}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:8;pointer-events:none}
.layer.cropped{inset:auto;object-fit:fill}
.layer.under{z-index:5}   /* a whole-frame swap that sits under the cards and tags */
.js .layer{opacity:0}.js .layer.on{opacity:1;transition:opacity .12s}
.js .layer.on.gone{opacity:0}
.glitch-mark{display:none}
.js .notify.on.glitch-out{animation:ntglitch .7s steps(7) forwards}
@keyframes ntglitch{0%{transform:none;filter:none}15%{transform:translate(-6px,1px) skewX(-8deg);filter:drop-shadow(3px 0 #e8323c) drop-shadow(-3px 0 #2bb3c0)}30%{transform:translate(5px,-2px);clip-path:inset(18% 0 34% 0)}45%{transform:translate(-3px,2px) skewX(6deg);clip-path:inset(52% 0 8% 0)}60%{transform:translate(4px,0);clip-path:inset(4% 0 62% 0);opacity:.7}80%{opacity:.3;clip-path:inset(40% 0 40% 0)}100%{opacity:0;clip-path:inset(50% 0 50% 0)}}
.tag.reply{display:flex;align-items:center;padding:0 .9em;height:2.3em;border-radius:99px;background:rgba(255,255,255,.95);box-shadow:inset 0 0 0 1px #c9d6cf,0 0 0 2px #4f9a78;color:#8a9590;font:500 max(12px,calc(2.9 * var(--u)))/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.js .notify.on.glitch-out{animation:none;opacity:0}}


/* Gag vocabulary v1: no selector below matches an episode without D.gag.version=1. */
.gag-enabled .gag-stage{overflow:visible;background:var(--t-cream);isolation:isolate}
.gag-enabled .gag-entry,.gag-enabled .gag-impact,.gag-enabled .gag-mask,.gag-enabled .gag-camera{position:absolute;inset:0;width:100%;height:100%}
.gag-enabled .gag-entry{z-index:0}
.gag-enabled .gag-mask{overflow:hidden;background:#faf5e9}
.gag-enabled .gag-mask[data-shape=circle]{clip-path:circle(50% at 50% 50%);border-radius:50%}
.gag-enabled .gag-mask[data-shape=ellipse]{clip-path:ellipse(50% 48% at 50% 50%)}
.gag-enabled .gag-mask[data-shape=slant]{clip-path:polygon(2% 5%,100% 0,98% 94%,0 100%)}
.gag-enabled .gag-mask[data-shape=burst]{clip-path:polygon(0 12%,9% 15%,7% 0,24% 8%,31% 0,44% 7%,57% 0,64% 9%,80% 0,83% 10%,100% 4%,95% 28%,100% 43%,94% 54%,100% 78%,90% 77%,94% 100%,77% 92%,66% 100%,51% 94%,37% 100%,29% 92%,10% 100%,12% 86%,0 91%,5% 65%,0 49%,5% 35%)}
.gag-enabled .gag-mask[data-shape=borderless]{background:transparent;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
.gag-enabled .gag-camera>.media,.gag-enabled .gag-mask>.media{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;user-select:none;transform:none}
.gag-enabled .gag-camera>.media.cropped,.gag-enabled .gag-mask>.media.cropped{inset:auto;object-fit:fill}
.gag-enabled .gag-camera>video.media{opacity:0;transition:opacity .15s}
.gag-enabled .gag-camera>video.live{opacity:1}
.gag-enabled .gag-mask>video.media{opacity:0;transition:opacity .15s}
.gag-enabled .gag-mask>video.media.live{opacity:1}
@media(prefers-reduced-motion:reduce){.gag-enabled video.media{opacity:0!important;transition:none!important}}
.gag-enabled .gag-inset,.gag-enabled .gag-cell,.gag-enabled .gag-layer{position:absolute;pointer-events:none}
.gag-enabled .gag-cell{z-index:1}
.gag-enabled .gag-inset{z-index:4;filter:drop-shadow(1px 0 #514641) drop-shadow(-1px 0 #514641) drop-shadow(0 1px #514641) drop-shadow(0 -1px #514641) drop-shadow(2px 4px 0 #51464122)}
.gag-enabled .gag-inset>.gag-mask{border:3px solid #faf5e9}
.gag-enabled .gag-layer{z-index:2;will-change:transform}
.gag-enabled .gag-pending{opacity:0;transform:scale(.86)}
.gag-enabled .gag-shown{animation:gag-pop .22s both}
.gag-enabled .gag-static{animation:none;transform:none;opacity:1}
.gag-enabled .gag-accent{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;mix-blend-mode:multiply}
.gag-enabled .gag-accent[data-pattern=speed]{background:repeating-linear-gradient(174deg,transparent 0 12px,#e9d995bb 13px 15px,transparent 17px 30px);mask-image:linear-gradient(90deg,#000,transparent 55%,#000)}
.gag-enabled .gag-accent[data-pattern=burst]{background:repeating-conic-gradient(from 4deg at 65% 35%,#e9d995 0deg 5deg,transparent 5deg 17deg);mask-image:radial-gradient(ellipse at 65% 35%,transparent 28%,#000 75%)}
.gag-enabled .gag-accent[data-pattern=dots]{background:radial-gradient(#a8b89b 2px,transparent 3px) 0 0/16px 16px}
.gag-enabled .gag-accent[data-pattern=hatch]{background:repeating-linear-gradient(95deg,transparent 0 7px,#51464133 8px 9px)}
.gag-enabled .gag-accent.gag-flash{animation:gag-flash .18s ease-out both}
.gag-enabled .gag-accent-static{opacity:.18}
.gag-enabled .gag-impact.gag-shake{animation:gag-shake .18s ease-out}
.gag-enabled .gag-impact.gag-thump{animation:gag-thump .18s ease-out}
.gag-enabled .gag-impact.gag-pop{animation:gag-pop .22s ease-out}
.js .gag-enabled .gag-panel[data-enter=wipe] .art{clip-path:none}
.js .gag-enabled .gag-panel[data-enter=wipe] .gag-entry{clip-path:inset(0 0 100% 0)}
.js .gag-enabled .gag-panel[data-enter=wipe].in .gag-entry{clip-path:inset(0);transition:clip-path .5s ease-out}
.gag-enabled .sfx.gag-sfx{font-size:clamp(24px,calc(var(--gag-scale,1)*10cqw),70px);max-width:var(--gag-max,90%);transform-origin:var(--gag-origin,50% 50%);overflow:visible;z-index:7}
.gag-enabled .bubble.shout .copy{font-size:clamp(19px,5.2cqw,31px);font-weight:600;text-transform:uppercase;line-height:1.15}
.gag-enabled .bubble.shout .bub svg{filter:drop-shadow(2px 3px 0 #e8a26766)}
.gag-enabled .gag-stage .bubble{pointer-events:auto}
@keyframes gag-pop{0%{opacity:0;transform:scale(.86)}70%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes gag-thump{0%,100%{transform:scale(1)}30%{transform:scale(1.035)}}
@keyframes gag-shake{0%,100%{transform:translate(0)}25%{transform:translate(3px,-1px)}50%{transform:translate(-3px,1px)}75%{transform:translate(1px,0)}}
@keyframes gag-flash{0%{opacity:.65}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .gag-enabled .gag-shown,.gag-enabled .gag-impact,.gag-enabled .gag-accent.gag-flash{animation:none!important;transform:none!important}
 .gag-enabled .gag-entry{transition:none!important;clip-path:none!important}
 .gag-enabled .gag-layer{transform:none!important}
}

/* Sprite v1 is inert unless a panel explicitly constructs .sprite-stage. */
/* An interrupted beat keeps its final ink, including staggered SFX words. */
.js .beat-committed,.js .beat-committed *{animation:none!important;transition:none!important}
.js .bubble.beat-committed .bub,.js .sfx.beat-committed span{opacity:1;transform:none}
.sprite-stage{pointer-events:none;overflow:hidden}
.sprite-stage[hidden],.sprite-stage [hidden]{display:none!important}
.sprite-stage .sprite-plate,.sprite-stage .sprite-layer,.sprite-stage .sprite-layer>img{position:absolute;display:block;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.sprite-stage .sprite-layer{inset:auto;transform-origin:50% 80%}
.sprite-stage .sprite-layer>img{object-fit:fill}
@media(prefers-reduced-motion:reduce){.sprite-stage{display:none!important}}

/* Decorative manga ink uses the sprite clock, with small eased pose changes. */
.sprite-stage .sprite-decoration{transition:transform 90ms ease-out,filter 90ms ease-out,opacity 90ms ease-out}
@media(prefers-reduced-motion:reduce){.sprite-stage .sprite-decoration{transition:none!important}}

/* Only extracted tail ink sways; never move a background or human patch. */
.sprite-stage .sprite-tail{transition:transform 700ms ease-in-out}
@media(prefers-reduced-motion:reduce){.sprite-stage .sprite-tail{transition:none!important}}

/* Explicit thinker attachment; opt-in for revised episodes. */
.bubble.thought path,.bubble.thought circle{fill:#fffdf8;stroke:#51433c;stroke-width:2;stroke-linejoin:round}

/* Cat-series house SFX; explicit D.lettering.sfx opt-in is also supported.
   Stroke paints underneath the white glyph so small counters stay open. */
body[data-sfx-style="bright-outline"] .sfx{
  color:#fffdf4;-webkit-text-stroke:.13em #292322;paint-order:stroke fill;
  text-shadow:.055em .08em .09em #211b1bb3;
  font-weight:700;font-size:clamp(18px,5.3cqw,34px);line-height:1.12;
}
body[data-sfx-style="bright-outline"] .sfx.gag-sfx{
  font-size:clamp(26px,calc(var(--gag-scale,1)*10cqw),70px);
}
body[data-sfx-style="bright-outline"] .sfx.nibble-loop{
  font-size:clamp(18px,4.6cqw,28px);
}

/* ===== Ambient FX (opt-in per view via data `fx`; see createFx in motion-webtoon.js).
   Vector overlays over the still; they run only while .fx-on (on screen).
   Recolour per series with the --fx-* variables. ===== */
.fx-stage{position:absolute;inset:0;pointer-events:none;z-index:3;container-type:inline-size;overflow:visible}
.fx-stage.cropped{inset:auto}
.fx{position:absolute;width:calc(var(--s,1) * 6cqw);aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--r,0deg))}
.fx>*{position:absolute;display:block}
.fx svg{width:100%;height:100%;overflow:visible}
.fx-stage:not(.fx-on) .fx *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.fx-stage{display:none!important}}

/* zzz: sleepy letters drifting up and away */
.fx-zzz .fx-z{left:0;bottom:0;font:700 calc(var(--s,1) * 3.4cqw)/1 "Bangers","Shantell Sans",system-ui,sans-serif;color:var(--fx-ink-light,#fff);-webkit-text-stroke:calc(var(--s,1) * .25cqw) var(--fx-ink,#3a2a22);paint-order:stroke;opacity:0;animation:fx-z 3.6s calc(var(--d) + var(--i) * 1.1s) infinite ease-out}
@keyframes fx-z{0%{opacity:0;transform:translate(0,0) scale(.6) rotate(-8deg)}15%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:translate(calc(var(--s,1) * 4cqw),calc(var(--s,1) * -7cqw)) scale(1.15) rotate(10deg)}}

/* hearts: float up with a little sway */
.fx-hearts .fx-heart{left:calc(var(--i) * 30%);bottom:0;width:45%;opacity:0;animation:fx-heart 2.8s calc(var(--d) + var(--i) * .8s) infinite ease-out}
.fx-hearts svg path{fill:var(--fx-heart,#ef7b8f);stroke:var(--fx-ink,#3a2a22);stroke-width:6}
@keyframes fx-heart{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1;transform:translateY(-15%) scale(1)}50%{transform:translate(12%,-55%) scale(1)}100%{opacity:0;transform:translate(-8%,-130%) scale(.9)}}

/* sparkle: twinkle (pop, spin, flash) */
.fx-sparkle .fx-star{inset:0;animation:fx-twinkle 2.2s var(--d) infinite cubic-bezier(.3,1.6,.5,1)}
.fx-sparkle svg path{fill:var(--fx-spark,#ffd36b);stroke:var(--fx-ink,#3a2a22);stroke-width:4}
@keyframes fx-twinkle{0%,55%,100%{transform:scale(.25) rotate(0);opacity:0}65%{transform:scale(1.15) rotate(25deg);opacity:1}78%{transform:scale(.85) rotate(40deg);opacity:1}90%{transform:scale(1) rotate(50deg);opacity:.9}}

/* steam: wavy wisps rising from food */
.fx-steam .fx-wisp{left:calc(10% + var(--i) * 28%);bottom:0;width:35%;height:120%;opacity:0;animation:fx-steam 3s calc(var(--d) + var(--i) * .9s) infinite ease-in-out}
.fx-steam svg path{fill:none;stroke:var(--fx-steam,rgba(255,255,255,.85));stroke-width:9;stroke-linecap:round}
@keyframes fx-steam{0%{opacity:0;transform:translateY(20%) scaleY(.6)}30%{opacity:.9}100%{opacity:0;transform:translateY(-60%) scaleY(1.1) skewX(8deg)}}

/* dust: motes drifting in sunlight (give the item w/h as an area) */
.fx-dust{width:auto;aspect-ratio:auto;transform:none}
.fx-dust .fx-mote{width:calc(var(--s,1) * .55cqw);aspect-ratio:1;border-radius:50%;background:var(--fx-mote,rgba(255,244,214,.95));box-shadow:0 0 calc(var(--s,1) * .6cqw) rgba(255,232,170,.9);opacity:0;animation:fx-mote var(--dur,7s) var(--del,0s) infinite ease-in-out}
@keyframes fx-mote{0%{opacity:0;transform:translate(0,0)}25%{opacity:.95}75%{opacity:.6}100%{opacity:0;transform:translate(var(--dx,10px),calc(var(--s,1) * -4cqw))}}

/* shock: three rays pulsing outward (place at the head's edge; r rotates the fan) */
.fx-shock .fx-ray{left:50%;top:50%;width:14%;height:48%;border-radius:99px;background:var(--fx-shock,#f3a24b);box-shadow:0 0 0 calc(var(--s,1) * .2cqw) var(--fx-ink,#3a2a22);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(calc(-40deg + var(--i) * 40deg)) translateY(-10%);animation:fx-ray .9s var(--d) infinite ease-out}
@keyframes fx-ray{0%,100%{transform:translate(-50%,-100%) rotate(calc(-40deg + var(--i) * 40deg)) translateY(-5%) scaleY(.75);opacity:.85}45%{transform:translate(-50%,-100%) rotate(calc(-40deg + var(--i) * 40deg)) translateY(-28%) scaleY(1.1);opacity:1}}

/* ticks: short emphasis strokes flicking outward (tapping fingers, wiggling bums) */
.fx-ticks .fx-tick{left:50%;top:50%;width:10%;height:34%;border-radius:99px;background:var(--fx-tick,#f2c24c);box-shadow:0 0 0 calc(var(--s,1) * .15cqw) var(--fx-ink,#3a2a22);transform-origin:50% 100%;animation:fx-tick .45s calc(var(--d) + var(--i) * .05s) infinite steps(2,jump-none)}
@keyframes fx-tick{0%{transform:translate(-50%,-100%) rotate(calc(-50deg + var(--i) * 50deg)) translateY(-10%);opacity:1}100%{transform:translate(-50%,-100%) rotate(calc(-50deg + var(--i) * 50deg)) translateY(-45%);opacity:.2}}

/* speed: streaks trailing behind a dash (r points them) */
.fx-speed{aspect-ratio:2/1}
.fx-speed .fx-line{right:0;top:calc(15% + var(--i) * 22%);height:7%;width:100%;border-radius:99px;background:linear-gradient(90deg,transparent,var(--fx-speed,rgba(58,42,34,.55)));animation:fx-speed .5s calc(var(--d) + var(--i) * .08s) infinite linear}
@keyframes fx-speed{0%{transform:scaleX(.2) translateX(30%);transform-origin:100% 50%;opacity:0}30%{opacity:1}100%{transform:scaleX(1) translateX(-20%);transform-origin:100% 50%;opacity:0}}

/* sweat: a drop that slides and fades, then reappears */
.fx-sweat .fx-drop{inset:0;animation:fx-drop 2.4s var(--d) infinite ease-in}
.fx-sweat svg path{fill:var(--fx-sweat,#9fd3f0);stroke:var(--fx-ink,#3a2a22);stroke-width:5}
.fx-sweat svg .fx-shine{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round}
@keyframes fx-drop{0%{opacity:0;transform:translateY(-20%) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1;transform:translateY(55%)}100%{opacity:0;transform:translateY(80%)}}

/* ping: notification rings */
.fx-ping .fx-ring{inset:0;border-radius:50%;border:calc(var(--s,1) * .35cqw) solid var(--fx-ping,#ffd36b);opacity:0;animation:fx-ring 1.8s calc(var(--d) + var(--i) * .6s) infinite ease-out}
@keyframes fx-ring{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}

/* sting: impact sparks bursting out (bites, bonks) */
.fx-sting .fx-spark{left:50%;top:50%;width:12%;height:40%;border-radius:99px;background:var(--fx-spark,#ffd36b);box-shadow:0 0 0 calc(var(--s,1) * .18cqw) var(--fx-ink,#3a2a22);transform-origin:50% 100%;opacity:0;animation:fx-sting 1.1s var(--d) infinite cubic-bezier(.2,1.4,.4,1)}
@keyframes fx-sting{0%{opacity:0;transform:translate(-50%,-100%) rotate(calc(var(--i) * 72deg)) translateY(0) scaleY(.3)}25%{opacity:1;transform:translate(-50%,-100%) rotate(calc(var(--i) * 72deg)) translateY(-35%) scaleY(1)}60%,100%{opacity:0;transform:translate(-50%,-100%) rotate(calc(var(--i) * 72deg)) translateY(-60%) scaleY(.6)}}

/* notes: happy music notes bobbing up */
.fx-notes .fx-note{left:calc(var(--i) * 45%);bottom:0;width:55%;opacity:0;animation:fx-heart 3s calc(var(--d) + var(--i) * 1.2s) infinite ease-out}
.fx-notes svg path{fill:var(--fx-ink,#3a2a22)}

/* bang: a hand-lettered !, ? or !? that pops and wobbles */
.fx-bang .fx-bang{inset:0;display:grid;place-items:center;font:700 calc(var(--s,1) * 5cqw)/1 "Bangers","Shantell Sans",system-ui,sans-serif;color:var(--fx-bang,#ffd36b);-webkit-text-stroke:calc(var(--s,1) * .35cqw) var(--fx-ink,#3a2a22);paint-order:stroke;animation:fx-bang 1.6s var(--d) infinite cubic-bezier(.3,1.8,.5,1)}
@keyframes fx-bang{0%{transform:scale(.4) rotate(-12deg);opacity:0}18%{transform:scale(1.15) rotate(6deg);opacity:1}30%,80%{transform:scale(1) rotate(-3deg);opacity:1}100%{transform:scale(1) rotate(-3deg);opacity:0}}

/* ===== Camera moves (opt-in per panel via data `cam`; see createCam). ===== */
.cam-flash{position:absolute;inset:0;z-index:8;background:#fff;pointer-events:none}
@media (prefers-reduced-motion:reduce){.cam-flash{display:none}}

/* ===== Time-skip captions (beat `wipe: true`): a starburst spins in behind the card. ===== */
.bubble.time-skip .bub{position:relative;isolation:isolate}
.bubble.time-skip .bub::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:190%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--fx-burst,#ffd36b) 0 9deg,transparent 9deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);mask:radial-gradient(circle,#000 30%,transparent 68%);opacity:0}
.js .bubble.time-skip.on .bub{animation:ts-pop .7s cubic-bezier(.2,1.6,.4,1) both}
.js .bubble.time-skip.on .bub::after{animation:ts-burst 1.6s .05s ease-out both}
@keyframes ts-pop{0%{transform:scale(.3) rotate(-14deg);opacity:0}60%{transform:scale(1.08) rotate(3deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes ts-burst{0%{opacity:0;transform:rotate(-90deg) scale(.4)}35%{opacity:.85}100%{opacity:0;transform:rotate(60deg) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.bubble.time-skip .bub::after{display:none}}
/* iris: a circle window; everything outside goes to ink */
.cam-iris{position:absolute;z-index:9;aspect-ratio:1;border-radius:50%;translate:-50% -50%;pointer-events:none;box-shadow:0 0 0 400vmax var(--cam-iris,#2b1f19)}
@media (prefers-reduced-motion:reduce){.cam-iris{display:none}}