:root {
    --bg0: #eef4fb;
    --bg1: #e2edf9;
    --panel: rgba(255,255,255,0.78);
    --panel-edge: rgba(18,45,80,0.14);
    --panel-shadow: rgba(20,45,80,0.14);
    --ink: #0e2038;
    --ink-dim: #4c6484;
    --ink-faint: #8697b0;
    --amber: #e2720a;
    --amber-strong: #c65f04;
    --amber-glow: rgba(226,114,10,0.16);
    --teal: #0b8f80;
    --teal-strong: #096f63;
    --teal-glow: rgba(11,143,128,0.14);
    --magenta: #c22f83;
    --brass: #a4761f;
    --line: rgba(18,45,80,0.16);
    --ok: #1a8a58;
    --ok-bg: #dff3ea;
    --err: #c73a24;
    --err-bg: #fbe5e0;
    --field-op: 0.16;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --display: 'Space Grotesk', var(--sans);
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg0: #071021;
      --bg1: #0b1930;
      --panel: rgba(16,30,54,0.74);
      --panel-edge: rgba(255,255,255,0.10);
      --panel-shadow: rgba(0,0,0,0.45);
      --ink: #e9f1fb;
      --ink-dim: #9fb2cd;
      --ink-faint: #6c81a1;
      --amber: #ffab4d;
      --amber-strong: #ffc178;
      --amber-glow: rgba(255,171,77,0.16);
      --teal: #33d9c8;
      --teal-strong: #6ceadc;
      --teal-glow: rgba(51,217,200,0.14);
      --magenta: #ef6bb0;
      --brass: #dcab5f;
      --line: rgba(255,255,255,0.12);
      --ok: #5fdba1;
      --ok-bg: #113325;
      --err: #ff8266;
      --err-bg: #3a1a14;
      --field-op: 0.22;
    }
  }
  :root[data-theme="dark"] {
    --bg0: #071021;
    --bg1: #0b1930;
    --panel: rgba(16,30,54,0.74);
    --panel-edge: rgba(255,255,255,0.10);
    --panel-shadow: rgba(0,0,0,0.45);
    --ink: #e9f1fb;
    --ink-dim: #9fb2cd;
    --ink-faint: #6c81a1;
    --amber: #ffab4d;
    --amber-strong: #ffc178;
    --amber-glow: rgba(255,171,77,0.16);
    --teal: #33d9c8;
    --teal-strong: #6ceadc;
    --teal-glow: rgba(51,217,200,0.14);
    --magenta: #ef6bb0;
    --brass: #dcab5f;
    --line: rgba(255,255,255,0.12);
    --ok: #5fdba1;
    --ok-bg: #113325;
    --err: #ff8266;
    --err-bg: #3a1a14;
    --field-op: 0.22;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--sans);
    background:
      radial-gradient(900px 500px at 12% -8%, var(--amber-glow), transparent 60%),
      radial-gradient(900px 600px at 105% 10%, var(--teal-glow), transparent 60%),
      linear-gradient(180deg, var(--bg1), var(--bg0) 60%);
    position: relative;
  }

  /* ---- survey-equipment background field -------------------------------- */
  .bg-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--field-op); }
  .bg-field svg { width: 100%; height: 100%; display: block; }
  .ic { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .ic-fill { fill: currentColor; stroke: none; }
  .c-amber { color: var(--amber); }
  .c-teal { color: var(--teal); }
  .c-brass { color: var(--brass); }
  .c-magenta { color: var(--magenta); }

  .page, footer.site-footer { position: relative; z-index: 1; }
  .topbar { position: relative; z-index: 500; }

  /* ---- topbar / nav -------------------------------------------------------- */
  .topbar { max-width: 1120px; margin: 0 auto; padding: 18px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .brand { font-family: var(--display); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; letter-spacing: 0.01em; }
  .brand-mark { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--amber), var(--magenta)); color: #fff; font-size: 1.05rem; box-shadow: 0 4px 14px var(--panel-shadow); }

  .nav-menu { display: flex; gap: 2px; list-style: none; margin: 0; padding: 4px; align-items: center; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 999px; backdrop-filter: blur(8px); }
  .nav-menu a { color: var(--ink-dim); text-decoration: none; font-size: 0.82rem; font-weight: 600; padding: 8px 13px; border-radius: 999px; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; position: relative; z-index: 1; }
  .nav-menu a:hover { color: var(--ink); background: var(--bg0); }
  .nav-menu a.active { color: #fff; background: linear-gradient(120deg, var(--teal), var(--amber)); }
  .nav-toggle { display: none; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg0); color: var(--ink); font-size: 1.05rem; cursor: pointer; align-items: center; justify-content: center; }
  button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

  @media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .nav-menu {
      display: none; position: fixed; top: 64px; left: 14px; right: 14px;
      flex-direction: column; align-items: stretch; border-radius: 14px; padding: 8px; gap: 2px;
      z-index: 999; box-shadow: 0 14px 36px rgba(0,0,0,0.28);
      max-height: calc(100vh - 84px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .nav-menu.open { display: flex; }
    .nav-menu a { padding: 13px 14px; touch-action: manipulation; }
    body.nav-open { overflow: hidden; }
  }

  .nav-scrim { display: none; }
  @media (max-width: 900px) {
    .nav-scrim.open { display: block; position: fixed; inset: 0; z-index: 400; background: rgba(7,16,33,0.35); }
  }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 70px; }

  /* ---- page transitions --------------------------------------------------- */
  .page { display: none; animation: fadeUp 0.35s ease; }
  .page.active { display: block; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .page { animation: none; } }

  /* ---- hero ---------------------------------------------------------------- */
  .hero { max-width: 1120px; margin: 34px auto 10px; padding: 0 20px; }
  .hero h1 {
    font-family: var(--display); font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.12; margin: 0 0 16px; max-width: 20ch;
    background: linear-gradient(100deg, var(--ink) 40%, var(--teal-strong));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .hero .lede { font-size: 1.02rem; line-height: 1.6; color: var(--ink-dim); max-width: 66ch; margin: 0 0 26px; }
  .cta {
    display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(120deg, var(--amber), var(--magenta));
    color: #fff; font-weight: 600; font-size: 0.95rem; padding: 13px 22px; border-radius: 999px; border: none; cursor: pointer;
    box-shadow: 0 8px 22px var(--panel-shadow);
  }
  .cta:hover { filter: brightness(1.06); }

  /* ---- panels --------------------------------------------------------------- */
  .panel { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px; box-shadow: 0 10px 30px var(--panel-shadow); padding: 26px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .panel + .panel { margin-top: 20px; }
  .content-section { max-width: 1120px; margin: 22px auto; }
  .content-section.prose p { line-height: 1.65; color: var(--ink-dim); font-size: 0.98rem; max-width: 74ch; }
  .content-section h2 { font-family: var(--display); font-size: 1.35rem; margin: 0 0 12px; }

  .section-label { font-family: var(--mono); font-size: 0.68rem; color: var(--amber-strong); letter-spacing: 0.06em; margin: 0 0 14px; text-transform: uppercase; }

  /* ---- tool grid (home) ------------------------------------------------------ */
  .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 4px; }
  .tool-card { background: var(--bg0); border: 1px solid var(--line); border-radius: 12px; padding: 20px; text-decoration: none; color: inherit; display: block; transition: transform 0.15s ease, border-color 0.15s ease; }
  .tool-card:hover { transform: translateY(-3px); border-color: var(--teal); }
  .tool-card .tc-icon { font-size: 1.6rem; margin-bottom: 10px; display: block; }
  .tool-card h3 { margin: 0 0 6px; font-family: var(--display); font-size: 1.02rem; }
  .tool-card p { margin: 0; font-size: 0.84rem; color: var(--ink-dim); line-height: 1.5; }

  /* ---- reference table -------------------------------------------------------- */
  .ref-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
  .ref-table th { text-align: left; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px; border-bottom: 2px solid var(--line); }
  .ref-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); color: var(--ink-dim); }
  .ref-table tr:last-child td { border-bottom: none; }
  .ref-table td.mono { font-family: var(--mono); color: var(--teal-strong); font-weight: 600; }
  .ref-table td:first-child { color: var(--ink); font-weight: 600; }

  /* ---- faq -------------------------------------------------------------------- */
  .faq dt { font-weight: 700; margin: 18px 0 6px; color: var(--ink); }
  .faq dt:first-child { margin-top: 0; }
  .faq dd { margin: 0 0 4px; color: var(--ink-dim); line-height: 1.6; font-size: 0.95rem; }

  /* ---- blogs ------------------------------------------------------------------- */
  .blog-view { display: none; }
  .blog-view.active { display: block; }
  .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 4px; }
  .article-card {
    display: block; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--panel-edge);
    border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px var(--panel-shadow); transition: transform 0.15s ease, border-color 0.15s ease;
  }
  .article-card:hover { transform: translateY(-3px); border-color: var(--teal); }
  .article-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
  .article-card-body { padding: 18px 20px 22px; }
  .article-tag { display: inline-block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber-strong); margin-bottom: 8px; }
  .article-card h3 { font-family: var(--display); font-size: 1.08rem; line-height: 1.35; margin: 0 0 8px; }
  .article-card p { font-size: 0.86rem; color: var(--ink-dim); line-height: 1.55; margin: 0 0 12px; }
  .article-readmore { font-weight: 700; font-size: 0.82rem; color: var(--teal-strong); }

  .article-view { max-width: 74ch; margin: 0 auto; }
  .article-back {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
    color: var(--teal-strong); font-family: var(--sans); font-weight: 600; font-size: 0.85rem; padding: 8px 0; margin: 18px 0;
  }
  .article-back:hover { text-decoration: underline; }
  .article-title { font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.25; margin: 4px 0 10px; }
  .article-meta { font-size: 0.82rem; color: var(--ink-faint); margin: 0 0 20px; }
  .article-view h2 { font-family: var(--display); font-size: 1.28rem; margin: 34px 0 12px; }
  .article-view h3 { font-family: var(--display); font-size: 1.05rem; margin: 22px 0 8px; }
  .article-view p { line-height: 1.7; color: var(--ink-dim); font-size: 0.98rem; margin: 0 0 14px; }
  .article-view ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-dim); line-height: 1.7; font-size: 0.98rem; }
  .article-view li { margin-bottom: 4px; }
  .article-view strong { color: var(--ink); }
  .article-callout {
    font-family: var(--mono); font-size: 0.86rem; color: var(--teal-strong); background: var(--bg0);
    border: 1px dashed var(--line); border-radius: 8px; padding: 14px 16px; line-height: 1.7; margin: 0 0 16px;
  }
  .article-figure { margin: 22px 0; }
  .article-figure img { width: 100%; border-radius: 12px; display: block; box-shadow: 0 10px 30px var(--panel-shadow); }
  .article-figure figcaption { font-size: 0.8rem; color: var(--ink-faint); margin-top: 8px; line-height: 1.5; }
  .article-table-wrap { overflow-x: auto; margin: 0 0 16px; }
  .article-table-wrap .ref-table { min-width: 560px; }

  /* ---- masthead (tool pages) ------------------------------------------------ */
  header.masthead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 2px solid var(--line); padding: 26px 0 16px; margin-bottom: 24px; flex-wrap: wrap; }
  header.masthead h2 { font-family: var(--display); font-size: 1.5rem; margin: 0 0 4px; }
  header.masthead p { margin: 0; color: var(--ink-dim); font-size: 0.92rem; max-width: 50ch; line-height: 1.5; }
  .plate { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); text-align: right; line-height: 1.6; white-space: nowrap; }

  .crs-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
  .crs-field label { display: block; font-size: 0.72rem; color: var(--ink-dim); margin-bottom: 6px; }
  select, input[type="text"], input[type="number"] {
    width: 100%; padding: 11px 12px; font-family: var(--sans); font-size: 0.9rem; color: var(--ink);
    background: var(--bg0); border: 1px solid var(--line); border-radius: 8px; appearance: none;
  }
  select { cursor: pointer; }
  input[type="number"] { font-family: var(--mono); }
  .swap-btn {
    width: 36px; height: 36px; margin-top: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg0);
    color: var(--ink); cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .swap-btn:hover { border-color: var(--teal); background: var(--teal-glow); transform: rotate(180deg); }

  .specplate { margin-top: 16px; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); background: var(--bg0); border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .specplate div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .specplate b { color: var(--ink); font-weight: 600; }

  /* ---- mode tabs -------------------------------------------------------------- */
  .mode-tabs { display: flex; gap: 8px; margin: 20px 0 4px; background: var(--bg0); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
  .mode-tab {
    flex: 1; text-align: center; padding: 10px 14px; border-radius: 999px; border: none; background: transparent;
    color: var(--ink-dim); font-family: var(--sans); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.15s ease;
  }
  .mode-tab.active { background: linear-gradient(120deg, var(--teal), var(--amber)); color: #fff; box-shadow: 0 4px 12px var(--panel-shadow); }
  .mode-pane { display: none; margin-top: 18px; }
  .mode-pane.active { display: block; }

  /* ---- single coordinate / value forms -------------------------------------- */
  .xy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .xy-field label { display: block; font-size: 0.72rem; color: var(--ink-dim); margin-bottom: 6px; }

  /* ---- unit converter results grid ------------------------------------------ */
  .unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 20px; }
  .unit-card { background: var(--bg0); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
  .unit-card.from { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
  .unit-card .uc-label { font-size: 0.7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
  .unit-card .uc-value { font-family: var(--mono); font-size: 1.02rem; color: var(--teal-strong); font-weight: 600; word-break: break-all; }

  /* ---- coordinate converter redesign --------------------------------------- */
  #page-converter .coordinate-wrap { max-width: 1180px; }
  #page-converter .coordinate-head { margin-bottom: 18px; }
  #page-converter .eyebrow, #page-converter .panel-kicker { font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.10em; color: var(--amber-strong); text-transform: uppercase; }
  #page-converter .coordinate-head h2 { font-size: clamp(1.8rem, 3vw, 2.35rem); margin: 7px 0 7px; }
  #page-converter .coordinate-head p { max-width: 72ch; }
  #page-converter .coordinate-badge { min-width: 135px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg0); text-align: center; }
  #page-converter .coordinate-badge strong { display:block; font-family:var(--display); font-size:1.7rem; color:var(--teal-strong); }
  #page-converter .coordinate-badge span { font-size:.7rem; color:var(--ink-faint); }
  #page-converter .coordinate-hero-grid { display:grid; grid-template-columns:minmax(0, 1fr) 290px; gap:16px; margin-bottom:16px; }
  #page-converter .coordinate-selector-panel { padding:22px; }
  #page-converter .coordinate-info-card { padding:22px; }
  #page-converter .coordinate-crs-row { margin-top:13px; }
  #page-converter .field-hint { margin-top:7px; font-size:.72rem; color:var(--ink-faint); line-height:1.4; }
  #page-converter .quick-presets { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
  #page-converter .quick-presets > span { font-family:var(--mono); font-size:.66rem; color:var(--ink-faint); margin-right:3px; }
  #page-converter .quick-presets button { border:1px solid var(--line); background:var(--bg0); color:var(--ink-dim); border-radius:999px; padding:7px 10px; font-size:.68rem; cursor:pointer; }
  #page-converter .quick-presets button:hover { border-color:var(--teal); color:var(--ink); background:var(--teal-glow); }
  #page-converter .format-stat { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.78rem; }
  #page-converter .format-stat span { color:var(--ink-faint); }
  #page-converter .format-stat strong { font-family:var(--mono); color:var(--ink); font-size:.7rem; }
  #page-converter .coordinate-info-card p { color:var(--ink-faint); font-size:.72rem; line-height:1.55; margin:14px 0 0; }
  #page-converter .coordinate-workspace { padding:24px; }
  #page-converter .workspace-topline { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
  #page-converter .workspace-topline h3 { margin:5px 0 0; font-family:var(--display); font-size:1.18rem; }
  #page-converter .coordinate-tabs { width:280px; margin:0; }
  #page-converter .conversion-strip { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin:18px 0 2px; padding:12px 15px; border:1px solid var(--line); border-radius:10px; background:var(--bg0); }
  #page-converter .conversion-strip > div:not(.strip-arrow) { display:flex; flex-direction:column; gap:4px; min-width:0; }
  #page-converter .strip-label { font-family:var(--mono); font-size:.58rem; color:var(--ink-faint); letter-spacing:.08em; }
  #page-converter .conversion-strip strong { font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-converter .strip-arrow { color:var(--teal-strong); font-size:1.15rem; }
  #page-converter .coordinate-input-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  #page-converter .z-field { display:none; }
  #page-converter .z-field.visible { display:block; }
  #page-converter .coordinate-actions { display:grid; grid-template-columns:1fr 110px; gap:10px; }
  #page-converter .secondary-btn { margin-top:20px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--bg0); color:var(--ink-dim); font-weight:700; cursor:pointer; }
  #page-converter .secondary-btn:hover { border-color:var(--teal); color:var(--ink); }
  #page-converter .coordinate-dropzone { padding:34px 18px; }
  #page-converter .drop-icon { width:38px; height:38px; display:grid; place-items:center; margin:0 auto 10px; border-radius:50%; background:var(--teal-glow); color:var(--teal-strong); font-size:1.2rem; }
  #page-converter .coordinate-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
  #page-converter .coordinate-detail-grid .panel { min-width:0; }
  #page-converter .coordinate-specplate { margin-top:12px; }
  #page-converter .coordinate-log-panel .console { min-height:112px; max-height:170px; }
  #page-converter .coordinate-notes { margin-top:16px; }
  #page-converter .coordinate-family-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
  #page-converter .coordinate-family-grid > div { padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--bg0); }
  #page-converter .family-code { display:block; font-family:var(--mono); font-size:.62rem; color:var(--amber-strong); margin-bottom:7px; }
  #page-converter .coordinate-family-grid strong { font-size:.78rem; line-height:1.35; display:block; }
  #page-converter .coordinate-family-grid p { color:var(--ink-faint); font-size:.7rem; line-height:1.5; margin:7px 0 0; }
  @media (max-width: 820px) {
    #page-converter .coordinate-hero-grid, #page-converter .coordinate-detail-grid { grid-template-columns:1fr; }
    #page-converter .coordinate-family-grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 620px) {
    #page-converter .coordinate-crs-row, #page-converter .coordinate-input-grid, #page-converter .coordinate-actions { grid-template-columns:1fr; }
    #page-converter .swap-btn { margin:0 auto; transform:rotate(90deg); }
    #page-converter .swap-btn:hover { transform:rotate(270deg); }
    #page-converter .workspace-topline { flex-direction:column; }
    #page-converter .coordinate-tabs { width:100%; }
    #page-converter .coordinate-family-grid { grid-template-columns:1fr; }
    #page-converter .coordinate-badge { display:none; }
  }

  /* ---- dropzone (CSV) -------------------------------------------------------- */
  .dropzone { border: 2px dashed var(--line); border-radius: 12px; padding: 26px 18px; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; position: relative; }
  .dropzone.drag-over { border-color: var(--amber); background: var(--amber-glow); }
  .dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .dropzone .dz-title { font-size: 0.95rem; margin-bottom: 4px; }
  .dropzone .dz-sub { font-size: 0.78rem; color: var(--ink-faint); }
  .dropzone .dz-file { margin-top: 10px; font-family: var(--mono); font-size: 0.78rem; color: var(--amber-strong); }

  .convert-btn {
    margin-top: 20px; width: 100%; padding: 14px; font-family: var(--sans); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em;
    background: linear-gradient(120deg, var(--amber), var(--magenta)); color: #fff; border: none; border-radius: 10px; cursor: pointer;
    transition: filter 0.15s ease;
  }
  .convert-btn:hover:not(:disabled) { filter: brightness(1.07); }
  .convert-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; background: var(--ink-faint); }

  .console { font-family: var(--mono); font-size: 0.78rem; line-height: 1.65; height: 100%; min-height: 220px; max-height: 420px; overflow-y: auto; }
  .console .line { color: var(--ink-dim); }
  .console .line.ok { color: var(--ok); }
  .console .line.err { color: var(--err); }
  .console .line .t { color: var(--ink-faint); margin-right: 8px; }
  .console .empty { color: var(--ink-faint); font-style: italic; }

  .result { margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 0.85rem; display: none; }
  .result.show { display: block; }
  .result.ok { background: var(--ok-bg); color: var(--ok); }
  .result.err { background: var(--err-bg); color: var(--err); }

  .reflist { font-size: 0.8rem; color: var(--ink-dim); line-height: 1.9; }
  .reflist code { font-family: var(--mono); background: var(--bg0); padding: 1px 5px; border-radius: 4px; color: var(--ink); }

  footer.page-footer { margin-top: 28px; font-size: 0.74rem; color: var(--ink-faint); line-height: 1.7; border-top: 1px solid var(--line); padding-top: 14px; }
  footer.site-footer { max-width: 1120px; margin: 8px auto 40px; font-size: 0.78rem; color: var(--ink-faint); text-align: center; padding: 0 20px; }

  /* ---- global footer (visible on every page) -------------------------------- */
  footer.global-footer { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 20px; }
  .global-footer-inner { max-width: 1120px; margin: 0 auto; padding: 22px 20px 34px; text-align: center; }
  .gf-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 4px; margin-bottom: 12px; }
  .gf-links a { color: var(--ink-dim); text-decoration: none; font-size: 0.82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
  .gf-links a:hover { color: var(--ink); background: var(--bg0); }
  .gf-copy { margin: 0; font-size: 0.74rem; color: var(--ink-faint); line-height: 1.6; max-width: 70ch; margin-left: auto; margin-right: auto; }

  /* ---- result popup modal ---------------------------------------------------- */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
    background: rgba(7,16,33,0.55); backdrop-filter: blur(3px); padding: 20px;
  }
  .modal-overlay.show { display: flex; }
  .modal-box {
    width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35); padding: 26px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    animation: popIn 0.2s ease;
  }
  @keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .modal-box h3 { margin: 0 0 4px; font-family: var(--display); font-size: 1.15rem; }
  .modal-box .modal-sub { margin: 0 0 16px; font-size: 0.8rem; color: var(--ink-faint); }
  .modal-coord {
    font-family: var(--mono); font-size: 0.95rem; color: var(--ink); background: var(--bg0); border: 1px solid var(--line);
    border-radius: 8px; padding: 14px; line-height: 1.8; word-break: break-word; user-select: all;
  }
  .modal-coord b { color: var(--teal-strong); }
  .modal-actions { display: flex; gap: 10px; margin-top: 18px; }
  .modal-actions button {
    flex: 1; padding: 11px; border-radius: 8px; border: none; font-family: var(--sans); font-weight: 600; font-size: 0.85rem; cursor: pointer;
  }
  .modal-copy { background: linear-gradient(120deg, var(--teal), var(--amber)); color: #fff; }
  .modal-copy.copied { background: var(--ok); }
  .modal-close { background: var(--bg0); color: var(--ink-dim); border: 1px solid var(--line) !important; }

  @media (max-width: 560px) {
    .xy-row.three { grid-template-columns: 1fr; }
  }

/* Responsive navigation: padded anchors must occupy their own layout boxes. */
.nav-menu a { display:flex; align-items:center; min-height:44px; box-sizing:border-box; }
.nav-menu li { min-width:0; }
@media (max-width:900px) {
  .nav-menu { max-height:calc(100dvh - 84px); overscroll-behavior:contain; background:var(--bg1); }
  .nav-menu li { flex:0 0 auto; }
  .nav-menu a { width:100%; border-radius:9px; white-space:normal; line-height:1.35; }
  .nav-toggle { width:44px; height:44px; flex:0 0 44px; }
}
@media (min-width:901px) { .nav-menu { flex-wrap:wrap; border-radius:18px; max-width:100%; } }