@property --oc-hue{syntax: "<angle>"; inherits: true; initial-value: 0deg;}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}:root{--oc-bg: #e8e8e6;--oc-ink: #121214;--oc-line: rgba(255, 255, 255, .55);--oc-panel-w: 100px;--oc-panel-h: 125px;--oc-preview-w: 250px;--oc-preview-h: 325px;--oc-hue: 0deg}.oc{position:relative;min-height:100svh;background:var(--oc-bg);color:var(--oc-ink);font-family:JetBrains Mono,ui-monospace,monospace;-webkit-font-smoothing:antialiased}.oc-slider{position:relative;width:100%;height:100svh;perspective:2000px;overflow:hidden;background:radial-gradient(70vmax 40vmax at 50% 100%,rgba(255,255,255,.9),transparent 60%),var(--oc-bg)}.oc-stage{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}.oc-orbit{position:absolute;top:50%;left:50%;width:var(--oc-panel-w);height:var(--oc-panel-h);transform:translate(-50%,-50%);transform-style:preserve-3d;will-change:transform}.oc-panel{position:absolute;width:100%;height:100%;overflow:hidden;border-radius:6px;box-shadow:0 20px 40px -20px #00000059;will-change:opacity,filter}.oc-panel img{display:block;width:100%;height:100%;object-fit:cover}.oc-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,#ffffff59,#fff0 40%,#0000001f);pointer-events:none}.oc-preview{position:absolute;top:50%;left:50%;width:var(--oc-preview-w);height:var(--oc-preview-h);transform:translate(-50%,-50%);padding:6px;border-radius:14px;background:#ffffff59;border:1px solid var(--oc-line);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 40px 80px -30px #00000073,inset 0 1px #fffc;overflow:hidden;will-change:transform}.oc-preview:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--oc-hue),rgba(255,255,255,0) 0deg,rgba(178,196,255,.9) 80deg,rgba(255,184,226,.75) 160deg,rgba(255,255,255,0) 220deg,rgba(160,255,228,.85) 300deg,rgba(255,255,255,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.8;pointer-events:none;z-index:2}.oc-preview__img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;border-radius:9px;display:block;will-change:opacity,transform}.oc-title{position:absolute;bottom:3rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.7em;margin:0;padding:.45rem .8rem;border-radius:999px;background:#121214d9;color:#fff;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}.oc-title__index{opacity:.5;font-variant-numeric:tabular-nums}.oc-title__text{display:inline-block;will-change:transform,opacity}@media(max-width:1000px){.oc{--oc-panel-w: 70px;--oc-panel-h: 88px;--oc-preview-w: 180px;--oc-preview-h: 234px}}