:root{color-scheme:light dark;--bg:#fbfaf7;--fg:#1d2129;--muted:#4b5563;--line:#d9d6cd;--card:#fff;--band:#f1eee6;--accent:#1f5f8b;--accent-fg:#fff;--warm:#a3500a;--stroke:#6b7280}
@media (prefers-color-scheme:dark){:root{--bg:#14171c;--fg:#e8e6e1;--muted:#a9afb8;--line:#2d333c;--card:#1b1f26;--band:#191d24;--accent:#7fb4dc;--accent-fg:#10151b;--warm:#e3a35f;--stroke:#8b939e}}
*{box-sizing:border-box}
html{font-size:clamp(100%,0.9rem + 0.3vw,115%);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.65}
a{color:var(--accent);text-underline-offset:.15em}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:1rem;top:-5rem;background:var(--accent);color:var(--accent-fg);padding:.6rem 1rem;border-radius:.3rem;z-index:10}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2rem,75rem);margin-inline:auto}
header.site{border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;padding-block:1.1rem}
.brand{font-weight:700;font-size:1.15rem;color:var(--fg);text-decoration:none;letter-spacing:.01em}
nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;margin:0;padding:0}
nav a{color:var(--muted);text-decoration:none}
nav a:hover{color:var(--accent);text-decoration:underline}
h1{font-size:clamp(2rem,1.2rem + 3.6vw,3.4rem);line-height:1.1;margin:0 0 1.2rem;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);margin:0 0 1rem;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
h3{font-size:1.15rem;margin:0 0 .4rem;line-height:1.3}
p{margin:0 0 1rem;max-width:68ch}
.kicker{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--warm);font-weight:600;margin-bottom:.8rem}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--muted)}
.intro{font-size:1.1rem;color:var(--muted)}
section{padding-block:clamp(2.5rem,7vw,5rem)}
section.band{background:var(--band);border-block:1px solid var(--line)}
.hero{padding-block:clamp(2rem,6vw,4.5rem)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.split-d{align-items:start}
.split-hero{grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:clamp(1.25rem,3vw,2.5rem);align-items:center;margin-top:1.5rem}
.row+.row{margin-top:clamp(2rem,5vw,3.5rem)}
.row-rev>div{order:2}
.row-rev>.fig{order:1}
.duoold{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:1.25rem;margin-block:1.5rem 2rem;align-items:start}
.duo>div{display:flex}
.btn{display:inline-block;padding:.6rem 1.25rem;border:1.5px solid var(--accent);border-radius:2rem;color:var(--accent);text-decoration:none;font-weight:600}
.btn:hover{background:var(--accent);color:var(--accent-fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem;margin-top:1.5rem}
.card{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:.5rem;padding:1.1rem 1.25rem}
.card p{margin:0;color:var(--muted)}
.aside{margin-top:1.5rem}
.points{display:grid;gap:1.25rem}
.point{border-left:3px solid var(--warm);padding-left:1rem}
.point p{margin:0;color:var(--muted)}
.product{background:var(--card);border:1px solid var(--line);border-radius:.75rem;padding:clamp(1.2rem,3vw,2rem)}
.product p:last-child{margin-bottom:0}
address{font-style:normal;margin-bottom:1rem}
.small{font-size:.9rem;color:var(--muted)}
footer{border-top:1px solid var(--line);padding-block:2rem;color:var(--muted);font-size:.95rem}
footer p{margin:0 0 .4rem}
main>.hero:only-child,.page .hero{padding-block:clamp(2rem,6vw,4rem)}
/* figures */
.fig{margin:0;background:var(--card);border:1px solid var(--line);border-radius:.75rem;padding:clamp(.9rem,2.5vw,1.5rem);width:100%;display:flex;flex-direction:column;justify-content:flex-start;gap:.9rem}
.fig svg{display:block;width:100%;height:auto;color:var(--fg);font-family:inherit}
.fig figcaption{font-size:.9rem;color:var(--muted);line-height:1.5}
.fig-d svg{max-width:40rem;margin-inline:auto}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:3.25rem 1.25rem}
.steps li{border-top:2px dashed var(--stroke);padding-top:1.25rem;position:relative}
.steps svg{width:4.25rem;height:4.25rem;margin-top:-3.35rem;background:var(--card);display:block;margin-bottom:.6rem}
.steps h3{margin:0 0 .3rem;font-size:1.2rem}
.steps p{margin:0;color:var(--muted);max-width:none}
.steps .stepno{font-size:.85rem;color:var(--muted);margin:0}
.fig-e{padding-top:clamp(2rem,4vw,2.75rem)}
svg .tx{fill:var(--fg)}
svg .tm{fill:var(--muted)}
svg .b{font-weight:700}
svg .th{fill:var(--accent-fg);font-weight:600}
svg .duck{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round}
svg .band-sun{fill:var(--warm);opacity:.12}
svg .g0{stop-color:var(--accent);stop-opacity:.32}
svg .g1{stop-color:var(--accent);stop-opacity:0}
svg .sunarc{fill:none;stroke:var(--warm);stroke-width:2.5;stroke-dasharray:2 7;stroke-linecap:round}
svg .sun{fill:var(--warm)}
svg .base{stroke:var(--stroke);stroke-width:1.5;opacity:.6;fill:none}
svg .axis{stroke:var(--stroke);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
svg .pin-ring{fill:none;stroke:var(--accent-fg);stroke-width:3}
svg .pin-dot{fill:var(--accent-fg)}
svg .ticks path{stroke:var(--stroke);stroke-width:1}
svg .leader{stroke:var(--stroke);stroke-width:1.5;fill:none;stroke-dasharray:3 4}
svg .tile{fill:var(--bg);stroke:var(--stroke);stroke-width:1.5}
svg .tile.home{fill:var(--accent);stroke:var(--accent)}
svg .tl{fill:var(--fg);font-weight:600}
svg .tl.th{fill:var(--accent-fg)}
svg .seg rect{fill:var(--stroke)}
svg .seg.c24 rect{fill:var(--accent)}
svg .seg.c96 rect{fill:var(--warm)}
svg .p1{fill:var(--accent)}
svg .p2{fill:var(--warm)}
svg .p3{fill:var(--stroke)}
svg .sq{fill:none;stroke:var(--stroke);stroke-width:1.5}
svg .sq.first{fill:var(--accent);stroke:var(--accent)}
svg .sq.mini{stroke-width:1.2}
svg .sq.mini.first{fill:var(--accent)}
svg .sheet{fill:var(--card);stroke:var(--stroke);stroke-width:1.5}
svg .ring{fill:none;stroke:var(--accent);stroke-width:2.5}
svg .icon{fill:none;stroke:var(--fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
svg .icon .knob{fill:var(--accent);stroke:var(--accent)}
@media (prefers-reduced-motion:no-preference){
svg .duck{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
svg .area{opacity:0;animation:fadein 1s ease-out 1.8s forwards}
@keyframes fadein{to{opacity:1}}
}
svg .pointer{stroke:var(--fg);stroke-width:2;fill:none;stroke-linecap:round}