.atlas-demo{--ink:#2d2d2d;--muted:#777777;--line:#dedede;--accent:#636363;--paper:#f7f7f7;max-width:1560px;margin:0 auto;padding:30px 48px 70px;color:var(--ink);font-family:Arial,sans-serif;letter-spacing:0;line-height:1.5}.atlas-demo *{box-sizing:border-box}.atlas-demo [hidden]{display:none!important}.atlas-demo button,.atlas-demo input{font:inherit}.atlas-demo button{cursor:pointer}.atlas-demo button:focus-visible,.atlas-demo input:focus-visible+span,.atlas-demo canvas:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.atlas-demo__intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.atlas-demo__breadcrumb{font-size:12px;color:var(--muted)}.atlas-demo__breadcrumb span{margin:0 12px;color:#ababab}.atlas-demo__preview{font-size:10px;letter-spacing:1.2px;display:flex;align-items:center;gap:8px;background:#f0f0f0;padding:7px 12px;border-radius:3px}.atlas-demo__preview i{background:#8d8d8d;border-radius:50%;width:5px;height:5px}.atlas-demo__layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,1fr);gap:56px;align-items:start}.atlas-demo__visual{position:sticky;top:24px}.atlas-demo__stage{position:relative;aspect-ratio:1.13;background:radial-gradient(ellipse at 45% 39%,#fcfcfc 0%,#f1f1f1 70%,#eaeaea 100%);border-radius:4px;overflow:hidden}.atlas-demo__stage canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}.atlas-demo__stage canvas:active{cursor:grabbing}.atlas-demo__tabs{position:absolute;left:22px;top:22px;z-index:2;display:flex;padding:4px;border:1px solid #e4e4e4;border-radius:30px;background:#ffffff9c;backdrop-filter:blur(8px)}.atlas-demo__tabs button{border:0;color:#797979;background:none;border-radius:24px;font-size:11px;padding:8px 13px}.atlas-demo__tabs .is-active{background:#ffffff;color:var(--ink);box-shadow:0 2px 6px #0000000a}.atlas-demo__stage-brand{position:absolute;right:23px;top:28px;font-size:8px;line-height:1.7;letter-spacing:1.6px;color:#787878;text-align:right;pointer-events:none}.atlas-demo__stage-brand b{font-weight:400;letter-spacing:3px}.atlas-demo__viewer-bottom{position:absolute;bottom:22px;left:24px;right:22px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.atlas-demo__viewer-bottom>span{font-size:11px;color:#818181;display:flex;gap:9px;align-items:center}.atlas-demo__viewer-bottom>span>span{font-size:21px}.atlas-demo__tools{pointer-events:auto;display:flex;border-radius:25px;background:#ffffffc9;border:1px solid #e2e2e2;padding:2px}.atlas-demo__tools button{height:34px;width:34px;border:0;background:none;font-size:19px;color:#5c5c5c}.atlas-demo__photo{width:100%;height:100%;object-fit:contain;background:#ededed}.atlas-demo__visual-footer{display:flex;gap:20px;align-items:start;justify-content:space-between;padding:16px 2px;color:var(--muted);font-size:10px;line-height:1.6}.atlas-demo__visual-footer>span{max-width:420px}.atlas-demo__visual-footer button{white-space:nowrap;border:0;background:none;color:#5c5c5c;font-size:10px;text-decoration:underline;text-underline-offset:4px;padding:0}.atlas-demo__editorial{border-top:1px solid var(--line);margin-top:26px;padding-top:25px}.atlas-demo__editorial>span{font-size:9px;color:var(--muted);letter-spacing:1.7px}.atlas-demo__editorial p{font-family:Georgia,serif;font-style:italic;font-size:clamp(20px,2.3vw,31px);line-height:1.25;color:#757575;max-width:450px;margin:11px 0}.atlas-demo__panel{padding:2px 0}.atlas-demo__eyebrow{font-size:9px;letter-spacing:2px;color:var(--muted);margin:0 0 11px}.atlas-demo h1{font-size:clamp(36px,3.5vw,52px);font-weight:400;line-height:1.12;letter-spacing:-1.7px;margin:0 0 14px;color:var(--ink)}.atlas-demo h1 span{color:#8e8e8e}.atlas-demo__description{font-size:13px;color:var(--muted);max-width:420px;line-height:1.7;margin:0 0 30px}.atlas-demo__field{border:0;border-top:1px solid var(--line);padding:20px 0 22px;margin:0;min-width:0}.atlas-demo__field legend{float:left;width:100%;font-size:13px;font-weight:600;padding:0;margin-bottom:15px;display:flex;gap:12px;align-items:center}.atlas-demo__field legend>span{font-size:10px;color:#919191;font-weight:400}.atlas-demo__sizes{clear:both;display:flex;gap:8px}.atlas-demo__sizes label{flex:1;position:relative}.atlas-demo input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}.atlas-demo__sizes label>span{display:block;border:1px solid var(--line);padding:11px 3px;text-align:center;font-size:12px;border-radius:2px;cursor:pointer}.atlas-demo__sizes small{font-size:10px;color:var(--muted)}.atlas-demo__sizes input:checked+span{border-color:var(--accent);background:#f2f2f2;box-shadow:inset 0 0 0 .4px var(--accent);color:#494949}.atlas-demo__hint{font-size:10px;color:var(--muted);margin:10px 0 0;line-height:1.5;clear:both}.atlas-demo__material-name{clear:both;display:flex;align-items:baseline;gap:10px;margin:0 0 12px}.atlas-demo__material-name strong{font-size:12px;font-weight:400}.atlas-demo__material-name>span{font-size:10px;color:var(--muted)}.atlas-demo__swatches{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px}.atlas-demo__swatch{position:relative;border:1px solid transparent;background:transparent;padding:3px;border-radius:50%;aspect-ratio:1;min-width:0}.atlas-demo__swatch img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:1px solid #0000000d}.atlas-demo__swatch[aria-pressed=true]{border-color:var(--accent)}.atlas-demo__swatch[aria-pressed=true]:after{content:'';position:absolute;right:-2px;bottom:0;border-radius:50%;background:var(--accent);color:white;font-size:8px;width:12px;height:12px;line-height:12px;text-align:center}.atlas-demo__use{clear:both;display:inline-flex;gap:3px;background:#f1f1f1;padding:3px;border-radius:3px;margin-bottom:14px}.atlas-demo__use label{position:relative}.atlas-demo__use span{display:block;padding:6px 22px;cursor:pointer;font-size:11px;border-radius:2px;color:#767676}.atlas-demo__use input:checked+span{color:var(--ink);background:white;box-shadow:0 1px 4px #0000000b}.atlas-demo__frames{display:flex;gap:18px}.atlas-demo__frames label{position:relative}.atlas-demo__frames label>span{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);cursor:pointer}.atlas-demo__frames i{display:inline-block;width:24px;height:24px;border:3px solid white;outline:1px solid var(--line);border-radius:50%}.atlas-demo__frames input:checked+span{color:var(--ink)}.atlas-demo__frames input:checked+span>i{outline-color:var(--accent)}.atlas-demo__black{background:#252525}.atlas-demo__anthracite{background:#5a5a5a}.atlas-demo__summary{padding:20px 22px;background:var(--paper);border:1px solid #e9e9e9;border-radius:3px}.atlas-demo__summary-label{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#797979;margin:0 0 7px}.atlas-demo__summary-description{font-size:11px;margin:0 0 16px;color:#5b5b5b;line-height:1.8}.atlas-demo__price-line{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin:8px 0;color:var(--muted)}.atlas-demo__price-line small{font-size:9px;color:#9a9a9a;margin-left:5px}.atlas-demo__price-line>span:last-child{white-space:nowrap}.atlas-demo__total{border-top:1px solid var(--line);padding-top:13px;margin-top:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}.atlas-demo__total>span{font-size:11px}.atlas-demo__total strong{font-size:29px;font-weight:400;line-height:1.3;letter-spacing:-.8px;white-space:nowrap}.atlas-demo__price-note{font-size:10px;color:var(--muted);line-height:1.6;margin:12px 0 16px}.atlas-demo__save{width:100%;border:0;border-radius:2px;padding:15px 21px;display:flex;justify-content:space-between;align-items:center;background:var(--accent);color:white;font-size:12px;transition:background .15s}.atlas-demo__save:hover{background:#4b4b4b}.atlas-demo__save span{font-size:19px;line-height:1}.atlas-demo__purchase{font-size:10px;color:#8e8e8e;text-align:center;margin:10px 0}.atlas-demo__status{font-size:11px;margin:7px 0;color:var(--accent)}.atlas-demo__details{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:45px}.atlas-demo__details details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;align-self:start}.atlas-demo__details summary{font-size:12px;display:flex;justify-content:space-between;cursor:pointer;list-style:none}.atlas-demo__details summary::-webkit-details-marker{display:none}.atlas-demo__details summary>span{font-size:18px;line-height:1}.atlas-demo__details details[open] summary>span{transform:rotate(45deg)}.atlas-demo__details p{font-size:12px;color:var(--muted);line-height:1.8;max-width:570px}.atlas-demo__measure{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);padding:8px 14px;background:#ffffffde;border:1px solid var(--line);font-size:11px;white-space:nowrap;border-radius:3px;color:#626262}.atlas-demo__swatches:empty{min-height:85px}.atlas-demo__save:disabled{opacity:.5;cursor:wait}
@media(min-width:1550px){.atlas-demo__stage{aspect-ratio:1.22}}@media(max-width:1100px){.atlas-demo{padding:22px 28px 50px}.atlas-demo__layout{gap:30px;grid-template-columns:minmax(0,1.15fr) minmax(335px,1fr)}.atlas-demo__stage{aspect-ratio:.9}.atlas-demo__swatches{gap:5px}.atlas-demo__tabs{left:15px;top:15px}.atlas-demo__stage-brand{top:77px;right:20px}.atlas-demo__sizes label>span{font-size:11px}}@media(max-width:760px){.atlas-demo{padding:18px 18px 40px}.atlas-demo__intro{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:18px}.atlas-demo__preview{font-size:8px;padding:5px 8px}.atlas-demo__breadcrumb{font-size:10px}.atlas-demo__layout{grid-template-columns:1fr;gap:25px}.atlas-demo__visual{position:static}.atlas-demo__stage{aspect-ratio:1.12}.atlas-demo__stage-brand{top:23px;right:17px;font-size:7px}.atlas-demo__tabs button{font-size:9px;padding:7px 10px}.atlas-demo__tabs{top:15px;left:13px}.atlas-demo__viewer-bottom{bottom:15px;left:17px;right:13px}.atlas-demo__viewer-bottom>span{font-size:9px}.atlas-demo__tools button{width:30px;height:30px}.atlas-demo__visual-footer{padding:12px 1px;font-size:9px;gap:12px}.atlas-demo__visual-footer button{font-size:9px}.atlas-demo__editorial{display:none}.atlas-demo__panel{padding:0 3px}.atlas-demo h1{font-size:39px}.atlas-demo__description{max-width:100%;margin-bottom:24px}.atlas-demo__field{padding:18px 0 21px}.atlas-demo__swatches{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.atlas-demo__sizes label>span{font-size:12px}.atlas-demo__details{grid-template-columns:1fr;gap:0;margin-top:30px}.atlas-demo__details details+details{border-top:0}.atlas-demo__summary{padding:18px}.atlas-demo__total strong{font-size:28px}}@media(prefers-reduced-motion:reduce){.atlas-demo *{transition:none!important}}

.atlas-demo__swatch[aria-pressed=true]:after{background:var(--accent) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2012L10%2017L20%206%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center/10px 10px no-repeat}