/* SWD Live build — code types out, then the finished site scans in. */
.swd.swd-build { padding: clamp(90px, 12vw, 190px) 0 0; }
.swd-build .kicker { color: var(--acc); font-size: 21px; font-weight: 500; margin-bottom: 10px; }
.swd-build .hxc__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.swd-build .hxc__title { font-size: clamp(42px, 5.4vw, 80px); letter-spacing: -.045em; line-height: 1.05; }
.swd-build .hx__lead { margin-top: 28px; max-width: 34em; font-size: clamp(17px, 1.45vw, 20px); color: var(--muted); }
.swd-build .hx__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.swd-build .build { border-radius: 20px; background: #0B1020; box-shadow: 0 0 0 1px var(--edge), 0 50px 90px -40px rgba(0, 0, 0, .8); overflow: hidden; }
.swd-build .build__bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; background: #141A2C; border-bottom: 1px solid var(--edge); font-size: 13.5px; }
.swd-build .build__dots { display: flex; gap: 6px; }
.swd-build .build__dots i { width: 10px; height: 10px; border-radius: 50%; background: #2E3757; }
.swd-build .build__url { flex: 1; text-align: center; color: var(--muted); }
.swd-build .build__state { color: var(--acc); font-weight: 500; min-width: 84px; text-align: right; }
.swd-build .build__state.is-live { color: #3BE38F; }
.swd-build .build__view { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.swd-build .build__code { position: absolute; inset: 0; margin: 0; padding: 22px 24px; border: 0; border-radius: 0; background: none; font: 400 13.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: #C9D4E6; white-space: pre-wrap; overflow: hidden; }
.swd-build .build__code .k { color: #8FB0FF; }
.swd-build .build__code .s { color: #7EE0B5; }
.swd-build .build__code .a { color: #FFD58A; }
.swd-build .build__code .c { color: #5E7290; }
.swd-build .build__code .cur { display: inline-block; width: 8px; height: 16px; margin-bottom: -3px; background: var(--acc); animation: swd-build-blink 1s steps(2) infinite; }
@keyframes swd-build-blink { 50% { opacity: .35; } }
.swd-build .build__site { position: absolute; inset: 0; background: var(--img) top center / 100% auto no-repeat #fff; clip-path: inset(0 100% 0 0); }
.swd-build .build__scan { position: absolute; top: 0; bottom: 0; width: 3px; left: 0; background: var(--acc); box-shadow: 0 0 24px 6px rgba(92, 200, 255, .6); opacity: 0; }
.swd-build .build__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--edge); font-size: 13.5px; color: var(--muted); background: #141A2C; }
.swd-build .build__score { color: #3BE38F; font-weight: 500; }

@media (max-width: 980px) {
	.swd-build .hxc__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.swd-build .btn--lg { height: 54px; font-size: 18px; padding: 0 24px; }
}