:root {
      --mock-ink: #18322e;
      --mock-muted: #5d716d;
      --mock-line: #cad7d3;
      --mock-soft: #eff6f3;
      --mock-accent: #087566;
      --mock-warning: #fff6df;
      --mock-danger: #9b3f35;
      --mock-paper: #fffefa;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--mock-ink);
      background: #e9efec;
      font-family: Inter, "Noto Sans TC", "Segoe UI", sans-serif;
    }
    button, input, select, textarea { font: inherit; }
    .mock-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 14px 24px;
      color: #f7fffc;
      background: #102f29;
    }
    .mock-brand { display: flex; align-items: center; gap: 12px; }
    .mock-mark {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid #5e8980;
      border-radius: 11px;
      font: 700 18px/1 ui-monospace, monospace;
    }
    .mock-brand strong, .mock-brand small { display: block; }
    .mock-brand small { margin-top: 2px; color: #bdd2cc; }
    .mock-topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .mock-demo-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
    .mock-demo-nav a {
      padding: 8px 10px;
      border-radius: 8px;
      color: #c9d8d4;
      font-size: 13px;
      text-decoration: none;
      white-space: nowrap;
    }
    .mock-demo-nav a:hover, .mock-demo-nav a.active { color: #fff; background: rgba(255,255,255,.09); }
    .mock-demo-nav a:focus-visible { outline: 2px solid #9ce8dc; outline-offset: 2px; }
    .mock-status-pill {
      padding: 7px 11px;
      border: 1px solid #6d958d;
      border-radius: 999px;
      color: #d6e8e3;
      font-size: 12px;
    }
    .mock-banner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      padding: 18px 24px;
      border-bottom: 1px solid #d9c99c;
      background: var(--mock-warning);
    }
    .mock-banner h1 { margin: 0 0 7px; font-size: clamp(20px, 3vw, 28px); }
    .mock-banner p { max-width: 950px; margin: 0; color: #6b5a31; line-height: 1.6; }
    .mock-banner a { color: #075f54; }
    .mock-engine-proof {
      align-self: center;
      min-width: 260px;
      padding: 10px 12px;
      border: 1px solid #d7c38b;
      border-radius: 10px;
      background: rgba(255,255,255,.55);
      font-size: 12px;
      line-height: 1.5;
    }
    .mock-shell {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr) minmax(310px, 35vw);
      gap: 12px;
      min-height: calc(100vh - 154px);
      padding: 12px;
    }
    .mock-panel {
      min-width: 0;
      border: 1px solid var(--mock-line);
      border-radius: 14px;
      background: var(--mock-paper);
      box-shadow: 0 3px 14px rgba(26, 56, 49, .06);
    }
    .mock-controls { padding: 18px; }
    .mock-eyebrow {
      margin: 0 0 5px;
      color: var(--mock-accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .mock-controls h2, .mock-preview h2 { margin: 0 0 15px; font-size: 18px; }
    .mock-field { display: grid; gap: 6px; margin: 0 0 14px; }
    .mock-field > span { color: var(--mock-muted); font-size: 12px; font-weight: 700; }
    .mock-field select {
      width: 100%;
      min-height: 42px;
      padding: 8px 10px;
      border: 1px solid #b9c9c5;
      border-radius: 9px;
      background: #fff;
      color: var(--mock-ink);
    }
    .mock-button-stack { display: grid; gap: 8px; }
    .mock-button {
      min-height: 40px;
      padding: 8px 12px;
      border: 1px solid #9eb8b2;
      border-radius: 9px;
      color: #075f54;
      background: #eff8f5;
      cursor: pointer;
    }
    .mock-button.primary { color: white; border-color: #07685b; background: #087566; }
    .mock-button:disabled { color: #879691; border-color: #d1d9d6; background: #f1f3f2; cursor: not-allowed; }
    .mock-contract-list {
      margin: 18px 0 0;
      padding: 14px 0 0 18px;
      border-top: 1px solid #dce5e2;
      color: var(--mock-muted);
      font-size: 12px;
      line-height: 1.55;
    }
    .mock-contract-list li + li { margin-top: 7px; }
    .mock-status {
      margin-top: 16px;
      padding: 11px 12px;
      border: 1px solid #bfd2cd;
      border-radius: 9px;
      background: var(--mock-soft);
      color: #285b51;
      font-size: 12px;
      line-height: 1.5;
    }
    .mock-status[data-kind="error"] { color: var(--mock-danger); border-color: #e7b7af; background: #fff0ed; }
    .mock-status[data-kind="success"] { color: #146349; border-color: #9ecbb9; background: #edf9f3; }
    .mock-editor { overflow: auto; }
    #editor-mount { min-height: 100%; padding: 18px; }
    #editor-mount .document-form { max-width: none; }
    #editor-mount .document-intro { border-radius: 11px; }
    #editor-mount .narrative-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    #editor-mount .narrative-grid .full { grid-column: 1 / -1; }
    #editor-mount .narrative-card {
      margin-top: 12px;
      padding: 14px;
      border: 1px solid #ccdbd7;
      border-radius: 11px;
      background: #fff;
    }
    #editor-mount .repeat-actions { display: flex; gap: 5px; }
    #editor-mount [data-x-invalid] { border-color: #c44e41 !important; outline: 2px solid rgba(196,78,65,.15); }
    .mock-preview { display: grid; grid-template-rows: auto minmax(180px, 1fr) auto; overflow: hidden; }
    .mock-preview-head { padding: 18px 18px 10px; }
    .mock-preview pre {
      min-height: 260px;
      margin: 0;
      padding: 16px;
      overflow: auto;
      border-block: 1px solid #dce5e2;
      color: #d9eee8;
      background: #12332c;
      font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
      white-space: pre;
    }
    .mock-reference-summary { padding: 15px 18px 18px; }
    .mock-reference-summary h3 { margin: 0 0 9px; font-size: 14px; }
    .mock-reference-summary ul { margin: 0; padding-left: 18px; color: var(--mock-muted); font-size: 12px; line-height: 1.6; }
    .mock-reference-summary code { color: #075f54; }
    .mock-note {
      margin: 12px 0 0;
      color: var(--mock-muted);
      font-size: 11px;
      line-height: 1.5;
    }
    @media (max-width: 1120px) {
      .mock-shell { grid-template-columns: 230px minmax(0, 1fr); }
      .mock-preview { grid-column: 1 / -1; min-height: 420px; }
    }
    @media (max-width: 720px) {
      .mock-topbar { align-items: flex-start; flex-direction: column; gap: 12px; padding-inline: 16px; }
      .mock-topbar-actions, .mock-demo-nav { width: 100%; }
      .mock-demo-nav { overflow-x: auto; }
      .mock-banner { grid-template-columns: 1fr; padding-inline: 16px; }
      .mock-status-pill { display: none; }
      .mock-shell { display: block; padding: 8px; }
      .mock-panel + .mock-panel { margin-top: 8px; }
      .mock-engine-proof { min-width: 0; }
      #editor-mount .narrative-grid { grid-template-columns: 1fr; }
    }