@layer theme,base;@layer components{.btn-engraved{--hatch:1px;--frame:var(--border-ink);--plate:var(--brand-yellow);isolation:isolate;color:var(--text-on-brand);border:1px solid var(--frame);background:repeating-linear-gradient(-45deg, var(--frame) 0 var(--hatch), transparent var(--hatch) 4px);position:relative}.btn-engraved:before{content:"";z-index:-1;border-radius:var(--radius-sm);background:var(--plate);box-shadow:0 0 0 1px var(--frame);position:absolute;inset:3px}@media (hover:hover) and (pointer:fine){.btn-engraved:hover{--hatch:4px}}.btn-engraved:active{--hatch:4px}.btn-halftone{isolation:isolate;color:var(--text-primary);background:0 0;position:relative}.btn-halftone:before,.btn-halftone:after{content:"";z-index:-1;border-radius:inherit;position:absolute;inset:0}.btn-halftone:before{background:repeating-conic-gradient(var(--border-ink) 0 25%, transparent 0 50%) 0 0 / 4px 4px;transition:opacity .12s ease-out;translate:4px 4px}.btn-halftone:after{border:1px solid var(--border-ink);background:var(--bg-card);transition:background-color .15s ease-out}@media (hover:hover) and (pointer:fine){.btn-halftone:hover:after{background:var(--bg-secondary)}}.btn-halftone[aria-expanded=true]:after{background:var(--bg-secondary)}.btn-halftone[data-popup-open]:before{opacity:0}.btn-halftone[data-popup-open]:after{background:var(--bg-secondary)}.btn-similar{--similar-sweep:color-mix(in srgb, var(--bg-card) 85%, transparent);isolation:isolate;position:relative;overflow:hidden}:root[data-theme=dark] .btn-similar{--similar-sweep:color-mix(in srgb, var(--text-primary) 18%, transparent)}.btn-similar>*{z-index:1;position:relative}.btn-similar:after{content:"";z-index:0;background:linear-gradient(105deg, transparent 20%, var(--similar-sweep) 50%, transparent 80%);pointer-events:none;width:60%;animation:btnSimilarSweep 5s var(--ease-in-out) 1s infinite;position:absolute;inset:-2px auto -2px 0;transform:skew(-12deg)translate(-120%)}@media (prefers-reduced-motion:reduce){.btn-similar:after{animation:none}}}@layer utilities;@property --hatch{syntax:"<length>";inherits:false;initial-value:1px}@keyframes btnSimilarSweep{0%{translate:-120%}24%,to{translate:260%}}
