/* ══════════════════════════════════════════════════════════════════════════
   StateProof — State Directory
   Loaded ONLY by states.html, scoped under `body.sp-dir` so nothing here can
   reach the workspace, Home, the state pages, Coverage or Maps.

   Racing Green, per docs/DESIGN_SYSTEM.md. Same language as Home: one
   continuous surface, hairline divisions, cream lower band, brass accent.
   No cards, no shadows, no glassmorphism.

   ⛔ shell.css IS STILL LOADED and is LIGHT-THEMED (DESIGN_SYSTEM §3.4).
   Every property not redeclared below keeps shell.css's light value — that is
   how a white band reached the dark Workspace. Section 0 exists purely to
   neutralise it. Do not delete a rule there because it "looks redundant".

   ⚠ Semantic tokens (--live/--public/--acct/--paid/--off + -bg/-ink) come from
   shell.css:15-19 and are NEVER redeclared here, so map fills, legends, pills
   and the address palette cannot drift. The single exception is --live, which
   home.css:32 already deepens for dark surfaces.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 0. shell.css NEUTRALISATION ═════════════════════════════════════════ */
/* html carries the dark background too, or overscroll exposes shell.css's
   light canvas (DESIGN_SYSTEM §5). */
html{background-color:#0e1a2b}

body.sp-dir{
  /* shell.css:23 sets background:var(--shell) #eef1f6. The wash must run from
     y=0 on BODY, never from a hero — §3.2: the header sits OUTSIDE the hero,
     so a wash anchored lower leaves the top strip a flat raw rectangle. */
  background-color:#0e1a2b;
  /* ⚡ SCROLL COST — the wash moved to body::before below. It was a
     background-attachment:fixed image here, which is viewport-anchored and so
     forces a full-viewport repaint of both gradients on every scroll frame.
     ::before is position:fixed — identical pixels, own compositor layer.
     §3.2 still satisfied: inset:0 runs the wash from y=0. */

  /* surfaces */
  --s-abyss:#0e1a2b; --s-navy:#122137; --s-navy2:#1a2d4a; --sunk:#0b1525;
  --s-cream:#f1f0ed; --s-cream2:#e6e5e2; --cream-line:#ccd0d6;
  --hink:#0b131f; --hink2:#2e394a; --hmuted:#5f6a7a;
  --on-dark:#f4f3f0; --on-dark2:#a9b5c6; --on-dark3:#6b798d;
  --brass:#c9a961; --brass-lo:#856813; --brass-hi:#e6cd8b;
  --e:cubic-bezier(.22,1,.36,1); --t-fast:160ms; --t-mid:280ms;
  /* Fluid on wide monitors. It was a hard 1400px, so on a ~2000px display the
     whole page sat in a 1400px column with ~300px of dead margin each side and
     read as shrunken, while the Workspace (full-width body) did not. The lower
     bound keeps every layout at or below 1400px byte-identical to what was
     verified; only genuinely wide screens grow. index.html .topbar carries the
     SAME value so the DESIGN_SYSTEM §4 header row still matches on all four pages. */
  --w-max:clamp(1400px, 92vw, 1840px);

  /* the one deliberate semantic override, matching home.css:32 */
  --live:#1d8a66;

  /* NOTE — §3.3: NO `background:` shorthand after this point. The shorthand
     resets background-image and puts the flat black slab straight back. Use
     background-color. */
  color:var(--on-dark);
}

/* The ambient wash — position:fixed reproduces background-attachment:fixed
   exactly (viewport-anchored, from y=0) but on its own compositor layer, so
   scrolling translates it instead of repainting it every frame. */
body.sp-dir::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1100px 620px at 66% -6%,#122b5166 0%,transparent 62%),
    radial-gradient(820px 480px at 8% -4%,#1d3c6b2e 0%,transparent 60%);
  background-repeat:no-repeat}

/* shell.css:26 — a{color:var(--blue)} + underline on hover */
body.sp-dir a{color:inherit;text-decoration:none}
body.sp-dir a:hover{text-decoration:none}

/* ══ 1. HEADER — DESIGN_SYSTEM §4 contract, identical to Home/Workspace ══ */
/* shell.css:30 paints .hdr navy with a 3px blue bottom border. */
.sp-dir .hdr{position:sticky;top:0;z-index:60;background-color:transparent;color:var(--on-dark);
  border-bottom:1px solid transparent;
  transition:background-color var(--t-mid) var(--e),border-color var(--t-mid) var(--e)}
.sp-dir .hdr.stuck{background-color:#0e1a2bf2;border-bottom-color:#c9a96124}
/* shell.css:31 — 1440px / 26px / 64px. The contract is 1400 / 48 / 70. */
.sp-dir .hdr-in{width:100%;max-width:var(--w-max);margin:0 auto;padding:0 48px;height:70px;
  display:flex;align-items:center;gap:56px}
/* shell.css:32-34 — blue gradient mark, 27px, gap 9, weight 750. */
.sp-dir .brand{display:flex;align-items:center;gap:11px;color:var(--on-dark);
  font-weight:640;font-size:17px;letter-spacing:-.3px;white-space:nowrap}
.sp-dir .brand .mk{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--brass),var(--brass-lo));color:#1a1408;
  font-size:11px;font-weight:750;box-shadow:inset 0 1px 0 #ffffff5c,0 3px 12px #c9a96140}
/* shell.css:35-38 — blue nav pills. */
.sp-dir .nav{display:flex;gap:4px;margin-left:0}
.sp-dir .nav a{padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:500;
  color:var(--on-dark2);background-color:transparent;
  transition:color var(--t-fast) var(--e),background-color var(--t-fast) var(--e)}
.sp-dir .nav a:hover{color:var(--on-dark);background-color:#c9a9611f;text-decoration:none}
.sp-dir .nav a.on{color:#fff;background-color:#c9a9612b}
.sp-dir .hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
/* shell.css:40-42 */
.sp-dir .cov-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap;
  color:var(--on-dark2);background-color:#c9a96117;border:1px solid #c9a9612b;
  padding:7px 14px;border-radius:999px}
.sp-dir .cov-pill i{width:7px;height:7px;border-radius:50%;background:var(--live);
  animation:sp-beat 2.6s ease-in-out infinite}
@keyframes sp-beat{0%,100%{box-shadow:0 0 0 0 #1d8a6666}50%{box-shadow:0 0 0 5px #1d8a6600}}
/* shell.css:43 paints .gov-note #0c1421 — DARKER THAN THE PAGE. That exact bug
   has been fixed twice already; it must stay transparent with a hairline. */
.sp-dir .gov-note{background-color:transparent;color:var(--on-dark3);font-size:11.5px;
  text-align:center;padding:7px 24px;line-height:1.5;border-bottom:1px solid #c9a96117}
.sp-dir .gov-note b{color:var(--on-dark2);font-weight:600}

/* ══ 2. MASTHEAD ═════════════════════════════════════════════════════════ */
.sp-dir .mast{max-width:var(--w-max);margin:0 auto;padding:56px 48px 0}
.sp-dir .mast-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
/* shell.css:53 — blue 9px eyebrow */
.sp-dir .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--brass-hi)}
.sp-dir .eyebrow::before{content:"";width:28px;height:1px;background:var(--brass-hi);opacity:.6}
.sp-dir .mast h1{margin:0;font-size:clamp(30px,3.4vw,48px);line-height:1.04;letter-spacing:-1.6px;
  font-weight:680;max-width:19ch;color:var(--on-dark)}
.sp-dir .mast h1 .ac{background:linear-gradient(100deg,#f0dda6,#c9a961 68%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* shell.css:54 — .sub is 11.5px muted */
.sp-dir .mast p.lede{margin:20px 0 0;max-width:62ch;font-size:15.5px;line-height:1.7;color:var(--on-dark2)}
/* shell.css:65-67 — light seg with a blue active pill */
.sp-dir .seg{display:inline-flex;gap:3px;background-color:#c9a96117;border:1px solid #c9a9612b;
  border-radius:999px;padding:4px;flex:none}
.sp-dir .seg button{border:0;background-color:transparent;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--on-dark2);padding:8px 20px;border-radius:999px;
  transition:color var(--t-fast) var(--e),background-color var(--t-fast) var(--e)}
.sp-dir .seg button:hover{color:var(--on-dark)}
.sp-dir .seg button.on{color:#1a1408;background-image:linear-gradient(160deg,var(--brass-hi),var(--brass));
  box-shadow:0 2px 10px #c9a96147}

/* ── count strip: editorial numerals + the filters, hairline-divided ───── */
.sp-dir .counts{display:flex;flex-wrap:wrap;gap:0;margin:44px 0 0;
  border-top:1px solid #c9a96124;border-left:1px solid #c9a96124}
.sp-dir .cbit{flex:1 1 0;min-width:150px;padding:20px 22px;position:relative;cursor:pointer;
  border-right:1px solid #c9a96124;border-bottom:1px solid #c9a96124;
  transition:background-color var(--t-fast) var(--e)}
.sp-dir .cbit::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--brass),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform var(--t-mid) var(--e)}
.sp-dir .cbit:hover{background-color:#c9a96110}
.sp-dir .cbit.on{background-color:#c9a96117}
.sp-dir .cbit.on::after{transform:scaleY(1)}
.sp-dir .cbit b{display:flex;align-items:baseline;gap:9px;font-family:ui-monospace,"SF Mono",monospace;
  font-size:30px;font-weight:680;letter-spacing:-1.2px;color:var(--on-dark)}
.sp-dir .cbit b i{width:10px;height:10px;border-radius:3px;flex:none;align-self:center;
  box-shadow:inset 0 0 0 1px #c9a96140}
.sp-dir .cbit span{display:block;margin-top:7px;font-size:12px;line-height:1.45;color:var(--on-dark3)}
.sp-dir i.sw-live{background:var(--live)}   .sp-dir i.sw-public{background:var(--public)}
.sp-dir i.sw-acct{background:var(--acct)}   .sp-dir i.sw-paid{background:var(--paid)}
.sp-dir i.sw-off{background:#3d4858}
.sp-dir i.sw-all{background:linear-gradient(135deg,var(--live),var(--public) 55%,var(--acct))}

.sp-dir .viewrow{display:flex;align-items:center;gap:16px;padding:18px 0 0}
.sp-dir .viewrow .vlabel{font-size:12px;color:var(--on-dark3)}
.sp-dir .viewrow .seg{margin-left:auto}

/* ══ 3. TABLE — rows on the surface, hairlines only, no container ════════ */
.sp-dir .tablewrap{max-width:var(--w-max);margin:0 auto;padding:8px 48px 0}
/* shell.css:88 sets border-collapse:collapse; separate is needed for sticky th */
.sp-dir table{width:100%;border-collapse:separate;border-spacing:0}
/* shell.css:89-90 — light --soft header */
.sp-dir thead th{position:sticky;top:70px;z-index:20;background-color:#0e1a2bf2;text-align:left;
  padding:14px 14px 11px;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark3);border-bottom:1px solid #ffffff1f}
/* shell.css:91-92 — light td + white row hover */
.sp-dir tbody td{padding:15px 14px;border-bottom:1px solid #c9a9611a;font-size:13px;
  color:var(--on-dark2);vertical-align:middle;background-color:transparent}
.sp-dir tbody tr{transition:background-color var(--t-fast) var(--e)}
.sp-dir tbody tr:hover td{background-color:transparent}
.sp-dir tbody tr:hover{background-image:linear-gradient(90deg,#c9a9611a,#ffffff03 62%,transparent)}
/* the access mode reads as a colour edge on the row itself — scannable while
   scrolling, without repainting the row or turning it into a card */
.sp-dir tbody td.stc{position:relative;padding-left:22px}
.sp-dir tbody td.stc::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:2px;background:#3d4858}
.sp-dir tr.m-live td.stc::before{background:var(--live)}
.sp-dir tr.m-emb td.stc::before,.sp-dir tr.m-embq td.stc::before,
.sp-dir tr.m-pub td.stc::before,.sp-dir tr.m-pubf td.stc::before{background:var(--public)}
.sp-dir tr.m-acct td.stc::before{background:var(--acct)}
.sp-dir tr.m-paid td.stc::before{background:var(--paid)}
/* shell.css:93-95 — .st-name/.st-ab blue-soft chip */
.sp-dir .stn{display:flex;align-items:center;gap:12px}
.sp-dir .ab{font-family:ui-monospace,"SF Mono",monospace;font-size:11.5px;font-weight:700;
  color:var(--brass-hi);background-color:#c9a9611a;padding:4px 8px;border-radius:6px;flex:none}
.sp-dir .stname{font-size:14.5px;font-weight:600;letter-spacing:-.2px;color:var(--on-dark)}
/* shell.css:70-77 — 8.5px uppercase pills on light -bg tints. Hue = meaning and
   is never reassigned; only the surface treatment changes for the dark page. */
.sp-dir .am{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:620;
  letter-spacing:0;text-transform:none;padding:5px 11px;border-radius:999px;white-space:nowrap}
.sp-dir .am i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.sp-dir .am.live{background-color:rgba(29,138,102,.20);color:#7fe0b4}
.sp-dir .am.public{background-color:rgba(91,135,187,.22);color:#a8c8ec}
.sp-dir .am.acct{background-color:rgba(216,149,47,.20);color:#f0c887}
.sp-dir .am.paid{background-color:rgba(198,95,86,.20);color:#f0a49c}
.sp-dir .am.off{background-color:#c9a9611a;color:var(--on-dark3)}
.sp-dir .srcname{font-family:ui-monospace,"SF Mono",monospace;font-size:11.5px;color:var(--on-dark2)}
/* shell.css:105 — .hint is 10px light grey */
.sp-dir .hint{color:var(--on-dark3);font-size:11.5px;line-height:1.5}
.sp-dir td.opt .hint{max-width:22ch;display:block}
.sp-dir td.act{text-align:right;white-space:nowrap}
.sp-dir .go{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  font-size:12.5px;font-weight:620;color:var(--brass-hi);border:1px solid #ffffff1f;
  background-color:transparent;
  transition:background-color var(--t-fast) var(--e),border-color var(--t-fast) var(--e),
             transform var(--t-fast) var(--e)}
.sp-dir .go:hover{background-color:#c9a9611f;border-color:#ffffff33;transform:translateX(2px);
  text-decoration:none}
.sp-dir .go.pri{color:#1a1408;border-color:transparent;
  background-image:linear-gradient(160deg,var(--brass-hi),var(--brass));box-shadow:0 2px 10px #c9a96147}
.sp-dir .go.pri:hover{filter:brightness(1.06);background-color:transparent}

/* ══ 4. MAP VIEW — map left, meaning right, one connected grid ═══════════ */
.sp-dir .mapgrid{max-width:var(--w-max);margin:0 auto;padding:8px 48px 0;
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:0;
  border-top:1px solid #c9a96124;border-left:1px solid #c9a96124}
/* The map section is kept in the DOM and toggled, never rebuilt — rebuilding it
   destroyed the iframe's browsing context and reloaded the whole map. `display`
   is set here, so it beats the UA sheet's [hidden]{display:none} and must be
   restated. */
.sp-dir .mapgrid[hidden]{display:none}
/* Dark under the frame: during the one genuine load the frame paints nothing,
   and an unpainted frame over a light backdrop is the white flash. */
.sp-dir .mapcell{border-right:1px solid #c9a96124;border-bottom:1px solid #c9a96124;padding:8px 0 0;
  min-width:0;background-color:#0e1a2b}
/* height is set by the host script to the frame's own content height — this is
   only the pre-load fallback. :root.dark sets overflow:hidden inside the frame,
   so an unsized frame CLIPS rather than scrolls. */
/* ⛔ NEVER set `color-scheme` on this iframe. map.html's own document is fully
   transparent by design so the dark page shows through it. Declaring
   color-scheme:dark here made the embedded document's used scheme disagree with
   its own (`normal`), and the browser then painted the frame canvas OPAQUE
   WHITE — a white slab straight through the middle of the Directory. The dark
   backdrop belongs on .mapcell above, never here. */
/* ⛔ WHITE FLASH — the frame starts at src="about:blank", which is an OPAQUE
   WHITE document. Its canvas paints over the dark .mapcell behind it, so the
   backdrop above cannot fix it: the white is INSIDE the frame. Hidden until
   map.html (transparent document) has actually loaded, then faded in. JS adds
   .ready on load, with a timeout fallback so the map can never stay invisible. */
.sp-dir .mapcell iframe{width:100%;height:620px;border:0;display:block;background-color:transparent;
  opacity:0;transition:opacity .25s var(--e)}
.sp-dir .mapcell iframe.ready{opacity:1}
.sp-dir .mapside{border-right:1px solid #c9a96124;border-bottom:1px solid #c9a96124;padding:30px 32px;
  min-width:0}
.sp-dir .mapside h3{margin:0 0 6px;font-size:17px;font-weight:650;letter-spacing:-.4px;color:var(--on-dark)}
.sp-dir .mapside p{margin:0 0 22px;font-size:13px;line-height:1.7;color:var(--on-dark2);max-width:44ch}
.sp-dir .keylist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.sp-dir .keylist li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;padding:11px 10px;
  border-radius:8px;transition:background-color var(--t-fast) var(--e)}
.sp-dir .keylist li:hover{background-color:#c9a96114}
.sp-dir .keylist i.sw{width:12px;height:12px;border-radius:4px;margin-top:3px;
  box-shadow:inset 0 0 0 1px #c9a96140}
.sp-dir .keylist b{font-size:13px;font-weight:600;color:var(--on-dark)}
.sp-dir .keylist em{font-style:normal;font-family:ui-monospace,"SF Mono",monospace;font-size:12px;
  color:var(--on-dark3)}
.sp-dir .keylist span{grid-column:2 / -1;font-size:12px;color:var(--on-dark3);line-height:1.55}
.sp-dir .mapside .rail-n{margin:22px 0 0;padding-top:16px;border-top:1px solid #c9a96124;
  font-size:11.5px;color:var(--on-dark3);line-height:1.65}

/* ══ 5. SOURCING — cream lower surface, one band, never a card ═══════════ */
.sp-dir .paper{margin-top:64px;background-color:var(--s-cream);
  border-top:1px solid var(--cream-line);color:var(--hink)}
.sp-dir .paper-in{max-width:var(--w-max);margin:0 auto;padding:0 48px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:0;border-left:1px solid var(--cream-line)}
.sp-dir .pcell{padding:40px 32px;border-right:1px solid var(--cream-line);
  border-bottom:1px solid var(--cream-line)}
.sp-dir .pcell.wide{grid-column:span 7}
.sp-dir .pcell.narrow{grid-column:span 5}
.sp-dir .pcell h4{margin:0 0 12px;font-size:18px;font-weight:650;letter-spacing:-.4px;color:var(--hink)}
.sp-dir .pcell p{margin:0 0 12px;font-size:13.5px;line-height:1.7;color:var(--hmuted);max-width:56ch}
.sp-dir .pcell p:last-child{margin-bottom:0}
.sp-dir .pcell b{color:var(--hink2);font-weight:650}

/* ══ 6. FOOT ═════════════════════════════════════════════════════════════ */
/* shell.css:46-47 — light greys, 1440/26 */
.sp-dir .foot{max-width:var(--w-max);margin:0 auto;padding:28px 48px 56px;
  color:var(--on-dark3);font-size:12px;line-height:1.8}
.sp-dir .foot b{color:var(--on-dark2);font-weight:620}

/* ══ 7. LOADING / FAILURE ════════════════════════════════════════════════ */
.sp-dir .loading{max-width:var(--w-max);margin:0 auto;padding:56px 48px;
  color:var(--on-dark3);font-size:13px;line-height:1.7}

/* ══ 8. RESPONSIVE ═══════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .sp-dir .mapgrid{grid-template-columns:1fr}
  .sp-dir .mast-in{grid-template-columns:1fr;align-items:start;gap:28px}
  .sp-dir .pcell.wide,.sp-dir .pcell.narrow{grid-column:span 12}
}
@media (max-width:860px){
  /* shell.css:194-201 already wraps the header; re-state the dark values it
     does not carry. */
  .sp-dir .hdr-in{height:auto;min-height:56px;padding:12px 20px;flex-wrap:wrap;gap:12px}
  .sp-dir .nav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-left:0}
  .sp-dir .nav a{white-space:nowrap;padding:7px 13px;font-size:13px}
  .sp-dir .hdr-r{margin-left:auto}
  .sp-dir .cov-pill{font-size:11.5px;padding:6px 11px}
  .sp-dir .gov-note{text-align:left;padding:7px 20px}
  .sp-dir .mast,.sp-dir .tablewrap,.sp-dir .mapgrid,.sp-dir .foot,
  .sp-dir .paper-in,.sp-dir .loading{padding-left:20px;padding-right:20px}
  .sp-dir .mast{padding-top:36px}
  .sp-dir .cbit{min-width:50%}
  .sp-dir thead{display:none}
  .sp-dir tbody tr{display:block;border-bottom:1px solid #c9a96124;padding:10px 0}
  .sp-dir tbody tr:hover{background-image:none}
  .sp-dir tbody td{display:flex;gap:12px;border:0;padding:5px 14px}
  .sp-dir tbody td.stc{padding-left:22px}
  .sp-dir tbody td::before{content:attr(data-l);flex:0 0 88px;font-size:9px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark3);padding-top:4px}
  .sp-dir tbody td.stc::before{content:"";flex:none;padding-top:0}
  .sp-dir td.act{justify-content:flex-start;text-align:left}
  .sp-dir .mapside{padding:24px 20px}
  .sp-dir .pcell{padding:32px 20px}
}

/* ══ 8. LARGE SCREENS ════════════════════════════════════════════════════
   Every other breakpoint in this file is `max-width` — the design scaled DOWN
   from a laptop and had no upward scale at all, so on a ~2000px monitor it kept
   laptop type in a 1400px column and read as shrunken. This is the missing
   upward step: one size up on content type, more air in the rhythm.

   The header is deliberately NOT touched — its metrics are the DESIGN_SYSTEM §4
   contract shared with Home, the Workspace and the state pages, and bumping it
   here alone would put the four headers out of agreement again.

   Prose measures stay in `ch` throughout (62ch / 44ch / 56ch), so raising the
   font size widens the text column by exactly the same proportion and line
   length stays where a designer set it. Nothing here changes meaning, colour or
   layout structure — only scale. */
@media (min-width:1700px){
  .sp-dir .mast{padding-top:72px}
  .sp-dir .mast p.lede{font-size:17px}
  .sp-dir .counts{margin-top:52px}
  .sp-dir .cbit{padding:24px 26px}
  .sp-dir .cbit span{font-size:13px}
  .sp-dir .viewrow .vlabel{font-size:13px}
  .sp-dir tbody td{padding:18px 18px;font-size:14.5px}
  .sp-dir .stname{font-size:16px}
  .sp-dir .ab{font-size:12.5px}
  .sp-dir .am{font-size:12.5px;padding:6px 12px}
  .sp-dir .srcname{font-size:12.5px}
  .sp-dir .hint{font-size:12.5px}
  .sp-dir .go{font-size:13.5px}
  .sp-dir .mapside{padding:38px 40px}
  .sp-dir .mapside h3{font-size:19px}
  .sp-dir .mapside p{font-size:14.5px}
  .sp-dir .keylist b{font-size:14px}
  .sp-dir .keylist em{font-size:13px}
  .sp-dir .keylist span{font-size:13px}
  .sp-dir .rail-n{font-size:12.5px}
  .sp-dir .pcell h4{font-size:20px}
  .sp-dir .pcell p{font-size:15px}
}