:root {
      --bg: #14110d;
      --bg-deep: #0e0c09;
      --panel: #262018;
      --panel-raised: #2e261e;
      --panel-inset: #1c1712;
      --text: #ebe2d4;
      --text-soft: #d4c8b8;
      --muted: #9a8b76;
      --accent: #d4a96a;
      --accent-dim: #a88452;
      --pick: #3d5c48;
      --pick-bright: #4d7a5c;
      --core: #8b7ab8;
      --era: #dbb45e;
      --warn: #c07058;
      --border: rgba(90, 78, 62, 0.55);
      --border-strong: rgba(122, 106, 84, 0.7);
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
      --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.42);
      --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
      --font: "Georgia", "Songti SC", "STSong", "SimSun", serif;
      --sans: system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    body[data-era-max="1"] { --era-glow: rgba(212, 140, 72, 0.22); }
    body[data-era-max="2"] { --era-glow: rgba(120, 160, 193, 0.2); }
    body[data-era-max="3"] { --era-glow: rgba(118, 176, 118, 0.2); }
    body[data-era-max="4"] { --era-glow: rgba(181, 118, 118, 0.18); }
    body[data-era-max="5"] { --era-glow: rgba(219, 200, 100, 0.2); }
    body[data-era-max="6"] { --era-glow: rgba(160, 140, 210, 0.2); }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: var(--font);
      line-height: 1.6;
      background-color: var(--bg-deep);
      background-image:
        radial-gradient(ellipse 90% 55% at 18% -8%, var(--era-glow, rgba(90, 80, 60, 0.14)) 0%, transparent 52%),
        radial-gradient(ellipse 70% 45% at 88% 12%, rgba(107, 90, 143, 0.08) 0%, transparent 48%),
        radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 55%),
        linear-gradient(175deg, #221c15 0%, var(--bg) 42%, var(--bg-deep) 100%);
      background-attachment: fixed;
      transition: background-image 0.8s var(--ease);
      -webkit-font-smoothing: antialiased;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.35;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
      background-size: 180px 180px;
      mix-blend-mode: overlay;
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.35);
    }
    .wrap {
      position: relative;
      z-index: 1;
      max-width: 1240px;
      margin: 0 auto;
      padding: 1.75rem 1.35rem 4.5rem;
    }
    .app-header {
      margin-bottom: 1rem;
    }
    .layout-main {
      display: grid;
      grid-template-columns: minmax(288px, 1fr) minmax(340px, 1.08fr);
      gap: 1.5rem;
      align-items: start;
    }
    @media (max-width: 880px) {
      .layout-main {
        grid-template-columns: 1fr;
      }
      .col-world {
        order: 2;
      }
      .col-controls {
        order: 1;
      }
    }
    .col-controls .panel:last-child {
      margin-bottom: 0;
    }
    .col-world {
      position: sticky;
      top: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
    }
    .col-world .panel {
      margin-bottom: 0;
    }
    /** 玩法上不展示：文明树、禁忌结局、不可逆路线横幅等 */
    .designer-only {
      display: none !important;
    }
    h1 {
      font-weight: 400;
      letter-spacing: 0.18em;
      font-size: 1.5rem;
      margin: 0;
      background: linear-gradient(120deg, #f0ddb8 0%, var(--accent) 45%, var(--accent-dim) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 40px rgba(212, 169, 106, 0.15);
    }
    .tag {
      font-family: var(--sans);
      font-size: 0.75rem;
      color: var(--muted);
      margin-bottom: 1.25rem;
    }
    .panel {
      background: linear-gradient(168deg, var(--panel-raised) 0%, var(--panel) 48%, var(--panel-inset) 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 1.2rem 1.3rem;
      margin-bottom: 1rem;
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 235, 200, 0.04);
      transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
    }
    .panel:hover {
      border-color: var(--border-strong);
    }
    .panel h2 {
      margin: 0 0 0.65rem;
      font-size: 0.94rem;
      font-weight: 600;
      color: var(--accent);
      letter-spacing: 0.08em;
      font-family: var(--sans);
    }
    .hint {
      font-family: var(--sans);
      font-size: 0.8rem;
      color: var(--muted);
      margin: 0 0 0.75rem;
    }
    .banner-warn {
      display: none;
      font-family: var(--sans);
      font-size: 0.82rem;
      color: #f0d4cf;
      background: rgba(192, 112, 88, 0.18);
      border: 1px solid rgba(192, 112, 88, 0.45);
      border-radius: 6px;
      padding: 0.55rem 0.75rem;
      margin-bottom: 1rem;
    }
    .banner-warn.on { display: block; }
    .sim-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.65rem;
      font-family: var(--sans);
      font-size: 0.82rem;
    }
    @media (max-width: 640px) { .sim-grid { grid-template-columns: 1fr; } }
    .sim-card {
      background: linear-gradient(160deg, rgba(255, 240, 210, 0.03) 0%, var(--panel-inset) 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0.7rem 0.8rem;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 235, 200, 0.03);
      transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
    }
    .sim-card:hover {
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }
    .sim-card .lbl {
      font-size: 0.7rem;
      color: var(--muted);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 0.35rem;
    }
    .sim-card > div:last-child {
      color: var(--text-soft);
      line-height: 1.65;
    }
    details.epoch {
      margin-bottom: 0.5rem;
      border: 1px solid #3d3428;
      border-radius: 6px;
      padding: 0.35rem 0.5rem;
      background: #231d15;
    }
    details.epoch summary {
      cursor: pointer;
      font-family: var(--sans);
      font-size: 0.82rem;
      color: var(--era);
      letter-spacing: 0.04em;
    }
    .tt-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--sans);
      font-size: 0.74rem;
      margin-top: 0.45rem;
    }
    .tt-table th, .tt-table td {
      border-bottom: 1px solid #3a3228;
      padding: 0.35rem 0.3rem;
      vertical-align: top;
      text-align: left;
    }
    .tt-table th { color: var(--muted); font-weight: 600; width: 4.5rem; }
    .pill-on { color: #9fcf9f; font-weight: 700; }
    .pill-off { color: var(--muted); }
    .emrules {
      font-family: var(--sans);
      font-size: 0.78rem;
      color: #c9b89a;
      margin: 0;
      padding-left: 1.1rem;
    }
    .char-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      align-items: flex-start;
    }
    .token-grid-root {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      max-height: min(38vh, 20rem);
      overflow-y: auto;
      padding-right: 0.35rem;
      scrollbar-gutter: stable;
    }
    .token-grid-group-label {
      font-family: var(--sans);
      font-size: 0.72rem;
      color: var(--muted);
      letter-spacing: 0.12em;
      margin-bottom: 0.15rem;
    }
    .token-grid-group-inner {
      gap: 0.4rem;
    }
    .token-btn {
      font-family: var(--font);
      min-width: 2.65rem;
      height: 2.65rem;
      padding: 0 0.45rem;
      font-size: 1.28rem;
      background: linear-gradient(165deg, #3a3228 0%, #2e261e 100%);
      border: 1px solid var(--border-strong);
      color: var(--text);
      border-radius: var(--radius-sm);
      cursor: pointer;
      line-height: 1.1;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 235, 200, 0.06);
      transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
    }
    .token-btn.multi {
      min-width: auto;
      padding: 0 0.7rem;
      font-size: 1.06rem;
    }
    .token-btn.core.ok {
      border-color: var(--core);
      background: linear-gradient(165deg, rgba(139, 122, 184, 0.22) 0%, #2e261e 100%);
      box-shadow: 0 0 12px rgba(139, 122, 184, 0.25), inset 0 0 0 1px rgba(139, 122, 184, 0.35);
    }
    .token-btn:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 235, 200, 0.08);
    }
    .token-btn:active {
      transform: translateY(0);
    }
    .sentence-row {
      min-height: 3rem;
      padding: 0.65rem 0.75rem;
      background: #231d15;
      border: 1px dashed #5a4d3c;
      border-radius: 6px;
      margin-bottom: 0.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      align-items: center;
      align-content: flex-start;
    }
    .sentence-row.empty {
      color: var(--muted);
      font-size: 0.95rem;
      font-family: var(--sans);
      letter-spacing: normal;
    }
    textarea.teaching-input {
      width: 100%;
      min-height: 5.75rem;
      margin-bottom: 0.55rem;
      padding: 0.75rem 0.85rem;
      background: var(--panel-inset);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-family: var(--font);
      font-size: 1.14rem;
      line-height: 1.65;
      resize: vertical;
      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.22);
      transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    textarea.teaching-input:focus {
      outline: none;
      border-color: rgba(90, 143, 104, 0.65);
      box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.22),
        0 0 0 3px rgba(61, 92, 72, 0.2);
    }
    textarea.teaching-input::placeholder {
      color: var(--muted);
      opacity: 0.75;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 0.15rem;
      background: #352c22;
      border: 1px solid #6a5c48;
      border-radius: 6px;
      padding: 0.12rem 0.15rem 0.12rem 0.45rem;
      font-size: 1.2rem;
      line-height: 1.2;
    }
    .chip.multi { border-color: #7a8f6a; }
    .chip-del {
      font-family: var(--sans);
      background: transparent;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 1rem;
      padding: 0.15rem 0.35rem;
      border-radius: 4px;
    }
    .chip-del:hover {
      color: #e8b4b4;
      background: rgba(255,255,255,.06);
    }
    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      align-items: center;
      margin-bottom: 0.75rem;
    }
    button.std {
      font-family: var(--sans);
      background: linear-gradient(180deg, #42362a 0%, #342b22 100%);
      color: var(--text);
      border: 1px solid var(--border-strong);
      padding: 0.52rem 0.9rem;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 0.88rem;
      letter-spacing: 0.02em;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 235, 200, 0.05);
      transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
    }
    button.std:hover:not(:disabled) {
      border-color: var(--accent);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 235, 200, 0.07);
    }
    button.std:active:not(:disabled) {
      transform: translateY(0);
    }
    button.std:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    button.primary {
      background: linear-gradient(180deg, var(--pick-bright) 0%, var(--pick) 100%);
      border-color: rgba(120, 175, 135, 0.55);
      color: #eef5ef;
      font-weight: 600;
    }
    button.primary:hover:not(:disabled) {
      border-color: rgba(150, 200, 160, 0.7);
      box-shadow: 0 4px 18px rgba(61, 92, 72, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    label.row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem;
      font-family: var(--sans);
      font-size: 0.82rem;
      color: var(--muted);
      margin-bottom: 0.45rem;
    }
    input[type="password"],
    input[type="url"],
    input[type="number"],
    input[type="text"],
    select {
      flex: 1;
      min-width: 140px;
      max-width: 260px;
      background: var(--panel-inset);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.4rem 0.55rem;
      border-radius: var(--radius-sm);
      font-size: 0.88rem;
      transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }
    input:focus,
    select:focus {
      outline: none;
      border-color: rgba(212, 169, 106, 0.5);
      box-shadow: 0 0 0 2px rgba(212, 169, 106, 0.12);
    }
    details.api {
      margin-top: 0.5rem;
      font-family: var(--sans);
      font-size: 0.78rem;
      color: var(--muted);
    }
    details.api summary {
      cursor: pointer;
      color: var(--accent);
      margin-bottom: 0.35rem;
    }
    .result {
      margin-top: 0.75rem;
      padding: 0.75rem;
      background: var(--panel-inset);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      font-family: var(--sans);
      font-size: 0.86rem;
    }
    .result.ok {
      border-color: rgba(90, 143, 104, 0.55);
      border-left: 3px solid var(--pick-bright);
      background: rgba(61, 92, 72, 0.1);
    }
    .result.bad {
      border-color: rgba(192, 112, 88, 0.5);
      border-left: 3px solid var(--warn);
      background: rgba(192, 112, 88, 0.08);
    }
    .result.pending {
      border-color: rgba(212, 169, 106, 0.48);
      border-left: 3px solid var(--accent);
      background: rgba(212, 169, 106, 0.08);
    }
    .teaching-current-utterance {
      margin-bottom: 0.6rem;
      padding-bottom: 0.55rem;
      border-bottom: 1px solid rgba(154, 139, 118, 0.24);
    }
    .teaching-current-utterance strong {
      display: block;
      margin-bottom: 0.25rem;
      color: var(--accent);
    }
    .teaching-current-utterance div {
      color: var(--text);
      line-height: 1.65;
      white-space: pre-wrap;
    }
    .teaching-progress {
      margin-top: 0.65rem;
      padding: 0.65rem 0.7rem;
      border: 1px solid rgba(212, 169, 106, 0.28);
      border-radius: var(--radius-sm);
      background: rgba(18, 14, 10, 0.22);
      color: var(--text);
    }
    .teaching-progress-title {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      font-weight: 700;
      color: var(--accent);
    }
    .teaching-progress-title::before {
      content: "";
      width: 0.7rem;
      height: 0.7rem;
      border: 2px solid rgba(212, 169, 106, 0.32);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.85s linear infinite;
      flex: 0 0 auto;
    }
    .teaching-progress.done .teaching-progress-title::before {
      content: "✓";
      width: auto;
      height: auto;
      border: 0;
      color: #9fcf9f;
      animation: none;
      font-weight: 700;
    }
    .teaching-progress-detail {
      margin-top: 0.35rem;
      color: var(--muted);
      line-height: 1.65;
    }
    .teaching-progress-preview {
      margin-top: 0.55rem;
      padding-top: 0.55rem;
      border-top: 1px solid rgba(212, 169, 106, 0.22);
      color: #d8cdb9;
      line-height: 1.75;
      white-space: pre-wrap;
    }
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
    .core-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      font-family: var(--sans);
      font-size: 0.68rem;
    }
    .core-pill {
      padding: 0.15rem 0.4rem;
      border-radius: 999px;
      border: 1px solid #5a4d3c;
      color: var(--muted);
    }
    .core-pill.on {
      border-color: var(--core);
      color: #d4c8e8;
      background: rgba(107,90,143,.12);
    }
    .world-entry {
      margin-top: 0.85rem;
      padding: 0.85rem 0.95rem;
      background: linear-gradient(165deg, rgba(255, 240, 210, 0.02) 0%, var(--panel-inset) 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      font-size: 0.95rem;
      box-shadow: var(--shadow-sm);
    }
    .world-entry:first-child {
      margin-top: 0;
    }
    .world-entry .era {
      font-family: var(--sans);
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--era);
      margin-bottom: 0.35rem;
    }
    .world-entry .core-tag {
      font-family: var(--sans);
      font-size: 0.72rem;
      color: var(--accent);
      letter-spacing: 0.08em;
      margin-bottom: 0.5rem;
    }
    .world-entry .story {
      padding: 0.7rem 0.8rem;
      background: rgba(0, 0, 0, 0.2);
      border-radius: var(--radius-sm);
      border-left: 3px solid var(--core);
      margin-bottom: 0.55rem;
      line-height: 1.75;
    }
    .world-entry .world-bit {
      padding: 0.6rem 0.8rem;
      background: rgba(0, 0, 0, 0.15);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      font-size: 0.88rem;
      color: var(--text-soft);
    }
    .world-entry .world-bit .lbl {
      font-family: var(--sans);
      font-size: 0.72rem;
      color: var(--muted);
      margin-bottom: 0.35rem;
    }
    footer {
      margin-top: 2rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      font-size: 0.72rem;
      color: var(--muted);
      font-family: var(--sans);
      opacity: 0.85;
    }
    .toolbar {
      margin-bottom: 1rem;
    }
    .learned-manage-root {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .learned-manage-section .learned-manage {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      align-items: center;
    }
    .learned-manage {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      align-items: center;
    }
    .learned-row {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: var(--panel-inset);
      padding: 0.32rem 0.58rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      font-size: 1.1rem;
      box-shadow: var(--shadow-sm);
    }
    .learned-row button {
      font-size: 0.78rem;
      padding: 0.25rem 0.5rem;
    }
    .story-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .story-modal[hidden] {
      display: none !important;
    }
    #storyModalBackdrop,
    #greatChatBackdrop,
    #emergenceEpigraphBackdrop {
      position: absolute;
      inset: 0;
      background: rgba(8, 6, 4, 0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      cursor: pointer;
    }
    .story-modal-card {
      position: relative;
      width: 100%;
      max-width: 560px;
      max-height: 86vh;
      overflow-y: auto;
      background: linear-gradient(168deg, var(--panel-raised) 0%, var(--panel) 55%);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-lg);
      padding: 1.35rem 1.45rem;
      box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 235, 200, 0.06);
      animation: modal-in 0.28s var(--ease);
    }
    @keyframes modal-in {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .story-modal-card .modal-era {
      font-family: var(--sans);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--era);
      margin-bottom: 0.35rem;
    }
    .story-modal-card .modal-actions {
      margin-top: 1rem;
      display: flex;
      justify-content: flex-end;
      gap: 0.45rem;
    }
    .great-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.35rem;
    }
    button.great-pick {
      font-size: 0.84rem;
      padding: 0.45rem 0.75rem;
      border-radius: 999px;
      letter-spacing: 0.04em;
    }
    .great-pick.st-hinder {
      border-color: rgba(192, 112, 88, 0.55);
      background: linear-gradient(180deg, rgba(80, 45, 40, 0.5) 0%, rgba(50, 32, 28, 0.6) 100%);
      color: #f0d4cf;
    }
    .great-pick.st-push {
      border-color: rgba(90, 143, 104, 0.55);
      background: linear-gradient(180deg, rgba(45, 70, 52, 0.45) 0%, rgba(35, 55, 42, 0.55) 100%);
    }
    .great-pick.st-both {
      border-color: rgba(201, 162, 87, 0.5);
      background: linear-gradient(180deg, rgba(70, 58, 38, 0.45) 0%, rgba(45, 38, 28, 0.55) 100%);
    }
    .great-chat-card {
      max-width: 580px;
    }
    .great-chat-log {
      margin: 0.65rem 0;
      padding: 0.65rem 0.75rem;
      min-height: 180px;
      max-height: min(42vh, 340px);
      overflow-y: auto;
      background: var(--panel-inset);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      font-family: var(--sans);
      font-size: 0.88rem;
      box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    .great-chat-token-strip {
      margin-bottom: 0.55rem;
      max-height: min(26vh, 200px);
      overflow-y: auto;
      padding: 0.45rem 0.5rem;
      background: #1e1812;
      border: 1px solid #3d3428;
      border-radius: 8px;
    }
    .great-chat-token-strip.token-grid-root {
      gap: 0.5rem;
    }
    .great-chat-token-strip .token-grid-group-label {
      font-size: 0.68rem;
    }
    .great-chat-token-strip .token-btn {
      min-width: 2.35rem;
      height: 2.35rem;
      font-size: 1.08rem;
    }
    .great-msg {
      margin-bottom: 0.65rem;
      padding: 0.45rem 0.55rem;
      border-radius: 6px;
      border: 1px solid #3a3228;
    }
    .great-msg-user {
      background: rgba(61, 92, 72, 0.15);
      border-color: rgba(90, 143, 104, 0.35);
    }
    .great-msg-ai {
      background: rgba(107, 90, 143, 0.12);
      border-color: rgba(107, 90, 143, 0.35);
    }
    .great-msg-role {
      font-size: 0.72rem;
      color: var(--muted);
      margin-bottom: 0.25rem;
      letter-spacing: 0.06em;
    }
    .great-msg-body {
      color: var(--text);
      line-height: 1.55;
    }
    #greatChatInput {
      width: 100%;
      min-height: 4.5rem;
      resize: vertical;
      background: var(--panel-inset);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.55rem 0.65rem;
      border-radius: var(--radius-sm);
      font-family: var(--sans);
      font-size: 0.88rem;
      margin-bottom: 0.35rem;
      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.18);
      transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }
    #greatChatInput:focus {
      outline: none;
      border-color: rgba(139, 122, 184, 0.55);
      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(107, 90, 143, 0.15);
    }

    .emergence-epigraph-modal-card {
      max-width: 420px;
      text-align: center;
    }
    .epigraph-modal-kicker {
      font-family: var(--sans);
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      color: var(--muted);
      margin-bottom: 0.65rem;
    }
    .world-entry-epigraph-row {
      margin: 0.35rem 0 0.5rem;
    }
    button.emergence-epigraph-btn {
      font-size: 0.82rem;
      padding: 0.35rem 0.75rem;
    }

    /** 涌现时刻题记（节点辞 · 与紫框契机呼应） */
    .emergence-epigraph {
      margin: 0.55rem 0 0.35rem;
      padding: 0.5rem 0.65rem;
      border: 1px solid rgba(107, 90, 143, 0.55);
      border-radius: 8px;
      background: rgba(107, 90, 143, 0.1);
      font-size: 0.95rem;
      line-height: 1.55;
      color: #e4dce8;
      font-family: var(--font);
    }
    .emergence-epigraph .emergence-attr {
      display: block;
      margin-top: 0.35rem;
      font-family: var(--sans);
      font-size: 0.72rem;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    /** 涌现涟漪：卫星辞自动入世（非紫框节点） */
    .ripple-granted {
      margin: 0.45rem 0 0.35rem;
      padding: 0.4rem 0.55rem;
      border-radius: 6px;
      border: 1px solid rgba(90, 143, 104, 0.35);
      background: rgba(61, 92, 72, 0.12);
      font-family: var(--sans);
      font-size: 0.82rem;
      color: #c5dcc5;
      letter-spacing: 0.03em;
    }

    /** 时代势能 · AI（涌现加权账本） */
    .era-momentum {
      padding: 0.55rem 0.65rem;
      border-radius: 8px;
      border: 1px solid rgba(90, 80, 65, 0.55);
      background: rgba(42, 35, 26, 0.65);
      font-family: var(--sans);
      font-size: 0.84rem;
      line-height: 1.55;
      color: var(--text);
    }
    .era-momentum-ready {
      border-color: rgba(61, 92, 72, 0.65);
      background: rgba(61, 92, 72, 0.14);
    }
    .era-momentum-hold {
      border-color: rgba(120, 95, 70, 0.45);
      background: rgba(90, 70, 50, 0.1);
    }
    .era-momentum-loading {
      border-color: rgba(193, 154, 87, 0.45);
      background: rgba(193, 154, 87, 0.08);
      color: var(--muted);
    }
    .era-momentum-warn {
      border-color: rgba(192, 112, 88, 0.55);
      background: rgba(192, 112, 88, 0.1);
      color: #e8c4bc;
    }
    .era-momentum-badge {
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--accent);
    }

    .dev-mode-panel {
      margin-top: 0.65rem;
      padding: 0.5rem 0.65rem 0.65rem;
      border: 1px dashed rgba(154, 139, 118, 0.45);
      border-radius: 6px;
      background: rgba(20, 18, 14, 0.35);
    }
    .dev-mode-panel summary {
      cursor: pointer;
      color: var(--muted);
      font-size: 0.88rem;
    }
    .dev-mode-pre {
      margin: 0.4rem 0 0;
      padding: 0.45rem 0.5rem;
      max-height: 14rem;
      overflow: auto;
      font-family: var(--sans);
      font-size: 0.78rem;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-all;
      background: rgba(0, 0, 0, 0.22);
      border-radius: 4px;
      color: #d8ccb8;
    }

    /* —— Header & layout polish —— */
    .brand-row {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.5rem 0.85rem;
      margin-bottom: 0.35rem;
    }
    .brand-sub {
      font-family: var(--sans);
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .intro-fold {
      margin-bottom: 0.25rem;
      font-family: var(--sans);
      font-size: 0.78rem;
    }
    .intro-fold summary {
      cursor: pointer;
      color: var(--accent);
      letter-spacing: 0.06em;
      margin-bottom: 0.35rem;
    }
    .intro-fold .tag {
      margin-bottom: 0;
    }

    .panel-kicker {
      margin: 0 0 0.25rem;
      font-family: var(--sans);
      font-size: 0.67rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--era);
      opacity: 0.92;
    }
    .panel h2 {
      margin-top: 0;
    }
    .hint-compact {
      margin-bottom: 0.5rem;
    }
    .hint-fold {
      margin-bottom: 0.55rem;
      font-family: var(--sans);
      font-size: 0.78rem;
    }
    .hint-fold summary {
      cursor: pointer;
      color: var(--muted);
      letter-spacing: 0.04em;
      margin-bottom: 0.25rem;
    }
    .hint-fold summary:hover {
      color: var(--accent);
    }
    .hint-fold .hint {
      margin-bottom: 0;
    }

    .panel-vocab {
      border-color: rgba(154, 139, 118, 0.35);
    }
    .panel-manage {
      border-color: rgba(120, 105, 85, 0.35);
    }
    .panel-teach {
      border-color: rgba(90, 143, 104, 0.4);
      box-shadow:
        var(--shadow-md),
        0 0 28px rgba(61, 92, 72, 0.08),
        inset 0 1px 0 rgba(90, 143, 104, 0.14);
    }
    .panel-era {
      border-color: rgba(219, 180, 94, 0.4);
      background: linear-gradient(155deg, rgba(219, 180, 94, 0.08) 0%, var(--panel) 38%, var(--panel-inset) 100%);
      box-shadow: var(--shadow-md), 0 0 32px var(--era-glow, transparent);
    }
    .panel-era h2 {
      font-size: 1.12rem;
      color: var(--era);
      letter-spacing: 0.1em;
      text-shadow: 0 0 24px rgba(219, 180, 94, 0.2);
    }
    .era-panel-desc {
      margin: 0 0 0.5rem;
      font-style: italic;
      line-height: 1.9;
      color: var(--text-soft);
      font-size: 0.94rem;
    }
    .panel-world {
      border-color: rgba(154, 139, 118, 0.32);
    }
    .panel-great {
      border-color: rgba(139, 122, 184, 0.38);
      box-shadow: var(--shadow-md), 0 0 24px rgba(107, 90, 143, 0.06);
    }
    .panel-scroll {
      border-color: rgba(154, 139, 118, 0.28);
    }
    .panel-scroll .world-log-scroll {
      max-height: min(42vh, 22rem);
      overflow-y: auto;
      padding-right: 0.25rem;
    }

    .actions-primary {
      margin-top: 0.15rem;
    }
    .actions-primary .primary {
      font-weight: 600;
      padding: 0.55rem 1.1rem;
    }

    .settings-fold {
      margin-top: 0.5rem;
    }
    .settings-row-first {
      margin-top: 0.45rem;
    }
    .api-hint {
      margin-top: 0.4rem;
      margin-bottom: 0;
    }
    .api-key-actions {
      align-items: center;
      gap: 0.55rem;
      flex-wrap: wrap;
    }
    .api-key-status {
      margin: 0;
      min-height: 1.35em;
      font-size: 0.78rem;
    }
    .api-key-status.ok {
      color: #9fcf9f;
    }
    .api-key-status.bad {
      color: #c07058;
    }
    .dev-live-label {
      margin-top: 0.55rem;
      margin-bottom: 0.25rem;
    }

    button.std:focus-visible,
    .token-btn:focus-visible,
    textarea.teaching-input:focus-visible,
    input:focus-visible,
    select:focus-visible,
    summary:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .col-controls {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .col-controls .panel {
      margin-bottom: 0;
    }
    .app-header {
      padding-bottom: 1rem;
      margin-bottom: 0.35rem;
      border-bottom: 1px solid var(--border);
    }
    .intro-fold[open] > summary {
      margin-bottom: 0.5rem;
    }
    .toolbar {
      display: flex;
      justify-content: flex-end;
    }
    .btn-ghost {
      background: transparent;
      border-color: rgba(154, 139, 118, 0.35);
      color: var(--muted);
      font-size: 0.82rem;
    }
    .btn-ghost:hover {
      color: var(--text);
      border-color: var(--accent);
    }

    .panel-manage .learned-manage-root {
      max-height: min(28vh, 11rem);
      overflow-y: auto;
      padding-right: 0.2rem;
    }
    .learned-manage-root::-webkit-scrollbar,
    .token-grid-root::-webkit-scrollbar,
    .world-log-scroll::-webkit-scrollbar {
      width: 6px;
    }
    .learned-manage-root::-webkit-scrollbar-thumb,
    .token-grid-root::-webkit-scrollbar-thumb,
    .world-log-scroll::-webkit-scrollbar-thumb {
      background: rgba(154, 139, 118, 0.35);
      border-radius: 3px;
    }

    .options-fold {
      margin-top: 0.35rem;
      font-family: var(--sans);
      font-size: 0.82rem;
    }
    .options-fold > summary {
      cursor: pointer;
      color: var(--muted);
      letter-spacing: 0.04em;
      padding: 0.35rem 0;
    }
    .options-fold > summary:hover {
      color: var(--accent);
    }
    .options-body {
      padding-top: 0.35rem;
      border-top: 1px solid rgba(61, 52, 40, 0.55);
    }
    .settings-nested {
      margin-top: 0.45rem;
    }
    .settings-nested > summary {
      cursor: pointer;
      color: var(--muted);
      font-size: 0.84rem;
      margin-bottom: 0.25rem;
    }
    .row-check {
      flex-direction: row;
      align-items: center;
      gap: 0.45rem;
    }
    .row-check span {
      flex: 1;
      font-size: 0.82rem;
    }
    .row-compact {
      margin-bottom: 0.55rem;
    }
    .actions-inline {
      margin: 0.35rem 0;
    }

    .result:not([hidden]) {
      margin: 0.65rem 0 0;
      line-height: 1.6;
    }

    .status-line {
      font-size: 0.78rem;
      line-height: 1.65;
      max-height: 5.5rem;
      overflow-y: auto;
      padding-right: 0.15rem;
    }
    .great-list:empty::after {
      content: "名册随时代更替，解锁后将在此列出。";
      display: block;
      font-family: var(--sans);
      font-size: 0.78rem;
      color: var(--muted);
      font-style: italic;
      padding: 0.35rem 0;
    }
    .panel-teaching-history {
      margin-top: 0.95rem;
    }
    .teaching-history {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      max-height: 22rem;
      overflow-y: auto;
      padding-right: 0.2rem;
    }
    .teaching-history-item {
      padding: 0.72rem 0.8rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--panel-inset);
      font-family: var(--sans);
      font-size: 0.84rem;
    }
    .teaching-history-meta {
      color: var(--muted);
      font-size: 0.74rem;
      margin-bottom: 0.35rem;
    }
    .teaching-history-utterance {
      color: var(--text);
      line-height: 1.65;
      white-space: pre-wrap;
    }
    .teaching-history-result {
      margin-top: 0.35rem;
      color: #d2c3a8;
      line-height: 1.55;
    }
    .teaching-history-reason {
      margin-top: 0.35rem;
      color: var(--muted);
      line-height: 1.55;
    }
    .empty-state {
      margin: 0;
      padding: 0.5rem 0;
      font-style: italic;
    }

    .era-momentum:not([hidden]) {
      margin-top: 0.65rem;
    }
    .era-momentum-ready {
      box-shadow: 0 0 20px rgba(77, 122, 92, 0.12);
    }
    .era-momentum-hold {
      box-shadow: 0 0 16px rgba(192, 112, 88, 0.08);
    }
    .era-momentum-rationale {
      opacity: 0.92;
    }
    .era-momentum-comment {
      font-size: 0.78rem;
      opacity: 0.8;
    }
    .era-momentum-badge {
      color: var(--era);
    }

    .great-chat-sub {
      margin-bottom: 0;
    }
    .great-chat-token-hint {
      margin: 0 0 0.35rem;
      font-size: 0.82rem;
    }

    @media (hover: none) {
      .panel:hover {
        border-color: var(--border);
      }
      .sim-card:hover,
      .token-btn:hover,
      button.std:hover:not(:disabled) {
        transform: none;
      }
    }

    @media (max-width: 880px) {
      .col-world {
        position: static;
      }
      .token-grid-root {
        max-height: min(32vh, 16rem);
      }
      h1 {
        font-size: 1.35rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }