/* ═══════════════════════════════════════════════════════════════════════
   THRYMLABS — session-creation app. "Carved from Night."

   One material (night-glass), one light (13%/2%), one breath (12s).
   A glass sidebar of saved tracks, a calm reading column, and an artifact
   panel that slides in from the right for the pipeline and the player.

   Monochrome. Deep dark. Liquid glass with real depth. Vanilla CSS, no build.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Moonlight ink — the only "color" is luminance over the void */
  --ink:      #f4f6f8;
  --ink-1:    rgba(244, 246, 248, 0.92);
  --ink-2:    rgba(244, 246, 248, 0.66);
  --ink-3:    rgba(244, 246, 248, 0.62);   /* informational small text — AA over the field */
  --ink-decor: rgba(244, 246, 248, 0.38);  /* purely decorative dim labels (non-text) */
  --ink-4:    rgba(244, 246, 248, 0.24);
  --ink-on:   #060708;                       /* ink on a porcelain surface */

  /* The void — deeper than before, not pure black */
  --base:     #060708;
  --base-2:   #0a0a0d;
  /* The ambient light the glass panels refract. MUST match FIELD_IMG in
     liquid-glass.js so each panel's refracted copy aligns with the field. */
  --lg-field-img:
    radial-gradient(46% 50% at 13% 2%, rgba(255,255,255,0.20), rgba(255,255,255,0.055) 40%, transparent 66%),
    radial-gradient(44% 48% at 98% 120%, rgba(255,255,255,0.12), transparent 60%);

  /* Hairlines / fills */
  --hair:     rgba(244, 246, 248, 0.09);
  --hair-2:   rgba(244, 246, 248, 0.16);
  --fill-1:   rgba(244, 246, 248, 0.03);
  --fill-2:   rgba(244, 246, 248, 0.055);
  --fill-3:   rgba(244, 246, 248, 0.09);

  /* Glass II material */
  --glass-fill:    rgba(244, 246, 248, 0.045);
  --glass-fill-2:  rgba(244, 246, 248, 0.065);
  --well:          rgba(0, 0, 0, 0.42);
  /* Dispersion fringe — the one place light may show a temperature */
  --disp-warm:     rgba(255, 214, 190, 0.14);
  --disp-cool:     rgba(190, 214, 255, 0.14);

  /* Blur ladder — closer to the eye = more blur */
  --blur-1: 16px;
  --blur-2: 28px;
  --blur-3: 44px;

  /* Elevation — diffuse drop + slab depth (sheen above, density below) */
  --sheen:  inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 -14px 30px -22px rgba(0, 0, 0, 0.55);
  --elev-1: 0 4px 14px -8px rgba(0, 0, 0, 0.7), var(--sheen);
  --elev-2: 0 20px 48px -28px rgba(0, 0, 0, 0.88), 0 4px 16px -10px rgba(0, 0, 0, 0.6), var(--sheen);
  --elev-3: 0 48px 110px -44px rgba(0, 0, 0, 0.92), 0 16px 40px -20px rgba(0, 0, 0, 0.7), var(--sheen);

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;

  /* Radii — generous, soft, consistent */
  --r-xs: 9px; --r-sm: 13px; --r-md: 17px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* Layout */
  --sidebar-w:  272px;
  --artifact-w: 460px;
  --read-w:     760px;
  --gap:        14px;

  /* Motion — weighted, organic; every overshoot curve purged */
  --ease:        cubic-bezier(0.22, 0.7, 0.16, 1);   /* settle — surfaces entering */
  --ease-soft:   cubic-bezier(0.4, 0.1, 0.2, 1);     /* soft — state changes */
  --ease-spring: cubic-bezier(0.3, 0.9, 0.3, 1);     /* ex-spring, now overshoot-free */
  --breath-ease: cubic-bezier(0.37, 0, 0.63, 1);     /* both turns of the breath */
  --dur-1: 0.2s; --dur-2: 0.42s; --dur-3: 0.66s; --dur-slow: 0.9s;

  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Marcellus", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  background: var(--base);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
::selection { background: var(--ink); color: var(--ink-on); }

/* ── The field: one slow light source + a faint grain to refract ───────── */
.field {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background-color: var(--base);
  background-image: var(--lg-field-img);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  background-position: 0 0;
}
/* Subliminal life on slow harmonics of the 12s breath (×3, ×4). */
.field__light {
  position: absolute; inset: -12%;
  background: radial-gradient(36% 40% at 30% 22%, rgba(255, 255, 255, 0.05), transparent 62%);
  animation: drift 36s var(--breath-ease) infinite alternate;
}
.field__light--2 {
  position: absolute; inset: -12%;
  background: radial-gradient(32% 38% at 74% 82%, rgba(255, 255, 255, 0.04), transparent 60%);
  animation: drift2 48s var(--breath-ease) infinite alternate;
}
@keyframes drift  { from { transform: translate3d(-4%, -2%, 0) scale(1); }    to { transform: translate3d(5%, 4%, 0) scale(1.12); } }
@keyframes drift2 { from { transform: translate3d(3%, 3%, 0) scale(1.05); }   to { transform: translate3d(-5%, -3%, 0) scale(1); } }
.field__grain {
  position: absolute; inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── The breath: one shared 12s clock — 4s in · 2s hold · 6s out ───────── */
@keyframes breath {
  0%      { transform: scale(0.955); animation-timing-function: var(--breath-ease); }
  33.333% { transform: scale(1.045); animation-timing-function: linear; }
  50%     { transform: scale(1.045); animation-timing-function: var(--breath-ease); }
  100%    { transform: scale(0.955); }
}
@keyframes breath-glow {
  0%      { opacity: 0.55; animation-timing-function: var(--breath-ease); }
  33.333% { opacity: 1;    animation-timing-function: linear; }
  50%     { opacity: 1;    animation-timing-function: var(--breath-ease); }
  100%    { opacity: 0.55; }
}
/* create.js phase-locks these with negative animation-delays (syncBreath). */
.breathes { animation: breath 12s infinite; }
.glows    { animation: breath-glow 12s infinite; }

/* ── Glass II — glass that knows where the light is ────────────────────── */
.glass {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-1)) saturate(1.4) brightness(1.06);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.4) brightness(1.06);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-2);
}
/* Light-aware bezel: a conic rim whose bright pole faces the key light
   (--lit is set per panel by liquid-glass.js; 222deg = top-left default),
   splitting into a faint warm/cool dispersion pair at the pole. */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from calc(var(--lit, 222deg) + 90deg),
    rgba(255, 255, 255, 0.60),
    var(--disp-warm) 8%,
    rgba(255, 255, 255, 0.10) 22%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.02) 55%,
    rgba(255, 255, 255, 0.12) 78%,
    var(--disp-cool) 92%,
    rgba(255, 255, 255, 0.60));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* Caustic pool — the light the slab focuses just inside its lit edge. */
.glass::after {
  content: "";
  position: absolute;
  width: 56%; height: 32px; left: 6%; top: -6px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
}
.glass--raised {
  background: var(--glass-fill-2);
  backdrop-filter: blur(var(--blur-3)) saturate(1.5) brightness(1.08);
  -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.5) brightness(1.08);
  box-shadow: var(--elev-3);
}
/* Specular streak + micro-frost inside the most important surfaces. */
.glass__sheen {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.glass__sheen::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23f)' opacity='0.05'/></svg>");
  mix-blend-mode: overlay;
}
.glass__sheen::after {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 60%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: rotate(8deg);
}

/* Real refraction: liquid-glass.js drops a viewport-aligned copy of the field
   behind each surface's content and bends it at the rim via an SVG filter. */
[data-lg] { position: relative; isolation: isolate; }
[data-lg] > .lg-refract {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

/* ── The mark: Þ in a hairline ring ────────────────────────────────────── */
.orb {
  position: relative;
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid rgba(244, 246, 248, 0.34);
  background: radial-gradient(70% 70% at 32% 24%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 62%);
  box-shadow: 0 0 34px -8px rgba(255, 255, 255, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.25),
              inset 0 -8px 16px -10px rgba(0, 0, 0, 0.6);
}
.orb::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(244, 246, 248, 0.10);
}
.orb b {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px; line-height: 1;
  color: var(--ink);
  transform: translateY(-1px);
}
.orb--sm { width: 34px; height: 34px; }
.orb--sm::after { inset: -5px; }
.orb--sm b { font-size: 16px; }

/* ── The rite of entry (view transition when the gate melts) ───────────── */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: melt 0.7s var(--ease) both;
  }
  ::view-transition-new(root) {
    animation: fade-in 0.7s var(--ease) both;
  }
}
@keyframes melt {
  to { opacity: 0; transform: scale(1.012); filter: blur(14px) brightness(1.2); }
}

/* ── Access gate — the threshold ───────────────────────────────────────── */
body[data-view="gate"] .app  { display: none; }
body[data-view="app"]  .gate { display: none; }

.gate {
  position: relative; z-index: 2;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s6);
}
/* Double bezel: the card sits in a thin tray, like a plate in machined metal. */
.gate__tray {
  border-radius: 34px;
  padding: 7px;
  background: rgba(244, 246, 248, 0.02);
  border: 1px solid rgba(244, 246, 248, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 50px 120px -50px rgba(0, 0, 0, 0.95);
  animation: surface-in var(--dur-3) var(--ease) both;
  width: 100%; max-width: 422px;
}
.gate__card {
  width: 100%;
  padding: var(--s8) var(--s8) var(--s7);
  display: flex; flex-direction: column; align-items: center; gap: var(--s5);
  text-align: center;
  border-radius: 27px;
}
.gate__card .orb { margin-bottom: calc(var(--s2) * -1); }
.gate__hint {
  margin: calc(var(--s3) * -1) 0 var(--s2);
  color: var(--ink-2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
}

/* ── Auth form (sign in / create account) — engraved wells ── */
.auth { width: 100%; display: flex; flex-direction: column; gap: var(--s3); }
.authfield {
  width: 100%;
  background: var(--well);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-sm);
  color: var(--ink); font: inherit; font-size: 15px;
  padding: 13px 16px; outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.authfield::placeholder { color: var(--ink-3); }
.authfield:focus {
  border-color: rgba(244, 246, 248, 0.34);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45),
              0 0 0 4px rgba(244, 246, 248, 0.05),
              0 10px 26px -18px rgba(255, 255, 255, 0.25);
}
/* One porcelain act: the wide submit pill with the arrow in its own ring. */
.send.send--wide {
  width: 100%; height: auto;
  border-radius: var(--r-pill);
  padding: 7px 8px 7px 22px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s3);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: var(--s2);
}
.send__label { pointer-events: none; }
.send__cap {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(6, 7, 8, 0.10);
  transition: transform var(--dur-2) var(--ease);
}
.send.send--wide:hover .send__cap { transform: translateX(2px); }

/* ── Wordmark — carved Marcellus capitals ──────────────────────────────── */
.wordmark {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 23px; line-height: 1.2;
  letter-spacing: 0.3em; text-transform: uppercase;
  padding-left: 0.3em;   /* optically recenters tracked caps */
  color: var(--ink);
}

/* Small lockup worn by the room's top bar. */
.lockup {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-right: auto;
  padding-left: var(--s2);
}
.lockup__word {
  font-family: var(--font-serif);
  font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
  padding-left: 0.28em;
  color: var(--ink-3);
}

/* ── App shell ─────────────────────────────────────────────────────────── */
.app {
  position: relative; z-index: 2;
  height: 100dvh;
  display: flex;
  gap: var(--gap);
  padding: var(--gap);
}

.scrim {
  position: fixed; inset: 0; z-index: 5;
  background: rgba(4, 4, 5, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade-in var(--dur-2) var(--ease) both;
}

/* ── Sidebar — a thin tray of night-glass ──────────────────────────────── */
.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  padding: var(--s4) var(--s3);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: width var(--dur-3) var(--ease), flex-basis var(--dur-3) var(--ease),
              opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.app.sidebar-collapsed .sidebar {
  flex-basis: 0; width: 0;
  padding-left: 0; padding-right: 0;
  opacity: 0; pointer-events: none;
}
.sidebar__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.newbtn {
  flex: 1;
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--fill-2);
  color: var(--ink-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 11px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.newbtn:hover {
  background: var(--fill-3); border-color: var(--hair-2); transform: translateY(-1px);
  box-shadow: 0 10px 26px -16px rgba(255, 255, 255, 0.2);
}
.newbtn:active { transform: translateY(0) scale(0.99); }
.newbtn svg { flex-shrink: 0; color: var(--ink-2); }

.history {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 calc(var(--s3) * -1); padding: 0 var(--s3);
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.history::-webkit-scrollbar { width: 6px; }
.history::-webkit-scrollbar-thumb { background: var(--hair); border-radius: var(--r-pill); }

.history__group { margin-top: var(--s4); }
.history__group:first-child { margin-top: var(--s1); }
.history__label {
  padding: 0 var(--s3) var(--s2);
  font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-decor);
}
.track {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 9px var(--s3);
  cursor: pointer; text-align: left;
  font: inherit; color: var(--ink-1);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  animation: track-in var(--dur-2) var(--ease) both;
}
.track:hover { background: var(--fill-1); border-color: var(--hair); }
.track.is-active { background: var(--fill-2); border-color: var(--hair-2); }
.track__glyph { flex-shrink: 0; display: flex; align-items: center; gap: 2px; height: 16px; width: 22px; }
.track__glyph i {
  display: block; width: 1.5px; border-radius: 1px;
  background: var(--ink-decor);
  height: var(--h, 40%);
  transition: background var(--dur-2) var(--ease);
}
.track.is-active .track__glyph i { background: var(--ink-1); }
.track__body {
  flex: 1; min-width: 0;
  background: transparent; border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.track__title {
  display: block;
  font-size: 13.5px; font-weight: 450;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track__meta { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); }
.track__del {
  flex-shrink: 0; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--r-xs);
  background: transparent; border: 0; color: var(--ink-3); cursor: pointer;
  opacity: 0; transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.track:hover .track__del, .track:focus-within .track__del { opacity: 1; }
.track__del:hover { color: var(--ink); background: var(--fill-2); }

.history__empty { padding: var(--s5) var(--s3); color: var(--ink-3); font-size: 12.5px; line-height: 1.7; }

.sidebar__foot {
  padding-top: var(--s3);
  margin-top: var(--s2);
  border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
}
.ghost--foot { flex: 1; text-align: center; font-size: 10px; padding: 8px 6px; border-radius: var(--r-sm); }
.ghost--foot:hover { background: var(--fill-1); }

/* ── Main / conversation column ────────────────────────────────────────── */
.main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  position: relative;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s1) var(--s2) var(--s4);
}
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: transparent; color: var(--ink-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.iconbtn:hover { background: var(--fill-2); color: var(--ink); border-color: var(--hair); }
.iconbtn--menu { display: none; margin-right: var(--s2); }
/* When the sidebar is collapsed on desktop, the menu button re-opens it. */
.app.sidebar-collapsed .iconbtn--menu { display: inline-flex; }

/* Language switch — porcelain thumb */
.lang {
  position: relative; display: inline-flex;
  padding: 3px; border: 1px solid var(--hair); border-radius: var(--r-pill);
  background: var(--fill-1);
}
.lang__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px); border-radius: var(--r-pill);
  background: var(--ink);
  box-shadow: 0 4px 12px -4px rgba(255, 255, 255, 0.4), inset 0 1px 0 #fff;
  transition: transform var(--dur-2) var(--ease);
}
.lang[data-lang="fr"] .lang__thumb { transform: translateX(100%); }
.lang__opt {
  position: relative; z-index: 1; min-width: 48px;
  background: transparent; color: var(--ink-2); border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  padding: 6px 0; cursor: pointer;
  transition: color var(--dur-2) var(--ease);
}
.lang__opt.is-active { color: var(--ink-on); }

/* Thread */
.thread {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: var(--s2) var(--s4) var(--s6);
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.thread::-webkit-scrollbar { width: 7px; }
.thread::-webkit-scrollbar-thumb { background: var(--hair); border-radius: var(--r-pill); }
.thread__inner {
  width: 100%; max-width: var(--read-w);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s5);
}

/* Empty-state hero — the mark presiding over a carved question */
.hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--s6);
  padding: var(--s8) var(--s4);
  animation: surface-in var(--dur-slow) var(--ease) both;
}
.hero__orb { width: 76px; height: 76px; }
.hero__orb::after { inset: -10px; }
.hero__orb b { font-size: 36px; }
.hero__line {
  margin: 0; max-width: 24ch;
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: 27px; line-height: 1.4; font-weight: 400;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; max-width: 540px; margin-top: var(--s2); }
.chip {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-1));
  -webkit-backdrop-filter: blur(var(--blur-1));
  color: var(--ink-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  font: inherit; font-size: 13px; font-weight: 450;
  padding: 10px 18px; cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
  animation: track-in var(--dur-3) var(--ease) both;
}
.chip:hover {
  background: var(--fill-3); border-color: var(--hair-2); color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -14px rgba(255, 255, 255, 0.25);
}
.chip:active { transform: translateY(0) scale(0.98); }

/* ── Messages — two voices, two substances ─────────────────────────────── */
.msg {
  max-width: 86%;
  padding: 12px 16px;
  font-size: 15px; line-height: 1.6;
  border-radius: var(--r-md);
  animation: msg-in var(--dur-3) var(--ease) both;
}
/* The guide is unboxed: no bubble — a Þ seal in the margin, words as surface. */
.msg--assistant {
  position: relative;
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--ink-1);
  padding: 2px 0 2px 38px;
  line-height: 1.8;
}
.msg--assistant::before {
  content: "Þ";
  position: absolute; left: 0; top: 6px;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(244, 246, 248, 0.3);
  font-family: var(--font-serif);
  font-size: 11px; line-height: 1;
  color: var(--ink-2);
  box-shadow: 0 0 14px -4px rgba(255, 255, 255, 0.4);
}
/* You keep a porcelain slab. */
.msg--user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--ink-on);
  border-radius: 20px 20px 6px 20px;
  box-shadow: 0 18px 44px -18px rgba(255, 255, 255, 0.28), inset 0 1px 0 #fff;
}

/* Fog reveal: each word condenses out of night (delays set inline by JS). */
.msg--fog .w {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(2px);
  display: inline-block;
  transition: opacity 0.5s var(--ease-soft), filter 0.6s var(--ease-soft), transform 0.5s var(--ease-soft);
}
.msg--fog.is-lit .w { opacity: 1; filter: blur(0); transform: none; }

/* Presence, not typing: a small orb glows while the guide works. */
.msg--typing { padding-left: 0; }
.msg--typing::before { display: none; }
.presence {
  display: inline-flex; align-items: center; gap: var(--s3);
  color: var(--ink-3);
  font-size: 12px; letter-spacing: 0.08em;
}
.presence__orb {
  display: block;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 62%, transparent 75%);
  box-shadow: 0 0 18px 2px rgba(255, 255, 255, 0.28);
}

/* The session seal resting in the thread */
.artchip {
  align-self: flex-start;
  margin-left: 38px;
  display: flex; align-items: center; gap: var(--s4);
  max-width: 86%;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-1)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(1.3);
  border: 1px solid var(--hair-2); border-radius: 18px;
  padding: 13px 16px; cursor: pointer;
  color: var(--ink); font: inherit; text-align: left;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  animation: msg-in var(--dur-3) var(--ease) both;
}
.artchip:hover { transform: translateY(-1px); border-color: var(--hair-2); background: var(--fill-3); }
.artchip.is-active { border-color: rgba(244, 246, 248, 0.3); }
.artchip__icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(244, 246, 248, 0.28);
  background: radial-gradient(70% 70% at 32% 24%, rgba(255, 255, 255, 0.12), transparent 62%);
  color: var(--ink-2);
}
.artchip__icon i { display: block; width: 1.5px; height: var(--h, 50%); border-radius: 1px; background: currentColor; }
.artchip__body { flex: 1; min-width: 0; }
.artchip__title { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artchip__meta { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; }
.artchip__open { flex-shrink: 0; color: var(--ink-3); }

/* ── Composer — the altar ──────────────────────────────────────────────── */
.composer-dock {
  padding: var(--s2) var(--s4) var(--s4);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
}
.composer {
  width: 100%; max-width: var(--read-w);
  display: flex; align-items: center; gap: var(--s2);
  padding: 7px 7px 7px var(--s6);
  border-radius: var(--r-pill);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.composer:focus-within {
  box-shadow: var(--elev-2), 0 0 0 1px rgba(244, 246, 248, 0.16), 0 0 30px -6px rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.composer__input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--ink); font: inherit; font-size: 15px;
  padding: 11px 0;
}
.composer__input::placeholder { color: var(--ink-3); }
.composer .glass__sheen { z-index: 0; }
.composer > * { position: relative; z-index: 2; }

/* The send stone — porcelain, resting over its own light */
.send {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--ink); color: var(--ink-on);
  border: 0; border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(255, 255, 255, 0.5), inset 0 1px 0 #fff,
              inset 0 -6px 12px -8px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.send:hover { transform: translateY(-1px); box-shadow: 0 16px 38px -12px rgba(255, 255, 255, 0.6), inset 0 1px 0 #fff; }
.send:active { transform: translateY(0) scale(0.96); }
.send:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: none; }

.ghost {
  background: transparent; color: var(--ink-2); border: 0;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 10px; cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.ghost:hover { color: var(--ink); }
.ghost:disabled { opacity: 0.4; cursor: default; }
.ghost--inline { flex-shrink: 0; font-size: 10px; padding: 6px 8px; }

/* ── Artifact panel ────────────────────────────────────────────────────── */
.artifact {
  flex: 0 0 var(--artifact-w);
  width: var(--artifact-w);
  overflow: hidden;
  border-radius: var(--r-lg);
  /* Elevation lives on the (non-clipped) wrapper; the inner clips only the
     slide-in reveal, so the drop shadow is never clipped away. */
  box-shadow: var(--elev-3);
  transition: width var(--dur-3) var(--ease), flex-basis var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
}
.app:not(.artifact-open) .artifact {
  flex-basis: 0; width: 0; opacity: 0; pointer-events: none; box-shadow: none;
}
.artifact__inner {
  height: 100%;
  width: var(--artifact-w);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: none;
  transform: translateX(0);
  transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease);
}
.app:not(.artifact-open) .artifact__inner { transform: translateX(24px); opacity: 0; }

.artifact__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--hair);
}
.artifact__eyebrow {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-3);
  align-self: center;
}
.artifact__title {
  flex: 1; margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 19px; letter-spacing: 0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artifact__head { position: relative; z-index: 2; }
.artifact__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s6) var(--s5); position: relative; z-index: 2; }

/* ── The making — one light descending through three phases ───────────── */
.pipe { display: flex; flex-direction: column; gap: var(--s6); animation: surface-in var(--dur-3) var(--ease) both; }
.pipe__orb { align-self: center; margin: var(--s2) 0 var(--s2); }

.pipe__phases {
  position: relative;
  margin-left: 5px;
  padding-left: 26px;
  display: flex; flex-direction: column; gap: 30px;
}
.pipe__rail {
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: var(--hair);
}
.pipe__fill {
  position: absolute; left: 0; top: 6px;
  width: 1px; height: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  transition: height 1.2s var(--ease-soft);
}
.phase { position: relative; }
.phase__dot {
  position: absolute; left: -30px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--ink-4);
  background: var(--base);
  transition: border-color var(--dur-3) var(--ease), background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.phase__label {
  display: block;
  font-size: 14.5px; font-weight: 500; color: var(--ink-3);
  transition: color var(--dur-3) var(--ease);
}
.phase__detail {
  display: block; margin-top: 3px; min-height: 18px;
  font-size: 12px; color: var(--ink-decor);
  transition: color var(--dur-3) var(--ease);
}
.phase.is-pending { opacity: 0.5; }
.phase.is-active .phase__label { color: var(--ink); }
.phase.is-active .phase__detail { color: var(--ink-3); }
.phase.is-active .phase__dot {
  border-color: var(--ink); background: var(--ink);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
}
.phase.is-done .phase__label { color: var(--ink-2); }
.phase.is-done .phase__dot { border-color: var(--ink-2); background: var(--ink-2); }

.pipe__note {
  margin: 0; padding-top: var(--s4);
  border-top: 1px solid var(--hair);
  text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.7; letter-spacing: 0.03em;
}

/* Failure keeps the same posture: the orb dims, one quiet act remains. */
.pipe--error { text-align: center; color: var(--ink-2); }
.pipe--error .pipe__icon {
  margin: 0 auto var(--s4); display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--hair-2); color: var(--ink-2);
}

/* ── The player — a porcelain stone over a pool of light ───────────────── */
.player { display: flex; flex-direction: column; gap: var(--s5); animation: surface-in var(--dur-3) var(--ease) both; }
.player__stage {
  position: relative;
  height: 176px; border-radius: var(--r-md);
  overflow: hidden;
  background: radial-gradient(120% 100% at 28% 12%, rgba(255, 255, 255, 0.10), transparent 58%), rgba(0, 0, 0, 0.28);
  border: 1px solid var(--hair);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
  display: grid; place-items: center;
}
.player__aura {
  position: absolute; width: 200%; height: 200%;
  background:
    radial-gradient(26% 30% at 34% 40%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(24% 28% at 68% 64%, rgba(255, 255, 255, 0.12), transparent 60%);
  filter: blur(9px);
  opacity: 0.35;
  transition: opacity 1.2s var(--ease-soft);
}
.player.is-playing .player__aura { opacity: 0.9; animation: aura-drift 11s var(--ease-soft) infinite alternate; }
.player__pool {
  position: absolute; bottom: 22px;
  width: 150px; height: 26px; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(255, 255, 255, 0.35), transparent 70%);
  filter: blur(9px);
  opacity: 0.45;
  transition: opacity 1.2s var(--ease-soft);
}
.player.is-playing .player__pool { opacity: 0.95; }
.player__play {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--ink); color: var(--ink-on);
  border: 0; cursor: pointer;
  box-shadow: 0 22px 50px -18px rgba(255, 255, 255, 0.5), 0 6px 16px -6px rgba(0, 0, 0, 0.6),
              inset 0 2px 1px #fff, inset 0 -10px 18px -12px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.player__play::after {
  content: "";
  position: absolute; inset: -11px;
  border-radius: 50%;
  border: 1px solid rgba(244, 246, 248, 0.18);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
/* While playing, the stone breathes on the shared clock — the pacing cue. */
.player.is-playing .player__play { animation: breath 12s infinite; }
.player.is-playing .player__play::after { opacity: 1; }
.player__play:hover { transform: scale(1.04); }
.player__play:active { transform: scale(0.97); }
.player__play svg { margin-left: 2px; }
.player__play .ic-pause { margin-left: 0; }

/* True waveform (decoded peaks when the host allows it) + light-front */
.player__wave { display: flex; align-items: center; gap: 2px; height: 46px; cursor: pointer; }
.player__wave i {
  flex: 1; min-width: 0;
  height: var(--h, 30%);
  background: rgba(244, 246, 248, 0.14);
  border-radius: var(--r-pill);
  transition: background var(--dur-1) linear, height 0.5s var(--ease-soft);
}
.player__wave i.is-played { background: var(--ink); }
.player__wave i.is-front { background: var(--ink); box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }

.player__time {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}
.player__msg { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }

.player__row { display: flex; align-items: center; gap: var(--s2); }
.player__row--split { justify-content: space-between; }
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--fill-2); color: var(--ink-1);
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 10px 14px; cursor: pointer; text-decoration: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.pbtn:hover { background: var(--fill-3); border-color: var(--hair-2); transform: translateY(-1px); }
.pbtn:active { transform: translateY(0) scale(0.98); }
.pbtn svg { color: var(--ink-2); }
.pbtn--speed { min-width: 60px; font-variant-numeric: tabular-nums; }
.player__actions { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--hair); }
.pbtn--wide { justify-content: flex-start; padding: 11px 14px; }

/* Deep listening: a minute into playback the room recedes; any touch returns it. */
body.deep .sidebar,
body.deep .main {
  opacity: 0.22;
  transition: opacity 1.6s var(--ease-soft);
}
body.deep .field__light, body.deep .field__light--2 { opacity: 0.5; }
.sidebar, .main { transition: opacity 0.8s var(--ease-soft); }

/* ── Errors / focus ────────────────────────────────────────────────────── */
.error { margin: 0; min-height: 14px; color: rgba(244, 246, 248, 0.82); font-size: 12px; letter-spacing: 0.04em; text-align: center; }
.error[hidden] { display: none; }
:focus-visible { outline: 1.5px solid rgba(244, 246, 248, 0.55); outline-offset: 3px; border-radius: 4px; }
.artifact__title:focus-visible { outline-offset: 5px; }

/* Visually hidden, still announced by assistive tech. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
/* Inert regions (collapsed sidebar, closed panel) are removed from tab order. */
[inert] { cursor: default; }

/* ── Account modal — a single raised slab over a dimmed field ───────────── */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--s5); }
.modal[hidden] { display: none; }
.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(4, 4, 5, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade-in var(--dur-2) var(--ease) both;
}
.modal__card {
  position: relative; z-index: 1;
  width: min(400px, 100%); max-height: 88dvh; overflow-y: auto;
  padding: var(--s6);
  border-radius: 24px;
  animation: surface-in var(--dur-3) var(--ease) both;
}
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s5); }
.modal__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); outline: none;
}
.settings { display: flex; flex-direction: column; gap: var(--s4); }
.setting { display: flex; flex-direction: column; gap: var(--s2); }
.setting__label {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2);
}
.soon {
  font-style: normal;
  font-size: 8.5px; letter-spacing: 0.14em; color: var(--ink-4);
  border: 1px solid var(--hair-2); border-radius: var(--r-pill);
  padding: 2px 7px;
}
/* The not-yet-live settings: legible, clearly inert. */
.settings__soon {
  display: flex; flex-direction: column; gap: var(--s4);
  margin-top: var(--s2); padding-top: var(--s5);
  border-top: 1px solid var(--hair);
}
.setting--soon { opacity: 0.5; }
.setting--soon .authfield { cursor: not-allowed; }

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes surface-in { from { opacity: 0; transform: translateY(14px) scale(0.99); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes msg-in     { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes track-in   { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes aura-drift { from { transform: translate(-10%, -6%); } to { transform: translate(-22%, -16%); } }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --artifact-w: 420px; --sidebar-w: 248px; }
}

@media (max-width: 920px) {
  .iconbtn--menu { display: inline-flex; }
  .sidebar {
    position: fixed; z-index: 6; top: var(--gap); left: var(--gap); bottom: var(--gap);
    transform: translateX(calc(-100% - var(--gap) - 4px));
    transition: transform var(--dur-3) var(--ease);
  }
  .app.sidebar-open .sidebar { transform: translateX(0); }
  .app.sidebar-collapsed .sidebar { flex-basis: var(--sidebar-w); width: var(--sidebar-w); opacity: 1; padding: var(--s4) var(--s3); }
  .artifact {
    position: fixed; z-index: 7; inset: var(--gap);
    flex-basis: auto; width: auto;
  }
  .app:not(.artifact-open) .artifact { transform: translateX(110%); opacity: 0; }
  .artifact__inner { width: 100%; }
}

@media (max-width: 520px) {
  :root { --gap: 8px; }
  .gate__card { padding: var(--s7) var(--s5) var(--s6); }
  .hero__orb { width: 64px; height: 64px; }
  .hero__orb b { font-size: 30px; }
  .hero__line { font-size: 22px; }
  .composer { padding-left: var(--s4); }
  .ghost--inline { display: none; }
  .lockup__word { display: none; }
}

/* ── Reduced motion — the design must be complete when perfectly still ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .field__light, .field__light--2, .player__aura,
  .breathes, .glows, .player.is-playing .player__play { animation: none !important; }
  .msg--fog .w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}