@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dmmono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dmmono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/fraunces.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Palette, type and controls all follow afterdust.org — warm hero, plum
   compose block, teal pill, tiny letterspaced caps. One committed look;
   every colour is painted, nothing inherits from the host. */
:root{
  --ink:#241132;
  --ink-deep:#160b26;
  --plum:#231139;
  --plum-soft:#2e1745;
  --cream:#f7e8c7;
  --cream-bright:#fff7e8;
  --sand:#f4ddb2;
  --rose:#d94f82;
  --rose-deep:#a83a68;
  --mauve:#e6bad0;
  --muted:#a98ba8;
  --line:#57345f;
  --teal:#5eddd7;
  --amber:#ffc12f;
  --sky-ink:#2b123c;          /* driven by the time of day */
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --mono:"DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ink-deep); color:var(--cream);
  font-family:var(--mono); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
.app{height:100svh; display:flex; flex-direction:column}
.caps{font-size:8px; letter-spacing:.14em; text-transform:uppercase}

/* ---- the scene ---- */
.frame{
  position:relative; flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  background:var(--plum); overflow:hidden; touch-action:none; min-height:9rem;
}
canvas{display:block; image-rendering:pixelated; cursor:grab}
canvas.grabbing{cursor:grabbing}

.topbar{
  position:absolute; z-index:4; left:0; right:0; top:0; pointer-events:none;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:12px 14px; color:var(--sky-ink);
  transition:color .8s linear;
}
.wordmark{
  font-family:var(--display); font-size:23px; line-height:.8;
  letter-spacing:-.065em; color:var(--sky-ink);
}
.topbar .caps{opacity:.72; padding-top:.35rem}

/* ---- what somebody said ---- */
/* full-width layer so a short message gets a short card instead of an
   empty 30rem slab */
.banner-layer{
  position:absolute; z-index:5; left:0; right:0; top:52px;
  display:flex; justify-content:center; padding:0 14px; pointer-events:none;
}
.banner{
  max-width:min(34rem,100%); transform:translateY(-8px);
  padding:12px 14px; background:rgba(35,17,57,.93);
  border-left:2px solid var(--rose);
  box-shadow:0 12px 30px rgba(22,11,38,.4);
  opacity:0; transition:opacity .22s ease, transform .22s ease;
}
.banner.on{opacity:1; transform:none}
.banner-msg{
  margin:0; font-family:var(--display); font-size:clamp(16px,3.2vw,20px);
  line-height:1.18; color:#fff0d5; text-wrap:balance;
}
.banner-who{margin:7px 0 0; color:var(--muted); font-size:8px; letter-spacing:.14em; text-transform:uppercase}
.banner-who .rare{color:var(--teal)}

/* ---- the bubble that sticks to whoever is talking ---- */
.bubble-layer{
  position:absolute; left:0; right:0; top:0; z-index:3; pointer-events:none;
  display:flex; justify-content:center;
  opacity:0; transition:opacity .15s ease;
}
.bubble-layer.on{opacity:1}
.bubble{
  position:relative; transform:translate(var(--bx,0px),-100%);
  max-width:min(30ch,72%); padding:8px 11px;
  background:var(--cream-bright); color:#2a1538;
  font-family:var(--display); font-size:14px; line-height:1.2; text-align:center;
  border-radius:12px; box-shadow:0 6px 16px rgba(22,11,38,.35);
}
.bubble::after{
  content:""; position:absolute; left:var(--tail,50%); bottom:-4px;
  width:9px; height:9px; margin-left:-5px; border-radius:0 0 3px 0;
  background:var(--cream-bright); transform:rotate(45deg);
}

.hint{
  position:absolute; left:0; right:0; bottom:8px; z-index:2; pointer-events:none;
  text-align:center; color:var(--mauve); opacity:.7;
  font-size:8px; letter-spacing:.14em; text-transform:uppercase;
  transition:opacity .5s ease;
}
.hint.gone{opacity:0}

/* ---- the compose block ---- */
.console{flex:0 0 auto; background:var(--plum); color:var(--cream)}
.compose{padding:13px clamp(14px,4vw,20px) 13px; display:flex; flex-direction:column; gap:9px}
.field-label{color:var(--muted); font-size:8px; letter-spacing:.14em; text-transform:uppercase}

.message-box{
  position:relative; overflow:hidden; border-radius:16px;
  background:var(--cream-bright); box-shadow:inset 0 0 0 1px rgba(75,34,71,.15);
}
.message-box textarea{
  display:block; width:100%; height:64px; resize:none; border:0; outline:0;
  padding:10px 13px 20px; background:transparent; color:#2a1538;
  font-family:var(--display); font-size:17px; line-height:1.16;
}
.message-box textarea::placeholder{color:#a98ba8}
.count{position:absolute; right:11px; bottom:8px; color:#886b82; font-size:8px; letter-spacing:.08em}

.submit-row{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end}
.submit-row input{
  width:100%; border:0; border-bottom:1px solid #7d5b7c; border-radius:0;
  padding:7px 2px; background:transparent; color:#fff2da; font:inherit; font-size:12px;
}
.submit-row input::placeholder{color:#8a6b8a}
.pill{
  border:0; border-radius:999px; padding:11px 17px; background:var(--teal);
  color:var(--ink); font:inherit; font-size:8px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
}
.pill:active{transform:translateY(1px)}
.pill[disabled]{opacity:.45; cursor:not-allowed}

.strip{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:9px clamp(14px,4vw,20px); background:var(--ink-deep); color:#917590;
}
.strip strong{font-weight:400; color:var(--mauve); font-size:10px; letter-spacing:.04em}
.strip .spacer{flex:1 1 auto}
.link-btn{
  border:0; padding:0; background:transparent; color:#c79bb8;
  font:inherit; font-size:8px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
}
.link-btn:hover{color:var(--teal)}
#pop b{color:var(--teal); font-weight:400}

:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (max-width:32rem){
  .strip .ghost{display:none}
  /* break after the count so the three buttons share one tidy row */
  .strip{gap:7px 12px}
  .strip .spacer{flex:0 0 100%; height:0}
}
@media (max-width:26rem){
  .topbar .caps{display:none}
}
@media (prefers-reduced-motion:reduce){
  .banner,.bubble-layer,.hint,.topbar{transition:none}
}