.of-card{--oc: #66c0f4;list-style:none}.of-card--launch{--oc: #ffa94d}.of-card--student{--oc: #66c0f4}.of-card--welcome{--oc: #3ddc84}.of-card--weekly{--oc: #a996ff}.of-card--invite{--oc: #ff7ab8}.of-card--older{--oc: #ffd166}.of-card--creator{--oc: #ff8a8a}.of-card a{position:relative;display:flex;align-items:center;gap:16px;height:100%;padding:16px 20px 16px 18px;overflow:hidden;text-decoration:none;color:inherit;border:1px solid color-mix(in srgb,var(--oc) 32%,transparent);border-radius:14px;background:linear-gradient(120deg,color-mix(in srgb,var(--oc) 16%,#0a0e16),#090c13 70%);transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}.of-card a:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.09) 50%,transparent 62%);transform:translate(-120%);transition:transform .7s var(--ease);pointer-events:none}.of-card a:hover,.of-card a:focus-visible{border-color:var(--oc);transform:translateY(-2px);box-shadow:0 10px 28px color-mix(in srgb,var(--oc) 24%,transparent)}.of-card a:hover:after{transform:translate(120%)}.of-big{flex:none;min-width:76px;font-family:var(--font-display);font-weight:900;font-stretch:85%;font-size:36px;line-height:1;letter-spacing:-.01em;color:var(--oc);text-shadow:0 0 22px color-mix(in srgb,var(--oc) 55%,transparent)}.of-big small{display:block;margin-top:4px;font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);text-shadow:none}.of-copy{display:grid;gap:3px;min-width:0}.of-copy strong{font-size:17px;font-weight:600;line-height:1.25;color:#fff}.of-copy span{font-size:14px;line-height:1.4;color:var(--text-2)}.of-grid{display:flex;flex-wrap:wrap;gap:14px}.of-grid .of-card{flex:1 1 calc(25% - 14px);min-width:280px}.of-band{display:flex;align-items:stretch;gap:0;margin:calc(var(--header-h) + 6px) clamp(16px,4.56vw,68px) 0;border:1px solid rgba(102,192,244,.28);border-radius:16px;overflow:hidden;background:linear-gradient(90deg,#1b9fff29,#090c13eb 30%)}.of-band+.hx{padding-top:52px}body:has(.sale-bar:not([hidden])) .of-band{margin-top:calc(var(--header-h) + 38px)}.of-label{flex:none;display:flex;align-items:center;gap:10px;padding:0 22px;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#66c0f4;border-right:1px solid rgba(102,192,244,.22)}.of-label .icon{width:22px;height:22px}.of-view{position:relative;display:flex;flex:1;min-width:0;overflow:hidden;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 48px),transparent 100%)}.of-track{flex:none;display:flex;gap:12px;padding-right:12px;animation:of-slide 80s linear infinite}.of-band .of-card{flex:none;width:372px}.of-band .of-card a{padding:10px 16px 10px 14px;gap:14px;border-radius:12px}.of-band .of-big{min-width:66px;font-size:28px}.of-band .of-copy strong{font-size:15px}.of-view:hover .of-track,.of-view:focus-within .of-track{animation-play-state:paused}@keyframes of-slide{to{transform:translate(-100%)}}@media (max-width: 899px){.of-band{margin-inline:var(--gutter)}.of-label span{display:none}.of-label{padding:0 14px}.of-band .of-card{width:300px}.of-band .of-copy span{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}@media (prefers-reduced-motion: reduce){.of-track{animation:none}.of-track--copy{display:none}.of-view{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin}}