html[data-nlive-frame]:has(.pi-directory) {
  --frame-paper:#f8fbfc; --frame-surface:#fff; --frame-ink:#203956;
  --frame-green:#203956; --frame-line:#cfdee5;
}
body[data-frame-page="areas"] #main .pi-directory {
  --pi-ink:#203956; --pi-soft:#486175; --pi-rule:#c6d9e2; --pi-wash:#e0f0f6;
  color:var(--pi-ink); background:#fff;
}
.pi-directory *, .pi-directory *::before, .pi-directory *::after {box-sizing:border-box}
.pi-directory [hidden] {display:none !important}
.pi-directory :is(h1,h2,h3,p,figure) {padding:0;margin:0}
.pi-directory a {color:var(--pi-ink);text-underline-offset:.22em;}
.pi-directory :is(a,summary,input,button):focus-visible {outline:3px solid #ad4b00;outline-offset:2px}
.pi-hero {
  display:grid; grid-template-columns:minmax(0,1.34fr) minmax(220px,.8fr);
  background:linear-gradient(112deg,#edf7fa,#d9ebf3);align-items:stretch;overflow:hidden;
}
.pi-directory .pi-copy {
  align-self:center; padding:clamp(24px,3.6vw,46px) var(--frame-gutter);
}
body[data-frame-page="areas"] #main .pi-copy h1 {
  color:#1d384f; font-size:clamp(1.8rem,3.4vw,3.15rem); line-height:1.26;
  font-weight:700; margin:0; letter-spacing:-.045em; text-wrap:balance;
}
.pi-copy p {color:#384e60; margin:.72rem 0 .7rem; max-width:33em; line-height:1.8; font-size:clamp(.9rem,1.3vw,1.03rem)}
.pi-directory .pi-choice {
  display:inline-flex; align-items:center; gap:.95rem; min-height:44px;padding:.5rem .98rem;
  background:#24455e; color:white; font-size:.92rem; font-weight:700; text-decoration:none;border-radius:4px;
}
.pi-choice:hover {text-decoration:underline}
.pi-actions {display:flex;align-items:center;flex-wrap:wrap;gap:0 .8rem}
.pi-mobile-consult {display:none}
.pi-directory .pi-feature {position:relative;min-width:0;min-height:100%;overflow:hidden;}
.pi-feature img {
  width:100%;height:100%;position:absolute;inset:0;display:block;object-fit:cover;
  object-position:center 49%;border:0;border-radius:0;
}
.pi-feature figcaption {
  position:absolute; inset:auto 0 0 auto; background:#163650ed; color:white;
  padding:0 .85rem; border-radius:4px 0 0 0;
}
.pi-feature figcaption a {display:inline-flex;align-items:center;min-height:44px;color:white; font-size:.8rem; font-weight:700; text-decoration:underline}
.pi-index {
  padding:clamp(20px,3vw,38px) var(--frame-gutter) clamp(28px,4vw,54px);
  display:grid;grid-template-columns:minmax(145px,.34fr) minmax(0,1fr);
  align-items:start;gap:clamp(22px,4vw,52px);scroll-margin-top:.6rem;
}
.pi-side {min-width:0;position:static;margin:0;padding:0;border:0;background:transparent;}
body[data-frame-page="areas"] #main .pi-index h2 {font-size:clamp(1.35rem,2.15vw,1.8rem);line-height:1.4;margin:0 0 .65rem;color:var(--pi-ink);letter-spacing:normal}
.pi-directory .pi-region-nav {display:block;position:static;padding:0;margin:0;background:transparent;color:var(--pi-ink);border:0}
.pi-region-nav a {
  display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--pi-rule);
  padding:4px .1rem;min-height:46px;text-decoration:none;font-size:.95rem;font-weight:700;
}
.pi-region-nav a span {font-size:.9rem;color:#466980}
.pi-region-nav a:hover, .pi-pref:hover .pi-pref-name {text-decoration:underline}
.pi-directory .pi-consult {padding:1.04rem .95rem .7rem; margin-top:1.45rem; background:#eef4f8; border-top:3px solid #82a9bd}
body[data-frame-page="areas"] #main .pi-consult h2 {margin:0;font-size:1.02rem}
.pi-consult p {margin:.35rem 0 .12rem;line-height:1.65;color:#425b6c;font-size:.85rem}
.pi-consult a {display:inline-flex;align-items:center;min-height:44px;font-size:.89rem;font-weight:700}
.pi-selection {min-width:0;padding:0;margin:0;border:0;box-shadow:none;background:transparent}
.pi-search {margin:0 0 .86rem;max-width:40rem}
.pi-search label {display:block;font-size:.84rem;color:#3a5469;margin:0 0 .32rem}
.pi-form-row {display:flex;gap:.46rem}
.pi-form-row input, .pi-form-row button {min-width:0;box-sizing:border-box;min-height:44px;border-radius:4px;font:inherit;font-size:.94rem}
.pi-form-row input {flex:1;padding:.4rem .65rem;border:1px solid #8099aa;background:white;color:#203956}
.pi-form-row button {border:1px solid #bccdd6;background:white;color:#28475a;padding:.34rem .7rem;cursor:pointer}
.pi-form-row button:disabled {color:#597080;background:#f5f8fa;cursor:default}
.pi-search [role="status"] {color:#3a5469;font-size:.87rem;margin:.36rem 0 0;line-height:1.5}
.pi-search [role="status"]:empty {display:none}
.pi-region {margin:0 0 1.15rem;padding:0;border:0;background:transparent;scroll-margin-top:.75rem}
.pi-region:last-child {margin-bottom:0}
.pi-directory .pi-wide-list h3 {
  display:flex;align-items:center;gap:.6rem;background:#eaf3f7;
  padding:.36rem .67rem;margin:0;color:var(--pi-ink);font-size:1.08rem;font-weight:700;line-height:1.5;
}
.pi-region small {font-weight:400;color:#4b6475;font-size:.74rem;line-height:1.45}
.pi-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:.78rem}
.pi-directory .pi-pref {
  display:flex;min-width:0;min-height:52px;flex-direction:column;justify-content:center;position:relative;
  padding:.45rem .95rem .42rem .2rem;border-bottom:1px solid var(--pi-rule);text-decoration:none;background:transparent;
}
.pi-pref::after {content:"";width:6px;height:6px;position:absolute;right:4px;top:50%;border:solid #6f899b;border-width:1.5px 1.5px 0 0;transform:translateY(-50%) rotate(45deg)}
.pi-pref-name {font-size:.97rem;line-height:1.5;color:#1e4158;font-weight:700}
.pi-topic {font-size:.76rem;line-height:1.5;color:var(--pi-soft);overflow-wrap:anywhere}
.pi-directory .pi-narrow-list {display:none}
@media (min-width:701px) and (max-width:890px) {
  .pi-index {grid-template-columns:145px minmax(0,1fr);gap:22px}
  .pi-list {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px) {
  .pi-hero {grid-template-columns:minmax(0,1fr)}
  .pi-directory .pi-copy {padding:19px var(--frame-gutter) 13px}
  .pi-directory .pi-feature {min-height:108px;max-height:162px;aspect-ratio:3.4;margin:0 var(--frame-gutter) 15px;border-radius:3px 15px 3px 3px;}
  .pi-feature img {object-position:center 44%}
  .pi-copy p {margin:.32rem 0 .4rem;line-height:1.65}
  .pi-feature figcaption {padding:0 .55rem}
  .pi-feature figcaption a {font-size:.75rem}
  .pi-index {display:flex;flex-direction:column;align-items:stretch;gap:.9rem;padding-top:17px}
  .pi-selection {order:0}
  .pi-side {display:none}
  .pi-mobile-consult {display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:.85rem}
  .pi-directory .pi-region-nav,.pi-directory .pi-wide-list {display:none}
  .pi-directory .pi-region {margin:0;}
  .pi-directory .pi-narrow-list {
    display:block;background:transparent;color:var(--pi-ink);margin:0;padding:0;border:0;border-bottom:1px solid var(--pi-rule);
    border-radius:0;box-shadow:none;
  }
  .pi-directory .pi-narrow-list summary {
    display:flex;align-items:center;gap:.55rem;min-height:50px;
    padding:.3rem .25rem;font-size:1.03rem;font-weight:700;cursor:pointer;list-style:none;color:var(--pi-ink)
  }
  .pi-narrow-list summary::-webkit-details-marker {display:none}
  .pi-narrow-list summary small {margin-left:auto}
  .pi-narrow-list summary::after {content:"";flex:none;width:8px;height:8px;margin:0 8px 4px 2px;border:solid #487087;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .pi-narrow-list[open] summary {background:#eaf3f7}
  .pi-narrow-list[open] summary::after {transform:rotate(225deg);margin-bottom:-4px}
  .pi-list {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.65rem}
  .pi-directory .pi-consult {margin:0;padding:.76rem .9rem .5rem}
}
.pi-hero:not(:has(.pi-feature)) {grid-template-columns:minmax(0,1fr)}
