*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
/* build:rc-7f4d2a-20240301 */

:root {

  --serif:    'Instrument Serif', Georgia, serif;
  --sans:     'DM Sans', system-ui, sans-serif;
  --mono:     'DM Mono', monospace;
  --display:  'Unbounded', system-ui, sans-serif;
  --script:   'Caveat', cursive;
  --_rc-sig:  'rc2024mwf';

  --home-bg:  #0D0D0D;
  --home-ink: #FFFFFF;
  --home-ink-soft: #999999;
  --home-gold: #C9A227;
  --radius: 8px;

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;
  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
}

body {
  font-family: var(--sans);
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--home-bg);
  color: var(--home-ink);
  transition: background 0.5s, color 0.5s;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

.screen { display: none; }
.screen.active { display: block; }

nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(13,13,13,0.95);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 100;
  transition: border-color 0.4s, background 0.5s, color 0.5s;
}
body[class^="room-"] nav, body[class*=" room-"] nav {
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid var(--room-panel-border, rgba(255,255,255,0.06));
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
  0 1px 0 rgba(255,255,255,0.03),

  0 2px 0 var(--room-accent, rgba(196,148,60,0.12)),
  0 3px 0 rgba(0,0,0,0.15),
  0 4px 16px rgba(0,0,0,0.2);
}
body[class^="room-"] .welcome-banner,
body[class*=" room-"] .welcome-banner { display: none; }
body[class^="room-"] .logo-wordmark,
body[class*=" room-"] .logo-wordmark { color: var(--room-text); opacity: 0.6; }
body[class^="room-"] .logo-wordmark em,
body[class*=" room-"] .logo-wordmark em { color: var(--room-accent); opacity: 1; }
body[class^="room-"] .nav-tagline,
body[class*=" room-"] .nav-tagline { display: none; }
.logo-svg {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer;
}
.logo-wordmark {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--home-ink);
  letter-spacing: -0.02em;
  transition: color 0.4s;
  display: flex;
  align-items: baseline;
}
.logo-wordmark em {
  font-style: italic;
  font-weight: 500;
  color: #E94560;
  letter-spacing: -0.02em;
  margin-left: -0.5px;
  margin-right: 1.5px;
  transition: color 0.4s;
}
.nav-tagline {
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;
  cursor: default;
  padding: 7px 14px;
  border-radius: 4px;
  border: none;
  position: relative;
  overflow: hidden;

  background-image: url('images/gold-surface.png');
  background-size: cover;
  background-position: center;

  color: rgba(40,25,8,0.75);
  text-shadow:
  0 1px 0 rgba(255,220,120,0.35),
  0 -1px 0 rgba(0,0,0,0.15);

  box-shadow:
  inset 0 1px 0 rgba(255,240,160,0.3),
  inset 0 -1px 0 rgba(80,50,10,0.2),
  0 0 0 1.5px #8a6818,
  0 0 0 3px #c49828,
  0 0 0 4px #6a4c08,
  0 0 0 5.5px #b08828,
  0 4px 14px rgba(0,0,0,0.3);
}

.nav-tagline::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 100%; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 50%, transparent);
  animation: stampShine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stampShine {
  0%, 85%, 100% { left: -100%; right: 100%; }
  90% { left: 100%; right: -100%; }
}

.nav-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.nav-spark-btn {
  display: none;
}
@media (max-width: 900px) {
  .nav-left {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  }
  .nav-spark-btn { display: none !important; }
}
body[class^="room-"] .nav-spark-btn,
body[class*=" room-"] .nav-spark-btn { display: none !important; }

.restore-toggle {
  width: 100%;
  background:
  repeating-linear-gradient(
  92deg,
  transparent 0px,
  rgba(255,255,255,0.012) 1px,
  transparent 2px,
  transparent 4px
  ),
  linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%) !important;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: #d4922a;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow:
  0 0 0 1.5px #b8861e,
  0 0 0 2.5px #7a5808,
  0 0 0 4px #c4982a,
  0 4px 16px rgba(0,0,0,0.45),
  inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 10px rgba(196,134,42,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.restore-toggle:hover {
  background: none !important;
  background:
  repeating-linear-gradient(
  92deg,
  transparent 0px,
  rgba(255,255,255,0.012) 1px,
  transparent 2px,
  transparent 4px
  ),
  linear-gradient(175deg, #352a1c 0%, #221a0c 50%, #2c2214 100%) !important;
  transform: translateY(-1px);
  box-shadow:
  0 0 0 1.5px #d4a030,
  0 0 0 2.5px #8a6510,
  0 0 0 4px #e0b040,
  0 6px 20px rgba(0,0,0,0.5),
  inset 0 1px 0 rgba(255,255,255,0.08);
  color: #f0c060;
}

@media (max-width: 600px) {
  #toolbar-spacer { display: none !important; flex: 0 !important; }
  .mwf-vol-slider { width: 32px !important; min-width: 32px !important; }
  .reply-zone-outer { overflow: visible !important; }
}

.parchment-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;

  transform: translateZ(0);
  contain: strict;
  background-color: #0D0D0D;
  background-image:

  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)' opacity='0.08'/%3E%3C/svg%3E"),

  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pg2'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.4' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg2)' opacity='0.06'/%3E%3C/svg%3E"),

  radial-gradient(ellipse 120% 60% at 15% 20%, rgba(195,170,130,0.4) 0%, transparent 55%),
  radial-gradient(ellipse 80% 90% at 85% 10%, rgba(205,180,140,0.35) 0%, transparent 50%),
  radial-gradient(ellipse 60% 40% at 50% 80%, rgba(180,155,115,0.3) 0%, transparent 45%),
  radial-gradient(ellipse 100% 30% at 30% 55%, rgba(215,195,155,0.25) 0%, transparent 60%),

  linear-gradient(128deg, transparent 0%, transparent 38%, rgba(175,150,110,0.16) 38.5%, transparent 39%, transparent 100%),
  linear-gradient(142deg, transparent 0%, transparent 62%, rgba(185,160,120,0.14) 62.3%, transparent 62.8%, transparent 100%),
  linear-gradient(115deg, transparent 0%, transparent 20%, rgba(170,145,105,0.12) 20.4%, transparent 21%, transparent 100%),
  linear-gradient(158deg, transparent 0%, transparent 75%, rgba(190,165,125,0.13) 75.3%, transparent 75.8%, transparent 100%),

  radial-gradient(ellipse 70% 70% at 50% 40%, rgba(255,248,230,0.65) 0%, transparent 70%),

  radial-gradient(ellipse 8% 6% at 22% 35%, rgba(180,140,80,0.12) 0%, transparent 100%),
  radial-gradient(ellipse 5% 8% at 78% 62%, rgba(170,130,70,0.10) 0%, transparent 100%),
  radial-gradient(ellipse 6% 4% at 45% 85%, rgba(175,135,75,0.09) 0%, transparent 100%),

  radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(140,115,75,0.25) 100%);
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 48px 60px 60px;
  position: relative;
  z-index: 2;

  isolation: isolate;
}

.parchment-decor {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transform: translateZ(0);
}
.parchment-decor-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
@media (max-width: 768px) {
  .parchment-decor { display: none; }
}
body[class^="room-"] .parchment-decor,
body[class*=" room-"] .parchment-decor { display: none; }

.home-hero {
  padding: 48px 0 36px;
  text-align: center;
  position: relative;
}

.home-hero::before,
.home-hero::after {
  content: '';
  position: absolute;
  width: 52px; height: 52px;
  opacity: 0.24;
  background-image:
  linear-gradient(var(--home-gold), var(--home-gold)),
  linear-gradient(var(--home-gold), var(--home-gold));
  background-size: 1px 100%, 100% 1px;
  background-repeat: no-repeat;
  background-position: center center, center center;
}
.home-hero::before { top: 52px; left: 0; }
.home-hero::after  { top: 52px; right: 0; transform: scaleX(-1); }

.hero-eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
  color: #7a5c2a;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-bottom: 18px;
  line-height: 1.3;
}
.welcome-banner {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
  color: #7a5c2a;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 18px;
  opacity: 0.85;
  background: none;
  padding: 0;
}
.hero-lettering {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  overflow: visible;
  margin: 0 auto 12px;
}
.hero-heading {
  font-family: var(--sans);
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 0;
  letter-spacing: -0.03em;
  white-space: normal;
  color: var(--home-ink);
  filter: drop-shadow(0 2px 3px rgba(20,15,8,0.35));
}
.hero-heading .hero-dark {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(60,45,25,0.06) 0px, rgba(60,45,25,0.06) 1px,
      transparent 1px, transparent 3px
    ),
    linear-gradient(170deg,
      #3a2a18 0%, #1a1410 18%, #4a3820 38%,
      #1e1812 52%, #3a2c1a 70%, #1a1410 88%, #2e2216 100%);
  background-size: 4px 4px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-heading em {
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.03em;
  padding-right: 0.12em;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,220,120,0.08) 0px, rgba(255,220,120,0.08) 1px,
      transparent 1px, transparent 3px
    ),
    linear-gradient(170deg,
      #e8be48 0%, #d4a030 15%, #c48828 32%,
      #f0d060 48%, #c48828 62%, #a06818 78%,
      #d4a838 92%, #c48828 100%);
  background-size: 4px 4px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--home-gold);
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 22px auto 20px;
  width: 100%;
  max-width: 520px;
}
.hero-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c4982a 30%, #c4982a 70%, transparent);
  opacity: 0.55;
}
.hero-divider-ornament {
  font-size: 1.1rem;
  color: var(--home-gold);
  opacity: 0.7;
  padding: 0 10px;
  line-height: 1;
  flex-shrink: 0;
}

.hero-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  font-style: italic;
  color: #6a5230;
  letter-spacing: 0.01em;
  line-height: 1.5;
  max-width: 100%;
  text-align: center;
  margin: 0;
  animation: heroSubPulse 3.5s ease-in-out infinite;
}
@keyframes heroSubPulse {
  0%, 100% { color: #6a5230; text-shadow: 0 0 8px rgba(196,134,42,0.15); }
  50% { color: #8a6c38; text-shadow: 0 0 20px rgba(212,168,64,0.35), 0 0 40px rgba(196,134,42,0.15); }
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.why-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 18px;
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4922a;
  cursor: pointer;
  border-radius: 5px;

  background:
  repeating-linear-gradient(
  92deg,
  transparent 0px,
  rgba(255,255,255,0.012) 1px,
  transparent 2px,
  transparent 4px
  ),
  linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%);

  border: 1px solid transparent;
  box-shadow:
  0 0 0 1px #b8861e,
  0 0 0 2px #7a5808,
  0 0 0 3px #c4982a,
  0 3px 12px rgba(0,0,0,0.4),
  inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 10px rgba(196,134,42,0.3);
  animation: whyPulse 2.8s ease-in-out 4;
  transition: transform 0.15s ease;
}
.why-btn:hover {
  transform: translateY(-1px);
  animation: none;
  box-shadow:
  0 0 0 1.5px #d4a030,
  0 0 0 2.5px #8a6510,
  0 0 0 4px #e0b040,
  0 6px 20px rgba(0,0,0,0.5),
  0 0 16px rgba(196,134,42,0.25),
  inset 0 1px 0 rgba(255,255,255,0.08);
  color: #f0c060;
}
.why-btn.dismissed, .hero-render-btn.dismissed { display: none; }
.hero-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.hero-render-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.hero-render-btn:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.15);
}
.hero-render-btn:active {
  transform: scale(0.98);
}
.hero-render-btn img {
  display: block;
  height: 52px;
  width: auto;
  border-radius: 6px;
}
@media (max-width: 500px) {
  .hero-render-btn img { height: 42px; }
}

.how-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 18px;
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4922a;
  cursor: pointer;
  border-radius: 5px;
  background:
  repeating-linear-gradient(
  92deg,
  transparent 0px,
  rgba(255,255,255,0.012) 1px,
  transparent 2px,
  transparent 4px
  ),
  linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%);
  border: 1px solid transparent;
  box-shadow:
  0 0 0 1.5px #b8861e,
  0 0 0 2.5px #7a5808,
  0 0 0 4px #c4982a,
  0 4px 14px rgba(0,0,0,0.45),
  inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 8px rgba(196,134,42,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s, color 0.15s;
}
.how-btn:hover {
  transform: translateY(-1px);
  color: #f0c060;
  box-shadow:
  0 0 0 1.5px #d4a030,
  0 0 0 2.5px #8a6510,
  0 0 0 4px #e0b040,
  0 6px 20px rgba(0,0,0,0.5),
  0 0 16px rgba(196,134,42,0.25),
  inset 0 1px 0 rgba(255,255,255,0.08);
}

#how-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10,7,4,0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px 24px; overflow-y: auto;
  animation: fadeIn 0.2s ease;
}
.how-modal {
  background: #fdf8f0;
  border-radius: 12px;
  max-width: 640px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: 64px 48px 40px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  animation: slideUp 0.25s cubic-bezier(0.22,1,0.36,1);
}
.how-close {
  position: sticky;
  top: 0; right: 0;
  float: right;
  background: rgba(20,15,10,0.7); border: 1px solid rgba(200,160,80,0.25);
  backdrop-filter: blur(8px);
  font-size: 1.2rem; color: rgba(255,240,210,0.85); cursor: pointer;
  opacity: 0.9; transition: opacity 0.15s, background 0.15s;
  padding: 8px 14px; border-radius: 8px; line-height: 1; z-index: 10;
  margin: -24px -8px 8px 0;
}
.how-close:hover { opacity: 1; background: rgba(30,20,10,0.85); color: #f0c060; }
.how-title {
  font-family: var(--sans); font-size: 1.6rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--home-ink);
  margin-bottom: 6px;
}
.how-sub {
  font-size: 0.88rem; color: #6a5e4a;
  margin-bottom: 28px; line-height: 1.6;
}
.how-step {
  display: flex; gap: 16px;
  margin-bottom: 22px; align-items: flex-start;
}
.how-step-num {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #C9A227 0%, #a06820 100%);
  color: #fff; font-family: 'DM Mono', monospace;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(196,134,42,0.3);
  margin-top: 2px;
}
.how-step-content h3 {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600;
  color: var(--home-ink); margin-bottom: 4px;
}
.how-step-content p {
  font-size: 0.82rem; line-height: 1.6; color: #6a5e4a;
}
.how-step-content em { color: var(--home-ink); font-style: italic; }
.how-divider {
  border: none; border-top: 1px solid rgba(26,22,16,0.08);
  margin: 28px 0;
}
.how-tip {
  background: rgba(196,134,42,0.06);
  border-left: 3px solid #C9A227;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.how-tip-label {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #C9A227; margin-bottom: 6px;
}
.how-tip p {
  font-size: 0.82rem; line-height: 1.6; color: #4a3e2e;
}
.how-modal .mwf-listen-bar {
  background: linear-gradient(135deg, rgba(196,134,42,0.12) 0%, rgba(180,120,60,0.08) 100%);
  border-color: rgba(196,134,42,0.35);
}
.how-modal .mwf-listen-bar:hover {
  background: linear-gradient(135deg, rgba(196,134,42,0.2) 0%, rgba(180,120,60,0.14) 100%);
  border-color: rgba(196,134,42,0.5);
}
.how-modal .mwf-listen-bar svg { color: #b8741e; }
.how-modal .mwf-listen-bar-text { color: #8a5818; }
.how-modal .mwf-listen-bar.speaking .mwf-listen-bar-text { color: #C9A227; }
.how-footer {
  border-top: 1px solid rgba(26,22,16,0.1);
  padding-top: 20px; text-align: center;
}
.how-footer-btn {
  background: var(--home-gold); color: #fff; border: none;
  border-radius: 100px; padding: 11px 24px;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.how-footer-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(196,134,42,0.4); }
@media (max-width: 600px) {
  .how-modal { padding: 36px 22px 28px; }
  .how-step { gap: 12px; }
}
@keyframes whyPulse {
  0%, 100% { box-shadow: 0 0 0 1.5px #b8861e, 0 0 0 2.5px #7a5808, 0 0 0 4px #c4982a, 0 4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
  50%       { box-shadow: 0 0 0 1.5px #d4a030, 0 0 0 2.5px #8a6510, 0 0 0 4px #e0b040, 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(196,134,42,0.3), inset 0 1px 0 rgba(255,255,255,0.06); }
}

.spark-btn-wrap {
  position: fixed;
  right: 52px;
  top: 180px;
  z-index: 20;
  width: 160px;
  text-align: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.spark-btn-wrap.dragging { cursor: grabbing; }
@media (max-width: 900px) {
  .spark-btn-wrap { display: none; }
}

.spark-btn-inner {
  display: inline-block;
  position: relative;
}

.spark-btn-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(200,160,40,0.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: sparkGlowBreath 3.5s ease-in-out infinite;
}
@keyframes sparkGlowBreath {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

.spark-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: none;
  background: transparent;
  padding: 0;

  box-shadow:
  0 0 0 3px #7a5c10,
  0 0 0 6px #c49828,
  0 0 0 8px #8a6c18,
  0 0 0 11px #e0b840,
  0 0 0 13px #6a4c08,
  0 14px 48px rgba(0,0,0,0.65),
  0 0 40px rgba(200,160,30,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: sparkBezelPulse 3.5s ease-in-out infinite;
}
@keyframes sparkBezelPulse {
  0%, 100% { box-shadow: 0 0 0 3px #7a5c10, 0 0 0 6px #c49828, 0 0 0 8px #8a6c18, 0 0 0 11px #e0b840, 0 0 0 13px #6a4c08, 0 14px 48px rgba(0,0,0,0.65), 0 0 40px rgba(200,160,30,0.15); }
  50%       { box-shadow: 0 0 0 3px #9a7c20, 0 0 0 6px #e0b838, 0 0 0 9px #aa8c28, 0 0 0 12px #f8d050, 0 0 0 14px #8a6c18, 0 14px 56px rgba(0,0,0,0.7), 0 0 60px rgba(240,190,40,0.35); }
}
.spark-btn:hover {
  transform: scale(1.05);
  animation: none;
  box-shadow:
  0 0 0 3px #9a7c20,
  0 0 0 7px #f0c838,
  0 0 0 10px #b09030,
  0 0 0 14px #ffe060,
  0 0 0 16px #9a7c20,
  0 18px 60px rgba(0,0,0,0.75),
  0 0 70px rgba(255,210,50,0.45);
}

.spark-btn-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  display: block;
}

.spark-shimmer-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(
  115deg,
  transparent 20%,
  rgba(255,230,120,0.18) 45%,
  rgba(255,255,200,0.32) 50%,
  rgba(255,230,120,0.18) 55%,
  transparent 80%
  );
  background-size: 300% 100%;
  background-position: -200% 0;
  animation: sparkShimmer 4s ease-in-out infinite;
}
@keyframes sparkShimmer {
  0%       { background-position: -200% 0; opacity: 0; }
  15%      { opacity: 1; }
  50%      { background-position: 200% 0; opacity: 1; }
  65%      { opacity: 0; }
  100%     { background-position: 200% 0; opacity: 0; }
}

.spark-flare {
  position: absolute;

  top: 30%;
  left: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,250,220,0.95) 0%, rgba(255,210,60,0.5) 40%, transparent 70%);
  animation: sparkFlarePulse 2.4s ease-in-out infinite;
}
@keyframes sparkFlarePulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
  40%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.3); filter: drop-shadow(0 0 8px rgba(255,220,80,0.9)); }
  70%       { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); }
}

.spark-particles {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
}
.spark-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8c0 0%, #ffd040 60%, transparent 100%);
  animation: sparkParticleFly var(--dur, 1.8s) ease-out var(--delay, 0s) infinite;
  transform-origin: center;
  top: var(--ty, 30%);
  left: var(--tx, 50%);
}
@keyframes sparkParticleFly {
  0%   { opacity: 0; transform: translate(0,0) scale(0.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -30px)) scale(0); }
}

.spark-btn-sub {
  margin-top: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(50,25,4,0.92);
  line-height: 1.4;
  text-shadow: 0 0 12px rgba(196,148,60,0.2);
}

.spark-mobile-wrap {
  display: none;
  text-align: center;
  margin: 12px 20px 4px;
}
@media (max-width: 900px) {
  .spark-mobile-wrap { display: flex; justify-content: center; margin: 10px 0 4px; }
  .spark-btn-wrap    { display: none; }
}
@media (min-width: 901px) {
  .spark-mobile-wrap { display: none !important; }
}
.spark-mobile-logo-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow:
  0 0 0 2px #7a5c10,
  0 0 0 4px #c49828,
  0 0 0 6px #6a4c08,
  0 4px 16px rgba(0,0,0,0.5),
  0 0 20px rgba(200,160,30,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
.spark-mobile-logo-btn:hover,
.spark-mobile-logo-btn:active {
  transform: scale(1.08);
  box-shadow:
  0 0 0 2px #9a7c20,
  0 0 0 5px #e0b838,
  0 0 0 7px #8a6c18,
  0 6px 20px rgba(0,0,0,0.6),
  0 0 30px rgba(240,190,40,0.3);
}

#spark-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background:

  url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'200\'%3E%3Cfilter id=\'sg\'%3E%3CfeTurbulence type=\'turbulence\' baseFrequency=\'0.45\' numOctaves=\'3\' seed=\'5\' stitchTiles=\'stitch\'/%3E%3CfeColorMatrix type=\'saturate\' values=\'0\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23sg)\' opacity=\'0.04\'/%3E%3C/svg%3E"),
  radial-gradient(ellipse at 50% 40%, #0d0a04 0%, #050302 100%);
  background-size: 200px 200px, 100% 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
}
#spark-overlay.visible { display: flex; }

.spark-text-display {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.75;
  color: rgba(255,235,180,0.92);
  text-shadow: 0 0 18px rgba(232,184,64,0.35), 0 1px 3px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.8s ease;
  min-height: 48px;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  position: relative;
}
.spark-text-display.visible {
  opacity: 1;
}
.spark-text-display.fading {
  opacity: 0;
  pointer-events: none;
}
.spark-copy-btn {
  display: none;
  margin: 14px auto 0;
  padding: 6px 16px;
  background: rgba(255,235,180,0.08);
  border: 1px solid rgba(255,235,180,0.15);
  border-radius: 5px;
  color: rgba(255,235,180,0.5);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
}
.spark-copy-btn:hover { background: rgba(255,235,180,0.12); color: rgba(255,235,180,0.7); }
.spark-copy-btn.show { display: block; }

.spark-sentence {
  display: inline;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease, color 0.4s ease;
}
.spark-sentence.active {
  opacity: 1;
  transform: translateY(0);
  color: rgba(255,240,190,1);
}
.spark-sentence.past {
  opacity: 0.4;
  transform: translateY(0);
  color: rgba(255,235,180,0.6);
}

.spark-close {
  position: absolute;
  top: 20px; left: 20px;
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,220,80,1);
  background: rgba(0,0,0,0.45);
  border: 2px solid rgba(255,210,60,0.75);
  border-radius: 8px;
  cursor: pointer;
  padding: 12px 22px;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 0 16px rgba(255,200,40,0.2);
}
.spark-close:hover { color: #fff; background: rgba(0,0,0,0.65); border-color: rgba(255,220,80,1); transform: scale(1.05); box-shadow: 0 0 28px rgba(255,210,50,0.45); }

.spark-room-medallion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

#spark-room-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: transparent;
  box-shadow:
  0 0 0 4px #7a5c10,
  0 0 0 8px #c49828,
  0 0 0 11px #8a6c18,
  0 0 0 15px #e0b840,
  0 0 0 18px #6a4c08,
  0 20px 80px rgba(0,0,0,0.9),
  0 0 60px rgba(200,160,30,0.15);
  transition: transform 0.2s;
  animation: sparkRoomIdle 3.5s ease-in-out infinite;
}
@keyframes sparkRoomIdle {
  0%,100% { box-shadow: 0 0 0 4px #7a5c10, 0 0 0 8px #c49828, 0 0 0 11px #8a6c18, 0 0 0 15px #e0b840, 0 0 0 18px #6a4c08, 0 20px 80px rgba(0,0,0,0.9), 0 0 60px rgba(200,160,30,0.15); }
  50%      { box-shadow: 0 0 0 4px #9a7c20, 0 0 0 8px #e0b838, 0 0 0 11px #aa8c28, 0 0 0 16px #f8d050, 0 0 0 18px #8a6c18, 0 20px 80px rgba(0,0,0,0.9), 0 0 90px rgba(240,190,40,0.35); }
}
#spark-room-btn.speaking {
  animation: sparkRoomSpeak 0.8s ease-in-out infinite;
}
@keyframes sparkRoomSpeak {
  0%,100% { box-shadow: 0 0 0 4px #9a7c20, 0 0 0 8px #e0b838, 0 0 0 11px #aa8c28, 0 0 0 16px #f8d050, 0 0 0 18px #8a6c18, 0 20px 80px rgba(0,0,0,0.9), 0 0 120px rgba(255,200,40,0.5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 5px #b09030, 0 0 0 10px #f8d050, 0 0 0 14px #c4a030, 0 0 0 19px #ffe060, 0 0 0 22px #9a7c20, 0 20px 80px rgba(0,0,0,0.9), 0 0 160px rgba(255,220,60,0.7); transform: scale(1.025); }
}
#spark-room-btn.listening {
  animation: sparkRoomListen 1.8s ease-in-out infinite;
}
@keyframes sparkRoomListen {
  0%,100% { box-shadow: 0 0 0 4px #1a4a1a, 0 0 0 8px #2a7a2a, 0 0 0 11px #1a4a1a, 0 0 0 15px #38a838, 0 0 0 18px #1a3a1a, 0 20px 80px rgba(0,0,0,0.9), 0 0 70px rgba(40,180,40,0.2); }
  50%      { box-shadow: 0 0 0 4px #206020, 0 0 0 8px #40b040, 0 0 0 11px #206020, 0 0 0 16px #52c852, 0 0 0 18px #206020, 0 20px 80px rgba(0,0,0,0.9), 0 0 100px rgba(60,220,60,0.35); }
}

.spark-room-status {
  margin-top: 28px;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200,165,60,0.55);
  min-height: 1.2em;
  text-align: center;
  transition: color 0.4s;
}
.spark-room-status.listening { color: rgba(60,200,80,0.7); }
.spark-room-status.speaking  { color: rgba(240,190,60,0.85); }

.spark-room-ticker {
  margin-top: 10px;
  font-family: 'Palatino Linotype', Palatino, serif;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(220,190,120,0.45);
  min-height: 1.2em;
  text-align: center;
  max-width: 380px;
}
.spark-footer-note {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #c4922a;
  text-align: center;
  max-width: 380px;
  line-height: 1.6;
  padding: 10px 20px;
  border-radius: 3px;
  background:
  repeating-linear-gradient(92deg, transparent 0px, rgba(255,255,255,0.012) 1px, transparent 2px, transparent 4px),
  linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%);
  box-shadow:
  0 0 0 1px #7a5808,
  0 0 0 2px #c4982a,
  0 3px 10px rgba(0,0,0,0.4),
  inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 6px rgba(196,134,42,0.2);
}

#why-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,7,4,0.72);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px 24px;
  overflow-y: auto;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.why-modal {
  background: #fdf8f0;
  border-radius: 12px;
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 64px 48px 40px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  animation: slideUp 0.25s cubic-bezier(0.22,1,0.36,1);
}
@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.why-close {
  position: sticky;
  top: 0; right: 0;
  float: right;
  background: rgba(20,15,10,0.7); border: 1px solid rgba(200,160,80,0.25);
  backdrop-filter: blur(8px);
  font-size: 1.2rem;
  color: rgba(255,240,210,0.85);
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s, background 0.15s;
  padding: 8px 14px;
  border-radius: 8px;
  line-height: 1;
  z-index: 10;
  margin: -24px -8px 8px 0;
}
.why-close:hover { opacity: 1; background: rgba(30,20,10,0.85); color: #f0c060; }
.why-eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--home-gold);
  margin-bottom: 8px;
}
.why-title {
  font-family: var(--sans);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--home-ink);
  margin-bottom: 12px;
}
.why-intro {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4a3e2e;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(26,22,16,0.1);
  padding-bottom: 28px;
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.why-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  border-left: 3px solid var(--home-gold);
}
.why-card-hero {
  grid-column: 1 / -1;
  background: rgba(196,134,42,0.06);
  border-left: 4px solid var(--home-gold);
}
.why-card-hero h3 {
  font-size: 1rem;
}
.why-card-icon { display: none; }
.why-card h3 {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--home-ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.why-card p {
  font-size: 0.83rem;
  line-height: 1.65;
  color: #6a5e4a;
}
.why-card em { color: var(--home-ink); font-style: italic; }
.why-uses {
  background: rgba(196,134,42,0.06);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.why-uses-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--home-gold);
  margin-bottom: 12px;
}
.why-uses-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.why-uses-list span {
  background: #fff;
  border: 1px solid rgba(196,134,42,0.25);
  border-radius: 100px;
  padding: 5px 13px;
  font-size: 0.78rem;
  color: #4a3e2e;
  font-family: var(--sans);
}
.why-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(26,22,16,0.1);
  padding-top: 24px;
}
.why-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.why-dont-show {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: #9a8a74;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.why-dont-show:hover { opacity: 1; }

.welcome-banner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.name-correct-btn {
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--home-gold);
  cursor: pointer;
  opacity: 0.6;
  padding: 2px 6px;
  border-radius: 3px;
  transition: opacity 0.15s, background 0.15s;
  text-transform: uppercase;
}
.name-correct-btn:hover {
  opacity: 1;
  background: rgba(196,134,42,0.1);
}
.why-caveat {
  font-size: 0.85rem;
  color: #6a5e4a;
  font-style: italic;
}
.why-caveat em { color: var(--home-ink); }
.why-got-it {
  background: var(--home-gold);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 11px 24px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.why-got-it:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(196,134,42,0.4); }
@media (max-width: 600px) {
  .why-modal { padding: 32px 24px 28px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-footer { flex-direction: column; align-items: flex-start; }
}

.home-voice-panel {
  display: none !important;
  position: fixed;
  left: 70px;
  top: 200px;
  z-index: 20;
  width: 148px;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  background:
  repeating-linear-gradient(
  92deg,
  transparent 0px,
  rgba(255,255,255,0.012) 1px,
  transparent 2px,
  transparent 4px
  ),
  linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%);

  border: 2px solid transparent;
  border-radius: 6px;
  background-clip: padding-box;
  box-shadow:
  0 0 0 2px #b8861e,
  0 0 0 3.5px #7a5808,
  0 0 0 5px #c4982a,
  0 12px 40px rgba(0,0,0,0.7),
  0 4px 16px rgba(0,0,0,0.5),
  inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 14px 12px 16px;
}
.hvp-pin {
  position: absolute;
  top: 9px; left: 10px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffe090, #c48010 60%, #7a4e00);
  box-shadow:
  0 1px 3px rgba(0,0,0,0.7),
  inset 0 1px 0 rgba(255,255,255,0.3);
}
.hvp-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4922a;
  text-align: center;
  padding: 0 4px;
  margin-bottom: 12px;
  line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 12px rgba(196,134,42,0.3);
}
.hvp-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.hvp-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}
.hvp-group-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200,160,80,0.5);
  white-space: nowrap;
}
.hvp-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,134,42,0.3) 30%, rgba(196,134,42,0.3) 70%, transparent);
  flex-shrink: 0;
}

.hvp-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
  linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.2) 100%);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.25s;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.3);
}
.hvp-toggle.active {
  background:
  linear-gradient(180deg, rgba(40,160,60,0.25) 0%, rgba(20,100,35,0.35) 100%);
  border-color: rgba(60,200,80,0.55);
  color: #70f090;
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.08),
  inset 0 -1px 0 rgba(0,0,0,0.3),
  0 0 10px rgba(40,200,70,0.2);
}
.hvp-toggle.active .hvp-toggle-dot {
  background: radial-gradient(circle at 40% 30%, #80ff90, #30c050);
  box-shadow: 0 0 6px rgba(60,220,80,0.9), 0 0 12px rgba(40,200,60,0.5);
}
.hvp-toggle-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
  transition: background 0.25s, box-shadow 0.25s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.hvp-toggle-text { user-select: none; }

.hvp-seg {
  display: flex;
  flex-direction: row;
  gap: 5px;
  width: 100%;
}
.hvp-seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.3);
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.15) 100%);
  border: 1.5px solid rgba(196,134,42,0.25);
  border-radius: 4px;
  padding: 7px 0;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.4);
}
.hvp-seg-btn:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.6);
  border-color: rgba(196,134,42,0.45);
}
.hvp-seg-btn.hvp-active {
  background: linear-gradient(180deg, rgba(196,134,42,0.35) 0%, rgba(140,90,20,0.45) 100%);
  border-color: #C9A227;
  color: #f0c060;
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.1),
  inset 0 -1px 0 rgba(0,0,0,0.3),
  0 0 8px rgba(196,134,42,0.2);
}
.hvp-vol-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.hvp-vol-slider {
  width: 100%;
  height: 3px;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, rgba(196,134,42,0.6) var(--vol-pct, 85%), rgba(255,255,255,0.1) var(--vol-pct, 85%));
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.hvp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 22px;
  border-radius: 3px;
  background:
  repeating-linear-gradient(
  180deg,
  rgba(255,255,255,0.15) 0px,
  rgba(255,255,255,0.05) 1px,
  rgba(0,0,0,0.1) 2px,
  rgba(0,0,0,0.0) 3px
  ),
  linear-gradient(180deg, #4a3c28 0%, #2a1e0e 40%, #3a2c18 100%);
  border: 1.5px solid #b8861e;
  box-shadow:
  0 0 0 1px rgba(0,0,0,0.4),
  0 2px 6px rgba(0,0,0,0.6),
  inset 0 1px 0 rgba(255,255,255,0.15);
  cursor: pointer;
}
.hvp-vol-slider::-moz-range-thumb {
  width: 18px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a3c28 0%, #2a1e0e 40%, #3a2c18 100%);
  border: 1.5px solid #b8861e;
  cursor: pointer;
}

@media (max-width: 900px) {
  .home-voice-panel { display: none !important; }
}

.name-greeting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 24px 6px;
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  color: #6a5e4a;
  opacity: 0.85;
  flex-wrap: wrap;
}
.name-greeting label {
  white-space: nowrap;
  font-weight: 500;
}
.name-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
#writerNameInput {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2a1e0e;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(196,134,42,0.35);
  outline: none;
  padding: 1px 4px;
  width: 130px;
  transition: border-color 0.2s, width 0.3s;
  caret-color: #C9A227;
}
#writerNameInput:focus {
  border-bottom-color: #C9A227;
  width: 160px;
}
#writerNameInput::placeholder {
  color: rgba(106,94,74,0.4);
  font-weight: 400;
}
.name-saved-tick {
  color: #C9A227;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.name-saved-tick.show { opacity: 1; }

#mwfHandshakeOverlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10, 6, 2, 0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s ease;
  pointer-events: none;
}
#mwfHandshakeOverlay.visible {
  opacity: 1; pointer-events: all;
}
#mwfHandshakeCard {
  background: linear-gradient(160deg, #1e130a 0%, #160d05 100%);
  border: 1px solid rgba(196,134,42,0.35);
  border-radius: 4px;
  padding: 44px 48px 40px;
  max-width: 460px; width: 90%;
  position: relative;
  box-shadow: 0 0 0 1px rgba(196,134,42,0.1), 0 24px 64px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.5);
  transform: translateY(12px); transition: transform 0.4s ease;
}
#mwfHandshakeOverlay.visible #mwfHandshakeCard {
  transform: translateY(0);
}
#mwfHandshakeCard::before {
  content: '';
  position: absolute; top: 0; left: 48px; right: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,134,42,0.6), transparent);
}
.hs-logo {
  display: flex; align-items: center; gap: 11px; margin-bottom: 28px;
}
.hs-logo svg { flex-shrink: 0; }
.hs-logo-text {
  font-family: 'Instrument Serif', serif;
  font-size: 1.18rem; font-style: italic;
  color: rgba(255,255,255,0.75); letter-spacing: 0.01em;
  line-height: 1.2;
}
.hs-logo-text span {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem; font-style: normal;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(196,134,42,0.65); margin-top: 2px;
}
.hs-greeting {
  font-family: 'Instrument Serif', serif;
  font-size: 1.55rem; font-style: italic;
  color: rgba(255,255,255,0.92); line-height: 1.35;
  margin-bottom: 8px;
}
.hs-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; color: rgba(255,255,255,0.42);
  line-height: 1.5; margin-bottom: 28px;
}
.hs-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(196,134,42,0.7); margin-bottom: 10px; display: block;
}
#mwfHandshakeName {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(196,134,42,0.25);
  border-radius: 3px;
  padding: 13px 16px;
  font-family: 'Instrument Serif', serif;
  font-size: 1.2rem; font-style: italic;
  color: rgba(255,255,255,0.9);
  outline: none;
  caret-color: #C9A227;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 18px;
}
#mwfHandshakeName::placeholder { color: rgba(255,255,255,0.2); }
#mwfHandshakeName:focus {
  border-color: rgba(196,134,42,0.6);
  background: rgba(255,255,255,0.07);
}
#mwfHandshakeSubmit {
  width: 100%;
  background: linear-gradient(135deg, #C9A227 0%, #a06820 60%, #8a5a18 100%);
  border: none; border-radius: 3px;
  padding: 13px 20px;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 4px 12px rgba(0,0,0,0.4);
  transition: opacity 0.2s;
}
#mwfHandshakeSubmit:hover { opacity: 0.88; }
.hs-skip {
  text-align: center; margin-top: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
}
.hs-skip a {
  color: rgba(255,255,255,0.3); text-decoration: none; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: color 0.2s;
}
.hs-skip a:hover { color: rgba(255,255,255,0.5); }

#mwfExperienceOverlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10, 6, 2, 0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s ease;
  pointer-events: none;
}
#mwfExperienceOverlay.visible {
  opacity: 1; pointer-events: all;
}
#mwfExperienceCard {
  background:
  repeating-linear-gradient(
  92deg,
  transparent 0px,
  rgba(196,134,42,0.03) 1px,
  transparent 2px,
  transparent 5px
  ),
  linear-gradient(165deg, #fdf8f0 0%, #f4ebe0 50%, #ede2d0 100%);
  border: none;
  border-radius: 6px;
  padding: 44px 48px 40px;
  max-width: 500px; width: 90%;
  position: relative;

  box-shadow:
  0 0 0 2px #c4982a,
  0 0 0 3.5px #7a5808,
  0 0 0 5.5px #d4a830,
  0 24px 64px rgba(0,0,0,0.35),
  0 8px 24px rgba(0,0,0,0.25),
  inset 0 1px 0 rgba(255,255,255,0.8);
  transform: translateY(12px); transition: transform 0.4s ease;
}
#mwfExperienceOverlay.visible #mwfExperienceCard {
  transform: translateY(0);
}
#mwfExperienceCard::before {
  content: '';
  position: absolute; top: 0; left: 48px; right: 48px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(196,134,42,0.5), rgba(224,176,64,0.7), rgba(196,134,42,0.5), transparent);
  border-radius: 1px;
}
.xq-greeting {
  font-family: 'Instrument Serif', serif;
  font-size: 1.45rem; font-style: italic;
  color: #1a1610; line-height: 1.35;
  margin-bottom: 6px;
}
.xq-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; color: #6a5e4a;
  line-height: 1.5; margin-bottom: 28px;
}
.xq-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #b8861e; margin-bottom: 14px; display: block;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.xq-options {
  display: flex; flex-direction: column; gap: 10px;
}
.xq-option {
  width: 100%; text-align: left;
  background:
  repeating-linear-gradient(
  92deg,
  transparent 0px,
  rgba(255,255,255,0.015) 1px,
  transparent 2px,
  transparent 4px
  ),
  linear-gradient(170deg, #2a2218 0%, #1a1408 50%, #221c10 100%);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 16px 18px;
  cursor: pointer;
  box-shadow:
  0 0 0 1.5px #b8861e,
  0 0 0 2.5px #7a5808,
  0 0 0 4px #c4982a,
  0 3px 10px rgba(0,0,0,0.35),
  inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.xq-option:hover {
  transform: translateY(-2px);
  box-shadow:
  0 0 0 1.5px #d4a030,
  0 0 0 2.5px #8a6510,
  0 0 0 4px #e0b040,
  0 6px 18px rgba(0,0,0,0.4),
  0 0 14px rgba(196,134,42,0.2),
  inset 0 1px 0 rgba(255,255,255,0.08);
}
.xq-option-title {
  font-family: 'Instrument Serif', serif;
  font-size: 1.05rem; font-style: italic;
  color: #d4922a;
  line-height: 1.3; margin-bottom: 3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(196,134,42,0.2);
}
.xq-option-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.4;
}
.xq-option:hover .xq-option-title { color: #f0c060; }
.xq-option:hover .xq-option-desc { color: rgba(255,255,255,0.5); }

.xq-option.xq-carrying {
  box-shadow:
  0 0 0 1.5px #c4982a,
  0 0 0 2.5px #8a6510,
  0 0 0 4px #d4a830,
  0 3px 10px rgba(0,0,0,0.35),
  0 0 10px rgba(196,134,42,0.12),
  inset 0 1px 0 rgba(255,255,255,0.06);
}
.xq-option.xq-carrying:hover {
  box-shadow:
  0 0 0 1.5px #e0b040,
  0 0 0 2.5px #a07818,
  0 0 0 4px #f0c858,
  0 6px 20px rgba(0,0,0,0.4),
  0 0 20px rgba(196,134,42,0.25),
  inset 0 1px 0 rgba(255,255,255,0.08);
}
@media (max-width: 600px) {
  #mwfExperienceCard { padding: 32px 24px 28px; }
  .xq-greeting { font-size: 1.25rem; }
  .xq-option { padding: 14px 15px; }
}

.nav-memory-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; padding: 7px 14px; border-radius: 5px;
  font-family: 'DM Mono', monospace; font-size: 0.55rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #d4922a;
  background:
  repeating-linear-gradient(92deg, transparent 0px, rgba(255,255,255,0.012) 1px, transparent 2px, transparent 4px),
  linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%);
  border: 1px solid transparent;
  box-shadow:
  0 0 0 1.5px #b8861e, 0 0 0 2.5px #7a5808, 0 0 0 4px #c4982a,
  0 3px 12px rgba(0,0,0,0.45),
  inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 8px rgba(196,134,42,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s;
}
.nav-memory-toggle:hover {
  transform: translateY(-1px);
  color: #f0c060;
  box-shadow:
  0 0 0 1.5px #d4a030, 0 0 0 2.5px #8a6510, 0 0 0 4px #e0b040,
  0 5px 18px rgba(0,0,0,0.5), 0 0 14px rgba(196,134,42,0.2),
  inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav-memory-toggle .mem-indicator {
  width: 6px; height: 6px; border-radius: 50%;
  transition: background 0.3s, box-shadow 0.3s;
}
.nav-memory-toggle.memory-on .mem-indicator {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.5);
}
.nav-memory-toggle.memory-off .mem-indicator {
  background: rgba(200,160,80,0.3);
  box-shadow: none;
}
.nav-memory-toggle.memory-off { color: rgba(200,160,80,0.4); }
body[class^="room-"] .nav-memory-toggle,
body[class*=" room-"] .nav-memory-toggle { display: none !important; }

.memory-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 9000;
  background: linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%);
  border: 1px solid rgba(196,148,60,0.35);
  border-radius: 10px; padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 0 0 1px rgba(196,148,60,0.2), 0 12px 40px rgba(0,0,0,0.5);
  opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none; max-width: 420px;
}
.memory-toast.visible {
  transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: all;
}
.memory-toast-text {
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
  color: rgba(240,218,175,0.75); line-height: 1.4;
}
.memory-toast-btn {
  flex-shrink: 0; padding: 7px 14px;
  background: linear-gradient(135deg, #C9A227 0%, #a06820 100%);
  border: none; border-radius: 5px;
  font-family: 'DM Mono', monospace; font-size: 0.52rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; cursor: pointer; transition: opacity 0.15s;
}
.memory-toast-btn:hover { opacity: 0.85; }
.memory-toast-dismiss {
  background: none; border: none; color: rgba(200,160,80,0.3);
  font-size: 1rem; cursor: pointer; padding: 2px 6px; flex-shrink: 0;
  transition: color 0.15s;
}
.memory-toast-dismiss:hover { color: rgba(200,160,80,0.6); }

.fellow-panel {
  max-width: 640px;
  margin: 28px auto 32px;
  padding: 0 16px;
}
.fp-render-wrap {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
  0 8px 32px rgba(0,0,0,0.45),
  0 0 0 1px rgba(196,148,60,0.15);
}
.fp-render-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.fp-hotspot {
  position: absolute;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0; margin: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
  transition: background 0.15s;
}
.fp-hotspot:hover { background: rgba(255,220,120,0.06); }
.fp-hotspot:active { background: rgba(255,220,120,0.12); }

.fp-hot-why { left: 5.5%; top: 4%; width: 47%; height: 28%; border-radius: 8px; }
.fp-hot-how { left: 53%; top: 4%; width: 41%; height: 28%; border-radius: 8px; }

.fp-hot-voice-toggle { left: 14%; top: 40%; width: 16%; height: 16%; border-radius: 20px; }

.fp-hot-voice-f { left: 5%; top: 66%; width: 11%; height: 9%; border-radius: 4px; z-index: 5; }
.fp-hot-voice-m { left: 16%; top: 66%; width: 9%; height: 9%; border-radius: 4px; z-index: 5; }

.fp-hot-vol-zone {
  left: 3%; top: 72%; width: 27%; height: 15%;
  display: flex; align-items: center; padding: 0 3%;
  background: transparent !important;
  z-index: 5;
}
.fp-hot-vol-zone input[type="range"] {
  width: 100%; height: 100%;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer; opacity: 0;
}
.fp-hot-vol-zone input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent;
}

.fp-hot-mem-toggle { left: 38%; top: 55%; width: 18%; height: 20%; border-radius: 20px; }

.fp-hot-rooms { left: 61%; top: 44%; width: 36%; height: 44%; border-radius: 8px; }

.fp-text-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.fp-fix-arrows {
  left: 61%; top: 47%; width: 36%; height: 38%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4%;
  pointer-events: none; z-index: 3;
}
.fp-fix-arrows span {
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  font-weight: 900;
  color: #2a1e0c;
  text-shadow: 0 -1px 0 rgba(255,220,120,0.25);
  animation: roomsArrowBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
@keyframes roomsArrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.fp-fm-patch {
  position: absolute;
  left: 2%; top: 58%; width: 28%; height: 30%;
  background: #000;
  z-index: 3;
  pointer-events: none;
}
.fp-fm-overlay {
  position: absolute;
  left: 2%; top: 58%; width: 28%; height: auto;
  pointer-events: none;
  z-index: 4;
}

body[class^="room-"] .fellow-panel,
body[class*=" room-"] .fellow-panel { display: none; }

@media (max-width: 600px) {
  .fellow-panel { padding: 0 6px; }
}

.board-hanger-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: -14px;
  position: relative;
  z-index: 40;
}
.hanger-svg { display: block; overflow: visible; }

.cork-frame {
  position: relative;
  border-radius: 4px;
  padding: 16px;

  transform: translateZ(0);
  contain: layout style;
  background: transparent;
  box-shadow: none;
}
.cork-frame::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 4px;
  background: none;
  pointer-events: none;
}
.cork-frame::after {
  content: "";
  position: absolute; inset: 12px;
  border-radius: 2px;
  box-shadow: none;
  pointer-events: none;
  z-index: 1;
}

.cork-board {
  position: relative;
  border-radius: 2px;
  padding: 36px 22px 32px;
  z-index: 2;
  overflow: visible;

  transform: translateZ(0);
  contain: layout style;
  background-color: transparent;
  background-image: none;
}
.cork-board::before {
  content: "";
  position: absolute; inset: 0;
  background: none;
  pointer-events: none;
  z-index: 0;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}

@keyframes cardDrop {
  0%   { opacity: 0; transform: rotate(var(--card-tilt, 0deg)) translateY(-28px) scale(0.92); }
  65%  { opacity: 1; transform: rotate(var(--card-tilt, 0deg)) translateY(5px)   scale(1.01); }
  82%  { transform: rotate(var(--card-tilt, 0deg)) translateY(-3px) scale(0.995); }
  100% { transform: rotate(var(--card-tilt, 0deg)) translateY(0)    scale(1); }
}

.module-card {
  cursor: pointer;
  display: flex; flex-direction: column;
  padding: 18px 16px 14px;
  border-radius: 2px;
  border: none;
  position: relative;
  opacity: 1;
  transform: rotate(var(--card-tilt, 0deg));

  box-shadow:

  1px 2px 3px rgba(0,0,0,0.4),

  3px 8px 14px rgba(0,0,0,0.28),

  5px 16px 32px rgba(0,0,0,0.18),

  8px 24px 48px rgba(0,0,0,0.12),

  inset 1px 0 0 rgba(255,255,255,0.14),

  inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
}
.cork-board.drop-in .module-card {
  animation: cardDrop 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
.cork-board.drop-in .module-card:nth-child(1)  { animation-delay: 0.05s; }
.cork-board.drop-in .module-card:nth-child(2)  { animation-delay: 0.10s; }
.cork-board.drop-in .module-card:nth-child(3)  { animation-delay: 0.15s; }
.cork-board.drop-in .module-card:nth-child(4)  { animation-delay: 0.20s; }
.cork-board.drop-in .module-card:nth-child(5)  { animation-delay: 0.25s; }
.cork-board.drop-in .module-card:nth-child(6)  { animation-delay: 0.30s; }
.cork-board.drop-in .module-card:nth-child(7)  { animation-delay: 0.35s; }
.cork-board.drop-in .module-card:nth-child(8)  { animation-delay: 0.40s; }
.cork-board.drop-in .module-card:nth-child(9)  { animation-delay: 0.45s; }
.cork-board.drop-in .module-card:nth-child(10) { animation-delay: 0.50s; }
.cork-board.drop-in .module-card:nth-child(11) { animation-delay: 0.55s; }
.cork-board.drop-in .module-card:nth-child(12) { animation-delay: 0.60s; }

.module-card::before {
  content: "";
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;

  background: radial-gradient(circle at 33% 28%,
  rgba(255,255,255,0.95) 0%,
  rgba(255,255,255,0.6)  12%,
  #ff3030               26%,
  #cc0010               55%,
  #6a0008               85%,
  #1a0002              100%
  );
  box-shadow:

  2px 5px 10px rgba(0,0,0,0.6),
  3px 8px 18px rgba(0,0,0,0.35),

  0 0 6px rgba(255,200,80,0.3),
  0 0 2px rgba(255,180,60,0.4),

  inset 0 -4px 5px rgba(0,0,0,0.45),

  inset 0 2px 4px rgba(255,255,255,0.35);
  z-index: 10;
  pointer-events: none;
}

.module-card:nth-child(1)::before  { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #ffd044 26%, #b88010 55%, #5a4008 85%, #1a1004 100%); }
.module-card:nth-child(2)::before  { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #5577ff 26%, #1030cc 55%, #08186a 85%, #020618 100%); }
.module-card:nth-child(3)::before  { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #40dd60 26%, #107030 55%, #044018 85%, #010e06 100%); }
.module-card:nth-child(4)::before  { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #ffdd40 26%, #bb7800 55%, #5a3800 85%, #1a1000 100%); }
.module-card:nth-child(5)::before  { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #cc55ff 26%, #7700bb 55%, #380060 85%, #0e0018 100%); }
.module-card:nth-child(6)::before  { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #ff7733 26%, #cc2200 55%, #6a1000 85%, #1a0400 100%); }
.module-card:nth-child(7)::before  { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #33dddd 26%, #007878 55%, #003838 85%, #001010 100%); }
.module-card:nth-child(8)::before  { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #ff77aa 26%, #bb1060 55%, #600030 85%, #180008 100%); }
.module-card:nth-child(9)::before  { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #7799ff 26%, #2244cc 55%, #0c1e70 85%, #020818 100%); }
.module-card:nth-child(10)::before { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #ffaa33 26%, #dd5500 55%, #702000 85%, #1c0800 100%); }
.module-card:nth-child(11)::before { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #33ffcc 26%, #009966 55%, #004433 85%, #001010 100%); }
.module-card:nth-child(12)::before { background: radial-gradient(circle at 33% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 12%, #ff55aa 26%, #aa0055 55%, #550028 85%, #18000a 100%); }

.module-card::after {
  content: "";
  position: absolute;
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 14px;
  background: linear-gradient(180deg,
  rgba(60,40,20,0.75) 0%,
  rgba(40,25,10,0.5)  50%,
  transparent        100%
  );
  border-radius: 0 0 2px 2px;
  z-index: 9;
  pointer-events: none;
}

.module-card:nth-child(1)  { --card-tilt: -1.8deg; }
.module-card:nth-child(2)  { --card-tilt:  1.3deg; }
.module-card:nth-child(3)  { --card-tilt: -0.7deg; }
.module-card:nth-child(4)  { --card-tilt:  2.1deg; }
.module-card:nth-child(5)  { --card-tilt: -1.4deg; }
.module-card:nth-child(6)  { --card-tilt:  0.8deg; }
.module-card:nth-child(7)  { --card-tilt: -2.0deg; }
.module-card:nth-child(8)  { --card-tilt:  1.5deg; }
.module-card:nth-child(9)  { --card-tilt: -0.9deg; }
.module-card:nth-child(10) { --card-tilt:  1.1deg; }
.module-card:nth-child(11) { --card-tilt: -1.6deg; }
.module-card:nth-child(12) { --card-tilt:  0.6deg; }

.module-card:hover {
  animation: none;
  opacity: 1;
  transform: rotate(0deg) translateY(-14px) scale(1.05);
  box-shadow:
  1px 4px 6px rgba(0,0,0,0.38),
  3px 16px 28px rgba(0,0,0,0.32),
  6px 32px 56px rgba(0,0,0,0.22),
  10px 44px 80px rgba(0,0,0,0.14),
  inset 1px 0 0 rgba(255,255,255,0.18),
  inset 0 1px 0 rgba(255,255,255,0.25);
  z-index: 20;
}
.module-card:active {
  transform: rotate(0deg) translateY(-3px) scale(1.01);
  box-shadow: 1px 2px 4px rgba(0,0,0,0.35), 2px 6px 12px rgba(0,0,0,0.28);
}

[data-module="fellowship"]{
  background: linear-gradient(145deg, #1c1208, #2a1a0c);
  color: #f0d8a0;

  border: none;
  box-shadow:

  0 0 0 1.5px #f0d898,

  0 0 0 3px #5a3a10,

  0 0 0 4.5px #e8c860,

  0 0 0 6px #3a2008,

  0 0 0 7.5px #d4a830,

  0 0 18px rgba(196,148,60,0.15),
  0 0 36px rgba(196,148,60,0.06),

  2px 8px 16px rgba(0,0,0,0.35),
  4px 16px 32px rgba(0,0,0,0.2),

  inset 0 1px 0 rgba(255,220,120,0.15),
  inset 0 -1px 0 rgba(0,0,0,0.3) !important;
  animation: fellowshipGlow 3s ease-in-out infinite !important;
  transform: rotate(var(--card-tilt, 0deg)) !important;
}
@keyframes fellowshipGlow {
  0%, 100% {
  box-shadow:
  0 0 0 1.5px #e0c880,
  0 0 0 3px #4a2a08,
  0 0 0 4.5px #d4b050,
  0 0 0 6px #3a2008,
  0 0 0 7.5px #c4983c,
  0 0 14px rgba(196,148,60,0.1),
  2px 8px 16px rgba(0,0,0,0.35),
  inset 0 1px 0 rgba(255,220,120,0.1);
  }
  50% {
  box-shadow:
  0 0 0 1.5px #fff0b0,
  0 0 0 3px #6a4a18,
  0 0 0 4.5px #f0d860,
  0 0 0 6px #4a3010,
  0 0 0 7.5px #e8c040,
  0 0 24px rgba(232,184,64,0.22),
  0 0 48px rgba(196,148,60,0.08),
  2px 8px 16px rgba(0,0,0,0.35),
  inset 0 1px 0 rgba(255,220,120,0.25);
  }
}
[data-module="fellowship"]:hover {
  animation: none !important;
  box-shadow:
  0 0 0 1.5px #fff4c0,
  0 0 0 3px #7a5a20,
  0 0 0 4.5px #f8e068,
  0 0 0 6px #5a3a10,
  0 0 0 7.5px #f0c848,
  0 0 30px rgba(232,184,64,0.3),
  0 0 60px rgba(196,148,60,0.12),
  3px 16px 28px rgba(0,0,0,0.32),
  inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.construction-badge {
  position: absolute;
  top: 8px;
  right: -4px;
  background: linear-gradient(135deg, #3a2000, #2a1608);
  color: rgba(240,200,100,0.85);
  font-family: 'DM Mono', monospace;
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(196,148,60,0.3);
  white-space: nowrap;
  z-index: 5;
  transform: rotate(2deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.fellowship-construction-badge {
  position: absolute;
  top: 8px;
  right: -4px;
  background: linear-gradient(135deg, #3a2000, #2a1608);
  color: rgba(240,200,100,0.85);
  font-family: 'DM Mono', monospace;
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(196,148,60,0.3);
  white-space: nowrap;
  z-index: 5;
  transform: rotate(2deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
[data-module="open"]      { background: #1a1714; color: #f0e8d8; }
[data-module="logline"]   { background: #1c2e54; color: #c8d8f8; }
[data-module="ideas"]     { background: #f5d44a; color: #3a2a00; }
[data-module="character"] { background: #6030a0; color: #e8d8fc; }
[data-module="scene"]     { background: #c03820; color: #ffe8e0; }
[data-module="structure"] { background: #f8f0dc; color: #3a2800; }
[data-module="blocked"]   { background: #e8c0d8; color: #380c28; }
[data-module="manuscript"]{ background: #3a1808; color: #f8e8d8; }
[data-module="comedy"]    { background: #f97316; color: #1a0800; }
[data-module="blog"]      { background: #0e7490; color: #e0f7fa; }
[data-module="delivery"]  { background: #1e293b; color: #e2e8f0; }
[data-module="ama"]       { background: #1a2e1a; color: #c8e8c0; }
[data-module="halloferrors"] { background: #2a1a0a; color: #d4b896; border: 1px solid rgba(180,130,60,0.25); }
.hall-of-errors-card { animation: hoeReveal 1.2s ease-out both; }
@keyframes hoeReveal { from { opacity: 0; transform: scale(0.92) rotate(-2deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

.module-illus { margin-bottom: 10px; pointer-events: none; opacity: 0.85; }

.module-name {
  font-family: \'Caveat\', cursive;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 7px;
  color: inherit;
  pointer-events: none;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.module-desc {
  font-family: \'Caveat\', cursive;
  font-size: 1.0rem;
  line-height: 1.4;
  opacity: 0.8;
  color: inherit;
  pointer-events: none;
}

body[class^="room-"], body[class*=" room-"] {
  background-color: var(--room-bg);
  background-image: url('images/road-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
  color: var(--room-text);
  font-family: var(--room-font, var(--sans));
  position: relative;
  min-height: 100vh;
}

body[class^="room-"]::before, body[class*=" room-"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:

  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E"),

  linear-gradient(180deg,
  var(--room-tint, rgba(0,0,0,0.18)) 0%,
  var(--room-tint, rgba(0,0,0,0.08)) 40%,
  transparent 65%,
  rgba(0,0,0,0.25) 100%
  );
  opacity: 0.75;
}

body[class^="room-"] #messages,
body[class*=" room-"] #messages {
  max-width: 620px;
  margin: 0 auto;
  padding: 104px var(--sp-8) var(--sp-2);

  background:
  linear-gradient(180deg,
  var(--room-panel-border, rgba(255,255,255,0.08)) 0px,
  transparent 1px,
  transparent
  ),
  var(--room-panel, rgba(8,6,4,0.62));
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-radius: 4px 4px 0 0;
  border: 1px solid var(--room-panel-border, rgba(255,255,255,0.08));
  border-bottom: none;

  border-top: 1px solid var(--room-accent, rgba(255,255,255,0.12));
  box-shadow:

  0 -8px 40px rgba(0,0,0,0.22),
  0 2px 12px rgba(0,0,0,0.3),

  0 0 0 1px var(--room-panel-border, rgba(255,255,255,0.08)),
  0 0 0 3px rgba(0,0,0,0.2),
  0 0 0 4px var(--room-accent, rgba(196,148,60,0.12)),

  inset 0 1px 0 rgba(255,255,255,0.10),

  inset 0 1px 40px var(--room-panel-glow, rgba(255,255,255,0.02));
  position: relative; z-index: 2;
}

body[class^="room-"] #messages::before,
body[class*=" room-"] #messages::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
  transparent 5%,
  var(--room-accent, rgba(255,255,255,0.2)) 30%,
  var(--room-accent, rgba(255,255,255,0.2)) 70%,
  transparent 95%
  );
  opacity: 0.35;
  z-index: 3;
}

body[class^="room-"] .reply-zone-outer,
body[class*=" room-"] .reply-zone-outer {
  background: var(--room-panel, rgba(8,6,4,0.62));
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);

  border-top: none;
  box-shadow: inset 0 1px 0 var(--room-panel-border, rgba(255,255,255,0.06));
  padding: 0 var(--sp-10) var(--sp-12);
  position: relative; z-index: 2;
}

body.room-checkin   { --room-tint: rgba(220,150,60,0.22);  --room-panel: rgba(20,8,2,0.72);   --room-panel-border: rgba(200,140,60,0.25); --room-panel-glow: rgba(200,140,60,0.04); --panel-text: rgba(240,215,175,0.92); --panel-text-writer: rgba(210,185,145,0.7); }
body.room-open      { --room-tint: rgba(12,11,10,0.5);      --room-panel: rgba(8,7,5,0.82);    --room-panel-border: rgba(160,130,60,0.18);  --room-panel-glow: rgba(200,160,64,0.03); --panel-text: rgba(216,204,168,0.92); --panel-text-writer: rgba(180,168,130,0.7); }
body.room-logline   { --room-tint: rgba(60,4,10,0.35);     --room-panel: rgba(16,2,6,0.76);   --room-panel-border: rgba(220,160,60,0.2);  --room-panel-glow: rgba(245,192,48,0.03); --panel-text: rgba(235,210,160,0.92); --panel-text-writer: rgba(205,180,130,0.7); }
body.room-ideas     { --room-tint: rgba(200,180,20,0.2);   --room-panel: rgba(20,16,2,0.72);  --room-panel-border: rgba(220,200,40,0.25); --room-panel-glow: rgba(232,72,0,0.04);   --panel-text: rgba(245,230,160,0.92); --panel-text-writer: rgba(215,200,130,0.7); }
body.room-character { --room-tint: rgba(40,10,80,0.4);     --room-panel: rgba(10,2,20,0.76);  --room-panel-border: rgba(160,100,240,0.2); --room-panel-glow: rgba(212,128,252,0.04); --panel-text: rgba(225,200,250,0.92); --panel-text-writer: rgba(195,170,220,0.7); }
body.room-scene     { --room-tint: rgba(4,30,10,0.35);     --room-panel: rgba(2,14,4,0.76);   --room-panel-border: rgba(80,180,100,0.2);  --room-panel-glow: rgba(48,232,96,0.03);  --panel-text: rgba(190,240,200,0.92); --panel-text-writer: rgba(160,210,170,0.7); }
body.room-structure { --room-tint: rgba(30,20,4,0.3);      --room-panel: rgba(14,10,2,0.74);  --room-panel-border: rgba(200,160,60,0.22); --room-panel-glow: rgba(240,200,32,0.03); --panel-text: rgba(235,215,165,0.92); --panel-text-writer: rgba(205,185,135,0.7); }
body.room-blocked   { --room-tint: rgba(60,10,30,0.3);     --room-panel: rgba(20,4,12,0.74);  --room-panel-border: rgba(200,120,160,0.2); --room-panel-glow: rgba(200,120,160,0.04); --panel-text: rgba(235,200,220,0.92); --panel-text-writer: rgba(205,170,190,0.7); }
body.room-manuscript{ --room-tint: rgba(30,10,4,0.35);     --room-panel: rgba(16,4,2,0.76);   --room-panel-border: rgba(180,120,60,0.22); --room-panel-glow: rgba(180,120,60,0.04); --panel-text: rgba(240,215,180,0.92); --panel-text-writer: rgba(210,185,150,0.7); }
body.room-comedy    { --room-tint: rgba(180,80,10,0.25);   --room-panel: rgba(18,6,2,0.72);   --room-panel-border: rgba(240,120,40,0.25); --room-panel-glow: rgba(240,120,40,0.04); --panel-text: rgba(250,215,165,0.92); --panel-text-writer: rgba(220,185,135,0.7); }
body.room-blog      { --room-tint: rgba(8,80,100,0.3);     --room-panel: rgba(2,14,22,0.76);  --room-panel-border: rgba(60,180,220,0.2);  --room-panel-glow: rgba(60,180,220,0.04); --panel-text: rgba(185,230,245,0.92); --panel-text-writer: rgba(155,200,215,0.7); }
body.room-delivery  { --room-tint: rgba(10,16,30,0.35);    --room-panel: rgba(4,8,18,0.76);   --room-panel-border: rgba(120,160,220,0.2); --room-panel-glow: rgba(120,160,220,0.03); --panel-text: rgba(195,215,245,0.92); --panel-text-writer: rgba(165,185,215,0.7); }
body.room-ama       { --room-tint: rgba(10,16,8,0.35);     --room-panel: rgba(6,10,4,0.78);   --room-panel-border: rgba(140,180,100,0.2); --room-panel-glow: rgba(140,180,100,0.03); --panel-text: rgba(210,225,195,0.92); --panel-text-writer: rgba(180,200,160,0.7); }
body.room-halloferrors { --room-tint: rgba(20,10,0,0.4); --room-panel: rgba(15,8,2,0.82); --room-panel-border: rgba(180,130,60,0.2); --room-panel-glow: rgba(180,130,60,0.04); --panel-text: rgba(212,184,150,0.92); --panel-text-writer: rgba(180,150,110,0.7); }
body.room-fellowship{ --room-tint: rgba(40,20,4,0.35);     --room-panel: rgba(14,8,2,0.78);   --room-panel-border: rgba(196,148,60,0.25); --room-panel-glow: rgba(196,148,60,0.05); --panel-text: rgba(240,218,175,0.94); --panel-text-writer: rgba(210,188,145,0.72); }

body[class^="room-"] #messages .msg-body,
body[class*=" room-"] #messages .msg-body {
  color: var(--panel-text, rgba(245,228,190,0.95));
}
body[class^="room-"] #messages .message.writer .msg-body,
body[class*=" room-"] #messages .message.writer .msg-body {
  color: var(--panel-text-writer, rgba(205,185,145,0.7));
}
body[class^="room-"] #messages .msg-name,
body[class*=" room-"] #messages .msg-name {
  color: var(--room-accent);
  opacity: 0.7;
}

body[class^="room-"] .reply-zone-outer textarea,
body[class*=" room-"] .reply-zone-outer textarea {
  color: var(--panel-text, rgba(235,215,175,0.88)) !important;
}
body[class^="room-"] .reply-zone-outer textarea::placeholder,
body[class*=" room-"] .reply-zone-outer textarea::placeholder {
  color: var(--panel-text-writer, rgba(205,185,145,0.35)) !important;
}

#chat-screen > * { position: relative; z-index: 1; }

body.room-checkin {
  --room-bg: #f2e4c8;
  --room-text: #2c1404;
  --room-accent: #c04a08;
  --room-mid: #8a3010;
  --room-font: 'Instrument Serif', Georgia, serif;
  --room-radius: 2px;
  --fellow-size: 1.62rem;
  --fellow-leading: 1.92;
}
body.room-checkin::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0px, transparent 34px, rgba(180,90,40,0.20) 34px, rgba(180,90,40,0.20) 35px),
  linear-gradient(90deg, transparent 0px, transparent 72px, rgba(210,60,40,0.28) 72px, rgba(210,60,40,0.28) 74px, transparent 74px);
}

body.room-open {
  --room-bg: #0c0b0a;
  --room-text: #d8cca8;
  --room-accent: #c8a040;
  --room-mid: #8a6c30;
  --room-font: 'DM Mono', monospace;
  --room-radius: 0px;
  --fellow-size: 1.35rem;
  --fellow-leading: 1.85;
}
body.room-open::after {
  background-image:

  radial-gradient(ellipse 40% 80% at 50% 40%, rgba(240,230,200,0.04) 0%, transparent 100%),

  linear-gradient(180deg, transparent 48%, rgba(180,40,30,0.06) 49%, rgba(180,40,30,0.08) 50%, rgba(180,40,30,0.06) 51%, transparent 52%),

  repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(180,155,100,0.05) 27px, rgba(180,155,100,0.05) 28px),

  linear-gradient(90deg, transparent 11%, rgba(180,50,40,0.06) 11.2%, rgba(180,50,40,0.06) 11.4%, transparent 11.6%);
}

body.room-logline {
  --room-bg: #1a0308;
  --room-text: #fce8cc;
  --room-accent: #f5c030;
  --room-mid: #b88020;
  --room-font: 'DM Sans', system-ui, sans-serif;
  --room-radius: 0px;
  --fellow-size: 1.52rem;
  --fellow-leading: 1.65;
}
body.room-logline::after {
  background-image:
  repeating-linear-gradient(90deg, transparent 0, transparent 44px, rgba(220,160,30,0.10) 44px, rgba(220,160,30,0.10) 45px),
  repeating-linear-gradient(180deg, transparent 0, transparent 44px, rgba(220,160,30,0.06) 44px, rgba(220,160,30,0.06) 45px),
  linear-gradient(90deg, rgba(200,30,50,0.12) 0px, rgba(200,30,50,0.12) 4px, transparent 4px, transparent calc(100% - 4px), rgba(200,30,50,0.12) calc(100% - 4px));
}

body.room-ideas {
  --room-bg: #fdf5b0;
  --room-text: #1c0800;
  --room-accent: #e84800;
  --room-mid: #c03000;
  --room-font: 'Caveat', cursive;
  --room-radius: 6px;
  --fellow-size: 1.82rem;
  --fellow-leading: 1.58;
}
body.room-ideas::after {
  background-image:
  radial-gradient(circle 3px at 18% 22%, rgba(255,50,0,0.55) 0%, transparent 100%),
  radial-gradient(circle 4px at 82% 15%, rgba(0,180,180,0.50) 0%, transparent 100%),
  radial-gradient(circle 2px at 55% 75%, rgba(200,0,120,0.45) 0%, transparent 100%),
  radial-gradient(circle 5px at 8% 60%, rgba(255,80,0,0.40) 0%, transparent 100%),
  radial-gradient(circle 3px at 72% 80%, rgba(80,0,200,0.35) 0%, transparent 100%),
  radial-gradient(circle 2px at 35% 40%, rgba(0,160,140,0.40) 0%, transparent 100%);
}

body.room-character {
  --room-bg: #0e0618;
  --room-text: #eedcfc;
  --room-accent: #d480fc;
  --room-mid: #8038c0;
  --room-font: 'Instrument Serif', Georgia, serif;
  --room-radius: 1px;
  --fellow-size: 1.58rem;
  --fellow-leading: 1.90;
}
body.room-character::after {
  background-image:
  repeating-linear-gradient(-45deg, transparent 0, transparent 16px, rgba(180,80,240,0.08) 16px, rgba(180,80,240,0.08) 17px),
  repeating-linear-gradient(45deg, transparent 0, transparent 22px, rgba(120,30,190,0.06) 22px, rgba(120,30,190,0.06) 23px),
  radial-gradient(circle 2px at 10% 15%, rgba(220,120,255,0.45) 0%, transparent 100%),
  radial-gradient(circle 1px at 88% 22%, rgba(200,80,255,0.38) 0%, transparent 100%),
  radial-gradient(circle 2px at 5% 72%, rgba(160,40,220,0.35) 0%, transparent 100%),
  radial-gradient(circle 1px at 93% 80%, rgba(220,120,255,0.32) 0%, transparent 100%);
}

body.room-scene {
  --room-bg: #041408;
  --room-text: #c8f0b8;
  --room-accent: #30e860;
  --room-mid: #188030;
  --room-font: 'DM Sans', system-ui, sans-serif;
  --room-radius: 0px;
  --fellow-size: 1.48rem;
  --fellow-leading: 1.70;
}
body.room-scene::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(40,200,60,0.10) 28px, rgba(40,200,60,0.10) 29px),
  linear-gradient(90deg, transparent 0, transparent 62px, rgba(220,40,40,0.18) 62px, rgba(220,40,40,0.18) 64px, transparent 64px),
  linear-gradient(90deg, transparent 0, transparent 2px, rgba(40,200,60,0.08) 2px, rgba(40,200,60,0.08) 3px, transparent 3px);
}

body.room-structure {
  --room-bg: #08162a;
  --room-text: #c8dff8;
  --room-accent: #f0c820;
  --room-mid: #b09010;
  --room-font: 'DM Mono', monospace;
  --room-radius: 0px;
  --fellow-size: 1.4rem;
  --fellow-leading: 1.65;
}
body.room-structure::after {
  background-image:
  linear-gradient(90deg, rgba(160,200,255,0.12) 1px, transparent 1px),
  linear-gradient(180deg, rgba(160,200,255,0.12) 1px, transparent 1px),
  linear-gradient(90deg, rgba(160,200,255,0.05) 1px, transparent 1px),
  linear-gradient(180deg, rgba(160,200,255,0.05) 1px, transparent 1px),
  linear-gradient(90deg, transparent 0, transparent 2px, rgba(240,200,30,0.14) 2px, rgba(240,200,30,0.14) 3px, transparent 3px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, 100% 100%;
}

body.room-blocked {
  --room-bg: #0a0812;
  --room-text: #d0c8e8;
  --room-accent: #c080f8;
  --room-mid: #7040b8;
  --room-font: 'Instrument Serif', Georgia, serif;
  --room-radius: 0px;
  --fellow-size: 1.7rem;
  --fellow-leading: 2.05;
}
body.room-blocked::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0, transparent 42px, rgba(160,120,220,0.09) 42px, rgba(160,120,220,0.09) 43px);
}

body.room-manuscript {
  --room-bg: #f5edd8;
  --room-text: #201008;
  --room-accent: #a84010;
  --room-mid: #804010;
  --room-font: 'Instrument Serif', Georgia, serif;
  --room-radius: 0px;
  --fellow-size: 1.58rem;
  --fellow-leading: 1.85;
}
body.room-manuscript::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(160,80,20,0.18) 28px, rgba(160,80,20,0.18) 29px),
  linear-gradient(90deg,
  transparent 0, transparent 82px,
  rgba(180,70,20,0.22) 82px, rgba(180,70,20,0.22) 84px,
  transparent 84px, transparent calc(100% - 82px),
  rgba(180,70,20,0.14) calc(100% - 82px), rgba(180,70,20,0.14) calc(100% - 80px),
  transparent calc(100% - 80px)
  );
}

body.room-comedy {
  --room-bg: #1c0400;
  --room-text: #fff0d0;
  --room-accent: #ff6800;
  --room-mid: #cc4400;
  --room-font: 'DM Sans', system-ui, sans-serif;
  --room-radius: 4px;
  --fellow-size: 1.54rem;
  --fellow-leading: 1.72;
}
body.room-comedy::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0, transparent 22px, rgba(255,100,0,0.14) 22px, rgba(255,100,0,0.14) 23px, transparent 23px, transparent 46px, rgba(180,40,0,0.10) 46px, rgba(180,40,0,0.10) 47px),
  repeating-linear-gradient(90deg, transparent 0, transparent 35px, rgba(255,100,0,0.06) 35px, rgba(255,100,0,0.06) 36px);
}

body.room-blog {
  --room-bg: #021018;
  --room-text: #c8f0ff;
  --room-accent: #00e5ff;
  --room-mid: #0099cc;
  --room-font: 'DM Sans', system-ui, sans-serif;
  --room-radius: 4px;
  --fellow-size: 1.52rem;
  --fellow-leading: 1.72;
}
body.room-blog::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0, transparent 36px, rgba(0,220,255,0.10) 36px, rgba(0,220,255,0.10) 37px),
  repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(0,200,255,0.06) 80px, rgba(0,200,255,0.06) 81px),
  linear-gradient(90deg, rgba(0,220,255,0.15) 0, rgba(0,220,255,0.15) 2px, transparent 2px, transparent calc(100% - 2px), rgba(0,220,255,0.08) calc(100% - 2px));
}

body.room-delivery {
  --room-bg: #080520;
  --room-text: #e0d8ff;
  --room-accent: #a060ff;
  --room-mid: #6030c0;
  --room-font: 'DM Sans', system-ui, sans-serif;
  --room-radius: 4px;
  --fellow-size: 1.52rem;
  --fellow-leading: 1.72;
}
body.room-delivery::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0, transparent 18px, rgba(140,80,255,0.12) 18px, rgba(140,80,255,0.12) 19px, transparent 19px, transparent 54px, rgba(100,40,220,0.08) 54px, rgba(100,40,220,0.08) 55px),
  repeating-linear-gradient(90deg, transparent 0, transparent 24px, rgba(160,80,255,0.06) 24px, rgba(160,80,255,0.06) 25px);
}

body.room-ama {
  --room-bg: #0a0e08;
  --room-text: #d8e0c8;
  --room-accent: #8cb060;
  --room-mid: #5a7838;
  --room-font: 'DM Sans', system-ui, sans-serif;
  --room-radius: 6px;
  --fellow-size: 1.48rem;
  --fellow-leading: 1.78;
  background-image:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(100,160,60,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 75% 80%, rgba(80,120,40,0.1) 0%, transparent 50%);
}
body.room-ama::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0, transparent 36px, rgba(120,160,80,0.06) 36px, rgba(120,160,80,0.06) 37px),
  repeating-linear-gradient(90deg, transparent 0, transparent 200px, rgba(100,140,60,0.04) 200px, rgba(100,140,60,0.04) 201px);
}

body.room-halloferrors {
  --room-bg: #120a04;
  --room-text: #d4b896;
  --room-accent: #c09050;
  --room-mid: #8a6430;
  --room-font: 'Instrument Serif', Georgia, serif;
  --room-radius: 2px;
  --fellow-size: 1.55rem;
  --fellow-leading: 1.82;
}
body.room-halloferrors::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0, transparent 42px, rgba(180,130,60,0.08) 42px, rgba(180,130,60,0.08) 43px),
  repeating-linear-gradient(90deg, transparent 0, transparent 320px, rgba(140,90,20,0.05) 320px, rgba(140,90,20,0.05) 321px);
}

body.room-fellowship {
  --room-bg: #0e0804;
  --room-text: #f0dbb8;
  --room-accent: #c4943c;
  --room-mid: #8a6428;
  --room-font: 'Instrument Serif', Georgia, serif;
  --room-radius: 2px;
  --fellow-size: 1.58rem;
  --fellow-leading: 1.88;
}
body.room-fellowship::after {
  background-image:
  repeating-linear-gradient(180deg, transparent 0, transparent 38px, rgba(196,148,60,0.10) 38px, rgba(196,148,60,0.10) 39px),
  repeating-linear-gradient(90deg, transparent 0, transparent 280px, rgba(160,100,30,0.06) 280px, rgba(160,100,30,0.06) 281px);
}

.writing-pad-outer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
}
.writing-pad-outer.active {
  display: block;
}
.writing-pad-outer.visible {
  transform: translateY(0);
  opacity: 1;
}
.writing-pad {
  max-width: 840px;
  margin: 0 auto;
  padding: 18px 24px 22px;
  background: linear-gradient(180deg, #f8f0dc, #f2e8d0);
  border-top: 2px solid rgba(196,148,60,0.45);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 40px rgba(0,0,0,0.35), 0 -2px 12px rgba(0,0,0,0.15);
}
.writing-pad-exercise {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 0.95rem;
  color: #5a3a10;
  font-style: italic;
  margin-bottom: 14px;
  line-height: 1.6;
  padding: 0 4px;
}
.writing-pad-exercise::before {
  content: 'Your exercise';
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160,110,30,0.7);
  margin-bottom: 6px;
}
.writing-pad textarea {
  width: 100%;
  min-height: 180px;
  max-height: 50vh;
  padding: 18px 20px;
  border: 1px solid rgba(196,148,60,0.25);
  border-radius: 6px;
  background:
  repeating-linear-gradient(180deg, transparent 0px, transparent 31px, rgba(160,120,60,0.12) 31px, rgba(160,120,60,0.12) 32px),
  #faf6ed;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.05rem;
  line-height: 2;
  color: #2c1a08;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.writing-pad textarea:focus {
  border-color: rgba(196,148,60,0.5);
  box-shadow: 0 0 0 3px rgba(196,148,60,0.1);
}
.writing-pad textarea::placeholder {
  color: rgba(120,80,30,0.3);
  font-style: italic;
}
.writing-pad-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
.writing-pad-cancel {
  padding: 8px 16px;
  background: none;
  border: 1px solid rgba(120,80,30,0.18);
  border-radius: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.8rem;
  color: #8a6428;
  cursor: pointer;
  transition: all 0.2s;
}
.writing-pad-cancel:hover { border-color: rgba(120,80,30,0.35); }
.writing-pad-submit {
  padding: 10px 26px;
  background: linear-gradient(135deg, #c4943c, #a07020);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(160,100,20,0.25);
}
.writing-pad-submit:hover {
  background: linear-gradient(135deg, #d4a44c, #b08030);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(160,100,20,0.35);
}
.writing-pad-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

body.writing-pad-active .reply-zone-outer { display: none !important; }
body.writing-pad-active .voice-status-bar { display: none !important; }

.fellowship-progress {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
}
body.room-fellowship .fellowship-progress { display: flex; }

.fellowship-nav-progress {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
body.room-fellowship .fellowship-nav-progress { display: flex; }
.fellowship-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fellowship-dots {
  display: flex;
  gap: 5px;
}
.fellowship-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(196,148,60,0.15);
  border: 1.5px solid rgba(196,148,60,0.25);
  transition: all 0.4s ease;
}
.fellowship-dot.completed {
  background: rgba(196,148,60,0.85);
  border-color: rgba(196,148,60,0.9);
  box-shadow: 0 0 4px rgba(196,148,60,0.3);
}
.fellowship-dot.current {
  background: rgba(196,148,60,0.55);
  border-color: rgba(196,148,60,0.75);
  animation: fpDotPulse 2.5s ease-in-out infinite;
}
@keyframes fpDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,148,60,0.35); }
  50% { box-shadow: 0 0 0 5px rgba(196,148,60,0); }
}
.fellowship-session-num {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: rgba(196,148,60,0.6);
  font-family: 'DM Sans', system-ui, sans-serif;
}

.message.writer.exercise-submission .msg-body {
  border-left: 3px solid rgba(196,148,60,0.4);
  padding: 14px 18px;
  border-radius: 2px 6px 6px 2px;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  font-style: italic;
  background: rgba(196,148,60,0.04);
}
.message.writer.exercise-submission .msg-label::after {
  content: ' (exercise)';
  font-size: 0.7rem;
  opacity: 0.5;
  font-style: italic;
}

@media (max-width: 768px) {
  .writing-pad {
  padding: 14px 16px 18px;
  border-radius: 10px 10px 0 0;
  }
  .writing-pad textarea {
  min-height: 200px;
  font-size: 1rem;
  padding: 14px 16px;
  }
  .writing-pad-exercise { font-size: 0.88rem; }
}

#fellowship-screen {
  position: relative;
  min-height: 100vh;
  overflow-y: auto;
}
.fm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
  radial-gradient(ellipse at 50% 0%, rgba(255,248,230,0.9) 0%, transparent 70%),
  radial-gradient(ellipse at 20% 90%, rgba(196,148,60,0.06) 0%, transparent 50%),
  linear-gradient(180deg, #faf6ed 0%, #f4ede0 40%, #ede4d0 100%);
}
.fm-container {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}
.fm-back {
  background: none;
  border: 1px solid rgba(80,50,10,0.15);
  color: rgba(80,50,10,0.5);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 32px;
}
.fm-back:hover { border-color: rgba(80,50,10,0.3); color: rgba(80,50,10,0.8); }
.fm-header {
  text-align: center;
  margin-bottom: 44px;
}
.fm-icon { margin-bottom: 12px; }
.fm-icon svg { stroke: rgba(160,110,30,0.5); }
.fm-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 2.6rem;
  color: #1a0e02;
  font-weight: 400;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.fm-subtitle {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.92rem;
  color: rgba(40,24,6,0.65);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto;
}
.fm-sessions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fm-intro-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(248,240,225,0.5) 100%);
  border: 1.5px solid rgba(20,12,4,0.25);
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(232,184,75,0.15);
  position: relative;
}
.fm-intro-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 11px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(196,134,42,0.4), rgba(20,12,4,0.3), rgba(196,134,42,0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.fm-intro-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: #1a0e02;
  margin-bottom: 12px;
  text-shadow: 0 0.5px 0 rgba(196,134,42,0.15);
}
.fm-intro-card p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(30,18,4,0.82);
  margin-bottom: 10px;
}
.fm-intro-card p:last-child { margin-bottom: 0; }
.fm-intro-note {
  font-style: italic;
  color: rgba(120,80,20,0.7) !important;
  font-size: 0.82rem !important;
  padding-top: 8px;
  border-top: 1px solid rgba(20,12,4,0.08);
  margin-top: 14px !important;
}
.fm-intro-card .mwf-listen-bar {
  background: linear-gradient(135deg, rgba(196,134,42,0.12) 0%, rgba(180,120,60,0.08) 100%);
  border-color: rgba(196,134,42,0.3);
}
.fm-intro-card .mwf-listen-bar:hover {
  background: linear-gradient(135deg, rgba(196,134,42,0.2) 0%, rgba(180,120,60,0.14) 100%);
  border-color: rgba(196,134,42,0.45);
}
.fm-intro-card .mwf-listen-bar svg { color: #b8741e; }
.fm-intro-card .mwf-listen-bar-text { color: #8a5818; }
.fm-intro-card .mwf-listen-bar.speaking .mwf-listen-bar-text { color: #C9A227; }

.fm-session {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 20px;
  border-bottom: 1px solid rgba(20,12,4,0.1);
  position: relative;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: background 0.2s;
}
.fm-session:last-child { border-bottom: none; }
.fm-session.current {
  background: linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(248,240,225,0.5) 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1.5px rgba(20,12,4,0.15);
  border: 1px solid rgba(196,134,42,0.25);
}
.fm-session.current:hover { background: rgba(255,255,255,0.85); }
.fm-session-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1rem;
  margin-top: 2px;
}
.fm-session.completed .fm-session-num {
  background: rgba(196,148,60,0.15);
  color: rgba(140,90,20,0.9);
  border: 1.5px solid rgba(20,12,4,0.2);
}
.fm-session.current .fm-session-num {
  background: linear-gradient(135deg, #c4943c, #8a5c18);
  color: #fff;
  border: 1.5px solid rgba(20,12,4,0.3);
  box-shadow: 0 2px 10px rgba(196,148,60,0.35), 0 0 0 1px rgba(232,184,75,0.2);
  animation: fpDotPulse 2.5s ease-in-out infinite;
}
.fm-session.locked .fm-session-num {
  background: rgba(0,0,0,0.04);
  color: rgba(60,40,10,0.25);
  border: 1.5px solid rgba(20,12,4,0.08);
}
.fm-session-body { flex: 1; }
.fm-session-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.2rem;
  margin: 0 0 5px;
}
.fm-session.completed .fm-session-title { color: rgba(26,14,2,0.6); }
.fm-session.current .fm-session-title { color: #1a0e02; font-weight: 400; text-shadow: 0 0.5px 0 rgba(0,0,0,0.05); }
.fm-session.locked .fm-session-title { color: rgba(26,14,2,0.2); }
.fm-session-hook {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0;
}
.fm-session.completed .fm-session-hook { color: rgba(60,35,8,0.4); }
.fm-session.current .fm-session-hook { color: rgba(40,24,6,0.72); }
.fm-session.locked .fm-session-hook { color: rgba(60,35,8,0.15); }
.fm-session-action { flex-shrink: 0; margin-top: 4px; }
.fm-begin-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #c4943c 0%, #8a5c18 100%);
  color: #fff;
  border: 1.5px solid rgba(20,12,4,0.2);
  border-radius: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15), inset 0 1px 0 rgba(232,184,75,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.fm-begin-btn:hover {
  background: linear-gradient(135deg, #d4a44c 0%, #a07020 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(232,184,75,0.4);
}
.fm-completed-check {
  color: rgba(140,90,20,0.55);
  font-size: 0.75rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  padding: 8px 14px;
}
.fm-footer-note {
  text-align: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(40,24,6,0.35);
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(20,12,4,0.1);
}
@media (max-width: 600px) {
  .fm-title { font-size: 1.9rem; }
  .fm-session { gap: 14px; padding: 18px 14px; }
  .fm-session-num { width: 32px; height: 32px; font-size: 0.88rem; }
  .fm-session-title { font-size: 1.05rem; }
}

body.room-checkin,
body.room-ideas,
body.room-manuscript {
  --room-nav-border: rgba(80,30,0,0.10);
}
body.room-checkin nav,
body.room-ideas nav,
body.room-manuscript nav {
  background: rgba(255,245,220,0.88) !important;
  border-bottom-color: rgba(120,60,10,0.15) !important;
  backdrop-filter: blur(8px);
}
body.room-checkin .logo-wordmark,
body.room-ideas .logo-wordmark,
body.room-manuscript .logo-wordmark { color: #2c1408 !important; opacity: 0.85; }
body.room-checkin .logo-wordmark em,
body.room-ideas .logo-wordmark em,
body.room-manuscript .logo-wordmark em { color: var(--room-accent) !important; opacity: 1; }
body.room-checkin .nav-back-btn,
body.room-ideas .nav-back-btn,
body.room-manuscript .nav-back-btn {

  box-shadow:
  0 0 0 1.5px #b8861e, 0 0 0 2.5px #7a5808, 0 0 0 4px #c4982a,
  0 3px 12px rgba(0,0,0,0.2),
  inset 0 1px 0 rgba(255,255,255,0.06);
}
body.room-checkin .nav-back-btn:hover,
body.room-ideas .nav-back-btn:hover,
body.room-manuscript .nav-back-btn:hover {
  box-shadow:
  0 0 0 1.5px #d4a030, 0 0 0 2.5px #8a6510, 0 0 0 4px #e0b040,
  0 5px 16px rgba(0,0,0,0.3), 0 0 12px rgba(196,134,42,0.15),
  inset 0 1px 0 rgba(255,255,255,0.08);
}

body.room-checkin .nav-room-title,
body.room-ideas .nav-room-title,
body.room-manuscript .nav-room-title { color: var(--room-accent) !important; opacity: 0.85; }

body.room-checkin .msg-body,
body.room-ideas .msg-body,
body.room-manuscript .msg-body { color: var(--room-text); }
body.room-checkin .reply-box,
body.room-ideas .reply-box,
body.room-manuscript .reply-box { border-top-color: rgba(100,40,10,0.22); }
body.room-checkin #reply-input,
body.room-ideas #reply-input,
body.room-manuscript #reply-input {
  color: var(--room-text);
}
body.room-checkin #reply-input::placeholder,
body.room-ideas #reply-input::placeholder,
body.room-manuscript #reply-input::placeholder { color: rgba(80,30,10,0.45); }
body.room-checkin .reply-hint,
body.room-ideas .reply-hint,
body.room-manuscript .reply-hint { color: rgba(80,30,10,0.45) !important; }
body.room-checkin .send-btn,
body.room-ideas .send-btn,
body.room-manuscript .send-btn {
  border-color: rgba(100,40,10,0.35) !important;
  color: var(--room-text) !important;
}
body.room-ideas .send-btn {
  border-color: rgba(180,60,0,0.40) !important;
  color: #1c0800 !important;
}

#chat-screen { min-height: 100vh; display: none; flex-direction: column; position: relative; z-index: 1; }
#chat-screen.active { display: flex; flex-direction: column; }

#chat-screen > #messages,
#chat-screen > .reply-zone-outer { position: relative; z-index: 2; }

.nav-room-info {
  display: flex; align-items: center; gap: 12px;
  flex: 1; margin-left: 8px;
}
.nav-back-btn {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  padding: 6px 14px; border-radius: 5px;
  font-family: var(--mono, monospace); font-size: 0.65rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #d4922a;
  background:
  repeating-linear-gradient(92deg, transparent 0px, rgba(255,255,255,0.012) 1px, transparent 2px, transparent 4px),
  linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%);
  border: 1px solid transparent;
  box-shadow:
  0 0 0 1.5px #b8861e, 0 0 0 2.5px #7a5808, 0 0 0 4px #c4982a,
  0 3px 10px rgba(0,0,0,0.4),
  inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(196,134,42,0.2);
  transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
}
.nav-back-btn:hover {
  transform: translateY(-1px); color: #f0c060;
  box-shadow:
  0 0 0 1.5px #d4a030, 0 0 0 2.5px #8a6510, 0 0 0 4px #e0b040,
  0 5px 16px rgba(0,0,0,0.45), 0 0 12px rgba(196,134,42,0.15),
  inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav-back-btn svg { fill: currentColor; }
.nav-room-title {
  font-family: var(--mono, monospace);
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--room-accent, #C9A227); opacity: 0.9;
}
.msg-label {
  font-family: var(--mono, monospace);
  font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--room-text, #f0e8d8); opacity: 0.75;
  margin-bottom: 3px;
}
.nav-save-btn {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 7px 16px; border-radius: 5px;
  font-family: var(--mono, monospace); font-size: 0.58rem;
  font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  line-height: 1.45; text-align: center;
  color: #d4922a;
  background:
  repeating-linear-gradient(92deg, transparent 0px, rgba(255,255,255,0.012) 1px, transparent 2px, transparent 4px),
  linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%);
  border: 1px solid transparent;
  box-shadow:
  0 0 0 1.5px #b8861e, 0 0 0 2.5px #7a5808, 0 0 0 4px #c4982a,
  0 3px 10px rgba(0,0,0,0.4),
  inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(196,134,42,0.2);
  transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
  margin-left: auto;
}
.nav-save-btn:hover {
  transform: translateY(-1px); color: #f0c060;
  box-shadow:
  0 0 0 1.5px #d4a030, 0 0 0 2.5px #8a6510, 0 0 0 4px #e0b040,
  0 5px 16px rgba(0,0,0,0.45), 0 0 12px rgba(196,134,42,0.15),
  inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav-save-btn.saved { color: #4ade80; border-color: transparent; box-shadow: 0 0 0 1.5px #2a8a40, 0 0 0 2.5px #1a5a28, 0 0 0 4px #3aaa50, 0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 12px rgba(74,222,128,0.15); text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(74,222,128,0.3); }
.nav-new-btn {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 7px 14px; border-radius: 5px;
  font-family: var(--mono, monospace); font-size: 0.58rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.45; text-align: center;
  color: #d4922a;
  background:
  repeating-linear-gradient(92deg, transparent 0px, rgba(255,255,255,0.012) 1px, transparent 2px, transparent 4px),
  linear-gradient(175deg, #2a2218 0%, #1a1408 50%, #221c10 100%);
  border: 1px solid transparent;
  box-shadow:
  0 0 0 1.5px #b8861e, 0 0 0 2.5px #7a5808, 0 0 0 4px #c4982a,
  0 3px 10px rgba(0,0,0,0.4),
  inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(196,134,42,0.2);
  transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
  margin-left: auto;
}
.nav-new-btn:hover {
  transform: translateY(-1px); color: #f0c060;
  box-shadow:
  0 0 0 1.5px #d4a030, 0 0 0 2.5px #8a6510, 0 0 0 4px #e0b040,
  0 5px 16px rgba(0,0,0,0.45), 0 0 12px rgba(196,134,42,0.15),
  inset 0 1px 0 rgba(255,255,255,0.08);
}

.room-header { display: none; }

body.room-logline .room-header {
  border-bottom: 1px solid rgba(232,200,74,0.15);
  letter-spacing: 0.05em;
}
body.room-structure .room-header {
  border-bottom: 1px solid rgba(224,168,48,0.2);
}

.back-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: inherit; cursor: pointer;
  width: 30px; height: 30px;
  border-radius: var(--room-radius, 4px);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0; opacity: 0.6;
}
.back-btn:hover { background: rgba(255,255,255,0.08); opacity: 1; }

.room-header-info { flex: 1; }
.room-title {
  font-family: var(--room-font, var(--sans));
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.5;
  letter-spacing: 0.04em;
}
body.room-logline .room-title { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.7rem; font-family: 'DM Mono', monospace; }
body.room-structure .room-title { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.7rem; font-family: 'DM Mono', monospace; }
body.room-open .room-title { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.62rem; font-weight: 400; opacity: 0.6; }

.room-sub { display: block; font-size: 0.65rem; opacity: 0.75; margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; }
.room-art { opacity: 0.7; flex-shrink: 0; }

#messages {
  padding: 80px 0 8px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
}

.message { display: flex; flex-direction: column; margin-bottom: 24px; }
.msg-meta {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.msg-avatar { display: none; }
.msg-name {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--room-accent);
  opacity: 0.5;
}
.message.writer .msg-name { opacity: 0.2; }
.msg-body {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--room-font, var(--sans));
  font-size: var(--fellow-size, 1rem);
  line-height: var(--fellow-leading, 1.7);
  color: var(--room-text);
}
.msg-body p { margin-bottom: 0.8em; }
.msg-body p:last-child { margin-bottom: 0; }

.message.fellow .msg-body {
  color: var(--room-text);
  opacity: 0.92;
}

.message.fellow .msg-body p.msg-para-reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: paraReveal 0.55s ease forwards;
  animation-delay: calc(var(--para-idx, 0) * 0.15s);
}
@keyframes paraReveal {
  to { opacity: 1; transform: translateY(0); }
}

.message.fellow.restored .msg-body p.msg-para-reveal {
  opacity: 1; transform: none; animation: none;
}

.message.writer .msg-body {
  color: var(--room-accent);
  font-size: var(--fellow-size, 1rem);
  padding-left: 20px;
  border-left: 2px solid var(--room-accent);
  margin-left: 0;
  opacity: 0.75;
}

body.room-checkin .message.fellow .msg-body {
  font-style: italic;
  padding: 0 0 0 4px;
  border-left: 2px solid rgba(200,149,106,0.3);
  padding-left: 20px;
}
body.room-checkin .message.writer .msg-body {
  font-style: normal;
  border-left-color: rgba(200,149,106,0.5);
}

body.room-open .message.fellow .msg-body {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: rgba(216,204,168,0.88);

  text-shadow: 0 0 1px rgba(216,204,168,0.15);
}
body.room-open .message.fellow .msg-label {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.55rem;
  opacity: 0.4;
}
body.room-open .message.writer .msg-body {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  border-left: 2px solid rgba(200,160,64,0.25);
  padding-left: 14px;
  color: rgba(200,180,140,0.75);
}
body.room-open .message.writer .msg-label {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.55rem;
  opacity: 0.35;
}

body.room-open .input-bar {
  border-color: rgba(160,130,60,0.2) !important;
  background: rgba(240,230,200,0.03) !important;
}
body.room-open .input-bar textarea {
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 0.05em !important;
  font-size: 0.85rem !important;
}

body.room-logline .message.fellow .msg-body {
  font-size: 1rem;
  letter-spacing: 0.01em;
  border-top: 1px solid rgba(232,200,74,0.12);
  padding-top: 20px;
  margin-top: -20px;
}
body.room-logline .message.writer .msg-body {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  border-left-color: rgba(232,200,74,0.4);
  letter-spacing: 0.03em;
}

body.room-ideas .message.fellow .msg-body {
  font-size: 1.3rem;
  line-height: 1.55;
  transform: rotate(-0.3deg);
}
body.room-ideas .message.writer .msg-body {
  font-size: 1.1rem;
  border-left-color: rgba(240,200,48,0.5);
  transform: rotate(0.2deg);
}

body.room-character .message.fellow .msg-body {
  font-size: 1.05rem;
  padding-left: 0;
}
body.room-character .message.writer .msg-body {
  border-left-color: rgba(192,144,248,0.4);
  font-style: italic;
}

body.room-scene .message.fellow .msg-body {
  font-size: 0.96rem;
  letter-spacing: 0.01em;
}
body.room-scene .message.writer .msg-body {
  border-left-color: rgba(104,200,120,0.4);
}

body.room-structure .message.fellow .msg-body {
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  line-height: 1.7;
}
body.room-structure .message.writer .msg-body {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  border-left-color: rgba(224,168,48,0.4);
}

body.room-blocked .message.fellow .msg-body {
  font-size: 1.15rem;
  line-height: 2;
  opacity: 0.88;
}
body.room-blocked .message.writer .msg-body {
  border-left-color: rgba(152,120,184,0.4);
  opacity: 0.6;
}

body.room-manuscript .message.fellow .msg-body {
  font-size: 1.05rem;
  line-height: 1.8;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.room-manuscript .message.writer .msg-body {
  border-left-color: rgba(200,144,96,0.4);
  font-style: italic;
}

.thinking-dots { display: flex; gap: 6px; padding: 12px 0; }
.t-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--room-accent);
  opacity: 0.4;
  animation: tdot 1.4s ease-in-out infinite;
}
.t-dot:nth-child(2) { animation-delay: 0.2s; }
.t-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes tdot { 0%,80%,100%{opacity:0.2;transform:scale(0.8)} 40%{opacity:0.8;transform:scale(1.15)} }

.logline-presentation {
  border: 1px solid rgba(232,200,74,0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.logline-intro {
  padding: 10px 20px;
  font-family: 'DM Mono', monospace; font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.35; border-bottom: 1px solid rgba(232,200,74,0.12);
}
.logline-option {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.logline-option:last-child { border-bottom: none; }
.logline-option-label {
  font-family: 'DM Mono', monospace; font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--room-accent); opacity: 0.6; margin-bottom: 10px;
}
.logline-text { font-size: 1.05rem; line-height: 1.65; }
.logline-outro {
  padding: 16px 20px;
  font-size: 0.88rem; opacity: 0.5;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-style: italic; font-family: 'Instrument Serif', serif;
}

.reply-zone-outer {
  width: 100%;
  padding: 0 40px 48px;
}
.reply-zone {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.reply-box {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  padding-top: var(--sp-4);
  position: relative;
}

.reply-box::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 3px;
  background:
  linear-gradient(90deg,
  transparent,
  var(--room-panel-border, rgba(255,255,255,0.1)) 25%,
  var(--room-accent, rgba(255,255,255,0.15)) 50%,
  var(--room-panel-border, rgba(255,255,255,0.1)) 75%,
  transparent
  ),
  linear-gradient(90deg,
  transparent,
  var(--room-accent, rgba(196,148,60,0.08)) 30%,
  var(--room-accent, rgba(196,148,60,0.08)) 70%,
  transparent
  );
  background-size: 100% 1px, 100% 1px;
  background-position: top, bottom;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.file-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; font-size: 0.72rem;
  color: var(--room-accent); opacity: 0.7;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 8px;
}
.file-badge-remove {
  background: none; border: none; color: inherit;
  cursor: pointer; font-size: 0.72rem; opacity: 0.5;
  margin-left: auto; padding: 0 2px;
}

textarea#reply-input {
  width: 100%; background: none; border: none; outline: none;
  color: var(--room-accent);
  font-family: var(--room-font, var(--sans));
  font-size: var(--fellow-size, 1rem);
  line-height: var(--fellow-leading, 1.7);
  resize: none; padding: 0;
  min-height: 52px; max-height: 200px;
  caret-color: var(--room-accent);
}
textarea#reply-input::placeholder {
  color: var(--room-text);
  opacity: 0.35;
  font-style: italic;
}

.reply-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0 0;
  flex-wrap: nowrap;
}
.reply-left { display: none; }

.mwf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; padding: 0 13px;
  border-radius: 5px;
  font-family: 'DM Mono', monospace; font-size: 9px;
  font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);

  background: linear-gradient(to bottom,
  rgba(255,255,255,0.20) 0%,
  rgba(255,255,255,0.09) 30%,
  rgba(0,0,0,0.06) 60%,
  rgba(0,0,0,0.18) 100%
  );

  border: 1px solid rgba(0,0,0,0.55);
  border-top-color: rgba(255,255,255,0.14);

  box-shadow:

  inset 0 1px 0 rgba(255,255,255,0.22),

  inset 0 -2px 0 rgba(0,0,0,0.45),

  inset 1px 0 0 rgba(255,255,255,0.07),

  0 2px 0 rgba(0,0,0,0.55),

  0 3px 6px rgba(0,0,0,0.5),
  0 5px 14px rgba(0,0,0,0.28),

  0 0 0 1px rgba(0,0,0,0.2);
  transition: box-shadow 0.08s, transform 0.07s, filter 0.08s;
  user-select: none;
  position: relative;
}
.mwf-btn:hover {
  color: #fff;
  filter: brightness(1.12);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.28),
  inset 0 -2px 0 rgba(0,0,0,0.45),
  inset 1px 0 0 rgba(255,255,255,0.09),
  0 2px 0 rgba(0,0,0,0.55),
  0 4px 8px rgba(0,0,0,0.55),
  0 7px 18px rgba(0,0,0,0.3),
  0 0 0 1px rgba(0,0,0,0.25);
}
.mwf-btn:active {

  transform: translateY(2px);
  filter: brightness(0.9);
  box-shadow:
  inset 0 2px 6px rgba(0,0,0,0.55),
  inset 0 1px 3px rgba(0,0,0,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.2),
  0 0 0 rgba(0,0,0,0),
  0 1px 2px rgba(0,0,0,0.3),
  0 0 0 1px rgba(0,0,0,0.2);
}
.mwf-btn:disabled { opacity: 0.22; cursor: not-allowed; transform: none; filter: none; }
.mwf-btn svg { flex-shrink: 0; }

.mwf-btn-icon {
  width: 32px; padding: 0; border-radius: 6px;
}

.send-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 20px;
  border-radius: 5px;
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);

  background:
  linear-gradient(to bottom,
  rgba(255,255,255,0.28) 0%,
  rgba(255,255,255,0.10) 35%,
  rgba(0,0,0,0.05) 65%,
  rgba(0,0,0,0.22) 100%
  ),
  var(--room-accent, #c8963e);
  border: 1px solid rgba(0,0,0,0.55);
  border-top-color: rgba(255,255,255,0.32);
  box-shadow:

  inset 0 1px 0 rgba(255,255,255,0.38),

  inset 0 -3px 0 rgba(0,0,0,0.4),

  0 3px 0 rgba(0,0,0,0.6),

  0 4px 8px rgba(0,0,0,0.55),
  0 6px 18px rgba(0,0,0,0.3),

  0 0 0 1px rgba(0,0,0,0.22),
  0 0 0 2.5px rgba(196,148,60,0.18),
  0 0 0 3.5px rgba(0,0,0,0.12);
  transition: box-shadow 0.08s, transform 0.07s, filter 0.08s;
  user-select: none;
}
.send-btn:hover {
  filter: brightness(1.12) saturate(1.1);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.42),
  inset 0 -3px 0 rgba(0,0,0,0.4),
  0 3px 0 rgba(0,0,0,0.6),
  0 5px 10px rgba(0,0,0,0.6),
  0 8px 22px rgba(0,0,0,0.32),
  0 0 0 1px rgba(0,0,0,0.28),
  0 0 0 3px rgba(232,184,64,0.28),
  0 0 0 4px rgba(0,0,0,0.15);
}
.send-btn:active {
  transform: translateY(2px);
  filter: brightness(0.88);
  box-shadow:
  inset 0 3px 8px rgba(0,0,0,0.5),
  inset 0 1px 3px rgba(0,0,0,0.35),
  0 0 0 rgba(0,0,0,0),
  0 1px 2px rgba(0,0,0,0.3),
  0 0 0 1px rgba(0,0,0,0.22);
}
.send-btn:disabled { opacity: 0.25; cursor: not-allowed; transform: none; filter: none; }
.send-btn svg { width: 11px; height: 11px; }

.mwf-seg-group {
  display: inline-flex; align-items: stretch;
  height: 34px; flex-shrink: 0;
  border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.55);
  border-top-color: rgba(255,255,255,0.13);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.14),
  inset 0 -2px 0 rgba(0,0,0,0.4),
  0 2px 0 rgba(0,0,0,0.5),
  0 3px 7px rgba(0,0,0,0.45),
  0 0 0 1px rgba(0,0,0,0.18);
}
.mwf-seg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 100%; padding: 0;
  font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; cursor: pointer; border: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  background: linear-gradient(to bottom,
  rgba(255,255,255,0.13) 0%,
  rgba(255,255,255,0.04) 40%,
  rgba(0,0,0,0.1) 100%
  );
  color: rgba(255,255,255,0.38);
  transition: background 0.15s, color 0.12s;
  border-right: 1px solid rgba(0,0,0,0.35);
}
.mwf-seg-btn:last-child { border-right: none; }
.mwf-seg-btn.active {
  background: linear-gradient(to bottom,
  rgba(165,110,255,0.65) 0%,
  rgba(130,75,220,0.7) 100%
  );
  color: #fff;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.4), inset 0 1px 2px rgba(0,0,0,0.3);
}
.mwf-seg-btn:active { filter: brightness(0.82); }

.mwf-vol-slider {
  width: 56px; height: 3px;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.15); border-radius: 2px;
  outline: none; cursor: pointer;
  accent-color: rgba(180,120,255,0.8);
  flex-shrink: 0;
}

body.room-checkin .mwf-btn,
body.room-ideas .mwf-btn,
body.room-manuscript .mwf-btn,
body.room-blog .mwf-btn {
  color: rgba(35,20,5,0.72);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  background: linear-gradient(to bottom,
  rgba(255,255,255,0.75) 0%,
  rgba(255,255,255,0.42) 40%,
  rgba(210,195,170,0.3) 70%,
  rgba(180,160,130,0.4) 100%
  );
  border-color: rgba(0,0,0,0.3);
  border-top-color: rgba(255,255,255,0.9);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.9),
  inset 0 -2px 0 rgba(0,0,0,0.14),
  inset 1px 0 0 rgba(255,255,255,0.5),
  0 2px 0 rgba(0,0,0,0.22),
  0 3px 6px rgba(0,0,0,0.2),
  0 5px 12px rgba(0,0,0,0.1),
  0 0 0 1px rgba(0,0,0,0.1);
}
body.room-checkin .mwf-btn:hover,
body.room-ideas .mwf-btn:hover,
body.room-manuscript .mwf-btn:hover,
body.room-blog .mwf-btn:hover {
  color: rgba(35,20,5,0.95);
  filter: brightness(1.06);
}
body.room-checkin .mwf-btn:active,
body.room-ideas .mwf-btn:active,
body.room-manuscript .mwf-btn:active,
body.room-blog .mwf-btn:active {
  box-shadow:
  inset 0 3px 7px rgba(0,0,0,0.2),
  inset 0 1px 3px rgba(0,0,0,0.15),
  0 1px 1px rgba(0,0,0,0.1),
  0 0 0 1px rgba(0,0,0,0.1);
}
body.room-checkin .mwf-seg-group,
body.room-ideas .mwf-seg-group,
body.room-manuscript .mwf-seg-group,
body.room-blog .mwf-seg-group {
  border-color: rgba(0,0,0,0.3);
  border-top-color: rgba(255,255,255,0.8);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.8),
  inset 0 -2px 0 rgba(0,0,0,0.12),
  0 2px 0 rgba(0,0,0,0.2),
  0 3px 6px rgba(0,0,0,0.18),
  0 0 0 1px rgba(0,0,0,0.09);
}
body.room-checkin .mwf-seg-btn,
body.room-ideas .mwf-seg-btn,
body.room-manuscript .mwf-seg-btn,
body.room-blog .mwf-seg-btn {
  color: rgba(35,20,5,0.45);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  background: linear-gradient(to bottom,
  rgba(255,255,255,0.7) 0%,
  rgba(220,205,180,0.4) 100%
  );
  border-right-color: rgba(0,0,0,0.2);
}
body.room-checkin .lets-talk-btn,
body.room-ideas .lets-talk-btn,
body.room-manuscript .lets-talk-btn,
body.room-blog .lets-talk-btn {
  color: rgba(35,20,5,0.72);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  background: linear-gradient(to bottom,
  rgba(255,255,255,0.75) 0%,
  rgba(255,255,255,0.42) 40%,
  rgba(210,195,170,0.3) 70%,
  rgba(180,160,130,0.4) 100%
  );
  border-color: rgba(0,0,0,0.3);
  border-top-color: rgba(255,255,255,0.9);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.9),
  inset 0 -2px 0 rgba(0,0,0,0.14),
  0 2px 0 rgba(0,0,0,0.22),
  0 3px 6px rgba(0,0,0,0.2),
  0 0 0 1px rgba(0,0,0,0.1);
}

.mwf-btn,
.mwf-btn:hover,
.lets-talk-btn,
.lets-talk-btn:hover {
  color: #7de8ff !important;
  text-shadow: 0 0 8px rgba(100,220,255,0.9), 0 0 16px rgba(80,200,255,0.5), 0 1px 2px rgba(0,0,0,0.8) !important;
  -webkit-font-smoothing: antialiased;
}

.lets-talk-btn {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
}
button.mwf-btn[onclick*="PDF"],
button.mwf-btn[title*="PDF"],
button.mwf-btn[title*="Save"] {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
}
.mwf-seg-btn {
  color: rgba(125,232,255,0.45) !important;
  text-shadow: 0 0 6px rgba(100,220,255,0.4), 0 1px 2px rgba(0,0,0,0.8) !important;
}
.mwf-seg-btn.active {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important;
}
.send-btn {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}

.lets-talk-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 16px; border-radius: 17px;
  font-family: 'DM Mono', monospace; font-size: 9px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  background: linear-gradient(to bottom,
  rgba(255,255,255,0.18) 0%,
  rgba(255,255,255,0.07) 35%,
  rgba(0,0,0,0.05) 65%,
  rgba(0,0,0,0.18) 100%
  );
  border: 1px solid rgba(0,0,0,0.55);
  border-top-color: rgba(255,255,255,0.14);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.22),
  inset 0 -2px 0 rgba(0,0,0,0.4),
  0 2px 0 rgba(0,0,0,0.5),
  0 3px 7px rgba(0,0,0,0.45),
  0 0 0 1px rgba(0,0,0,0.18);
  transition: box-shadow 0.08s, transform 0.07s, filter 0.08s;
  user-select: none;
}
.lets-talk-btn::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: #32d264;
  box-shadow: 0 0 6px 2px rgba(50,210,100,0.7), 0 0 12px 3px rgba(50,210,100,0.35);
  flex-shrink: 0;
  animation: talk-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes talk-dot-pulse {
  0%, 100% { box-shadow: 0 0 5px 1px rgba(50,210,100,0.8), 0 0 10px 3px rgba(50,210,100,0.4); }
  50% { box-shadow: 0 0 9px 3px rgba(50,210,100,0.5), 0 0 18px 6px rgba(50,210,100,0.15); }
}
.lets-talk-btn:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.lets-talk-btn.active {
  opacity: 1; border-color: #ff4444; color: #ff4444;
  animation: mic-pulse 1s ease-in-out infinite;
}
.lets-talk-btn.active::before {
  background: #ff3333;
  animation: talk-dot-pulse-red 1.2s ease-in-out infinite;
}
@keyframes talk-dot-pulse-red {
  0%, 100% { box-shadow: 0 0 5px 1px rgba(255,50,50,0.9), 0 0 10px 3px rgba(255,50,50,0.45); }
  50% { box-shadow: 0 0 9px 3px rgba(255,50,50,0.6), 0 0 18px 6px rgba(255,50,50,0.2); }
}
body.room-checkin .lets-talk-btn, body.room-ideas .lets-talk-btn,
body.room-manuscript .lets-talk-btn {
  color: #5a3010; border-color: rgba(80,40,10,0.3);
}

.voice-status-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; margin-bottom: 4px;
  background: rgba(0,0,0,0.18); border-radius: 8px;
  font-family: var(--sans); font-size: 0.75rem;
  color: var(--room-text, #f0e8d8); opacity: 0.85;
}
.voice-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff4444; flex-shrink: 0;
  animation: mic-pulse 1s ease-in-out infinite;
}
.voice-status-dot.speaking { background: var(--room-accent, #C9A227); }
.voice-status-dot.thinking { background: #aaa; animation: none; opacity: 0.6; }
.voice-status-text { flex: 1; letter-spacing: 0.03em; }
.voice-stop-btn {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: var(--room-text, #f0e8d8); cursor: pointer;
  padding: 3px 10px; border-radius: 4px;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.05em;
  transition: background 0.15s;
}
.voice-stop-btn:hover { background: rgba(255,68,68,0.3); border-color: #ff4444; color: #ff4444; }

.mic-btn {
  background: none; border: 1px solid rgba(255,255,255,0.14);
  color: var(--room-text, #f0e8d8); cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.45; transition: opacity 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.mic-btn:hover { opacity: 0.85; background: rgba(255,255,255,0.06); }
.mic-btn.recording {
  opacity: 1; border-color: #ff4444; color: #ff4444;
  animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255,68,68,0); }
}
body.room-checkin .mic-btn, body.room-ideas .mic-btn, body.room-manuscript .mic-btn {
  color: #5a3010; border-color: rgba(80,40,10,0.2);
}

.msg-label-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.speak-btn {
  background: none; border: none; cursor: pointer;
  color: var(--room-accent, #C9A227); opacity: 0.6;
  padding: 2px 4px; border-radius: 3px;
  display: flex; align-items: center;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.speak-btn:hover { opacity: 1; }
.speak-btn.speaking {
  opacity: 1; color: var(--room-accent, #C9A227);
  animation: speaker-pulse 0.8s ease-in-out infinite;
}
@keyframes speaker-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
body.room-checkin .speak-btn, body.room-ideas .speak-btn, body.room-manuscript .speak-btn {
  color: var(--room-accent, #c04a08); opacity: 0.65;
}
body.room-checkin .speak-btn:hover, body.room-ideas .speak-btn:hover, body.room-manuscript .speak-btn:hover {
  opacity: 1;
}

.mwf-listen-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(196,134,42,0.15) 0%, rgba(180,120,60,0.1) 100%);
  border: 1px solid rgba(196,134,42,0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  animation: listenBarGlow 2.5s ease-in-out infinite;
}
@keyframes listenBarGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(196,134,42,0.1); }
  50% { box-shadow: 0 0 16px rgba(196,134,42,0.25); }
}
.mwf-listen-bar:hover {
  background: linear-gradient(135deg, rgba(196,134,42,0.22) 0%, rgba(180,120,60,0.16) 100%);
  border-color: rgba(196,134,42,0.5);
  box-shadow: 0 0 20px rgba(196,134,42,0.2);
}
.mwf-listen-bar svg { flex-shrink: 0; opacity: 0.9; color: var(--room-accent, #C9A227); }
.mwf-listen-bar-text {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--room-accent, #C9A227);
  letter-spacing: 0.03em;
}
.mwf-listen-bar.speaking {
  border-color: var(--room-accent, rgba(196,134,42,0.6));
  background: rgba(196,134,42,0.18);
  animation: none;
}
.mwf-listen-bar.speaking .mwf-listen-bar-text { color: var(--room-accent); }

body.room-manuscript .mwf-listen-bar {
  background: linear-gradient(135deg, rgba(192,74,8,0.08) 0%, rgba(58,24,8,0.05) 100%);
  border-color: rgba(192,74,8,0.25);
}
body.room-manuscript .mwf-listen-bar:hover {
  background: linear-gradient(135deg, rgba(192,74,8,0.14) 0%, rgba(58,24,8,0.09) 100%);
  border-color: rgba(192,74,8,0.35);
}
body.room-manuscript .mwf-listen-bar-text { color: #c04a08; font-weight: 600; }
body.room-manuscript .mwf-listen-bar.speaking .mwf-listen-bar-text { color: #c04a08; }

body.room-logline .send-btn { border-color: rgba(232,200,74,0.3); }
body.room-checkin .send-btn { border-color: rgba(200,149,106,0.3); }

@media (max-width: 700px) {
  #wrapper { padding: 0 12px 40px; }
  .cork-frame { width: 100%; box-sizing: border-box; }
  .module-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero-heading { font-size: clamp(2rem, 8vw, 3rem); }
  .home-hero { padding: 32px 0 24px; }
  .hero-eyebrow { font-size: 1.05rem; }
}
@media (max-width: 768px) {

  body.has-room {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  }
  body.has-room #app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  }

  body.has-room nav {
  flex-shrink: 0;
  flex-wrap: wrap;
  padding: 10px 14px 8px;
  }
  body.has-room .nav-tagline { display: none; }
  body.has-room .nav-room-info {
  width: 100%;
  flex: none;
  margin-left: 0;
  margin-top: 6px;
  gap: 8px;
  justify-content: flex-start;
  }
  body.has-room .nav-save-btn,
  body.has-room .nav-new-btn {
  font-size: 0;
  padding: 5px 11px;
  margin-left: 0;
  }
  body.has-room .nav-save-btn::before {
  content: attr(data-short);
  font-size: 0.6rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.09em;
  }
  body.has-room .nav-new-btn::before {
  content: attr(data-short);
  font-size: 0.6rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.08em;
  }
  body.has-room .nav-room-title { font-size: 0.55rem; }

  body.has-room #chat-screen.active {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  }

  body.has-room #chat-screen.active #messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-top: 24px;
  padding-bottom: 8px;
  }

  body.has-room #chat-screen.active .reply-zone-outer {
  flex-shrink: 0;
  padding: 8px 10px max(16px, env(safe-area-inset-bottom));
  }

  .reply-hint { display: none; }
  .reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 5px;
  padding-top: 6px;
  overflow: visible;
  }
  .reply-left {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  }
  .lets-talk-btn {
  flex-shrink: 0;
  padding: 5px 8px;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  }
  .send-btn {
  flex-shrink: 0;
  padding: 5px 10px;
  }
  #mwfVoiceF, #mwfVoiceM {
  padding: 4px 7px;
  font-size: 0.6rem;
  }

  nav { padding: 12px 16px; }
  #wrapper { padding: 0 12px 48px; }
  .cork-frame { width: 100%; box-sizing: border-box; }
  .module-grid { grid-template-columns: 1fr; gap: 14px; }

  body.has-room .feedback-fab {
  bottom: auto;
  top: 12px;
  right: 14px;
  padding: 5px 12px;
  font-size: 0.52rem;
  z-index: 999;
  }
}

@media (max-width: 600px) {

  .gate-content {
  width: 92vw;
  transform: none;
  max-height: 92vh;
  overflow-y: auto;
  }
  .gate-inner {
  padding: 24px 20px 20px;
  margin: 14px 10px 14px 28px;
  }
  .gate-title { font-size: 1.6rem; }
  .gate-tagline { font-size: 0.75rem; }
  .gate-field-wrap input { font-size: 0.85rem; }

  .mwf-page-canvas {
  left: 4%;
  top: 8%;
  width: 90%;
  }
  .mwf-fellow-text {
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  line-height: 1.75;
  }
  .mwf-fellow-text.returning {
  font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .mwf-name-written {
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  }
  .mwf-mic-btn { width: 44px; height: 44px; }
  .mwf-mic-status { font-size: 1rem; }

  body[class^="room-"], body[class*=" room-"] {
  background-attachment: scroll;

  background-size: auto 100vh;

  background-position: center 52%;
  }

  body[class^="room-"] #messages,
  body[class*=" room-"] #messages {
  max-width: 100%;
  padding: 100px 16px 8px;
  border-radius: 0;
  }
  body[class^="room-"] .reply-zone-outer,
  body[class*=" room-"] .reply-zone-outer {
  padding: 0 16px 32px;
  }

  .mwf-remote { display: none !important; }

  #toolbar-spacer { display: none !important; }
  .send-btn { margin-left: auto; padding: 5px 8px !important; font-size: 0.58rem !important; }
  .reply-actions {
  gap: 2px !important;
  padding-left: 0 !important;
  }

  body[class^="room-"] .reply-zone-outer,
  body[class*=" room-"] .reply-zone-outer {
  padding-left: 6px !important;
  padding-right: 6px !important;
  }

  .lets-talk-btn {
  padding: 4px 5px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  min-width: 0 !important;
  }

  button.mwf-btn[title*="Save"],
  button.mwf-btn[onclick*="PDF"] {
  display: none !important;
  }

  .mwf-vol-slider { width: 32px !important; min-width: 32px !important; }

  .mwf-btn-icon { padding: 4px 5px !important; }

  .reply-actions > div[style*="width:1px"] { display: none !important; }

  body[class^="room-"] #messages,
  body[class*=" room-"] #messages,
  body[class^="room-"] .reply-zone-outer,
  body[class*=" room-"] .reply-zone-outer {
  background: color-mix(in srgb, var(--room-panel) 62%, transparent) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  }
}

.site-footer {
  text-align: left;
  padding: 36px 24px 48px;
  border-top: 1px solid rgba(196,134,42,0.15);
  margin-top: 48px;
  position: relative;
  z-index: 3;
}
.site-footer p {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7a64;
  margin-bottom: 20px;
}
.site-footer nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  position: static;
  backdrop-filter: none;
}
@media (max-width: 600px) {
  .site-footer nav {
  grid-template-columns: 1fr;
  gap: 8px;
  }
  .site-footer nav a { min-width: 0; }
}

.site-footer nav a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  padding: 14px 18px 13px;
  border-radius: 6px;
  min-width: 155px;
  cursor: pointer;
  background:
  repeating-linear-gradient(
  92deg,
  transparent 0px,
  rgba(255,255,255,0.025) 1px,
  transparent 2px,
  transparent 4px
  ),
  linear-gradient(160deg, #2e2414 0%, #1a1208 50%, #261e0e 100%);
  box-shadow:
  0 0 0 1.5px #c4921e,
  0 0 0 3px #7a5208,
  0 0 0 4.5px #d4a830,
  inset 0 1px 0 rgba(255,230,130,0.12),
  0 3px 10px rgba(0,0,0,0.4),
  0 0 18px rgba(196,134,42,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.site-footer nav a:hover {
  transform: translateY(-2px);
  box-shadow:
  0 0 0 1.5px #e0b840,
  0 0 0 3px #a07818,
  0 0 0 4.5px #f0c848,
  inset 0 1px 0 rgba(255,240,160,0.18),
  0 7px 22px rgba(0,0,0,0.5),
  0 0 20px rgba(232,184,64,0.15);
}
.legal-card-label {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8b840;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 12px rgba(232,184,64,0.4);
}
.legal-card-desc {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: rgba(245,225,185,0.65);
  line-height: 1.35;
  font-style: italic;
}
.restore-session-area {
  margin-bottom: 28px;
}
.restore-card {
  background: linear-gradient(135deg, #fff8ee 0%, #f5e8cc 100%);
  border: 2px solid #C9A227;
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(100,60,0,0.10), 0 1px 4px rgba(100,60,0,0.08);
}
.restore-card-header {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px;
}
.restore-card-icon {
  font-size: 2rem; color: #C9A227; line-height: 1; flex-shrink: 0; margin-top: 2px;
}
.restore-card-title {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.12em; color: #2c1408; text-transform: uppercase; margin-bottom: 4px;
}
.restore-card-sub {
  font-family: var(--sans); font-size: 0.78rem; color: #6a4020; line-height: 1.4; opacity: 0.8;
}
.restore-toggle {
  width: 100%; background: #C9A227; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  color: #fff; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 6px;
  transition: background 0.15s, transform 0.1s;
}
.restore-toggle:hover { background: #a86c1a; transform: translateY(-1px); }
.restore-box {
  margin-top: 14px;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.restore-box textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(100,80,40,0.25);
  border-radius: 6px; padding: 10px 14px;
  font-family: var(--mono); font-size: 0.72rem; color: #2c1a08;
  resize: none; line-height: 1.5;
}
.restore-box textarea::placeholder { color: rgba(80,60,20,0.4); font-style: italic; }
.restore-submit {
  background: #2c1408; color: #f0d8a8; border: none; cursor: pointer;
  padding: 10px 20px; border-radius: 6px;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.15s;
}
.restore-submit:hover { background: #1a0c04; }
.restore-error { font-size: 0.72rem; color: #c04020; font-family: var(--sans); text-align: center; }
body[class^="room-"] .site-footer,
body[class*=" room-"] .site-footer { display: none; }

.fellowship-fork-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,6,2,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0; transition: opacity 0.4s;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 40px 0;
}
.fellowship-fork-overlay.visible { opacity: 1; }
.fellowship-fork-overlay.active { display: flex; }
.fork-container {
  max-width: 560px; width: 90%; text-align: center;
  padding: 0 20px;
}
.fork-header {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 2.2rem; color: #f0d8a0;
  margin-bottom: 8px; font-weight: 400;
}
.fork-sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.88rem; color: rgba(240,216,160,0.45);
  margin-bottom: 40px; line-height: 1.6;
}
.fork-cards { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.fork-card {
  flex: 1; min-width: 220px; max-width: 260px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(196,148,60,0.2);
  border-radius: 12px; padding: 28px 24px;
  cursor: pointer; transition: all 0.3s;
  text-align: left;
}
.fork-card:hover {
  background: rgba(196,148,60,0.08);
  border-color: rgba(196,148,60,0.5);
  box-shadow: 0 0 24px rgba(196,148,60,0.12);
  transform: translateY(-2px);
}
.fork-card-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.4rem; color: #f0d8a0;
  margin-bottom: 6px;
}
.fork-card-sessions {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem; color: rgba(196,148,60,0.6);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 12px;
}
.fork-card-desc {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem; color: rgba(240,216,160,0.55);
  line-height: 1.55;
}
.fork-back {
  background: none; border: none; color: rgba(240,216,160,0.3);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.75rem;
  cursor: pointer; margin-top: 32px; padding: 8px 16px;
  transition: color 0.2s;
}
.fork-back:hover { color: rgba(240,216,160,0.6); }
.fork-card-locked-label {
  display: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.7rem; color: rgba(196,148,60,0.5);
  letter-spacing: 0.04em; margin-top: 14px;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .fork-card.fork-card-locked {
  opacity: 0.4; pointer-events: none;
  }
  .fork-card.fork-card-locked .fork-card-locked-label { display: block; }
}

.graduation-overlay {
  position: fixed; inset: 0; z-index: 10001;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,6,2,0.92);
  backdrop-filter: blur(24px);
  opacity: 0; transition: opacity 0.5s;
}
.graduation-overlay.visible { opacity: 1; }
.graduation-overlay.active { display: flex; }
.grad-container { max-width: 480px; width: 90%; text-align: center; }
.grad-icon { font-size: 3rem; margin-bottom: 16px; }
.grad-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 2rem; color: #f0d8a0;
  margin-bottom: 10px;
}
.grad-sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.88rem; color: rgba(240,216,160,0.5);
  line-height: 1.6; margin-bottom: 28px;
}
.grad-cert-btn {
  padding: 12px 28px;
  background: linear-gradient(135deg, #c4943c, #a07020);
  color: #fff; border: none; border-radius: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(160,100,20,0.3);
  margin-right: 12px;
}
.grad-cert-btn:hover { background: linear-gradient(135deg, #d4a44c, #b08030); transform: translateY(-1px); }
.grad-close-btn {
  padding: 12px 28px;
  background: rgba(255,255,255,0.06);
  color: rgba(240,216,160,0.6);
  border: 1px solid rgba(196,148,60,0.2);
  border-radius: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.grad-close-btn:hover { background: rgba(255,255,255,0.1); color: rgba(240,216,160,0.8); }

.fm-colloquium-btn {
  display: inline-block;
  padding: 6px 14px;
  background: none;
  border: 1px solid rgba(196,148,60,0.2);
  border-radius: 5px;
  color: rgba(160,110,30,0.55);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 6px;
}
.fm-colloquium-btn:hover {
  border-color: rgba(196,148,60,0.45);
  color: rgba(160,110,30,0.85);
  background: rgba(196,148,60,0.06);
}
.fm-session.locked .fm-colloquium-btn { display: none; }

.colloquium-indicator {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196,148,60,0.5);
  border: 1px solid rgba(196,148,60,0.15);
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

.fellowship-graduated-badge {
  position: absolute; top: 8px; right: -4px;
  background: linear-gradient(135deg, #c4943c, #8a6020);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 0.46rem; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  z-index: 2;
}

body.fellowship-map-active nav { display: none !important; }
body.fellowship-map-active .site-footer { display: none; }

.save-modal { max-width: 480px; }
.save-code-box {
  width: 100%; box-sizing: border-box;
  background: #f0e8d4; border: 1px solid rgba(100,70,20,0.2);
  border-radius: 6px; padding: 12px 14px;
  font-family: var(--mono); font-size: 0.68rem; color: #3a2408;
  resize: none; line-height: 1.6; word-break: break-all;
  margin-bottom: 14px;
}
.save-actions { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.save-copy-btn {
  flex: 1; background: #C9A227; color: #fff; border: none; cursor: pointer;
  padding: 10px 16px; border-radius: 6px;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  transition: background 0.15s;
}
.save-copy-btn:hover { background: #a86c1a; }
.save-copy-btn.copied { background: #4a8a4a; }
.save-download-btn {
  background: #f0e8d4; color: #5a3e20;
  border: 1px solid rgba(100,70,20,0.25);
}
.save-download-btn:hover { background: #e4d8c0; }
.save-hint {
  font-family: var(--sans); font-size: 0.72rem;
  color: #8a6a40; opacity: 0.7; margin: 0; line-height: 1.5; text-align: center;
}

.feedback-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  cursor: pointer; border: none;
  padding: 9px 18px; border-radius: 5px;
  font-family: var(--mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #d4922a;

  background:
  repeating-linear-gradient(
  92deg,
  transparent 0px,
  rgba(255,255,255,0.025) 1px,
  transparent 2px,
  transparent 4px
  ),
  linear-gradient(160deg, #2e2414 0%, #1a1208 50%, #261e0e 100%);
  box-shadow:
  0 0 0 1.5px #c4921e,
  0 0 0 3px #7a5208,
  0 0 0 4.5px #d4a830,
  inset 0 1px 0 rgba(255,230,130,0.12),
  0 4px 16px rgba(0,0,0,0.5),
  0 0 14px rgba(196,134,42,0.1);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 10px rgba(196,134,42,0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s;
}
.feedback-fab:hover {
  transform: translateY(-1px);
  color: #f0c060;
  box-shadow:
  0 0 0 1.5px #d4a030,
  0 0 0 2.5px #8a6510,
  0 0 0 4px #e0b040,
  0 6px 20px rgba(0,0,0,0.5),
  0 0 16px rgba(196,134,42,0.2),
  inset 0 1px 0 rgba(255,255,255,0.08);
}

.mwf-stop-voice-fab {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #c03020 0%, #8a1a10 100%);
  border: 1px solid rgba(255,100,80,0.4);
  border-radius: 100px;
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(192,48,32,0.4), 0 0 12px rgba(192,48,32,0.2);
  animation: stopVoicePulse 1.5s ease-in-out infinite;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mwf-stop-voice-fab:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 28px rgba(192,48,32,0.5), 0 0 20px rgba(192,48,32,0.3);
}
.mwf-stop-voice-fab:active {
  transform: translateX(-50%) translateY(0);
}
.mwf-stop-voice-fab svg {
  flex-shrink: 0;
}
@keyframes stopVoicePulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(192,48,32,0.4), 0 0 12px rgba(192,48,32,0.2); }
  50% { box-shadow: 0 4px 20px rgba(192,48,32,0.6), 0 0 20px rgba(192,48,32,0.35); }
}

/* Move Stop Voice below Spark text content */
body.spark-active .mwf-stop-voice-fab {
  bottom: 24px;
}
body.spark-active #spark-overlay {
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  body.spark-active .mwf-stop-voice-fab {
    bottom: 20px;
    padding: 10px 18px;
    font-size: 0.65rem;
  }
  body.spark-active #spark-overlay {
    padding-bottom: 72px;
  }
}

.feedback-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,12,4,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.feedback-modal {
  background: #fdf6e8; border-radius: 12px;
  padding: 36px 32px 32px; max-width: 420px; width: 90vw;
  position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.22);
}
.feedback-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #8a6a40; opacity: 0.5;
  transition: opacity 0.15s;
}
.feedback-close:hover { opacity: 1; }
.feedback-title {
  font-family: var(--serif, Georgia, serif); font-size: 1.4rem;
  color: #1a0e04; margin: 0 0 8px; font-weight: 600;
}
.feedback-sub {
  font-family: var(--sans); font-size: 0.82rem;
  color: #5a3e20; opacity: 0.7; margin: 0 0 24px; line-height: 1.5;
}
.feedback-options { display: flex; flex-direction: column; gap: 12px; }
.feedback-type-row { display: flex; gap: 10px; margin-bottom: 4px; }
.feedback-type-btn {
  flex: 1; padding: 9px 6px; border-radius: 8px; border: 1.5px solid rgba(100,70,20,0.18);
  background: #fff8ee; font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  color: #5a3e20; cursor: pointer; transition: all 0.15s; letter-spacing: 0.03em;
}
.feedback-type-btn.active { background: #C9A227; color: #fff; border-color: #C9A227; }
.feedback-type-btn:hover:not(.active) { background: #f0e4cc; }
.feedback-textarea {
  width: 100%; min-height: 110px; padding: 12px 14px;
  border-radius: 8px; border: 1.5px solid rgba(100,70,20,0.18);
  background: #fff; font-family: var(--sans); font-size: 0.85rem; color: #1a0e04;
  resize: vertical; box-sizing: border-box; line-height: 1.5;
  transition: border-color 0.15s;
}
.feedback-textarea:focus { outline: none; border-color: #C9A227; }
.feedback-textarea::placeholder { color: #b8976a; opacity: 0.7; }
.feedback-submit {
  width: 100%; padding: 12px; margin-top: 4px;
  background: #C9A227; color: #fff; border: none; border-radius: 8px;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.05em; cursor: pointer; transition: background 0.15s;
}
.feedback-submit:hover { background: #a86c1a; }
.feedback-submit:disabled { opacity: 0.5; cursor: default; }
.feedback-sent { text-align: center; padding: 16px 0 8px; color: #2a6e3a; font-family: var(--sans); font-size: 0.88rem; }
.feedback-option-icon { font-size: 1.6rem; flex-shrink: 0; }
.feedback-option-label {
  font-family: var(--sans); font-size: 0.88rem;
  font-weight: 600; color: #1a0e04; line-height: 1.4;
}
.feedback-option-label small {
  display: block; font-weight: 400; font-size: 0.75rem;
  color: #6a4e28; opacity: 0.75; margin-top: 2px;
}

#mwf-flip-overlay {
  position: fixed; inset: 0; z-index: 8000;
  pointer-events: none;
  display: none;
  overflow: hidden;
}
#mwf-flip-overlay.active { display: block; }

.mwf-flip-page-front {
  position: absolute;
  top: 0; bottom: 0;
  width: 110%;
  left: -110%;
  pointer-events: none;
  background:

  linear-gradient(105deg,
  rgba(255,255,255,0)    0%,
  rgba(255,255,255,0.18) 38%,
  rgba(255,255,255,0.08) 50%,
  rgba(255,255,255,0)    62%
  ),
  radial-gradient(ellipse 80% 70% at 25% 40%, rgba(255,248,220,0.85) 0%, transparent 60%),
  linear-gradient(160deg, #ede0c4 0%, #d8c89a 55%, #cfc08a 100%);

  box-shadow: 4px 0 18px rgba(0,0,0,0.28), -4px 0 12px rgba(0,0,0,0.1);
}

@keyframes mwfPageSweep {
  0%   { left: -110%; }
  35%  { left: 0%; }
  65%  { left: 0%; }
  100% { left: 110%; }
}
@keyframes gateShake  { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
@keyframes gateFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

#gateScreen {
  position: fixed; inset: 0; z-index: 9999;

  background:
  radial-gradient(ellipse at 40% 60%, rgba(180,140,80,0.08) 0%, transparent 60%),
  radial-gradient(ellipse at 70% 30%, rgba(160,120,60,0.06) 0%, transparent 50%),
  linear-gradient(160deg, #e8dcc8 0%, #d9c9a8 40%, #c8b48a 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease;
}
#gateScreen.unlocked { opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1); }

.gate-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  width: min(420px, 88vw);
  text-align: center;

  background: linear-gradient(170deg, #2c1a08 0%, #1e1005 100%);
  border-radius: 4px 12px 12px 4px;
  box-shadow:

  -6px 0 0 #0e0703,
  -10px 4px 8px rgba(0,0,0,0.5),

  inset 1px 0 0 rgba(255,255,255,0.04),
  inset 0 1px 0 rgba(255,255,255,0.06),

  4px 8px 24px rgba(0,0,0,0.35),
  12px 20px 48px rgba(0,0,0,0.25),
  0 2px 4px rgba(0,0,0,0.3);

  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  padding: 0;
  opacity: 0; animation: gateFadeIn 0.7s ease 0.1s both;
}

.gate-content::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(180deg, #3d2510 0%, #1a0b04 50%, #2a1509 100%);
  border-radius: 4px 0 0 4px;
  box-shadow: inset -2px 0 6px rgba(0,0,0,0.4), inset 1px 0 0 rgba(255,255,255,0.04);
}

.gate-content::after {
  content: '';
  position: absolute;
  inset: 12px 12px 12px 36px;
  border: 1px solid rgba(196,134,42,0.4);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(196,134,42,0.15);
  pointer-events: none;
}

.gate-inner {
  position: relative;
  margin: 20px 16px 20px 36px;
  background: linear-gradient(170deg, #fdf8f0 0%, #f8f2e6 100%);
  border-radius: 2px 8px 8px 2px;
  padding: 36px 32px 28px;
  box-shadow:
  inset 0 0 20px rgba(180,140,80,0.06),
  2px 0 4px rgba(0,0,0,0.12),
  1px 1px 0 rgba(180,140,80,0.2);

  background-image:
  linear-gradient(170deg, #fdf8f0 0%, #f8f2e6 100%),
  repeating-linear-gradient(
  180deg,
  transparent,
  transparent 27px,
  rgba(180,140,80,0.12) 27px,
  rgba(180,140,80,0.12) 28px
  );
  background-blend-mode: multiply;
}
.gate-logo {
  margin-bottom: 18px; opacity: 0;
  animation: gateFadeIn 0.6s ease 0.25s both;
}
.gate-logo svg { display: block; margin: 0 auto; }
.gate-inner {
  width: 100%; display: flex; flex-direction: column; align-items: center;
}
.gate-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 0.72rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(60,40,20,0.52); font-weight: 600; margin-bottom: 8px;
  opacity: 0; animation: gateFadeIn 0.5s ease 0.45s both;
}
.gate-title {
  font-family: 'Instrument Serif', serif; font-size: 2.64rem;
  color: #2e2008;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(100,60,0,0.08);
  line-height: 1.12; margin-bottom: 10px;
  opacity: 0; animation: gateFadeIn 0.6s ease 0.55s both;
}
.gate-title span { color: #b8741e; }
.gate-tagline {
  font-family: 'DM Sans', sans-serif; font-size: 0.95rem;
  font-weight: 500; color: rgba(50,32,8,0.62); margin-bottom: 10px;
  opacity: 0; animation: gateFadeIn 0.5s ease 0.68s both;
}
.gate-invite {
  display: inline-block;
  font-family: 'DM Mono', monospace; font-size: 0.7rem;
  font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: #b8741e; background: rgba(196,134,42,0.1);
  border: 1px solid rgba(196,134,42,0.28); border-radius: 40px;
  padding: 4px 14px; margin-bottom: 26px; white-space: nowrap;
  opacity: 0; animation: gateFadeIn 0.5s ease 0.78s both;
}
.gate-rule {
  width: 40px; height: 1px; background: rgba(196,134,42,0.25);
  margin-bottom: 24px;
  opacity: 0; animation: gateFadeIn 0.5s ease 0.82s both;
}
.gate-field-wrap {
  width: 100%; position: relative; margin-bottom: 10px;
  opacity: 0; animation: gateFadeIn 0.5s ease 0.85s both;
}
.gate-field-wrap::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(196,134,42,0.2); border-bottom:1px solid rgba(196,134,42,0.35);
  pointer-events: none; transition: border-color 0.2s;
}
.gate-field-wrap:focus-within::before {
  border-color: rgba(196,134,42,0.45);
  box-shadow: 0 1px 0 #8a5c18, inset 0 1px 6px rgba(0,0,0,0.3);
}
#gateInput {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,134,42,0.18);
  border-bottom: 1px solid rgba(196,134,42,0.35);
  outline: none; padding: 14px 18px;
  font-family: 'DM Mono', monospace; font-size: 0.88rem;
  font-weight: 300; color: rgba(245,234,208,0.95);
  letter-spacing: 0.1em; text-align: center;
  caret-color: #C9A227; -webkit-appearance: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#gateInput:focus {
  background: rgba(255,255,255,0.07);
  border-color: rgba(196,134,42,0.4);
  border-bottom-color: #C9A227;
  box-shadow: 0 1px 0 #8a5c18, inset 0 1px 8px rgba(0,0,0,0.35), 0 0 20px rgba(196,134,42,0.06);
}
#gateInput::placeholder {
  color: #C9A227; font-size: 0.78rem;
  font-weight: 300; text-align: center; letter-spacing: 0.06em;
  animation: placeholderPulse 2.8s ease-in-out infinite;
}
@keyframes placeholderPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
#gateBtn {
  width: 100%; padding: 13px;
  font-family: 'DM Mono', monospace; font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #1a0f06;
  background: linear-gradient(165deg, #e8b84b 0%, #C9A227 50%, #8a5818 100%);
  border: none; border-top: 1px solid rgba(255,230,140,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,240,160,0.2), 0 2px 8px rgba(0,0,0,0.4), 0 0 16px rgba(196,134,42,0.12);
  transition: filter 0.15s, transform 0.1s;
  opacity: 0; animation: gateFadeIn 0.5s ease 0.95s both;
  margin-bottom: 10px;
}
#gateBtn::after { content:''; position:absolute; inset:0; background:linear-gradient(165deg,rgba(255,255,255,0.08) 0%,transparent 55%); pointer-events:none; }
#gateBtn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
#gateBtn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.96); }
#gateBtn:disabled { opacity: 0.5; cursor: default; }
.gate-error {
  font-family: 'DM Mono', monospace; font-size: 0.65rem;
  font-weight: 400; letter-spacing: 0.06em;
  color: rgba(200,100,80,0.9); opacity: 0; transition: opacity 0.25s;
  min-height: 18px; margin-bottom: 2px;
}
.gate-error.visible { opacity: 1; }
.gate-hint {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.82rem;
  color: rgba(245,234,208,0.55); letter-spacing: 0.03em; line-height: 1.5; margin-top: 6px;
  opacity: 0; animation: gateFadeIn 0.5s ease 1.1s both;
}
.gate-hint a { color: rgba(196,134,42,0.7); text-decoration: none; border-bottom: 1px solid rgba(196,134,42,0.2); padding-bottom: 1px; transition: color 0.2s; }
.gate-hint a:hover { color: #C9A227; }
#gateInput.shake { animation: gateShake 0.4s ease; }

#gateScreen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px; perspective-origin: 50% 50%;
  background:
  radial-gradient(ellipse 80% 60% at 52% 46%, rgba(60,32,8,0.5) 0%, transparent 70%),
  radial-gradient(ellipse 120% 100% at 50% 50%, transparent 35%, rgba(0,0,0,0.7) 100%),
  linear-gradient(155deg, #0e0905 0%, #080604 50%, #0c0806 100%);
}
.cover {
  position: relative; z-index: 1;
  width: min(400px, 88vw);
  background:
  radial-gradient(ellipse 80% 60% at 30% 25%, rgba(70,40,12,0.6) 0%, transparent 60%),
  radial-gradient(ellipse 60% 80% at 75% 80%, rgba(10,5,2,0.4) 0%, transparent 55%),
  linear-gradient(160deg, #2e1c0a 0%, #1a0f06 55%, #160d05 100%);
  box-shadow: -4px 6px 0 #080503, 0 2px 0 rgba(0,0,0,0.9), 0 6px 20px rgba(0,0,0,0.7),
  0 20px 60px rgba(0,0,0,0.55), 0 0 120px rgba(196,134,42,0.05), -6px 0 12px rgba(0,0,0,0.5);
  transform-origin: left center;
  animation: coverEntrance 1.0s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes coverEntrance {
  from { opacity:0; transform:translateY(20px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes pageTurn {
  0%   { transform:rotateY(0deg); }
  30%  { transform:rotateY(-30deg) scale(0.98); }
  55%  { transform:rotateY(-90deg) scale(0.96); }
  80%  { transform:rotateY(-140deg) scale(0.98); }
  100% { transform:rotateY(-180deg); }
}
.cover {
  backface-visibility: hidden;
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background-color: #cdb898;
  background-image:
  radial-gradient(ellipse 70% 70% at 50% 50%, rgba(225,200,160,0.55) 0%, transparent 100%),
  radial-gradient(ellipse 30% 20% at 15% 20%, rgba(100,70,20,0.12) 0%, transparent 100%),
  radial-gradient(ellipse 25% 30% at 80% 15%, rgba(80,55,15,0.1) 0%, transparent 100%),
  radial-gradient(ellipse 20% 15% at 60% 80%, rgba(90,60,18,0.1) 0%, transparent 100%),
  linear-gradient(to left, transparent 60%, rgba(80,50,15,0.2) 100%),
  linear-gradient(to bottom, rgba(140,110,70,0.12) 0%, transparent 25%, transparent 75%, rgba(140,110,70,0.18) 100%);
  backface-visibility: hidden;
  transform: rotateY(180deg);
  z-index: 20;
}

#mwfBookSpread {
  position: fixed; inset: 0; z-index: 9990;
  display: none;
  background: radial-gradient(ellipse at 60% 40%, #e8d5a8 0%, #d4b87a 35%, #c4a055 65%, #a07830 100%);
  opacity: 0;
  transform: scaleX(0.95);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
#mwfBookSpread.open { display: block; opacity: 1; transform: scaleX(1); pointer-events: auto; }

.mwf-quill-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  pointer-events: none;
}

.mwf-left-page {
  position: absolute;

  left: 1.5%; top: 2%; width: 46%; height: 96%;
  z-index: 5;
  background-image: url('leftpage.png');
  background-size: cover;
  background-position: center center;

  filter: saturate(0.82) sepia(0.18) brightness(0.88) contrast(0.95);

  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.6s ease 0.6s;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}
.mwf-left-page.show { opacity: 0.92; }

.mwf-page-canvas {
  position: absolute; z-index: 10;
  left: 57%; top: 8%; width: 38%;
  display: flex; flex-direction: column; align-items: flex-start;
  transform: none;
  pointer-events: none;
}

.mwf-name-row,
.mwf-name-row * {
  pointer-events: auto !important;
}

.mwf-fellow-text {
  font-family: 'Cormorant Garamond','Instrument Serif',serif; font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700;
  color: #0d0602;
  line-height: 1.85; letter-spacing: 0.01em;
  margin-bottom: 1.6em;
  opacity: 0; transition: opacity 1.2s ease;
  pointer-events: none;
  text-shadow:

  0 -1px 0 rgba(255,245,210,0.5),

  0 1px 1px rgba(0,0,0,0.55),

  1px 2px 4px rgba(30,10,0,0.45),

  2px 4px 8px rgba(20,5,0,0.3),

  0 0 12px rgba(80,40,10,0.15);
}
.mwf-fellow-text.show { opacity: 1; }

.mwf-fellow-text.returning {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  line-height: 1.6;
  font-weight: 700;
}

.mwf-name-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  opacity: 0; transition: opacity 0.8s ease; pointer-events: auto;
  width: 100%;
}
.mwf-name-row.show { opacity: 1; }

.mwf-name-label {
  font-family: 'Cormorant Garamond','Instrument Serif',serif;
  font-size: clamp(0.8rem, 1.37vw, 0.97rem);
  font-variant: small-caps; letter-spacing: 0.18em; font-weight: 700;
  color: #1a0a04; opacity: 0.85;
  margin-bottom: 0.3em; padding-left: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.mwf-name-writeline {
  display: none;
}
.mwf-name-written {
  font-family: 'Caveat', 'Cormorant Garamond', cursive;
  font-size: clamp(1.48rem, 3.19vw, 2.17rem); font-weight: 600;
  color: #1a0e04; letter-spacing: 0.02em;
  min-width: 40px; min-height: 1.6em;
  line-height: 1.2;
}
.mwf-name-cursor {
  display: inline-block; width: 2px; height: 1.4em;
  background: #3a2010; margin-left: 1px; margin-bottom: 2px;
  animation: mwfBlink 1s step-end infinite; opacity: 0;
  vertical-align: bottom;
}
.mwf-name-cursor.active { opacity: 1; }
@keyframes mwfBlink { 0%,100%{opacity:1} 50%{opacity:0} }

.mwf-mic-row {
  display: flex; align-items: center; gap: 16px; margin-top: 4px;
}
.mwf-mic-btn {
  position: relative; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(26,14,4,0.07); border: 1.5px solid rgba(26,14,4,0.28);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.mwf-mic-btn:hover { background: rgba(26,14,4,0.14); border-color: rgba(26,14,4,0.5); }
.mwf-mic-btn.listening {
  background: rgba(140,40,20,0.1); border-color: rgba(140,40,20,0.45);
  animation: mwfMicPulse 1.4s ease-in-out infinite;
}
@keyframes mwfMicPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(140,40,20,0.18); }
  50%      { box-shadow: 0 0 0 12px rgba(140,40,20,0); }
}
.mwf-mic-btn svg { width: 22px; height: 22px; fill: #3a2010; opacity: 0.65; transition: opacity 0.2s; }
.mwf-mic-btn.listening svg { fill: #8c2814; opacity: 1; }
.mwf-mic-status {
  font-family: 'Cormorant Garamond','Instrument Serif',serif; font-style: italic;
  font-size: clamp(1.08rem, 2.05vw, 1.31rem); color: #3a2010; opacity: 0.75;
  transition: opacity 0.3s; line-height: 1.3;
}
.mwf-mic-status.dim { opacity: 0.35; }

.mwf-type-toggle { display: none; }
.mwf-type-area {
  display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 16px;
}
.mwf-name-input {
  background: none; border: none; outline: none;
  border-bottom: 1.5px solid rgba(26,14,4,0.35);
  font-family: 'Caveat', cursive; font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  color: #1a0e04; padding: 0 4px 4px; width: 100%;
  transition: border-color 0.2s;
}
.mwf-name-input::placeholder { color: rgba(26,14,4,0.2); }
.mwf-name-input:focus { border-bottom-color: rgba(26,14,4,0.6); }
.mwf-name-submit {
  align-self: flex-start;
  font-family: 'Cormorant Garamond','Instrument Serif',serif;
  font-size: clamp(0.85rem, 1.5vw, 1rem); font-variant: small-caps;
  letter-spacing: 0.12em; color: #3a2010; opacity: 0.6;
  background: none; border: none; border-bottom: 1px solid rgba(26,14,4,0.25);
  cursor: pointer; padding: 0; transition: opacity 0.2s;
}
.mwf-name-submit:hover { opacity: 1; }

.mwf-name-hint {
  font-family: 'DM Mono', monospace; font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(26,14,4,0.28);
  margin-top: 10px; opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.mwf-name-hint.show { opacity: 1; }

#mwfRipOverlay {
  position: fixed; inset: 0; z-index: 9995; pointer-events: none; overflow: hidden;
}
#mwfRipPage {
  display: none; position: absolute; inset: 0;
  background-color: #d4b882;
  background-image:
  radial-gradient(ellipse 70% 70% at 50% 50%, rgba(240,215,168,0.5) 0%, transparent 100%),
  linear-gradient(to bottom, rgba(180,140,80,0.12) 0%, transparent 25%);
}
#mwfRipPage.ripping {
  animation: mwfRipAway 0.65s cubic-bezier(0.4, 0, 0.8, 0.2) forwards;
}
@keyframes mwfRipAway {
  0%   { transform: translateY(0) rotate(0deg);
  clip-path: polygon(0% 0%,100% 0%,100% 100%,94% 97%,87% 100%,80% 96%,73% 100%,66% 97%,59% 100%,52% 96%,45% 100%,38% 97%,31% 100%,24% 96%,17% 100%,10% 97%,3% 100%,0% 98%);
  opacity: 1; }
  100% { transform: translateY(-108%) rotate(-2deg);
  clip-path: polygon(0% 0%,100% 0%,100% 100%,94% 97%,87% 100%,80% 96%,73% 100%,66% 97%,59% 100%,52% 96%,45% 100%,38% 97%,31% 100%,24% 96%,17% 100%,10% 97%,3% 100%,0% 98%);
  opacity: 0.3; }
}
.cover.turning {
  animation: pageTurn 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
  pointer-events: none;
  transform-style: preserve-3d;
}
.cover-spine-shadow {
  position:absolute; top:0; bottom:0; left:-8px; width:16px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,0.6));
  pointer-events:none; opacity:0; z-index:10; transition:opacity 0.15s;
}
.cover.turning .cover-spine-shadow { opacity:1; }
.cover-border {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:2; overflow:visible;
}
.cover-inner {
  position:relative; z-index:3;
  padding:48px 40px 36px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.gate-logo { margin-bottom:20px; animation:gFadeUp 0.7s ease 0.3s both; }
.gate-eyebrow {
  font-family:'DM Mono',monospace; font-weight:300; font-size:0.58rem;
  letter-spacing:0.24em; text-transform:uppercase;
  color:rgba(245,234,208,0.62); margin-bottom:10px;
  animation:gFadeUp 0.6s ease 0.4s both;
}
.gate-title {
  font-family:'Cormorant Garamond','Instrument Serif',serif; font-weight:400;
  font-size:2.2rem; line-height:1.0; letter-spacing:0.02em;
  color:rgba(245,234,208,0.96);
  text-shadow:0 1px 12px rgba(196,134,42,0.25);
  margin-bottom:8px; animation:gFadeUp 0.6s ease 0.45s both;
}
.gate-title span { color:#e8b84b; text-shadow:0 0 20px rgba(232,184,75,0.35); }
.gate-tagline {
  font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic;
  font-size:0.88rem; letter-spacing:0.06em; color:rgba(245,234,208,0.88);
  margin-bottom:14px; animation:gFadeUp 0.6s ease 0.5s both;
}
.gate-badge-row { display:flex; justify-content:center; margin-bottom:20px; animation:gFadeUp 0.6s ease 0.52s both; }
.gate-badge {
  font-family:'DM Mono',monospace; font-weight:300; font-size:0.58rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:#C9A227; border:1px solid rgba(196,134,42,0.35);
  padding:4px 14px; background:rgba(196,134,42,0.06); white-space:nowrap;
}
.gate-ornament { display:flex; align-items:center; gap:10px; width:100%; margin-bottom:18px; animation:gFadeUp 0.6s ease 0.54s both; }
.gate-orn-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(196,134,42,0.3)); }
.gate-orn-line:last-child { background:linear-gradient(90deg,rgba(196,134,42,0.3),transparent); }
.gate-orn-mark { font-family:'Cormorant Garamond',serif; font-size:0.85rem; color:rgba(196,134,42,0.75); line-height:1; }
.gate-input-wrap { width:100%; margin-bottom:8px; animation:gFadeUp 0.6s ease 0.57s both; }
.gate-code-input {
  width:100%; font-family:'DM Mono',monospace; font-weight:300; font-size:0.82rem;
  letter-spacing:0.1em; text-align:center; color:rgba(245,234,208,0.95);
  background:rgba(255,255,255,0.04); border:1px solid rgba(196,134,42,0.2);
  border-bottom:1px solid rgba(196,134,42,0.4); padding:12px 16px;
  outline:none; caret-color:#C9A227; -webkit-appearance:none;
  transition:background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.gate-code-input:focus {
  background:rgba(255,255,255,0.06); border-color:rgba(196,134,42,0.45);
  border-bottom-color:#C9A227; box-shadow:0 1px 0 #8a5c18, inset 0 1px 6px rgba(0,0,0,0.3);
}
.gate-code-input::placeholder { color:#C9A227; font-size:0.75rem; letter-spacing:0.06em; animation:placeholderPulse 2.8s ease-in-out infinite; }
.gate-error-line {
  font-family:'DM Mono',monospace; font-size:0.62rem; letter-spacing:0.08em;
  color:rgba(200,100,80,0.9); text-align:center; min-height:18px;
  margin-bottom:6px; opacity:0; transition:opacity 0.2s; animation:gFadeUp 0.6s ease 0.59s both;
}
.gate-error-line.visible { opacity:1; }
.gate-enter-btn {
  width:100%; font-family:'DM Mono',monospace; font-weight:500;
  font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase;
  color:#1a0f06;
  background:linear-gradient(165deg,#e8b84b 0%,#C9A227 50%,#8a5818 100%);
  border:none; border-top:1px solid rgba(255,230,140,0.3);
  border-bottom:1px solid rgba(0,0,0,0.25);
  padding:13px; cursor:pointer; display:block; margin-bottom:18px;
  position:relative; overflow:hidden; animation:gFadeUp 0.6s ease 0.61s both;
  box-shadow:inset 0 1px 0 rgba(255,240,160,0.2), 0 2px 8px rgba(0,0,0,0.4), 0 0 16px rgba(196,134,42,0.12);
  transition:filter 0.15s, transform 0.1s;
}
.gate-enter-btn::after { content:''; position:absolute; inset:0; background:linear-gradient(165deg,rgba(255,255,255,0.08) 0%,transparent 55%); pointer-events:none; }
.gate-enter-btn:hover { filter:brightness(1.1); }
.gate-enter-btn:active { transform:translateY(1px); filter:brightness(0.96); }
.gate-hint {
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.82rem;
  color:rgba(245,234,208,0.62); letter-spacing:0.03em; animation:gFadeUp 0.6s ease 0.66s both;
}
.gate-hint a { color:rgba(196,134,42,0.78); text-decoration:none; border-bottom:1px solid rgba(196,134,42,0.25); padding-bottom:1px; transition:color 0.2s; }
.gate-hint a:hover { color:#C9A227; }
.gate-req-input {
  flex:1; font-family:'DM Mono',monospace; font-size:0.72rem; letter-spacing:0.04em;
  color:rgba(245,234,208,0.9); background:rgba(255,255,255,0.04);
  border:1px solid rgba(196,134,42,0.18); border-bottom:1px solid rgba(196,134,42,0.35);
  padding:9px 10px; outline:none; caret-color:#C9A227; transition:border-color 0.2s;
}
.gate-req-input::placeholder { color:rgba(196,134,42,0.3); font-size:0.68rem; }
.gate-req-input:focus { border-color:rgba(196,134,42,0.45); }
.gate-req-submit {
  font-family:'DM Mono',monospace; font-size:0.65rem; letter-spacing:0.14em;
  text-transform:uppercase; color:#C9A227; background:transparent;
  border:1px solid rgba(196,134,42,0.3); padding:9px 14px; cursor:pointer; white-space:nowrap; transition:background 0.15s;
}
.gate-req-submit:hover { background:rgba(196,134,42,0.08); }
@keyframes gFadeUp { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

#gate-bloom {
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 48% 46%, rgba(180,110,20,0.55) 0%, rgba(120,65,8,0.35) 35%, rgba(40,20,4,0.15) 65%, transparent 100%);
  opacity:0; display:none;
}
#gate-bloom.blooming { display:block; animation:bloomReveal 1.1s cubic-bezier(0.2,0,0.4,1) forwards; }
@keyframes bloomReveal { 0%{opacity:0;filter:blur(8px);} 20%{opacity:0.9;filter:blur(4px);} 55%{opacity:0.6;filter:blur(2px);} 100%{opacity:0;filter:blur(0);} }
#app.gate-pending { opacity:0; }
#app.revealing { animation:appCrossfade 1.0s cubic-bezier(0.3,0,0.4,1) 0.15s forwards; }
@keyframes appCrossfade { 0%{opacity:0;filter:brightness(1.4) saturate(0.6);} 40%{opacity:0.5;filter:brightness(1.2) saturate(0.8);} 100%{opacity:1;filter:brightness(1) saturate(1);} }

.mwf-remote {
  position: fixed;
  right: 28px; bottom: 80px;
  z-index: 9000;
  width: 72px;
  border-radius: 36px;

  background: linear-gradient(175deg, #2e2e2e 0%, #1a1a1a 40%, #111 100%);
  box-shadow:

  inset 0 1px 0 rgba(255,255,255,0.12),
  inset 1px 0 0 rgba(255,255,255,0.06),

  0 8px 32px rgba(0,0,0,0.65),
  0 24px 64px rgba(0,0,0,0.4),

  3px 0 8px rgba(0,0,0,0.3);
  padding: 0 0 16px;
  cursor: default;
  user-select: none;

  background-image:
  repeating-linear-gradient(
  180deg,
  transparent,
  transparent 3px,
  rgba(0,0,0,0.04) 3px,
  rgba(0,0,0,0.04) 4px
  ),
  linear-gradient(175deg, #2e2e2e 0%, #1a1a1a 40%, #111 100%);
  transition: box-shadow 0.2s;
}
.mwf-remote:hover {
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.14),
  inset 1px 0 0 rgba(255,255,255,0.07),
  0 12px 40px rgba(0,0,0,0.7),
  0 28px 72px rgba(0,0,0,0.45),
  3px 0 10px rgba(0,0,0,0.35);
}

.mwf-remote-brand {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 10px;
  cursor: grab;
  border-radius: 36px 36px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
}
.mwf-remote-brand:active { cursor: grabbing; }
.mwf-remote-brand-text {
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase; margin-bottom: 6px;
}
.mwf-remote-drag-dots {
  display: flex; gap: 3px;
}
.mwf-remote-drag-dots span {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
}

.mwf-remote-section {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0;
  gap: 5px;
}
.mwf-remote-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.38rem; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.22); text-transform: uppercase;
  margin-bottom: 2px;
}
.mwf-remote-divider {
  width: 40px; height: 1px; margin: 2px auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.mwf-remote-vol-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.42rem; color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
}

.mwf-rbtn {
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  font-family: 'DM Mono', monospace;
  transition: all 0.12s ease;
  position: relative;
}

.mwf-rbtn::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  pointer-events: none;
}
.mwf-rbtn:active { transform: translateY(1px); }
.mwf-rbtn:active::after { box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06); }

.mwf-rbtn-power {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #6b1010, #3a0808);
  color: rgba(255,100,80,0.9);
  box-shadow: 0 2px 8px rgba(180,20,20,0.4), 0 1px 2px rgba(0,0,0,0.5);
}
.mwf-rbtn-power svg { width: 16px; height: 16px; }
.mwf-rbtn-power:hover { background: radial-gradient(circle at 40% 35%, #8b2020, #4a1010); color: #ff8070; }

.mwf-remote-pair { display: flex; gap: 6px; }
.mwf-rbtn-fellow {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(170deg, #2a2a2a, #1a1a1a);
  color: rgba(255,255,255,0.35);
  font-size: 0.62rem; letter-spacing: 0.05em; font-weight: 700;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.mwf-rbtn-fellow.active {
  background: linear-gradient(170deg, #b8741e, #7a4a0a);
  color: rgba(255,220,140,0.95);
  box-shadow: 0 2px 8px rgba(180,100,20,0.5);
}
.mwf-rbtn-fellow:hover:not(.active) { color: rgba(255,255,255,0.6); }

.mwf-rbtn-voice {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(170deg, #252525, #141414);
  color: rgba(255,255,255,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.mwf-rbtn-voice svg { width: 16px; height: 16px; }
.mwf-rbtn-voice.muted { color: rgba(255,80,60,0.8); }
.mwf-rbtn-voice:hover { color: rgba(255,255,255,0.85); }

.mwf-rbtn-vol {
  width: 44px; height: 22px; border-radius: 11px;
  background: linear-gradient(180deg, #282828, #181818);
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem; line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.mwf-rbtn-vol:hover { color: rgba(255,255,255,0.85); background: linear-gradient(180deg, #303030, #202020); }

.mwf-rbtn-settings {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(170deg, #222, #141414);
  color: rgba(255,255,255,0.3);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.mwf-rbtn-settings svg { width: 15px; height: 15px; }
.mwf-rbtn-settings:hover { color: rgba(255,255,255,0.65); }

.mwf-remote-nub {
  width: 20px; height: 8px; border-radius: 4px; margin: 4px auto 0;
  background: linear-gradient(180deg, #222, #151515);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06);
}

body.has-room .mwf-remote { display: block; }

@media (max-width: 768px) {
  body .mwf-remote,
  body.has-room .mwf-remote { display: none !important; }
}

/* ============================== */
/* MBF DARK SCREENING ROOM OVERRIDES */
/* ============================== */

body {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
}

nav {
  background: rgba(13,13,13,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.logo-wordmark {
  color: #FFFFFF !important;
}
.logo-wordmark em {
  color: #C9A227 !important;
}

.nav-spark-btn { display: none !important; }

.home-hero {
  background: #0D0D0D !important;
}
.hero-heading {
  color: #FFFFFF !important;
}
.hero-heading em {
  color: #C9A227 !important;
  -webkit-text-stroke: 0 !important;
}
.hero-heading .hero-dark {
  color: rgba(255,255,255,0.85) !important;
}
.hero-sub {
  color: rgba(255,255,255,0.5) !important;
}
.hero-divider-line {
  background: rgba(201,162,39,0.3) !important;
}
.hero-divider-ornament {
  color: rgba(201,162,39,0.5) !important;
}

/* Module cards - dark corridor doors */
.module-card {
  background: rgba(26,26,26,0.9) !important;
  border: 1px solid rgba(201,162,39,0.2) !important;
  border-radius: 8px !important;
  transform: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,162,39,0.1) !important;
}
.module-card:hover {
  border-color: rgba(233,69,96,0.5) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(233,69,96,0.15) !important;
  transform: translateY(-2px) !important;
}
/* Remove pushpins and pin shadows */
.module-card::before,
.module-card::after {
  display: none !important;
}
/* Remove per-card tilts */
.module-card:nth-child(1),
.module-card:nth-child(2),
.module-card:nth-child(3),
.module-card:nth-child(4) {
  --card-tilt: 0deg !important;
}

.module-name {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.module-desc {
  color: rgba(255,255,255,0.55) !important;
}
.module-illus {
  color: #C9A227 !important;
}

/* Board hanger - hide in dark mode */
.board-hanger-wrap { display: none !important; }

/* Cork frame and board - transparent dark */
.cork-frame {
  background: transparent !important;
  box-shadow: none !important;
}
.cork-board {
  background: transparent !important;
}

/* Footer */
.site-footer {
  background: #0D0D0D !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.site-footer p,
.site-footer a,
.site-footer .legal-card-label,
.site-footer .legal-card-desc {
  color: rgba(255,255,255,0.4) !important;
}
.site-footer a:hover .legal-card-label {
  color: #C9A227 !important;
}

/* Restore session area */
.restore-toggle {
  color: rgba(255,255,255,0.25) !important;
}
.restore-box textarea {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Gate screen */
#gateScreen {
  background: #0D0D0D !important;
}
#gateScreen h1, #gateScreen h2 {
  color: #C9A227 !important;
}
#gateScreen p, #gateScreen label {
  color: rgba(255,255,255,0.7) !important;
}
#gateScreen input[type="password"],
#gateScreen input[type="text"] {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(201,162,39,0.3) !important;
  color: #FFFFFF !important;
}
#gateScreen button {
  background: rgba(201,162,39,0.15) !important;
  border-color: rgba(201,162,39,0.4) !important;
  color: #C9A227 !important;
}

/* Chat room */
.room-header {
  background: rgba(13,13,13,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
#room-title {
  color: #FFFFFF !important;
}
#room-sub {
  color: rgba(255,255,255,0.45) !important;
}

#messages {
  background: rgba(13,13,13,0.98) !important;
}
#messages .msg-body {
  color: rgba(255,255,255,0.88) !important;
}
.msg.user .msg-body {
  color: rgba(201,162,39,0.9) !important;
}

.reply-zone-outer {
  background: rgba(13,13,13,0.95) !important;
  border-top: 1px solid rgba(201,162,39,0.3) !important;
}
.reply-zone-outer textarea {
  background: transparent !important;
  color: rgba(255,255,255,0.9) !important;
}
.reply-zone-outer textarea::placeholder {
  color: rgba(255,255,255,0.3) !important;
}

/* Export all area */
#export-all-area button {
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.5) !important;
}

/* Voice panel */
.home-voice-panel {
  background: rgba(20,20,20,0.95) !important;
  border-color: rgba(201,162,39,0.2) !important;
}

/* Fellow panel hero */
.fellow-panel {
  background: #0D0D0D !important;
}

/* Login screen */
#loginScreen {
  background: #0D0D0D !important;
}

/* Spark overlay - hidden */
.spark-btn-wrap { display: none !important; }
.spark-mobile-wrap { display: none !important; }

/* Experience overlay */
.mwf-experience-overlay {
  background: rgba(0,0,0,0.85) !important;
}

/* Settings panel */
#mwfSettingsPanel {
  background: rgba(20,20,20,0.95) !important;
  border-color: rgba(201,162,39,0.2) !important;
}

/* Voice status bar */
.voice-status-bar {
  background: rgba(13,13,13,0.95) !important;
}

/* Nav back button */
.nav-back-btn,
#nav-back-btn {
  color: rgba(255,255,255,0.6) !important;
}

/* Memory toggle */
.nav-memory-toggle {
  color: rgba(255,255,255,0.5) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.nav-memory-toggle.memory-on .mem-indicator {
  background: #C9A227 !important;
}

/* Style picker */
.mwf-style-picker {
  background: rgba(20,20,20,0.95) !important;
  border-color: rgba(201,162,39,0.2) !important;
}

/* Remote control */
#mwfRemote {
  background: rgba(20,20,20,0.95) !important;
  border-color: rgba(201,162,39,0.3) !important;
}

/* Mobile responsive - 2x2 grid stays at 1 column on small screens */
@media (max-width: 600px) {
  .module-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Flip overlay */
#mwf-flip-overlay #mwf-flip-front {
  background: #0D0D0D !important;
}

/* PDF export styles */
.pdf-header-bar {
  background: #1a1a1a !important;
  color: #C9A227 !important;
}


/* MBF GATE SCREEN DARK OVERRIDES */
#gateScreen {
  background: #0D0D0D !important;
}
.gate-card {
  background: rgba(20,20,20,0.95) !important;
  border: 1px solid rgba(201,162,39,0.3) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
}
.gate-card::before,
.gate-card::after {
  display: none !important;
}
.gate-frame {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.gate-frame::before,
.gate-frame::after,
.gate-inner::before,
.gate-inner::after {
  display: none !important;
}
.gate-inner {
  background: rgba(20,20,20,0.95) !important;
  border: 1px solid rgba(201,162,39,0.2) !important;
  box-shadow: none !important;
}
.gate-logo svg {
  opacity: 0.5 !important;
}
.gate-badge {
  color: rgba(201,162,39,0.6) !important;
  border-color: rgba(201,162,39,0.3) !important;
  background: transparent !important;
}
.gate-title {
  color: #FFFFFF !important;
}
.gate-title span {
  color: #C9A227 !important;
}
.gate-tagline {
  color: rgba(255,255,255,0.5) !important;
}
.gate-corner,
.gate-corner-tl,
.gate-corner-tr,
.gate-corner-bl,
.gate-corner-br {
  display: none !important;
}
.gate-input {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(201,162,39,0.2) !important;
  color: #FFFFFF !important;
}
.gate-input::placeholder {
  color: rgba(255,255,255,0.3) !important;
}
.gate-submit {
  background: rgba(201,162,39,0.15) !important;
  border-color: rgba(201,162,39,0.4) !important;
  color: #C9A227 !important;
}
.gate-footer {
  color: rgba(255,255,255,0.3) !important;
}
.gate-divider {
  border-color: rgba(201,162,39,0.2) !important;
}
.gate-divider-ornament {
  color: rgba(201,162,39,0.4) !important;
}

/* Handshake screen dark */
.hs-card,
.handshake-card {
  background: rgba(20,20,20,0.95) !important;
  border: 1px solid rgba(201,162,39,0.2) !important;
}
.hs-logo-text {
  color: #FFFFFF !important;
}
.hs-logo-text span {
  color: rgba(255,255,255,0.45) !important;
}
.hs-greeting {
  color: #C9A227 !important;
}
.hs-sub {
  color: rgba(255,255,255,0.6) !important;
}
.hs-label {
  color: rgba(255,255,255,0.5) !important;
}
#mwfHandshakeName {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(201,162,39,0.2) !important;
  color: #FFFFFF !important;
}


/* MBF STUDIO GATE - FULL VIEWPORT OVERRIDES */
#gateScreen {
  background: #0a0a14 !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  perspective: none !important;
}
#gateScreen .cover {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  perspective: none !important;
  animation: none !important;
  backface-visibility: visible !important;
  transform-style: flat !important;
}
/* Kill the old book-cover back-page pseudo-element */
#gateScreen .cover::after {
  display: none !important;
  content: none !important;
}
#gateScreen .cover-inner {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#gateScreen .cover-spine-shadow { display: none !important; }
#gateScreen .cover-border { display: none !important; }
#gateScreen .gate-code-input:focus {
  border-color: rgba(201,162,39,0.45) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 16px rgba(201,162,39,0.08) !important;
}
#gateScreen .gate-code-input::placeholder {
  color: rgba(255,255,255,0.25) !important;
}
#gateScreen .gate-enter-btn:hover {
  background: rgba(201,162,39,0.12) !important;
  border-color: rgba(201,162,39,0.6) !important;
  box-shadow: 0 0 24px rgba(201,162,39,0.12), 0 4px 16px rgba(0,0,0,0.3) !important;
}


/* ═══ MBF PIPELINE LAYOUT ═══ */
.mbf-pipeline {
  width: min(560px, 92vw);
  margin: 0 auto 40px;
  padding: 0 8px;
}
.pipeline-phase {
  margin-bottom: 8px;
}
.phase-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(201,162,39,0.5);
  margin-bottom: 4px;
  padding-left: 4px;
}
.phase-num {
  color: rgba(201,162,39,0.25);
  margin-right: 8px;
  font-size: 11px;
}
.phase-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  font-style: italic;
  margin-bottom: 12px;
  padding-left: 4px;
}
.phase-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phase-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.phase-checkpoint {
  margin-top: 10px;
  position: relative;
}
.checkpoint-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(201,162,39,0.35);
  border: 1px solid rgba(201,162,39,0.15);
  border-radius: 3px;
  padding: 2px 8px;
  pointer-events: none;
}
.pipeline-connector {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

/* Green Room — always open bar */
.pipeline-greenroom {
  margin-top: 20px;
  border: 1px solid rgba(201,162,39,0.15);
  border-radius: 10px;
  background: rgba(201,162,39,0.03);
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.pipeline-greenroom::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.25) 30%, rgba(201,162,39,0.25) 70%, transparent);
}
.pipeline-greenroom:hover {
  border-color: rgba(201,162,39,0.35);
  background: rgba(201,162,39,0.06);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 30px rgba(201,162,39,0.05);
}
.greenroom-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(201,162,39,0.4);
  margin-bottom: 6px;
}
.greenroom-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}
.greenroom-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
  max-width: 420px;
}
.greenroom-enter {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(201,162,39,0.4);
  transition: color 0.3s;
}
.pipeline-greenroom:hover .greenroom-enter {
  color: rgba(201,162,39,0.7);
}

/* Pipeline module cards — override old grid card styles */
.mbf-pipeline .module-card {
  border: 1px solid rgba(201,162,39,0.15) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  background: rgba(20,20,20,0.8) !important;
  border-radius: 8px !important;
  padding: 16px 18px !important;
  transform: none !important;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.mbf-pipeline .module-card:hover {
  border-color: rgba(233,69,96,0.4) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 16px rgba(233,69,96,0.08) !important;
  transform: translateY(-1px) !important;
}
.mbf-pipeline .module-card::before,
.mbf-pipeline .module-card::after { display: none !important; }
.mbf-pipeline .module-illus {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
.mbf-pipeline .module-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 3px;
}
.mbf-pipeline .module-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  line-height: 1.45;
}

/* Discovery phase — single full-width card */
.pipeline-phase:first-child .module-card {
  border-color: rgba(233,69,96,0.2) !important;
}
.pipeline-phase:first-child .module-card:hover {
  border-color: rgba(233,69,96,0.5) !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .phase-cards-row {
    grid-template-columns: 1fr;
  }
  .greenroom-enter {
    position: static;
    transform: none;
    margin-top: 12px;
    display: inline-block;
  }
  .mbf-pipeline {
    padding: 0 4px;
  }
}