.octa-showcase{--hover:color-mix(in srgb, var(--foreground) 5%, transparent);--active:color-mix(in srgb, var(--foreground) 9%, transparent);--shadow-color:color-mix(in srgb, var(--foreground) 14%, transparent);--shadow-2:0 0 0 1px var(--border), 0 1px 1px -.5px var(--shadow-color);--shadow-3:0 0 0 1px var(--border), 0 4px 12px var(--shadow-color);--shadow-5:0 0 0 1px var(--border), 0 8px 24px var(--shadow-color);--shadow-6:0 0 0 1px var(--border), 0 12px 32px var(--shadow-color);--reaction-gold:#ffc83d;--reaction-rose:#ff8fa3;--reaction-sky:#7fd1ff;--reaction-love:#ff5c7a;--reaction-blush:#ffb3c4;--reaction-flame:#ff6a3d;--reaction-coral:#ff9466;--reaction-periwinkle:#8fb2ff;--reaction-lilac:#b9a6ff;--reaction-mint:#7bd88f;--reaction-lime:#c6e58a;--fs-display:28px;--lh-display:34px;--fs-display-compact:24px;--lh-display-compact:30px;--fs-title:16px;--lh-title:22px;--fs-title-compact:15px;--lh-title-compact:20px;--fs-subtitle:14px;--lh-subtitle:20px;--fs-subtitle-compact:13px;--lh-subtitle-compact:18px;--fs-body:13px;--lh-body:20px;--fs-body-compact:12px;--lh-body-compact:18px;--fs-caption:12px;--lh-caption:16px;--fs-caption-compact:11px;--lh-caption-compact:14px;--fs-micro:11px;--lh-micro:14px;--fs-micro-compact:10px;--lh-micro-compact:12px}.octa-showcase .text-display{font-size:var(--fs-display);line-height:var(--lh-display)}.octa-showcase .text-title{font-size:var(--fs-title);line-height:var(--lh-title)}.octa-showcase .text-subtitle{font-size:var(--fs-subtitle);line-height:var(--lh-subtitle)}.octa-showcase .text-body{font-size:var(--fs-body);line-height:var(--lh-body)}.octa-showcase .text-caption{font-size:var(--fs-caption);line-height:var(--lh-caption)}.octa-showcase .text-micro{font-size:var(--fs-micro);line-height:var(--lh-micro)}.octa-showcase.bg-surface-2,.octa-showcase .bg-surface-2{background-color:var(--card)}.octa-showcase.shadow-surface-2,.octa-showcase .shadow-surface-2{box-shadow:0 0 0 1px var(--border), 0 1px 1px -.5px var(--shadow-color)}.octa-showcase .bg-hover,.octa-showcase .hover\:bg-hover:hover{background-color:var(--hover)}.octa-showcase.bg-surface-1,.octa-showcase .bg-surface-1{background-color:var(--background)}.octa-showcase:is(.bg-surface-3,.bg-surface-4,.bg-surface-5,.bg-surface-6,.bg-surface-7,.bg-surface-8),.octa-showcase :is(.bg-surface-3,.bg-surface-4,.bg-surface-5,.bg-surface-6,.bg-surface-7,.bg-surface-8){background-color:var(--card)}.octa-showcase:is(.shadow-surface-1,.shadow-surface-3,.shadow-surface-4,.shadow-surface-5,.shadow-surface-6,.shadow-surface-7,.shadow-surface-8),.octa-showcase :is(.shadow-surface-1,.shadow-surface-3,.shadow-surface-4,.shadow-surface-5,.shadow-surface-6,.shadow-surface-7,.shadow-surface-8){box-shadow:var(--shadow-3)}.octa-showcase :is(.active\:shadow-surface-1,.active\:shadow-surface-2,.active\:shadow-surface-3,.active\:shadow-surface-4,.active\:shadow-surface-5,.active\:shadow-surface-6,.active\:shadow-surface-7):active{box-shadow:var(--shadow-2)}