@font-face {
        font-family: "Source Serif 4";
        font-style: normal; font-weight: 400; font-display: swap;
        src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
      @font-face {
        font-family: "Source Serif 4";
        font-style: normal; font-weight: 600; font-display: swap;
        src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
      @font-face {
        font-family: "Source Serif 4";
        font-style: normal; font-weight: 700; font-display: swap;
        src: url("/fonts/source-serif-4-latin-700-normal.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }

      :root {
        --type-display: "Source Serif 4", "Iowan Old Style", Palatino, "New York", ui-serif, Georgia, serif;
        --type-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --type-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
        --bg-page: #ffffff; --bg-alt: #f7f5f1; --bg-card: #fdfcfa;
        --ink: #1d1d1f; --ink-soft: #3a3a3c; --ink-mute: #4d4d55;
        --rule: #e4e1da; --rule-strong: #c9c5bb;
        --link: #0a5566; --link-hover: #073f4c; --eyebrow: #684d00;
        --btn-bg: #1d1d1f; --btn-text: #ffffff; --focus-ring: #0a5566;
        --ok: #14532d; --bad: #7f1d1d;
        --code-bg: #14161c; --code-text: #f2f3f5;
        --shadow-sm: 0 1px 2px rgb(29 29 31 / 0.06);
        --shadow-md: 0 12px 32px -12px rgb(29 29 31 / 0.18);
        --radius-sm: 8px; --radius-md: 14px; --radius-pill: 999px;
      }
      [data-theme="dark"] {
        --bg-page: #0b0e14; --bg-alt: #131722; --bg-card: #161b26;
        --ink: #f5f5f7; --ink-soft: #d2d2d7; --ink-mute: #86868b;
        --rule: #232936; --rule-strong: #343c4e;
        --link: #40b5d0; --link-hover: #67c8de; --eyebrow: #e5b800;
        --btn-bg: #f5f5f7; --btn-text: #0b0e14; --focus-ring: #40b5d0;
        --ok: #4ade80; --bad: #f87171;
        --code-bg: #07090e; --code-text: #e6edf3;
      }

      * { box-sizing: border-box; margin: 0; padding: 0; }
      html { font-family: var(--type-body); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg-page); }
      body { min-height: 100vh; display: flex; flex-direction: column; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
      a { color: var(--link); }
      a:hover { color: var(--link-hover); }

      .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.75rem; }
      .skip-link { position: absolute; top: -100px; left: 1rem; background: var(--btn-bg); color: var(--btn-text); padding: 0.5rem 1rem; border-radius: var(--radius-sm); z-index: 2000; }
      .skip-link:focus { top: 1rem; }
      .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

      /* ==== Navigation ==== */
      .ap-nav { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--bg-page) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
      .ap-nav-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 64px; }
      .ap-brand { justify-self: start; display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--type-display); font-size: 1.2rem; font-weight: 700; color: var(--ink); text-decoration: none; min-height: 44px; white-space: nowrap; }
      .ap-brand img { width: 26px; height: 26px; }
      .ap-menu { justify-self: center; display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0.35rem; }
      .ap-menu > li { position: relative; display: inline-flex; align-items: center; }
      .ap-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.55rem; color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; font-weight: 500; white-space: nowrap; border-radius: var(--radius-sm); }
      .ap-menu a:hover { color: var(--ink); background: var(--bg-alt); }
      .ap-nav-right { justify-self: end; display: inline-flex; align-items: center; gap: 0.35rem; }
      .theme-toggle, .ap-search-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 44px; min-height: 44px; padding: 0 0.5rem; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--ink); cursor: pointer; font-family: inherit; }
      .ap-cta-mini { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 0.9rem; background: var(--btn-bg); color: var(--btn-text); border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 600; text-decoration: none; }

      /* ==== Page header & Multi-Column Workbench Grid ==== */
      .page-header { padding: 3.5rem 0 2rem; border-bottom: 1px solid var(--rule); }
      .page-header h1 { font-family: var(--type-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; margin-bottom: 0.75rem; letter-spacing: -0.015em; }
      .deck { font-size: 1.2rem; color: var(--ink-soft); max-width: 62ch; line-height: 1.55; }
      .eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 0.8rem; }

      .guide-grid { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; padding: 3rem 1.75rem 4rem; margin: 0 auto; max-width: 1280px; align-items: start; }
      @media (max-width: 768px) { .guide-grid { grid-template-columns: 1fr; } }

      .guide-rail { display: flex; flex-direction: column; gap: 1.75rem; }
      .guide-block { background: var(--bg-alt); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 1.35rem; font-size: 0.92rem; }
      .guide-block h2 { font-family: var(--type-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.85rem; color: var(--ink); }
      .check-list, .info-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; color: var(--ink-soft); }
      .check-list li { display: flex; gap: 0.6rem; }
      .check-list .tick { color: var(--ok); font-weight: 800; }

      .tool-col { display: flex; flex-direction: column; gap: 2rem; }

      .demo-grid {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 1.5rem;
        align-items: start;
      }
      @media (max-width: 768px) {
        .demo-grid {
          grid-template-columns: 1fr;
        }
      }

      .demo-panel { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 1.75rem; box-shadow: var(--shadow-sm); height: 100%; }
      .step-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
      .step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--btn-bg); color: var(--btn-text); border-radius: 50%; font-size: 0.85rem; font-weight: 700; }
      .step-head h2 { font-family: var(--type-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 0; }

      .dropzone { border: 2px dashed var(--rule-strong); border-radius: var(--radius-md); padding: 2.25rem 1.5rem; text-align: center; background: var(--bg-page); cursor: pointer; transition: all 0.2s ease; }
      .dropzone:hover { border-color: var(--link); background: var(--bg-alt); }
      .dropzone p { margin-bottom: 0.35rem; color: var(--ink); }
      .dropzone .hint { font-size: 0.85rem; color: var(--ink-mute); margin-bottom: 0; }

      .demo-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; align-items: center; }
      .pill-select, .pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: var(--radius-pill); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.18s ease; font-family: inherit; }
      .pill-select { background: var(--bg-alt); border: 1px solid var(--rule-strong); color: var(--ink); }
      .pill-primary { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-bg); text-decoration: none; }
      .pill-primary:hover { opacity: 0.9; }
      .pill-ghost { background: var(--bg-alt); border: 1px solid var(--rule-strong); color: var(--ink); }
      .pill-ghost:hover { background: var(--bg-page); border-color: var(--ink-soft); }

      .editor-block { margin-top: 1.25rem; }
      .editor-label { font-size: 0.85rem; font-weight: 700; color: var(--ink); display: block; margin-bottom: 0.5rem; }
      #csv-input { width: 100%; height: 180px; font-family: var(--type-mono); font-size: 0.85rem; padding: 0.85rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--bg-page); color: var(--ink); }

      .error-table-wrap { margin-top: 1rem; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
      .error-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-family: var(--type-mono); text-align: left; }
      .error-table th { background: var(--bg-alt); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule-strong); color: var(--ink-mute); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; }

      .xml-out { background: var(--code-bg); color: var(--code-text); padding: 1.25rem; border-radius: var(--radius-sm); font-family: var(--type-mono); font-size: 0.82rem; line-height: 1.5; height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-all; margin-top: 1rem; border: 1px solid var(--rule); }
      .xml-placeholder { color: var(--ink-mute); font-style: italic; }
      .status { font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.5rem; }

      .footer { border-top: 1px solid var(--rule); background: var(--bg-alt); margin-top: 5rem; padding: 3.5rem 0 2rem; font-size: 0.93rem; }