/* Attune: a full-bleed shared scene (the room) behind a single centred chat column.
   The room belongs to the conversation; bubbles and drafts belong to each person.
   One visual world, so colours are set explicitly rather than following light/dark. */
:root{
  --ui:"Instrument Sans",system-ui,sans-serif;
  --dir:"Newsreader",Georgia,serif;
  --glass:rgba(16,15,22,.52);
  --glass-strong:rgba(18,17,26,.78);
  --glass-line:rgba(255,255,255,.09);
  --ink:#EDEAF5;
  --ink-2:#A9A6B8;
  --danger:#FF9AAE;
  --you-rgb:239,111,152;
  --them-rgb:123,108,246;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#0C0B10;color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.5;overflow:hidden}
/* the room: a greyscale painting, multiplied by the lamps' light, with glow screened on top */
#scene{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.45) contrast(1.06)}
#lightmap{position:fixed;inset:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none}
#fx{position:fixed;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none}
#grain{position:fixed;inset:0;pointer-events:none;opacity:.1;mix-blend-mode:overlay}

/* the lamps themselves: bulbs on cords at the top corners; yours can be flicked */
.lamp{position:fixed;top:0;z-index:3;width:44px;height:calc(13vh + 22px);display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;background:none;border:0;padding:0;--lvl:0;--light:255,255,255}
.lamp.them{left:calc(5.5% - 22px)}
.lamp.you{right:calc(5.5% - 22px);cursor:pointer}
.lamp .cord{flex:1;width:1.5px;background:linear-gradient(to bottom,rgba(255,255,255,.08),rgba(255,255,255,.22))}
.lamp .bulb{width:22px;height:28px;border-radius:50% 50% 46% 46%;margin-bottom:0;position:relative;
  background:radial-gradient(circle at 40% 38%,rgba(255,255,255,calc(.25 + var(--lvl)*.75)) 0,rgba(var(--light),calc(.18 + var(--lvl)*.8)) 45%,rgba(var(--light),calc(.08 + var(--lvl)*.35)) 100%);
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.25)}
.lamp .bulb::before{content:"";position:absolute;left:50%;top:-7px;width:12px;height:8px;transform:translateX(-50%);border-radius:2px 2px 0 0;background:#2A2833;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.lamp.you:focus-visible{outline:none}
.lamp.you:focus-visible .bulb{outline:2px solid var(--ink);outline-offset:4px}
@media (max-width:760px){.lamp{display:none}}
[hidden]{display:none!important}

/* glass catches the lamps: their colour along the left edge, yours along the right */
.glass,.glass-card{background-image:linear-gradient(90deg,rgba(var(--them-rgb),.13),rgba(var(--them-rgb),0) 38%,rgba(var(--you-rgb),0) 62%,rgba(var(--you-rgb),.15));
  box-shadow:inset 1px 0 0 rgba(var(--them-rgb),.35),inset -1px 0 0 rgba(var(--you-rgb),.35)}
.glass{background-color:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-line);border-radius:999px}
.glass-card{background-color:var(--glass-strong);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-line);border-radius:22px}

/* landing, join, problem */
.center{position:relative;height:100%;display:grid;place-items:center;padding-inline:16px;padding-block:24px;overflow:auto}
.card{width:min(560px,100%);padding:28px 28px 24px;display:grid;gap:14px}
.wordmark{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:64px;line-height:.95;letter-spacing:-.01em}
.wordmark.small{font-size:40px}
.lede{margin:0;font-size:16px;color:var(--ink-2);max-width:36ch}
.fine{margin:0;font-size:13px;color:var(--ink-2)}
.fine:empty{display:none}
#create-err,#join-err,#gate-err{color:var(--danger)}
.actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.quiet{color:var(--ink-2);font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.22)}
.quiet:hover{color:var(--ink);text-decoration-color:rgba(255,255,255,.5)}
.quiet:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.primary{appearance:none;font:inherit;font-weight:600;font-size:15px;color:#15141C;background:var(--ink);border:0;border-radius:999px;padding:12px 22px;cursor:pointer;text-align:center;text-decoration:none;justify-self:start}
.primary.small{padding:8px 16px;font-size:13px}
.primary:focus-visible,.field:focus-visible,.style-opt input:focus-visible+.sw{outline:2px solid var(--ink);outline-offset:2px}
.primary[disabled]{opacity:.6;cursor:progress}
.field-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.field{font:inherit;font-size:16px;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--glass-line);border-radius:12px;padding:11px 14px;outline:none;width:100%;min-width:0}
.styles{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;max-height:min(52vh,460px);overflow:auto;padding-right:4px}
.style-group{grid-column:1/-1;margin:8px 0 0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.style-group:first-of-type{margin-top:0}
.styles legend{margin-bottom:8px;padding:0}
.style-opt{display:block;cursor:pointer}
.style-opt input{position:absolute;opacity:0;pointer-events:none}
.sw{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px 12px;border-radius:12px;border:2px solid transparent;transition:border-color .2s}
.sw b{grid-row:span 2;font-size:26px;font-weight:inherit;text-align:center;line-height:1}
.sw span{font-size:16px;line-height:1.1}
.sw small{font-family:var(--ui);font-style:normal;font-weight:400;font-size:12px;opacity:.75}
.style-opt input:checked+.sw{border-color:var(--ink)}

/* the room */
.app{position:relative;height:100%;display:flex;flex-direction:column;max-width:680px;margin:0 auto;padding-inline:16px}
header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-block:14px 8px;flex-wrap:wrap}
.room{padding:7px 16px;font-family:var(--dir);font-style:italic;font-size:18px;line-height:1.2}
.people{display:flex;gap:8px;flex-wrap:wrap}
.person{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;font-weight:500;min-height:34px}
label.person{padding-right:8px}
.dot{width:10px;height:10px;border-radius:50%;flex:none;transition:background .6s,opacity .6s}
.person select{font:inherit;font-weight:400;font-size:13px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;padding:2px}
.person select:focus-visible{outline:2px solid var(--ink);border-radius:6px}
.muted{font-weight:400;color:var(--ink-2)}
/* each person's chip sits in their own light */
.person.mine{background-image:linear-gradient(90deg,rgba(var(--you-rgb),.08),rgba(var(--you-rgb),.26));box-shadow:inset 0 0 0 1px rgba(var(--you-rgb),.3)}
.person.theirs{background-image:linear-gradient(90deg,rgba(var(--them-rgb),.26),rgba(var(--them-rgb),.08));box-shadow:inset 0 0 0 1px rgba(var(--them-rgb),.3)}
.caption[data-who="you"]{color:rgb(var(--you-rgb));color:color-mix(in srgb,rgb(var(--you-rgb)) 55%,#fff);box-shadow:inset 0 0 0 1px rgba(var(--you-rgb),.35)}
.caption[data-who="them"]{color:rgb(var(--them-rgb));color:color-mix(in srgb,rgb(var(--them-rgb)) 55%,#fff);box-shadow:inset 0 0 0 1px rgba(var(--them-rgb),.35)}
.compose input.glass{background-image:linear-gradient(90deg,rgba(var(--you-rgb),0) 40%,rgba(var(--you-rgb),.14));box-shadow:inset 0 0 0 1px rgba(var(--you-rgb),.22)}
.compose input::placeholder{color:color-mix(in srgb,rgb(var(--you-rgb)) 35%,var(--ink-2))}
.effects{font:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.effects[aria-pressed="false"]{color:var(--ink-2)}
.effects:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.caption{align-self:center;padding:6px 16px;font-family:var(--dir);font-style:italic;font-size:16px;opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1);pointer-events:none;text-align:center;border-radius:18px}
.caption.show{opacity:1;transform:none}
.caption:empty{display:none}
.conn{align-self:center;padding:5px 14px;font-size:13px;margin-top:6px}

.thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;padding-block:10px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%)}
.invite{padding:16px 18px;display:grid;gap:10px;font-size:14px;align-self:stretch}
.invite p{margin:0;color:var(--ink-2)}
.invite b{color:var(--ink)}
.linkrow{display:flex;gap:8px}
.linkrow .field{font-size:13px;padding:8px 12px;font-family:ui-monospace,monospace}

.b{max-width:78%;padding:9px 16px;align-self:flex-start;overflow-wrap:anywhere;white-space:pre-wrap;animation:land .2s cubic-bezier(.2,.8,.2,1);transition:background .6s,color .6s,border-radius .6s}
.b.you{align-self:flex-end}
.moonpool{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:21px;line-height:1.25;color:#F1EEFF;background:rgba(14,16,40,.80);border-radius:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.marzipan{font-family:"Gluten",ui-rounded,sans-serif;font-weight:500;font-size:18px;line-height:1.3;color:#4A1630;background:rgba(255,248,251,.94);border-radius:22px 22px 22px 6px}
.you.marzipan{border-radius:22px 22px 6px 22px}
.ink{font-family:"Bodoni Moda",Didot,serif;font-size:21px;line-height:1.25;color:#121116;background:rgba(251,251,250,.93);border-radius:2px}
.you.ink{font-style:italic}
.neon{font-family:"Sacramento","Brush Script MT",cursive;font-size:30px;line-height:1.1;color:#FFE6CF;background:rgba(22,13,10,.84);border-radius:18px;text-shadow:0 0 5px rgba(255,138,61,.85),0 0 14px rgba(255,138,61,.45)}
.shadowplay{font-family:"Abril Fatface",Didot,serif;font-size:20px;line-height:1.3;color:#1C1712;background:rgba(237,230,216,.95);border-radius:4px;text-shadow:3px 3px 0 rgba(28,23,18,.16)}
.starchart{font-family:"Josefin Sans",system-ui,sans-serif;font-weight:300;font-size:19px;letter-spacing:.04em;line-height:1.4;color:#F6E7B8;background:rgba(10,16,40,.86);border-radius:14px}
.firefly{font-family:"Quicksand",system-ui,sans-serif;font-weight:500;font-size:18px;line-height:1.35;color:#E9FBD6;background:rgba(14,30,18,.86);border-radius:16px}
.ember{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400;font-size:20px;line-height:1.3;color:#EDE3DA;background:rgba(30,19,17,.86);border-radius:14px}
.frost{font-family:"Marcellus",Georgia,serif;font-size:19px;line-height:1.35;letter-spacing:.02em;color:#E8F6FF;background:rgba(190,225,255,.16);border:1px solid rgba(220,240,255,.35);border-radius:18px;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.sw.neon,.sw.shadowplay,.sw.starchart,.sw.firefly,.sw.ember,.sw.frost{font-size:inherit;letter-spacing:normal}
.sw.neon b{font-size:30px}
.sw.neon span{font-size:22px}
.sw.moonpool,.sw.marzipan,.sw.ink{font-size:inherit}
@keyframes land{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* every bubble is lit from its owner's lamp: a rim of light on that side, a shadow cast away from it */
.b.them,.draft.them{box-shadow:inset 3px 0 0 rgba(var(--them-rgb),.65),-6px 0 24px -8px rgba(var(--them-rgb),.6),14px 16px 28px -12px rgba(0,0,0,.6)}
.b.you,.draft.you{box-shadow:inset -3px 0 0 rgba(var(--you-rgb),.65),6px 0 24px -8px rgba(var(--you-rgb),.6),-14px 16px 28px -12px rgba(0,0,0,.6)}
.b.lit{animation:land .2s cubic-bezier(.2,.8,.2,1)}


.compose{display:flex;gap:8px;padding-block:8px calc(16px + env(safe-area-inset-bottom,0px))}
.compose input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--ink);padding:12px 18px;outline:none;caret-color:rgb(var(--you-rgb))}
.compose input::placeholder{color:var(--ink-2)}
.compose input:focus-visible{border-color:var(--ink)}
/* the send button charges up in your colour as you write, and flashes when you send */
.compose button{--charge:0;font:inherit;font-weight:600;font-size:14px;color:#fff;border:0;border-radius:999px;padding:0 20px;cursor:pointer;
  background:color-mix(in srgb,rgb(var(--you-rgb)) calc(25% + var(--charge)*75%),#2A2836);
  box-shadow:0 0 calc(var(--charge)*28px) calc(var(--charge)*2px) rgba(var(--you-rgb),calc(var(--charge)*.7));transition:background .3s,box-shadow .3s}
.compose button.flash{animation:sendflash .25s ease-out}
@keyframes sendflash{0%{box-shadow:0 0 50px 14px rgba(var(--you-rgb),.95);filter:brightness(1.5)}100%{box-shadow:0 0 0 0 rgba(var(--you-rgb),0);filter:none}}
.compose button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:520px){.room{font-size:16px}.b{max-width:86%}.wordmark{font-size:52px}}
@media (prefers-reduced-motion:reduce){.b,.b.lit,.compose button.flash{animation:none}.caption{transition:opacity .3s}}

/* ---------- live drafts ---------- */
.b.draft{opacity:.94;transition:opacity .15s}
.b.draft.empty{opacity:0}
.b.draft.appear{animation:land .22s cubic-bezier(.2,.8,.2,1)}
.b.sent{transition:opacity .2s}
.ch{position:relative}
/* each person's cursor, in their lamp colour; when they pause it breathes instead of blinking */
.caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.16em;border-radius:1px;background:currentColor}
.b.them .caret{background:rgb(var(--them-rgb))}
.b.you .caret{background:rgb(var(--you-rgb))}
.b.draft.idle .caret{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.95}50%{opacity:.15}}

/* letters arriving: nothing moves. Each style has its own quality of light or material,
   so a trail of settling letters follows the cursor and every style reads differently. */
.b.them{--lamp:var(--them-rgb)}
.b.you{--lamp:var(--you-rgb)}
.ch.new{animation:.9s cubic-bezier(.25,.7,.3,1)}
/* Moonpool: focus. Each letter comes into focus from a soft blur. */
.moonpool .ch.new{animation-name:in-moon}
@keyframes in-moon{from{filter:blur(2.6px);opacity:.55;color:#C9C2FF}to{filter:blur(0);opacity:1}}
/* Marzipan: setting. Pale and translucent like sugar, then rich colour. */
.marzipan .ch.new{animation-name:in-marz;animation-duration:.85s}
@keyframes in-marz{from{color:#F3B9CC;opacity:.45}to{opacity:1}}
/* Ink: bleed. A soft wet spread draws in to a crisp edge. */
.ink .ch.new{animation-name:in-ink;animation-duration:.85s}
@keyframes in-ink{from{color:#6E6C7A;text-shadow:0 0 .3em rgba(18,17,22,.75),0 0 .08em rgba(18,17,22,.9)}to{text-shadow:0 0 0 rgba(18,17,22,0),0 0 0 rgba(18,17,22,0)}}
/* Neon: tube. An unlit glass outline first, then it lights. */
.neon .ch.new{animation-name:in-neon;animation-duration:.75s}
@keyframes in-neon{0%{color:transparent;-webkit-text-stroke:1px rgba(255,190,150,.55);text-shadow:none}45%{color:transparent;-webkit-text-stroke:1px rgba(255,190,150,.75);text-shadow:none}70%{color:#FFF4EA;-webkit-text-stroke:0 transparent;text-shadow:0 0 6px rgba(255,138,61,1),0 0 18px rgba(255,138,61,.85)}100%{-webkit-text-stroke:0 transparent}}
/* Shadowplay: shadow first. The cast shadow appears, then the letter fills in on top. */
.shadowplay .ch.new{animation-name:in-shadow;animation-duration:.85s}
@keyframes in-shadow{0%{color:transparent;text-shadow:6px 5px 4px rgba(28,23,18,.42)}45%{color:transparent;text-shadow:4px 4px 2px rgba(28,23,18,.38)}100%{text-shadow:3px 3px 0 rgba(28,23,18,.16)}}
/* Starchart: glint. A gold shimmer passes through the letter. */
.starchart .ch.new{animation-name:in-star;animation-duration:1.1s;background:linear-gradient(105deg,#F6E7B8 28%,#FFFFFF 42%,#FFD45E 50%,#FFFFFF 56%,#F6E7B8 70%) 100% 0/360% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes in-star{0%{background-position:100% 0;filter:drop-shadow(0 0 0 rgba(255,212,94,0))}40%{filter:drop-shadow(0 0 4px rgba(255,212,94,.9))}100%{background-position:0 0;filter:drop-shadow(0 0 0 rgba(255,212,94,0))}}
/* Firefly: pulse. Arrives dim, glows a beat later, then settles. */
.firefly .ch.new{animation-name:in-firefly;animation-duration:1.25s}
@keyframes in-firefly{0%{color:#6F9257;text-shadow:none}40%{color:#F6FFD8;text-shadow:0 0 .55em rgba(155,212,90,1),0 0 .15em rgba(230,255,180,.95)}100%{text-shadow:0 0 0 rgba(155,212,90,0)}}
/* Ember: cooling. Lands as a hot ember, cools through orange to soft ash. */
.ember .ch.new{animation-name:in-ember;animation-duration:1.3s}
@keyframes in-ember{0%{color:#FFE7A6;text-shadow:0 0 .5em rgba(255,150,50,.95)}35%{color:#FF9A55;text-shadow:0 0 .35em rgba(255,110,40,.6)}100%{text-shadow:0 0 0 rgba(255,110,40,0)}}
/* Frost: crystal. Thick crisp frost that clears to ice. */
.frost .ch.new{animation-name:in-frost;animation-duration:.9s}
@keyframes in-frost{from{color:#FFFFFF;text-shadow:.6px 0 0 #fff,-.6px 0 0 #fff,0 .6px 0 #fff,0 -.6px 0 #fff,0 0 .35em rgba(220,240,255,.9)}to{text-shadow:0 0 0 rgba(255,255,255,0),0 0 0 rgba(255,255,255,0),0 0 0 rgba(255,255,255,0),0 0 0 rgba(255,255,255,0),0 0 0 rgba(220,240,255,0)}}


/* ---------- materials ---------- */
.velvet{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:20px;line-height:1.3;color:#F6E3EA;background:linear-gradient(160deg,rgba(96,28,54,.93),rgba(52,14,32,.93));border-radius:16px}
.linen{font-family:"Lora",Georgia,serif;font-size:18px;line-height:1.4;color:#4A3E2A;border-radius:6px;
  background:repeating-linear-gradient(0deg,rgba(120,100,60,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,100,60,.07) 0 1px,transparent 1px 3px),#EDE3CF}
.porcelain{font-family:"Gilda Display",Georgia,serif;font-size:19px;line-height:1.35;color:#2F4A42;background:linear-gradient(180deg,#FBFDFC,#E6EFEA);border:1px solid rgba(127,179,160,.65);border-radius:22px}
.graphite{font-family:"Kalam",cursive;font-size:19px;line-height:1.35;color:#3C4048;border-radius:4px;background:linear-gradient(rgba(140,150,170,.14) 1px,transparent 1px) 0 .2em/100% 1.35em,#F7F7F4}
/* ---------- feelings ---------- */
.tender{font-family:"Nunito",system-ui,sans-serif;font-weight:500;font-size:18px;line-height:1.4;color:#6B3A2E;background:rgba(255,236,226,.95);border-radius:24px}
.giddy{font-family:"Fredoka",system-ui,sans-serif;font-weight:500;font-size:19px;line-height:1.3;color:#3A1F4A;background:#FFF8E8;border:2px dotted rgba(217,107,255,.55);border-radius:20px}
.melancholy{font-family:"EB Garamond",Georgia,serif;font-style:italic;font-size:20px;line-height:1.3;color:#DCE5F0;background:rgba(40,52,70,.84);border-radius:14px}
/* ---------- poets ---------- */
.dickinson{font-family:"IM Fell English",Georgia,serif;font-style:italic;font-size:20px;line-height:1.3;color:#3B2A1C;background:#EFE3CC;border-radius:2px}
.sappho{font-family:"Cinzel",Georgia,serif;font-size:16px;letter-spacing:.06em;line-height:1.5;color:#7A3420;background:#E9DCC0;border-radius:6px}
.basho{font-family:"Shippori Mincho",Georgia,serif;font-size:19px;line-height:1.45;color:#1E1C1A;background:#F4EFE6;border-radius:3px}
.b.basho.sent{padding-right:26px}
.b.basho.sent::before{content:"";position:absolute;right:9px;bottom:9px;width:8px;height:8px;border-radius:1px;background:#C8102E;opacity:.8}
.sw.velvet,.sw.linen,.sw.porcelain,.sw.graphite,.sw.tender,.sw.giddy,.sw.melancholy,.sw.dickinson,.sw.sappho,.sw.basho{font-size:inherit;letter-spacing:normal;padding-right:14px}

/* ---------- their letters arriving ---------- */
/* Velvet: dark, then a soft sheen as the nap is brushed, then settled */
.velvet .ch.new{animation-name:in-velvet;animation-duration:1.1s}
@keyframes in-velvet{0%{color:#6E2440;text-shadow:none}45%{color:#FFD7E6;text-shadow:0 0 .3em rgba(255,190,215,.55)}100%{text-shadow:0 0 0 rgba(255,190,215,0)}}
/* Linen: a dashed thread underline, just stitched, that fades */
.linen .ch.new{animation-name:in-linen;animation-duration:1.1s;text-decoration:underline dashed transparent;text-decoration-thickness:1.5px;text-underline-offset:.2em}
@keyframes in-linen{from{color:#9C8458;text-decoration-color:rgba(156,132,88,.95)}to{text-decoration-color:rgba(156,132,88,0)}}
/* Porcelain: pale clay, then a flash of celadon glaze */
.porcelain .ch.new{animation-name:in-porcelain;animation-duration:1s}
@keyframes in-porcelain{0%{color:#C5D3CD;text-shadow:none}45%{color:#3E8C76;text-shadow:0 -1px 0 rgba(255,255,255,1),0 0 .3em rgba(127,179,160,.55)}100%{text-shadow:0 -1px 0 rgba(255,255,255,0),0 0 0 rgba(127,179,160,0)}}
/* Graphite: loose faint strokes that firm up */
.graphite .ch.new{animation-name:in-graphite;animation-duration:.9s}
@keyframes in-graphite{from{opacity:.4;text-shadow:.7px .4px 0 rgba(60,64,72,.4),-.6px -.3px 0 rgba(60,64,72,.35),.3px -.7px 0 rgba(60,64,72,.3)}to{opacity:1;text-shadow:0 0 0 rgba(60,64,72,0),0 0 0 rgba(60,64,72,0),0 0 0 rgba(60,64,72,0)}}
/* Tender: a slow fade, like a breath */
.tender .ch.new{animation-name:in-tender;animation-duration:1.7s;animation-timing-function:ease-out}
@keyframes in-tender{from{opacity:.06;color:#F6B38C}to{opacity:1}}
/* Giddy: each letter lands in a bright colour, then settles */
.giddy .ch.new{animation-name:in-giddy;animation-duration:.95s;--pop:#FF5FA2}
.giddy .ch.new:nth-child(5n+2){--pop:#FFB020}
.giddy .ch.new:nth-child(5n+3){--pop:#3CC9A8}
.giddy .ch.new:nth-child(5n+4){--pop:#4D8BFF}
.giddy .ch.new:nth-child(5n){--pop:#D96BFF}
@keyframes in-giddy{from{color:var(--pop);text-shadow:0 0 .22em var(--pop)}to{text-shadow:0 0 0 transparent}}
/* Melancholy: a soft tear-like shadow slides down and fades */
.melancholy .ch.new{animation-name:in-melancholy;animation-duration:1.4s}
@keyframes in-melancholy{from{color:#AFC1D8;text-shadow:0 .1em .12em rgba(130,160,200,.7)}to{text-shadow:0 .55em .35em rgba(130,160,200,0)}}
/* Dickinson: blind-embossed into the paper first, then the ink fills */
.dickinson .ch.new{animation-name:in-emboss;animation-duration:1.15s}
@keyframes in-emboss{0%,40%{color:#EFE3CC;text-shadow:-1px -1px 0 rgba(255,255,255,.95),1px 1px 0 rgba(90,60,30,.32)}100%{text-shadow:-1px -1px 0 rgba(255,255,255,0),1px 1px 0 rgba(90,60,30,0)}}
/* Sappho: fragments assembling, each letter at its own pace */
.sappho .ch.new{animation-name:in-fragment;animation-duration:1.1s;--from:.22}
.sappho .ch.new:nth-child(3n){animation-duration:1.5s;--from:.04}
.sappho .ch.new:nth-child(3n+1){animation-duration:.7s;--from:.5}
@keyframes in-fragment{from{opacity:var(--from);filter:blur(.4px)}to{opacity:1;filter:blur(0)}}
/* Basho: a pale ink wash that deepens to sumi black */
.basho .ch.new{animation-name:in-basho;animation-duration:1.2s}
@keyframes in-basho{0%{color:#B9B3AA;filter:blur(.7px)}40%{filter:blur(0)}100%{filter:blur(0)}}

/* ---------- places ---------- */
.platform{font-family:"Space Mono",ui-monospace,monospace;font-weight:700;font-size:16px;line-height:1.5;letter-spacing:.02em;color:#FFD84A;background:linear-gradient(transparent calc(50% - .5px),rgba(255,255,255,.05) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),#141414;border-radius:6px}
.aurora{font-family:"Raleway",system-ui,sans-serif;font-weight:300;font-size:19px;line-height:1.4;letter-spacing:.02em;color:#EAF7FF;background:linear-gradient(170deg,rgba(14,22,48,.9),rgba(12,44,52,.9));border-radius:18px}
.dunes{font-family:"Bellefair",Georgia,serif;font-size:20px;line-height:1.3;color:#5A2A1E;background:linear-gradient(165deg,#F4DCB4,#EDB89A);border-radius:20px 20px 20px 6px}
.darkroom{font-family:"Archivo Narrow",system-ui,sans-serif;font-weight:500;font-size:18px;line-height:1.35;color:#1A0807;background:#C9473F;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.tidepool{font-family:"Comfortaa",system-ui,sans-serif;font-weight:500;font-size:17px;line-height:1.45;color:#E6FFFB;background:linear-gradient(180deg,rgba(28,140,140,.9),rgba(10,78,96,.92));border-radius:22px}
.sw.platform,.sw.aurora,.sw.dunes,.sw.darkroom,.sw.tidepool{font-size:inherit;letter-spacing:normal;padding-right:14px}
.sw.platform b{font-size:22px}

/* Platform: a departure board. The top half of each letter flips in, then the bottom. */
.platform .ch.new{animation-name:in-platform;animation-duration:.55s;animation-timing-function:steps(1,end)}
@keyframes in-platform{0%{clip-path:inset(0 0 52% 0);color:#FFF1B0}45%{clip-path:inset(0 0 0 0);color:#FFF1B0}100%{clip-path:inset(0 0 0 0)}}
/* Aurora: each letter drifts through sky colours, green then violet, before it settles. */
.aurora .ch.new{animation-name:in-aurora;animation-duration:1.5s;animation-timing-function:ease-in-out}
@keyframes in-aurora{0%{color:#5CFFB0;text-shadow:0 0 .4em rgba(92,255,176,.8)}50%{color:#B48CFF;text-shadow:0 0 .4em rgba(180,140,255,.65)}100%{text-shadow:0 0 0 rgba(180,140,255,0)}}
/* Dunes: heat haze. Two warm ghost copies either side draw together into the letter. */
.dunes .ch.new{animation-name:in-dunes;animation-duration:1.1s}
@keyframes in-dunes{from{color:#C9683A;text-shadow:-.14em 0 .06em rgba(224,122,63,.5),.14em 0 .06em rgba(217,69,158,.4)}to{text-shadow:0 0 0 rgba(224,122,63,0),0 0 0 rgba(217,69,158,0)}}
/* Darkroom: a print developing in the tray. Starts the colour of the paper, then darkens. */
.darkroom .ch.new{animation-name:in-darkroom;animation-duration:1.9s;animation-timing-function:ease-in}
@keyframes in-darkroom{0%{color:#D45A51}55%{color:#8E2C26}100%{}}
/* Tidepool: light ripples beneath each letter as it surfaces. */
.tidepool .ch.new{animation-name:in-tidepool;animation-duration:1.3s;animation-timing-function:ease-in-out}
@keyframes in-tidepool{0%{color:#9FF7EA;text-shadow:0 .14em .16em rgba(190,255,246,.9)}35%{text-shadow:0 -.08em .2em rgba(190,255,246,.6)}70%{text-shadow:0 .1em .22em rgba(190,255,246,.35)}100%{text-shadow:0 0 0 rgba(190,255,246,0)}}

/* letters leaving: a ghost copy fades where the letter was; a few styles leave in character */
#ghosts{position:fixed;inset:0;pointer-events:none;z-index:4}
.ghost{position:fixed;display:inline-block;white-space:pre;line-height:normal;background:none!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:fade-out .28s ease-out forwards}
@keyframes fade-out{to{opacity:0;filter:blur(1px)}}
.ghost.moonpool{animation-name:out-moon}
@keyframes out-moon{to{opacity:0;filter:blur(3px)}}
.ghost.neon{animation-name:out-neon}
@keyframes out-neon{to{opacity:.0;color:transparent;-webkit-text-stroke:1px rgba(255,190,150,.5);text-shadow:none}}
.ghost.ember{animation-name:out-ember;animation-duration:.4s}
@keyframes out-ember{to{opacity:0;color:#8C8078;transform:translateY(-.2em)}}
.ghost.platform{animation-name:out-platform;animation-duration:.3s;animation-timing-function:steps(1,end)}
@keyframes out-platform{0%{clip-path:inset(0 0 0 0)}50%{clip-path:inset(52% 0 0 0)}100%{clip-path:inset(52% 0 0 0);opacity:0}}
.ghost.darkroom{animation-name:out-darkroom;animation-duration:.5s}
@keyframes out-darkroom{to{opacity:0;color:#D45A51}}

/* the cursor glows faintly in its owner's colour */
.caret{box-shadow:0 0 6px rgba(var(--lamp),.75)}

/* sending: one slow, faint sweep of light across the bubble as it settles */
.b{position:relative}
.b.sealed::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(var(--lamp),.28) 50%,transparent 65%) no-repeat;background-size:250% 100%;
  animation:seal .9s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes seal{from{background-position:120% 0;opacity:1}to{background-position:-20% 0;opacity:0}}
@media (prefers-reduced-motion:reduce){.ch.new,.b.draft.appear,.b.draft.idle .caret,.b.sealed::after{animation:none}}