.ofc-stage{aspect-ratio:1;touch-action:pan-y;cursor:grab;width:100%;max-width:680px;margin-inline:auto;position:relative}.ofc-stage:active{cursor:grabbing}.ofc-box{position:absolute;inset:0}.ofc-canvas{opacity:0;width:100%;height:100%;transition:opacity 1.2s;display:block}.ofc-canvas.ofc-ready{opacity:1}.ofc-halo{filter:blur(28px);z-index:-1;background:radial-gradient(closest-side,#3b6bff59,#7b3fff29 62%,#0000 72%);border-radius:50%;position:absolute;inset:6%}.ofc-label{pointer-events:none;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position-anchor:var(--anchor);bottom:anchor(top);left:anchor(center);opacity:var(--vis,0);filter:blur(calc((1 - var(--vis,0)) * 6px));background:#060a26b8;border:1px solid #ffffff29;border-radius:8px;padding:5px 9px;font-size:11px;transition:opacity .3s,filter .3s;position:absolute;translate:-50% -10px}.ofc-label[data-on=true]{color:#1a1200;background:#ffb547;border-color:#ffb547}.ofc-card{text-align:left;width:100%;transition:opacity .9s var(--ease-out-expo), border-color .35s, background-color .35s, transform .5s var(--ease-out-expo), box-shadow .4s;background:linear-gradient(#ffffff0f,#ffffff05);border:1px solid #ffffff1a;border-radius:22px;grid-template-columns:104px 1fr auto;align-items:center;gap:18px;padding:12px 20px 12px 12px;display:grid;position:relative}.ofc-card:hover,.ofc-card[data-on=true]{background:linear-gradient(#22c8ff1f,#7b3fff14);border-color:#7fd8ff80;transform:translate(6px);box-shadow:0 30px 60px -34px #22c8ff8c}.ofc-thumb{border-radius:16px;width:104px;height:104px;position:relative;overflow:hidden}.ofc-thumb img{object-fit:cover;width:100%;height:100%;transition:transform .9s var(--ease-out-expo)}.ofc-card:hover .ofc-thumb img,.ofc-card[data-on=true] .ofc-thumb img{transform:scale(1.12)}.ofc-arrow{color:#c9cfee;width:38px;height:38px;transition:background-color .3s, color .3s, transform .4s var(--ease-out-expo);border:1px solid #ffffff2e;border-radius:999px;place-items:center;display:grid}.ofc-card:hover .ofc-arrow,.ofc-card[data-on=true] .ofc-arrow{color:#0b1033;background:#fff;transform:rotate(-45deg)}@media (max-width:560px){.ofc-card{grid-template-columns:76px 1fr;gap:14px;padding:10px 14px 10px 10px}.ofc-thumb{border-radius:14px;width:76px;height:76px}.ofc-arrow{display:none}.ofc-card:hover,.ofc-card[data-on=true]{transform:none}}