/* Shared reading surface for the existing guides and calculator demonstration.
   Diagram swatches, board strips, video sizing and exact example content remain
   in their source pages. This file changes presentation, not their calculations. */
:root{color-scheme:light;--resource-paper:#f7f7f2;--resource-surface:#fff;--resource-ink:#1d3039;--resource-muted:#53636c;--resource-blue:#15546b;--resource-line:#dce3e2;--resource-soft:#e9f2f5}
html{scroll-padding-top:24px}
body{background:var(--resource-paper);color:var(--resource-ink)}
a{color:var(--resource-blue);text-underline-offset:3px}
a:hover{color:#103e50}
:is(a,summary,video):focus-visible{outline:3px solid var(--resource-blue);outline-offset:4px}
.skip{background:var(--resource-ink);color:#fff;border-radius:8px;padding:12px 18px}
header{background:var(--resource-surface);border-color:var(--resource-line)}
nav.top{padding:13px 0;min-height:76px}
.brand{color:var(--resource-ink);letter-spacing:-.035em;font-size:20px;min-height:44px;display:inline-flex;align-items:center}
.brand span{color:var(--resource-blue)}
.navlinks{gap:8px 20px;align-items:center}
.navlinks a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;padding:6px 0}
.crumbs,.lead,.muted,.watch-meta,.lesson figcaption{color:var(--resource-muted)}
.eyebrow{color:var(--resource-blue)}
h1,h2,h3,th,caption,summary,.equation{color:var(--resource-ink)}
.equation strong{color:var(--resource-blue)}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--resource-blue);color:#fff;border:1px solid var(--resource-blue);font-size:15px;line-height:1.4;padding:12px 18px}
.cta:hover{background:#103e50;color:#fff}
.cta.secondary{background:var(--resource-surface);color:var(--resource-blue);border-color:#7c8fa3}
.cta.secondary:hover{background:var(--resource-soft);color:#103e50}
.card{background:var(--resource-surface);border-color:var(--resource-line);box-shadow:0 4px 20px #1d303904}
.note{background:var(--resource-soft);border-left-color:var(--resource-blue)}
th,td{border-color:var(--resource-line)}
th{font-weight:700}
code{background:#eef2f3;color:var(--resource-ink);border-color:#bccbd1}
details{border-color:var(--resource-line)}
summary{display:list-item;min-height:44px;padding:9px 0}
video{border-color:#7c8fa3}
.resource-image,.lesson figure img{border-color:var(--resource-line)}
.plain-text{background:#eef2f3;color:var(--resource-ink);border-color:#c5d2d7}
.table-scroll{max-width:100%;border:1px solid var(--resource-line);border-radius:10px;background:var(--resource-surface);overscroll-behavior-x:contain}
.projects a{display:flex;align-items:center;min-height:48px;background:var(--resource-surface);border-color:#a1b4bd}
.resource-availability{padding:17px 20px;margin:24px 0 32px;background:var(--resource-soft);border-left:3px solid var(--resource-blue);border-radius:0 10px 10px 0;color:var(--resource-muted);font-size:14px;line-height:1.75}
.resource-availability strong{color:var(--resource-ink)}
footer{background:var(--resource-surface);border-color:var(--resource-line);color:var(--resource-muted)}
footer a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:650px){.navlinks{gap:4px 16px}.navlinks a{font-size:13px}.cta{width:100%}.downloads{gap:4px}.resource-availability{padding:15px 17px}.projects a{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{body{background:#fff;color:#111}.card,.note,.resource-availability{background:#fff;color:#111;box-shadow:none;border:1px solid #aaa}.muted,.lead,.watch-meta,.lesson figcaption{color:#333}.equation,.equation strong,h1,h2,h3,th,caption{color:#111}a{color:#111}.cta,footer{display:none!important}}