/* Shared visual language for every STW Online Manual. */
:root { --ink:#12202c; --muted:#536371; --paper:#f3f6f7; --panel:#fff; --panel-soft:#f7fbfb; --line:#d6e0e4; --accent:#197a75; --accent-dark:#0d5d61; --accent-pale:#e8f6f3; --dark:#123846; --warning:#9a6114; --warning-pale:#fff7e9; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif; } main { max-width:1080px; margin:auto; padding:0 24px 64px; } header { margin:0 -24px; padding:4.5rem max(24px,calc((100vw - 1032px) / 2)) 4rem; color:#fff; background:linear-gradient(125deg,#102b3a,#17656a); }
h1,h2,h3 { line-height:1.18; } h1 { margin:0; font-size:clamp(2.4rem,7vw,4.8rem); } h2 { margin:0 0 1rem; color:var(--dark); font-size:clamp(1.45rem,3vw,2.2rem); } h3 { margin:1.55rem 0 .45rem; color:var(--dark); font-size:1.13rem; } p { margin:.65rem 0; } a { color:#096c70; }
.eyebrow,.kicker { margin:0 0 .7rem; color:#a9e8df; font-size:.78rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; } .lead { margin:1.1rem 0 0; max-width:780px; color:#e1f4f1; font-size:1.18rem; } .small { color:var(--muted); font-size:.92rem; }
section,.callout,.contact { margin-top:1.25rem; padding:clamp(1.25rem,3vw,2.4rem); border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 4px 18px #2740570a; } section h2:first-child { margin-top:0; } .callout,.note { border-left:4px solid var(--accent); background:var(--accent-pale); } .warning,.warn { border-left-color:var(--warning); background:var(--warning-pale); } .sky { border-left-color:#4c9fba; background:#e8f5fa; }
nav { position:sticky; top:0; z-index:2; padding:.7rem 1rem; border-bottom:1px solid var(--line); background:#fff; } nav .wrap { display:flex; gap:1rem; overflow:auto; white-space:nowrap; } nav a { color:#096c70; font-size:.9rem; font-weight:650; text-decoration:none; } .index-link { display:inline-block; margin-top:1.2rem; padding:.4rem .75rem; border:1px solid #73c0ba; border-radius:6px; color:#fff; font-size:.9rem; font-weight:700; text-decoration:none; }
.wrap { max-width:1080px; margin:auto; } .badges { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem; } .badge { padding:.22rem .68rem; border:1px solid #73c0ba; border-radius:99px; font-size:.84rem; } .grid,.manuals { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; } .card,.manual,.two > div { padding:1rem; border:1px solid #d6ebea; border-radius:10px; background:var(--panel-soft); } .card h3,.manual h3 { margin-top:0; } .manual { display:flex; flex-direction:column; min-height:210px; padding:1.5rem; } .manual p { color:var(--muted); } .manual a { align-self:flex-start; margin-top:auto; padding:.56rem .88rem; border-radius:6px; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; } .manual a:hover,.manual a:focus-visible { background:var(--accent-dark); } .two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
ul,ol { padding-left:1.35rem; } li { margin:.45rem 0; } code { padding:.08rem .3rem; border-radius:4px; background:#edf2f6; color:var(--ink); font-family:ui-monospace,Consolas,monospace; font-size:.91em; overflow-wrap:anywhere; } pre { overflow:auto; padding:.9rem; border:1px solid var(--line); border-radius:8px; background:#edf2f6; color:var(--ink); } table { width:100%; margin:1rem 0; border-collapse:collapse; font-size:.93rem; } th,td { padding:.7rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } th { background:#f1f6f8; color:#254154; } .steps { counter-reset:step; list-style:none; padding:0; } .steps li { position:relative; min-height:30px; padding-left:42px; } .steps li::before { position:absolute; top:1px; left:0; width:27px; height:27px; border-radius:50%; background:var(--accent); color:#fff; content:counter(step); counter-increment:step; font-weight:800; line-height:27px; text-align:center; } .contact { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:2.6rem; } .contact img { width:min(170px,45vw); height:auto; object-fit:contain; } footer { padding:1rem 1.25rem 3rem; color:var(--muted); text-align:center; }
@media (max-width:600px) { main { padding:0 14px 42px; } header { margin:0 -14px; padding:3rem 14px; } section,.callout,.contact { padding:1.25rem 1.1rem; } .contact { align-items:flex-start; flex-direction:column; } .two { grid-template-columns:1fr; } table { font-size:.85rem; } th,td { padding:.5rem; } }

/* Some legacy pages load this file before their former inline CSS. Keep the
   shared theme authoritative while those old rules remain in place. */
:root { --ink:#12202c !important; --muted:#536371 !important; --paper:#f3f6f7 !important; --panel:#fff !important; --line:#d6e0e4 !important; --accent:#197a75 !important; --green:#a9e8df !important; --dark:#123846 !important; }
body { background:#f3f6f7 !important; color:#12202c !important; font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif !important; }
main { max-width:1080px !important; margin:auto !important; padding:0 24px 64px !important; }
header { margin:0 -24px !important; padding:4.5rem max(24px,calc((100vw - 1032px) / 2)) 4rem !important; border:0 !important; color:#fff !important; background:linear-gradient(125deg,#102b3a,#17656a) !important; box-shadow:none !important; }
h1 { margin:0 !important; font-size:clamp(2.4rem,7vw,4.8rem) !important; } h2 { margin:0 0 1rem !important; color:#123846 !important; font-size:clamp(1.45rem,3vw,2.2rem) !important; } h3 { color:#123846 !important; }
.eyebrow,.kicker { color:#a9e8df !important; } .lead { color:#e1f4f1 !important; } .small { color:#536371 !important; }
section,.callout,.contact { border-color:#d6e0e4 !important; border-radius:14px !important; background:#fff !important; box-shadow:0 4px 18px #2740570a !important; }
.callout,.note { border-left-color:#197a75 !important; background:#e8f6f3 !important; } .warning,.warn { border-left-color:#9a6114 !important; background:#fff7e9 !important; }
a { color:#096c70 !important; } code,pre { color:#12202c !important; background:#edf2f6 !important; } th { color:#254154 !important; background:#f1f6f8 !important; }
@media (max-width:600px) { main { padding:0 14px 42px !important; } header { margin:0 -14px !important; padding:3rem 14px !important; } }