:root {
      --bg: #f2eee5;
      --bg2: #e7dfd2;
      --panel: rgba(255, 250, 243, 0.92);
      --panel-strong: #fff8ef;
      --ink: #202833;
      --muted: #5c6670;
      --line: #d7c8b6;
      --accent: #0f766e;
      --accent2: #7c3aed;
      --accent3: #b45309;
      --danger: #b42318;
      --success: #14633d;
      --shadow: 0 20px 42px rgba(22, 27, 34, 0.12);
      --radius: 20px;
      --radius-sm: 14px;
      /* semantic tokens (theme-aware) */
      --surface: #fffdf8;
      --surface-2: #f6efe3;
      --surface-3: rgba(255, 255, 255, 0.82);
      --field-bg: rgba(255, 255, 255, 0.92);
      --field-ink: var(--ink);
      --border: rgba(215, 200, 182, 0.92);
      --border-soft: rgba(215, 200, 182, 0.78);
      --heading-ink: #2b3640;
      --subtle-ink: #3c4750;
      --chip-bg: #eef1ed;
      --chip-ink: #31404a;
      --accent-ink: #ffffff;
      --nav-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(246, 239, 229, 0.96));
      --shadow-sm: 0 10px 18px rgba(22, 27, 34, 0.10);
      color-scheme: light;
    }

    [data-theme="dark"] {
      --bg: #131722;
      --bg2: #0d1117;
      --panel: rgba(28, 34, 48, 0.86);
      --panel-strong: #1b2230;
      --ink: #e6ebf2;
      --muted: #93a0b4;
      --line: #2c3547;
      --accent: #2dd4bf;
      --accent2: #a78bfa;
      --accent3: #fbbf24;
      --danger: #f87171;
      --success: #34d399;
      --shadow: 0 20px 42px rgba(0, 0, 0, 0.45);
      --surface: #1b2230;
      --surface-2: #161c28;
      --surface-3: rgba(40, 48, 66, 0.72);
      --field-bg: #11161f;
      --field-ink: #e6ebf2;
      --border: #2c3547;
      --border-soft: #232c3d;
      --heading-ink: #eef2f8;
      --subtle-ink: #c2cddb;
      --chip-bg: #232c3d;
      --chip-ink: #cdd6e4;
      --accent-ink: #08130f;
      --nav-bg: linear-gradient(180deg, rgba(28, 34, 48, 0.6), rgba(17, 22, 31, 0.96));
      --shadow-sm: 0 10px 18px rgba(0, 0, 0, 0.35);
      color-scheme: dark;
    }

    * { box-sizing: border-box; }
    html, body { min-height: 100%; }
    body {
      margin: 0;
      color: var(--ink);
      font-family: Georgia, "Times New Roman", serif;
      background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.08), transparent 24%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
      transition: background 0.2s ease, color 0.2s ease;
    }

    button, input, textarea, select { font: inherit; }
    button {
      border: 0;
      border-radius: 999px;
      padding: 0.78rem 1rem;
      cursor: pointer;
      transition: transform 0.14s ease, opacity 0.14s ease, background-color 0.14s ease;
    }
    button:hover { transform: translateY(-1px); }
    button:active { transform: translateY(0); }
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: 3px solid rgba(15, 118, 110, 0.22);
      outline-offset: 2px;
    }

/* Chronicle Loom teal palette for the live mobile editor surface only. */
@media (max-width: 760px) {
  body.mobile-legacy-open > .shell,
  html:not([data-theme="dark"]) body.mobile-legacy-open > .shell {
    background: linear-gradient(180deg, #082f31 0, #0b3435 18rem, #071f22 42rem) !important;
    color: #f5ecdd !important;
  }
  body.mobile-legacy-open #mobile-workspace-panel .card,
  body.mobile-legacy-open #mobile-workspace-panel .panel,
  body.mobile-legacy-open #mobile-workspace-panel .workspace-section,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .card,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .panel,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .workspace-section {
    background: #0d2b2e !important;
    border-color: #245357 !important;
    color: #f5ecdd !important;
    box-shadow: none !important;
  }
  body.mobile-legacy-open #mobile-workspace-panel input,
  body.mobile-legacy-open #mobile-workspace-panel textarea,
  body.mobile-legacy-open #mobile-workspace-panel select,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel input,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel textarea,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel select {
    background: #071f22 !important;
    border-color: #245357 !important;
    color: #f5ecdd !important;
    caret-color: #48d2c1 !important;
  }
  body.mobile-legacy-open #mobile-workspace-panel input:focus,
  body.mobile-legacy-open #mobile-workspace-panel textarea:focus,
  body.mobile-legacy-open #mobile-workspace-panel select:focus {
    border-color: #48d2c1 !important;
    box-shadow: 0 0 0 3px rgba(72,210,193,.14) !important;
  }
  body.mobile-legacy-open #mobile-redesign-feature-nav {
    border-color: #245357 !important;
    background: rgba(7,31,34,.97) !important;
  }
  body.mobile-legacy-open #mobile-redesign-feature-nav button.active {
    background: #48d2c1 !important;
    color: #071f22 !important;
    box-shadow: none !important;
  }
}

    .skip-link {
      position: fixed;
      left: 1rem;
      top: -4rem;
      z-index: 1000;
      padding: 0.7rem 1rem;
      border-radius: 999px;
      background: var(--ink);
      color: var(--panel-strong);
      text-decoration: none;
    }
    .skip-link:focus { top: 1rem; }
    @media (forced-colors: active) {
      button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
        outline: 2px solid ButtonText;
      }
    }

    input, textarea, select {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 0.82rem 0.92rem;
      background: var(--field-bg);
      color: var(--field-ink);
    }
    textarea {
      resize: vertical;
      line-height: 1.65;
      min-height: 130px;
    }
    select { background-color: var(--field-bg); }
    select option { background: var(--surface); color: var(--field-ink); }

    .shell {
      max-width: 1540px;
      margin: 0 auto;
      padding: 16px;
      display: grid;
      gap: 14px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      padding: 24px;
      color: #f8f2e9;
      background:
        linear-gradient(135deg, rgba(21, 29, 37, 0.96), rgba(16, 91, 86, 0.88)),
        linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(124, 58, 237, 0.52));
      box-shadow: var(--shadow);
      isolation: isolate;
    }
    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
      opacity: 0.35;
    }
    .hero::before {
      width: 260px;
      height: 260px;
      top: -110px;
      right: -90px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 70%);
    }
    .hero::after {
      width: 190px;
      height: 190px;
      bottom: -70px;
      left: -60px;
      background: radial-gradient(circle, rgba(243, 207, 154, 0.25), transparent 70%);
    }
    .hero-top {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
    }
    .brand { max-width: 840px; display: grid; gap: 8px; }
    .site-title-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .site-logo {
      display: block;
      width: auto;
      height: 90px;
      flex: 0 0 auto;
      object-fit: contain;
      border-radius: 8px;
    }
    .eyebrow {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: 0.8rem;
      color: rgba(248, 242, 233, 0.72);
      font-family: "Segoe UI", Arial, sans-serif;
    }
    .hero h1 {
      margin: 0;
      font-size: clamp(2rem, 5vw, 3.9rem);
      line-height: 0.98;
      letter-spacing: -0.05em;
      font-weight: 700;
    }
    .hero p {
      margin: 0;
      max-width: 66ch;
      font-family: "Segoe UI", Arial, sans-serif;
      line-height: 1.65;
      color: rgba(248, 242, 233, 0.86);
    }
    .hero-actions {
      display: grid;
      gap: 10px;
      justify-items: end;
    }
    .hero-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    .btn-primary { background: var(--accent3); color: #2a1e0c; font-weight: 700; }
    .btn-secondary { background: var(--surface-3); color: var(--ink); border: 1px solid var(--border); }
    .btn-soft { background: var(--surface-2); color: var(--subtle-ink); }
    .btn-danger { background: var(--danger); color: #fff; }
    .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border-soft); }
    .btn-primary.active,
    .btn-secondary.active,
    .btn-soft.active,
    .btn-ghost.active,
    .mobile-draft-btn.active {
      background: var(--accent);
      color: var(--accent-ink);
      border-color: color-mix(in srgb, var(--accent) 55%, transparent);
      box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 25%, transparent);
    }
    .btn-icon { padding: 0.5rem 0.72rem; font-size: 1rem; line-height: 1; }
    .btn-small { padding: 0.6rem 0.9rem; font-size: 0.92rem; }
    .btn-tiny { padding: 0.35rem 0.6rem; font-size: 0.84rem; }
    button:active { transform: translateY(1px); filter: brightness(0.98); }
    button[disabled], .btn-busy {
      opacity: 0.72;
      cursor: wait;
    }

    .toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) auto auto auto auto;
      gap: 10px;
      align-items: center;
      padding: 14px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--panel);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }
    .toolbar input { min-width: 0; }

    .workspace-guide {
      display: none;
    }

    .mobile-topbar,
    .mobile-shell-nav {
      display: none;
    }
    .mobile-topbar {
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 4px 4px 0;
    }
    .mobile-topbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .mobile-profile-orb {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      flex-shrink: 0;
      background: radial-gradient(circle at 35% 30%, var(--accent3), #d9a83a 58%, #7c5822 100%);
      box-shadow: 0 10px 24px rgba(20, 24, 33, 0.2);
    }
    .mobile-topbar-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    .mobile-topbar-eyebrow {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font: 700 0.62rem "Segoe UI", Arial, sans-serif;
      color: var(--muted);
    }
    .mobile-topbar-title {
      font: 700 1rem Georgia, "Times New Roman", serif;
      color: var(--heading-ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-topbar-menu {
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--ink);
      font-size: 1.15rem;
      line-height: 1;
      box-shadow: var(--shadow-sm);
    }
    .mobile-shell-nav {
      position: fixed;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      width: calc(100% - 24px);
      max-width: 430px;
      padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
      border-radius: 20px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--nav-bg) 92%, transparent);
      backdrop-filter: blur(16px);
      box-shadow: 0 18px 40px rgba(8, 12, 20, 0.32);
      z-index: 35;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
    }
    .mobile-shell-btn {
      display: grid;
      justify-items: center;
      gap: 4px;
      padding: 8px 4px;
      border-radius: 14px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      font: 700 0.68rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.02em;
    }
    .mobile-shell-btn .ico {
      font-size: 1rem;
      line-height: 1;
    }
    .mobile-shell-btn.active {
      background: color-mix(in srgb, var(--accent3) 18%, var(--surface-2));
      border-color: color-mix(in srgb, var(--accent) 28%, transparent);
      color: var(--heading-ink);
    }

    .mobile-more-menu {
      position: absolute;
      right: 8px;
      bottom: calc(100% + 8px);
      width: min(250px, calc(100vw - 32px));
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: var(--shadow);
      z-index: 40;
    }
    .mobile-more-menu[hidden] { display: none; }
    .mobile-more-menu button {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 11px 12px;
      border-radius: 11px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      font: 600 0.84rem "Segoe UI", Arial, sans-serif;
    }
    .mobile-more-menu button:hover,
    .mobile-more-menu button:focus-visible { background: var(--surface-2); }
    .mobile-more-menu .menu-icon { width: 22px; text-align: center; color: var(--accent3); }

    /* ---- grouped sidebar ---- */
    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 10px 8px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--nav-bg);
      box-shadow: var(--shadow-sm);
      max-height: calc(100vh - 220px);
      position: sticky;
      top: 14px;
      overflow-y: auto;
    }
    .sidebar-group-label {
      font: 700 0.72rem "Segoe UI", Arial, sans-serif;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      padding: 8px 8px 2px;
    }
    .sidebar-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      border: 0;
      border-radius: var(--radius-sm);
      padding: 0.52rem 0.72rem;
      font: 600 0.86rem "Segoe UI", Arial, sans-serif;
      background: transparent;
      color: var(--subtle-ink);
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      text-align: left;
    }
    .sidebar-btn:hover { background: var(--surface-3); }
    .sidebar-btn.active {
      background: var(--accent);
      color: var(--accent-ink);
    }
    #project-search.active {
      border-color: color-mix(in srgb, var(--accent) 55%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
      background: var(--surface);
    }
    .sidebar-btn .sb-icon { width: 18px; text-align: center; font-size: 0.95rem; flex-shrink: 0; }
    .fray-banner {
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      z-index: 80;
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 214, 153, 0.45);
      background: rgba(36, 19, 10, 0.92);
      color: #fff6e8;
      box-shadow: 0 20px 45px rgba(17, 11, 7, 0.35);
      pointer-events: none;
    }
    .fray-banner[hidden] { display: none !important; }
    body.fray-active .sidebar,
    body.fray-active .tabs,
    body.fray-active .workspace-guide,
    body.fray-active .hero-actions,
    body.fray-active .toolbar,
    body.fray-active .panel:not(.workspace) {
      pointer-events: none;
      opacity: 0.48;
      filter: saturate(0.7);
    }
    body.fray-active .fray-locked {
      pointer-events: none;
      opacity: 0.42;
      filter: grayscale(0.18);
    }
    .fray-target {
      transition: opacity 0.55s ease, filter 0.55s ease, box-shadow 0.55s ease;
    }
    body.fray-active .fray-target {
      box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.35);
    }
    body.fray-idle .fray-target {
      opacity: var(--fray-opacity, 0.9);
      filter: blur(var(--fray-blur, 0px));
    }
    body.fray-idle .workspace {
      filter: saturate(var(--fray-saturate, 0.96));
    }
    body.fray-active .fray-session-card {
      border-color: rgba(180, 83, 9, 0.5);
      box-shadow: 0 18px 35px rgba(92, 35, 0, 0.22);
    }
    .fray-shell {
      min-height: 680px;
      border-radius: 28px;
      border: 1px solid rgba(96, 147, 142, 0.26);
      background:
        linear-gradient(180deg, rgba(18, 56, 59, 0.98) 0%, rgba(20, 59, 61, 0.98) 68%, rgba(235, 227, 214, 0.92) 100%);
      color: #f2e8d9;
      overflow: hidden;
      position: relative;
      box-shadow: 0 30px 70px rgba(8, 20, 22, 0.28);
    }
    .fray-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at bottom center, rgba(255, 245, 225, 0.24), transparent 42%);
      pointer-events: none;
    }
    .fray-view {
      position: relative;
      z-index: 1;
      padding: 28px 28px 32px;
    }
    .fray-shell[data-phase="writing"] .fray-view,
    .fray-shell[data-phase="failed"] .fray-view,
    .fray-shell[data-phase="success"] .fray-view {
      min-height: 680px;
    }
    .fray-view[hidden] { display: none !important; }
    .fray-topline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      min-width: 0;
      margin-bottom: 36px;
      color: rgba(242, 232, 217, 0.68);
      font: 600 0.8rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.32em;
      text-transform: uppercase;
    }
    .fray-topline > span {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .fray-topline > span:last-child { text-align: right; }
    .fray-brand {
      font: 600 0.86rem Georgia, "Times New Roman", serif;
      letter-spacing: 0.22em;
      color: rgba(242, 232, 217, 0.58);
      text-transform: uppercase;
    }
    .fray-kicker {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      color: rgba(242, 232, 217, 0.45);
      font: 600 0.78rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      margin-bottom: 22px;
    }
    .fray-kicker::before,
    .fray-kicker::after {
      content: "";
      width: 74px;
      max-width: 16vw;
      border-top: 1px solid rgba(212, 156, 92, 0.42);
    }
    .fray-display-title {
      margin: 0;
      text-align: center;
      font: 700 clamp(2.8rem, 10vw, 6.6rem) Georgia, "Times New Roman", serif;
      letter-spacing: 0.04em;
      max-width: 100%;
      overflow-wrap: break-word;
      word-break: normal;
      text-wrap: balance;
      color: #f5ead8;
    }
    #braided-setup-view .fray-display-title {
      font-size: clamp(2.5rem, 8vw, 5.4rem);
    }
    #fray-setup-view.braided-mode .fray-display-title {
      color: #f0a15b;
      text-shadow: 0 10px 28px rgba(215, 116, 42, 0.18);
    }
    #fray-setup-view.braided-mode .fray-kicker {
      color: rgba(240, 161, 91, 0.72);
    }
    #fray-setup-view.duet-mode .fray-display-title {
      color: #82d8cc;
      text-shadow: 0 10px 28px rgba(96, 190, 175, 0.16);
    }
    #fray-setup-view.duet-mode .fray-kicker {
      color: rgba(130, 216, 204, 0.72);
    }
    .fray-display-subtitle {
      margin: 8px 0 0;
      text-align: center;
      color: rgba(238, 227, 211, 0.78);
      font: italic 500 1.3rem Georgia, "Times New Roman", serif;
    }
    .fray-config {
      width: min(720px, 100%);
      margin: 46px auto 0;
      display: grid;
      gap: 26px;
    }
    .fray-config-block {
      display: grid;
      gap: 12px;
    }
    .fray-label {
      color: rgba(242, 232, 217, 0.62);
      font: 700 0.82rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      text-align: center;
    }
    .fray-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    .fray-pill {
      border: 1px solid rgba(223, 206, 183, 0.18);
      border-radius: 999px;
      padding: 0.9rem 1.1rem;
      min-width: 92px;
      background: rgba(232, 220, 199, 0.18);
      color: #f2e9da;
      font: 700 1rem "Segoe UI", Arial, sans-serif;
      cursor: pointer;
      transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
    }
    .fray-pill:hover,
    .fray-pill:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(228, 127, 42, 0.65);
      outline: none;
    }
    .fray-pill.active {
      background: #d7742a;
      border-color: #d7742a;
      color: #fff4e6;
      box-shadow: 0 12px 28px rgba(215, 116, 42, 0.26);
    }
    .fray-custom-row,
    .fray-start-row,
    .fray-summary-row,
    .fray-library-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: center;
    }
    .fray-start-row { justify-content: space-between; }
    .fray-input,
    .fray-editor,
    .fray-select {
      border-radius: 18px;
      border: 1px solid rgba(220, 203, 181, 0.18);
      background: rgba(17, 38, 42, 0.7);
      color: #f7edde;
      padding: 0.95rem 1rem;
      font: 500 1rem "Segoe UI", Arial, sans-serif;
    }
    .fray-input::placeholder,
    .fray-editor::placeholder { color: rgba(237, 227, 212, 0.45); }
    .fray-input,
    .fray-select { min-width: 180px; }
    .fray-config .field span,
    .fray-writing-metrics .metric .k,
    .fray-library-card time { color: rgba(242, 232, 217, 0.66); }
    .fray-warning {
      margin: 12px auto 0;
      width: min(650px, 100%);
      border-left: 3px solid #d7742a;
      border-radius: 18px;
      background: rgba(73, 62, 51, 0.68);
      padding: 18px 20px;
      color: rgba(244, 232, 216, 0.82);
      line-height: 1.7;
    }
    .fray-warning strong { color: #ff9a4d; }
    .fray-cta {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 26px;
    }
    .fray-button {
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 1rem 1.8rem;
      background: #d7742a;
      color: #fff4e6;
      font: 800 1rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 16px 32px rgba(215, 116, 42, 0.22);
    }
    .fray-button.secondary,
    .fray-button.ghost {
      background: rgba(20, 45, 50, 0.62);
      border-color: rgba(212, 156, 92, 0.5);
      color: #d89f6a;
      box-shadow: none;
    }
    .unraveled-mode-switch {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 0 auto 28px;
      flex-wrap: wrap;
    }
    .unraveled-mode-switch button {
      border: 1px solid rgba(212, 156, 92, 0.38);
      border-radius: 999px;
      padding: 0.7rem 1rem;
      background: rgba(20, 45, 50, 0.62);
      color: rgba(242, 232, 217, 0.78);
      font: 700 0.82rem "Segoe UI", Arial, sans-serif;
      cursor: pointer;
    }
    .unraveled-mode-switch button.active {
      background: #d7742a;
      border-color: #d7742a;
      color: #fff4e6;
    }
    .unraveled-pressure-controls { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin:-14px auto 20px; color:rgba(242,232,217,.68); font:600 .78rem "Segoe UI",Arial,sans-serif; }
    .unraveled-pressure-controls select { width:auto; min-width:100px; border:1px solid rgba(212,156,92,.42); border-radius:999px; background:rgba(20,45,50,.72); color:#f2e8d9; padding:.55rem .8rem; }
    .special-pressure-editor { transition:opacity .45s ease, filter .45s ease; }
    .special-pressure-editor.pressure-fading { opacity:var(--pressure-opacity,1); filter:blur(var(--pressure-blur,0px)); }
    #fray-setup-view.braided-mode #solo-unraveled-content { display: none; }
    #fray-setup-view.duet-mode #solo-unraveled-content,
    #fray-setup-view.duet-mode #braided-setup-view { display: none !important; }
    #fray-setup-view.tug-mode #solo-unraveled-content,
    #fray-setup-view.tug-mode #braided-setup-view,
    #fray-setup-view.tug-mode #duet-setup-view { display: none !important; }
    .duet-setup { width: min(820px, 100%); margin: 0 auto; display: grid; gap: 22px; }
    .duet-setup[hidden], .duet-session[hidden] { display: none !important; }
    .duet-character-grid, .duet-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .duet-card, .duet-scene-box { display: grid; gap: 9px; padding: 16px; border: 1px solid rgba(96,147,142,.28); border-radius: 12px; background: rgba(20,55,64,.72); }
    .duet-card.left { border-top: 2px solid #c46a2e; } .duet-card.right { border-top: 2px solid #4a9e8e; }
    .duet-card label, .duet-scene-box label { color: rgba(242,232,217,.62); font: 700 .7rem "Segoe UI",Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
    .duet-card input, .duet-card textarea, .duet-scene-box textarea, .duet-option select { width:100%; border:1px solid rgba(96,147,142,.35); border-radius:8px; background:rgba(17,38,42,.8); color:#f7edde; padding:.7rem; font:500 .95rem "Segoe UI",Arial,sans-serif; }
    .duet-card textarea, .duet-scene-box textarea { resize:vertical; min-height:74px; }
    .duet-option { display:grid; gap:8px; padding:12px 14px; border:1px solid rgba(96,147,142,.28); border-radius:12px; background:rgba(20,55,64,.72); }
    .duet-session { display:grid; grid-template-rows:auto auto 1fr auto; gap:0; min-height:680px; padding:0; }
    .duet-session[hidden] { display:none !important; }
    .duet-session-top, .duet-scene-banner { padding:14px 20px; border-bottom:1px solid rgba(96,147,142,.28); }
    .duet-session-top { display:flex; justify-content:space-between; gap:12px; color:rgba(242,232,217,.78); }
    .duet-split { display:grid; grid-template-columns:1fr 1fr; min-height:420px; }
    .duet-pane { display:grid; grid-template-rows:auto 1fr; min-width:0; }
    .duet-pane.left { border-right:1px solid rgba(96,147,142,.28); }
    .duet-pane-head { padding:12px 16px; border-bottom:1px solid rgba(96,147,142,.28); display:flex; justify-content:space-between; gap:8px; }
    .duet-pane textarea { width:100%; min-height:360px; resize:none; border:0; outline:0; background:rgba(13,35,40,.35); color:#f7edde; padding:18px; font:500 1.05rem/1.8 Georgia,"Times New Roman",serif; }
    .duet-pane.right textarea { opacity:.72; cursor:not-allowed; }
    .duet-pane textarea:disabled { opacity:.58; cursor:not-allowed; }
    #duet-session-status { display:block; width:min(760px,100%); margin:0 auto; padding:12px 16px; border:1px solid rgba(229,174,62,.42); border-radius:10px; background:rgba(229,174,62,.1); color:#f7edde; text-align:center; }
    .duet-session[data-duet-phase="reading"] #duet-session-status { border-color:rgba(96,190,175,.52); background:rgba(96,190,175,.12); }
    @media (max-width:700px) { .duet-character-grid, .duet-options, .duet-split { grid-template-columns:1fr; } .duet-pane.left { border-right:0; border-bottom:1px solid rgba(96,147,142,.28); } }
    .tug-setup, .tug-session { width:min(900px,100%); margin:0 auto; display:grid; gap:22px; }
    .tug-setup[hidden], .tug-session[hidden] { display:none !important; }
    .tug-factions, .tug-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .tug-card, .tug-scene { display:grid; gap:9px; padding:16px; border-radius:12px; background:rgba(20,55,64,.72); border:1px solid rgba(96,147,142,.28); }
    .tug-card.left { border-top:2px solid #c46a2e; } .tug-card.right { border-top:2px solid #4a9e8e; }
    .tug-card label, .tug-scene label, .tug-option label { color:rgba(242,232,217,.62); font:700 .7rem "Segoe UI",Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
    .tug-card input, .tug-card textarea, .tug-scene textarea, .tug-option select, .tug-editor { width:100%; border:1px solid rgba(96,147,142,.35); border-radius:8px; background:rgba(17,38,42,.8); color:#f7edde; padding:.7rem; font:500 .95rem "Segoe UI",Arial,sans-serif; }
    .tug-card textarea, .tug-scene textarea { resize:vertical; min-height:82px; }
    .tug-option { display:grid; gap:8px; padding:12px 14px; border-radius:12px; background:rgba(20,55,64,.72); border:1px solid rgba(96,147,142,.28); }
    .tug-meter { display:grid; gap:10px; padding:16px; border-radius:12px; background:rgba(20,55,64,.72); border:1px solid rgba(96,147,142,.28); }
    .tug-meter-head { display:flex; justify-content:space-between; gap:10px; color:rgba(242,232,217,.78); font-weight:700; }
    .tug-track { display:grid; grid-template-columns:1fr 1fr; height:18px; border-radius:999px; overflow:hidden; background:#12313a; border:1px solid rgba(242,232,217,.2); }
    .tug-track span { transition:width .25s ease; } .tug-track .left-fill { background:#c46a2e; } .tug-track .right-fill { background:#4a9e8e; }
    .tug-session { min-height:680px; } .tug-session-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .tug-editor { min-height:270px; resize:vertical; font:500 1.05rem/1.8 Georgia,"Times New Roman",serif; } .tug-session .tug-editor.right { border-color:rgba(74,158,142,.45); }
    @media (max-width:700px) { .tug-factions,.tug-options,.tug-session-grid { grid-template-columns:1fr; } }
    .fray-shell.tug-theme {
      background: radial-gradient(circle at 50% 16%, rgba(93, 181, 166, .18), transparent 34%), linear-gradient(145deg, #0b2e35 0%, #12484b 58%, #0b252d 100%);
      border-color: rgba(201, 157, 76, .34); color: #f3e2bc; min-height: 760px;
    }
    .fray-shell.tug-theme::before { background: radial-gradient(circle at 50% 75%, rgba(193, 145, 58, .1), transparent 38%); }
    .fray-shell.tug-theme .fray-topline { color: rgba(235, 198, 119, .78); }
    .fray-shell.tug-theme .fray-brand { color: #d4ae69; }
    .fray-shell.tug-theme .fray-display-title { background: linear-gradient(90deg, #c76827 0%, #d7a255 45%, #76a58c 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
    .fray-shell.tug-theme .fray-display-subtitle { color: #9eb2c0; font-family: Georgia, "Times New Roman", serif; }
    .fray-shell.tug-theme .fray-kicker { color: #8ca1ad; }
    .fray-shell.tug-theme .fray-kicker::before, .fray-shell.tug-theme .fray-kicker::after { border-color: #a87532; }
    .fray-shell.tug-theme .tug-setup { width:min(980px,100%); gap:24px; }
    .fray-shell.tug-theme .tug-factions { gap:18px; }
    .fray-shell.tug-theme .tug-card, .fray-shell.tug-theme .tug-scene, .fray-shell.tug-theme .tug-option, .fray-shell.tug-theme .tug-meter, .fray-shell.tug-theme .fray-sprint-card {
      background: linear-gradient(145deg, #e7d4a7, #bfa06b); border: 2px solid #bd8b3d; color:#1b1a18; box-shadow: inset 0 0 0 2px rgba(255,239,183,.32), 0 12px 28px rgba(0,0,0,.25); border-radius: 15px;
    }
    .fray-shell.tug-theme .tug-card.left { border-top: 4px solid #c96e2c; } .fray-shell.tug-theme .tug-card.right { border-top: 4px solid #4f9d8e; }
    .fray-shell.tug-theme .tug-card label, .fray-shell.tug-theme .tug-scene label, .fray-shell.tug-theme .tug-option label { color:#332817; font-weight:800; }
    .fray-shell.tug-theme .tug-card input, .fray-shell.tug-theme .tug-card textarea, .fray-shell.tug-theme .tug-scene textarea, .fray-shell.tug-theme .tug-option select { background:#0a2933; color:#f2e4c3; border:2px solid #9a7132; border-radius:8px; box-shadow: inset 0 2px 8px rgba(0,0,0,.25); }
    .fray-shell.tug-theme .tug-scene { position:relative; padding:20px; }
    .fray-shell.tug-theme .tug-scene::before { content:"✦  SHARED SCENE"; display:block; color:#352716; font:800 .8rem "Segoe UI", sans-serif; letter-spacing:.08em; margin-bottom:2px; }
    .fray-shell.tug-theme .tug-meter { background: #0b3038; border-color:#c3994d; color:#f4dfae; }
    .fray-shell.tug-theme .tug-meter-head { color:#f4dfae; }
    .fray-shell.tug-theme .tug-track { border-color:#b88b3e; background:#0a2933; box-shadow:inset 0 2px 7px rgba(0,0,0,.35); }
    .fray-shell.tug-theme .tug-track .left-fill { background:linear-gradient(90deg,#a94e1d,#d88539); } .fray-shell.tug-theme .tug-track .right-fill { background:linear-gradient(90deg,#4d9a8b,#75b9a1); }
    .fray-shell.tug-theme .fray-button { background:linear-gradient(180deg,#d39d4c,#a96f22); border:2px solid #e2bc70; color:#20170d; box-shadow:0 8px 18px rgba(0,0,0,.28); }
    .fray-shell.tug-theme .fray-button.secondary, .fray-shell.tug-theme .fray-button.ghost { background:#0a2933; color:#e3c17a; border-color:#b4863d; }
    .fray-shell.tug-theme .status { color:#17402f; } .fray-shell.tug-theme .fray-sprint-card .status { color:#20351f; }
    .tug-crest { position:relative; height:118px; display:flex; align-items:center; justify-content:center; margin:0 auto -4px; width:min(760px,100%); }
    .tug-crest::before { content:""; position:absolute; left:7%; right:7%; top:8px; height:92px; border:8px solid #c99b50; border-bottom:0; border-radius:50% 50% 0 0; transform:rotate(-2deg); box-shadow:0 0 0 3px rgba(67,42,17,.55), inset 0 4px 0 rgba(255,224,145,.28); opacity:.95; }
    .tug-crest::after { content:"✧  ✦  ✧"; position:absolute; bottom:2px; color:#d4ab61; font-size:1.3rem; letter-spacing:1.2rem; }
    .tug-crest .tug-side { position:absolute; top:48px; color:#e0ba6a; font-size:2.9rem; filter:drop-shadow(0 4px 3px rgba(0,0,0,.45)); z-index:2; }
    .tug-crest .tug-side.left { left:3%; transform:scaleX(-1); } .tug-crest .tug-side.right { right:3%; }
    .tug-crest .tug-vs { z-index:3; display:grid; place-items:center; width:76px; height:76px; border-radius:50%; border:5px double #d8ad5d; background:radial-gradient(circle,#8e6a2e,#4a3214 72%); color:#f8e0a5; font:700 1.8rem Georgia,serif; box-shadow:0 0 0 5px rgba(47,29,13,.65), 0 8px 18px rgba(0,0,0,.4); }
    .braided-setup {
      width: min(800px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 22px;
    }
    .braided-setup[hidden] { display: none !important; }
    .braided-setup .fray-display-subtitle { max-width: 620px; margin-left: auto; margin-right: auto; }
    .braided-label {
      color: rgba(242, 232, 217, 0.62);
      font: 700 0.72rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .braided-thread-list { display: grid; gap: 10px; }
    .braided-thread-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      align-items: start;
      gap: 10px;
      padding: 10px 14px;
      border: 1px solid rgba(96, 147, 142, 0.28);
      border-radius: 12px;
      background: rgba(20, 55, 64, 0.72);
    }
    .braided-thread-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
    .braided-thread-row input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: #f2e8d9;
      font: 600 1rem Georgia, "Times New Roman", serif;
    }
    .braided-thread-copy { display:grid; gap:7px; min-width:0; }
    .braided-thread-row input[data-braided-thread-goal] { color:rgba(242,232,217,.68); font:500 .84rem/1.45 "Segoe UI",Arial,sans-serif; }
    .braided-brief-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .braided-run-brief { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
    .braided-brief-field, .braided-run-brief > div { display:grid; gap:8px; padding:14px; border:1px solid rgba(96,147,142,.28); border-radius:12px; background:rgba(20,55,64,.72); }
    .braided-brief-field label, .braided-run-brief h3 { margin:0; color:#f2e8d9; font:700 .85rem "Segoe UI",Arial,sans-serif; }
    .braided-brief-field textarea { width:100%; min-height:88px; resize:vertical; border:1px solid rgba(96,147,142,.35); border-radius:8px; background:rgba(17,38,42,.8); color:#f7edde; padding:.7rem; font:500 .92rem/1.5 "Segoe UI",Arial,sans-serif; }
    .braided-run-brief p { margin:0; color:rgba(242,232,217,.78); line-height:1.55; }
    .braided-review-passages { width:100%; display:grid; gap:12px; text-align:left; }
    .braided-review-card { padding:16px; border:1px solid rgba(96,147,142,.3); border-radius:12px; background:rgba(20,55,64,.72); }
    .braided-review-card h4 { margin:0 0 5px; color:#f4ead8; }
    .braided-review-card .goal { margin:0 0 12px; color:#d89f6a; font-size:.82rem; }
    .braided-review-card .passage { margin:0; white-space:pre-wrap; color:rgba(242,232,217,.84); line-height:1.7; }
    .braided-thread-row .owner { color: #d89f6a; font: 700 0.7rem "Segoe UI", Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.1em; }
    .braided-remove { border: 0; background: transparent; color: rgba(242, 232, 217, 0.5); cursor: pointer; font-size: 1rem; }
    .braided-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .braided-setting { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid rgba(96, 147, 142, 0.28); border-radius: 12px; background: rgba(20, 55, 64, 0.72); }
    .braided-setting label { color: rgba(242, 232, 217, 0.62); font: 700 0.68rem "Segoe UI", Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.12em; }
    .braided-setting select, .braided-setting input { width: 100%; border: 1px solid rgba(96, 147, 142, 0.35); border-radius: 8px; background: rgba(17, 38, 42, 0.8); color: #f7edde; padding: 0.65rem; font: 500 0.95rem "Segoe UI", Arial, sans-serif; }
    .braided-warning { border-left: 3px solid #d7742a; border-radius: 12px; background: rgba(73, 45, 29, 0.8); padding: 15px 18px; color: rgba(244, 232, 216, 0.86); line-height: 1.55; }
    .braided-warning strong { color: #ffb067; }
    .braided-tension { display: grid; gap: 9px; padding: 14px 16px; border: 1px solid rgba(96, 147, 142, 0.28); border-radius: 12px; background: rgba(20, 55, 64, 0.72); }
    .braided-tension-head { display: flex; justify-content: space-between; gap: 12px; color: rgba(242, 232, 217, 0.72); font: 700 0.78rem "Segoe UI", Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
    .braided-tension-track { height: 10px; border-radius: 999px; background: rgba(245, 234, 217, 0.12); overflow: hidden; }
    .braided-tension-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #4a9e8e, #d7742a); transition: width 0.3s ease; }
    .braided-session { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
    .braided-session[hidden], .braided-checkpoint[hidden] { display: none !important; }
    .braided-session-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: rgba(242, 232, 217, 0.76); }
    .braided-session-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .braided-live-card { padding: 14px; border: 1px solid rgba(96, 147, 142, 0.28); border-radius: 12px; background: rgba(20, 55, 64, 0.72); }
    .braided-live-card h3 { margin: 0 0 8px; color: #f2e8d9; font: 700 1rem Georgia, "Times New Roman", serif; }
    .braided-live-card p { margin: 0; color: rgba(242, 232, 217, 0.68); font-size: 0.85rem; line-height: 1.5; }
    .braided-editor { width: 100%; min-height: 360px; border: 1px solid rgba(96, 147, 142, 0.32); border-radius: 14px; background: rgba(13, 35, 40, 0.76); color: #f7edde; padding: 18px; resize: vertical; font: 500 1.08rem/1.8 Georgia, "Times New Roman", serif; outline: none; }
    .braided-editor:focus { border-color: #d7742a; box-shadow: 0 0 0 3px rgba(215, 116, 42, 0.14); }
    .braided-checkpoint { max-width: 760px; margin: 54px auto 0; display: grid; gap: 16px; text-align: center; justify-items: center; }
    .braided-checkpoint h3 { margin: 0; color: #f4ead8; font: 700 clamp(2.2rem, 6vw, 4rem) Georgia, "Times New Roman", serif; }
    .braided-checkpoint p { margin: 0; color: rgba(242, 232, 217, 0.76); line-height: 1.7; }
    @media (max-width: 700px) { .braided-settings, .braided-session-grid, .braided-brief-fields, .braided-run-brief { grid-template-columns: 1fr; } .braided-thread-row { grid-template-columns:auto minmax(0,1fr) auto; } .braided-thread-row .owner { grid-column:2; } .fray-view { padding: 22px 16px 28px; } }
    .fray-writing-head {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 12px;
      align-items: center;
      margin-bottom: 26px;
      font: 700 0.88rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(242, 232, 217, 0.76);
    }
    .fray-writing-head .right {
      justify-self: end;
    }
    .fray-writing-head .pill {
      border-radius: 999px;
      border: 1px solid rgba(212, 156, 92, 0.48);
      padding: 0.5rem 0.9rem;
      color: #e28c44;
      background: rgba(31, 49, 51, 0.78);
    }
    .fray-writing-body {
      display: grid;
      gap: 18px;
      align-content: start;
    }
    .fray-writing-title {
      margin: 14px 0 0;
      text-align: center;
      color: rgba(242, 232, 217, 0.72);
      font: italic 500 1.1rem Georgia, "Times New Roman", serif;
    }
    .fray-writing-metrics {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }
    .fray-editor {
      min-height: 420px;
      resize: vertical;
      line-height: 1.75;
      font: 500 1.08rem Georgia, "Times New Roman", serif;
      transition: opacity 0.48s ease, filter 0.48s ease;
    }
    .fray-editor.fray-fading {
      opacity: var(--fray-opacity, 1);
      filter: blur(var(--fray-blur, 0px));
    }
    .fray-run-status {
      text-align: center;
      color: rgba(242, 232, 217, 0.76);
      min-height: 1.4rem;
    }
    .fray-progress {
      height: 12px;
      border-radius: 999px;
      background: rgba(245, 234, 217, 0.12);
      overflow: hidden;
    }
    .fray-progress > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #d7742a, #f3d092);
      width: 0%;
      transition: width 0.16s ease;
    }
    .fray-result {
      max-width: 760px;
      margin: 72px auto 0;
      text-align: center;
      display: grid;
      gap: 18px;
      justify-items: center;
    }
    .fray-result h3 {
      margin: 0;
      font: 700 clamp(3rem, 7vw, 4.4rem) Georgia, "Times New Roman", serif;
      color: #f4ead8;
    }
    .fray-result p {
      margin: 0;
      color: rgba(242, 232, 217, 0.74);
      font-size: 1.08rem;
      line-height: 1.7;
    }
    .fray-result .spark {
      font-size: 3rem;
      line-height: 1;
      opacity: 0.72;
    }
    .fray-saved-view {
      min-height: 100vh;
      padding: 18px 22px 56px;
      background: linear-gradient(180deg, #0d2e31 0%, #123a3d 62%, #d8d1bf 100%);
      color: #f4ead8;
    }
    .fray-saved-topline {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      color: rgba(244, 234, 216, 0.42);
      font: 700 0.84rem Georgia, "Times New Roman", serif;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      margin-bottom: 38px;
    }
    .fray-saved-topline span:last-child { justify-self: end; }
    .fray-saved-head {
      position: relative;
      text-align: center;
      margin-bottom: 42px;
    }
    .fray-saved-back {
      position: absolute;
      left: 0;
      top: 16px;
      border: 0;
      background: transparent;
      color: rgba(244, 234, 216, 0.64);
      cursor: pointer;
      font: 600 1rem "Segoe UI", Arial, sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
    }
    .fray-saved-title {
      margin: 0;
      font: 700 clamp(2.35rem, 7vw, 3.65rem) Georgia, "Times New Roman", serif;
      letter-spacing: 0.07em;
      color: #f4ead8;
    }
    .fray-saved-count {
      margin-top: 8px;
      color: #f4ead8;
      font: 600 0.95rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.12em;
    }
    .fray-project-label {
      max-width: 960px;
      margin: -20px auto 18px;
      border: 1px solid rgba(244, 234, 216, 0.12);
      border-radius: 14px;
      background: rgba(8, 34, 36, 0.54);
      padding: 14px 22px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      color: rgba(244, 234, 216, 0.68);
      box-shadow: 0 14px 30px rgba(4, 17, 19, 0.12);
    }
    .fray-project-label span {
      font: 700 0.72rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }
    .fray-project-label strong {
      color: #f4ead8;
      font: 700 1.15rem Georgia, "Times New Roman", serif;
      text-align: right;
    }
    .fray-saved-list {
      display: grid;
      gap: 16px;
      max-width: 960px;
      margin: 0 auto;
    }
    .fray-library-filters {
      max-width: 960px;
      margin: 0 auto 18px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .fray-library-filter {
      border: 1px solid rgba(244, 234, 216, 0.22);
      border-radius: 999px;
      background: rgba(8, 34, 36, 0.32);
      color: rgba(244, 234, 216, 0.68);
      padding: 9px 15px;
      cursor: pointer;
      font: 600 0.8rem "Segoe UI", Arial, sans-serif;
    }
    .fray-library-filter.active,
    .fray-library-filter:hover {
      border-color: #c46a2e;
      color: #f4ead8;
      background: rgba(196, 106, 46, 0.16);
    }
    .fray-saved-card {
      border: 1px solid rgba(24, 64, 66, 0.74);
      border-radius: 14px;
      background: rgba(8, 34, 36, 0.74);
      padding: 26px 26px 24px;
      display: grid;
      gap: 14px;
      box-shadow: 0 18px 36px rgba(4, 17, 19, 0.16);
      cursor: pointer;
    }
    .fray-saved-card.is-active {
      border-color: rgba(244, 234, 216, 0.38);
      box-shadow: 0 18px 36px rgba(4, 17, 19, 0.22), inset 0 0 0 1px rgba(244, 234, 216, 0.1);
    }
    .fray-saved-card-top {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 18px;
    }
    .fray-saved-card h4 {
      margin: 0;
      color: #f4ead8;
      font: 700 1.28rem Georgia, "Times New Roman", serif;
    }
    .fray-manuscript-source {
      align-self: center;
      justify-self: start;
      border-radius: 999px;
      background: rgba(196, 106, 46, 0.16);
      color: #e39a63;
      padding: 5px 9px;
      font: 700 0.62rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .fray-saved-card p {
      margin: 0;
      color: rgba(244, 234, 216, 0.62);
      line-height: 1.55;
    }
    .fray-saved-meta {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      color: rgba(244, 234, 216, 0.48);
      font: 600 0.88rem "Segoe UI", Arial, sans-serif;
    }
    .fray-saved-card-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      color: rgba(244, 234, 216, 0.46);
      font: 600 0.86rem "Segoe UI", Arial, sans-serif;
      white-space: nowrap;
    }
    .fray-saved-delete {
      border: 0;
      background: transparent;
      color: rgba(244, 234, 216, 0.42);
      cursor: pointer;
      padding: 2px;
      font-size: 1rem;
    }
    .fray-manuscript-detail {
      max-width: 960px;
      margin: 18px auto 0;
      border: 1px solid rgba(244, 234, 216, 0.14);
      border-radius: 14px;
      background: rgba(8, 34, 36, 0.82);
      padding: 22px;
      display: grid;
      gap: 14px;
      box-shadow: 0 18px 38px rgba(4, 17, 19, 0.2);
    }
    .fray-manuscript-detail[hidden] { display: none; }
    .fray-manuscript-detail-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }
    .fray-manuscript-detail label {
      display: grid;
      gap: 8px;
      color: rgba(244, 234, 216, 0.62);
      font: 700 0.72rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .fray-manuscript-detail input,
    .fray-manuscript-detail textarea {
      width: 100%;
      border: 1px solid rgba(244, 234, 216, 0.14);
      border-radius: 10px;
      background: rgba(3, 22, 24, 0.72);
      color: #f4ead8;
      padding: 12px 14px;
      font: 600 1rem "Segoe UI", Arial, sans-serif;
    }
    .fray-manuscript-detail textarea {
      min-height: 260px;
      resize: vertical;
      line-height: 1.55;
      font-family: Georgia, "Times New Roman", serif;
    }
    .fray-manuscript-detail-meta {
      color: rgba(244, 234, 216, 0.5);
      font: 600 0.86rem "Segoe UI", Arial, sans-serif;
    }
    .fray-manuscript-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .fray-saved-empty {
      max-width: 620px;
      margin: 0 auto;
      padding: 28px;
      border-radius: 14px;
      background: rgba(8, 34, 36, 0.56);
      text-align: center;
      color: rgba(244, 234, 216, 0.68);
    }
    .fray-library {
      margin-top: 42px;
      padding-top: 18px;
      border-top: 1px solid rgba(220, 203, 181, 0.12);
      display: grid;
      gap: 18px;
    }
    .fray-library-list {
      display: grid;
      gap: 14px;
    }
    .fray-library-card {
      border: 1px solid rgba(96, 147, 142, 0.26);
      border-radius: 22px;
      background: rgba(13, 40, 43, 0.62);
      padding: 18px 18px 16px;
      display: grid;
      gap: 10px;
    }
    .fray-library-card.active {
      border-color: rgba(111, 220, 212, 0.55);
      box-shadow: 0 12px 26px rgba(8, 23, 24, 0.24);
    }
    .fray-library-card h4 {
      margin: 0;
      font: 700 1.7rem Georgia, "Times New Roman", serif;
      color: #f5ead8;
    }
    .fray-library-card p {
      margin: 0;
      color: rgba(242, 232, 217, 0.68);
      line-height: 1.65;
    }
    .fray-library-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
    .fray-link-btn {
      border: 0;
      background: transparent;
      color: #f4ead8;
      cursor: pointer;
      padding: 0;
      font: inherit;
      text-align: left;
    }
    .fray-link-btn.danger { color: #ffab86; }
    .fray-preview-box {
      border-radius: 20px;
      border: 1px solid rgba(220, 203, 181, 0.16);
      background: rgba(17, 39, 44, 0.58);
      padding: 18px;
      color: rgba(242, 232, 217, 0.82);
      min-height: 140px;
      white-space: pre-wrap;
      line-height: 1.8;
    }
    .fray-sprint-card {
      display: grid;
      gap: 12px;
      padding: 16px;
      border-radius: 20px;
      border: 1px solid rgba(95, 170, 160, 0.28);
      background: rgba(10, 23, 28, 0.34);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    }
    .fray-sprint-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
    .fray-sprint-head h3 {
      margin: 0;
      font-size: 1rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #f4ead8;
    }
    .fray-sprint-head p {
      margin: 4px 0 0;
      color: rgba(242, 232, 217, 0.68);
      line-height: 1.55;
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: 0.92rem;
    }
    .fray-sprint-pill {
      align-self: center;
      padding: 0.4rem 0.8rem;
      border-radius: 999px;
      border: 1px solid rgba(95, 170, 160, 0.36);
      background: rgba(17, 47, 57, 0.45);
      color: #9ed9d0;
      font: 700 0.74rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .fray-sprint-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .fray-sprint-actions .fray-button {
      flex: 1 1 160px;
    }
    .fray-sprint-list {
      display: grid;
      gap: 10px;
    }
    .fray-sprint-list.empty {
      color: rgba(242, 232, 217, 0.58);
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: 0.92rem;
    }
    .fray-sprint-participant {
      display: grid;
      gap: 8px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(95, 170, 160, 0.18);
      background: rgba(5, 16, 20, 0.28);
    }
    .fray-sprint-participant-top,
    .fray-sprint-participant-bottom {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }
    .fray-sprint-name {
      color: #f4ead8;
      font: 700 0.96rem "Segoe UI", Arial, sans-serif;
    }
    .fray-sprint-meta,
    .fray-sprint-subtle {
      color: rgba(242, 232, 217, 0.64);
      font: 0.82rem "Segoe UI", Arial, sans-serif;
    }
    .fray-sprint-wordcount {
      color: #9ed9d0;
      font: 700 0.9rem "Segoe UI", Arial, sans-serif;
    }
    .fray-sprint-roomline {
      color: rgba(242, 232, 217, 0.76);
      font: 0.86rem "Segoe UI", Arial, sans-serif;
    }
    .fray-sprint-roomline strong {
      color: #f4ead8;
      letter-spacing: 0.04em;
    }
    .fray-sprint-live {
      margin-top: 8px;
    }
    .social-grid {
      display: grid;
      grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.25fr);
      gap: 18px;
    }
    .social-stack {
      display: grid;
      gap: 18px;
      align-content: start;
    }
    .social-card {
      display: grid;
      gap: 14px;
    }
    .social-card .row {
      align-items: center;
    }
    .social-relationship-card {
      gap: 18px;
    }
    .social-panel-tabs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--line);
      padding-bottom: 10px;
    }
    .social-panel-tab {
      border: 0;
      background: transparent;
      color: var(--subtle-ink);
      cursor: pointer;
      padding: 0.45rem 0.25rem 0.75rem;
      font: 700 0.95rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-bottom: 3px solid transparent;
    }
    .social-panel-tab.active {
      color: var(--ink);
      border-bottom-color: rgba(255,255,255,0.88);
    }
    .social-badge {
      min-width: 1.5rem;
      height: 1.5rem;
      padding: 0 0.45rem;
      border-radius: 999px;
      background: rgba(230, 86, 108, 0.86);
      color: white;
      display: inline-grid;
      place-items: center;
      font: 700 0.76rem "Segoe UI", Arial, sans-serif;
    }
    .social-panel {
      display: none;
      gap: 12px;
    }
    .social-panel.active {
      display: grid;
    }
    .social-panel-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: baseline;
      flex-wrap: wrap;
    }
    .social-panel-kicker {
      color: var(--subtle-ink);
      font: 700 0.78rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .social-search-results,
    .social-request-list,
    .social-friends-list,
    .social-room-list,
    .social-message-list {
      display: grid;
      gap: 12px;
    }
    .social-item,
    .social-message,
    .social-room {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface-2);
      padding: 14px 16px;
      display: grid;
      gap: 10px;
    }
    .social-request-card {
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
    }
    .social-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1px solid rgba(223, 171, 95, 0.34);
      background: rgba(39, 42, 55, 0.9);
      color: #dfab5f;
      font: 800 1.18rem "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }
    .social-request-main {
      min-width: 0;
      display: grid;
      gap: 4px;
      align-content: center;
    }
    .social-request-name {
      margin: 0;
      font: 700 1.02rem "Segoe UI", Arial, sans-serif;
      color: var(--ink);
    }
    .social-request-subline {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      color: var(--subtle-ink);
      font-size: 0.9rem;
      line-height: 1.45;
    }
    .social-request-subline .dot {
      opacity: 0.4;
    }
    .social-request-muted {
      color: var(--subtle-ink);
    }
    .social-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0.38rem 0.72rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      background: rgba(255, 255, 255, 0.04);
      color: var(--subtle-ink);
      font: 600 0.84rem "Segoe UI", Arial, sans-serif;
      white-space: nowrap;
    }
    .social-actions.stack-end {
      justify-content: flex-end;
      align-items: center;
    }
    .social-icon-btn {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: inline-grid;
      place-items: center;
      font: 700 1.15rem "Segoe UI", Arial, sans-serif;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: var(--subtle-ink);
    }
    .social-icon-btn.accept {
      border-color: rgba(71, 176, 129, 0.34);
      background: rgba(33, 84, 63, 0.22);
      color: #69d5a1;
    }
    .social-icon-btn.decline {
      border-color: rgba(118, 108, 142, 0.28);
      background: rgba(56, 49, 74, 0.24);
      color: #a59dba;
    }
    .social-card-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--subtle-ink);
      font-size: 0.94rem;
    }
    .social-card-tag::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #5b8eff;
      box-shadow: 0 0 0 4px rgba(91, 142, 255, 0.12);
      flex-shrink: 0;
    }
    .btn-cancel-request {
      border: 1px solid rgba(200, 74, 55, 0.32);
      background: rgba(96, 31, 32, 0.18);
      color: #ef7d6d;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    }
    .btn-cancel-request:hover {
      background: rgba(112, 35, 36, 0.24);
      color: #ff8e80;
    }
    .social-room.active {
      border-color: var(--accent-soft);
      box-shadow: 0 0 0 1px rgba(91, 202, 189, 0.12) inset;
      background: color-mix(in srgb, var(--surface-2) 82%, var(--accent) 18%);
    }
    .social-item-head,
    .social-message-head,
    .social-room-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }
    .social-name {
      margin: 0;
      font: 700 1rem "Segoe UI", Arial, sans-serif;
      color: var(--ink);
    }
    .social-handle,
    .social-meta,
    .social-time,
    .social-empty {
      color: var(--subtle-ink);
      font-size: 0.92rem;
      line-height: 1.55;
    }
    .social-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .social-message-body {
      white-space: pre-wrap;
      line-height: 1.65;
      color: var(--ink);
    }
    .social-chat-shell {
      display: grid;
      gap: 16px;
      align-content: start;
      min-height: 620px;
    }
    .social-chat-friend-picker {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--border-soft);
      border-radius: 14px;
      background: var(--surface-2);
    }
    .social-chat-friends-list {
      display: grid;
      gap: 8px;
    }
    .social-chat-friend-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--border-soft);
      border-radius: 11px;
      background: var(--surface);
    }
    .social-chat-friend-option .social-request-subline { margin-top: 2px; }
    .social-create-room {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      margin: 12px 0;
    }
    .social-create-room input { min-width: 0; }
    .social-chat-header {
      display: grid;
      gap: 6px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }
    .social-chat-compose {
      display: grid;
      gap: 12px;
      margin-top: auto;
    }
    .social-chat-compose textarea {
      min-height: 120px;
      resize: vertical;
    }
    .social-message.is-me {
      border-color: rgba(91, 202, 189, 0.3);
    }
    .social-inline-note {
      color: var(--subtle-ink);
      font-size: 0.86rem;
    }
    .roleplay-hub-card {
      border-color: rgba(223, 171, 95, 0.34);
      background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 88%, #dfab5f 12%), var(--surface-2));
    }
    .roleplay-directory-card,
    .roleplay-forum-card { border-color: rgba(91, 202, 189, 0.28); }
    .roleplay-directory-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 160px 160px;
      gap: 9px;
    }
    .roleplay-directory-list,
    .roleplay-thread-list,
    .roleplay-post-list { display: grid; gap: 10px; }
    .roleplay-directory-item,
    .roleplay-thread-item,
    .roleplay-post-item {
      border: 1px solid var(--border-soft);
      border-radius: 14px;
      background: var(--surface-2);
      padding: 13px 15px;
    }
    .roleplay-directory-item.active,
    .roleplay-thread-item.active { border-color: var(--accent-soft); box-shadow: 0 0 0 1px rgba(91, 202, 189, 0.12) inset; }
    .roleplay-directory-item-head,
    .roleplay-post-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .roleplay-directory-item h4 { margin: 0; color: var(--ink); font-size: 1.02rem; }
    .roleplay-directory-item p,
    .roleplay-post-item span,
    .roleplay-thread-item span { margin: 4px 0 0; color: var(--subtle-ink); font-size: 0.86rem; line-height: 1.5; }
    .roleplay-directory-premise { color: var(--ink) !important; }
    .roleplay-directory-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--subtle-ink); font-size: 0.78rem; }
    .roleplay-thread-item { display: grid; gap: 3px; text-align: left; cursor: pointer; color: var(--ink); }
    .roleplay-thread-item strong { font-size: 0.96rem; }
    .roleplay-post-list { max-height: 480px; overflow: auto; }
    .roleplay-post-item.ooc { border-left: 3px solid #dfab5f; }
    .roleplay-post-item.reply { margin-left: 24px; border-left: 3px solid var(--accent-soft); }
    .roleplay-post-head strong { color: var(--ink); }
    .roleplay-post-body { white-space: pre-wrap; color: var(--ink); line-height: 1.65; margin-top: 9px; }
    .roleplay-create-details { border-top: 1px solid var(--line); padding-top: 12px; }
    .roleplay-create-details summary { cursor: pointer; color: var(--gold); font-weight: 700; }
    .roleplay-create-form,
    .roleplay-thread-form,
    .roleplay-post-form { display: grid; gap: 10px; margin-top: 12px; }
    .roleplay-label-picker { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
    .roleplay-label-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .roleplay-label-option {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      padding: 9px 10px;
      border: 1px solid var(--border-soft);
      border-radius: 10px;
      background: color-mix(in srgb, var(--surface-2) 88%, var(--accent) 12%);
      color: var(--ink);
      font-size: 0.82rem;
      line-height: 1.35;
    }
    .roleplay-label-option input { margin-top: 3px; accent-color: var(--accent); }
    .roleplay-label-option small { display: block; color: var(--subtle-ink); font-size: 0.74rem; }
    .roleplay-boundary-note { color: var(--subtle-ink); font-size: 0.78rem; line-height: 1.45; }
    .roleplay-consent-panel {
      display: grid;
      gap: 9px;
      margin: 12px 0;
      padding: 13px 15px;
      border: 1px solid rgba(223, 171, 95, 0.42);
      border-radius: 14px;
      background: color-mix(in srgb, var(--surface-2) 86%, #dfab5f 14%);
    }
    .roleplay-consent-panel strong { color: var(--ink); }
    .roleplay-consent-panel label { display: flex; gap: 9px; align-items: flex-start; color: var(--ink); line-height: 1.45; }
    .roleplay-consent-panel input { margin-top: 4px; accent-color: var(--accent); }
    .roleplay-consent-status { margin: 0; color: var(--subtle-ink); font-size: 0.8rem; }
    .roleplay-post-form textarea { min-height: 140px; resize: vertical; }
    .roleplay-room-note { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--subtle-ink); line-height: 1.55; }
    .roleplay-room-note strong { color: var(--ink); }
    .roleplay-empty { color: var(--subtle-ink); border: 1px dashed var(--border-soft); border-radius: 12px; padding: 14px; }
    .roleplay-hub-settings {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .roleplay-hub-actions,
    .roleplay-channel-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .roleplay-roomline {
      padding: 11px 13px;
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      color: var(--subtle-ink);
      background: rgba(0, 0, 0, 0.12);
    }
    .roleplay-roomline strong { color: var(--gold); letter-spacing: 0.08em; }
    .roleplay-participants {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .roleplay-participant {
      display: grid;
      gap: 2px;
      padding: 9px 11px;
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      background: var(--surface-2);
      color: var(--subtle-ink);
      font-size: 0.82rem;
    }
    .roleplay-participant strong { color: var(--ink); font-size: 0.92rem; }
    .roleplay-hub-editor {
      display: grid;
      gap: 9px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }
    .roleplay-hub-editor textarea { min-height: 180px; resize: vertical; }
    .roleplay-channel-tab {
      border: 1px solid var(--border-soft);
      border-radius: 999px;
      padding: 8px 12px;
      background: var(--surface-2);
      color: var(--subtle-ink);
      cursor: pointer;
      font-weight: 700;
    }
    .roleplay-channel-tab.active { border-color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); color: var(--ink); }
    .roleplay-hub-card .field-label { color: var(--subtle-ink); font-size: 0.86rem; font-weight: 700; }
    .roleplay-hub-card [hidden] { display: none !important; }
    @media (max-width: 720px) {
      .roleplay-directory-toolbar { grid-template-columns: 1fr; }
      .roleplay-hub-settings { grid-template-columns: 1fr; }
      .roleplay-label-options { grid-template-columns: 1fr; }
    }
   .contest-form { display: grid; gap: 10px; margin-top: 12px; }
    .community-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .community-links a { text-decoration: none; }
    .format-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 2px; }
    .format-toolbar button { border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; background: var(--panel-2); color: var(--ink); cursor: pointer; font-weight: 700; }
    .format-toolbar button:hover { border-color: var(--gold); color: var(--gold); }
    .format-help { color: var(--subtle-ink); font-size: .76rem; margin: -3px 0 2px; }
    .contest-richtext { white-space: normal; line-height: 1.6; }
    .contest-richtext strong { color: var(--ink); }
    .contest-richtext mark { background: rgba(232, 184, 75, .35); color: inherit; padding: 0 .12em; border-radius: 3px; }
    .contest-form .row { align-items: end; }
    .contest-list { display: grid; gap: 10px; margin-top: 14px; }
    .contest-card { border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 12px; padding: 12px; background: var(--panel-2); }
    .contest-invite-highlight { animation: contestInvitePulse 2.6s ease-out; }
    @keyframes contestInvitePulse { 0%, 100% { box-shadow: none; } 18% { box-shadow: 0 0 0 4px rgba(232,184,75,.55), 0 12px 28px rgba(232,184,75,.16); } }
    .contest-submit-dialog { width: min(720px, calc(100vw - 28px)); border: 1px solid var(--border); border-radius: 18px; padding: 0; background: var(--surface); color: var(--ink); }
    .contest-submit-dialog::backdrop { background: rgba(5, 14, 20, .72); backdrop-filter: blur(3px); }
    .contest-submit-dialog form { display: grid; gap: 12px; padding: 18px; }
    .contest-submit-dialog textarea { min-height: 280px; resize: vertical; }
    .contest-submissions-dialog { width: min(820px, calc(100vw - 28px)); border: 1px solid var(--border); border-radius: 18px; padding: 0; background: var(--surface); color: var(--ink); }
    .contest-submissions-dialog::backdrop { background: rgba(5, 14, 20, .72); backdrop-filter: blur(3px); }
    .contest-submissions-body { display: grid; gap: 12px; padding: 18px; max-height: 70vh; overflow: auto; }
    .contest-submission-item { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
    .contest-submission-text { white-space: pre-wrap; line-height: 1.6; max-height: 260px; overflow: auto; }
    .contest-card-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
    .contest-title { margin: 0; font-family: var(--serif); font-size: 1.05rem; }
    .contest-meta { color: var(--subtle-ink); font-size: 0.78rem; margin-top: 3px; }
    .contest-prompt { margin: 9px 0 0; color: var(--ink); line-height: 1.45; }
    .contest-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
    .contest-status { min-height: 1.3em; }
    .contest-hub-card { --contest-bg: #102f36; --contest-deep: #0d2830; --contest-card: #1a3440; --contest-border: #2a4a55; --contest-fg: #f0e6d3; --contest-muted: #8a9ea8; --contest-accent: #c46a2e; padding: 0; overflow: hidden; background: linear-gradient(180deg, var(--contest-bg), var(--contest-deep)); border-color: var(--contest-border); color: var(--contest-fg); }
    .contest-hub-nav { display: flex; align-items: center; gap: 20px; padding: 12px 16px; border-bottom: 1px solid var(--contest-border); color: var(--contest-muted); font-size: .78rem; background: rgba(13,40,48,.72); }
    .contest-hub-nav strong { color: var(--contest-fg); margin-right: 10px; }
    .contest-hub-nav button:not(.btn-primary) { border: 0; background: transparent; color: var(--contest-muted); cursor: pointer; font: inherit; padding: 0; }
    .contest-hub-nav button:not(.btn-primary):hover { color: var(--contest-fg); }
    .contest-hub-nav .btn-primary { margin-left: auto; }
    .contest-hero { padding: 38px 24px 30px; text-align: center; background: radial-gradient(ellipse at 50% 100%, rgba(196,106,46,.1), transparent 65%); }
    .contest-live-badge { display: inline-flex; gap: 7px; align-items: center; padding: 5px 12px; border: 1px solid var(--contest-border); border-radius: 999px; color: var(--contest-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }
    .contest-live-badge span:first-child { width: 6px; height: 6px; border-radius: 50%; background: #4a9e8e; }
    .contest-hero h2 { margin: 18px 0 10px; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; }
    .contest-hero h2 em { color: var(--contest-accent); font-style: normal; }
    .contest-hero p { max-width: 620px; margin: 0 auto 22px; color: var(--contest-muted); line-height: 1.55; }
    .contest-stats { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
    .contest-stats div { display: grid; gap: 2px; text-align: center; }
    .contest-stats strong { font-size: 1.35rem; color: var(--contest-fg); }
    .contest-stats span { color: var(--contest-muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; }
    .contest-featured-label { margin: 0 24px 10px; color: var(--contest-fg); font-weight: 700; }
    .contest-list-heading { display:flex; justify-content:space-between; align-items:center; margin: 18px 24px 8px; color: var(--contest-fg); }
    .contest-list-heading span { color: var(--contest-muted); font-size: .85rem; }
    .contest-featured { margin: 0 24px 18px; }
    .contest-featured:empty { display: none; }
    .contest-featured-card { display: grid; grid-template-columns: 1fr 150px; border: 1px solid var(--contest-border); border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--contest-card), rgba(196,106,46,.08)); }
    .contest-featured-main { padding: 20px; }
    .contest-featured-side { display: grid; place-items: center; gap: 6px; padding: 16px; background: rgba(196,106,46,.08); border-left: 1px solid var(--contest-border); text-align: center; }
    .contest-featured-side strong { font-size: 1.6rem; color: var(--contest-fg); }
    .contest-featured-side small { color: var(--contest-muted); text-transform: uppercase; letter-spacing: .1em; font-size: .56rem; }
    .contest-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 24px 12px; }
    .contest-filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .contest-filter { padding: 6px 11px; border: 1px solid var(--contest-border); border-radius: 999px; background: transparent; color: var(--contest-muted); cursor: pointer; font-size: .7rem; }
    .contest-filter.active { border-color: var(--contest-accent); color: var(--contest-accent); background: rgba(196,106,46,.08); }
    .contest-search { flex: 1; min-width: 150px; padding: 8px 12px; border: 1px solid var(--contest-border); border-radius: 999px; background: var(--contest-deep); color: var(--contest-fg); }
    .contest-hub-card > .contest-list { margin: 0 24px 24px; }
    .contest-roleplay-slot { display: grid; gap: 14px; margin: 24px; padding-top: 22px; border-top: 1px solid var(--contest-border); }
    .contest-community-divider { display: grid; gap: 4px; padding: 4px 0 2px; }
    .contest-community-divider span { color: var(--contest-muted); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
    .contest-community-divider strong { color: var(--contest-fg); font-size: 1.35rem; }
    .contest-community-divider small { color: var(--contest-muted); font-size: .82rem; }
    .contest-roleplay-section { margin: 0; background: rgba(26,52,64,.42); border-color: var(--contest-border); }
    .contest-roleplay-section .section-title { color: var(--contest-fg); }
    .contest-roleplay-section .mini, .contest-roleplay-section .status { color: var(--contest-muted); }
    .contest-roleplay-section input, .contest-roleplay-section textarea, .contest-roleplay-section select { background: var(--contest-deep); border-color: var(--contest-border); color: var(--contest-fg); }

    /* Roleplay Hub: editorial story commons. Kept scoped to the hub only. */
    .contest-roleplay-slot { --rp-ink: #f3eadc; --rp-muted: #9aa9aa; --rp-copper: #d98543; --rp-teal: #6bd1c2; --rp-deep: #0a2027; --rp-panel: #112f36; --rp-hairline: rgba(143, 194, 185, .24); }
    .contest-roleplay-slot .contest-community-divider { position: relative; padding: 18px 2px 12px; }
    .contest-roleplay-slot .contest-community-divider::after { content: ""; position: absolute; right: 0; bottom: 20px; width: 38%; height: 1px; background: linear-gradient(90deg, var(--rp-copper), transparent); opacity: .7; }
    .contest-roleplay-slot .contest-community-divider span, .contest-roleplay-slot .roleplay-eyebrow { color: var(--rp-copper); font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
    .contest-roleplay-slot .contest-community-divider strong { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -.02em; }
    .contest-roleplay-slot .contest-community-divider small { max-width: 560px; color: var(--rp-muted); font-size: .88rem; }
    .contest-roleplay-section { position: relative; overflow: hidden; border: 1px solid var(--rp-hairline); border-radius: 24px; background: var(--rp-panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.12); color: var(--rp-ink); }
    .contest-roleplay-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: repeating-linear-gradient(115deg, transparent 0 19px, rgba(255,255,255,.025) 20px, transparent 21px 42px); }
    .contest-roleplay-section > * { position: relative; }
    .contest-roleplay-slot .roleplay-directory-card { padding: 0; }
    .roleplay-hero { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 28px; align-items: center; min-height: 270px; padding: 38px 40px 34px; background: radial-gradient(circle at 86% 36%, rgba(217,133,67,.17), transparent 28%), linear-gradient(135deg, rgba(13, 52, 57, .88), rgba(9, 30, 38, .98)); }
    .roleplay-hero-copy { max-width: 700px; }
    .roleplay-hero h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 12px; color: var(--rp-ink); font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 3.55rem); font-weight: 500; letter-spacing: -.045em; line-height: .96; }
    .roleplay-hero h3 .chip { align-self: center; color: var(--rp-copper); border-color: rgba(217,133,67,.5); background: rgba(217,133,67,.08); font-family: var(--sans); font-size: .58rem; letter-spacing: .12em; }
    .roleplay-hero-lede { max-width: 590px; margin: 0; color: #b8c7c4; font-size: 1rem; line-height: 1.7; }
    .roleplay-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 25px; }
    .roleplay-hero-actions .btn-soft { border-color: rgba(107,209,194,.45); color: var(--rp-teal); background: rgba(107,209,194,.08); transition: transform .32s cubic-bezier(.32,.72,0,1), background-color .32s cubic-bezier(.32,.72,0,1), border-color .32s cubic-bezier(.32,.72,0,1); }
    .roleplay-hero-actions .btn-soft:hover { transform: translateY(-2px); border-color: var(--rp-teal); background: rgba(107,209,194,.15); }
    .roleplay-hero-note { color: var(--rp-muted); font-size: .72rem; letter-spacing: .04em; }
    .roleplay-hero-mark { display: grid; justify-items: center; align-content: center; aspect-ratio: 1; border: 1px solid rgba(217,133,67,.45); border-radius: 50%; outline: 1px solid rgba(217,133,67,.18); outline-offset: 11px; color: var(--rp-copper); transform: rotate(7deg); }
    .roleplay-hero-mark span { font-family: var(--serif); font-size: 4.4rem; letter-spacing: -.08em; line-height: .8; }
    .roleplay-hero-mark small { margin-top: 15px; color: var(--rp-muted); font-size: .58rem; letter-spacing: .25em; }
    .contest-roleplay-slot .roleplay-directory-toolbar { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(130px, .6fr) minmax(130px, .6fr); gap: 10px; margin: 26px 40px 12px; }
    .contest-roleplay-slot .roleplay-directory-toolbar input, .contest-roleplay-slot .roleplay-directory-toolbar select { min-height: 44px; border: 1px solid var(--rp-hairline); border-radius: 10px; background: var(--rp-deep); color: var(--rp-ink); }
    .contest-roleplay-slot .roleplay-directory-toolbar input { padding: 0 14px; }
    .contest-roleplay-slot .roleplay-directory-toolbar select { padding: 0 10px; }
    .contest-roleplay-slot .roleplay-directory-card > .status, .contest-roleplay-slot .roleplay-directory-card > .roleplay-directory-list, .contest-roleplay-slot .roleplay-directory-card > .roleplay-create-details { margin-left: 40px; margin-right: 40px; }
    .contest-roleplay-slot .roleplay-directory-card > .status { color: var(--rp-muted); }
    .contest-roleplay-slot .roleplay-directory-list { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); padding-bottom: 6px; }
    .contest-roleplay-slot .roleplay-directory-item { min-height: 145px; border: 1px solid var(--rp-hairline); border-radius: 14px; background: linear-gradient(145deg, rgba(23,62,67,.8), rgba(9,32,39,.82)); transition: transform .38s cubic-bezier(.32,.72,0,1), border-color .38s cubic-bezier(.32,.72,0,1), background-color .38s cubic-bezier(.32,.72,0,1); }
    .contest-roleplay-slot .roleplay-directory-item:hover { transform: translateY(-3px); border-color: rgba(217,133,67,.7); background: linear-gradient(145deg, rgba(37,72,73,.9), rgba(10,35,42,.9)); }
    .contest-roleplay-slot .roleplay-directory-item.active { border-color: var(--rp-teal); box-shadow: inset 3px 0 0 var(--rp-teal); }
    .contest-roleplay-slot .roleplay-directory-item h4 { color: var(--rp-ink); font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
    .contest-roleplay-slot .roleplay-directory-item p, .contest-roleplay-slot .roleplay-directory-item span { color: var(--rp-muted); }
    .contest-roleplay-slot .roleplay-directory-meta { border-top: 1px solid rgba(143,194,185,.14); padding-top: 9px; }
    .contest-roleplay-slot .roleplay-create-details { margin-top: 18px; margin-bottom: 32px; border-top-color: var(--rp-hairline); }
    .contest-roleplay-slot .roleplay-create-details summary { color: var(--rp-copper); }
    .contest-roleplay-slot .roleplay-create-form { padding-top: 12px; }
    .contest-roleplay-slot .roleplay-forum-card { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.5fr); grid-template-areas: "head head" "threads posts" "threadform postform"; gap: 18px; padding: 30px 34px 34px; }
    .contest-roleplay-slot .roleplay-forum-card > .row-between { grid-area: head; align-items: end; padding-bottom: 15px; border-bottom: 1px solid var(--rp-hairline); }
    .contest-roleplay-slot .roleplay-forum-card > .row-between .section-title { margin: 5px 0 4px; color: var(--rp-ink); font-family: var(--serif); font-size: 2rem; font-weight: 500; }
    .contest-roleplay-slot .roleplay-thread-list { grid-area: threads; align-content: start; }
    .contest-roleplay-slot .roleplay-thread-item { min-height: 64px; border: 0; border-left: 2px solid rgba(143,194,185,.18); border-radius: 0; padding: 11px 14px; background: rgba(5,25,32,.24); transition: border-color .3s cubic-bezier(.32,.72,0,1), background-color .3s cubic-bezier(.32,.72,0,1), transform .3s cubic-bezier(.32,.72,0,1); }
    .contest-roleplay-slot .roleplay-thread-item:hover { transform: translateX(3px); border-left-color: var(--rp-copper); background: rgba(217,133,67,.08); }
    .contest-roleplay-slot .roleplay-thread-item.active { border-left-color: var(--rp-teal); background: rgba(107,209,194,.1); }
    .contest-roleplay-slot .roleplay-thread-item strong { color: var(--rp-ink); font-family: var(--serif); font-size: 1.05rem; font-weight: 500; }
    .contest-roleplay-slot .roleplay-post-list { grid-area: posts; min-height: 300px; max-height: 520px; padding: 4px 4px 4px 20px; border-left: 1px solid var(--rp-hairline); }
    .contest-roleplay-slot .roleplay-post-item { border: 0; border-bottom: 1px solid rgba(143,194,185,.16); border-radius: 0; padding: 15px 4px 17px; background: transparent; }
    .contest-roleplay-slot .roleplay-post-item.reply { margin-left: 22px; padding-left: 16px; border-left: 1px solid var(--rp-copper); }
    .contest-roleplay-slot .roleplay-post-head strong { color: var(--rp-teal); font-size: .83rem; letter-spacing: .03em; }
    .contest-roleplay-slot .roleplay-post-head span { color: var(--rp-muted); font-size: .7rem; }
    .contest-roleplay-slot .roleplay-post-body { color: #d8ded6; font-size: .94rem; line-height: 1.75; }
    .contest-roleplay-slot .roleplay-thread-form { grid-area: threadform; align-self: start; }
    .contest-roleplay-slot .roleplay-post-form { grid-area: postform; align-self: start; }
    .contest-roleplay-slot .roleplay-post-form textarea { min-height: 130px; border-color: var(--rp-hairline); background: var(--rp-deep); }
    .contest-roleplay-slot .roleplay-channel-tab { border: 0; border-bottom: 1px solid transparent; border-radius: 0; color: var(--rp-muted); background: transparent; }
    .contest-roleplay-slot .roleplay-channel-tab.active { border-bottom-color: var(--rp-copper); color: var(--rp-copper); background: transparent; }
    .contest-roleplay-slot .roleplay-hub-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr); gap: 22px 32px; padding: 28px 34px 32px; }
    .contest-roleplay-slot .roleplay-hub-card > .row-between { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid var(--rp-hairline); }
    .contest-roleplay-slot .roleplay-hub-card > .row-between .section-title { margin: 5px 0 4px; color: var(--rp-ink); font-family: var(--serif); font-size: 1.65rem; font-weight: 500; }
    .contest-roleplay-slot .roleplay-hub-settings { align-content: start; }
    .contest-roleplay-slot .roleplay-hub-actions { align-content: start; }
    .contest-roleplay-slot .roleplay-roomline { grid-column: 1 / -1; border-top-color: var(--rp-hairline); color: var(--rp-teal); }
    .contest-roleplay-slot .roleplay-participants { grid-column: 1 / -1; }
    .contest-roleplay-slot .roleplay-room-note { grid-column: 1 / -1; border-top-color: var(--rp-hairline); color: var(--rp-muted); }
    @media (max-width: 767px) {
      .contest-roleplay-slot { width: auto; max-width: 100%; margin: 12px 0; overflow: hidden; }
      .contest-roleplay-slot *, .contest-roleplay-slot *::before, .contest-roleplay-slot *::after { box-sizing: border-box; min-width: 0; }
      .roleplay-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 24px 16px; overflow: hidden; }
      .roleplay-hero h3 { max-width: 100%; font-size: clamp(1.8rem, 10vw, 2.6rem); overflow-wrap: anywhere; }
      .roleplay-hero-lede { max-width: 100%; font-size: .92rem; }
      .roleplay-hero-actions { align-items: stretch; gap: 8px; }
      .roleplay-hero-actions .btn-soft { max-width: 100%; white-space: normal; }
      .roleplay-hero-mark { width: 92px; margin: 14px 0 0 12px; transform: rotate(4deg); }
      .roleplay-hero-mark span { font-size: 2.8rem; }
      .contest-roleplay-slot .roleplay-directory-toolbar { grid-template-columns: minmax(0, 1fr); margin: 16px; }
      .contest-roleplay-slot .roleplay-directory-card > .status, .contest-roleplay-slot .roleplay-directory-card > .roleplay-directory-list, .contest-roleplay-slot .roleplay-directory-card > .roleplay-create-details { margin-left: 16px; margin-right: 16px; }
      .contest-roleplay-slot .roleplay-directory-list { grid-template-columns: minmax(0, 1fr); }
      .contest-roleplay-slot .roleplay-forum-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "threads" "threadform" "posts" "postform"; padding: 20px 16px 22px; }
      .contest-roleplay-slot .roleplay-post-list { min-height: 220px; padding-left: 0; border-left: 0; border-top: 1px solid var(--rp-hairline); padding-top: 12px; }
      .contest-roleplay-slot .roleplay-hub-card { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 22px; }
      .contest-roleplay-slot .roleplay-hub-card > .row-between, .contest-roleplay-slot .roleplay-roomline, .contest-roleplay-slot .roleplay-participants, .contest-roleplay-slot .roleplay-room-note { grid-column: 1; }
      .contest-roleplay-slot .roleplay-hub-actions, .contest-roleplay-slot .roleplay-channel-tabs { width: 100%; }
      .contest-roleplay-slot .roleplay-hub-actions > *, .contest-roleplay-slot .roleplay-channel-tabs > * { max-width: 100%; white-space: normal; }
      .contest-roleplay-slot .roleplay-post-form textarea, .contest-roleplay-slot .roleplay-thread-form textarea { width: 100%; max-width: 100%; }
      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-card,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-section { width: 100%; max-width: 100%; overflow-x: hidden; }
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot h1,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot h2,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot h3,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot h4,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot p,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot small,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot span { max-width: 100%; overflow-wrap: anywhere; }
      body.mobile-legacy-open #mobile-workspace-panel .roleplay-hero-copy,
      body.mobile-legacy-open #mobile-workspace-panel .contest-community-divider { min-width: 0; max-width: 100%; }
    }
    .contest-hub-card > .contest-form { margin: 0 24px 16px; padding: 16px; border: 1px solid var(--contest-border); border-radius: 12px; background: rgba(14,32,40,.3); }
    .contest-hub-card > .contest-form:not(.open) { display: none; }
    .contest-hub-card .contest-card { background: var(--contest-card); border-color: var(--contest-border); }
    .contest-hub-card .contest-card .contest-title { color: var(--contest-fg); }
    .contest-hub-card .contest-card .contest-meta, .contest-hub-card .contest-card .contest-prompt { color: var(--contest-muted); }
    .contest-hub-card .contest-card .chip { background: rgba(240,230,211,.06); color: var(--contest-muted); border-color: var(--contest-border); }
    .contest-hub-card .contest-form input, .contest-hub-card .contest-form textarea, .contest-hub-card .contest-form select { background: var(--contest-deep); border-color: var(--contest-border); color: var(--contest-fg); }
    .contest-hub-card .btn-primary { background: var(--contest-accent); color: #17120d; border-color: var(--contest-accent); box-shadow: 0 8px 18px rgba(196,106,46,.18); }
    .contest-hub-card .btn-soft { background: rgba(240,230,211,.06); color: var(--contest-fg); border-color: var(--contest-border); }
    .contest-hub-card .mini { color: var(--contest-muted); }
    @media (max-width: 620px) { .contest-hub-nav { gap: 10px; } .contest-hub-nav > span { display: none; } .contest-featured-card { grid-template-columns: 1fr; } .contest-featured-side { border-left: 0; border-top: 1px solid var(--border); } }
    /* Mobile hub containment: preserve the desktop composition, but make every
       contest and roleplay surface fit a real phone viewport without sideways scroll. */
    @media (max-width: 767px) {
      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-card,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-card *,
      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot * {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-nav {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-nav strong {
        width: 100%;
        margin: 0 0 2px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-nav button:not(.btn-primary) {
        min-height: 44px;
        padding: 9px 10px;
        white-space: normal;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-nav .btn-primary {
        width: 100%;
        min-height: 44px;
        margin-left: 0;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-hero {
        padding: 24px 16px 22px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-hero h2 {
        display: block;
        width: 100%;
        max-width: 100%;
        font-size: clamp(1.85rem, 9vw, 2.6rem);
        line-height: 1.08;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-hero p,
      body.mobile-legacy-open #mobile-workspace-panel .contest-community-divider small {
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-stats {
        gap: 16px 22px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-featured-label,
      body.mobile-legacy-open #mobile-workspace-panel .contest-list-heading,
      body.mobile-legacy-open #mobile-workspace-panel .contest-featured,
      body.mobile-legacy-open #mobile-workspace-panel .contest-toolbar,
      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-card > .contest-list,
      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-card > .contest-form {
        margin-left: 16px;
        margin-right: 16px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-featured-card {
        grid-template-columns: minmax(0, 1fr);
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-featured-main,
      body.mobile-legacy-open #mobile-workspace-panel .contest-featured-side {
        min-width: 0;
        padding: 16px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-featured-side {
        border-left: 0;
        border-top: 1px solid var(--contest-border);
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-filter-row,
      body.mobile-legacy-open #mobile-workspace-panel .contest-actions,
      body.mobile-legacy-open #mobile-workspace-panel .contest-form .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-filter,
      body.mobile-legacy-open #mobile-workspace-panel .contest-search,
      body.mobile-legacy-open #mobile-workspace-panel .contest-actions > *,
      body.mobile-legacy-open #mobile-workspace-panel .contest-form .row > * {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-hub-card > .contest-form {
        padding: 14px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-form input,
      body.mobile-legacy-open #mobile-workspace-panel .contest-form select,
      body.mobile-legacy-open #mobile-workspace-panel .contest-form textarea,
      body.mobile-legacy-open #mobile-workspace-panel .contest-search {
        width: 100%;
        max-width: 100%;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-card-head,
      body.mobile-legacy-open #mobile-workspace-panel .contest-list-heading {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-title,
      body.mobile-legacy-open #mobile-workspace-panel .contest-meta,
      body.mobile-legacy-open #mobile-workspace-panel .contest-prompt,
      body.mobile-legacy-open #mobile-workspace-panel .contest-card,
      body.mobile-legacy-open #mobile-workspace-panel .contest-list-heading,
      body.mobile-legacy-open #mobile-workspace-panel .contest-community-divider {
        overflow-wrap: anywhere;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot {
        margin: 12px 0 0;
        padding: 18px 16px 0;
      }

      body.mobile-legacy-open #mobile-workspace-panel .contest-roleplay-slot .contest-community-divider {
        padding-left: 0;
        padding-right: 0;
      }
    }

    .site-footer { margin: 18px 0 0; padding: 18px 24px 32px; border-top: 1px solid var(--border); color: var(--subtle-ink); text-align: center; font-size: 0.82rem; }
    .site-footer p { margin: 0 0 8px; }
    .site-footer a, .site-footer button { color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font: inherit; }
    .site-footer-links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .legal-dialog { width: min(760px, calc(100% - 28px)); max-height: min(78vh, 720px); border: 1px solid var(--border); border-radius: 16px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
    .legal-dialog::backdrop { background: rgba(5, 15, 18, .72); }
    .legal-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
    .legal-dialog-body { padding: 18px; overflow: auto; line-height: 1.55; }
    .legal-dialog-body h3 { margin: 18px 0 6px; color: var(--heading-ink); }
    .legal-dialog-body h3:first-child { margin-top: 0; }
    .legal-draft-note { padding: 10px 12px; border-radius: 10px; background: rgba(232, 184, 75, .12); color: var(--heading-ink); }
    .social-chip-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .chip.danger {
      background: rgba(211, 76, 58, 0.12);
      color: #c84a37;
      border-color: rgba(211, 76, 58, 0.28);
    }
    @media (max-width: 980px) {
      .social-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 760px) {
      .social-panel-tabs {
        justify-content: space-between;
      }
      .social-request-card {
        grid-template-columns: auto minmax(0, 1fr);
      }
      .social-request-card .social-actions {
        grid-column: 1 / -1;
      }
      .social-actions.stack-end {
        justify-content: stretch;
      }
      .social-actions.stack-end .btn-cancel-request {
        width: 100%;
      }
    }
    @media (max-width: 900px) {
      .fray-topline,
      .fray-writing-head {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .fray-writing-head .right { justify-self: center; }
      .fray-view { padding: 22px 18px 24px; }
      .fray-start-row,
      .fray-library-actions { justify-content: center; }
      .fray-button { width: 100%; max-width: 360px; }
      .fray-sprint-head,
      .fray-sprint-participant-top,
      .fray-sprint-participant-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
      .fray-kicker {
        gap: 10px;
        letter-spacing: 0.18em;
      }
      .fray-kicker::before,
      .fray-kicker::after {
        width: 42px;
        max-width: 12vw;
      }
      .fray-display-title {
        font-size: clamp(2.1rem, 12vw, 4rem);
        letter-spacing: 0.02em;
        line-height: 0.98;
      }
      .fray-display-subtitle {
        font-size: 1.05rem;
      }
    }

    .layout {
      display: grid;
      grid-template-columns: 220px minmax(0, 1.16fr) 330px;
      gap: 14px;
      align-items: start;
    }
    .layout:has(#contests-tab.active), .layout:has(#contest-faq-tab.active) { grid-template-columns: minmax(0, 1fr); }
    .layout:has(#contests-tab.active) > #mobile-projects-panel,
    .layout:has(#contests-tab.active) > #mobile-stats-panel,
    .layout:has(#contest-faq-tab.active) > #mobile-projects-panel,
    .layout:has(#contest-faq-tab.active) > #mobile-stats-panel { display: none; }
    .workspace:has(#contests-tab.active), .workspace:has(#contest-faq-tab.active) { grid-column: 1; }
    .workspace:has(#contests-tab.active) > .panel-head,
    .workspace:has(#contests-tab.active) > .sidebar,
    .workspace:has(#contests-tab.active) > .tabs,
    .workspace:has(#contest-faq-tab.active) > .panel-head,
    .workspace:has(#contest-faq-tab.active) > .sidebar,
    .workspace:has(#contest-faq-tab.active) > .tabs { display: none; }
    #contests-tab.active, #contest-faq-tab.active { padding: 0; }
    .contest-faq-tab { min-height: 70vh; padding: 28px clamp(18px, 7vw, 86px) 44px; background: #102f36; color: #f0e6d3; }
    .contest-faq-nav { display: flex; align-items: center; gap: 22px; margin: -28px clamp(-86px, -7vw, -18px) 30px; padding: 14px 22px; border-bottom: 1px solid #2a4a55; background: rgba(13,40,48,.72); color: #8a9ea8; font-size: .78rem; }
    .contest-faq-nav strong { color: #f0e6d3; margin-right: 8px; }
    .contest-faq-nav button { border: 0; background: transparent; color: #8a9ea8; cursor: pointer; font: inherit; padding: 0; }
    .contest-faq-nav button:hover, .contest-faq-nav button.active { color: #f0e6d3; }
    .contest-faq-nav .btn-primary { margin-left: auto; color: #17120d; background: #c46a2e; padding: 8px 14px; border-radius: 8px; }
    .contest-faq-intro { text-align: center; max-width: 700px; margin: 0 auto 34px; }
    .contest-faq-intro h2 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3rem); }
    .contest-faq-intro p { margin: 0; color: #8a9ea8; line-height: 1.55; }
    .contest-faq-group { max-width: 900px; margin: 0 auto 30px; }
    .contest-faq-group h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #2a4a55; color: #c46a2e; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
    .contest-faq-item { border: 1px solid #2a4a55; border-radius: 12px; background: rgba(26,52,64,.72); margin-bottom: 10px; overflow: hidden; }
    .contest-faq-question { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 18px; border: 0; background: transparent; color: #f0e6d3; text-align: left; font-weight: 700; cursor: pointer; }
    .contest-faq-question::before { content: '›'; color: #7ca0ab; font-size: 1.4rem; line-height: 1; }
    .contest-faq-item.open .contest-faq-question::before { transform: rotate(90deg); color: #c46a2e; }
    .contest-faq-answer { display: none; padding: 0 18px 16px 48px; color: #8a9ea8; line-height: 1.6; }
    .contest-faq-item.open .contest-faq-answer { display: block; }
    .contest-hub-legacy { display: none !important; }

    .panel {
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .panel-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      padding: 14px;
      border-bottom: 1px solid var(--border-soft);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    }
    .panel-head h2, .panel-head h3 {
      margin: 0;
      font: 700 0.95rem "Segoe UI", Arial, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--heading-ink);
    }
    .panel-body { padding: 14px; display: grid; gap: 14px; }

    .stack { display: grid; gap: 10px; }
    .project-card, .list-card, .chapter-item, .scene-item, .catalog-item, .goal-item {
      text-align: left;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
      padding: 12px;
    }
    .project-card.active,
    .chapter-item.active,
    .scene-item.active,
    .catalog-item.active,
    .goal-item.active,
    .list-card.active {
      border-color: rgba(212, 175, 55, 0.55);
      background: linear-gradient(180deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.03));
      box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.16), 0 8px 16px rgba(0, 0, 0, 0.08);
    }
    .timeline-select {
      flex: 1;
      display: block;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
      min-width: 0;
    }
    .timeline-select h4 {
      margin: 0 0 4px;
      font-size: 1rem;
      color: var(--heading-ink);
    }
    .timeline-select .meta {
      margin: 0;
    }
    .chapter-item.active strong,
    .scene-item.active h4,
    .list-card.active h4 {
      color: var(--accent);
    }
    .project-title { margin: 0; font-size: 1.05rem; line-height: 1.2; color: var(--heading-ink); }
    .meta, .small {
      margin: 0;
      font: 0.92rem "Segoe UI", Arial, sans-serif;
      color: var(--muted);
      line-height: 1.5;
    }
    .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 0.33rem 0.74rem;
      border: 1px solid var(--border-soft);
      background: var(--chip-bg);
      color: var(--chip-ink);
      font: 0.84rem "Segoe UI", Arial, sans-serif;
    }
    .chip strong { color: var(--heading-ink); }
    .editor-save-anchor {
      display: block;
      min-height: 0;
    }
    .editor-save-state {
      position: fixed;
      z-index: 120;
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--border-soft);
      border-radius: 999px;
      padding: 0.38rem 0.72rem;
      background: var(--surface-2);
      color: var(--subtle-ink);
      font: 700 0.75rem "Segoe UI", Arial, sans-serif;
      white-space: nowrap;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
      pointer-events: none;
    }
    /* A conflict badge that cannot be acted on is a dead end. The resolution
       controls live in the settings panel, which no mobile surface exposes, so
       "choose a copy" was an instruction with nowhere to go. In the conflict
       state the badge becomes the way there. */
    .editor-save-state[data-state="conflict"] {
      pointer-events: auto;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .editor-save-state[data-state="conflict"]:focus-visible {
      outline: 2px solid var(--accent, #4ecfae);
      outline-offset: 2px;
    }
    .editor-save-state[hidden] { display: none !important; }
    .editor-save-state[data-state="local"],
    .editor-save-state[data-state="saved"] { color: var(--success); }
    .editor-save-state[data-state="syncing"],
    .editor-save-state[data-state="pending"] { color: var(--accent); }
    .editor-save-state[data-state="conflict"],
    .editor-save-state[data-state="error"] { color: var(--danger); }

    .workspace {
      display: grid;
      gap: 14px;
    }
    .tabs {
      display: none;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 14px 12px;
      border-bottom: 1px solid var(--border-soft);
      background: rgba(255, 255, 255, 0.18);
    }
    .tab-btn { background: var(--surface-2); color: var(--subtle-ink); font-weight: 700; }
    .tab-btn.active { background: var(--accent); color: var(--accent-ink); }

    .tab { display: none; padding: 14px; }
    .tab.active { display: grid; gap: 14px; animation: fadeIn 0.18s ease; }
    .tab { scroll-margin-top: 24px; }
    .tab.tab-focus-pulse { animation: tabFocusPulse 0.9s ease; }
    @keyframes tabFocusPulse {
      0% { outline: 0 solid rgba(79, 216, 174, 0); }
      35% { outline: 4px solid rgba(79, 216, 174, 0.38); outline-offset: 4px; }
      100% { outline: 0 solid rgba(79, 216, 174, 0); }
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

    .grid { display: grid; gap: 12px; }
    .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .split-70 { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }

    .section-title {
      margin: 0;
      font: 700 0.94rem "Segoe UI", Arial, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--heading-ink);
    }
    .field { display: grid; gap: 6px; }
    .field label, .field > span {
      font: 0.92rem "Segoe UI", Arial, sans-serif;
      color: var(--subtle-ink);
    }

    .editor-title {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      font-size: clamp(1.6rem, 2.2vw, 2.35rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #172028;
    }
    .editor-subtitle {
      width: 100%;
      min-height: 76px;
      border: 0;
      background: transparent;
      padding: 0;
      resize: vertical;
      font: 1rem "Segoe UI", Arial, sans-serif;
      line-height: 1.55;
      color: var(--muted);
    }
    .editor-box {
      width: 100%;
      min-height: 52vh;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--surface), var(--surface-2));
      padding: 1.05rem 1.1rem;
      font-size: 1.02rem;
      line-height: 1.72;
      color: var(--ink);
      font-family: var(--story-font, Georgia, "Times New Roman", serif);
    }
    .editor-box.small { min-height: 220px; }
    .editor-box.tall { min-height: 340px; }

    .card {
      border-radius: 18px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--surface-3), var(--surface));
      padding: 14px;
      display: grid;
      gap: 12px;
    }
    .card.contest-hub-card {
      background: linear-gradient(180deg, var(--contest-bg), var(--contest-deep));
      border-color: var(--contest-border);
      color: var(--contest-fg);
    }
    .card h3 { margin: 0; }

    .list { display: grid; gap: 8px; }
    .list-card h4 { margin: 0 0 4px; font-size: 1rem; color: var(--heading-ink); }
    .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .row-between { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
    .status {
      min-height: 1.2em;
      margin: 0;
      font: 0.92rem "Segoe UI", Arial, sans-serif;
      color: var(--accent);
      font-weight: 600;
    }
    .empty {
      padding: 14px;
      border-radius: 14px;
      border: 1px dashed var(--border-soft);
      background: var(--surface-3);
      color: var(--muted);
      font: 0.95rem "Segoe UI", Arial, sans-serif;
      line-height: 1.55;
    }
    .mini {
      font: 0.88rem "Segoe UI", Arial, sans-serif;
      color: var(--muted);
      margin: 0;
    }
    .stat-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .metric {
      border-radius: 16px;
      border: 1px solid var(--border-soft);
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), color-mix(in srgb, var(--accent) 3%, var(--surface)));
      padding: 12px;
    }
    .metric .k {
      display: block;
      font: 0.8rem "Segoe UI", Arial, sans-serif;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .metric .v {
      display: block;
      margin-top: 6px;
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--heading-ink);
    }
    .bar {
      height: 10px;
      border-radius: 999px;
      overflow: hidden;
      background: var(--surface-3);
    }
    .bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, white));
      width: 0%;
    }
    .history-bars {
      display: grid;
      grid-template-columns: repeat(14, minmax(0, 1fr));
      gap: 6px;
      margin-top: 10px;
      align-items: end;
      min-height: 118px;
    }
    .history-bar {
      display: grid;
      gap: 4px;
      justify-items: center;
      align-items: end;
      min-height: 100px;
    }
    .history-bar span {
      width: 100%;
      border-radius: 10px 10px 4px 4px;
      background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 72%, white));
      min-height: 8px;
    }
    .history-bar label {
      font: 0.7rem "Segoe UI", Arial, sans-serif;
      color: var(--muted);
      text-align: center;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .scene-type-chip,
    .pin-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      padding: 0 6px;
      border-radius: 999px;
      font: 600 0.72rem "Segoe UI", Arial, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      background: var(--chip-bg);
      color: var(--chip-ink);
    }
    .pin-icon {
      position: absolute;
      transform: translate(-50%, -50%);
      min-width: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--border);
    }
    .pin-city { background: color-mix(in srgb, var(--accent) 85%, white); }
    .pin-dungeon { background: color-mix(in srgb, var(--danger) 80%, white); }
    .pin-wilderness { background: color-mix(in srgb, var(--success) 80%, white); }
    .pin-landmark { background: color-mix(in srgb, var(--accent3) 80%, white); }
    .deadline-warning {
      color: var(--danger);
      font: 0.82rem "Segoe UI", Arial, sans-serif;
      margin-top: 6px;
    }
    .catalog-group {
      display: grid;
      grid-template-columns: 290px minmax(0, 1fr);
      gap: 14px;
    }
    .organize-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 14px;
      align-items: start;
    }
    .organize-grid > .card { align-self: start; }
    .planning-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 14px;
    }
    .planning-form-status {
      margin: 4px 0 0;
      padding: 0.5rem 0.65rem;
      border: 1px solid var(--border-soft);
      border-radius: 10px;
      background: color-mix(in srgb, var(--surface-2) 72%, transparent);
    }
    .planning-form-status[data-planning-state="saved"] { color: var(--success); }
    .planning-form-status[data-planning-state="loading"] { color: var(--subtle-ink); }
    .planning-form-status[data-planning-state="pending"],
    .planning-form-status[data-planning-state="syncing"] { color: var(--accent); }
    .planning-form-status[data-planning-state="conflict"],
    .planning-form-status[data-planning-state="error"] { color: var(--danger); }
    .map-canvas {
      position: relative;
      min-height: 320px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 0 18%, transparent 100%),
        radial-gradient(circle at 80% 35%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 0 14%, transparent 100%),
        linear-gradient(180deg, var(--surface), var(--surface-2));
      overflow: hidden;
    }
    .map-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--border-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.75;
      pointer-events: none;
    }
    .map-marker {
      position: absolute;
      transform: translate(-50%, -50%);
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 2px solid var(--surface);
      background: var(--accent);
      color: var(--accent-ink);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      font-size: 1rem;
    }
    .map-marker.active {
      background: var(--accent2);
      transform: translate(-50%, -50%) scale(1.08);
    }
    .map-marker small {
      position: absolute;
      top: 100%;
      margin-top: 6px;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      color: var(--ink);
      font: 0.78rem "Segoe UI", Arial, sans-serif;
      background: var(--surface);
      padding: 2px 6px;
      border-radius: 999px;
      border: 1px solid var(--border-soft);
    }
    .scene-link {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--border-soft);
      background: var(--surface-3);
      border-radius: 12px;
      padding: 10px 11px;
    }
    .scene-link .label {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .scene-link .label strong,
    .scene-link .label span { display: block; }
    .scene-ordered {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }
    .scene-pill {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border-radius: 12px;
      background: var(--surface-3);
      border: 1px solid var(--border);
      font: 0.9rem "Segoe UI", Arial, sans-serif;
    }
    .scene-pill[draggable="true"],
    .scene-item[draggable="true"],
    .list-card[draggable="true"] {
      cursor: grab;
    }
    .scene-pill[draggable="true"]:active,
    .scene-item[draggable="true"]:active,
    .list-card[draggable="true"]:active {
      cursor: grabbing;
    }
    .scene-pill .actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .scene-pill button, .scene-link button { padding: 0.45rem 0.7rem; }
    .compact-select { min-width: 170px; background: var(--field-bg); color: var(--field-ink); }
    .goal-progress {
      display: grid;
      gap: 6px;
      font: 0.9rem "Segoe UI", Arial, sans-serif;
    }

    .book-preview {
      max-height: 72vh;
      overflow: auto;
      padding: 20px;
      border-radius: 18px;
      background:
        radial-gradient(circle at top, var(--surface-3), transparent 45%),
        linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      font-family: var(--story-font, Georgia, "Times New Roman", serif);
      line-height: 1.8;
      color: var(--ink);
    }

    .book-preview h1,
    .book-preview h2,
    .book-preview h3,
    .book-preview p {
      margin-top: 0;
      color: var(--ink);
    }

    .book-preview h1 {
      font-size: clamp(2rem, 3vw, 2.8rem);
      letter-spacing: -0.03em;
      text-align: center;
      margin-bottom: 0.5rem;
    }

    .book-preview .meta-line {
      text-align: center;
      margin-bottom: 1.3rem;
      color: var(--muted);
    }

    .book-preview .chapter-block {
      margin-bottom: 2rem;
      padding-bottom: 1.1rem;
      border-bottom: 1px solid rgba(92, 102, 112, 0.12);
    }

    .book-preview .chapter-title {
      font-size: 1.55rem;
      margin-bottom: 0.25rem;
      letter-spacing: -0.02em;
    }

    .book-preview .chapter-synopsis {
      font-family: "Segoe UI", Arial, sans-serif;
      font-style: italic;
      color: var(--muted);
      margin-bottom: 1rem;
    }

    .book-preview .scene-block {
      margin: 1rem 0 1.2rem;
      padding-left: 1rem;
      border-left: 3px solid rgba(15, 118, 110, 0.2);
    }

    .book-preview .scene-title {
      font-size: 1.15rem;
      margin-bottom: 0.4rem;
    }

    .book-preview .scene-synopsis {
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: 0.95rem;
      color: var(--muted);
      margin-bottom: 0.8rem;
    }

    .book-preview .scene-body,
    .book-preview .chapter-body {
      white-space: pre-wrap;
      font-size: 1.03rem;
    }

    .book-preview .drop-cap:first-letter {
      float: left;
      font-size: 3.2rem;
      line-height: 0.9;
      padding-right: 0.16em;
      padding-top: 0.08em;
      color: var(--accent);
      font-weight: 700;
    }

    .project-cover {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--surface), var(--surface-2));
      box-shadow: inset 0 0 0 1px var(--surface-3);
    }

    .project-cover-thumb {
      width: 54px;
      height: 72px;
      border-radius: 12px;
      object-fit: cover;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--surface), var(--surface-2));
      flex: 0 0 auto;
    }

    .branding-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 12px;
    }

    .cover-editor {
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .label-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .label-row {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }

    .label-row .icon-field {
      text-align: center;
      font-size: 1.08rem;
    }

    .font-sample {
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--surface-3);
      font-family: var(--story-font, Georgia, "Times New Roman", serif);
      line-height: 1.65;
      color: var(--ink);
    }

    .auth-status-box {
      display: grid;
      gap: 10px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid var(--border-soft);
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), color-mix(in srgb, var(--accent) 2%, var(--surface)));
    }

    .auth-status-box strong {
      display: block;
      font: 700 1rem "Segoe UI", Arial, sans-serif;
      color: var(--heading-ink);
    }
    .reset-complete-box {
      display: grid;
      gap: 10px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
    }

    .insight-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }
    .insight-grid > section:first-child { order: 2; }
    .insight-grid > .prompt-vault-card { order: 1; width: 100%; }
    .matrix-output, .reverse-outline-output, .bibliography-output {
      min-height: 260px;
      max-height: 560px;
      overflow: auto;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--surface);
      white-space: pre-wrap;
      line-height: 1.6;
    }
    .prompt-output {
      padding: 14px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--accent3) 35%, var(--border));
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent3) 10%, var(--surface)), var(--surface));
      min-height: 120px;
      line-height: 1.6;
    }
    .prompt-vault-card {
      overflow: hidden;
      background: linear-gradient(160deg, #1f4041 0%, #122627 100%);
      border-color: rgba(212, 175, 55, 0.34);
      color: #f4ead5;
    }
    .prompt-vault-card .row-between { align-items: flex-start; }
    .prompt-vault-card .section-title { color: #f4ead5; font: 700 clamp(1.7rem, 4vw, 2.6rem) Georgia, "Times New Roman", serif; }
    .prompt-vault-card .mini { color: rgba(244, 234, 213, 0.78); font: italic 1rem/1.5 Georgia, "Times New Roman", serif; }
    .prompt-vault-new, .prompt-vault-next { background: #c75d2c; border-color: #c75d2c; color: #fff7e8; }
    .prompt-vault-new:hover, .prompt-vault-next:hover { background: #a84d22; border-color: #a84d22; }
    .prompt-vault-stage { min-height: 300px; margin-top: 22px; padding: 34px 48px 28px; border: 8px solid #fefcf5; outline: 2px solid #e8e0cf; border-radius: 16px; background: #fefcf5; color: #242424; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24); text-align: center; display: flex; flex-direction: column; justify-content: center; }
    .prompt-vault-decoration { color: #b9a98f; font: 2rem Georgia, serif; line-height: 1; }
    .prompt-vault-card .prompt-output { min-height: 220px; padding: 34px 20px; border: 0; background: transparent; color: #171717; font: 1.5rem/1.75 Georgia, "Times New Roman", serif; display: flex; align-items: center; justify-content: center; }
    .prompt-vault-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
    .prompt-vault-copy { background: #dcd5c6; border-color: #c8bfad; color: #18252a; }
    .prompt-vault-copy:hover { background: #cfc6b5; }
    .prompt-vault-counter { margin-top: 18px; text-align: center; color: rgba(244, 234, 213, 0.72); font: italic 0.9rem Georgia, serif; }
    .prompt-vault-welcome { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(78, 54, 41, 0.88); color: #f4ead5; line-height: 1.5; }
    .prompt-vault-welcome strong { display: block; margin-bottom: 4px; color: #d4af37; }
    @media (max-width: 620px) { .prompt-vault-stage { padding: 26px 16px 20px; } .prompt-vault-card .prompt-output { font-size: 1.1rem; } }
    .relationship-grid {
      display: grid;
      gap: 12px;
    }
    .relationship-matrix {
      display: grid;
      gap: 1px;
      background: var(--border-soft);
      border-radius: 16px;
      overflow: hidden;
    }
    .relationship-row {
      display: grid;
      grid-template-columns: 150px repeat(auto-fit, minmax(88px, 1fr));
      gap: 1px;
      background: var(--border-soft);
    }
    .relationship-cell, .relationship-head {
      background: var(--surface);
      padding: 10px;
      min-height: 52px;
      display: grid;
      place-items: center;
      text-align: center;
      font: 0.82rem "Segoe UI", Arial, sans-serif;
    }
    .relationship-head {
      font-weight: 700;
      color: var(--heading-ink);
    }
    .relationship-cell.is-linked {
      background: color-mix(in srgb, var(--accent) 14%, var(--surface));
      color: var(--heading-ink);
      font-weight: 700;
    }
    .relationship-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--muted);
      font: 0.82rem "Segoe UI", Arial, sans-serif;
    }
    .citation-list {
      display: grid;
      gap: 8px;
    }
    .citation-item {
      padding: 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      text-align: left;
    }
    .citation-item.active {
      border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
    }
    .mobile-draft-hub,
    .mobile-draft-bar {
      display: none;
    }
    .mobile-draft-hub {
      margin-bottom: 14px;
      padding: 14px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface));
      box-shadow: var(--shadow-sm);
      gap: 12px;
    }
    .mobile-draft-hub-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }
    .mobile-draft-hub-title {
      margin: 0;
      color: var(--heading-ink);
      font: 700 1rem "Segoe UI", Arial, sans-serif;
    }
    .mobile-draft-hub-subtitle {
      margin: 4px 0 0;
      color: var(--muted);
      font: 0.84rem "Segoe UI", Arial, sans-serif;
    }
    .mobile-draft-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mobile-draft-pills .chip {
      font-size: 0.76rem;
    }
    .mobile-draft-nav {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .mobile-draft-nav button {
      min-height: 44px;
    }
    .mobile-draft-bar {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 35;
      padding: 10px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(16px);
      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }
    .mobile-draft-btn {
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--heading-ink);
      border-radius: 16px;
      min-height: 48px;
      padding: 8px 6px;
      display: grid;
      gap: 2px;
      justify-items: center;
      align-content: center;
      font: 700 0.75rem "Segoe UI", Arial, sans-serif;
    }
    .mobile-draft-btn .icon {
      font-size: 1rem;
      line-height: 1;
    }
    .mobile-draft-btn.primary {
      background: var(--accent);
      color: var(--accent-ink);
      border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
    }
    .canvas-poetry .editor-box.small,
    .canvas-poetry #book-preview {
      font-family: Georgia, "Times New Roman", serif;
      line-height: 2;
      letter-spacing: 0.01em;
    }
    .canvas-script .editor-box.small,
    .canvas-script #book-preview {
      font-family: "Courier New", Courier, monospace;
      line-height: 1.9;
    }
    .canvas-textbook .editor-box.small,
    .canvas-textbook #book-preview {
      column-count: 2;
      column-gap: 24px;
    }

    @media (max-width: 1180px) {
      .layout { grid-template-columns: 1fr; }
      .toolbar { grid-template-columns: 1fr; }
      .sidebar { display: none; }
      .tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; background: var(--nav-bg); border-radius: var(--radius); padding: 8px 10px; border: 1px solid var(--border); }
      .tab-btn { white-space: nowrap; background: var(--surface-2); color: var(--subtle-ink); }
      .tab-btn.active { background: var(--accent); color: var(--accent-ink); }
      .catalog-group, .organize-grid, .planning-grid, .split-70, .two-col, .three-col, .branding-grid, .label-grid { grid-template-columns: 1fr; }
      .label-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .shell { padding: 12px 12px 110px; }
      button,
      [role="button"],
      input[type="button"],
      input[type="submit"],
      select {
        min-height: 44px;
      }
      input,
      textarea,
      select {
        font-size: 16px;
      }
      button,
      [role="button"] {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      .mobile-topbar,
      .mobile-shell-nav {
        display: grid;
      }
      .mobile-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
      }
      .hero {
        padding: 20px 18px 18px;
        border-radius: 22px;
      }
      .hero-top { flex-direction: column; }
      .hero .eyebrow { display: none; }
      .hero-actions {
        justify-content: flex-start;
        width: 100%;
        justify-items: stretch;
      }
      .hero-action-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
      }
      .hero-action-row::-webkit-scrollbar { display: none; }
      .hero-actions button {
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .toolbar {
        grid-template-columns: 1fr;
        padding: 12px;
        border-radius: 18px;
      }
      .toolbar button, .toolbar input { width: 100%; }
      .tab { padding: 12px; }
      .editor-box { min-height: 38vh; }
      .stat-grid { grid-template-columns: 1fr; }
      .panel-head { padding: 12px; }
      .book-preview { max-height: none; }
      .continue-card { flex-direction: column; }
      .continue-card .continue-btn { width: 100%; justify-content: center; }
      .tabs {
        position: sticky;
        top: 8px;
        z-index: 25;
        margin-bottom: 12px;
        box-shadow: 0 10px 24px rgba(20, 24, 33, 0.12);
      }
      .insight-grid { grid-template-columns: 1fr; }
      .relationship-row { grid-template-columns: 120px repeat(auto-fit, minmax(72px, 1fr)); }
      .outline-grid-editors {
        display: flex;
        flex-direction: column;
      }
      .outline-grid-editors > section:last-child {
        order: -1;
      }
      .layout {
        display: block;
      }
      #mobile-projects-panel,
      #mobile-workspace-panel,
      #mobile-stats-panel {
        margin-bottom: 16px;
      }
      .workspace > .panel-head {
        gap: 12px;
        align-items: flex-start;
      }
      .workspace > .panel-head,
      .workspace > .panel-head > div:first-child {
        display: grid;
      }
      .chip-row {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
        scrollbar-width: none;
      }
      .chip-row::-webkit-scrollbar { display: none; }
      .sidebar {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        gap: 0;
      }
      .sidebar-group-label {
        margin: 16px 0 8px;
        padding-left: 4px;
      }
      .sidebar-btn {
        padding: 13px 4px;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
        background: transparent;
      }
      .sidebar-btn.active {
        margin: 4px 0;
        padding-left: 12px;
        border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
        border-radius: 16px;
        background: color-mix(in srgb, var(--accent) 12%, var(--surface));
      }
      .tabs {
        display: none;
      }
      .mobile-draft-hub,
      .mobile-draft-bar {
        display: grid;
      }
      .mobile-draft-hub[data-hidden="true"],
      .mobile-draft-bar[data-hidden="true"] {
        display: none;
      }
      body {
        padding-bottom: 108px;
      }
      .fray-display-title {
        font-size: clamp(2.35rem, 14vw, 4.2rem);
        letter-spacing: 0.03em;
        overflow-wrap: anywhere;
      }
    }

    /* mobile app shell refinement */
    @media (max-width: 760px) {
      :root {
        --mobile-bg: #0d1420;
        --mobile-panel: #131c2b;
        --mobile-panel-alt: #0f1826;
        --mobile-border: #223047;
        --mobile-pill: #1b2739;
      }

      body {
        background: var(--bg);
        overscroll-behavior-x: none;
      }

      .shell {
        width: 100%;
        max-width: 430px;
        padding: 0 0 116px;
        gap: 0;
      }

      .mobile-topbar {
        padding: 14px 16px 10px;
        background: color-mix(in srgb, var(--bg) 94%, transparent);
      }

      .mobile-profile-orb {
        width: 32px;
        height: 32px;
        box-shadow: 0 8px 18px rgba(8, 12, 20, 0.28);
      }

      .mobile-topbar-eyebrow {
        font-size: 0.58rem;
        color: var(--muted);
      }

      .mobile-topbar-title {
        font-size: 1.05rem;
        letter-spacing: -0.02em;
      }

      .mobile-topbar-menu {
        width: 36px;
        height: 36px;
        background: var(--surface-2);
        border-color: var(--border-soft);
      }

      .hero {
        margin: 0 16px 14px;
        padding: 20px 18px 18px;
        border-radius: 18px;
        background:
          radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.16), transparent 45%),
          linear-gradient(160deg, color-mix(in srgb, var(--accent) 28%, #164640), #0f3036 72%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 28px rgba(8, 12, 20, 0.18);
      }

      .hero h1 {
        font-size: clamp(2.1rem, 10vw, 2.8rem);
        letter-spacing: -0.035em;
        text-wrap: balance;
      }

      .hero .brand > p:last-child {
        max-width: 38ch;
        font-size: 0.84rem;
        line-height: 1.52;
      }

      .hero-actions {
        gap: 8px;
      }

      .hero-action-row {
        scrollbar-width: none;
      }

      .hero-action-row::-webkit-scrollbar,
      .chip-row::-webkit-scrollbar {
        display: none;
      }

      .hero-actions button,
      .toolbar button {
        min-height: 42px;
      }

      .toolbar {
        margin: 0 16px 14px;
        padding: 12px;
        gap: 8px;
        border-radius: 14px;
        background: var(--surface);
        box-shadow: 0 8px 22px rgba(8, 12, 20, 0.12);
      }

      .toolbar input {
        min-height: 44px;
      }

      #mobile-projects-panel,
      #mobile-workspace-panel,
      #mobile-stats-panel {
        margin: 0 16px 16px;
        border-radius: 16px;
        background: var(--surface);
        border-color: var(--border);
        box-shadow: var(--shadow-sm);
      }

      #mobile-projects-panel .panel-head,
      #mobile-workspace-panel .panel-head,
      #mobile-stats-panel .panel-head {
        padding: 0 0 10px;
        margin-bottom: 4px;
      }

      #mobile-projects-panel .panel-head h2,
      #mobile-workspace-panel .panel-head h2,
      #mobile-stats-panel .panel-head h3 {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      #mobile-projects-panel .panel-body,
      #mobile-workspace-panel .panel-body,
      #mobile-stats-panel .panel-body {
        padding: 0;
      }

      #mobile-projects-panel .project-card,
      #mobile-projects-panel .project-item {
        border-radius: 14px;
        background: var(--surface-2);
      }

      #mobile-workspace-panel .chip-row {
        display: flex;
        width: 100%;
        gap: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
      }

      #mobile-workspace-panel .chip {
        flex: 0 0 auto;
        padding: 7px 10px;
        font-size: 0.7rem;
      }

      #mobile-workspace-panel .sidebar {
        display: flex;
        margin-top: 6px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      #mobile-workspace-panel .sidebar-group-label {
        padding-left: 4px;
        margin-top: 16px;
        font-size: 0.62rem;
      }

      #mobile-workspace-panel .sidebar-btn {
        min-height: 44px;
        padding: 11px 6px;
        border-bottom-color: var(--border-soft);
      }

      #mobile-workspace-panel .sidebar-btn.active {
        padding-left: 12px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--accent) 14%, var(--surface));
        border-color: color-mix(in srgb, var(--accent) 24%, transparent);
      }

      #mobile-stats-panel .metric {
        border-radius: 12px;
        background: var(--surface-2);
        border-color: var(--border);
      }

      .mobile-shell-nav {
        bottom: max(10px, env(safe-area-inset-bottom));
        width: calc(100% - 24px);
        border-radius: 18px;
        background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
      }

      .mobile-shell-btn {
        min-height: 48px;
        padding: 7px 4px;
      }

      .mobile-shell-btn.active {
        color: var(--accent3);
        background: color-mix(in srgb, var(--accent3) 14%, var(--surface-2));
        border-color: color-mix(in srgb, var(--accent3) 26%, transparent);
      }

      @media (prefers-reduced-motion: reduce) {
        .mobile-shell-btn,
        .hero-actions button,
        .toolbar button {
          transition: none;
        }
      }
    }

    /* continue-writing CTA */
    .continue-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
      box-shadow: var(--shadow-sm);
    }
    .continue-card .continue-info h3 {
      margin: 0 0 2px;
      font: 700 0.95rem "Segoe UI", Arial, sans-serif;
      color: var(--heading-ink);
    }
    .continue-card .continue-info .mini { color: var(--muted); }
    .continue-card .continue-btn {
      background: var(--accent);
      color: var(--accent-ink);
      font-weight: 700;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* editor empty state */
    .editor-empty {
      display: grid;
      gap: 10px;
      padding: 28px 20px;
      border-radius: 18px;
      border: 1px dashed var(--border-soft);
      background: var(--surface-3);
      text-align: center;
    }
    .editor-empty .empty-icon { font-size: 2rem; }
    .editor-empty .empty-title { font: 700 1rem "Segoe UI", Arial, sans-serif; color: var(--heading-ink); }
    .editor-empty .mini { color: var(--muted); }

    /* find-in-project */
    .find-results { display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
    .find-hit {
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      transition: background 0.12s;
    }
    .find-hit:hover { background: var(--surface-3); }
    .find-hit .find-label { font: 700 0.88rem "Segoe UI", Arial, sans-serif; color: var(--accent); }
    .find-hit .find-snippet { font: 0.88rem "Segoe UI", Arial, sans-serif; color: var(--muted); margin-top: 4px; line-height: 1.5; }
    .find-hit mark { background: color-mix(in srgb, var(--accent3) 25%, transparent); color: var(--ink); border-radius: 3px; padding: 0 2px; }

    /* print */
    @media print {
      .hero, .toolbar, .sidebar, .tabs, .workspace-guide, .panel:first-child, .panel:last-child { display: none !important; }
      .layout { display: block !important; }
      .workspace { box-shadow: none; border: none; }
      body { background: white; color: #111; }
      .book-preview { max-height: none; box-shadow: none; border: none; background: white; }
    }

    /* milestone ceremony */
    .milestone-overlay {
      position: fixed; inset: 0; z-index: 9999;
      display: grid; place-items: center;
      background: rgba(10, 12, 20, 0.72);
      backdrop-filter: blur(6px);
      animation: fadeIn 0.25s ease;
    }
    .milestone-card {
      position: relative;
      max-width: 480px; width: calc(100% - 32px);
      padding: 36px 28px 28px;
      border-radius: 24px;
      text-align: center;
      background: linear-gradient(160deg, var(--surface), var(--surface-2));
      border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
      box-shadow: var(--shadow);
    }
    .milestone-card h2 { margin: 0 0 6px; color: var(--heading-ink); }
    .milestone-quote {
      margin: 14px 0;
      padding: 12px 16px;
      border-left: 3px solid var(--accent);
      font-style: italic;
      color: var(--muted);
      background: var(--surface-3);
      border-radius: 10px;
      text-align: left;
    }
    .milestone-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 24px; }
    .milestone-confetti span {
      position: absolute; top: -12px; width: 8px; height: 12px;
      animation: confetti-fall linear forwards;
    }
    @keyframes confetti-fall { to { transform: translateY(520px) rotate(540deg); opacity: 0; } }

    /* sensory deprivation mode
       A full-screen takeover with a committed candlelit look, so its palette is
       scoped to the stage rather than following the app's light/dark theme.
       The CSP blocks remote font hosts, so the display faces map to system
       stacks instead of Cinzel / EB Garamond / IBM Plex Sans. */
    body.sensory-active .shell { display: none !important; }
    body.sensory-active::after { content: none; }
    body.sensory-active { overflow: hidden; }
    .sensory-stage {
      --sd-bg: #0E3532;
      --sd-panel: #144C46;
      --sd-secondary: #195751;
      --sd-border: #2F6A63;
      --sd-ink: #F1E8DE;
      --sd-ink-soft: #C9D5D3;
      --sd-ink-mute: #8FA4A0;
      --sd-gold: #D8A73D;
      --sd-gold-soft: #B8923A;
      --sd-gold-olive: #8D8245;
      --sd-coral: #FF6F6A;
      --sd-serif: Georgia, "Times New Roman", serif;
      --sd-sans: "Segoe UI", Arial, sans-serif;
      --sd-type: clamp(1.15rem, 2.3vw, 1.68rem);
      --sd-leading: 2.05;
      position: fixed; inset: 0; z-index: 9990;
      display: grid; grid-template-rows: auto 1fr;
      overflow: hidden;
      background-color: var(--sd-bg);
      background-image:
        radial-gradient(ellipse at 50% 30%, rgba(35, 110, 104, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(216, 167, 61, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 15% 85%, rgba(83, 215, 200, 0.05) 0%, transparent 45%);
      color: var(--sd-ink);
      font-family: var(--sd-sans);
    }
    .sensory-candle {
      position: absolute; top: 35%; left: 50%; transform: translateX(-50%);
      width: min(900px, 120vw); height: 700px; pointer-events: none; z-index: 1;
      background: radial-gradient(ellipse, rgba(216, 167, 61, 0.11) 0%, rgba(216, 167, 61, 0.04) 35%, transparent 65%);
      filter: blur(20px);
      animation: sensory-candle-flicker 7s ease-in-out infinite;
    }
    @keyframes sensory-candle-flicker {
      0%, 100% { opacity: 0.9; transform: translateX(-50%) scale(1); }
      20% { opacity: 1; transform: translateX(-49%) scale(1.03); }
      40% { opacity: 0.75; transform: translateX(-51%) scale(0.98); }
      60% { opacity: 0.95; transform: translateX(-50%) scale(1.01); }
      80% { opacity: 0.85; transform: translateX(-48%) scale(1.02); }
    }
    .sensory-dust { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
    .sensory-mote {
      position: absolute; bottom: -10px; border-radius: 50%;
      background: var(--sd-gold); box-shadow: 0 0 6px rgba(216, 167, 61, 0.6);
      animation: sensory-float-dust linear infinite;
    }
    @keyframes sensory-float-dust {
      0% { transform: translate(0, 0); opacity: 0; }
      10%, 90% { opacity: var(--sd-mote-opacity, 0.6); }
      100% { transform: translate(var(--sd-drift, 30px), -110vh); opacity: 0; }
    }
    .sensory-vignette {
      position: absolute; inset: 0; pointer-events: none; z-index: 4;
      background: radial-gradient(ellipse at center, transparent 30%, rgba(14, 53, 50, 0.75) 80%, rgba(14, 53, 50, 0.95) 100%);
    }

    .sensory-top {
      position: relative; z-index: 20;
      display: flex; align-items: center; justify-content: space-between; gap: 24px;
      padding: 18px clamp(16px, 3vw, 44px);
      border-bottom: 1px solid var(--sd-border);
      background: rgba(14, 53, 50, 0.75);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    }
    .sensory-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .sensory-brand-mark {
      position: relative; flex: none; width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center; color: var(--sd-gold);
    }
    .sensory-brand-mark::before,
    .sensory-brand-mark::after { content: ""; position: absolute; transform: rotate(45deg); }
    .sensory-brand-mark::before { inset: 0; border: 1px solid var(--sd-gold-olive); }
    .sensory-brand-mark::after { inset: 6px; border: 1px solid var(--sd-gold); opacity: 0.7; }
    .sensory-brand-mark svg { position: relative; z-index: 2; }
    .sensory-brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .sensory-brand-name {
      font-family: var(--sd-serif); font-size: 1rem; font-weight: 600;
      letter-spacing: 0.2em; color: var(--sd-gold); line-height: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sensory-brand-sub {
      font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--sd-ink-soft); line-height: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sensory-mode {
      position: relative; display: flex; align-items: center; gap: 12px;
      padding: 10px 22px; border: 1px solid var(--sd-gold-olive);
      background: linear-gradient(180deg, rgba(216, 167, 61, 0.07), rgba(216, 167, 61, 0.02));
    }
    .sensory-mode::before, .sensory-mode::after {
      content: ""; position: absolute; width: 6px; height: 6px;
      border: 1px solid var(--sd-gold); background: var(--sd-bg);
    }
    .sensory-mode::before { top: -3px; left: -3px; }
    .sensory-mode::after { bottom: -3px; right: -3px; }
    .sensory-mode-dot {
      width: 8px; height: 8px; border-radius: 50%; background: var(--sd-gold);
      box-shadow: 0 0 14px var(--sd-gold); animation: sensory-dot-pulse 2.8s ease-in-out infinite;
    }
    @keyframes sensory-dot-pulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 14px var(--sd-gold); }
      50% { opacity: 0.4; box-shadow: 0 0 5px var(--sd-gold); }
    }
    .sensory-mode-label {
      font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--sd-gold-soft); line-height: 1; margin-bottom: 5px;
    }
    .sensory-mode-name { font-family: var(--sd-serif); font-style: italic; font-size: 1rem; line-height: 1; }
    .sensory-actions { display: flex; align-items: center; gap: 22px; }
    .sensory-stats { display: flex; align-items: center; gap: 20px; }
    .sensory-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .sensory-stat b {
      font-family: var(--sd-serif); font-size: 1.3rem; font-weight: 600;
      color: var(--sd-gold); line-height: 1; font-variant-numeric: tabular-nums;
    }
    .sensory-stat span {
      font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase;
      color: var(--sd-ink-soft); line-height: 1;
    }
    .sensory-rule { width: 1px; height: 32px; background: var(--sd-border); }
    .sensory-exit {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 20px; background: transparent; border: 1px solid var(--sd-border);
      color: var(--sd-ink-soft); font-family: var(--sd-sans); font-size: 0.68rem;
      letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 0.3s;
    }
    .sensory-exit:hover { border-color: var(--sd-coral); color: var(--sd-coral); background: rgba(255, 111, 106, 0.05); }
    .sensory-exit kbd {
      padding: 2px 7px; border: 1px solid currentColor; font: inherit;
      font-size: 0.56rem; opacity: 0.7; letter-spacing: 0.1em;
    }

    .sensory-scroll { position: relative; z-index: 5; overflow-y: auto; overflow-x: hidden; }
    .sensory-body { display: flex; justify-content: center; padding: clamp(36px, 7vh, 80px) clamp(16px, 5vw, 40px) 140px; }
    .sensory-paper { position: relative; width: 100%; max-width: 720px; }
    .sensory-ornament {
      display: flex; align-items: center; justify-content: center; gap: 18px;
      margin-bottom: clamp(28px, 5vh, 56px); color: var(--sd-gold); opacity: 0.8;
    }
    .sensory-ornament i {
      flex: 0 0 90px; height: 1px;
      background: linear-gradient(to right, transparent, var(--sd-gold-olive), transparent);
    }
    /* The rendered layer shows blurred/sharp sentences; a transparent textarea
       sits exactly on top so typing keeps native undo, IME, and autocorrect. */
    .sensory-editor { position: relative; }
    .sensory-editor::before {
      content: ""; position: absolute; inset: -50px; pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse, rgba(216, 167, 61, 0.06) 0%, transparent 70%);
    }
    .sensory-render, .sensory-draft {
      font-family: var(--sd-serif);
      font-size: var(--sd-type);
      line-height: var(--sd-leading);
      letter-spacing: 0.005em;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      word-break: break-word;
      margin: 0; padding: 0; border: 0;
      text-align: left;
    }
    .sensory-render { position: relative; z-index: 1; min-height: 46vh; color: var(--sd-ink); }
    .sensory-draft {
      position: absolute; inset: 0; z-index: 2;
      width: 100%; height: 100%;
      background: transparent; color: transparent;
      caret-color: var(--sd-gold);
      resize: none; outline: none; overflow: hidden;
    }
    .sensory-draft::placeholder { color: var(--sd-ink-mute); opacity: 0.55; font-style: italic; }
    .sensory-draft::selection { background: rgba(216, 167, 61, 0.25); }
    .sensory-sentence {
      display: inline;
      transition: filter 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), color 0.75s ease, text-shadow 0.75s ease;
    }
    .sensory-sentence.is-dim { filter: blur(7px); opacity: 0.26; color: var(--sd-ink-soft); }
    .sensory-sentence.is-live {
      filter: blur(0); opacity: 1; color: var(--sd-ink);
      text-shadow: 0 0 28px rgba(216, 167, 61, 0.18), 0 0 60px rgba(216, 167, 61, 0.08);
    }

    .sensory-hint {
      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
      z-index: 15; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px);
      padding: 12px 26px; background: rgba(20, 76, 70, 0.9); border: 1px solid var(--sd-border);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sd-ink-soft);
    }
    .sensory-hint em {
      color: var(--sd-gold); font-family: var(--sd-serif); font-style: italic;
      text-transform: none; letter-spacing: 0; font-size: 0.86rem;
    }
    .sensory-hint i { width: 4px; height: 4px; border-radius: 50%; background: var(--sd-gold-olive); opacity: 0.7; }
    .sensory-hint kbd {
      padding: 2px 8px; background: var(--sd-secondary); border: 1px solid var(--sd-border);
      color: var(--sd-gold); font: inherit; font-size: 0.6rem; letter-spacing: 0.1em;
    }
    .sensory-session {
      position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
      z-index: 15; display: flex; flex-direction: column; gap: 26px;
      opacity: 0.4; transition: opacity 0.5s;
    }
    .sensory-session:hover, .sensory-session:focus-within { opacity: 1; }
    .sensory-session div { position: relative; min-width: 96px; padding-right: 16px; text-align: right; border-right: 1px solid var(--sd-border); }
    .sensory-session div::after { content: ""; position: absolute; right: -1px; top: 0; width: 1px; height: 12px; background: var(--sd-gold); }
    .sensory-session b { display: block; font-family: var(--sd-serif); font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 500; }
    .sensory-session span { display: block; margin-top: 7px; font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sd-ink-soft); }
    .sensory-ember {
      position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
      z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 12px;
      opacity: 0.45; transition: opacity 0.5s;
    }
    .sensory-ember:hover { opacity: 1; }
    .sensory-ember span { font-size: 0.56rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--sd-ink-soft); writing-mode: vertical-rl; transform: rotate(180deg); }
    .sensory-ember-bar { position: relative; width: 2px; height: 140px; overflow: hidden; background: var(--sd-secondary); border: 1px solid var(--sd-border); }
    .sensory-ember-fill {
      position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
      background: linear-gradient(to top, var(--sd-gold-olive) 0%, var(--sd-gold) 70%, #F1E8DE 100%);
      box-shadow: 0 0 8px rgba(216, 167, 61, 0.5);
      transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sensory-ember-glow { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--sd-gold) 0%, transparent 70%); opacity: 0.4; animation: sensory-ember-pulse 3s ease-in-out infinite; }
    @keyframes sensory-ember-pulse {
      0%, 100% { opacity: 0.3; transform: scale(0.9); }
      50% { opacity: 0.6; transform: scale(1.1); }
    }

    .sensory-intro {
      position: absolute; inset: 0; z-index: 100; cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 24px; padding: 40px; text-align: center;
      background: radial-gradient(ellipse at center, var(--sd-panel) 0%, var(--sd-bg) 80%);
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    .sensory-intro.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
    .sensory-intro-mark {
      position: relative; width: 60px; height: 60px; border: 1px solid var(--sd-gold);
      transform: rotate(45deg); display: flex; align-items: center; justify-content: center;
      animation: sensory-intro-pulse 2.2s ease infinite;
    }
    @keyframes sensory-intro-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(216, 167, 61, 0.4); }
      50% { box-shadow: 0 0 0 24px rgba(216, 167, 61, 0); }
    }
    .sensory-intro-mark::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--sd-gold-olive); }
    .sensory-intro-mark::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sd-gold); box-shadow: 0 0 12px var(--sd-gold); }
    .sensory-intro h2 { margin: 0; font-family: var(--sd-serif); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: 0.3em; color: var(--sd-gold); }
    .sensory-intro p { margin: 0; max-width: 520px; font-family: var(--sd-serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.7; color: var(--sd-ink-soft); }
    .sensory-intro small { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--sd-ink-soft); animation: sensory-hint-blink 1.8s ease infinite; }
    @keyframes sensory-hint-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

    @media (max-width: 980px) {
      .sensory-session, .sensory-ember { display: none; }
      .sensory-top { flex-wrap: wrap; gap: 14px; }
      .sensory-brand-sub { display: none; }
    }
    @media (max-width: 600px) {
      .sensory-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        padding: 14px 16px;
      }
      .sensory-brand { min-width: 0; }
      .sensory-brand-mark { width: 34px; height: 34px; }
      .sensory-brand-mark svg { width: 19px; height: 19px; }
      .sensory-brand-name { font-size: 0.82rem; letter-spacing: 0.14em; }
      .sensory-mode { padding: 8px 11px; gap: 8px; }
      .sensory-mode-dot { width: 7px; height: 7px; }
      .sensory-mode-label { font-size: 0.5rem; margin-bottom: 4px; }
      .sensory-mode-name { font-size: 0.82rem; }
      .sensory-actions {
        grid-column: 1 / -1;
        justify-content: space-between;
        width: 100%;
        gap: 14px;
      }
      .sensory-stats { gap: 14px; }
      .sensory-stat b { font-size: 1.1rem; }
      .sensory-rule, .sensory-exit kbd { display: none; }
      .sensory-body { padding: 30px 18px 118px; }
      .sensory-ornament { margin-bottom: 30px; }
      .sensory-ornament i { flex-basis: 52px; }
      .sensory-render, .sensory-draft {
        font-size: 1.18rem;
        line-height: 1.9;
      }
      .sensory-hint {
        width: calc(100vw - 24px);
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 9px 12px;
        font-size: 0.52rem;
        line-height: 1.35;
      }
      .sensory-hint em { flex: 1 0 100%; text-align: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .sensory-stage *, .sensory-stage *::before, .sensory-stage *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.2s !important;
      }
      .sensory-mote { display: none; }
      .sensory-candle { animation: none; }
    }

    /* vault darling suggestion */
    .darling-item {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 12px; padding: 10px 12px;
    }
    .darling-item .darling-meta { font: 0.8rem "Segoe UI", sans-serif; color: var(--muted); }
    .darling-item .darling-text { margin: 6px 0; white-space: pre-wrap; color: var(--ink); }
    .darling-item .row-gap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

    @media (min-width:761px) {
    /* Chronicle Loom studio redesign */
    :root {
      --bg: #edf2ef; --bg2: #dce7e2; --panel: rgba(255,255,255,.88); --panel-strong: #fff;
      --ink: #15252a; --muted: #607277; --accent: #0f766e; --accent2: #7659a4; --accent3: #d59a32;
      --danger: #c9514d; --surface: #f8fbf9; --surface-2: #e9f1ed; --surface-3: rgba(255,255,255,.74);
      --field-bg: #f8fbfa; --field-ink: #15252a; --border: rgba(133,166,157,.48); --border-soft: rgba(133,166,157,.28);
      --heading-ink: #17383b; --subtle-ink: #3e565b; --chip-bg: #e0eee9; --chip-ink: #28585a;
      --accent-ink: #f5fffb; --nav-bg: linear-gradient(180deg,rgba(255,255,255,.86),rgba(232,241,237,.96));
      --shadow: 0 24px 64px rgba(12,45,49,.12); --shadow-sm: 0 12px 28px rgba(12,45,49,.08); --radius: 18px; --radius-sm: 11px;
    }
    [data-theme="dark"] {
      --bg: #081318; --bg2: #0e1d23; --panel: rgba(14,31,37,.94); --panel-strong: #132a31;
      --ink: #ebf1ec; --muted: #91a6a5; --accent: #39d0bd; --accent2: #a994df; --accent3: #e2ad45;
      --danger: #ff7772; --surface: #13272e; --surface-2: #0f2027; --surface-3: rgba(28,52,59,.84);
      --field-bg: #0b1a21; --field-ink: #ebf1ec; --border: rgba(82,126,126,.42); --border-soft: rgba(82,126,126,.24);
      --heading-ink: #f4f1e8; --subtle-ink: #c0cfca; --chip-bg: #1a353c; --chip-ink: #c7e2dc;
      --accent-ink: #061713; --nav-bg: linear-gradient(180deg,rgba(19,42,49,.96),rgba(9,24,29,.98));
      --shadow: 0 28px 72px rgba(0,0,0,.34); --shadow-sm: 0 14px 32px rgba(0,0,0,.22);
    }
    html, body { overflow-x: hidden; }
    body { font-family: "Segoe UI", Inter, Arial, sans-serif; letter-spacing: .005em; background: radial-gradient(circle at 8% 0%, color-mix(in srgb,var(--accent) 14%,transparent),transparent 34%), radial-gradient(circle at 100% 10%, color-mix(in srgb,var(--accent2) 10%,transparent),transparent 28%), linear-gradient(180deg,var(--bg),var(--bg2)); }
    h1,h2,h3,h4,.story-title,.book-preview,.fray-display-title { font-family: Georgia,"Times New Roman",serif; }
    button,input,textarea,select { border-radius: 11px; }
    button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline-color: color-mix(in srgb,var(--accent) 72%,white); }
    .shell { max-width: 1680px; padding: 22px; gap: 16px; }
    .hero { min-height: 224px; display: grid; align-items: center; border-radius: 24px; border: 1px solid rgba(166,211,198,.16); padding: 28px 30px; background: linear-gradient(120deg,#102a31 0%,#124b4b 58%,#176263 100%); box-shadow: 0 28px 70px rgba(4,25,29,.22); }
    .hero::before { width: 420px; height: 420px; right: -140px; top: -190px; opacity: .23; }
    .hero::after { width: 250px; height: 250px; left: 28%; bottom: -190px; opacity: .18; }
    .site-title-row { gap: 16px; align-items: center; }
    .site-logo { width: 90px; height: 90px; object-fit: cover; object-position: 50% 20%; border-radius: 14px; border: 0; box-shadow: none; mix-blend-mode: normal; background: #0f3a3a; }
    .hero .eyebrow { color: var(--accent3); font-weight: 700; }
    .hero h1 { font-size: clamp(2.4rem,5vw,4.7rem); letter-spacing: -.055em; text-wrap: balance; }
    .hero p { max-width: 60ch; font-size: .98rem; }
    .hero-actions { min-width: 360px; position: relative; z-index: 1; }
    .btn-primary { background: var(--accent3); color: #20170b; box-shadow: 0 8px 20px rgba(226,173,69,.16); }
    .btn-secondary { background: rgba(9,28,34,.48); color: #eef5f0; border-color: rgba(196,224,215,.16); }
    .toolbar { padding: 12px; border-radius: 16px; box-shadow: var(--shadow-sm); backdrop-filter: blur(18px); }
    .toolbar .community-links { display: none; }
    .toolbar .btn-soft,.toolbar .btn-danger { min-height: 42px; }
    .layout { grid-template-columns: 208px minmax(0,1fr) 292px; gap: 18px; }
    .layout > .panel { background: color-mix(in srgb,var(--panel) 92%,transparent); }
    .panel { border-radius: 18px; box-shadow: var(--shadow); }
    .panel-head { padding: 16px 18px; }
    .panel-head h2,.panel-head h3 { font-size: .72rem; letter-spacing: .2em; }
    .panel-body { padding: 16px; }
    #mobile-projects-panel,#mobile-stats-panel { align-self: start; position: sticky; top: 18px; }
    #mobile-projects-panel .panel-head,#mobile-stats-panel .panel-head { background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,transparent),transparent); }
    .project-card { min-height: 166px; display: grid; align-content: start; gap: 8px; }
    .project-card .chip-row { margin-top: auto; }
    .workspace { grid-template-columns: 214px minmax(0,1fr); gap: 0; background: color-mix(in srgb,var(--panel) 92%,transparent); }
    .workspace > .panel-head { grid-column: 1/-1; padding: 18px 20px; background: transparent; }
    .workspace > .sidebar { grid-column: 1; grid-row: 2/span 2; align-self: stretch; position: sticky; top: 18px; max-height: calc(100vh - 170px); padding: 16px 12px 22px; border: 0; border-right: 1px solid var(--border-soft); border-radius: 0; background: transparent; box-shadow: none; }
    .workspace > .tabs,.workspace > .workspace-guide,.workspace > .tab { grid-column: 2; }
    .workspace > .tab { padding: 18px 20px 24px; }
    #outline-tab.active {
      grid-template-columns: minmax(240px, 0.92fr) minmax(300px, 1.08fr);
      align-items: start;
    }
    #outline-tab.active > .continue-card {
      grid-column: 1 / -1;
    }
    #outline-tab.active > .outline-grid-primary {
      grid-column: 1;
      grid-template-columns: 1fr;
    }
    #outline-tab.active > .outline-grid-editors {
      grid-column: 2;
      grid-template-columns: 1fr;
      align-self: start;
      position: sticky;
      top: 18px;
    }
    .workspace > .sidebar .sidebar-btn { padding: .72rem .78rem; }
    .workspace > .sidebar .sidebar-group-label { padding-top: 16px; }
    .sidebar-btn.active { position: relative; box-shadow: 0 8px 16px color-mix(in srgb,var(--accent) 22%,transparent); }
    .sidebar-btn.active::after { content:""; position:absolute; right:9px; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.8; }
    .card,.project-card,.list-card,.chapter-item,.scene-item,.catalog-item,.goal-item { border-radius: 14px; }
    .card { background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),var(--surface-2)); }
    input,textarea,select { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
    }

    /* Compact desktop band: preserve the desktop workspace at laptop and
       1280px widths without letting the editor's two-column minimum overflow
       the center rail. Mobile remains governed exclusively by max-width rules.
    */
    @media (min-width: 761px) and (max-width: 1360px) {
      .shell { padding: 16px; }
      .hero {
        min-height: 174px;
        padding: 20px 22px;
      }
      .site-title-row { gap: 12px; }
      .site-logo {
        width: 68px;
        height: 68px;
        border-radius: 11px;
      }
      .hero h1 {
        font-size: clamp(2.05rem, 4vw, 3.25rem);
      }
      .hero p {
        max-width: 54ch;
        font-size: 0.9rem;
        line-height: 1.45;
      }
      .hero-actions {
        min-width: 300px;
        gap: 7px;
      }
      .hero-action-row { gap: 7px; }
      .hero-actions button { padding: 0.62rem 0.78rem; }
      .workspace > .panel-head .chip-row { min-width: 0; }
      .editor-save-state { min-height: 34px; }
      .toolbar {
        grid-template-columns: minmax(0, 1fr) repeat(4, auto);
        gap: 8px;
        padding: 10px;
      }
      .toolbar button {
        width: auto;
        min-height: 40px;
        padding: 0.58rem 0.72rem;
        white-space: nowrap;
      }
      .layout {
        grid-template-columns: 188px minmax(0, 1fr) 252px;
        gap: 14px;
      }
      .workspace {
        grid-template-columns: minmax(0, 1fr);
      }
      .workspace > .sidebar { display: none; }
      .workspace > .panel-head,
      .workspace > .tabs,
      .workspace > .workspace-guide,
      .workspace > .tab { grid-column: 1; }
      .workspace > .tabs {
        min-width: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
      }
      .workspace > .tabs .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
      }
      #outline-tab.active {
        grid-template-columns: minmax(0, 1fr);
      }
      #outline-tab.active > .outline-grid-primary,
      #outline-tab.active > .outline-grid-editors {
        grid-column: 1;
      }
      #outline-tab.active > .outline-grid-editors {
        position: static;
      }
      #unraveled-tab.active {
        width: 100%;
        justify-items: stretch;
      }
      #unraveled-tab.active > #fray-shell {
        width: 100%;
        max-width: none;
        justify-self: stretch;
      }
      .continue-card,
      .continue-card .continue-info {
        min-width: 0;
      }
      .continue-card .continue-info h3,
      .continue-card .continue-info .mini {
        overflow-wrap: anywhere;
      }
      .fray-display-title {
        font-size: clamp(3rem, 7vw, 4.8rem);
        overflow-wrap: anywhere;
      }
      #braided-setup-view .fray-display-title {
        font-size: clamp(2.1rem, 5.6vw, 3.6rem);
      }
      .fray-view { padding-left: 22px; padding-right: 22px; }
    }

    #mobile-redesign-frame { display: none; }
    #mobile-redesign-return,
    #mobile-redesign-direct-link,
    #mobile-redesign-feature-title,
    #mobile-redesign-feature-nav { display: none; }
    @media (max-width: 760px) {
      html, body { min-width: 0; overflow-x: hidden; }
      body { padding: 0 !important; background: #071e1e !important; }
      body > .shell { display: none !important; }
      body.mobile-legacy-open > .shell {
        display: block !important;
        width: 100% !important;
        max-width: 430px !important;
        min-height: 100dvh;
        padding: 122px 14px 116px !important;
        background: linear-gradient(180deg, #082f2e 0, #0b3431 18rem, #f5ecdd 42rem) !important;
      }
      body.mobile-legacy-open #mobile-redesign-frame { display: none !important; }
      body.mobile-legacy-open #mobile-redesign-return {
        display: inline-flex;
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        left: 12px;
        z-index: 100002;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid rgba(231, 191, 79, .45);
        border-radius: 999px;
        background: rgba(7, 30, 30, .94);
        color: #fff7e7;
        font: 700 14px/1 system-ui, sans-serif;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
        backdrop-filter: blur(16px);
      }
      body.mobile-legacy-open #mobile-redesign-feature-title {
        display: block;
        position: fixed;
        top: max(68px, calc(env(safe-area-inset-top) + 56px));
        left: 20px;
        z-index: 100001;
        max-width: calc(100vw - 40px);
        overflow: hidden;
        color: #fff7e7;
        font: 700 22px/32px Georgia, serif;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: none;
      }
      body.mobile-legacy-open #mobile-redesign-direct-link {
        display: inline-flex;
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        z-index: 100002;
        min-height: 44px;
        align-items: center;
        padding: 0 14px;
        border: 1px solid rgba(231, 191, 79, .45);
        border-radius: 999px;
        background: rgba(7, 30, 30, .94);
        color: #fff7e7;
        font: 700 12px/1 system-ui, sans-serif;
        text-decoration: none;
      }
      body.mobile-legacy-open .mobile-topbar,
      body.mobile-legacy-open .hero,
      body.mobile-legacy-open .toolbar,
      body.mobile-legacy-open #mobile-projects-panel,
      body.mobile-legacy-open #mobile-stats-panel,
      body.mobile-legacy-open #mobile-workspace-panel > .panel-head,
      body.mobile-legacy-open #mobile-workspace-panel > .sidebar,
      body.mobile-legacy-open #mobile-workspace-panel > .tabs,
      body.mobile-legacy-open #mobile-workspace-panel > .workspace-guide,
      body.mobile-legacy-open .mobile-shell-nav,
      body.mobile-legacy-open #mobile-shell-nav,
      body.mobile-legacy-open .mobile-draft-bar {
        display: none !important;
      }
      body.mobile-legacy-open .layout { display: block !important; }
      body.mobile-legacy-open #mobile-workspace-panel {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }
      body.mobile-legacy-open.mobile-feature-stats #mobile-workspace-panel { display: none !important; }
      body.mobile-legacy-open.mobile-feature-stats #mobile-stats-panel {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 18px !important;
        border-radius: 22px !important;
        background: #fff9ef !important;
        color: #29251f !important;
        box-shadow: 0 18px 38px rgba(24, 19, 13, .18) !important;
      }
      body.mobile-legacy-open #mobile-workspace-panel > .tab {
        width: 100%;
        padding: 0 !important;
      }
      body.mobile-legacy-open #mobile-workspace-panel > .tab:not(.mobile-live-selected) { display: none !important; }
      body.mobile-legacy-open #mobile-workspace-panel > .tab.mobile-live-selected { display: block !important; }
      body.mobile-legacy-open #mobile-workspace-panel:not(:has(> .tab.mobile-live-selected)) > .tab.active { display: block !important; }
      body.mobile-legacy-open #mobile-redesign-feature-nav {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: 10px;
        z-index: 100003;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        max-width: 410px;
        margin: auto;
        padding: 8px 6px;
        border: 1px solid rgba(109, 92, 70, .18);
        border-radius: 22px;
        background: rgba(250, 242, 229, .96);
        box-shadow: 0 16px 38px rgba(24, 19, 13, .24);
        backdrop-filter: blur(18px);
      }
      #mobile-redesign-feature-nav button {
        min-width: 0;
        min-height: 54px;
        padding: 5px 2px;
        border: 0;
        border-radius: 15px;
        background: transparent;
        color: #5d574e;
        font: 800 10px/1.15 system-ui, sans-serif;
      }
      #mobile-redesign-feature-nav button span {
        display: block;
        margin-bottom: 4px;
        font-size: 19px;
      }
      #mobile-redesign-feature-nav button.active {
        background: #d95516;
        color: white;
        box-shadow: 0 8px 18px rgba(217, 85, 22, .28);
      }
      #mobile-redesign-frame {
        display: block;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        z-index: 99999;
        background: #071e1e;
      }
      html:not([data-theme="dark"]) body.mobile-legacy-open {
        background: #f5ecdd !important;
      }
      html:not([data-theme="dark"]) body.mobile-legacy-open > .shell {
        background: #f5ecdd !important;
      }
      html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-redesign-return {
        border-color: #cbbda9;
        background: #fffaf2;
        color: #2b241d;
        box-shadow: 0 4px 12px rgba(44, 35, 25, .12);
      }
      html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-redesign-feature-title {
        color: #2b241d;
      }
      html:not([data-theme="dark"]) #mobile-redesign-frame {
        background: #f5ecdd;
      }
    }

@media (max-width: 760px) {
  html:not([data-theme="dark"]) body.mobile-legacy-open > .shell { background: linear-gradient(180deg, #082f31 0, #0b3435 18rem, #071f22 42rem) !important; color: #f5ecdd !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .card,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .panel,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .workspace-section { background: #0d2b2e !important; border-color: #245357 !important; color: #f5ecdd !important; box-shadow: none !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel input,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel textarea,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel select { background: #071f22 !important; border-color: #245357 !important; color: #f5ecdd !important; caret-color: #48d2c1 !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .section-title,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .empty-title,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .field > span,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .list strong,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .list b { color: #f5ecdd !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .mini,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .list small,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .list p,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .editor-empty p { color: #a8cfcd !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel #chapter-list,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel #scene-list,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .list { background: #123a3d !important; border-color: #245357 !important; color: #f5ecdd !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-redesign-feature-nav { background: rgba(7,31,34,.97) !important; border-color: #245357 !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-redesign-feature-nav button.active { background: #48d2c1 !important; color: #071f22 !important; box-shadow: none !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .list-card,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .scene-item,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .scene-pill,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .catalog-item { background: #123a3d !important; border-color: #245357 !important; color: #f5ecdd !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .list-card h4,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .scene-pill strong,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .scene-item h4,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .catalog-item h4 { color: #f5ecdd !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .list-card .meta,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .scene-pill .meta,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .scene-item .meta,
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .empty { color: #a8cfcd !important; }
  html:not([data-theme="dark"]) body.mobile-legacy-open #mobile-workspace-panel .scene-ordered > .empty {
    background: #123a3d !important;
    border-color: #245357 !important;
    color: #d6ebe7 !important;
  }
}