:root {
      color-scheme: light;
      --bg: #efe9df;
      --surface: #f7f3eb;
      --panel: rgba(247, 243, 235, 0.94);
      --panel-strong: rgba(252, 250, 246, 0.98);
      --line: #d8d0c3;
      --line-strong: #bfb5a5;
      --text: #201d19;
      --muted: #696158;
      --soft: #8d8478;
      --accent: #312b25;
      --accent-soft: #8a5f46;
      --empty: #e3dcd1;
      --shadow: 0 10px 24px rgba(31, 26, 22, 0.05);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
    }

    body {
      font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", sans-serif;
      color: var(--text);
      background: var(--bg);
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .app {
      padding: 20px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 20px;
    }

    .brand {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
    }

    .wordmark {
      font-family: "Iowan Old Style", "Palatino Linotype", serif;
      font-size: clamp(1.9rem, 4vw, 2.6rem);
      line-height: 0.95;
      letter-spacing: -0.06em;
    }

    .subtitle {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
      max-width: 62ch;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      /* padding: 6px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-strong); */
    }

    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 350px;
      gap: 18px;
      min-height: calc(100vh - 82px);
    }

    .workspace,
    .sidebar,
    .modal-sheet {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .workspace {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .toolbar {
      display: grid;
      grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(140px, 200px);
      gap: 14px;
      padding: 18px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.22);
    }

    .toolbar-card {
      min-width: 0;
    }

    .toolbar-label,
    .panel-label {
      display: block;
      margin-bottom: 6px;
      font-size: 0.76rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--soft);
    }

    .input,
    .textarea,
    .number,
    .range,
    .select,
    .button,
    .ghost-button {
      width: 100%;
      border-radius: 8px;
      border: 1px solid var(--line);
    }

    .input,
    .number,
    .select,
    .textarea {
      padding: 10px 12px;
      color: var(--text);
      background: var(--panel-strong);
    }

    .input:focus,
    .number:focus,
    .select:focus,
    .textarea:focus,
    .button:focus,
    .ghost-button:focus {
      outline: 2px solid rgba(17, 17, 17, 0.12);
      outline-offset: 1px;
    }

    .button,
    .ghost-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      padding: 10px 14px;
      background: var(--accent);
      color: white;
    }

    .ghost-button {
      background: var(--panel-strong);
      color: var(--text);
    }

    .action-button {
      width: auto;
      min-height: 36px;
      padding: 8px 10px;
      border-radius: 2px;
      background: white;
      color: var(--text);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid var(--line);
    }

    .action-button:hover {
      background: #f6f6f3;
    }

    .action-icon {
      width: 16px;
      height: 16px;
      display: block;
    }

    .action-label {
      font-size: 0.75rem;
      color: var(--muted);
    }

    .button-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .button-row>* {
      flex: 1 1 0;
    }

    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .filter-chip {
      padding: 8px 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .filter-chip.is-active {
      border-color: var(--accent);
      background: #111111;
      color: white;
    }

    .workspace-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 14px 18px 12px;
    }

    .microcopy {
      margin: 0;
      font-size: 0.88rem;
      color: var(--muted);
    }

    .glyph-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
      gap: 12px;
      padding: 0 18px 18px;
      overflow: auto;
    }

    .glyph-card {
      appearance: none;
      -webkit-appearance: none;
      padding: 12px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--panel-strong);
      text-align: left;
      transition: border-color 120ms ease, transform 120ms ease;
      outline: none;
      box-shadow: none;
    }

    .glyph-card:hover {
      transform: translateY(-1px);
      border-color: var(--line-strong);
    }

    .glyph-card:focus,
    .glyph-card:focus-visible,
    .glyph-card:active {
      outline: none;
    }

    .glyph-card[data-selected="true"] {
      border-color: #111111;
      box-shadow: inset 0 0 0 1px #111111;
    }

    .glyph-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .glyph-label {
      font-family: "Iowan Old Style", "Palatino Linotype", serif;
      font-size: 1.2rem;
      line-height: 1;
    }

    .glyph-type {
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--soft);
    }

    .thumb {
      display: grid;
      place-items: center;
      min-height: 96px;
      padding: 12px;
      border-radius: 8px;
      border: 1px dashed var(--line);
      background: #f3ede4;
    }

    .thumb svg {
      width: 100%;
      height: 70px;
      color: #161616;
    }

    .glyph-foot {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 0.76rem;
      color: var(--muted);
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 12px;
      overflow: auto;
    }

    .panel {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-strong);
    }

    .section-kicker {
      margin: 0 0 6px;
      color: var(--soft);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .panel h2,
    .panel h3 {
      margin: 0;
      font-size: 0.98rem;
    }

    .panel-copy {
      margin: 6px 0 0;
      font-size: 0.86rem;
      line-height: 1.45;
      color: var(--muted);
    }

    .panel-stack {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

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

    .field-grid.single {
      grid-template-columns: 1fr;
    }

    .selected-preview {
      display: grid;
      place-items: center;
      min-height: 152px;
      border-radius: 8px;
      border: 1px dashed var(--line);
      border-top: 1px !important;
      background: #f3ede4;
    }

    .selected-preview svg {
      width: 100%;
      height: 128px;
      color: #111111;
    }

    .badge-row,
    .chip-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .badge,
    .chip {
      padding: 6px 9px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.76rem;
    }

    .range-wrap {
      display: grid;
      gap: 6px;
    }

    .range-wrap .metric {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 0.8rem;
      color: var(--muted);
    }

    .range {
      accent-color: #111111;
    }

    .preview-stage {
      min-height: 180px;
      padding: 12px;
      border-radius: 8px;
      border: 1px dashed var(--line);
      background: #f3ede4;
      overflow: auto;
    }

    .preview-stage svg {
      display: block;
      min-width: 100%;
      color: #131313;
    }

    .list {
      display: grid;
      gap: 8px;
    }

    .list-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #f3ede4;
    }

    .list-title {
      font-size: 0.9rem;
    }

    .list-meta {
      font-size: 0.76rem;
      color: var(--muted);
    }

    .list-actions {
      display: flex;
      gap: 6px;
    }

    .mini-button {
      min-width: 34px;
      min-height: 34px;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--panel-strong);
      color: var(--text);
    }

    .status-line {
      min-height: 20px;
      color: var(--accent-soft);
      font-size: 0.85rem;
    }

    .empty-state {
      margin: 0;
      color: var(--muted);
      font-size: 0.86rem;
    }

    .hidden-input {
      display: none;
    }

    .modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(21, 21, 19, 0.36);
    }

    .modal.is-open {
      display: flex;
    }

    .modal-sheet {
      width: min(860px, 100%);
      padding: 14px;
    }

    .modal-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }

    .draw-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 12px;
    }

    .draw-canvas-wrap {
      padding: 10px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #f3ede4;
    }

    .draw-canvas {
      width: 100%;
      aspect-ratio: 1;
      display: block;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: white;
      touch-action: none;
    }

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

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .draw-side {
      display: grid;
      gap: 10px;
    }

    .guide {
      margin: 0;
      font-size: 0.82rem;
      line-height: 1.45;
      color: var(--muted);
    }

    @media (max-width: 1080px) {
      .layout {
        grid-template-columns: 1fr;
      }

      .sidebar {
        order: -1;
      }
    }

    @media (max-width: 760px) {

      .topbar,
      .workspace-meta {
        align-items: flex-start;
        flex-direction: column;
      }

      .top-actions {
        overflow-x: auto;
      }

      .toolbar,
      .draw-layout {
        grid-template-columns: 1fr;
      }

      .field-grid {
        grid-template-columns: 1fr;
      }
    }

    :root {
      --bg: #f2f2ef;
      --surface: #f7f7f4;
      --panel: rgba(247, 247, 244, 0.96);
      --panel-strong: #fbfbf9;
      --line: #d9d8d2;
      --line-strong: #bcbab2;
      --text: #171715;
      --muted: #5f5f59;
      --soft: #828079;
      --accent: #161614;
      --accent-soft: #44433f;
      --empty: #ecebe5;
      --shadow: 0 1px 0 rgba(23, 23, 21, 0.03);
      --canvas: #f5f5f1;
    }

    body {
      font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", sans-serif;
      background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.76)),
        repeating-linear-gradient(0deg,
          transparent 0,
          transparent 27px,
          rgba(23, 23, 21, 0.018) 27px,
          rgba(23, 23, 21, 0.018) 28px),
        var(--bg);
    }

    .app {
      max-width: 1600px;
      margin: 0 auto;
      padding: 18px;
    }

    .topbar {
      margin-bottom: 12px;
    }

    .brand {
      gap: 10px;
    }

    .wordmark,
    .glyph-label,
    .panel h2,
    .panel h3,
    .list-title,
    .list-title,
    .metric-figure,
    .workflow-button strong {
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    }

    .wordmark {
      font-size: clamp(1.5rem, 3vw, 2.15rem);
      letter-spacing: -0.05em;
    }

    .subtitle {
      font-size: 0.82rem;
      max-width: 48ch;
    }

    .top-actions,
    .workspace,
    .sidebar,
    .modal-sheet,
    .panel,
    .glyph-card,
    .thumb,
    .selected-preview,
    .preview-stage,
    .list-item,
    .draw-canvas,
    .draw-canvas-wrap,
    .input,
    .textarea,
    .number,
    .range,
    .select,
    .button,
    .ghost-button,
    .action-button,
    .mini-button {
      border-radius: 2px;
    }

    .top-actions,
    .workspace,
    .sidebar,
    .modal-sheet,
    .panel {
      box-shadow: none;
    }

    .action-button:hover,
    .glyph-card:hover {
      transform: none;
    }

    .layout {
      grid-template-columns: minmax(0, 1fr) 336px;
      gap: 14px;
    }

    .workflow-nav {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .workflow-button {
      display: grid;
      gap: 3px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      background: var(--panel-strong);
      color: var(--text);
      text-align: left;
    }

    .workflow-button strong {
      font-size: 0.95rem;
      font-weight: 500;
    }

    .workflow-button span {
      font-size: 0.74rem;
      color: var(--muted);
    }

    .workflow-button.is-active {
      border-color: var(--accent);
      background: white;
    }

    .toolbar,
    .workspace-meta,
    .glyph-grid,
    .sidebar {
      background: transparent;
    }

    .workspace {
      overflow: hidden;
      background: white;
      border-color: var(--line-strong);
    }

    .workspace-summary {
      margin: 14px 14px 0;
    }

    .panel-inline {
      border: 1px solid var(--line);
      background: var(--panel-strong);
    }

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

    .metric-card {
      padding: 12px;
      border: 1px solid var(--line);
      background: white;
    }

    .metric-label {
      display: block;
      margin-bottom: 6px;
      font-size: 0.7rem;
      color: var(--soft);
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .metric-figure {
      font-size: 1rem;
    }

    .workspace-meta {
      padding-top: 12px;
    }

    .glyph-grid {
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      gap: 10px;
    }

    .glyph-card,
    .panel,
    .list-item,
    .metric-card {
      border-color: var(--line);
      background: var(--panel-strong);
    }

    .glyph-card[data-selected="true"] {
      border-color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .thumb,
    .selected-preview,
    .preview-stage,
    .list-item,
    .draw-canvas-wrap {
      background: var(--canvas);
      border-style: solid;
    }

    .thumb svg,
    .selected-preview svg,
    .preview-stage svg {
      color: var(--text);
    }

    .sidebar {
      gap: 10px;
      padding: 8px 14px;
      background: rgba(251, 251, 249, 0.72);
    }

    .panel {
      padding: 14px 0;
    }

    .panel h2,
    .panel h3 {
      font-size: 1rem;
      font-weight: 500;
    }

    .panel-copy,
    .microcopy,
    .empty-state,
    .guide {
      font-size: 0.8rem;
      line-height: 1.5;
    }

    .toolbar-label,
    .panel-label,
    .section-kicker {
      font-size: 0.68rem;
      letter-spacing: 0.14em;
    }

    .input,
    .number,
    .select,
    .textarea,
    .button,
    .ghost-button,
    .mini-button {
      font-size: 0.84rem;
    }

    .button,
    .ghost-button {
      min-height: 38px;
    }

    .ghost-button {
      background: white;
    }

    .button {
      background: var(--accent);
      color: #f8f8f5;
    }

    .filter-chip {
      border-radius: 2px;
      background: white;
      font-size: 0.77rem;
    }

    .filter-chip.is-active {
      background: var(--accent);
    }

    .assistant-list,
    .focus-list {
      display: grid;
      gap: 8px;
    }

    .insight-item {
      padding: 10px 11px;
      border: 1px solid var(--line);
      background: white;
    }

    .insight-item strong {
      display: block;
      margin-bottom: 4px;
      font-size: 0.78rem;
    }

    .insight-item span {
      display: block;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.45;
    }

    .insight-item[data-tone="warning"] {
      border-color: #b9b6ae;
      background: #f7f6f2;
    }

    .insight-item[data-tone="good"] {
      background: #fafaf7;
    }

    .reference-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .reference-chip {
      padding: 7px 9px;
      border: 1px solid var(--line);
      background: white;
      font-size: 0.76rem;
    }

    .reference-chip.is-active {
      border-color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .helper-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .helper-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--text);
      font-size: 0.78rem;
      text-decoration: none;
      border-bottom: 1px solid rgba(23, 23, 21, 0.18);
    }

    .helper-link:hover::after,
    .helper-link:focus-visible::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 0;
      top: calc(100% + 8px);
      width: min(280px, 72vw);
      padding: 9px 10px;
      border: 1px solid var(--line);
      background: white;
      color: var(--muted);
      font-size: 0.75rem;
      line-height: 1.45;
      z-index: 8;
      box-shadow: 0 6px 18px rgba(23, 23, 21, 0.08);
    }

    .construction-list {
      display: grid;
      gap: 8px;
    }

    .construction-item {
      display: grid;
      gap: 3px;
    }

    .construction-item strong {
      font-size: 0.77rem;
    }

    .construction-item span {
      color: var(--muted);
      font-size: 0.77rem;
      line-height: 1.45;
    }

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

    .note-card {
      padding: 10px;
      border: 1px solid var(--line);
      background: white;
    }

    .note-card strong {
      display: block;
      margin-bottom: 5px;
      font-size: 0.78rem;
    }

    .note-card span {
      display: block;
      color: var(--muted);
      font-size: 0.77rem;
      line-height: 1.45;
    }

    .check-grid {
      display: grid;
      gap: 8px;
    }

    .check-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 0.78rem;
      color: var(--muted);
    }

    .check-row input {
      margin: 2px 0 0;
    }

    .draw-canvas-wrap {
      position: relative;
      overflow: hidden;
    }

    .draw-reference-overlay {
      position: absolute;
      inset: 10px;
      display: grid;
      place-items: center;
      pointer-events: none;
      opacity: 0.18;
    }

    .draw-reference-overlay svg {
      width: 100%;
      height: 100%;
      color: #171715;
    }

    .draw-reference-overlay text {
      font-feature-settings: "kern" 1, "liga" 1;
    }

    .draw-canvas {
      position: relative;
      background: transparent;
    }

    .draw-side .panel {
      padding: 12px;
    }

    .modal-sheet {
      width: min(1040px, 100%);
      background: var(--panel);
    }

    .draw-layout {
      grid-template-columns: minmax(0, 1fr) 280px;
    }

    .draw-side {
      align-content: start;
    }

    .modal-head {
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }

    .export-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel[hidden],
    .workspace-summary[hidden] {
      display: none !important;
    }

    .sidebar .panel {
      border: 0;
      background: transparent;
    }

    .sidebar .panel+.panel {
      border-top: 1px solid var(--line);
    }

    .sidebar .panel-stack>*+* {
      border-top: 1px solid rgba(23, 23, 21, 0.08);
      padding-top: 10px;
    }

    .sidebar .panel-stack>.button-row,
    .sidebar .panel-stack>.field-grid,
    .sidebar .panel-stack>.badge-row,
    .sidebar .panel-stack>.range-wrap,
    .sidebar .panel-stack>.selected-preview,
    .sidebar .panel-stack>.preview-stage,
    .sidebar .panel-stack>.list,
    .sidebar .panel-stack>.check-grid,
    .sidebar .panel-stack>label,
    .sidebar .panel-stack>div {
      border-top: 0;
      padding-top: 0;
    }

    .sidebar .panel-stack>.list,
    .sidebar .panel-stack>.check-grid,
    .sidebar .panel-stack>.field-grid+.field-grid,
    .sidebar .panel-stack>.field-grid+.button-row,
    .sidebar .panel-stack>.button-row+.button-row,
    .sidebar .panel-stack>.preview-stage+.empty-state {
      border-top: 1px solid rgba(23, 23, 21, 0.08);
      padding-top: 10px;
    }

    .sidebar .list-item,
    .sidebar .metric-card,
    .sidebar .insight-item,
    .sidebar .note-card {
      border: 0;
      background: transparent;
      padding-left: 0;
      padding-right: 0;
    }

    .sidebar .list-item+.list-item,
    .sidebar .assistant-list .insight-item+.insight-item,
    .sidebar .check-grid .check-row+.check-row {
      border-top: 1px solid rgba(23, 23, 21, 0.08);
      padding-top: 8px;
    }

    .sidebar .selected-preview,
    .sidebar .preview-stage,
    .sidebar .thumb,
    .sidebar .draw-canvas-wrap {
      background: transparent;
    }

    .assistant-list {
      gap: 0;
    }

    .assistant-list .insight-item strong {
      margin-bottom: 2px;
    }

    [data-phase-panel="all"] {
      order: 99;
    }

    .modal {
      align-items: flex-start;
      overflow: auto;
    }

    .modal-sheet {
      margin: 20px auto;
      max-height: calc(100vh - 40px);
      overflow: auto;
    }

    .draw-layout {
      align-items: start;
    }

    @media (max-width: 1080px) {
      .workflow-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }