/* Theme, soap-film surfaces, responsive layout, and motion. */
:root {
  color-scheme:light;
  --paper:#f7f8f5;
  --ink:#353e3c;
  --muted:#787f79;
  --worry:#dce7eb;
  --joy:#eee8be;
  --sentence-font:"Hiragino Sans GB","PingFang SC","Microsoft YaHei",sans-serif;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI","Microsoft YaHei",sans-serif;
  font-weight:400;
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

[hidden] {
  display:none!important;
}

.sound-toggle {
  position:absolute;
  z-index:5;
  top:max(17px,env(safe-area-inset-top));
  right:max(15px,env(safe-area-inset-right));
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#7d867c;
}

.sound-toggle svg {
  width:18px;
  height:18px;
}

.sound-toggle:hover {
  background:#e9ede780;
}

.sound-off,.sound-toggle[aria-pressed="false"] .sound-on {
  display:none;
}

.sound-toggle[aria-pressed="false"] .sound-off {
  display:block;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
}

button,input {
  font:inherit;
}

button {
  color:inherit;
}

button:focus-visible,.bubble:focus-visible {
  outline:2px solid #68796d;
  outline-offset:5px;
}

button {
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

button:disabled {
  cursor:default;
}

.playground {
  position:relative;
  width:100%;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(ellipse at 49% 45%,#fff9 0,transparent 64%);
}

.masthead {
  position:absolute;
  z-index:3;
  top:max(28px,env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  pointer-events:none;
  white-space:nowrap;
}

.wordmark {
  font-family:"Avenir Next",Avenir,"Century Gothic",sans-serif;
  font-size:46px;
  font-weight:500;
  letter-spacing:-.075em;
  line-height:1;
  margin:0 0 14px;
}

.wordmark span {
  color:#8d997b;
}

.tagline {
  font-size:14px;
  letter-spacing:.13em;
  margin:0;
}

.english {
  font-family:Georgia,serif;
  font-size:12px;
  color:#949b92;
  letter-spacing:.055em;
  margin:9px 0 0;
}

.bubble-field {
  touch-action:none;
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}

.bubble {
  --tint:206,224,234;
  position:absolute;
  left:0;
  top:0;
  display:grid;
  place-items:center;
  padding:17px;
  border:0;
  border-radius:50%;
  background:transparent;
  will-change:transform;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:default;
}

.bubble.joy {
  --tint:240,227,157;
  cursor:grab;
}

.bubble.dragging {
  z-index:10;
  cursor:grabbing;
}

.bubble-skin {
  position:absolute;
  inset:0;
  border:1px solid rgba(var(--tint),.48);
  border-radius:49% 51% 50% 50%;
  background:radial-gradient(ellipse at 29% 18%,#fffd 0,#fff3 12%,transparent 32%),radial-gradient(ellipse at 73% 83%,rgba(var(--tint),.16),transparent 48%),radial-gradient(circle,transparent 58%,rgba(var(--tint),.10) 85%,#fff6 100%);
  box-shadow:inset 1px 2px 3px #fffd,inset -1px -2px 4px rgba(var(--tint),.26),0 4px 15px rgba(69,88,82,.018);
  transition:filter .25s;
  pointer-events:none;
  transform:rotate(var(--tap-turn,0deg)) scale(var(--tap-x,1),var(--tap-y,1)) rotate(var(--pressure-angle,0deg)) scale(var(--pressure-x,1),var(--pressure-y,1)) rotate(calc(0deg - var(--pressure-angle,0deg))) rotate(var(--stretch-angle,0deg)) scale(var(--stretch-x,1),var(--stretch-y,1)) rotate(calc(0deg - var(--stretch-angle,0deg)));
}

.bubble-skin:before {
  content:"";
  position:absolute;
  top:8%;
  left:16%;
  width:35%;
  height:22%;
  border-top:2px solid #fffe;
  border-radius:50%;
  transform:rotate(-33deg);
  filter:blur(.3px);
}

.bubble-skin:after {
  content:"";
  position:absolute;
  right:12%;
  bottom:9%;
  width:24%;
  height:14%;
  border-bottom:1px solid #fff9;
  border-radius:50%;
  transform:rotate(-38deg);
}

/* The coloured film lives on a thin, uneven rim; the centre stays clear. */
.bubble-film {
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:conic-gradient(from 15deg,transparent 0deg 32deg,#a5cbd15c 47deg,transparent 76deg 103deg,#d3b7d766 129deg,#ead59b66 152deg,transparent 185deg 227deg,#a9c9b358 253deg,transparent 279deg,#e7b9c955 317deg,transparent 342deg);
  -webkit-mask-image:radial-gradient(ellipse,transparent 61%,#0003 83%,#000 96%);
  mask-image:radial-gradient(ellipse,transparent 61%,#0003 83%,#000 96%);
  opacity:.75;
  animation:film-light var(--light-duration,36s) ease-in-out var(--light-delay,0s) infinite alternate;
}

.bubble.joy .bubble-skin {
  background:radial-gradient(ellipse at 27% 16%,#ffffff70,transparent 24%),radial-gradient(ellipse at 79% 87%,#fff8,transparent 13%);
  border-color:#dfdfc866;
  box-shadow:inset 1px 1px 2px #ffffffd9,inset -1px -1px 2px #dbe5dc66,0 2px 9px #73807803;
}
.bubble.joy .bubble-film {
  filter:saturate(calc(1 + var(--help-light,0))) brightness(calc(1 + var(--tap-light,0)));
  background:conic-gradient(from 12deg,transparent 0deg 20deg,#dcb9cc85 34deg,#c4bed685 48deg,transparent 65deg 142deg,#b2d3cd80 160deg,transparent 183deg 260deg,#e2d29b85 278deg,transparent 301deg 360deg);
  -webkit-mask-image:radial-gradient(ellipse closest-side,transparent 84%,#0002 90%,#000 97%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side,transparent 84%,#0002 90%,#000 97%,transparent 100%);
  animation-name:sunlit-film;
}
.bubble.joy .bubble-skin:before { border-top:1.5px solid #fffffff2; }
.bubble.worry:not(.infused) .bubble-film {
  background:conic-gradient(from 18deg,transparent 0deg 50deg,#b6cbd875 69deg,transparent 94deg 224deg,#c1beda70 244deg,transparent 271deg 360deg);
  -webkit-mask-image:radial-gradient(ellipse closest-side,transparent 86%,#0004 94%,#0006 99%);
  mask-image:radial-gradient(ellipse closest-side,transparent 86%,#0004 94%,#0006 99%);
  animation-name:shaded-film;
}
.bubble.worry:not(.infused) .bubble-skin {
  background:radial-gradient(ellipse at 29% 18%,#ffffff60 0,transparent 25%),radial-gradient(ellipse at 73% 83%,#d7e4e814,transparent 35%);
  box-shadow:inset 1px 1px 2px #ffffff8c,inset -1px -1px 3px #cbdce329;
}
.bubble.worry:not(.infused) .bubble-skin:before { border-top:1px solid #ffffffa6; }
.bubble.worry:not(.infused) .bubble-skin:after { border-bottom-color:#ffffff60; }
@keyframes sunlit-film {
  from { transform:rotate(-9deg); opacity:.7; }
  to { transform:rotate(13deg); opacity:.9; }
}
@keyframes shaded-film {
  from { transform:rotate(-9deg); opacity:.2; }
  to { transform:rotate(13deg); opacity:.32; }
}

.bubble.departing {
  z-index:4;
  pointer-events:none;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.bubble.departing .bubble-skin {
  border-color:rgba(var(--tint),.72);
  box-shadow:inset 1px 2px 5px #fff,inset -1px -2px 5px rgba(var(--tint),.36);
}

.bubble.noticed .bubble-skin {
  animation:found-breath .4s ease-in-out;
}

@keyframes film-light {
  from { transform:rotate(-9deg); opacity:.58; }
  to { transform:rotate(13deg); opacity:.88; }
}

@keyframes found-breath {
  50% { transform:scale(1.03); filter:brightness(1.025); }
}

.bubble-text {
  position:relative;
  z-index:1;
  max-width:100%;
  font-family:var(--sentence-font);
  font-size:var(--bubble-font,13.5px);
  font-weight:400;
  letter-spacing:0;
  line-height:var(--bubble-leading,1.3);
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:visible;
  text-align:center;
  overflow-wrap:anywhere;
  color:#536974;
  pointer-events:none;
}

.joy .bubble-text {
  color:#7b724e;
}

.bubble-line { display:block; white-space:pre; }

.bubble.dragging .bubble-skin {
  filter:saturate(1.12);
  box-shadow:inset 1px 2px 5px #fff,inset -2px -3px 6px rgba(var(--tint),.3),0 8px 22px #81816a08;
}

.bubble.new .bubble-skin {
  animation:breathe-in .8s both;
}

.bubble.popping,.bubble.squeezing,.bubble.retiring {
  pointer-events:none;
}

.bubble.squeezing .bubble-skin {
  animation:contact-squeeze .24s ease-in-out forwards;
}

.bubble.squeezing .bubble-film {
  filter:brightness(1.06);
}

.bubble.retiring {
  opacity:0;
  transition:opacity .26s ease;
}

.bubble.popping .bubble-skin {
  animation:pop-skin .24s ease-out forwards;
}

.bubble.popping .bubble-text {
  animation:pop-text .23s ease-out forwards;
}

.center {
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  transform:translate(-50%,-44%);
  width:max-content;
  max-width:calc(100% - 32px);
  text-align:center;
  pointer-events:none;
}

.remaining {
  min-height:0;
}

.status-line {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  column-gap:.24em;
  margin:0;
  font-size:clamp(14px,1.05vw,16px);
  font-weight:400;
  line-height:1.7;
  letter-spacing:.075em;
  color:#89918c;
}

.count-line {
  display:inline-flex;
  align-items:baseline;
  gap:.12em;
  font-size:clamp(16px,1.15vw,18px);
  line-height:1;
  white-space:nowrap;
  color:#727d82;
}

.count {
  display:inline-block;
  font-size:1em;
  font-weight:500;
  line-height:1;
  letter-spacing:-.025em;
  margin:0;
  font-variant-numeric:lining-nums tabular-nums;
}

.count-unit {
  font-size:clamp(14px,1.05vw,16px);
  line-height:1;
  letter-spacing:0;
  color:#89918c;
  font-weight:400;
}

.count.changed {
  animation:count-change .36s ease-out;
}

.empty-message {
  color:#79827c;
  font-size:clamp(15px,1.1vw,17px);
  font-weight:400;
  letter-spacing:.07em;
}

.empty-note {
  font-size:13px;
  color:var(--muted);
  letter-spacing:.08em;
  margin:6px 0 0;
}

.quiet-state {
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.04em;
}

.quiet-state p {
  margin:0;
}

.quiet-state button {
  min-height:44px;
  padding:9px 12px;
  border:0;
  background:none;
  color:#707b66;
  font-size:13px;
  text-decoration:underline;
  text-decoration-color:#b6beac;
  text-underline-offset:5px;
  pointer-events:auto;
}

.actions {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:35px;
  pointer-events:auto;
}

.add-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid #d8dfdf;
  border-radius:40px;
  padding:13px 22px;
  background:#edf1f2de;
  font-size:14px;
  line-height:1.4;
  letter-spacing:.04em;
  transition:background .2s,transform .2s,box-shadow .2s;
}

.face-icon {
  width:20px;
  height:20px;
  flex:none;
  color:#82989e;
}

.joy-button .face-icon {
  color:#a39161;
}

.joy-button {
  background:#eeeacede;
  border-color:#e2dec1;
}

.add-button:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 12px #34403b07;
  background:#e3eaed;
}

.joy-button:hover {
  background:#e9e3b9;
}

.add-button:active {
  transform:scale(.96);
}

.toast {
  position:absolute;
  z-index:6;
  left:50%;
  top:-44px;
  transform:translate(-50%,7px);
  margin:0;
  color:#717b65;
  font-size:15px;
  letter-spacing:.15em;
  opacity:0;
  transition:opacity .22s,transform .22s;
  pointer-events:none;
  white-space:nowrap;
}

.toast.visible {
  opacity:1;
  transform:translate(-50%,0);
}

.composer {
  width:min(420px,calc(100% - 40px));
  max-height:calc(100svh - 36px);
  border:1px solid #e6e8de;
  border-radius:24px;
  padding:40px 32px 32px;
  background:#fcfcf8;
  color:var(--ink);
  box-shadow:0 24px 100px #283a3412;
  overflow:auto;
}

.composer[open] {
  animation:dialog-in .22s ease-out;
}

.composer::backdrop {
  background:#f3f5ef9c;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.close {
  position:absolute;
  right:14px;
  top:10px;
  border:0;
  background:none;
  color:#899086;
  font-size:27px;
  width:40px;
  height:40px;
  font-weight:300;
}

.form-orb {
  display:block;
  width:32px;
  height:32px;
  border-radius:50%;
  margin-bottom:24px;
  border:1px solid #d4e0e6;
  background:radial-gradient(circle at 30% 25%,#fff,var(--worry));
  box-shadow:inset -2px -3px 5px #fff8;
}

.composer[data-kind="joy"] .form-orb {
  border-color:#e3ddaf;
  background:radial-gradient(circle at 30% 25%,#fff,var(--joy));
}

.bubble-choices {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 22px -8px;
}

.bubble-choice {
  position:relative;
  display:grid;
  place-items:center;
  width:64px;
  height:66px;
  padding:0 0 7px;
  background:none;
  border:0;
  border-radius:16px;
}

.bubble-choice span {
  width:26px;
  height:26px;
  border:1px solid #c5d5dc;
  border-radius:50%;
  background:radial-gradient(circle at 30% 22%,#fff 0,#e7eff255 45%,#dce7eb99);
  box-shadow:inset 1px 2px 4px #fff;
  transition:transform .25s;
}

.bubble-choice:nth-child(2) span {
  width:38px;
  height:38px;
}

.bubble-choice:nth-child(3) span {
  width:52px;
  height:52px;
}

.composer[data-kind="joy"] .bubble-choice span {
  border-color:#dcd5a6;
  background:radial-gradient(circle at 30% 22%,#fff 0,#f4efd555 45%,#eee8be99);
}

.bubble-choice[aria-pressed="true"]::after {
  content:"";
  position:absolute;
  bottom:0;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#87917c;
}

.bubble-choice:hover span {
  transform:translateY(-2px);
}

.composer h2 {
  font-size:21px;
  font-weight:400;
  letter-spacing:.04em;
  margin:0 0 29px;
}

.composer input {
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid #cbd1c9;
  border-radius:0;
  background:transparent;
  font-size:16px;
  color:var(--ink);
  padding:12px 0;
  outline:none;
}

.composer input:focus {
  border-color:#7c8a78;
}

.composer input::placeholder {
  color:#a0a79c;
}

.input-meta {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  color:#90978c;
  margin:12px 0 30px;
}

.input-meta.error {
  color:#9a6254;
}

.blow-button {
  border:1px solid #d5d9c7;
  border-radius:30px;
  background:#e9ecdF;
  padding:13px 22px;
  width:100%;
  font-size:14px;
}

.blow-button span {
  margin-left:9px;
  color:#79836b;
}

.blow-button:hover {
  background:#e1e6d6;
}

.ripple {
  position:absolute;
  border:1px solid #bac8b17a;
  border-radius:50%;
  pointer-events:none;
  animation:ripple .52s ease-out forwards;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@keyframes contact-squeeze {
  0% {
    transform:rotate(var(--contact-angle)) scale(1) rotate(calc(0deg - var(--contact-angle)));
  }
  100% {
    transform:rotate(var(--contact-angle)) scale(.89,1.065) rotate(calc(0deg - var(--contact-angle)));
  }
}

@keyframes pop-skin {
  0% {
    transform:rotate(var(--contact-angle)) scale(.89,1.065) rotate(calc(0deg - var(--contact-angle)));
    opacity:1;
    filter:brightness(1.035);
  }
  100% {
    transform:scale(.84);
    opacity:0;
  }
}

@keyframes pop-text {
  to {
    opacity:0;
    transform:scale(.94);
  }
}

@keyframes ripple {
  from {
    transform:scale(.8);
    opacity:.7;
  }
  to {
    transform:scale(1.5);
    opacity:0;
  }
}

@keyframes breathe-in {
  from {
    transform:scale(.35,.55);
    opacity:0;
  }
  65% {
    transform:scale(1.04,.97);
    opacity:1;
  }
  to {
    transform:scale(1);
  }
}

@keyframes count-change {
  0% { opacity:.55; transform:translateY(-2px) scale(.97); }
  65% { opacity:1; transform:translateY(0) scale(1.015); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:600px) {
  .playground {
    height:100svh;
    min-height:100svh;
  }
  .masthead {
    top:max(22px,env(safe-area-inset-top));
  }
  .wordmark {
    font-size:37px;
    margin-bottom:11px;
  }
  .tagline {
    font-size:13px;
    letter-spacing:.08em;
  }
  .english {
    font-size:12px;
    margin-top:7px;
  }
  .center {
    transform:translate(-50%,-44%);
  }
  .status-line {
    font-size:15px;
    column-gap:.2em;
  }
  .count-line {
    font-size:17px;
  }
  .empty-message {
    font-size:16px;
  }
  .actions {
    gap:8px;
    margin-top:25px;
  }
  .add-button {
    min-height:44px;
    padding:10px 14px;
    font-size:13px;
  }
  .bubble {
    padding:13px;
  }
  .bubble-text {
    font-size:var(--bubble-font,13px);
    line-height:var(--bubble-leading,1.3);
  }
  .bubble.long {
    padding:16px;
  }
  .toast {
    top:-42px;
    font-size:14px;
  }
  .composer {
    position:fixed;
    inset:auto;
    top:calc(var(--pop-visual-top,0px) + env(safe-area-inset-top) + (var(--pop-visual-height,100svh) - env(safe-area-inset-top) - env(safe-area-inset-bottom))/2);
    left:50%;
    margin:0;
    padding:30px 25px 24px;
    max-height:calc(var(--pop-visual-height,100svh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    transform:translate(-50%,-50%);
    overscroll-behavior:contain;
    scroll-padding-block:12px;
  }
  .composer[open] {
    animation:mobile-dialog-in .22s ease-out;
  }
  .composer.keyboard-compact {
    padding:12px 20px 14px;
    max-height:calc(var(--pop-visual-height,100svh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .composer.keyboard-compact .form-orb { width:22px; height:22px; margin-bottom:6px; }
  .composer.keyboard-compact h2 { font-size:17px; margin-bottom:8px; }
  .composer.keyboard-compact input { padding:6px 0; }
  .composer.keyboard-compact .input-meta { margin:6px 0 8px; }
  .composer.keyboard-compact .bubble-choices { gap:4px; margin:0 0 4px -4px; }
  .composer.keyboard-compact .bubble-choice { width:48px; height:48px; }
  .composer.keyboard-compact .bubble-choice:nth-child(3) span { width:40px; height:40px; }
  .composer.keyboard-compact .blow-button { min-height:44px; padding:10px 18px; }
  .close {
    width:44px;
    height:44px;
  }
  .blow-button {
    min-height:48px;
  }
}

@keyframes mobile-dialog-in {
  from { opacity:0; transform:translate(-50%,calc(-50% + 8px)); }
  to { opacity:1; transform:translate(-50%,-50%); }
}

@media(max-height:650px) {
  .masthead {
    top:15px;
  }
  .wordmark {
    font-size:30px;
    margin-bottom:6px;
  }
  .english {
    display:none;
  }
  .status-line {
    font-size:14px;
  }
  .count-line {
    font-size:16px;
  }
  .actions {
    margin-top:24px;
  }
  .center {
    transform:translate(-50%,-40%);
  }
}

.bubble-field.compact .bubble {
  padding:12px;
}

.bubble-field.compact .bubble-text {
  font-size:var(--bubble-font,12px);
  line-height:var(--bubble-leading,1.3);
}

.bubble-field.compact .bubble.long {
  padding:16px;
}

@media (max-height:500px) and (min-width:601px) {
  .playground {
    min-height:360px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
  .bubble {
    will-change:auto;
  }
}

@media(max-width:600px) and (pointer:coarse) {
  .bubble-field { touch-action:none; }
  .bubble { -webkit-touch-callout:none; }
  .bubble.touch-held .bubble-skin { filter:saturate(1.08); }
  .add-button,.bubble-choice,.close,.blow-button,.fullscreen-toggle,.sound-toggle { touch-action:manipulation; }
}

/* A single quiet timestamp, never a tooltip card. */
.bubble-time {
  position:absolute;
  z-index:6;
  left:0;
  top:0;
  max-width:calc(100% - 24px);
  margin:0;
  color:#8a918b;
  font-size:11px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.025em;
  text-align:center;
  text-wrap:balance;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.bubble-time.visible { opacity:1; }

/* Only the final, authored-joy resolution steps in front of the number. */
#remaining { transition:opacity .24s ease; }
.resolution-active #remaining { opacity:.1; }
.remaining.is-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.bubble.resolution-bubble { z-index:4; pointer-events:none; }
.bubble.resolution-bubble.illuminated {
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.bubble.absorbing .bubble-film { filter:brightness(1.12) saturate(1.12); }
.bubble.absorbing .bubble-skin {
  box-shadow:inset 1px 2px 7px #fff,inset -3px -3px 12px #eadab275;
  transition:box-shadow .35s ease;
}
.bubble.illuminated .bubble-skin {
  border-color:rgba(236,246,242,calc(.55 + var(--film-glow,0)*.35));
  border-radius:calc(50% + var(--film-wobble,0%)) calc(50% - var(--film-wobble,0%)) 50% 50%;
  box-shadow:inset 1px 2px 4px #fff,inset -1px -2px 5px #c7d9d74d,0 0 1px #cad7cd55;
  filter:brightness(calc(1 + var(--film-glow,0)*.035));
}
.bubble.infused .bubble-film {
  animation:none;
  transform:rotate(calc(var(--injection-angle,0deg) + var(--film-turn,0deg))) translateX(var(--film-shift,0%));
  opacity:calc(.76 + var(--film-glow,0)*.22);
  background:conic-gradient(from 8deg,#dca8c4b3 0deg,#bca6d8b3 25deg,transparent 59deg 100deg,#9ec5e0b3 123deg,#96cdb8a6 147deg,transparent 179deg 224deg,#e4cb86b3 246deg,#dca8c4a6 267deg,transparent 298deg 337deg,#dca8c4b3 360deg);
  -webkit-mask-image:radial-gradient(ellipse closest-side,transparent 64%,#0001 75%,#0009 89%,#000 97%,#0003 100%);
  mask-image:radial-gradient(ellipse closest-side,transparent 64%,#0001 75%,#0009 89%,#000 97%,#0003 100%);
  filter:saturate(1.06);
}
.bubble.infused .bubble-skin:after {
  width:30%;
  border-bottom-color:#f0deacb3;
  box-shadow:0 1px 3px #dfbad54d;
}
.bubble.infused.illuminated .bubble-film {
  /* Two interference bands thin towards the edge as the membrane stretches. */
  -webkit-mask-image:radial-gradient(ellipse closest-side,transparent 62%,#0002 75%,#000b 86%,#0005 91%,#000 97%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side,transparent 62%,#0002 75%,#000b 86%,#0005 91%,#000 97%,transparent 100%);
}
.bubble.illuminated .bubble-skin:before {
  transform:rotate(calc(-33deg + var(--film-turn,0deg)*.5));
  border-top-color:rgba(255,255,255,calc(.7 + var(--film-glow,0)*.3));
}
.bubble.final-burst .bubble-text { opacity:0; transition:opacity .18s ease; }
.final-ripple {
  position:absolute;
  z-index:5;
  border:1px solid #dae7dfb3;
  background:conic-gradient(from 20deg,#e6b9c98c,#c4b4dd94 55deg,#abcce294 115deg,transparent 146deg 174deg,#a9d4c28c 204deg,#e8d29399 262deg,transparent 285deg 317deg,#e6b9c98c);
  -webkit-mask-image:radial-gradient(ellipse closest-side,transparent 81%,#0003 90%,#000 97%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side,transparent 81%,#0003 90%,#000 97%,transparent 100%);
  border-radius:50%;
  pointer-events:none;
  animation:final-ripple .4s ease-out both;
}
@keyframes final-ripple {
  0% { transform:scale(.96); opacity:.85; }
  35% { opacity:.62; }
  100% { transform:scale(1.3); opacity:0; }
}



/* Authored-joy contact only: ordinary dragging and manual pops are untouched. */
.bubble.resolution-bubble.squeezing .bubble-skin {
  animation:membrane-contact .24s ease-in-out forwards;
}
@keyframes membrane-contact {
  0% { transform:rotate(var(--contact-angle)) scale(1) rotate(calc(0deg - var(--contact-angle))); }
  75%,100% { transform:rotate(var(--contact-angle)) scale(.84,1.10) rotate(calc(0deg - var(--contact-angle))); }
}
.bubble.flowing-in .bubble-skin {
  transform:rotate(var(--contact-angle)) scale(.8,1.08) rotate(calc(0deg - var(--contact-angle)));
  filter:brightness(1.035);
}
.bubble.absorbing .bubble-skin {
  box-shadow:inset 1px 2px 7px #fff,inset -3px -3px 12px rgba(234,218,178,calc(.35 + var(--injection-strength,0)*.2));
}
.contact-impact {
  position:absolute;
  z-index:5;
  border-radius:50%;
  pointer-events:none;
  animation:contact-impact .44s cubic-bezier(.12,.5,.3,1) both;
}
.contact-impact:before,.contact-impact:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
}
.contact-impact:before {
  background:radial-gradient(ellipse at 27% 34%,#e1b3ce7a,transparent 48%),radial-gradient(ellipse at 70% 35%,#b5cee480,transparent 50%),radial-gradient(ellipse at 58% 78%,#e5d29475,transparent 52%);
  filter:blur(2px);
}
.contact-impact:after {
  background:conic-gradient(#e0b2caa6,#c2b2ddb3,#a8cce6b3,#9ed2c1a6,#e8d394b3,#e0b2caa6);
  -webkit-mask-image:radial-gradient(ellipse closest-side,transparent 81%,#000 87%,#0006 91%,transparent 97%);
  mask-image:radial-gradient(ellipse closest-side,transparent 81%,#000 87%,#0006 91%,transparent 97%);
  filter:blur(.45px);
}
@keyframes contact-impact {
  0% { transform:scale(.3); opacity:.25; }
  18% { transform:scale(.72); opacity:.8; }
  55% { transform:scale(1.3); opacity:.68; }
  100% { transform:scale(2); opacity:0; }
}
.transfer-surface {
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
  contain:paint;
}
.transfer-surface:before {
  content:"";
  position:absolute;
  left:var(--source-x);
  top:var(--source-y);
  width:52%;
  height:52%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 35% 32%,#e9d9a880,transparent 55%),radial-gradient(ellipse at 65% 65%,#d7b9df75,transparent 58%);
  animation:surface-caustic .5s ease-out both;
}
.transfer-wave {
  position:absolute;
  border-radius:50%;
  background:conic-gradient(from 15deg,#e5b5c99e,#bcb1dfa6 65deg,#a8cce49e 128deg,transparent 161deg 180deg,#a8d3bfa6 225deg,#e7d296a6 290deg,#e5b5c99e);
  -webkit-mask-image:radial-gradient(ellipse closest-side,transparent 74%,#0003 79%,#000 85%,#0009 89%,transparent 96%);
  mask-image:radial-gradient(ellipse closest-side,transparent 74%,#0003 79%,#000 85%,#0009 89%,transparent 96%);
  animation:surface-wave .5s cubic-bezier(.16,.5,.3,1) both;
}
@keyframes surface-wave {
  0% { transform:scale(.025); opacity:0; }
  15% { opacity:.88; }
  70% { opacity:.56; }
  100% { transform:scale(1); opacity:0; }
}
@keyframes surface-caustic {
  0% { opacity:.8; }
  100% { opacity:0; }
}
.iridescent-shard {
  position:absolute;
  z-index:5;
  border-radius:65% 35% 60% 40%;
  background:conic-gradient(from 45deg,transparent,#e8c9d0b3,#b9d6ddc2,transparent,#ecdea9b3,transparent);
  -webkit-mask-image:radial-gradient(ellipse closest-side,transparent 25%,#000 58%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side,transparent 25%,#000 58%,transparent 100%);
  pointer-events:none;
  animation:iridescent-shard var(--life) ease-out both;
}
@keyframes iridescent-shard {
  from { transform:translate(0,0) rotate(var(--turn)); opacity:.7; }
  to { transform:translate(var(--dx),var(--dy)) rotate(calc(var(--turn) + 25deg)); opacity:0; }
}


.blow-button:disabled { opacity:.45; cursor:default; }
#capacity-count { font-size:11px; color:#969d94; white-space:nowrap; margin-left:auto; }

/* One random tear propagates around the membrane in 120 ms, not a fade. */
.bubble.membrane-tension .bubble-skin {
  border-width:.6px;
  border-color:#fffffff5;
  box-shadow:inset 0 0 1px #fff,0 0 1px #ffffff99;
}
.bubble.resolution-bubble.membrane-torn {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.bubble.membrane-torn .bubble-skin {
  background:none;
  box-shadow:none;
  -webkit-mask-image:conic-gradient(from var(--tear-angle,0deg),transparent 0deg var(--tear-gap,6deg),#000 calc(var(--tear-gap,6deg) + 2deg) 360deg);
  mask-image:conic-gradient(from var(--tear-angle,0deg),transparent 0deg var(--tear-gap,6deg),#000 calc(var(--tear-gap,6deg) + 2deg) 360deg);
}
.bubble.membrane-torn .bubble-text { opacity:0; transition:opacity .07s ease-out; }
.final-ripple {
  -webkit-mask-image:radial-gradient(ellipse closest-side,transparent 89%,#0003 93%,#000 97%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side,transparent 89%,#0003 93%,#000 97%,transparent 100%);
  animation-duration:.24s;
}

/* Full reading is opt-in; only one sentence/presence note is shown at a time. */
.bubble-full-text {
  display:block;
  margin-bottom:5px;
  font-family:var(--sentence-font);
  font-size:14px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:.02em;
  color:#536974;
  overflow-wrap:anywhere;
  text-shadow:0 1px 3px var(--paper),0 -1px 3px var(--paper);
}
.bubble-age { display:block; }
.bubble.reading .bubble-text { opacity:0; }
.bubble.departing .bubble-text { opacity:var(--birth-text,0); }
/* Briefly clear the text behind the growing film, then restore it in place. */
.birth-active:not(.resolution-active) #remaining { opacity:.12; }

/* Subtle presentation depth, independent of the semantic size level. */
.bubble[data-depth="far"] { z-index:0; opacity:var(--depth-opacity,.84); }
.bubble[data-depth="middle"] { z-index:1; }
.bubble[data-depth="near"] { z-index:2; }
.bubble.dragging { z-index:10; }
.bubble.resolution-bubble { z-index:4; }
.bubble.newborn-focus { z-index:3; }
.bubble.newborn-focus .bubble-film {
  filter:brightness(calc(1 + var(--new-light,0))) saturate(calc(1 + var(--help-light,0) + var(--new-light,0)));
}
.birth-glint {
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse at 24% 22%,#dfc6d580,transparent 27%),radial-gradient(ellipse at 38% 12%,#d5e4ef80,transparent 25%),radial-gradient(ellipse at 14% 40%,#ead9ad66,transparent 23%);
  -webkit-mask-image:radial-gradient(circle,transparent 48%,#0008 78%,#000 94%,transparent 100%);
  mask-image:radial-gradient(circle,transparent 48%,#0008 78%,#000 94%,transparent 100%);
  animation:birth-glint var(--glint-duration,.4s) ease-in-out both;
}
@keyframes birth-glint {
  0% { opacity:0; transform:rotate(-28deg); }
  42% { opacity:.7; }
  100% { opacity:0; transform:rotate(34deg); }
}
.bubble.recognizing .bubble-skin {
  animation:none;
  transform:rotate(var(--contact-angle)) scale(var(--match-x,1),var(--match-y,1)) rotate(calc(0deg - var(--contact-angle)));
}
.bubble.recognizing.infused .bubble-film {
  opacity:calc(.12 + var(--injection-strength,0)*.64);
  clip-path:circle(calc(4% + var(--injection-strength,0)*140%) at 100% 50%); /* The film itself rotates this local rim towards the contact. */
}
.bubble.recognizing.infused .bubble-skin:after {
  border-bottom-color:#ffffff60;
  box-shadow:none;
}
.bubble.recognizing.absorbing .bubble-skin {
  box-shadow:inset 1px 2px 4px #ffffffd9,inset -1px -2px 5px rgba(234,218,178,calc(.08 + var(--injection-strength,0)*.16));
}
.shared-light .transfer-wave { animation:shared-film var(--transfer-duration,.55s) ease-out both; }
.shared-light:before { animation:shared-caustic var(--transfer-duration,.55s) ease-out both; }
@keyframes shared-film {
  0% { transform:scale(.025); opacity:0; }
  25% { opacity:.35; }
  70% { opacity:.22; }
  100% { transform:scale(1); opacity:0; }
}
@keyframes shared-caustic {
  0%,100% { opacity:0; }
  35% { opacity:.38; }
}

/* Native fullscreen only; the sound control and page layout stay in place. */
.fullscreen-toggle {
  position:absolute;
  z-index:5;
  top:max(17px,env(safe-area-inset-top));
  right:calc(max(15px,env(safe-area-inset-right)) + 46px);
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:0;
  padding:0;
  background:transparent;
  color:#949c94;
  transition:color .18s ease;
}
.fullscreen-toggle[hidden] { display:none !important; }
.fullscreen-toggle svg { width:19px; height:19px; }
.fullscreen-toggle:hover { color:#657164; }
.fullscreen-contract,.fullscreen-toggle[aria-pressed="true"] .fullscreen-expand { display:none; }
.fullscreen-toggle[aria-pressed="true"] .fullscreen-contract { display:block; }