.design-library{padding-block:84px;border-top:1px solid var(--line);scroll-margin-top:100px}.design-library-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:42px;align-items:start}.design-preview-stage{position:sticky;top:110px;border:1px solid #ddd9e6;border-radius:16px;overflow:hidden;background:#f1efe8}.design-shop-header,.design-preview-foot{padding:20px 24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:10px;line-height:1.6;background:#fff}.design-shop-header{letter-spacing:.1em;border-bottom:1px solid #e2dfd7}.design-shop-header span+span{font-size:8px;color:var(--muted)}.design-preview-body{padding:38px 22px 30px;text-align:center;background:radial-gradient(ellipse at top,#fffcf3,#eeece5)}.design-preview-body>p{font-size:clamp(28px,3vw,43px);line-height:1.15;letter-spacing:-.04em;margin:0 0 32px}.design-preview-body>p em{font-family:Georgia,serif;font-weight:400}.design-clock{display:grid;justify-items:center;gap:10px;padding:23px 12px;background:var(--clock-bg);color:var(--clock-fg);border:1px solid var(--clock-border);border-radius:12px;box-shadow:0 6px 24px #26202c16;max-width:100%;min-width:0}.design-preview-label{font-size:11px;opacity:.8}.design-clock>strong{font-size:14px}.design-clock .sf-clock-digits{margin-top:8px;gap:12px}.design-clock .sf-clock-digits b{font-size:28px;line-height:1.2}.design-clock .sf-clock-digits small{font-size:9px;line-height:1.5}.design-sample-note{display:block;margin-top:18px;font-size:10px;color:#6e6a72;line-height:1.5}.design-preview-foot{border-top:1px solid #e2dfd7;display:grid}.design-preview-foot a{font-size:12px;color:var(--purple);font-weight:650;text-decoration:underline;text-underline-offset:3px}.design-explorer fieldset{border:0;padding:0;margin:0;min-width:0}.design-explorer fieldset fieldset{margin-bottom:24px}.design-explorer legend{font-size:12px;font-weight:650;margin-bottom:12px}.design-placement{display:flex;gap:8px;flex-wrap:wrap}.design-placement label{flex:1;position:relative;cursor:pointer}.design-placement span{display:block;text-align:center;border:1px solid #d7d3df;border-radius:7px;padding:12px;font-size:12px}.design-placement input{position:absolute;opacity:0;width:1px;height:1px}.design-placement input:checked+span{background:#eee9fb;border-color:#8062c5;color:#56348f}.design-placement input:focus-visible+span{outline:3px solid #7a57c3;outline-offset:3px}.design-clock-grid,.design-banner-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.design-banner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-option{display:block;position:relative;cursor:pointer;min-width:0}.design-option>input{position:absolute;inset:0;opacity:0;pointer-events:none;width:1px;height:1px}.design-option-content,.design-color-content{display:grid;padding:10px;gap:9px;border:1px solid #ddd9e5;border-radius:9px;height:100%;background:#fff}.design-option-top{display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:26px}.design-option-top strong{font-size:10px;line-height:1.35}.design-radio-mark{width:13px;height:13px;border:1px solid #aaa4b5;border-radius:50%;flex-shrink:0}.design-option>input:checked+span{background:#f8f5ff;border-color:#7a57c3;box-shadow:inset 0 0 0 1px #7a57c3}.design-option>input:checked+span .design-radio-mark{border:4px solid #7a57c3}.design-option>input:focus-visible+span{outline:3px solid #7a57c3;outline-offset:3px}.design-option-content>small{font-size:9px;line-height:1.5;color:#6b6377}.design-card-sample{display:grid;place-items:center;border-radius:5px;padding:10px 3px;background:var(--clock-bg);color:var(--clock-fg);min-height:66px}.design-card-sample .sf-clock-digits{gap:5px}.design-card-sample .sf-clock-digits b{font-size:17px;line-height:1.2}.design-card-sample .sf-clock-digits small{font-size:7px}.design-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.design-color-content{display:flex;align-items:center;padding:7px;gap:7px;font-size:10px;line-height:1.4;min-height:44px}.design-color-content .design-radio-mark{margin-left:auto}.design-swatch{display:grid;place-items:center;flex-shrink:0;width:27px;height:29px;border-radius:5px;border:1px solid var(--clock-border);background:var(--clock-bg);color:var(--clock-fg);font-size:10px}.design-banner-sample{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:10px 8px;background:var(--clock-bg);color:var(--clock-fg);border:1px solid var(--clock-border);border-radius:8px;box-shadow:0 3px 8px #0002;font-size:9px;min-height:38px}.design-banner-sample b{font-size:11px;font-variant-numeric:tabular-nums}.design-library-note{font-size:12px;line-height:1.8;color:var(--muted);margin-top:22px;max-width:760px}.portfolio-update{font-size:12px!important;line-height:1.7!important;color:#655c76;max-width:310px}.walkthrough-interface-note{font-size:12px;line-height:1.7;color:var(--muted);max-width:750px;margin-top:20px}
.sf-clock-digits{display:flex;gap:8px;justify-content:center;flex-shrink:0;font-variant-numeric:tabular-nums}.sf-clock-digits>span{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}.sf-clock-digits b{font-weight:650}.sf-clock-digits small{opacity:.8}
:is(.sf-countdown,.design-clock,.design-card-sample)[data-clock-style="tiles"] .sf-clock-digits b{padding:3px 6px;background:color-mix(in srgb,currentColor 10%,transparent);border:1px solid transparent;border-radius:8px}
:is(.sf-countdown,.design-clock,.design-card-sample)[data-clock-style="outline"] .sf-clock-digits b{padding:3px 6px;border:1px solid color-mix(in srgb,currentColor 55%,transparent);border-radius:5px}
:is(.sf-countdown,.design-clock,.design-card-sample)[data-clock-style="minimal"] .sf-clock-digits b{font-weight:500}
:is(.sf-countdown,.design-clock,.design-card-sample)[data-clock-style="minimal"] .sf-clock-digits>span+span:before{content:":";position:absolute;left:-8px;top:0;opacity:.5}
:is(.sf-countdown,.design-clock,.design-card-sample)[data-clock-style="flip"] .sf-clock-digits b{padding:4px 6px;border-radius:4px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);background:linear-gradient(to bottom,transparent 48%,color-mix(in srgb,currentColor 40%,transparent) 49%,color-mix(in srgb,currentColor 40%,transparent) 51%,transparent 52%),color-mix(in srgb,currentColor 9%,transparent);box-shadow:0 2px 0 color-mix(in srgb,currentColor 22%,transparent)}
:is(.sf-countdown,.design-clock,.design-card-sample)[data-clock-style="round"] .sf-clock-digits b{display:grid;place-items:center;min-width:2.1em;min-height:2.1em;box-sizing:border-box;border:1px solid color-mix(in srgb,currentColor 45%,transparent);border-radius:50%;background:color-mix(in srgb,currentColor 6%,transparent)}
:is(.sf-countdown,.design-clock,.design-card-sample)[data-clock-style="pill"] .sf-clock-digits b{padding:4px 9px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);border:1px solid color-mix(in srgb,currentColor 18%,transparent)}
:is(.sf-countdown,.design-clock,.design-card-sample)[data-clock-style="editorial"] .sf-clock-digits b{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.04em}
:is(.sf-countdown,.design-clock,.design-card-sample)[data-clock-style="editorial"] .sf-clock-digits small{text-transform:uppercase;letter-spacing:.06em}
:is(.design-banner-sample,.sf-countdown[data-mode="banner"])[data-banner-style="ribbon"],.design-clock[data-placement="banner"][data-banner-style="ribbon"]{border-radius:2px;box-shadow:none}
:is(.design-banner-sample,.sf-countdown[data-mode="banner"])[data-banner-style="accent"],.design-clock[data-placement="banner"][data-banner-style="accent"]{border-top:4px solid currentColor}
:is(.design-banner-sample,.sf-countdown[data-mode="banner"])[data-banner-style="ticket"],.design-clock[data-placement="banner"][data-banner-style="ticket"]{border:1px dashed currentColor;border-radius:4px;box-shadow:none}
@media(max-width:1100px){.design-library-layout{gap:25px}.design-clock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-clock .sf-clock-digits b{font-size:23px}}
@media(max-width:760px){.design-library{padding-block:54px}.design-library-layout{grid-template-columns:minmax(0,1fr)}.design-preview-stage{position:static}.design-clock-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.design-color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:540px){.design-clock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-preview-body{padding:30px 10px 24px}.design-clock .sf-clock-digits{gap:6px}.design-clock .sf-clock-digits b{font-size:20px}.design-shop-header,.design-preview-foot{padding:16px}.design-card-sample .sf-clock-digits b{font-size:18px}.design-preview-body>p{font-size:29px}.design-clock[data-clock-style="pill"] .sf-clock-digits b{padding-inline:6px}}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}