:root{--d-ink:#1a1a1a;--d-muted:#6b6b6b;--d-line:#e2e2e0;--d-surface:#ffffff;--d-page:#f6f5f3;--d-accent:#1a1a1a}body{margin:0;background:var(--d-page);color:var(--d-ink);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.demo-shell{max-width:1120px;margin:0 auto;padding:0 16px 40px}.demo-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--d-line);margin-bottom:20px}.demo-brand{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:14px}.demo-foot,.demo-tag{color:var(--d-muted);font-size:13px}.demo-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--d-line)}.demo{display:grid;grid-template-columns:1fr;grid-gap:28px;gap:28px}@media (min-width:900px){.demo{grid-template-columns:1.15fr 1fr;gap:40px}.demo-stage-col{position:-webkit-sticky;position:sticky;top:16px;align-self:start}}.demo-stage{background:var(--d-surface);border:1px solid var(--d-line);overflow:hidden}.demo-frame{position:relative;width:100%;min-height:240px;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none}@media (max-width:899px){.demo-frame{max-width:min(100%,52vh);margin:0 auto}}.demo-photo{display:block;width:100%;height:auto}.demo-frame:not(.loaded) .demo-area{visibility:hidden}.demo-area{position:absolute;box-sizing:border-box;transform-origin:center center;border:1.5px dashed transparent;transition:border-color .15s}.demo-area.visible{border-color:rgba(0,0,0,.35);box-shadow:0 0 0 1px rgba(255,255,255,.55)}.demo-caption{margin:0;padding:8px 12px;font-size:13px;color:var(--d-muted);border-top:1px solid var(--d-line)}.demo-logo{position:absolute;height:auto;cursor:-webkit-grab;cursor:grab;touch-action:none;filter:drop-shadow(0 0 .5px rgba(0,0,0,.2))}.demo-logo:active{cursor:-webkit-grabbing;cursor:grabbing}.demo-empty{padding:40px 20px;color:var(--d-muted);text-align:center}.demo-tabs{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}.demo-tabs button{font:inherit;padding:7px 14px;border:1px solid var(--d-line);background:var(--d-surface);color:var(--d-ink);border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.demo-tabs button.on{border-color:var(--d-ink);background:var(--d-ink);color:#fff}.demo-tabs .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}.demo-frame-toggle{margin-left:auto;color:var(--d-muted);font-size:13px;display:inline-flex;gap:6px;align-items:center}.demo-logo-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}.demo-btn{font:inherit;padding:9px 16px;border:1px solid var(--d-ink);background:var(--d-ink);color:#fff;cursor:pointer;border-radius:4px;display:inline-block}.demo-btn.ghost{background:var(--d-surface);color:var(--d-ink);border-color:var(--d-line)}.demo-btn.big{width:100%;padding:14px;font-size:16px;margin-top:12px}.demo-slider{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--d-muted)}.demo-slider input{width:120px}.demo-hint{color:var(--d-muted);font-size:13px;margin:8px 0 0}.demo-info h1{font-size:26px;margin:0 0 6px;line-height:1.2}.demo-info h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--d-muted);margin:22px 0 8px;font-weight:600}.demo-info h2 .demo-muted{text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}.demo-brandline{color:var(--d-muted);margin:0;font-size:13px}.demo-price{font-size:20px;font-weight:600;margin:0}.demo-price span{display:block;font-size:13px;font-weight:400}.demo-muted,.demo-price span{color:var(--d-muted)}.small{font-size:13px;margin:6px 0 0}.demo-swatches{display:flex;flex-wrap:wrap;gap:6px}.demo-swatches .sw{padding:3px;border:2px solid transparent;border-radius:6px;background:none;cursor:pointer;line-height:0}.demo-swatches .sw span{margin:0!important;border-radius:4px!important}.demo-swatches .sw.on{border-color:var(--d-ink)}.demo-sizes{display:flex;flex-wrap:wrap;gap:6px}.demo-sizes button{font:inherit;min-width:44px;padding:7px 10px;border:1px solid var(--d-line);background:var(--d-surface);color:var(--d-ink);cursor:pointer;border-radius:4px}.demo-sizes button.on{border-color:var(--d-ink);background:var(--d-ink);color:#fff}.demo-sizes button.out{color:var(--d-muted);text-decoration:line-through}.demo-qty{display:inline-flex;border:1px solid var(--d-line);border-radius:4px;overflow:hidden}.demo-qty button{font:inherit;font-size:18px;width:40px;border:0;background:var(--d-surface);cursor:pointer}.demo-qty input{font:inherit;width:64px;text-align:center;border:0;border-left:1px solid var(--d-line);border-right:1px solid var(--d-line);-moz-appearance:textfield}.demo-qty input::-webkit-inner-spin-button,.demo-qty input::-webkit-outer-spin-button{-webkit-appearance:none}.demo-summary{margin-top:26px;padding:16px;background:var(--d-surface);border:1px solid var(--d-line)}.demo-summary h2{margin-top:0}.demo-summary dl{display:grid;grid-template-columns:auto 1fr;grid-gap:6px 14px;gap:6px 14px;margin:0}.demo-summary dt{color:var(--d-muted)}.demo-summary dd{margin:0}.demo-sent{margin:12px 0 0;padding:12px;background:var(--d-page);border-left:3px solid var(--d-ink)}.demo-details{margin-top:14px;border-top:1px solid var(--d-line);padding-top:10px}.demo-details summary{cursor:pointer;font-weight:600}.demo-details ul{padding-left:18px;color:var(--d-muted)}.demo-details img{max-width:100%}