.guide-shell{display:block;max-width:1440px;margin:auto}.design-guide nav{height:auto;max-height:none;overflow:visible;position:static;width:auto;scrollbar-gutter:auto}.dg-rail{display:none}
@media(min-width:1201px){.guide-shell{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:18px;padding-right:24px}.dg-rail{display:block;position:static;margin-top:28px;padding:0;border:0;background:transparent}.dg-rail .dg-ad{margin:0}.dg-rail .ad-slot{width:160px;margin:auto}}
.unit-site main.design-guide{display:block!important;max-width:1140px;margin:0 auto;padding:26px 24px 60px;width:100%;box-sizing:border-box;color:var(--cl-ink,#173b39)}
.design-guide *{box-sizing:border-box}.design-guide [id]{scroll-margin-top:calc(var(--tool-header-height,88px) + 20px)}.design-guide h1{font-size:clamp(25px,3.2vw,38px);line-height:1.4;margin:10px 0 18px;font-weight:750;text-align:left}.design-guide h2{font-size:clamp(21px,2vw,25px);font-weight:750;margin:0 0 18px;line-height:1.5}.design-guide h3{font-size:18px;font-weight:700;line-height:1.6;margin:0 0 12px}.design-guide p,.design-guide li{line-height:1.85}.design-guide p{margin:12px 0}.design-guide li+li{margin-top:8px}.design-guide a{text-underline-offset:4px}.dg-eyebrow{color:var(--cl-primary,#087365);letter-spacing:.14em;font-size:12px;font-weight:750}.dg-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;margin:0 0 25px}.dg-breadcrumb a{color:var(--cl-primary,#087365)}
.dg-hero,.dg-step,.dg-checks,.dg-related,.dg-hub-card{padding:28px;border:1px solid var(--cl-line,#ccddd7);border-radius:12px;background:var(--cl-surface,#fff);margin:24px 0}.dg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);align-items:center;gap:30px}.dg-hero-grid>div{min-width:0}.dg-hero figure{margin:0;min-width:0}.dg-hero figcaption{line-height:1.7;font-size:14px;margin:16px 0;color:var(--cl-muted,#536861)}.dg-legend{display:flex;gap:8px 20px;flex-wrap:wrap;list-style:none;padding:0;font-size:14px;margin:14px 0}.dg-legend li{margin:0!important}.dg-step-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.dg-step-nav a,.dg-link,.dg-primary,.dg-copy{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 15px;border:1px solid var(--cl-border,#bdcec8);border-radius:7px;font-size:15px;text-decoration:none;font-weight:650;background:var(--cl-surface,#fff);color:var(--cl-primary,#087365);cursor:pointer;line-height:1.5}.dg-step-nav a:hover,.dg-link:hover{background:var(--cl-soft,#e7f3ed)}.dg-step-nav a:focus-visible,.dg-link:focus-visible,.dg-copy:focus-visible{outline:3px solid #2368a4;outline-offset:3px}.dg-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.dg-primary,.dg-copy{background:#14755f;color:#fff!important;border-color:#14755f}.dg-step-number{display:inline-flex;justify-content:center;align-items:center;border-radius:50%;width:34px;height:34px;margin-right:9px;background:var(--cl-soft,#e8f3ed);color:var(--cl-primary,#087365);font-size:18px}.dg-formula{padding:15px 18px;background:var(--cl-soft,#edf4ef);border-radius:8px;overflow-wrap:anywhere;font-family:inherit;font-weight:650}.dg-example{margin:24px 0 12px}.dg-example-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.dg-example-input,.dg-example-output{border:1px solid;padding:20px;border-radius:9px;min-width:0}.dg-example-input{background:#f3f8ff;border-color:#a9c7e8}.dg-example-output{background:#fff7f6;border-color:#e4bab4}.dg-example-input h4{color:#144f83}.dg-example-output h4{color:#8a2d2b}.dg-example h4{margin:0 0 14px;font-size:16px;font-weight:750}.dg-example ul{margin:0;padding-left:19px}.dg-example-output li{color:var(--cl-ink,#182c2b);font-weight:650}.dg-note{font-size:14px;color:var(--cl-muted,#536861)}.dg-calc-notice{font-size:14px;color:var(--cl-muted,#536861);border-left:3px solid #477ba5;padding-left:12px}.dg-choices{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.dg-choice{padding:22px;border:1px solid var(--cl-line,#ccddd7);border-radius:9px}.dg-choice p{margin-bottom:0}.dg-checks label{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-weight:400;line-height:1.7;cursor:pointer}.dg-checks input{width:19px;height:19px;flex:0 0 19px;margin:4px 0 0;accent-color:#14755f}.dg-checks [role=status]{min-height:26px;font-size:14px}.dg-checks button{margin-top:15px}.dg-related nav{display:flex;gap:12px;flex-wrap:wrap}.dg-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.dg-hub-card{margin:0;display:flex;flex-direction:column;padding:22px}.dg-hub-card .dg-figure{margin:10px 0 20px}.dg-hub-card p{flex:1}.dg-hub-card h2{font-size:21px}.dg-hub-card .dg-primary{align-self:flex-start}.dg-disclaimer{font-size:14px;padding:16px 20px;border-left:3px solid var(--cl-primary,#14755f);line-height:1.8;color:var(--cl-muted,#536861)}
.design-guide .dg-ad{margin:32px 0;min-width:0;padding:10px 0;background:transparent;border:0;display:block;text-align:center}.dg-ad>span{font-size:12px;color:var(--cl-muted,#536861)}.dg-ad .ad-slot{width:100%;max-width:100%;min-height:90px;border:0;background:transparent}.dg-ad .ad-slot>p{display:none}.dg-ad[hidden]{display:none!important}
.dg-figure{display:block;width:100%;height:auto;max-width:630px;margin:auto;overflow:visible}.dg-figure text{font-family:inherit;font-size:26px;font-weight:700;fill:var(--cl-ink,#173b39);paint-order:stroke fill;stroke:var(--cl-surface,#fff);stroke-width:5px;stroke-linejoin:round}.dg-figure .dg-small{font-size:21px;font-weight:550}.dg-figure .dg-body{fill:#489577;stroke:#245d49;stroke-width:2}.dg-figure .dg-top{fill:#9bc8ae;stroke:#386f56;stroke-width:2}.dg-figure .dg-dark{fill:#205d49;stroke:#173e32;stroke-width:1.5}.dg-figure .dg-metal{fill:#c4d6ce;stroke:#678b7b;stroke-width:2}.dg-figure .dg-cut{fill:#d7e6de;stroke:#729c89;stroke-width:2}.dg-figure .dg-thread{fill:none;stroke:#416b59;stroke-width:1.8}.dg-figure .dg-input{fill:#14578c;stroke:none}.dg-figure .dg-output{fill:#9b3535;stroke:none}.dg-figure .dg-input-label{fill:#14578c}.dg-figure .dg-output-label{fill:#9b3535}.dg-figure .dg-extension{fill:none;stroke:#14578c;stroke-width:1.3}.dg-figure .dg-axis{fill:none;stroke:#6a8175;stroke-dasharray:8 6;stroke-width:1.3}.dg-figure .dg-neutral{fill:none;stroke:#a34235;stroke-dasharray:8 5;stroke-width:2.2}.dg-figure .dg-bend{fill:#efd1ca;stroke:#a34235;stroke-width:1.5}.dg-entry{border:1px solid var(--cl-border,#cbded7);border-radius:10px;padding:20px 24px;margin:24px 0;background:var(--cl-surface,#fff)}.dg-entry h2{font-size:20px;margin:0 0 10px;font-weight:750}.dg-entry p{margin:0 0 14px;line-height:1.7}.dg-entry nav{display:flex;gap:12px;flex-wrap:wrap}.dg-entry a{color:var(--cl-primary,#14755f);text-underline-offset:4px}
html[data-color-mode=dark] .dg-example-input{background:#192d3f;border-color:#436887}html[data-color-mode=dark] .dg-example-input h4,html[data-color-mode=dark] .dg-figure .dg-input-label{color:#abd1fa;fill:#abd1fa}html[data-color-mode=dark] .dg-example-output{background:#342727;border-color:#8d5754}html[data-color-mode=dark] .dg-example-output h4,html[data-color-mode=dark] .dg-figure .dg-output-label{color:#ffb7ac;fill:#ffb7ac}html[data-color-mode=dark] .dg-figure .dg-input{fill:#abd1fa}html[data-color-mode=dark] .dg-figure .dg-extension{stroke:#abd1fa}html[data-color-mode=dark] .dg-figure .dg-output{fill:#ffb7ac}
@media(max-width:850px){.dg-hero-grid{grid-template-columns:1fr}.dg-hub{grid-template-columns:1fr}.dg-hub-card{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.dg-hub-card .dg-figure{grid-row:1/4;grid-column:1}.dg-hub-card h2,.dg-hub-card p,.dg-hub-card a{grid-column:2}}
@media(max-width:600px){.unit-site main.design-guide{padding:20px 14px 40px}.dg-hero,.dg-step,.dg-checks,.dg-related{padding:20px 16px;margin:20px 0}.dg-hero-grid{gap:18px}.dg-example-grid,.dg-choices{grid-template-columns:1fr}.dg-example-input,.dg-example-output,.dg-choice{padding:18px}.dg-step-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dg-step-nav a{justify-content:flex-start;font-size:14px;padding:10px}.dg-hub-card{display:flex;padding:20px}.dg-hub-card .dg-figure{max-width:420px}.dg-figure .dg-small{display:none}.dg-legend{font-size:14px;display:block}.dg-legend li{padding:3px 0}.dg-copy{width:100%}.dg-links .dg-link{width:100%;justify-content:flex-start}.dg-ad .ad-slot{min-height:60px}.dg-entry{padding:18px}}