.zb-dn__layout{display:grid;gap:32px;align-items:center}.zb-daynight .zb-dn__head{margin-bottom:0}.zb-dn__head .zb-lead{margin-top:14px}.zb-dn{display:block}.zb-dn__stage{position:relative;aspect-ratio:4 / 5;overflow:hidden;border-radius:var(--zb-radius);background:radial-gradient(120% 90% at 50% 0%,#fbf8f3,#efe7db 65%,#e4d9c8);box-shadow:var(--zb-shadow);touch-action:pan-y}.zb-dn__stage:after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:13%;background:radial-gradient(ellipse at 50% 0%,#fff4dcf2,#fff4dc00 70%);opacity:calc(1 - var(--p));pointer-events:none}.zb-dn__window{position:absolute;top:12%;right:13%;bottom:13%;left:13%;border:9px solid #fdfbf8;border-radius:6px;background:#dfe9ef;box-shadow:0 18px 40px #3c2d1e29,inset 0 0 0 1px #0000000d}.zb-dn__scene{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.zb-dn__photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.zb-dn__sky{position:absolute;top:0;right:0;bottom:0;left:0}.zb-dn__sky--day{background:linear-gradient(180deg,#b9d3e3,#d9e7ee 55%,#f2e8d6)}.zb-dn__sun{position:absolute;top:12%;right:16%;width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff8e2 0 36%,#ffeec48c 38%,#ffeec400 70%)}.zb-dn__hill{position:absolute;border-radius:50% 50% 0 0}.zb-dn__hill--back{left:-20%;right:10%;bottom:-14%;height:40%;background:#aebfa4}.zb-dn__hill--front{left:25%;right:-35%;bottom:-22%;height:42%;background:#8fa488}.zb-dn__sky--night{background:radial-gradient(1.5px 1.5px at 22% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 64% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 42%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 40% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 12% 64%,#fff 50%,transparent 51%),linear-gradient(180deg,#1a2137,#2b3451 60%,#474758);opacity:calc(var(--p) * .92)}.zb-dn__moon{position:absolute;top:14%;left:18%;width:34px;height:34px;border-radius:50%;box-shadow:9px 7px #f2e7cf}.zb-dn__frame{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(to right,transparent calc(50% - 4px),#fdfbf8 calc(50% - 4px),#fdfbf8 calc(50% + 4px),transparent calc(50% + 4px));pointer-events:none}.zb-dn__shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}.zb-dn__fabric{position:absolute;top:0;right:0;bottom:12px;left:0;background-image:linear-gradient(to bottom,var(--zb-dn-solid) 0,var(--zb-dn-solid) 50%,var(--zb-dn-sheer) 50%,var(--zb-dn-sheer) 100%);background-size:100% calc(var(--zb-dn-band) * 2);background-repeat:repeat}.zb-dn__fabric--front{background-position:0 calc(var(--p) * var(--zb-dn-band))}.zb-dn__shade:after{content:"";position:absolute;top:0;right:0;bottom:12px;left:0;background:linear-gradient(100deg,#ffffff29,#fff0 45%,#0000000f);pointer-events:none}.zb-dn__rail{position:absolute;left:-2px;right:-2px;bottom:0;height:12px;border-radius:3px;background:linear-gradient(180deg,#f7f4ef,#d9d1c4);box-shadow:0 3px 6px #0000001f}.zb-dn__cassette{position:absolute;z-index:3;top:-18px;left:-14px;right:-14px;height:24px;border-radius:6px;background:linear-gradient(180deg,#fdfcfa,#e7e1d8);box-shadow:0 4px 10px #0000001f}.zb-dn__dim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;background:#1c1e2c;opacity:calc(var(--p) * .26);pointer-events:none}.zb-daynight .zb-dn__hint{position:absolute;z-index:5;left:50%;bottom:12px;transform:translate(-50%);background:#ffffffe6;color:#2b2c2e;white-space:nowrap;transition:opacity .4s;animation:zb-dn-pulse 2.4s ease-in-out infinite}.zb-dn.is-touched .zb-dn__hint{opacity:0;animation:none}@keyframes zb-dn-pulse{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-4px)}}.zb-dn__controls{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"slider slider" "day night";gap:14px 12px;margin-top:20px}.zb-dn__slider{grid-area:slider;display:flex;align-items:center}.zb-dn__label{display:flex;align-items:center;gap:10px;padding:4px 0;border:0;background:none;color:var(--zb-text);font:inherit;text-align:left;cursor:pointer;opacity:.5;transition:opacity .3s}.zb-dn__label.is-active{opacity:1}.zb-dn__label .zb-icon{flex-shrink:0;color:var(--zb-highlight)}.zb-dn__label span{display:flex;flex-direction:column;line-height:1.3}.zb-dn__label strong{font-family:var(--zb-font-heading);font-size:20px;font-weight:var(--zb-font-heading-weight)}.zb-dn__label small{font-size:13px;color:var(--zb-muted)}.zb-dn__label--day{grid-area:day}.zb-dn__label--night{grid-area:night;flex-direction:row-reverse;justify-self:end;text-align:right}.zb-dn__label--night span{align-items:flex-end}.zb-dn__slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin:0;padding:0;border:0;background:transparent;cursor:grab}.zb-dn__slider input[type=range]:active{cursor:grabbing}.zb-dn__slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#efe2c8,var(--zb-text))}.zb-dn__slider input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#efe2c8,var(--zb-text))}.zb-dn__slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;border:1px solid rgba(0,0,0,.08);border-radius:50%;background:#fff;box-shadow:0 4px 14px #0000002e}.zb-dn__slider input[type=range]::-moz-range-thumb{width:30px;height:30px;border:1px solid rgba(0,0,0,.08);border-radius:50%;background:#fff;box-shadow:0 4px 14px #0000002e}.zb-dn__slider input[type=range]:focus-visible{outline:2px solid var(--zb-highlight);outline-offset:4px;border-radius:999px}@media(min-width:750px){.zb-dn__stage{aspect-ratio:1 / 1}.zb-dn__window{top:13%;right:22%;bottom:12%;left:22%}.zb-dn__controls{grid-template-columns:auto 1fr auto;grid-template-areas:"day slider night";gap:24px}}@media(min-width:990px){.zb-dn__layout{grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,88px)}}@media(prefers-reduced-motion:reduce){.zb-daynight .zb-dn__hint{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/zebra-daynight.css.map */