@layer components{.sn-actor{--sn-actor-scale:1;--sn-px:calc(1px * var(--sn-actor-scale));width:calc(var(--sn-px) * var(--sn-frame-w));height:calc(var(--sn-px) * var(--sn-frame-h));background-image:var(--sn-sheet);background-repeat:no-repeat;background-size:calc(var(--sn-px) * var(--sn-sheet-w)) calc(var(--sn-px) * var(--sn-frame-h));background-position:calc(var(--sn-px) * var(--sn-frame-x) * -1) 0;image-rendering:-moz-crisp-edges;image-rendering:pixelated;transform-origin:50% 100%;flex:none;display:block}@media (width>=37.5rem){.sn-actor{--sn-actor-scale:1.5}}.sn-actor.sn-actor--small{--sn-actor-scale:1}.sn-actor--flip{transform:scaleX(-1)}.sn-say{--sn-say-bg:var(--rb-paper-raised);--sn-say-line:var(--rb-ink);--sn-say-ink:var(--rb-ink);--sn-say-round:calc(var(--rb-radius-lg) * 1.6);--sn-tail:calc(var(--rb-space-6) + var(--rb-space-3));width:fit-content;max-width:min(100%,32rem);padding:var(--rb-space-3) var(--rb-space-4);border:2px solid var(--sn-say-line);border-radius:var(--sn-say-round);background:var(--sn-say-bg);color:var(--sn-say-ink);font-family:var(--rb-font-ui);font-size:var(--rb-text-base);overflow-wrap:anywhere;filter:drop-shadow(0 3px 0 color-mix(in srgb, var(--rb-ink) 14%, transparent)) drop-shadow(0 10px 22px color-mix(in srgb, var(--rb-ink) 12%, transparent));line-height:1.65;position:relative}@media (width>=75rem){.sn-say{font-size:var(--rb-text-sm)}}.sn-say__name{width:fit-content;margin-bottom:var(--rb-space-1);color:var(--rb-accent-live,var(--rb-accent));font-size:var(--rb-text-xs);letter-spacing:.06em;font-weight:700;display:block}.sn-say--guest{--sn-say-bg:var(--rb-accent);--sn-say-line:var(--rb-accent);--sn-say-ink:var(--rb-accent-ink);padding:var(--rb-space-2) var(--rb-space-3);font-size:var(--rb-text-sm);line-height:1.55}.sn-say--alert{--sn-say-ink:var(--form-error-text,var(--rb-ink))}.sn-say__tail{width:var(--sn-tail);height:var(--sn-tail);pointer-events:none;position:absolute;overflow:visible}.sn-say__tail-fill{fill:var(--sn-say-bg)}.sn-say__tail-line{fill:none;stroke:var(--sn-say-line);stroke-width:2.4px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.sn-say--tail-right{border-bottom-right-radius:var(--rb-radius-sm)}.sn-say--tail-right .sn-say__tail{right:calc(var(--sn-tail) * -1 + 3px);bottom:calc(var(--rb-space-1) * -1)}.sn-say--tail-left{border-bottom-left-radius:var(--rb-radius-sm)}.sn-say--tail-left .sn-say__tail{left:calc(var(--sn-tail) * -1 + 3px);bottom:calc(var(--rb-space-1) * -1);transform:scaleX(-1)}.sn-say--tail-down .sn-say__tail{left:calc(var(--sn-tail-x,50%) - var(--sn-tail) / 2);bottom:calc(var(--sn-tail) * -1 + 3px);transform:rotate(90deg)}.sn-say--thought,.sn-say--sleep{--sn-say-round:999px;padding-inline:var(--rb-space-4)}.sn-say--sleep{letter-spacing:.2em}.sn-say--thought .sn-say__tail,.sn-say--sleep .sn-say__tail{display:none}.sn-say--thought:before,.sn-say--thought:after,.sn-say--sleep:before,.sn-say--sleep:after{content:"";border:2px solid var(--sn-say-line);background:var(--sn-say-bg);border-radius:50%;position:absolute}.sn-say--thought:before,.sn-say--sleep:before{left:calc(var(--sn-tail-x,50%) - var(--rb-space-2));bottom:calc(var(--rb-space-4) * -1);width:var(--rb-space-3);height:var(--rb-space-3)}.sn-say--thought:after,.sn-say--sleep:after{left:calc(var(--sn-tail-x,50%) - var(--rb-space-1));bottom:calc(var(--rb-space-6) * -1);width:var(--rb-space-2);height:var(--rb-space-2)}.sn-say--shout{--sn-spike:var(--rb-space-2);background:0 0;border-color:#0000;font-weight:800}.sn-say--shout:before,.sn-say--shout:after{content:"";z-index:-1;clip-path:polygon(0% var(--sn-spike), 10% 0, 20% var(--sn-spike), 30% 0, 40% var(--sn-spike), 50% 0, 60% var(--sn-spike), 70% 0, 80% var(--sn-spike), 90% 0, 100% var(--sn-spike), 100% 25%, calc(100% - var(--sn-spike)) 50%, 100% 75%, calc(100% - var(--sn-spike)) 100%, 90% 100%, 80% calc(100% - var(--sn-spike)), 70% 100%, 60% calc(100% - var(--sn-spike)), 50% 100%, 40% calc(100% - var(--sn-spike)), 30% 100%, 20% calc(100% - var(--sn-spike)), 10% 100%, 0% calc(100% - var(--sn-spike)), 0 75%, var(--sn-spike) 50%, 0 25%);position:absolute}.sn-say--shout:before{inset:calc(var(--rb-space-3) * -1);background:var(--sn-say-line)}.sn-say--shout:after{inset:calc(var(--rb-space-2) * -1);background:var(--sn-say-bg)}.sn-say.sn-say--window{--sn-say-line:var(--rb-accent-live,var(--rb-accent));--sn-plate-h:52px;width:100%;max-width:none;padding:var(--rb-space-3) var(--rb-space-4) var(--rb-space-4);border:3px solid var(--sn-say-line);outline:1px solid var(--sn-say-line);outline-offset:-7px;text-align:start;overflow-wrap:break-word;filter:none;box-shadow:var(--rb-shadow-step);border-radius:0;display:block}.sn-say--window[data-sn-plate]{margin-top:calc(var(--sn-plate-h) / 2);padding-top:calc(var(--sn-plate-h) / 2 + var(--rb-space-2))}.sn-say--window .sn-say__plate{top:calc(var(--sn-plate-h) / -2 - 1px);left:var(--rb-space-3);align-items:center;gap:var(--rb-space-2);pointer-events:none;display:flex;position:absolute}.sn-say--window .sn-say__face{box-sizing:content-box;border:2px solid var(--sn-say-line);background:var(--rb-paper-sunken)}.sn-say--window .sn-say__name{padding:1px var(--rb-space-2);border:2px solid var(--sn-say-line);background:var(--sn-say-bg);color:var(--rb-ink);font-size:var(--rb-text-sm);margin:0;line-height:1.4}.sn-say__name[data-pixel]{font-family:"Sennin Pixel", var(--rb-font-ui);letter-spacing:.1em;font-weight:400}.sn-say--window.sn-say--alert{--sn-say-line:var(--form-error-border,var(--rb-accent))}.sn-say--guest.sn-say--window{width:fit-content;max-width:min(85%,28rem);padding:var(--rb-space-2) var(--rb-space-3);border:2px solid color-mix(in srgb, var(--rb-accent) 70%, var(--rb-ink));box-shadow:var(--rb-shadow-pixel-sm);outline:none}:where(html[data-motion=on]) .sn-say--pop{animation:sn-say-pop var(--rb-duration) var(--rb-ease) both}.sn-say--tail-right.sn-say--pop{transform-origin:100% 100%}.sn-say--tail-left.sn-say--pop{transform-origin:0 100%}:where(html[data-motion=on]) .sn-say--window.sn-say--pop{animation:sn-window-open var(--rb-duration-fast) steps(3, end) both}.sn-say--window.sn-say--pop{transform-origin:50% 100%}:where(html[data-motion=on]) .sn-actor--breathe{animation:sn-actor-breathe calc(var(--rb-duration-arrive) * 2) steps(1, end) infinite}@keyframes sn-say-pop{0%{opacity:0;transform:translateY(var(--rb-space-2)) scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes sn-window-open{0%{opacity:0;transform:scaleY(.4)}to{opacity:1;transform:scaleY(1)}}@keyframes sn-actor-breathe{0%{translate:0}50%,to{translate:0 calc(var(--sn-px) * -1)}}}
