#ocdemo{color-scheme:dark}#ocdemo [hidden]{display:none!important}#ocdemo{color-scheme:dark;--bg: #07060a;--ink: #efe6d2;--muted: #a79a80;--gold: #e8c27a;--line: rgba(232, 194, 122, .28);--panel: rgba(20, 16, 12, .72);--gold-metal: linear-gradient(110deg, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, .55) 11%, rgba(255, 255, 255, 0) 19%), linear-gradient(180deg, #fff4cc 0%, #f7d98c 26%, #e8bb5f 58%, #cf9940 84%, #ebc574 100%);--gold-ink: #2b1a05;--gold-shine: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -2px 3px rgba(110, 66, 12, .55), 0 0 0 1px rgba(120, 80, 20, .6), 0 4px 18px rgba(214, 160, 60, .35)}#ocdemo *{box-sizing:border-box}#ocdemo{margin:0;background:var(--bg)}#ocdemo{color:var(--ink);font:600 11px/1 Inter,system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#ocdemo .stage{position:absolute;top:0;right:0;bottom:0;left:0;background:#000;overflow:hidden}#ocdemo .stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,#07060a59,#07060a0d 45%,#07060a8c)}#ocdemo #oc-stage{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none;opacity:0;transition:opacity .6s ease-out}#ocdemo #oc-stage.on{opacity:1}#ocdemo .start{position:absolute;left:50%;top:50%;z-index:3;width:104px;height:104px;margin:-52px 0 0 -52px;transition:opacity .35s ease-out,transform .35s ease-out}#ocdemo .start.gone{opacity:0;transform:scale(.8);pointer-events:none}#ocdemo .start:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;background:#07060a99;transition:opacity .5s}#ocdemo .start.ready:before{opacity:0}#ocdemo .ring{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg);transition:opacity .5s}#ocdemo .ring circle{fill:none;stroke-width:2.5}#ocdemo .ring .track{stroke:#e8c27a2e}#ocdemo .ring .fill{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .25s linear}#ocdemo .start.ready .ring{opacity:0}#ocdemo #oc-play{position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;color:var(--gold-ink);background:var(--gold-metal);box-shadow:var(--gold-shine);transition:opacity .3s,filter .3s}#ocdemo #oc-play svg{width:34px;height:34px;fill:currentColor;margin-left:4px}#ocdemo #oc-play[disabled]{filter:brightness(.5) saturate(.7);box-shadow:none;cursor:progress}#ocdemo #oc-play:not([disabled]):active{filter:brightness(1.2)}#ocdemo .start.ready:after{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:50%;pointer-events:none;border:1.5px solid var(--gold);animation:breathe 2.2s ease-out infinite}@keyframes breathe{0%{transform:scale(1);opacity:.7}to{transform:scale(1.55);opacity:0}}#ocdemo .status{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%);margin:0;white-space:nowrap;letter-spacing:.22em;color:var(--muted);text-shadow:0 1px 6px #000;transition:opacity .3s}#ocdemo .start.ready .status{opacity:0}#ocdemo .start.failed .status{color:var(--gold)}#ocdemo .wait{position:absolute;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));z-index:3;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;padding:11px 18px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);letter-spacing:.22em;color:var(--gold);white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none}#ocdemo .wait.on{opacity:1}#ocdemo .wait.failed{pointer-events:auto;cursor:pointer}#ocdemo .wait.failed i{display:none}#ocdemo .wait i{display:block;width:132px;height:2px;border-radius:1px;background:#e8c27a33;overflow:hidden}#ocdemo .wait b{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);transition:transform .25s linear}#ocdemo .cue{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}#ocdemo .cue.on{opacity:1}#ocdemo .cue .hand{position:absolute;left:0;top:0;animation:drag-me 2.4s ease-in-out infinite}#ocdemo .cue svg{position:absolute;left:-16px;top:-3px;width:40px;height:50px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}#ocdemo .cue .touch{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;border:2px solid var(--gold);background:#e8c27a40;animation:touch 2.4s ease-in-out infinite}@keyframes drag-me{0%{transform:translate(-34px,10px);opacity:0}12%{transform:translate(-34px);opacity:1}22%{transform:translate(-34px) scale(.9)}62%{transform:translate(34px) scale(.9);opacity:1}72%{transform:translate(34px,-2px) scale(1);opacity:1}88%,to{transform:translate(34px,-8px);opacity:0}}@keyframes touch{0%,18%{opacity:0;transform:scale(.4)}24%,60%{opacity:1;transform:scale(1)}68%,to{opacity:0;transform:scale(1.3)}}@media(prefers-reduced-motion:reduce){#ocdemo .cue .hand,#ocdemo .cue .touch{animation:none}#ocdemo .cue .touch{opacity:1}#ocdemo .start.ready:after{animation:none;opacity:0}}#ocdemo .controls{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));opacity:0;transition:opacity .4s;pointer-events:none}#ocdemo .controls.on{opacity:1;pointer-events:auto}#ocdemo #oc-power{display:flex;align-items:center;gap:10px;height:54px;padding:0 24px 0 18px;border-radius:999px;cursor:pointer;font:600 14px/1 Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.2em;color:var(--muted);background:var(--panel);border:1px solid var(--line);transition:color .25s,border-color .25s}#ocdemo #oc-power svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:color .25s,filter .25s}#ocdemo #oc-power:hover{border-color:#e8c27a99}#ocdemo #oc-power[aria-pressed=true]{color:var(--gold-ink);background:var(--gold-metal);box-shadow:var(--gold-shine);border-color:transparent}#ocdemo #oc-power[disabled]{opacity:.45;cursor:progress}#ocdemo #oc-pause{width:72px;height:72px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;color:var(--gold-ink);background:var(--gold-metal);box-shadow:var(--gold-shine)}#ocdemo #oc-pause:active{filter:brightness(1.2)}#ocdemo #oc-pause svg{width:30px;height:30px;fill:currentColor}#ocdemo .download{position:absolute;z-index:3;display:flex;align-items:center;height:46px;padding:0 24px;border-radius:999px;left:calc(20px + env(safe-area-inset-left,0px));bottom:calc(33px + env(safe-area-inset-bottom,0px));font:600 12px/1 Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.2em;white-space:nowrap;color:var(--gold);background:none;border:1.5px solid var(--gold);text-decoration:none;opacity:0;transition:opacity .6s,color .2s,border-color .2s;pointer-events:none}#ocdemo .download.on{opacity:1;pointer-events:auto}#ocdemo .download:hover{color:#fff4cc;border-color:#fff4cc}#ocdemo .download:focus-visible{outline:2px solid var(--gold);outline-offset:3px}@media(max-width:560px){#ocdemo .controls{gap:8px;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}#ocdemo #oc-power{height:46px;gap:8px;padding:0 16px 0 13px;font-size:12px;letter-spacing:.16em}#ocdemo #oc-power svg{width:20px;height:20px}#ocdemo #oc-pause{width:58px;height:58px}#ocdemo #oc-pause svg{width:24px;height:24px}#ocdemo .download{height:40px;padding:0 15px;font-size:10px;letter-spacing:.14em;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(25px + env(safe-area-inset-bottom,0px))}}#ocdemo #oc-pause .icon-play{margin-left:3px}#ocdemo #oc-pause .icon-play,#ocdemo #oc-pause.paused .icon-pause{display:none}#ocdemo #oc-pause.paused .icon-play{display:block}#ocdemo button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}#ocdemo{position:relative;width:100%;margin:0 auto}#ocdemo .stage{position:relative!important;inset:auto!important;width:100%;aspect-ratio:2 / 1;max-height:calc(100vh - 150px);min-height:480px;isolation:isolate}#ocdemo .wait{bottom:118px}#ocdemo .controls{left:50%!important;right:auto!important;bottom:22px!important;transform:translate(-46px);flex-direction:row-reverse;gap:14px!important}#ocdemo #oc-pause{width:92px!important;height:92px!important}#ocdemo #oc-pause svg{width:38px!important;height:38px!important}#ocdemo #oc-power{height:58px!important}@media(max-width:767px){#ocdemo .controls{bottom:14px!important;gap:10px!important;transform:translate(-36px)}#ocdemo #oc-pause{width:72px!important;height:72px!important}#ocdemo #oc-pause svg{width:30px!important;height:30px!important}#ocdemo #oc-power{height:48px!important}}#ocdemo .download{left:26px;bottom:34px;cursor:pointer;height:60px!important;padding:0 36px!important;font-size:15px!important;letter-spacing:.22em!important;border-width:2px!important}@media(max-width:767px){#ocdemo .download{display:none!important}#ocdemo .controls{bottom:8px!important}#ocdemo .wait{bottom:96px!important}}#ocdemo .stage:before{content:"";position:absolute;left:0;right:0;top:0;height:26%;z-index:1;pointer-events:none;background:linear-gradient(180deg,#07060a,#07060ad9 22%,#07060a00)}#ocdemo .stage:after{background:linear-gradient(180deg,#07060a59,#07060a0d 45%,#07060a99 86%,#07060a)!important}#ocdemo .status,#ocdemo .wait{font-family:Inter,system-ui,sans-serif}#ocdemo a.download:hover{text-decoration:none}
/*# sourceMappingURL=/cdn/shop/t/9/assets/omnichoir-demo.css.map */