#mosaic .cursor-effects-demo{isolation:isolate;transition:background .35s ease,border-color .25s ease,box-shadow .25s ease}
#mosaic .cursor-effects-demo[data-effect="comet"]{--effect-ink:#bb691a;--effect-wash:#fff1d8;--effect-dot:#f28c16}
#mosaic .cursor-effects-demo[data-effect="glitter"]{--effect-ink:#8556b9;--effect-wash:#f4edfc;--effect-dot:#a26bd3}
#mosaic .cursor-effects-demo[data-effect="rainbow"]{--effect-ink:#347aa2;--effect-wash:#eaf7f5;--effect-dot:#4bbfba}
#mosaic .cursor-effects-demo:hover,#mosaic .cursor-effects-demo:focus-within{background:radial-gradient(circle at 60% 61%,var(--effect-wash),#fffefa 70%);border-color:var(--effect-ink)}
#mosaic .cursor-effects-demo .card-heading,#mosaic .cursor-effects-demo .card-copy{z-index:2}
#mosaic .cursor-effects-art{display:flex;flex:1;min-height:0;flex-direction:column;gap:16px;padding:24px 0 3px;position:relative;z-index:2}
#mosaic .cursor-effect-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#mosaic .cursor-effect-choices button{display:flex;min-width:0;min-height:91px;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #e0d0b6;border-radius:9px;background:#fffdf9c9;color:#725b46;font-size:clamp(11px,1vw,15px);font-weight:700;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
#mosaic .cursor-effect-choices button:hover,#mosaic .cursor-effect-choices button[aria-pressed="true"]{transform:translateY(-3px);color:var(--effect-ink);border-color:var(--effect-ink);background:#fffefa;box-shadow:0 8px 18px #51362016}
#mosaic .cursor-effect-choices button:focus-visible{outline:3px solid var(--effect-ink);outline-offset:3px}
#mosaic .effect-glyph{font-size:23px;letter-spacing:3px;white-space:nowrap;line-height:1}
#mosaic .comet-glyph{color:#ec8b18}#mosaic .glitter-glyph{color:#ac78d1}
#mosaic .rainbow-glyph{background:linear-gradient(90deg,#ee7766,#ecc14c,#4ac881,#5495e2,#a266d2);background-clip:text;color:transparent}
#mosaic .cursor-effect-stage{position:relative;flex:1;min-height:145px;overflow:hidden;border:1px solid #decdaf;border-radius:10px;background-image:linear-gradient(#83663a0d 1px,transparent 1px),linear-gradient(90deg,#83663a0d 1px,transparent 1px),radial-gradient(circle at 50% 50%,var(--effect-wash),#fffdfa 75%);background-size:25px 25px,25px 25px,auto;transition:background .3s ease,border-color .3s ease}
#mosaic .cursor-effects-demo:hover .cursor-effect-stage{border-color:color-mix(in srgb,var(--effect-ink) 42%,#fff)}
#mosaic .cursor-effect-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#594331;font-size:21px;font-weight:700;letter-spacing:.02em;text-align:center;opacity:1}
#mosaic .cursor-effects-demo.is-tracking .cursor-effect-hint{opacity:1}
#mosaic .cursor-effect-current{position:absolute;bottom:14px;left:16px;color:var(--effect-ink);font-size:11px;font-weight:800;letter-spacing:.11em}
#mosaic .cursor-effect-layer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:inherit}
#mosaic .cursor-effect-pointer{position:absolute;display:none;width:31px;height:39px;left:0;top:0;filter:drop-shadow(0 2px 3px #3b241f55);transform:translate(-3px,-2px)}
#mosaic .cursor-effects-demo.is-tracking .cursor-effect-pointer{display:block}
#mosaic .cursor-effect-particle{position:absolute;display:block;width:var(--size,10px);height:var(--size,10px);left:var(--x);top:var(--y);border-radius:50%;background:var(--particle-color,var(--effect-dot));box-shadow:0 0 10px var(--particle-color,var(--effect-dot));transform:translate(-50%,-50%);animation:cursor-effect-fade 1.15s ease-out forwards}
#mosaic .cursor-effect-particle[data-shape="star"]{width:auto;height:auto;border:0;background:none;box-shadow:none;color:var(--particle-color);font-size:var(--size,19px);line-height:1}
@keyframes cursor-effect-fade{0%{opacity:.95;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--drift-x,0px)),calc(-50% + var(--drift-y,0px))) scale(.18)}}
@media(hover:hover) and (pointer:fine){#mosaic .cursor-effects-demo.is-tracking,#mosaic .cursor-effects-demo.is-tracking *{cursor:none!important}}
@media(max-width:680px){#mosaic .cursor-effects-art{gap:12px;padding-top:18px}#mosaic .cursor-effect-choices button{min-height:76px}#mosaic .effect-glyph{font-size:17px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){#mosaic .cursor-effect-choices button{transition:none}#mosaic .cursor-effect-particle{animation:none;display:none}#mosaic .cursor-effects-demo:hover{transition:none}}

/* Selected styles match the effect palette. */
#mosaic .cursor-effect-choices button[aria-pressed="true"]{color:#fff;border-color:transparent;text-shadow:0 1px 3px #0004}
#mosaic .cursor-effect-choices button[data-effect-choice="comet"][aria-pressed="true"]{background:#c7610b}
#mosaic .cursor-effect-choices button[data-effect-choice="glitter"][aria-pressed="true"]{background:#8540b4}
#mosaic .cursor-effect-choices button[data-effect-choice="rainbow"][aria-pressed="true"]{background:linear-gradient(110deg,#bc365d,#bd641a 24%,#39804d 47%,#356caf 71%,#8541ad)}
#mosaic .cursor-effect-choices button[aria-pressed="true"] .effect-glyph{color:#fff;background:none;-webkit-text-fill-color:#fff}