:root { --md-primary-fg-color: #12645a; --md-accent-fg-color: #12645a; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.md-grid { max-width: 82rem; }
.md-typeset { font-size: .86rem; line-height: 1.7; }
.md-typeset h1 { color: #133b35; font-weight: 750; letter-spacing: -.035em; }
.md-typeset h2 { color: #164f46; font-weight: 650; }
.bp-status { font-size: .67rem; color: #52564c; border-left: .18rem solid #b08a36;
  padding: .4rem .7rem; background: #faf7ef; }
.bp-agent { font-size: .72rem; color: #164f46; padding: .55rem .75rem;
  background: #edf5f1; border-left: .18rem solid #12645a; }
.bp-flow { border-radius: .7rem; padding: 1.1rem; background: #e6f2ed;
  color: #164f46; font-weight: 650; line-height: 2; }
.bp-languages { position: relative; font-size: .7rem; margin: 0 .7rem; }
.bp-languages summary { cursor: pointer; padding: .5rem; }
.bp-languages ul { position: absolute; top: 100%; right: 0; min-width: 9rem;
  list-style: none; margin: 0; padding: .4rem; border-radius: .4rem;
  color: #173f37; background: white; box-shadow: 0 .2rem 1rem #0003; }
.bp-languages li a { display: block; padding: .5rem .8rem; }
.bp-languages a:hover, .bp-languages a[aria-current] { background: #e6f2ed; }
a:focus-visible, summary:focus-visible { outline: 3px solid #cc8428; outline-offset: 3px; }
.md-typeset table:not([class]) th { background: #edf5f1; color: #173f37; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
/* OFOps portal: visible routes, readable sections, restrained brand treatment. */
body { background: #fcfcf8; }
.md-header { background: #173f37; box-shadow: none; border-bottom: 1px solid #4d6e62; }
.md-main__inner { margin-top: 1.5rem; }
.md-typeset h2 { padding-top: 1.2rem; border-top: 1px solid #d4ded6; margin-top: 2.3rem; }
.md-typeset h3 { font-weight: 650; }
.bp-hero { margin: .5rem 0 1.8rem; }
.bp-hero .bp-eyebrow { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #547261; }
.bp-hero h1 { font-size: clamp(1.8rem, 3.7vw, 3rem); max-width: 23ch; line-height: 1.12; margin: .6rem 0 1rem; }
.bp-hero > p:last-child { max-width: 60ch; color: #526059; font-size: .95rem; }
.bp-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.md-typeset .bp-card { position: relative; display: block; padding: 1.1rem; border: 1px solid #b9ccbf; background: #f0f5ec; color: #173f37; border-radius: .3rem; }
.bp-card span { display: block; font-size: .6rem; color: #5d7466; margin-bottom: 1rem; letter-spacing: .1em; }
.bp-card strong { display: block; font-size: .87rem; line-height: 1.3; }
.bp-card p { font-size: .72rem; line-height: 1.5; margin: .6rem 0 1rem; color: #536457; }
.bp-card b { position: absolute; bottom: .65rem; right: .8rem; }
.bp-card:hover { border-color: #12645a; background: #e5eee1; }
.bp-quick { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding: .8rem 0 1.2rem; border-bottom: 1px solid #d4ded6; font-size: .7rem; }
.bp-native { padding: .1rem 1rem 1rem; border: 1px solid #b9ccbf; background: #f0f5ec; }
.bp-native h2 { border: 0; margin-top: .8rem; padding-top: 0; }
.md-typeset pre { border: 1px solid #d4ded6; }
@media (max-width: 700px) { .bp-entries { grid-template-columns: 1fr; } .bp-card span { margin-bottom: .4rem; } .bp-card p { margin-bottom: .3rem; } }