.story-reaction{--tear-travel: 4px;display:inline-block;position:relative;width:22px;height:22px;flex:none}.story-reaction-art{display:block;position:relative;width:100%;height:100%}.story-reaction img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.story-reaction[data-reaction],.story-reaction[data-reaction] .story-reaction-art{position:relative}.story-reaction[data-reaction] img{display:block;transform-origin:50% 76%}.story-reaction[data-reaction] .story-reaction-tear{position:absolute;z-index:1;width:5.7%;height:5.7%;left:26%;top:78%;border-radius:0 55% 55%;background:#91cbe6;opacity:0;pointer-events:none;transform:translate(-50%) rotate(45deg) scale(.2)}.story-reaction[data-reaction] .story-reaction-tear--right{left:74%}.story-reaction[data-reaction=love].is-reacting img{animation:story-reaction-love 1.8s both}.story-reaction[data-reaction=laugh].is-reacting img{animation:story-reaction-laugh 1.55s both}.story-reaction[data-reaction=cry].is-reacting img{animation:story-reaction-cry 1.8s both}.story-reaction[data-reaction=cry].is-reacting .story-reaction-tear{animation:story-reaction-tear .65s .52s both}.story-reaction[data-reaction=cry].is-reacting .story-reaction-tear--right{animation-delay:.78s}.story-reaction[data-reaction=love].is-looping img{animation:story-reaction-love 1.8s infinite}.story-reaction[data-reaction=laugh].is-looping img{animation:story-reaction-laugh 1.55s infinite}.story-reaction[data-reaction=cry].is-looping img{animation:story-reaction-cry 1.8s infinite}.story-reaction[data-reaction=cry].is-looping .story-reaction-tear{animation:story-reaction-tear-loop 1.8s .52s infinite both}.story-reaction[data-reaction=cry].is-looping .story-reaction-tear--right{animation-delay:.78s}.story-reaction[data-reaction=bounce].is-looping img{animation:story-reaction-bounce 1.2s infinite}@keyframes story-reaction-love{0%,to{transform:translateY(0) scale(1)}8%{transform:translateY(1%) scale(.94);animation-timing-function:cubic-bezier(.16,1,.3,1)}21%{transform:translateY(-3%) scale(1.13);animation-timing-function:ease-in-out}34%{transform:translateY(0) scale(.99);animation-timing-function:ease-out}45%{transform:translateY(-1.5%) scale(1.075);animation-timing-function:ease-in-out}62%{transform:translateY(0) scale(1)}}@keyframes story-reaction-laugh{0%,to{transform:translateY(0) rotate(0) scale(1)}9%{transform:translateY(2%) rotate(-2deg) scale(1.07,.9);animation-timing-function:ease-out}18%{transform:translateY(-6%) rotate(-3deg) scale(.97,1.055);animation-timing-function:ease-in}29%{transform:translateY(1%) rotate(1deg) scale(1.065,.92);animation-timing-function:ease-out}39%{transform:translateY(-4%) rotate(3deg) scale(.98,1.035);animation-timing-function:ease-in}50%{transform:translateY(1%) rotate(-1deg) scale(1.04,.95);animation-timing-function:ease-out}61%{transform:translateY(-2%) rotate(-1.5deg) scale(.99,1.02);animation-timing-function:ease-in-out}77%{transform:translateY(0) rotate(0) scale(1)}}@keyframes story-reaction-cry{0%,to{transform:translate(0) scale(1)}17%{transform:translateY(-2%) scale(.975,1.035);animation-timing-function:ease-in}28%{transform:translateY(1%) scale(1.035,.95)}33%{transform:translate(-1.3%,1%) scale(1.025,.96)}38%{transform:translate(1.3%,1%) scale(1.025,.96)}43%{transform:translate(-.8%,.5%) scale(1.02,.97)}48%{transform:translate(.5%) scale(1.01,.99);animation-timing-function:ease-in-out}62%{transform:translateY(-1%) scale(.985,1.025);animation-timing-function:ease-in}72%{transform:translateY(.8%) scale(1.02,.975);animation-timing-function:ease-out}88%{transform:translate(0) scale(1)}}@keyframes story-reaction-tear{0%{opacity:0;transform:translate(-50%) rotate(45deg) scale(.3)}15%{opacity:.95;transform:translate(-50%) rotate(45deg) scale(1);animation-timing-function:ease-in}76%{opacity:.95}to{opacity:0;transform:translate(-50%,var(--tear-travel, 18px)) rotate(45deg) scale(.75)}}@keyframes story-reaction-tear-loop{0%{opacity:0;transform:translate(-50%) rotate(45deg) scale(.3)}5.4%{opacity:.95;transform:translate(-50%) rotate(45deg) scale(1);animation-timing-function:ease-in}27.4%{opacity:.95}36.1%,to{opacity:0;transform:translate(-50%,var(--tear-travel, 18px)) rotate(45deg) scale(.75)}}@media(prefers-reduced-motion:reduce){.story-reaction[data-reaction]:is(.is-reacting,.is-looping) img,.story-reaction[data-reaction]:is(.is-reacting,.is-looping) .story-reaction-tear{animation:none}.story-reaction[data-reaction] .story-reaction-tear{display:none}}.story-reaction[data-reaction=bounce].is-reacting img{animation:story-reaction-bounce 1.2s both}@keyframes story-reaction-bounce{0%,to{transform:translateY(0) rotate(0) scale(1)}18%{transform:translateY(2%) scale(1.04,.94)}38%{transform:translateY(-8%) rotate(-4deg) scale(.98,1.04)}60%{transform:translateY(0) rotate(3deg) scale(1.02,.98)}80%{transform:translateY(-2%) rotate(0) scale(1)}}@media(prefers-reduced-motion:reduce){.story-reaction[data-reaction=bounce]:is(.is-reacting,.is-looping) img{animation:none}}.story-reaction-sprite{position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden;pointer-events:none;background:no-repeat 0 0 / calc(var(--sprite-frames) * 100%) 100%}.story-reaction[data-reaction=sprite]:is(.is-reacting,.is-looping) .story-reaction-sprite{visibility:visible;animation:story-reaction-sprite var(--sprite-duration) steps(var(--sprite-frames),jump-none) both}.story-reaction[data-reaction=sprite].is-looping .story-reaction-sprite{animation-iteration-count:infinite}.story-reaction[data-reaction=sprite]:is(.is-reacting,.is-looping) img{visibility:hidden}@keyframes story-reaction-sprite{to{background-position-x:100%}}@media(prefers-reduced-motion:reduce){.story-reaction[data-reaction=sprite]:is(.is-reacting,.is-looping) .story-reaction-sprite{visibility:hidden;animation:none}.story-reaction[data-reaction=sprite]:is(.is-reacting,.is-looping) img{visibility:visible}}.story-reaction[data-reaction].is-motion-paused :is(img,.story-reaction-tear,.story-reaction-sprite),.story-reactions:not(.is-expanded) .story-reaction-item[data-compact-visible=false] .story-reaction :is(img,.story-reaction-tear,.story-reaction-sprite),.reaction-surface:is(.is-expanded,.reaction-surface--detail) .story-reaction-item[data-bar-visible=false] .story-reaction :is(img,.story-reaction-tear,.story-reaction-sprite){animation-play-state:paused}.plot-card:has(.story-reactions){isolation:isolate}.plot-card:has(.story-reactions) .card-overlay{padding-top:18px}.plot-card:has(.story-reactions) .card-overlay>span{display:block;width:max(0px,calc(100% - var(--story-reaction-space, 90px)));min-height:28px;line-height:28px;transition:width .24s cubic-bezier(.2,.7,.2,1)}.story-reactions{position:absolute;z-index:4;right:12px;bottom:10px;width:var(--collapsed-width, 82px);height:28px;border-radius:999px;background:var(--card);transition:width .24s cubic-bezier(.2,.7,.2,1),opacity .12s ease}.story-reactions.is-expanded{width:var(--expanded-width, 160px)}@media(hover:hover)and (pointer:fine){.plot-card:not(:hover):not(:focus-within) .story-reactions.is-empty:not(.is-expanded){opacity:0;pointer-events:none}.plot-card:has(.story-reactions.is-empty:not(.is-expanded)):not(:hover):not(:focus-within) .card-overlay>span{width:100%}}@container story-card (min-width: 280px){.story-reactions{right:16px;bottom:14px}}@container story-card (max-width: 180px){.story-reactions{right:9px;bottom:8px}}.story-reaction-summary{position:absolute;z-index:5;top:-8px;right:0;bottom:-8px;left:0;display:flex;align-items:center;justify-content:flex-end;width:100%;height:44px;margin:0;padding:0 8px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}.story-reaction-summary:disabled{cursor:default}.story-reaction-empty{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;white-space:nowrap}.story-reaction-empty[hidden],.story-reaction-total[hidden]{display:none}.story-reaction-total{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.story-reaction-summary>span{transition:opacity 90ms ease}.story-reactions.is-expanded .story-reaction-summary{pointer-events:none}.story-reactions.is-expanded .story-reaction-summary>span{opacity:0}.story-reaction-breakdown{position:absolute;top:-8px;right:0;bottom:-8px;left:0;pointer-events:none}.story-reactions.is-expanded .story-reaction-breakdown{pointer-events:auto}.story-reaction-item{position:absolute;left:calc(8px + var(--reaction-index)*14px);top:0;display:flex;align-items:center;justify-content:space-between;gap:0;width:22px;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:left .24s cubic-bezier(.2,.7,.2,1),width .24s cubic-bezier(.2,.7,.2,1),padding .24s cubic-bezier(.2,.7,.2,1),opacity .12s ease}.story-reactions:not(.is-expanded) .story-reaction-item[data-compact-visible=false]{opacity:0}.story-reactions.is-expanded .story-reaction-item{left:var(--expanded-left, calc(2px + var(--reaction-index)*52px));width:var(--expanded-width, 52px);gap:4px;padding:0 4px}.story-reactions.is-expanded .story-reaction-item:before{content:"";position:absolute;z-index:-1;top:10px;right:0;bottom:10px;left:0;border-radius:999px;background:transparent}.story-reactions.is-expanded .story-reaction-item:hover:before{background:var(--card-hover)}.story-reaction-summary:focus-visible,.story-reaction-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.story-reaction-count{max-width:0;overflow:hidden;opacity:0;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.4;transition:max-width .24s ease,opacity .12s ease}.story-reactions.is-expanded .story-reaction-count{max-width:56px;opacity:1;transition-delay:80ms}.story-reaction-item[aria-pressed=true] .story-reaction-count{color:var(--accent)}.story-reaction-item[aria-pressed=true] .story-reaction-art:after{content:"";position:absolute;width:4px;height:4px;right:-1px;bottom:1px;border-radius:50%;background:var(--accent)}.story-reaction-error{position:absolute;z-index:5;right:16px;bottom:54px;max-width:calc(100% - 32px);padding:8px 12px;border-radius:11px;background:var(--card);color:var(--ink);font-size:12px}.story-reaction-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:20px;border:0;border-radius:24px;background:var(--card);color:var(--ink);box-shadow:0 24px 80px #0008}.story-reaction-dialog::backdrop{background:#0009}.story-reaction-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.story-reaction-dialog-heading h2{margin:0;font-size:22px;letter-spacing:-.4px}.story-reaction-dialog-heading button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:11px;background:transparent;color:var(--ink)}.story-reaction-dialog-heading button:hover{background:var(--card-hover)}.story-reaction-story-name{margin:2px 0 20px;color:var(--muted);font-size:14px}.story-reaction-dialog-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.story-reaction-dialog-choices button{display:flex;align-items:center;flex-direction:column;gap:5px;min-width:0;padding:16px 7px 12px;border:0;border-radius:14px;background:transparent;color:var(--ink);cursor:pointer}.story-reaction-dialog-choices button:hover,.story-reaction-dialog-choices button[aria-pressed=true]{background:var(--card-hover)}.story-reaction-dialog-choices button[aria-pressed=true]>span:last-child{color:var(--accent)}.story-reaction-dialog-choices .story-reaction{--tear-travel: 12px;width:60px;height:60px;margin-bottom:5px}.story-reaction-dialog-choices button>span:last-child{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.story-reaction-dialog-status{min-height:19px;margin:20px 0 2px;font-size:13px;color:var(--muted)}@media(max-width:640px){.story-reaction-dialog{margin:auto auto 16px;padding:16px 16px 20px}.story-reaction-dialog-choices .story-reaction{width:56px;height:56px}}@media(prefers-reduced-motion:reduce){.story-reactions,.story-reaction-item,.story-reaction-count,.story-reaction-summary>span,.plot-card:has(.story-reactions) .card-overlay>span{transition:none}}.story-detail-reactions{display:grid;justify-items:start;gap:8px;padding-block:8px}.story-detail-reaction-bar{display:inline-flex;align-items:center;height:28px;padding:2px;border-radius:999px;background:var(--card)}.story-detail-reaction{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:4px;min-width:52px;height:44px;margin:0;padding:0 4px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}.story-detail-reaction:before{content:"";position:absolute;z-index:-1;top:10px;right:0;bottom:10px;left:0;border-radius:999px;background:transparent}.story-detail-reaction:hover:not(:disabled):before{background:var(--card-hover)}.story-detail-reaction:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.story-detail-reaction:disabled{cursor:default}.story-detail-reaction-count{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.4}.story-detail-reaction[aria-pressed=true] .story-detail-reaction-count{color:var(--accent)}.story-detail-reaction[aria-pressed=true] .story-reaction-art:after{content:"";position:absolute;width:4px;height:4px;right:-1px;bottom:1px;border-radius:50%;background:var(--accent)}.story-detail-reaction-error{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;color:var(--muted);font-size:13px}.story-detail-reaction-error button{min-height:44px;padding:0 12px;border:0;border-radius:11px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}.story-detail-reaction-error button:hover{background:var(--card-hover)}.world-hero-art>.story-detail-reactions{position:absolute;z-index:2;right:var(--plot-hero-control-inset, 16px);bottom:var(--plot-hero-control-inset, 16px);padding:0}.world-hero-art>.story-detail-reactions .story-detail-reaction-error{position:absolute;right:0;bottom:calc(100% + 12px);width:max-content;max-width:min(360px,calc(100vw - 64px));padding:8px 12px;border-radius:11px;background:var(--card)}.reaction-surface .story-reaction-count{flex:none;white-space:nowrap;max-width:none}.reaction-surface:not(.is-expanded):not(.reaction-surface--detail) .story-reaction-count{width:0;max-width:0}.reaction-surface.is-expanded .story-reaction-item[data-bar-visible=false],.reaction-surface--detail .story-reaction-item[data-bar-visible=false]{visibility:hidden;pointer-events:none}.reaction-surface--detail .story-detail-reaction-bar{display:block;position:relative;width:var(--expanded-width, 204px);padding:0}.reaction-surface--detail .story-reaction-item{position:absolute;top:-8px;left:var(--expanded-left);width:var(--expanded-width);min-width:0;padding:0 4px;gap:4px}.reaction-surface--detail .story-reaction-count{opacity:1;width:auto}.reaction-plus{isolation:isolate;position:absolute;top:0;left:var(--plus-left);display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}.reaction-plus:before{content:"";position:absolute;z-index:-1;top:10px;right:0;bottom:10px;left:0;border-radius:999px}.reaction-plus:hover:before{background:var(--card-hover)}.reaction-plus:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.reaction-surface:not(.is-expanded):not(.reaction-surface--detail) .story-reaction-breakdown>.reaction-plus{visibility:hidden}.reaction-surface--detail .reaction-plus{top:-8px}.reaction-surface--compact .story-reaction-summary{width:var(--summary-width)}.reaction-plus--compact{top:-8px;right:0;left:auto;z-index:5}.reaction-plus--compact:before{right:2px}.story-reaction-dialog-choices{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));max-height:min(50dvh,380px);overflow-y:auto;overscroll-behavior:contain;padding:4px}.story-reaction-dialog-choices button>span:last-child{flex:none;white-space:nowrap}.story-reaction-catalog-error{color:var(--muted);font-size:13px}.story-reaction-catalog-error button{min-height:44px;border:0;border-radius:11px;background:var(--card-hover);color:var(--ink)}.character-card:has(.reaction-surface){position:relative;isolation:isolate}.character-card>.story-reactions{right:16px;bottom:auto}@media(hover:hover)and (pointer:fine){.character-card:not(:hover):not(:focus-within)>.story-reactions.is-empty:not(.is-expanded){opacity:0;pointer-events:none}}.character-profile-portrait-frame{position:relative;width:fit-content;max-width:100%}.character-profile-portrait-frame>.reaction-surface--compact{right:8px;bottom:8px}.character-profile-portrait-frame .story-detail-reaction-error{position:absolute;z-index:6;right:0;bottom:calc(100% + 12px);width:max-content;max-width:min(280px,calc(100vw - 64px));padding:8px 12px;border-radius:11px;background:var(--card)}
