@layer components{.of{--of-line:color-mix(in srgb, var(--ink) 14%, transparent);--of-muted:color-mix(in srgb, var(--ink) 62%, transparent);isolation:isolate}.of-kicker{font:700 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--of-muted)}.of-title{color:var(--blue);font:800 clamp(38px, 6.4cqi, 58px) / .86 var(--display);letter-spacing:.005em;text-transform:uppercase;margin:0}.of-h{color:var(--ink);font:800 22px / .95 var(--display);letter-spacing:.01em;text-transform:uppercase;margin:0}.of-body{color:color-mix(in srgb, var(--ink) 82%, transparent);font-size:13.5px;line-height:1.45}.of-fine{color:var(--of-muted);font-size:11.5px;line-height:1.4}.of-status{font:700 10px / 1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--of-muted)}.of-section{font:700 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--of-muted);align-items:center;gap:12px;margin:0 0 14px;display:flex}.of-section:after{content:"";background:var(--of-line);flex:1;height:1px}.of-points{gap:7px;margin:0;padding:0;list-style:none;display:grid}.of-points li{align-items:flex-start;gap:9px;font-size:14px;line-height:1.3;display:flex}.of-points svg{flex-shrink:0;margin-top:1px}.of-tag{background:var(--yellow);height:18px;color:var(--ink);font:700 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;align-items:center;gap:4px;padding:0 6px;display:inline-flex}.of-tag-ready{background:var(--pink);color:var(--ink)}.of-tag-on{background:var(--blue);color:var(--paper)}.of-tag-done{background:var(--of-line);color:var(--ink)}.of-art{isolation:isolate;background:var(--art-bg);color:var(--art-fg);flex-direction:column;justify-content:flex-end;display:flex;position:relative;overflow:hidden;container-type:inline-size}.of-video{z-index:-3;object-fit:cover;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.of-art:after{content:"";z-index:-2;background:linear-gradient(to top, var(--art-bg) 12%, color-mix(in srgb, var(--art-bg) 55%, transparent) 55%, color-mix(in srgb, var(--art-bg) 10%, transparent) 100%);pointer-events:none;position:absolute;inset:0}.of-art[data-ink=blue]{--art-bg:var(--blue);--art-fg:var(--paper);--art-shadow:var(--pink);--art-dot:#faf6ee4d;--art-a:var(--pink);--art-b:var(--yellow)}.of-art[data-ink=pink]{--art-bg:var(--pink);--art-fg:var(--blue);--art-shadow:var(--paper);--art-dot:#3a4cad3d;--art-a:var(--yellow);--art-b:var(--blue)}.of-art[data-ink=yellow]{--art-bg:var(--yellow);--art-fg:var(--blue);--art-shadow:var(--pink);--art-dot:#3a4cad33;--art-a:var(--pink);--art-b:var(--blue)}.of-art[data-ink=ink]{--art-bg:var(--ink);--art-fg:var(--yellow);--art-shadow:var(--blue);--art-dot:#f0d68a40;--art-a:var(--blue);--art-b:var(--pink)}.of-art:before{content:"";z-index:-1;background-image:radial-gradient(circle, var(--art-dot) 1.1px, transparent 1.45px);background-size:8px 8px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(125deg,#0000 28%,#000 92%);mask-image:linear-gradient(125deg,#0000 28%,#000 92%)}.of-disc{z-index:-1;pointer-events:none;border-radius:999px;position:absolute}.of-art[data-ink=pink] .of-disc,.of-art[data-ink=yellow] .of-disc{mix-blend-mode:multiply}.of-disc-ring{border:1.5px solid var(--art-fg);opacity:.35;background:0 0!important}.of-value{font:800 min(var(--of-max,110px), calc(200cqw / var(--of-chars,4))) / .82 var(--display);letter-spacing:.005em;text-transform:uppercase;white-space:nowrap;text-shadow:3px 3px 0 var(--art-shadow);display:block}.of-unit{font:700 11px var(--mono);letter-spacing:.14em;text-shadow:0 1px 6px var(--art-bg);text-transform:uppercase;margin-top:9px;display:block}.of-card{border:1px solid var(--of-line);background:#fff;border-radius:16px;flex-direction:column;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;overflow:hidden}.of-card:hover,.of-card.is-ready{border-color:var(--blue)}.of-card.is-done{opacity:.66}.of-card.is-done:hover{box-shadow:none;border-color:var(--of-line);transform:none}.of-feature{background:var(--ink);color:var(--paper);border-radius:20px;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);display:grid;overflow:hidden}.of-feature .of-h{color:var(--paper);font-size:clamp(30px,4.2cqi,40px)}.of-feature .of-body,.of-feature .of-points li{color:color-mix(in srgb, var(--paper) 84%, transparent)}.of-feature .of-fine,.of-feature .of-status{color:color-mix(in srgb, var(--paper) 60%, transparent)}.of-feature .of-points svg{color:var(--yellow)}@container (max-width:620px){.of-feature{grid-template-columns:minmax(0,1fr)}}.of-btn{background:var(--blue);height:40px;font:600 14px/1 var(--sans);white-space:nowrap;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:0 18px;transition:filter .15s;display:inline-flex;color:var(--paper)!important}.of-btn:hover:not(:disabled){filter:brightness(1.12)}.of-btn:disabled{opacity:.6}.of-btn-sm{border-radius:10px;height:32px;padding:0 13px;font-size:13px}.of-btn-ghost{background:color-mix(in srgb, var(--ink) 7%, transparent);color:var(--ink)!important}.of-btn-ghost:hover:not(:disabled){filter:none;background:color-mix(in srgb, var(--ink) 12%, transparent)}.of .of-btn-yellow{background:var(--yellow);color:var(--ink)!important}.ns.of-banner{background:var(--ink);color:var(--paper);align-items:center;gap:12px;padding:0 10px 0 14px;display:flex;container-type:normal}.of-banner-value{color:var(--yellow);font:800 22px / 1 var(--display);letter-spacing:.01em;text-transform:uppercase;text-shadow:2px 2px 0 var(--blue);flex-shrink:0}.of-banner-text{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden}.of-banner-more{color:color-mix(in srgb, var(--paper) 72%, transparent);font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.of-banner-more:hover{color:var(--yellow)}.of-banner-cta{background:var(--yellow);height:28px;color:var(--ink);font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;flex-shrink:0;align-items:center;gap:6px;padding:0 12px;transition:transform .15s,box-shadow .15s;display:inline-flex}.of-banner-turn{animation:.4s both of-fade}.of-banner-cta{border-radius:8px}.of-inline{border:1px solid var(--of-line);color:var(--ink);background:#fff;border-radius:14px;align-items:center;gap:12px;padding:10px;display:flex}.of-inline .of-art{border-radius:10px;flex-shrink:0;width:64px;height:64px;padding:8px}.of-inline .of-value{text-shadow:1.5px 1.5px 0 var(--art-shadow);font-size:20px!important}.of-inline.is-stacked .of-value{font-size:30px!important}.of-inline.is-stacked{flex-direction:column;align-items:stretch}.of-inline.is-stacked .of-art{width:auto;height:72px}.of-pop{border:1px solid var(--of-line);border-radius:22px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);width:min(880px,100vw - 32px);max-height:calc(100dvh - 32px);animation:.3s cubic-bezier(.2,.8,.2,1) both of-pop-in;display:grid;overflow:hidden auto;box-shadow:0 30px 80px -24px #0000004d}.of-nudge{border:1px solid var(--of-line);border-radius:16px;grid-template-columns:128px minmax(0,1fr);width:min(440px,100vw - 32px);animation:.34s cubic-bezier(.2,.8,.2,1) both of-nudge-in;display:grid;overflow:hidden;box-shadow:0 18px 48px -18px #00000040}.of-nudge-art .of-unit{letter-spacing:.12em;white-space:normal;margin-top:7px;font-size:9.5px;line-height:1.3}.of-mini{border:1.5px solid var(--ink);background:var(--mini-bg);min-height:88px;color:var(--mini-fg);text-align:start;border-radius:12px;flex-direction:column;align-items:flex-start;gap:10px;padding:12px 14px;transition:transform .15s,box-shadow .15s;display:flex}.of-mini[data-ink=blue]{--mini-bg:var(--blue);--mini-fg:var(--paper);--mini-shadow:var(--pink)}.of-mini[data-ink=pink]{--mini-bg:var(--pink);--mini-fg:var(--blue);--mini-shadow:var(--paper)}.of-mini[data-ink=yellow]{--mini-bg:var(--yellow);--mini-fg:var(--blue);--mini-shadow:var(--pink)}.of-mini[data-ink=ink]{--mini-bg:var(--ink);--mini-fg:var(--yellow);--mini-shadow:var(--blue)}.of-mini-value{font:800 30px / .85 var(--display);letter-spacing:.005em;text-transform:uppercase;white-space:nowrap;text-shadow:2px 2px 0 var(--mini-shadow)}.of-mini-title{font:700 10px / 1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-top:auto}.of-scrim{background:color-mix(in srgb, var(--ink,#252c52) 42%, transparent);animation:.2s both of-fade}@media (max-width:640px){.of-pop{grid-template-columns:minmax(0,1fr)}}@keyframes of-pop-in{0%{opacity:0;transform:translateY(10px)scale(.97)}to{opacity:1;transform:none}}@keyframes of-nudge-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes of-fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.of-pop,.of-nudge,.of-scrim{animation:none}.of-card,.of-mini,.of-banner-cta{transition:none}}}