#product-demo{width:760px}.demo-banner{display:flex;align-items:center;gap:10px;font:12px var(--mono);letter-spacing:.8px;color:#b9d4d6;background:#8cbcc60b;border:1px solid #8cbcc632;padding:12px 14px}.demo-steps{display:flex;list-style:none;padding:0;margin:22px 0 30px;gap:20px}.demo-step{font:12px var(--mono);color:#61728a;padding-bottom:10px;flex:1;border-bottom:1px solid #ffffff15}.demo-step.current{color:#c1dce1;border-color:#8cbcc6}.demo-step.complete{color:#a5cfae;border-color:#a5cfae77}.demo-heading h3,.demo-result h3{font:400 26px var(--display);letter-spacing:-.8px;margin:12px 0}.demo-heading p{font-size:13px;color:#92a3b9;line-height:1.8;margin:0 0 20px}.demo-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.demo-product{position:relative;padding:18px 14px;border:1px solid #ffffff20;text-align:left;min-height:145px;border-radius:3px}.demo-product.chosen{border-color:#8cbcc6;background:#8cbcc609}.demo-product>span{font:12px var(--mono);color:#8097b5}.demo-product strong{font:400 18px var(--display);display:block;margin:16px 0 9px}.demo-product small{font-size:12px;color:#8c9db4;line-height:1.8}.demo-product b{position:absolute;right:12px;top:14px;color:#8cbcc6;font-size:14px}.demo-summary{display:flex;flex-direction:column;gap:8px;margin:22px 0;font-size:12px;color:#8093ad}.demo-summary strong{font-weight:400;color:#c5cfdd}.demo-next{width:100%;text-align:left}.demo-preview-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:25px}.demo-visual{min-height:260px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse,#263642,#101a27);border:1px solid #ffffff12;overflow:hidden}.demo-image-label,.demo-image-caption{position:absolute;font:12px var(--mono);letter-spacing:1px;color:#849bb2;left:14px;top:14px}.demo-image-caption{top:auto;bottom:14px}.demo-phone{width:100px;height:180px;border:4px solid var(--case-color);border-radius:24px;background:linear-gradient(135deg,var(--case-color),#1a263699);transform:rotate(-14deg);box-shadow:20px 20px 45px #0005;position:relative}.demo-phone i{position:absolute;width:17px;height:17px;background:#132032;border:2px solid #ffffff50;border-radius:50%;left:8px;top:10px}.demo-phone i:nth-child(2){top:33px}.demo-phone i:nth-child(3){left:30px;top:22px;width:8px;height:8px;background:#e1d6b8}.demo-phone b{font:35px var(--display);position:absolute;top:85px;left:30px;color:#ffffff40;font-weight:400}.demo-colors{display:flex;flex-direction:column;gap:8px;margin:13px 0 23px}.demo-colors button{text-align:left;border:1px solid #ffffff17;padding:10px 13px;display:flex;align-items:center;gap:10px;font-size:12px}.demo-colors button.chosen{border-color:#8cbcc677}.demo-colors i{width:10px;height:10px;border-radius:50%;display:inline-block}.demo-checks{display:flex;flex-direction:column;gap:10px;font:12px/1.5 var(--mono);color:#8d9fb6}.demo-actions{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-top:24px}.demo-actions>.primary{flex:1;max-width:65%;font-size:12px}.demo-back{font:12px var(--mono);color:#8ba0bb;padding:10px 0}.demo-review{margin:25px 0}.demo-review>div{display:grid;grid-template-columns:150px 1fr;gap:10px;border-bottom:1px solid #ffffff12;padding:13px 0;font-size:13px}.demo-review dt{color:#768da8}.demo-review dd{margin:0;color:#c8d3e0}.demo-approval{display:flex;align-items:center;gap:10px;font-size:12px;color:#adbdd0;line-height:1.6}.demo-approval input{accent-color:#8cbcc6;width:16px;height:16px}.primary:disabled{opacity:.3;cursor:not-allowed}.demo-result{text-align:center;padding:10px 30px 25px}.demo-result-icon{display:grid;place-items:center;width:58px;height:58px;border:1px solid #a5cfae60;border-radius:50%;color:#a5cfae;font-size:26px;margin:0 auto 25px}.demo-result .tiny-label{display:block}.demo-result p{font-size:14px;color:#9eb0c6}.demo-result code{font:12px var(--mono);color:#8cbcc6;display:inline-block;border:1px solid #8cbcc62a;padding:10px 16px;margin-top:10px}.demo-result-note{font-size:12px;line-height:1.8;color:#7f94af;margin:25px auto;max-width:380px}.demo-result .primary{margin:auto;font-size:12px}@media(max-width:600px){.demo-catalog{grid-template-columns:1fr}.demo-product{min-height:95px;padding:14px}.demo-product strong{font-size:17px;margin:10px 0 5px}.demo-product small{font-size:12px}.demo-banner{font-size:12px;letter-spacing:.3px}.demo-preview-layout{grid-template-columns:1fr}.demo-visual{min-height:250px}.demo-options{margin-top:0}.demo-colors{flex-direction:row;flex-wrap:wrap}.demo-colors button{font-size:12px;flex:1;white-space:nowrap;padding:10px 8px}.demo-review>div{grid-template-columns:100px 1fr;font-size:12px}.demo-actions{gap:14px}.demo-actions>.primary{font-size:12px;max-width:70%;padding:14px 10px}.demo-back{font-size:12px}.demo-result{padding:10px 0}.demo-steps{gap:12px}.demo-step{font-size:12px}}