.smoke-demo{min-width:0}
.smoke-demo [hidden]{display:none!important}
.smoke-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:42px}
.smoke-heading h3{font-size:clamp(1.75rem,2.5vw,2.6rem);line-height:1.2;max-width:660px}
.smoke-heading>p{font-size:1rem;line-height:1.8;color:#b2c2d5;max-width:590px;margin:0}
.smoke-workbench{max-width:1240px;margin-inline:auto;min-width:0}
.smoke-demo button{color:inherit;background:none;border:0;cursor:pointer;border-radius:0;font-size:.9375rem;line-height:1.45}
.smoke-demo button:focus-visible{outline-color:#a6d7ff;outline-offset:4px}
.smoke-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #344455;gap:28px}
.smoke-steps button{display:flex;gap:13px;align-items:center;padding:20px 0;border-bottom:3px solid transparent;margin-bottom:-1px;text-align:left;color:#9cadc1;min-height:72px;font-size:1rem;font-weight:500}
.smoke-steps button:hover{color:#fff}
.smoke-steps button[aria-pressed=true]{border-bottom-color:#a2d4ff;color:#fff}
.smoke-step-number{font-size:.8125rem;letter-spacing:.07em;font-variant-numeric:tabular-nums;color:#80a7c9;flex-shrink:0}
.smoke-steps button[aria-pressed=true] .smoke-step-number{color:#a2d4ff}
.smoke-description{font-size:1rem;line-height:1.75;color:#c2d1e0;margin:24px 0;max-width:850px;min-height:3.5em}
.smoke-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-bottom:16px}
.smoke-control-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.smoke-control-group>span{font-size:.875rem;color:#a8bbcf}
.smoke-backgrounds{display:flex;gap:6px}
.smoke-backgrounds button{width:44px;height:44px;padding:9px;border:1px solid transparent;border-radius:4px}
.smoke-backgrounds button:hover{border-color:#697f95}
.smoke-backgrounds button[aria-pressed=true]{border-color:#a2d4ff;background:#172b3d}
.smoke-swatch{width:24px;height:24px;display:block;border:1px solid #7b8fa3;border-radius:2px}
.smoke-swatch-black{background:#050608}.smoke-swatch-light{background:#edf1f5}
.smoke-swatch-checker{background:conic-gradient(#edf1f5 25%,#899baa 0 50%,#edf1f5 0 75%,#899baa 0) 0 0/12px 12px}
.smoke-zoom{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid #344455}
.smoke-zoom button{padding:12px 15px;min-height:44px;color:#a8bbcf;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:.8755rem}
.smoke-zoom button:hover{color:#fff}
.smoke-zoom button[aria-pressed=true]{color:#c4e5ff;border-color:#a2d4ff}
.smoke-media{--smoke-background:#050608;--smoke-zoom:1;aspect-ratio:2169/1216;background:var(--smoke-background);border-radius:0}
.smoke-media img{object-fit:contain;transform:scale(var(--smoke-zoom));transform-origin:55% 72%}
.smoke-media[data-zoom="3"] img{image-rendering:pixelated}
.smoke-media .comparison-before{background:var(--smoke-background)}
.smoke-media[data-background=light]{--smoke-background:#edf1f5}
.smoke-media[data-background=checker],.smoke-media[data-background=checker] .comparison-before{background-color:#dce3ea;background-image:conic-gradient(#b9c6d2 25%,transparent 0 50%,#b9c6d2 0 75%,transparent 0);background-size:24px 24px}
.smoke-media .comparison-labels{font-size:.875rem}
.smoke-feedback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:absolute;inset:0;padding:28px;text-align:center;background:#080e16;z-index:8;color:#d6e5f5}
.smoke-feedback p{font-size:1rem;max-width:500px;margin:0}
.smoke-feedback button{border:1px solid #84b4da;padding:11px 20px;min-height:44px;border-radius:4px;color:#d7edff}
.smoke-demo[data-state=ready] .smoke-feedback{display:none}
.smoke-demo:not([data-state=ready]) .smoke-media>img,.smoke-demo:not([data-state=ready]) .comparison-before,.smoke-demo:not([data-state=ready]) .comparison-labels,.smoke-demo:not([data-state=ready]) .comparison-divider{visibility:hidden}
.smoke-demo[data-step="0"] .comparison-before,.smoke-demo[data-step="0"] .comparison-divider,.smoke-demo[data-step="0"] .smoke-media input,.smoke-demo[data-step="0"] .comparison-labels span:first-child{display:none}
.smoke-demo[data-step="0"] .comparison-labels{justify-content:flex-start}
.smoke-compare figcaption{font-size:.875rem;padding-top:16px}
.smoke-variants{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:26px}
.smoke-variants button{padding:0 0 12px;text-align:left;border-bottom:2px solid #344455;color:#a8bbcf;min-width:0}
.smoke-variants button>span:last-child{display:block;padding-top:11px;font-size:.875rem;font-weight:500}
.smoke-thumb{display:block;background:#050608;overflow:hidden;aspect-ratio:2169/1216;border:1px solid #263340}
.smoke-thumb img{width:100%;height:100%;object-fit:contain}
.smoke-variants button:hover{color:#fff;border-color:#829fb9}
.smoke-variants button[aria-pressed=true]{border-color:#a2d4ff;color:#c9e7ff}
.smoke-variants button[aria-pressed=true] .smoke-thumb{border-color:#a2d4ff}
.smoke-note{font-size:.8125rem;line-height:1.75;color:#91a7be;max-width:950px;margin:24px 0 0}
.smoke-error{padding:18px;border:1px solid #bf8294;color:#ffdae5}
@media(max-width:960px){.smoke-heading{gap:36px}.smoke-steps{gap:20px}.smoke-steps button{gap:10px}}
@media(max-width:760px){.smoke-heading{grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:24px}.smoke-heading>p{max-width:650px}.smoke-description{min-height:0}.smoke-variants{gap:12px}}
@media(max-width:520px){.smoke-heading h3{font-size:1.75rem}.smoke-heading .section-code{font-size:.75rem;letter-spacing:.07em}.smoke-steps{gap:14px}.smoke-steps button{align-items:flex-start;flex-direction:column;gap:8px;padding-block:16px;font-size:.875rem;line-height:1.4}.smoke-description{margin-block:20px;font-size:.9375rem}.smoke-toolbar{gap:14px}.smoke-zoom button{padding-inline:13px}.smoke-media .comparison-labels{inset:10px 10px auto;font-size:.8125rem}.smoke-variants{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.smoke-compare figcaption{font-size:.8125rem}.smoke-note{font-size:.8125rem}}