figure svg.wc-w, figure svg.wc-p { display: block; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; }
figure svg.wc-p { display: none; }
@media (max-width: 700px) { figure svg.wc-w { display: none; } figure svg.wc-p { display: block; } }
.wc-sky { fill: #fbe9c6; }
.wc-band { fill: var(--bn-seaglass); opacity: .75; }
.wc-fade { fill: var(--bn-seaglass); opacity: .35; }
.wc-hz { stroke: var(--bn-ink-soft); stroke-width: 1.5; }
.wc-arc { fill: none; stroke: #d98b2b; stroke-width: 2.5; stroke-dasharray: 5 5; }
.wc-sun { fill: #f2b233; stroke: #d98b2b; stroke-width: 2; }
.wc-pin { stroke: var(--bn-flag); stroke-width: 2; }
.wc-axis { stroke: var(--bn-ink); stroke-width: 2; }
.wc-tick { stroke: var(--bn-ink); stroke-width: 1.5; }
.wc-t { font: 500 12px var(--font-spec); fill: var(--bn-ink-soft); }
.wc-flag { fill: var(--bn-paper); stroke: var(--bn-harbour); stroke-width: 2; stroke-linejoin: round; }
.wc-key, .wd-key { fill: var(--bn-baths); }
.wc-kn, .wd-kn { font: 600 12px var(--font-spec); fill: var(--bn-paper); }
.figbox .wc-foot { margin: .5rem 0 0; font-size: .92rem; line-height: 1.45; color: var(--bn-ink-soft); }
.figbox ol.keylist { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .45rem; }
.keylist li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .95rem; line-height: 1.45; }
.figbox .key { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bn-baths); color: var(--bn-paper); font: 600 .8rem/1.5rem var(--font-spec); text-align: center; }
.figbox .key--alt { background: var(--bn-paper); color: var(--bn-flag); box-shadow: inset 0 0 0 2px var(--bn-flag); }
.figbox .callout { margin: .8rem 0 0; font-size: .95rem; line-height: 1.5; }
.figbox svg.wd-svg { max-width: 440px; }
.wd-wall { fill: var(--bn-paper); }
.wd-floor { stroke: var(--bn-ink); stroke-width: 3; }
.wd-glass { fill: #cfe3ea; stroke: var(--bn-ink-soft); stroke-width: 2; }
.wd-mull { stroke: var(--bn-ink-soft); stroke-width: 2; }
.wd-sill { fill: #b9a68a; }
.wd-cover { fill: #f4efe4; stroke: var(--bn-harbour); stroke-width: 2.5; opacity: .94; }
.wd-weave { stroke: var(--bn-rule); stroke-width: 1; }
.wd-rail { fill: var(--bn-harbour); }
.wd-short { fill: #f4efe4; fill-opacity: .7; stroke: var(--bn-flag); stroke-width: 2; stroke-dasharray: 6 4; }
.wd-arrow { fill: none; stroke: var(--bn-harbour); stroke-width: 2; }
.wd-key--alt { fill: var(--bn-paper); stroke: var(--bn-flag); stroke-width: 2; }
.wd-key--alt + .wd-kn { fill: var(--bn-flag); }
.cc-limits { display: grid; gap: .5rem; margin: 0 0 1rem; }
.cc-limits p { margin: 0; padding: .55rem .75rem; background: var(--bn-paper); border-left: 4px solid var(--bn-baths); font-size: .95rem; line-height: 1.45; }
.cc-form { display: grid; gap: .8rem; }
.cc-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.cc-q legend { padding: 0; margin: 0 0 .4rem; font-size: .95rem; font-weight: 600; line-height: 1.4; }
.cc-q label { display: inline-flex; gap: .4rem; align-items: center; margin: 0 1.2rem 0 0; font-size: .95rem; cursor: pointer; }
.cc-q input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--bn-baths); }
.cc-f { display: grid; gap: .3rem; min-width: 0; font-size: .95rem; font-weight: 600; line-height: 1.4; }
.cc-f input { width: 100%; max-width: 12rem; min-width: 0; box-sizing: border-box; padding: .5rem .6rem; font: 500 1rem var(--font-spec); color: var(--bn-ink); background: var(--bn-paper); border: 1px solid var(--bn-ink-soft); border-radius: 4px; }
.cc-f input:focus-visible { outline: 2px solid var(--bn-baths); outline-offset: 2px; }
.cc-out { margin: 1rem 0 0; padding: .75rem .9rem; border-radius: 4px; background: var(--bn-paper); border: 2px solid var(--bn-rule); }
.cc-out p { margin: 0; line-height: 1.45; }
.cc-out .cc-head { font-weight: 700; }
.cc-out .cc-why { margin-top: .3rem; font-size: .95rem; }
.cc-out .cc-why:empty { display: none; }
.cc-out .cc-fix { margin-top: .4rem; font-size: .95rem; }
.cc-out[data-state="prompt"] .cc-head { font-weight: 600; color: var(--bn-ink-soft); }
.cc-out[data-state="pass"] { border-color: var(--bn-baths); }
.cc-out[data-state="pass"] .cc-head { color: var(--bn-harbour); }
.cc-out[data-state="fail"] { border-color: var(--bn-flag); }
.cc-out[data-state="fail"] .cc-head { color: var(--bn-flag); }
.prose ul.cc-notes { margin: .9rem 0 0; padding-left: 1.1rem; font-size: .92rem; line-height: 1.45; color: var(--bn-ink-soft); }
.cc-notes li { margin: .2rem 0; }