:root{
  --ink:#191826;
  --ink-soft:#211F32;
  --ink-soft2:#2A283C;
  --paper:#F1EBE0;
  --paper-dim:#C3BDCC;
  --muted:#9C98AC;
  --accent:#E6BE55;
  --line:rgba(241,235,224,.10);
  --line-strong:rgba(241,235,224,.20);
  --radius:16px;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* keep hidden even when a display rule would override it */
html,body{ margin:0; padding:0; }
body{
  background:var(--ink); color:var(--paper);
  font-family:"Inter",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh;
}
body.locked{ overflow:hidden; }
.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; }

#ambient{
  position:fixed; inset:-25%; z-index:0; pointer-events:none;
  filter:blur(48px); transition:background .8s ease;
  animation:drift 36s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(-2%,-1%,0) scale(1.02); }
  to{ transform:translate3d(3%,2%,0) scale(1.08); }
}

.app{ position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }

/* ---- top bar ---- */
/* padding-top folds in the iOS status-bar / notch inset so the header never hides under it
   (the page uses viewport-fit=cover + black-translucent status bar in the installed PWA). */
.bar{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:calc(18px + env(safe-area-inset-top)) max(clamp(16px,5vw,48px), env(safe-area-inset-right)) 18px max(clamp(16px,5vw,48px), env(safe-area-inset-left)); }
.brand{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.brand b{ color:var(--paper-dim); font-weight:500; }
.bar-right{ display:flex; align-items:center; gap:14px; }
.day{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.actions{ display:flex; gap:6px; }
.icon-btn{
  appearance:none; cursor:pointer; position:relative; width:36px; height:36px; border-radius:10px;
  background:transparent; border:1px solid var(--line); color:var(--paper-dim);
  font-size:1rem; line-height:1; display:grid; place-items:center;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .12s ease;
}
.icon-btn.has-stir::after{ content:''; position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--ink); }
.icon-btn:hover{ color:var(--paper); border-color:var(--line-strong); background:var(--ink-soft); }
.icon-btn:active{ transform:scale(.94); }
/* keep the header tidy on phones: the date is decorative, so it steps aside first */
@media (max-width:520px){
  .bar{ gap:8px; padding:calc(16px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 16px max(14px, env(safe-area-inset-left)); }
  .day{ display:none; }
  .actions{ gap:5px; }
  .icon-btn{ width:33px; height:33px; }
}

/* ---- main stage ---- */
main{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px clamp(16px,6vw,48px) 40px; text-align:center; }

.avatar{ width:clamp(108px,26vw,160px); height:clamp(108px,26vw,160px); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.avatar svg{ width:100%; height:100%; display:block; overflow:visible; }
/* only procedural creatures breathe — a photo or cut-out drawing sits still (breathing a face is uncanny) */
.avatar svg.creature{ animation:alive 6s ease-in-out infinite; transform-origin:center 66%; }
.swap .avatar{ animation:pop .5s cubic-bezier(.2,.7,.2,1); }
@keyframes pop{ 0%{ transform:scale(.8); opacity:.2; } 100%{ transform:scale(1); opacity:1; } }
/* the gentle "living" idle — a soft breath and sway, so companions feel awake */
@keyframes alive{ 0%{ transform:scale(1) rotate(0); } 25%{ transform:scale(1.025) rotate(-1.1deg); } 50%{ transform:scale(1.035) rotate(0); } 75%{ transform:scale(1.025) rotate(1.1deg); } 100%{ transform:scale(1) rotate(0); } }

/* two-companion stage: the speaker (author), and — for someone else's line — you, receiving */
.stage{ display:flex; align-items:center; justify-content:center; }
/* The speaking companion always sits dead-centre. When the line is from someone else,
   your companion appears as a small "↝ you" badge tucked at the speaker's upper-right,
   rather than pushing the speaker off to the side. */
.recv{ position:absolute; top:2px; left:calc(50% + clamp(40px,10vw,64px)); display:flex; align-items:center; gap:1px; animation:recv-in .7s .2s cubic-bezier(.2,.7,.2,1) both; }
.recv[hidden]{ display:none; }
.recv-arc{ color:var(--muted); font-size:.95rem; opacity:.55; }
.avatar-mini{ width:clamp(46px,11vw,60px); height:clamp(46px,11vw,60px); }
.avatar-mini svg{ width:100%; height:100%; display:block; overflow:visible; }
@keyframes recv-in{ from{ opacity:0; transform:translate(-6px,6px) scale(.9); } to{ opacity:1; transform:none; } }

.who{ margin-top:10px; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; }
.who .name{ font-family:"Fraunces",serif; font-weight:500; font-size:1.35rem; color:var(--accent); transition:color .5s ease; }
.who .tag{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.fav{
  appearance:none; cursor:pointer; background:transparent; border:0; padding:2px 6px; margin-top:2px;
  color:var(--muted); font-size:.95rem; line-height:1; opacity:.5; transition:opacity .2s ease, color .2s ease, transform .12s ease;
}
.fav:hover{ opacity:1; color:var(--paper-dim); }
.fav[aria-pressed="true"]{ opacity:1; color:var(--accent); }
.fav:active{ transform:scale(.9); }

blockquote{ margin:24px 0 0; max-width:24ch; display:flex; flex-direction:column; align-items:center; gap:14px; }
.q-text{
  font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-weight:400; font-style:italic;
  font-size:clamp(1.5rem,3.4vw + .7rem,2.7rem); line-height:1.26; letter-spacing:-.01em;
  margin:0; color:var(--paper);
}
.swap .q-text{ animation:rise .7s cubic-bezier(.2,.7,.2,1); }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); filter:blur(7px); } to{ opacity:1; transform:translateY(0); filter:blur(0); } }
.q-actions{ display:flex; gap:8px; opacity:.65; transition:opacity .2s ease; }
.q-actions:hover{ opacity:1; }
.mini{
  appearance:none; cursor:pointer; width:30px; height:30px; border-radius:50%;
  background:transparent; border:1px solid var(--line); color:var(--paper-dim); font-size:.85rem;
  display:grid; place-items:center; transition:border-color .2s ease, color .2s ease, transform .12s ease;
}
.mini:hover{ color:var(--paper); border-color:var(--line-strong); }
.mini:active{ transform:scale(.9) rotate(8deg); }
.mini[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); }
.back-today{
  appearance:none; cursor:pointer; margin-top:12px; background:transparent; border:0;
  color:var(--muted); font-family:inherit; font-size:.78rem; letter-spacing:.02em; text-decoration:underline;
  text-underline-offset:3px; transition:color .2s ease;
}
.back-today:hover{ color:var(--paper-dim); }
.back-today[hidden]{ display:none; }

/* ---- category chips ---- */
.chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:42px; max-width:640px; }
.chip{
  appearance:none; cursor:pointer; padding:6px 13px; border-radius:999px;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font-size:.72rem; letter-spacing:.06em; transition:all .18s ease;
}
.chip:hover{ color:var(--paper-dim); border-color:var(--line-strong); }
.chip[aria-pressed="true"]{ color:var(--ink); background:var(--accent); border-color:var(--accent); font-weight:600; }

/* ---- picker ---- */
.picker{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:20px; max-width:560px; max-height:188px; overflow-y:auto; padding:6px 2px; }
.picker::-webkit-scrollbar{ width:6px; }
.picker::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:3px; }
.pick{
  appearance:none; background:transparent; cursor:pointer; padding:0;
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  border:2px solid transparent; transition:border-color .2s ease, transform .15s ease, opacity .2s ease;
  opacity:.82;
}
.pick svg{ width:100%; height:100%; display:block; }
.pick:hover{ opacity:1; transform:translateY(-2px); }
.pick[aria-pressed="true"]{ opacity:1; }
.hint{ font-size:.76rem; color:var(--muted); margin-top:14px; }

/* ---- overlay / sheet ---- */
.overlay{
  position:fixed; inset:0; z-index:20; display:none; align-items:flex-end; justify-content:center;
  background:rgba(10,9,16,.55); backdrop-filter:blur(4px);
}
.overlay.open{ display:flex; }
.sheet{
  width:min(540px,100%); max-height:86vh; max-height:86dvh; overflow-y:auto;
  background:var(--ink-soft); border:1px solid var(--line); border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0; padding:20px clamp(18px,4vw,28px) calc(24px + env(safe-area-inset-bottom));
  animation:slideup .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes slideup{ from{ transform:translateY(24px); opacity:.4; } to{ transform:translateY(0); opacity:1; } }
@media (min-width:640px){ .overlay{ align-items:center; } .sheet{ border-radius:var(--radius); border-bottom:1px solid var(--line); } }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.sheet-head h3{ font-family:"Fraunces",serif; font-weight:500; font-size:1.25rem; margin:0; color:var(--paper); }
.sheet-body{ display:block; }

/* ---- forms ---- */
.form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field-label{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.input{
  width:100%; background:var(--ink); color:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; font-family:inherit; font-size:.95rem; resize:vertical;
  transition:border-color .2s ease;
}
.input:focus{ outline:none; border-color:var(--accent); }
select.input{ appearance:none; cursor:pointer; }

.form-hint{ font-size:.78rem; color:var(--muted); line-height:1.5; margin-top:-4px; }
.char-count{ text-align:right; margin-top:2px; min-height:1em; }

/* write-a-line header: your companion beside the box */
.write-head{ display:flex; align-items:center; gap:12px; }
.write-av{ width:44px; height:44px; flex:0 0 auto; }
.write-av svg{ width:100%; height:100%; overflow:visible; }
.write-who{ display:flex; flex-direction:column; }
.write-who b{ font-family:"Fraunces",serif; font-weight:500; color:var(--paper); }
.write-who span{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* onboarding ("this is you") is not dismissible until you've built your companion */
.overlay.onboarding #sheet-close{ display:none; }

/* ---- welcome ---- */
.welcome{ display:flex; flex-direction:column; gap:16px; }
.welcome-lede{ font-family:"Fraunces",serif; font-style:italic; font-size:1.15rem; line-height:1.4; color:var(--paper); margin:0; }
.welcome-keys{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.welcome-keys li{ display:flex; align-items:center; gap:12px; color:var(--paper-dim); font-size:.92rem; }
.welcome-keys b{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border:1px solid var(--line); border-radius:10px; color:var(--accent); font-weight:400; }
.welcome-maph{ margin:-4px 0 0; font-size:.82rem; color:var(--muted); }
.welcome-tip{ margin:0; font-size:.82rem; color:var(--muted); }

.quote-card-wrap{ text-align:center; }
.quote-card-wrap .invite-card{ width:min(300px,74vw); margin:0 auto; }

.choices{ display:flex; flex-wrap:wrap; gap:8px; }
.emoji{
  appearance:none; cursor:pointer; width:42px; height:42px; border-radius:12px; font-size:1.25rem;
  background:var(--ink); border:1px solid var(--line); display:grid; place-items:center; transition:all .15s ease;
}
.emoji:hover{ border-color:var(--line-strong); }
.emoji.on{ border-color:var(--accent); background:var(--ink-soft2); transform:translateY(-1px); }
.swatch{
  appearance:none; cursor:pointer; width:34px; height:34px; border-radius:50%;
  border:2px solid transparent; box-shadow:0 0 0 1px var(--line) inset; transition:transform .15s ease, border-color .15s ease;
}
.swatch:hover{ transform:scale(1.08); }
.swatch.on{ border-color:var(--paper); }

.char-preview{ align-self:center; width:96px; height:96px; }
.char-preview svg{ width:100%; height:100%; }

/* ---- maker ---- */
.maker-stage{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.maker-preview{ width:132px; height:132px; }
.maker-preview svg{ width:100%; height:100%; display:block; overflow:visible; animation:pop .4s cubic-bezier(.2,.7,.2,1); }
.maker-roll{ border-radius:999px; }
.maker-slots{ display:flex; flex-direction:column; gap:14px; }
.maker-slot{ display:flex; flex-direction:column; gap:8px; }
.maker-strip{ display:flex; gap:8px; overflow-x:auto; padding:9px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.maker-strip::-webkit-scrollbar{ height:6px; }
.maker-strip::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:3px; }
.swatch-opt{
  appearance:none; cursor:pointer; flex:0 0 auto; width:54px; height:54px; padding:3px; scroll-snap-align:start;
  border-radius:12px; background:var(--ink); border:1.5px solid var(--line);
  transition:border-color .15s ease, transform .12s ease, background .15s ease;
}
.swatch-opt svg{ width:100%; height:100%; display:block; overflow:visible; }
.swatch-opt:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.swatch-opt.on{ border-color:var(--accent); background:var(--ink-soft2); }
.cheek-row{ flex-direction:row; align-items:center; justify-content:space-between; }
.pill-toggle{
  appearance:none; cursor:pointer; padding:8px 16px; border-radius:999px; font-family:inherit; font-size:.82rem;
  background:var(--ink); border:1px solid var(--line); color:var(--paper-dim); transition:all .15s ease;
}
.pill-toggle:hover{ border-color:var(--line-strong); color:var(--paper); }
.pill-toggle[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }

/* ---- maker: two doors, feel row, byo, checkmarks ---- */
.maker-tabs{ display:flex; gap:6px; background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:16px; }
.maker-tab{ flex:1; appearance:none; cursor:pointer; border:0; background:transparent; color:var(--paper-dim); font-family:inherit; font-size:.86rem; font-weight:500; padding:9px 10px; border-radius:9px; transition:background .15s ease, color .15s ease; }
.maker-tab.on{ background:var(--ink-soft2); color:var(--paper); }

.feel-row{ display:flex; gap:8px; overflow-x:auto; padding:9px 8px 10px; scroll-snap-type:x proximity; }
.feel-row::-webkit-scrollbar{ height:6px; }
.feel-row::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:3px; }
.feel-opt{ appearance:none; cursor:pointer; flex:0 0 auto; width:68px; padding:6px 4px 7px; border-radius:12px; background:var(--ink); border:1.5px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; scroll-snap-align:start; transition:border-color .15s ease, background .15s ease; }
.feel-opt .feel-thumb{ width:46px; height:46px; display:block; }
.feel-opt .feel-thumb svg{ width:100%; height:100%; overflow:visible; }
.feel-opt .feel-name{ font-size:.64rem; color:var(--muted); letter-spacing:.02em; white-space:nowrap; }
.feel-opt.on{ border-color:var(--accent); background:var(--ink-soft2); }
.feel-opt.on .feel-name{ color:var(--paper-dim); }

/* a checkmark on the chosen part — so "selected" is never colour-only */
.swatch-opt, .feel-opt, .frame-color{ position:relative; }
.swatch-opt.on::after, .feel-opt.on::after, .frame-color.on::after{
  content:'✓'; position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%;
  background:var(--accent); color:var(--ink); font-size:10px; line-height:16px; text-align:center; font-weight:700;
  box-shadow:0 0 0 2px var(--ink-soft);
}

.byo-preview{ display:grid; place-items:center; min-height:140px; }
.byo-preview svg{ width:132px; height:132px; overflow:visible; }
.byo-crop{ width:min(220px,66vw); height:min(220px,66vw); border-radius:16px; background:#EDE7DA; touch-action:none; cursor:grab; }
.byo-crop:active{ cursor:grabbing; }
.byo-ctrls{ display:flex; flex-direction:column; gap:12px; align-items:center; margin-top:14px; }
.byo-zoom-wrap{ display:flex; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.byo-zoom{ width:min(220px,58vw); accent-color:var(--accent); }
.byo-treatments{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.treat-chip{ appearance:none; cursor:pointer; padding:6px 13px; border-radius:999px; background:var(--ink); border:1px solid var(--line); color:var(--paper-dim); font-family:inherit; font-size:.76rem; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.treat-chip:hover{ border-color:var(--line-strong); color:var(--paper); }
.treat-chip.on{ border-color:var(--accent); color:var(--accent); background:var(--ink-soft2); }

.byo-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.byo-draw{ margin-top:14px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.byo-canvas{ width:min(240px,72vw); height:min(240px,72vw); border-radius:14px; border:1px solid var(--line-strong); background:#EDE7DA; touch-action:none; cursor:crosshair; }
.byo-draw-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.draw-color{ appearance:none; cursor:pointer; width:26px; height:26px; border-radius:50%; border:2px solid transparent; box-shadow:0 0 0 1px var(--line) inset; }
.draw-color.on{ border-color:var(--paper); }

.frame-colors{ display:flex; gap:9px; flex-wrap:wrap; }
.frame-color{ appearance:none; cursor:pointer; width:30px; height:30px; border-radius:50%; border:2px solid transparent; box-shadow:0 0 0 1px var(--line) inset; transition:transform .12s ease; }
.frame-color:hover{ transform:scale(1.08); }
.frame-color.on{ border-color:var(--paper); }

.btn.danger{ color:#E88; border-color:rgba(232,136,136,.5); }

.btn{
  appearance:none; cursor:pointer; border-radius:12px; padding:11px 16px; font-family:inherit;
  font-size:.9rem; font-weight:500; border:1px solid var(--line); background:transparent; color:var(--paper-dim);
  transition:all .18s ease;
}
.btn:hover{ color:var(--paper); border-color:var(--line-strong); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#26200f; font-weight:600; }
.btn.primary:hover{ filter:brightness(1.06); color:#26200f; }
.btn.ghost{ background:transparent; }
.btn.small{ padding:6px 11px; font-size:.78rem; }

/* ---- collection ---- */
.collection{ display:flex; flex-direction:column; gap:8px; }
.collection h4{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:14px 0 4px; font-weight:600; }
.row{ display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--ink); }
.row-av{ width:38px; height:38px; flex:0 0 auto; }
.row-av svg{ width:100%; height:100%; }
.row-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.row-meta.wide b{ font-family:"Fraunces",serif; font-style:italic; font-weight:400; }
.row-meta b{ font-weight:500; color:var(--paper); font-size:.92rem; overflow:hidden; text-overflow:ellipsis; }
.row-meta span{ font-size:.74rem; color:var(--muted); }
.muted-row{ color:var(--muted); font-size:.85rem; padding:8px 2px; }
.account-h{ margin-top:24px; }
.person-head{ text-align:center; padding:4px 0 14px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.person-stage{ display:flex; align-items:center; justify-content:center; gap:10px; }
.person-stage .row-av{ width:56px; height:56px; }
.person-arc{ color:var(--muted); font-size:1.2rem; opacity:.6; }
.person-blurb{ color:var(--paper-dim); font-size:.9rem; font-style:italic; margin-top:10px; }
.person-acts{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.maker-sub{ color:var(--paper-dim); font-size:.88rem; line-height:1.5; margin:0 0 14px; }
.maker-fast{ margin-top:2px; }
.maker-oralt{ text-align:center; font-size:.82rem; margin:10px 0 2px; opacity:.8; }
.empty-action{ appearance:none; cursor:pointer; width:100%; text-align:left; background:none; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-family:inherit; font-size:.9rem; padding:14px; transition:border-color .15s ease, color .15s ease; }
.empty-action:hover{ border-color:var(--line-strong); color:var(--paper-dim); }
.empty-action b{ color:var(--accent); font-weight:500; }
.about-place h4{ font-family:"Fraunces",serif; font-weight:500; color:var(--paper); font-size:1rem; margin:16px 0 4px; }
.about-place h4:first-child{ margin-top:2px; }
.about-p{ color:var(--paper-dim); font-size:.9rem; line-height:1.55; margin:0; }
.stage{ position:relative; }
.stage.applause::after{ content:''; position:absolute; inset:-18%; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 50% 45%, var(--accent), transparent 60%); opacity:0; animation:applause 1.6s ease-out; }
@keyframes applause{ 0%{ opacity:0; transform:scale(.7); } 25%{ opacity:.26; } 100%{ opacity:0; transform:scale(1.25); } }

/* ---- toast ---- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,18px); z-index:40;
  background:var(--ink-soft2); color:var(--paper); border:1px solid var(--line-strong);
  padding:9px 16px; border-radius:999px; font-size:.85rem; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---- invite gate (the front door) ---- */
body.gated .app{ display:none; }
.gate{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px; opacity:0; transition:opacity .4s ease; }
.gate.show{ opacity:1; }
.gate-card{ width:min(420px,100%); background:var(--ink-soft); border:1px solid var(--line); border-radius:20px; padding:30px clamp(20px,5vw,34px) 26px; text-align:center; box-shadow:0 30px 90px rgba(0,0,0,.5); animation:slideup .4s cubic-bezier(.2,.7,.2,1); }
.gate-brand{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.gate-brand b{ color:var(--paper-dim); font-weight:500; }
.gate-title{ font-family:"Fraunces",serif; font-weight:500; font-style:italic; font-size:1.7rem; margin:0 0 10px; color:var(--paper); }
.gate-lede{ color:var(--paper-dim); font-size:.92rem; line-height:1.55; margin:0 0 22px; }
.gate .field{ text-align:left; margin-bottom:12px; }
.btn.block{ width:100%; margin-top:6px; }
.gate-msg{ font-size:.85rem; color:var(--muted); margin-top:12px; min-height:1.2em; opacity:0; transition:opacity .2s ease; }
.gate-msg.show{ opacity:1; }
.gate-msg.bad{ color:#E88; }
.gate-msg.ok{ color:var(--accent); }
.gate-foot{ font-size:.75rem; color:var(--muted); margin:20px 0 0; line-height:1.55; }
.gate-link{ appearance:none; background:none; border:0; color:var(--muted); font-family:inherit; font-size:.8rem; text-decoration:underline; cursor:pointer; margin-top:16px; }
.gate-link:hover{ color:var(--paper-dim); }
.btn.google{ background:var(--paper); color:#1f1d2b; border-color:var(--paper); font-weight:600; }
.btn.google:hover{ filter:brightness(1.03); color:#1f1d2b; }
.gate-or{ display:flex; align-items:center; gap:12px; margin:14px 0; }
.gate-or span{ color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.gate-or::before, .gate-or::after{ content:''; flex:1; height:1px; background:var(--line); }

/* ---- invite panel ---- */
.gate-overlay{ position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; background:rgba(10,9,16,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .2s ease; }
.gate-overlay.open{ opacity:1; }
.gate-sheet{ width:min(520px,100%); max-height:86dvh; overflow-y:auto; background:var(--ink-soft); border:1px solid var(--line); border-bottom:0; border-radius:var(--radius) var(--radius) 0 0; padding:20px clamp(18px,4vw,26px) calc(24px + env(safe-area-inset-bottom)); animation:slideup .28s cubic-bezier(.2,.7,.2,1); }
@media (min-width:640px){ .gate-overlay{ align-items:center; } .gate-sheet{ border-radius:var(--radius); border-bottom:1px solid var(--line); } }
.gate-sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.gate-sheet-head h3{ font-family:"Fraunces",serif; font-weight:500; margin:0; font-size:1.25rem; color:var(--paper); }
.gate-h4{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:20px 0 8px; font-weight:600; }
.invite-list{ display:flex; flex-direction:column; gap:8px; margin:6px 0; }
.invite-row{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--ink); }
.invite-row.used{ opacity:.6; }
.invite-code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.95rem; letter-spacing:.05em; color:var(--accent); }
.invite-row.used .invite-code{ color:var(--paper-dim); text-decoration:line-through; }
.invite-state{ font-size:.74rem; color:var(--muted); margin-left:auto; }
.invite-add{ margin-top:10px; }
.gate-av{ width:112px; height:112px; margin:0 auto 14px; }
.gate-av svg{ width:100%; height:100%; overflow:visible; }
.invite-av{ width:42px; height:42px; flex:0 0 auto; }
.invite-av svg{ width:100%; height:100%; overflow:visible; }
.invite-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.invite-name{ font-family:"Fraunces",serif; font-size:.92rem; color:var(--paper); }
.invite-exp{ font-size:.7rem; color:var(--muted); }
.card-sheet{ text-align:center; }
.card-name-field, .card-sheet .field{ text-align:left; margin-top:14px; }
.invite-card{ width:min(300px,72vw); margin:8px auto 2px; }
.invite-card svg{ width:100%; height:auto; display:block; border-radius:18px; }
.card-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.invite-tree{ display:flex; flex-direction:column; gap:1px; }
.tree-node{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:.9rem; }
.tree-dot{ color:var(--accent); width:12px; text-align:center; }
.tree-name{ color:var(--paper); }
.invite-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; gap:12px; }
.row-acts{ display:flex; gap:6px; flex:0 0 auto; }

/* ---- The Commons (forums / debates / chat) ---- */
.input.area{ resize:vertical; min-height:64px; font-family:inherit; line-height:1.5; }
.btn.on{ border-color:var(--accent); color:var(--accent); }
.commons-sheet{ width:min(560px,100%); }
.commons-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin:2px 0 14px; }
.commons-tab{ appearance:none; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); font-family:inherit; font-size:.9rem; padding:8px 12px; cursor:pointer; margin-bottom:-1px; }
.commons-tab:hover{ color:var(--paper-dim); }
.commons-tab.on{ color:var(--accent); border-bottom-color:var(--accent); }
.commons-body{ min-height:40dvh; }
.commons-lede{ color:var(--paper-dim); font-size:.9rem; line-height:1.55; margin:0 0 14px; }
.commons-h4{ font-family:"Fraunces",serif; font-weight:500; color:var(--paper); font-size:1.1rem; margin:2px 0 10px; }
.commons-list{ display:flex; flex-direction:column; gap:8px; }
.commons-card{ text-align:left; appearance:none; cursor:pointer; width:100%; display:flex; flex-direction:column; gap:3px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--ink); color:var(--paper); font-family:inherit; transition:border-color .15s ease, background .15s ease; }
.commons-card:hover{ border-color:var(--line-strong); background:var(--ink-soft); }
.commons-card-title{ font-family:"Fraunces",serif; font-size:1rem; color:var(--paper); }
.commons-card-sub{ font-size:.78rem; color:var(--muted); }
.commons-add{ margin:12px 0; }
.commons-thread-head{ display:flex; gap:10px; align-items:flex-start; margin-bottom:8px; }
.commons-post-body.clamp{ max-height:9em; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent); mask-image:linear-gradient(180deg,#000 72%,transparent); }
.commons-more{ appearance:none; background:none; border:0; color:var(--accent); cursor:pointer; font-family:inherit; font-size:.8rem; padding:4px 0; }
.commons-more:hover{ text-decoration:underline; }
.commons-body .input{ margin-bottom:10px; }
.post-foot{ display:flex; align-items:center; gap:14px; margin-top:7px; }
.post-hold{ appearance:none; background:none; border:0; cursor:pointer; color:var(--muted); font-family:inherit; font-size:.82rem; display:inline-flex; align-items:center; gap:4px; padding:2px 0; }
.post-hold.on{ color:var(--accent); }
.post-hold:hover{ color:var(--paper-dim); }
.post-linkbtn{ appearance:none; background:none; border:0; cursor:pointer; color:var(--muted); font-family:inherit; font-size:.78rem; padding:2px 0; }
.post-linkbtn:hover{ color:var(--paper-dim); text-decoration:underline; }
.post-linkbtn.danger{ color:#E88; }
.edit-box{ display:flex; flex-direction:column; gap:8px; margin:6px 0; }
.edit-row{ display:flex; align-items:center; gap:14px; }
.commons-backbar{ margin-bottom:12px; }
.commons-back{ appearance:none; background:none; border:0; color:var(--muted); font-family:inherit; font-size:.82rem; cursor:pointer; padding:2px 0; }
.commons-back:hover{ color:var(--paper-dim); }
.commons-av{ width:36px; height:36px; flex:0 0 auto; }
.commons-av svg{ width:100%; height:100%; overflow:visible; }
.commons-av.sm{ width:32px; height:32px; }
.commons-av.xs{ width:22px; height:22px; }
.commons-dm{ flex-direction:row; align-items:center; gap:10px; }
.commons-posts{ display:flex; flex-direction:column; gap:12px; margin:4px 0 16px; }
.commons-post{ display:flex; gap:10px; align-items:flex-start; }
.commons-post-main{ min-width:0; flex:1; }
.commons-post-who{ font-size:.72rem; color:var(--muted); margin-bottom:2px; }
.commons-post-body{ color:var(--paper-dim); font-size:.92rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.commons-reply{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:14px; }
.commons-reply .btn{ align-self:flex-end; }

/* debates */
.debate-when{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:6px 0 14px; }
.debate-sides{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.debate-side{ border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--ink); }
.debate-side.side-a{ border-top:2px solid #8FB08A; }
.debate-side.side-b{ border-top:2px solid #C98A72; }
.debate-side-label{ font-family:"Fraunces",serif; color:var(--paper); font-size:.92rem; margin-bottom:8px; }
.debate-speaker{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--paper-dim); margin:4px 0; }
.debate-join{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
.debate-composer{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:14px; margin-top:6px; }
.debate-composer .btn{ align-self:flex-end; }
.debate-post{ border-left:2px solid transparent; padding-left:8px; }
.debate-post.side-a{ border-left-color:#8FB08A; }
.debate-post.side-b{ border-left-color:#C98A72; }
.kind-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.kind-chip{ appearance:none; background:transparent; border:1px solid var(--line); color:var(--muted); font-family:inherit; font-size:.76rem; padding:5px 11px; border-radius:999px; cursor:pointer; }
.kind-chip:hover{ color:var(--paper-dim); border-color:var(--line-strong); }
.kind-chip.on{ background:var(--accent); border-color:var(--accent); color:#26200f; font-weight:600; }

/* chat */
.dm-view{ display:flex; flex-direction:column; }
.dm-stream{ display:flex; flex-direction:column; gap:8px; max-height:46dvh; overflow-y:auto; padding:6px 2px; margin-bottom:10px; }
.dm-msg{ display:flex; }
.dm-msg.mine{ justify-content:flex-end; }
.dm-bubble{ max-width:78%; padding:9px 13px; border-radius:14px; font-size:.92rem; line-height:1.45; background:var(--ink-soft2); color:var(--paper); border:1px solid var(--line); white-space:pre-wrap; word-wrap:break-word; }
.dm-msg.mine .dm-bubble{ background:var(--accent); color:#26200f; border-color:var(--accent); }
.dm-bar{ display:flex; gap:8px; align-items:center; border-top:1px solid var(--line); padding-top:12px; }
.dm-bar .input{ flex:1; }

/* ---- preferences (applied to <html> by prefs.js) ---- */
html[data-text="sm"]{ font-size:93.75%; }
html[data-text="lg"]{ font-size:112.5%; }
html[data-text="xl"]{ font-size:125%; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
.ambient-still #ambient{ animation:none !important; }
.high-contrast{ --muted:#C4C0D2; --paper-dim:#EAE5F1; --line:rgba(241,235,224,.20); --line-strong:rgba(241,235,224,.34); }
.readable-quotes .q-text{ font-family:"Inter",system-ui,sans-serif; font-style:normal; letter-spacing:0; line-height:1.5; }
.hide-date .day{ display:none; }
/* long words never overflow, especially at larger text sizes */
.q-text, .commons-post-body, .dm-bubble, .commons-card-title, .commons-card-sub{ overflow-wrap:anywhere; hyphens:auto; }
.q-text:focus{ outline:none; }
/* skip link — first stop for keyboard/screen-reader users */
.skip-link{ position:fixed; left:-999px; top:0; z-index:200; background:var(--accent); color:#26200f; font-weight:600; padding:10px 16px; border-radius:0 0 10px 0; text-decoration:none; }
.skip-link:focus{ left:0; }
/* more preference switches */
.still-avatars .creature{ animation:none !important; }
.readable-font, .readable-font :not(.icon-btn):not(.mini){ font-family:Verdana,Tahoma,"Segoe UI",system-ui,sans-serif !important; letter-spacing:0 !important; }
.solid-panels .gate-overlay, .solid-panels .overlay{ backdrop-filter:none !important; background:rgba(10,9,16,.82) !important; }
.solid-panels .gate-sheet, .solid-panels .sheet, .solid-panels .gate-card{ backdrop-filter:none !important; }
/* do-not-disturb reading: the quote actions rest until you reach for them */
.dnd .q-actions{ opacity:0; transition:opacity .25s ease; }
.dnd blockquote:hover .q-actions, .dnd .q-actions:focus-within{ opacity:1; }
/* comfortable measure for long prose */
.commons-post-body{ max-width:64ch; }
/* honour system accessibility signals automatically */
@media (prefers-contrast: more){ :root{ --muted:#C7C3D4; --paper-dim:#ECE7F2; --line:rgba(241,235,224,.22); --line-strong:rgba(241,235,224,.36); } }
@media (prefers-reduced-transparency: reduce){ .gate-overlay, .overlay{ backdrop-filter:none; background:rgba(10,9,16,.82); } }
@media (prefers-reduced-motion: reduce){ .gate-overlay, .gate-sheet, .commons-overlay, .overlay .sheet{ animation:none !important; transition:opacity .12s ease !important; } }
@media (pointer: coarse){ .mini, .icon-btn{ min-width:44px; min-height:44px; } }

/* settings sheet */
.prefs h4{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:18px 0 4px; font-weight:600; }
.prefs h4:first-child{ margin-top:2px; }
.pref-row{ display:flex; align-items:center; gap:14px; padding:11px 2px; border-bottom:1px solid var(--line); }
.pref-meta{ flex:1; min-width:0; }
.pref-label{ color:var(--paper); font-size:.95rem; }
.pref-hint{ color:var(--muted); font-size:.78rem; margin-top:2px; line-height:1.4; }
.pref-seg{ display:flex; gap:4px; flex:0 0 auto; }
.pref-seg-btn{ appearance:none; cursor:pointer; background:transparent; border:1px solid var(--line); color:var(--muted); font-family:inherit; font-size:.8rem; min-width:34px; padding:6px 9px; border-radius:9px; }
.pref-seg-btn:hover{ color:var(--paper-dim); border-color:var(--line-strong); }
.pref-seg-btn.on{ background:var(--accent); border-color:var(--accent); color:#26200f; font-weight:600; }
.pref-toggle{ appearance:none; cursor:pointer; flex:0 0 auto; width:46px; height:27px; border-radius:999px; background:var(--ink); border:1px solid var(--line-strong); position:relative; transition:background .18s ease; }
.pref-toggle .pref-knob{ position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:var(--paper-dim); transition:transform .18s ease, background .18s ease; }
.pref-toggle.on{ background:var(--accent); border-color:var(--accent); }
.pref-toggle.on .pref-knob{ transform:translateX(19px); background:#26200f; }

/* stirrings (activity) */
.commons-tab.has-stir::after{ content:'•'; color:var(--accent); margin-left:5px; font-size:1.1em; line-height:0; }
.stir-row.stir-flat{ cursor:default; }
.stir-row.stir-flat:hover{ background:var(--ink); border-color:var(--line); }
.stir-row.unread .commons-card-title::before{ content:'•'; color:var(--accent); margin-right:7px; }

/* ---- ambient mode (leave it on your screen) ---- */
.ambient-mode{ position:fixed; inset:0; z-index:80; background:var(--ink); display:grid; place-items:center; opacity:0; transition:opacity .5s ease; overflow:hidden; cursor:default; }
.ambient-mode.show{ opacity:1; }
.ambient-float{ display:flex; flex-direction:column; align-items:center; gap:clamp(24px,4vw,40px); padding:24px; text-align:center; animation:amb-drift 38s ease-in-out infinite alternate; will-change:transform; }
.ambient-av{ width:min(260px,46vw); height:min(260px,46vw); }
.ambient-av svg{ width:100%; height:100%; overflow:visible; }
.ambient-av svg.creature{ animation:alive 6s ease-in-out infinite; transform-origin:center 66%; }
.ambient-quote{ font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(1.4rem,3.2vw + .5rem,2.6rem); line-height:1.3; color:var(--paper); max-width:20ch; margin:0; transition:opacity .6s ease; }
.ambient-name{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:-6px; }
.ambient-exit{ position:fixed; top:calc(16px + env(safe-area-inset-top)); right:16px; z-index:2; appearance:none; cursor:pointer; width:40px; height:40px; border-radius:12px; background:rgba(241,235,224,.06); border:1px solid var(--line); color:var(--paper-dim); font-size:1rem; display:grid; place-items:center; transition:opacity .3s ease; opacity:.4; }
.ambient-exit:hover{ opacity:1; }
.ambient-hint{ position:fixed; bottom:calc(20px + env(safe-area-inset-bottom)); left:0; right:0; text-align:center; font-size:.72rem; color:var(--muted); pointer-events:none; opacity:.5; }
@keyframes amb-drift{ from{ transform:translate(-4vw,-2.5vh) scale(1); } to{ transform:translate(4vw,3vh) scale(1.03); } }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

@media (prefers-reduced-motion: reduce){
  #ambient{ animation:none; }
  /* catch-all: near-zero every animation & transition (sheets, gate, maker pop, drift) */
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}