.comic-surface{--paper:#f7f6f3;--ink:#1a1a1a;--ink-soft:#333333;--pigment-blue:14 165 233;--pigment-rose:244 63 94;--pigment-amber:245 158 11;--pigment-green:16 185 129;--caption:#ffe97f;--caption-blue:#bde3f8;--caption-rose:#fbc6cf;--bg-raised:#ffffffe0;--shadow-ink:6px 6px 0 var(--ink);position:relative;min-height:100dvh;overflow:clip;background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");color:var(--ink);font-family:var(--font-comic-neue),cursive,sans-serif;color-scheme:light}.comic-surface ::selection{background:rgb(var(--pigment-amber)/.55)}.comic-surface .marked{background-image:linear-gradient(100deg,rgb(var(--pigment-amber)/0) 1%,rgb(var(--pigment-amber)/.75) 4%,rgb(var(--pigment-amber)/.62) 50%,rgb(var(--pigment-amber)/.78) 96%,rgb(var(--pigment-amber)/0) 99%);background-repeat:no-repeat;background-size:100% .62em;background-position:0 .55em;padding-inline:.1em;margin-inline:-.1em}.comic-surface .bubble-btn{position:relative;display:block;width:100%;background:var(--ink);color:#fff;font-family:var(--font-bangers),cursive;font-size:1.5rem;letter-spacing:.09em;padding:13px 30px 10px;border:4px solid var(--ink);border-radius:30px 12px 28px 14px/14px 28px 12px 30px;box-shadow:6px 6px 0 rgb(var(--pigment-blue)/.85);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.comic-surface .bubble-btn:focus-visible,.comic-surface .bubble-btn:hover:not(:disabled){transform:rotate(-2deg) scale(1.02);box-shadow:9px 9px 0 rgb(var(--pigment-rose))}.comic-surface .bubble-btn:active:not(:disabled){transform:translate(5px,5px) rotate(-1deg);box-shadow:1px 1px 0 rgb(var(--pigment-rose))}.comic-surface .bubble-btn:disabled{cursor:progress;opacity:.75}.comic-surface .bubble-btn--quiet{background:#fff;color:var(--ink);box-shadow:6px 6px 0 rgb(var(--ink)/.85);font-size:1.25rem}.comic-surface .bubble-btn--quiet:focus-visible,.comic-surface .bubble-btn--quiet:hover:not(:disabled){box-shadow:9px 9px 0 rgb(var(--pigment-amber))}.comic-surface .ink-field{width:100%;background:#fffffff2;border:3px solid var(--ink);border-radius:14px 6px 16px 8px/8px 16px 6px 14px;padding:12px 14px;font-family:var(--font-comic-neue),cursive,sans-serif;font-size:1.05rem;color:var(--ink);transform:rotate(-.35deg)}.comic-surface .ink-field::placeholder{color:rgb(26 26 26/.42)}.comic-surface :focus-visible{outline:3px solid var(--ink);outline-offset:3px}@media (prefers-reduced-motion:reduce){.comic-surface *,.comic-surface :after,.comic-surface :before{transition-duration:.01ms!important;animation-duration:.01ms!important}}