.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.sw, .bd, .fx { min-height: 150px; padding: var(--space-4); font-weight: 700; display: flex; align-items: flex-end; }
.sw { border-radius: var(--radius-md); color: var(--color-on-primary); }
.sw--solid { background: var(--color-primary); }
.sw--linear { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); }
.sw--radial { background: radial-gradient(circle at 30% 30%, var(--color-accent) 0%, var(--color-dark) 70%); }
.sw--multi { background: linear-gradient(0deg, var(--color-dark) 0%, transparent 60%), radial-gradient(circle at 80% 20%, var(--color-accent) 0 30%, transparent 31%), linear-gradient(90deg, var(--color-primary), var(--color-dark)); }
.sw--image { background-image: url("/_assets/ast_my04ibum1qr.jpg"); background-size: cover; background-position: center bottom; }
.sw--image span { background: var(--color-dark); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.sw--pattern { background-color: var(--color-dark); background-image: repeating-linear-gradient(45deg, var(--color-primary) 0 10px, transparent 10px 20px); }
.bd { background: var(--color-surface); }
.bd--all { border: 4px solid var(--color-primary); }
.bd--styles { border-top: 4px dashed var(--color-primary); border-right: 4px dotted var(--color-accent); border-bottom: 6px double var(--color-text); border-left: 4px solid var(--color-muted); }
.bd--bottom { border-bottom: 5px solid var(--color-accent); }
.bd--corners { border: 2px solid var(--color-text); border-radius: 0 var(--radius-lg) var(--radius-sm) 60px; }
.bd--pill { border: 2px solid var(--color-primary); border-radius: var(--radius-pill); justify-content: center; align-items: center; }
.bd--outline { border: 1px solid var(--color-border); outline: 3px solid var(--color-accent); outline-offset: 6px; }
.fx { background: var(--color-surface); border-radius: var(--radius-md); }
.fx--shadow { box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 20%, transparent), 0 12px 24px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 30px 60px color-mix(in srgb, var(--color-accent) 15%, transparent); }
.fx--inset { box-shadow: inset 0 0 0 6px var(--color-primary-soft), inset 0 10px 20px color-mix(in srgb, var(--color-text) 15%, transparent); }
.fx--opacity { background: var(--color-dark); color: var(--color-on-primary); opacity: 0.5; }
.fx--skew { background: var(--color-accent); color: var(--color-on-primary); transform: skewX(-8deg) rotate(2deg); }
.fx--hover { background: var(--color-primary-soft); transition: transform 300ms, background-color 300ms, color 300ms, box-shadow 300ms; cursor: pointer; }
.fx--hover:hover, .fx--hover:focus { transform: translateY(-8px) scale(1.02); background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-md); }
.fx--hover-grad { background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary)); background-size: 200% 100%; background-position: 0% 0; color: var(--color-on-primary); transition: background-position 600ms; cursor: pointer; }
.fx--hover-grad:hover, .fx--hover-grad:focus { background-position: 100% 0; }
.fx--clip { background: var(--color-dark); color: var(--color-on-primary); clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%); }
.fx--pseudo { position: relative; overflow: hidden; }
.fx--pseudo::before { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: var(--color-accent-soft); top: -40px; right: -40px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn--accent { background: var(--color-accent); border-color: var(--color-accent); }
.btn--accent:hover { background: var(--color-text); border-color: var(--color-text); }
.btn--press[data-ab-clicked] { animation: press 300ms; }
@keyframes press { 50% { transform: scale(0.92); } }
@media (max-width: 900px) { .swatches { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .swatches { grid-template-columns: 1fr; } }
[data-node="div_j1al9zvp"] {
  border-color: var(--color-accent);
  border-top-width: 10px;
}

[data-node="a_cr5vwqun"]:hover {
  background-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) { .btn--press[data-ab-clicked] { animation: none; } }