.design-card{position:relative;display:block}.design-card,.design-open:after{border-radius:var(--radius-card)}.design-open:after{content:"";position:absolute;inset:0;z-index:5}.design-open:focus-visible{outline:none}.design-open:focus-visible:after{outline:2px solid var(--color-ink);outline-offset:6px}.design-frame{position:relative;overflow:hidden;aspect-ratio:2/3;border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--design-ground,var(--color-surface));transition:border-color .45s var(--ease-brand);container-type:inline-size}.design-card:has(.design-open:focus-visible) .design-frame,.design-card:hover .design-frame{border-color:var(--color-line-strong)}.design-art{position:absolute;inset:0;transition:transform .8s var(--ease-brand)}.design-art>.inv{height:100%}.design-card:has(.design-open:focus-visible) .design-art,.design-card:hover .design-art{transform:scale(1.035)}.design-edge{position:absolute;inset-inline:0;inset-block-end:0;z-index:5;pointer-events:none;height:1px;background:var(--color-accent);transform:scaleX(0);transform-origin:50% 50%;transition:transform .6s var(--ease-brand)}.design-card:has(.design-open:focus-visible) .design-edge,.design-card:hover .design-edge{transform:scaleX(1)}@media (hover:none){.design-card:hover .design-art{transform:none}}.designs-mark{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:5}.flip-x{display:inline-flex;transform:scaleX(-1)}.preview-guard{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}@media (prefers-reduced-motion:reduce){.design-art,.design-edge,.design-frame{transition:none}.design-card:has(.design-open:focus-visible) .design-art,.design-card:hover .design-art{transform:none}}.design-play{position:absolute;z-index:6;inset-block-start:2px;inset-inline-start:2px;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--color-ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.design-play-face{display:grid;place-items:center;width:26px;height:26px;padding-inline-start:1px;border:1px solid var(--color-line-strong);border-radius:999px;background:var(--color-bg);transition:border-color .22s var(--ease-brand)}.design-play:hover .design-play-face{border-color:var(--color-ink)}.design-play:focus-visible{outline:none}.design-play:focus-visible .design-play-face{outline:2px solid var(--color-ink);outline-offset:3px}@media (prefers-reduced-motion:reduce){.design-play-face{transition:none}}.design-length{inset-block-start:15px;inset-inline-start:46px;place-items:center;height:20px;padding-inline:7px;border:1px solid var(--color-line-strong);border-radius:999px;background:var(--color-bg);color:var(--color-ink-2);font-family:var(--font-body);font-size:11px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.design-editability,.design-length{position:absolute;z-index:6;display:inline-grid;line-height:1;white-space:nowrap}.design-editability{inset-block-end:10px;inset-inline-end:10px;place-items:center;height:20px;font-family:var(--font-body);font-size:11px;color:var(--color-ink-2)}.design-editability[data-scope=partial]{padding-inline:8px;border:1px solid var(--color-accent);border-radius:999px;background:var(--color-bg);color:var(--color-ink)}@container (max-width: 200px){.design-editability[data-scope=full],.design-length{display:none}}