@property --draw-ground{syntax:"<number>";inherits:true;initial-value:1}@property --draw-walls{syntax:"<number>";inherits:true;initial-value:1}@property --draw-roof{syntax:"<number>";inherits:true;initial-value:1}@property --draw-openings{syntax:"<number>";inherits:true;initial-value:1}@property --draw-cladding{syntax:"<number>";inherits:true;initial-value:1}.build,.daydusk{--tick:12px;--tick-gap:5px}@media (min-width:48rem){.build,.daydusk{--tick:16px;--tick-gap:7px}}.build-frame-wrap:before,.build-still-frame:before,.daydusk-frame:before{content:"";inset:calc(-1 * var(--tick-gap));z-index:1;pointer-events:none;--c:var(--color-ink);background:linear-gradient(var(--c), var(--c)) top left / var(--tick) 1px, linear-gradient(var(--c), var(--c)) top left / 1px var(--tick), linear-gradient(var(--c), var(--c)) top right / var(--tick) 1px, linear-gradient(var(--c), var(--c)) top right / 1px var(--tick), linear-gradient(var(--c), var(--c)) bottom left / var(--tick) 1px, linear-gradient(var(--c), var(--c)) bottom left / 1px var(--tick), linear-gradient(var(--c), var(--c)) bottom right / var(--tick) 1px, linear-gradient(var(--c), var(--c)) bottom right / 1px var(--tick);background-repeat:no-repeat;position:absolute}.build-paper,.build-still-paper{background-color:var(--color-surface);background-image:linear-gradient(to right, color-mix(in srgb, var(--chalk) 9%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--chalk) 9%, transparent) 1px, transparent 1px);background-position:50%;background-size:4.16667% 6.25%;position:absolute;inset:0}.build svg.elevation-drawing{width:100%;height:100%;display:block;position:absolute;inset:0}.build-meta{color:var(--color-ink-muted);font-variant-numeric:tabular-nums;justify-content:space-between;gap:1rem;display:flex}.build-name{margin-top:.375rem}.build-text{max-width:34rem;color:var(--color-ink-muted);text-wrap:pretty;margin-top:.5rem}.build-head{max-width:var(--container-page);padding:var(--spacing-section) var(--spacing-gutter) 0;margin-inline:auto}.build-steps{max-width:var(--container-page);padding:0 var(--spacing-gutter) var(--spacing-section);gap:3rem;margin:2.5rem auto 0;list-style:none;display:grid}.build-step{border-top:1px solid var(--color-line);gap:1.25rem;padding-top:1.75rem;display:grid}@media (min-width:64rem){.build-step{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:end;column-gap:2.5rem}}.build-still-frame{aspect-ratio:4/3;position:relative}@media (min-width:48rem){.build-still-frame{aspect-ratio:3/2}}.build-still-frame img{object-fit:cover;height:100%}.build-still-mark{pointer-events:none;position:absolute;inset:0}.build-still-lines{opacity:.25;position:absolute;inset:0}.build-stage-root{display:none}.build-stage{height:100%;max-width:var(--container-page);padding:.75rem var(--spacing-gutter);flex-direction:column;justify-content:center;gap:1rem;margin-inline:auto;display:flex}.build-frame-wrap{flex:none;width:min(100%,max(14rem,133.333cqh - 16rem));position:relative}.build-frame{aspect-ratio:4/3;background:var(--color-surface);position:relative;overflow:clip}@media (min-width:48rem){.build-frame-wrap{width:min(100%,max(18rem,150cqh - 24rem))}.build-frame{aspect-ratio:3/2}}.build-layer,.build-line,.build-draw,.build-draw-only,.build-push{position:absolute;inset:0}.build-img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .24s var(--ease-settle);display:block}.build-img[data-loaded]{opacity:1}.build-push{transform-origin:47% 58%}.build-chip{background:color-mix(in srgb, var(--color-canvas) 86%, transparent);color:var(--color-ink);padding:.25rem .5rem;font-size:.75rem;line-height:1;position:absolute;top:.75rem;right:.75rem}.build-draw-only[data-build-only=ground] g:not([data-group=ground]),.build-draw-only[data-build-only=walls] g:not([data-group=walls]),.build-draw-only[data-build-only=roof] g:not([data-group=roof]),.build-draw-only[data-build-only=openings] g:not([data-group=openings]),.build-draw-only[data-build-only=cladding] g:not([data-group=cladding]){display:none}.build-panel{flex-direction:column;min-height:0;display:flex}.build-captions{display:grid}.build-caption{opacity:0;transition:opacity .12s var(--ease-settle), transform 0s linear .12s;grid-area:1/1;transform:translateY(8px)}.build-caption[data-on]{opacity:1;transition:opacity .22s var(--ease-settle), transform .22s var(--ease-settle);transform:none}.build-rule{background:var(--color-line);flex:none;height:2px;margin-block:1rem .875rem;position:relative}.build-rule:before{content:"";background:linear-gradient(var(--color-ink-muted), var(--color-ink-muted)) right / 1px 100% no-repeat, repeating-linear-gradient(to right, var(--color-ink-muted) 0 1px, transparent 1px calc(100% / 6));position:absolute;inset:-3px 0}.build-rule-fill{background:var(--chalk);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.build-list{font-size:var(--type-small-size);grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:1.5rem;margin:0;padding:0;line-height:1.3;list-style:none;display:grid}.build-row{border-top:1px solid var(--color-line);color:var(--color-ink-muted);align-items:baseline;gap:.625rem;padding-block:.4rem;transition:color .22s;display:flex}.build-row-n{font-variant-numeric:tabular-nums;min-width:1.25rem}.build-row[data-on]{color:var(--color-ink)}.build-row[data-on] .build-row-n{color:var(--chalk);font-weight:600}@container (max-height:36rem){.build-list{display:none}}@media (min-width:64rem){.build-stage{--panel:20rem;--frame-w:min(calc(min(100cqw, var(--container-page)) - 2 * var(--spacing-gutter) - var(--panel) - 2.5rem), calc((100cqh - 3rem) * 3 / 2));grid-template-columns:var(--frame-w) var(--panel);place-content:center;column-gap:2.5rem;padding-block:1.5rem;display:grid}.build-frame-wrap{width:var(--frame-w)}.build-panel{justify-content:space-between}.build-list{font-size:var(--type-body-size);grid-template-rows:none;grid-auto-flow:row}.build-row{padding-block:.55rem}.build-list>:last-child{border-bottom:1px solid var(--color-line)}}@media (prefers-reduced-motion:no-preference){:root.js-motion:not([data-motion=reduce]) .build .build-head{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}:root.js-motion:not([data-motion=reduce]) .build .build-track{height:calc(var(--build-h) * 1svh);view-timeline:--build block;position:relative}:root.js-motion:not([data-motion=reduce]) .build .build-stage-root{top:var(--header-h);height:calc(100svh - var(--header-h) - var(--action-bar-h));display:block;position:sticky;overflow:clip;container-type:size}:root.js-motion:not([data-motion=reduce]) .build .build-steps{pointer-events:none;max-width:none;margin:0;padding:0;display:block;position:absolute;inset:0}:root.js-motion:not([data-motion=reduce]) .build .build-step{inset-inline:0;top:calc(var(--at) * (var(--build-h) - 100) * 1svh);border:0;height:0;padding:0;scroll-margin-top:0;position:absolute}:root.js-motion:not([data-motion=reduce]) .build .build-still{display:none}:root.js-motion:not([data-motion=reduce]) .build .build-still-caption{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@supports (animation-timeline:view()){:root.js-motion:not([data-motion=reduce]) .build .build-layer,:root.js-motion:not([data-motion=reduce]) .build .build-chip{animation:linear both build-in;animation-timeline:--build;animation-range:var(--range)}:root.js-motion:not([data-motion=reduce]) .build [data-build-line]{animation:linear both build-out;animation-timeline:--build;animation-range:var(--range)}:root.js-motion:not([data-motion=reduce]) .build .build-push{animation:linear both build-push;animation-timeline:--build;animation-range:var(--range)}:root.js-motion:not([data-motion=reduce]) .build .build-rule-fill{animation:linear both build-rule;animation-timeline:--build;animation-range:var(--range)}:root.js-motion:not([data-motion=reduce]) .build .build-draw [data-group]{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--build}:root.js-motion:not([data-motion=reduce]) .build .build-draw [data-group=ground]{animation-name:build-draw-ground;animation-range:var(--range-ground)}:root.js-motion:not([data-motion=reduce]) .build .build-draw [data-group=walls]{animation-name:build-draw-walls;animation-range:var(--range-walls)}:root.js-motion:not([data-motion=reduce]) .build .build-draw [data-group=roof]{animation-name:build-draw-roof;animation-range:var(--range-roof)}:root.js-motion:not([data-motion=reduce]) .build .build-draw [data-group=openings]{animation-name:build-draw-openings;animation-range:var(--range-openings)}:root.js-motion:not([data-motion=reduce]) .build .build-draw [data-group=cladding]{animation-name:build-draw-cladding;animation-range:var(--range-cladding)}:root.js-motion:not([data-motion=reduce]) .build .build-draw-only{animation:linear both build-rise;animation-timeline:--build;animation-range:var(--range)}}@supports not (animation-timeline:view()){:root.js-motion:not([data-motion=reduce]) .build .build-layer,:root.js-motion:not([data-motion=reduce]) .build .build-chip,:root.js-motion:not([data-motion=reduce]) .build .build-draw-only{opacity:0}:root.js-motion:not([data-motion=reduce]) .build .build-draw{--draw-ground:0;--draw-walls:0;--draw-roof:0;--draw-openings:0;--draw-cladding:0}}}@keyframes build-in{0%{opacity:0}to{opacity:1}}@keyframes build-out{0%{opacity:1}to{opacity:0}}@keyframes build-push{0%{transform:scale(1)}to{transform:scale(1.06)}}@keyframes build-rule{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes build-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes build-draw-ground{0%{--draw-ground:0}to{--draw-ground:1}}@keyframes build-draw-walls{0%{--draw-walls:0}to{--draw-walls:1}}@keyframes build-draw-roof{0%{--draw-roof:0}to{--draw-roof:1}}@keyframes build-draw-openings{0%{--draw-openings:0}to{--draw-openings:1}}@keyframes build-draw-cladding{0%{--draw-cladding:0}to{--draw-cladding:1}}.daydusk-frame{position:relative}.daydusk-layer[data-layer=dusk]{position:absolute;inset:0}.daydusk-layer img{object-fit:cover;height:100%}:is(.daydusk:has(input[value=day]:checked) .daydusk-layer[data-layer=dusk],.daydusk:has(input[value=dusk]:checked) .daydusk-layer[data-layer=day]){visibility:hidden}.daydusk:has(input[value=day]:checked) .daydusk-layer[data-layer=dusk]{opacity:0}.daydusk-bar{flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:1.25rem;display:flex}@media (min-width:64rem){.daydusk{grid-template-columns:minmax(0,1fr) 17rem;align-items:end;column-gap:2.5rem;display:grid}.daydusk-frame{max-width:calc((100svh - var(--header-h) - 4rem) * 3 / 2)}.daydusk-bar{flex-flow:column;align-items:flex-start;gap:1rem;margin-top:0}.daydusk-caption{flex:none;max-width:17rem}}.daydusk-toggle{border:1px solid var(--color-line);border-radius:var(--radius-control);background:var(--color-surface);grid-template-columns:1fr 1fr;min-inline-size:0;margin:0;padding:3px;display:inline-grid;position:relative}.daydusk-thumb{background:var(--color-ink);border-radius:2px;width:calc(50% - 3px);position:absolute;top:3px;bottom:3px;left:3px}.daydusk:has(input[value=dusk]:checked) .daydusk-thumb{transform:translate(100%)}.daydusk-option{min-width:6rem;min-height:44px;color:var(--color-ink-muted);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:.5rem;padding-inline:1rem;font-weight:500;display:inline-flex;position:relative}.daydusk-option:has(input:checked){color:var(--color-canvas)}.daydusk-option:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px;border-radius:2px}.daydusk-option input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.daydusk-lamp{background:var(--lamp);opacity:0;border-radius:50%;width:6px;height:6px}.daydusk:has(input[value=dusk]:checked) .daydusk-lamp{opacity:1}.daydusk-caption{color:var(--color-ink-muted);flex:16rem;display:grid}.daydusk-caption>*{grid-area:1/1}:is(.daydusk:has(input[value=day]:checked) .daydusk-caption [data-cap=dusk],.daydusk:has(input[value=dusk]:checked) .daydusk-caption [data-cap=day]){visibility:hidden}@media (prefers-reduced-motion:no-preference){.daydusk-thumb{transition:transform .2s var(--ease-settle)}.daydusk-layer[data-layer=dusk]{transition:opacity .45s,visibility linear}.daydusk:has(input[value=day]:checked) .daydusk-layer[data-layer=dusk]{transition:opacity .45s,visibility 0s linear .45s}.daydusk-layer[data-layer=day]{transition:visibility linear}.daydusk:has(input[value=dusk]:checked) .daydusk-layer[data-layer=day]{transition:visibility 0s linear .45s}.daydusk-lamp{transition:opacity .2s}.daydusk-option{transition:color .2s}}
