[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sand-play { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: center; padding: 32px; margin-top: 24px; border: 1px solid #77544766; border-radius: 24px; background: radial-gradient(ellipse at 15% 100%, #81544022, transparent 65%), #302723; }
.sand-play-copy .eyebrow { color: #d9b391; }
.sand-play h2 { margin-block: 12px 16px; color: #f1e3d2; font: 450 clamp(28px, 3vw, 37px)/1.13 var(--serif); letter-spacing: -.035em; }
.sand-play h2 em { color: #e9aa80; }
.sand-play-copy > p:not(.eyebrow) { max-width: 260px; font-size: 14px; line-height: 1.7; color: #c5b3a5; }
.sand-play-copy > a { display: inline-block; font-size: 13px; padding-block: 12px; margin-top: 10px; color: #e9bd9c; }
.sand-play-workspace { min-width: 0; border: 1px solid #695044; border-radius: 18px; overflow: hidden; background: #251e1d; }
.sand-toolbar { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #574037; }
.sand-play button { min-height: 44px; font: 500 12px var(--sans); cursor: pointer; }
.sand-colors { display: flex; align-items: center; gap: 0; }
.sand-colors button { display: grid; place-items: center; position: relative; width: 44px; border: 0; background: transparent; color: #281e19; border-radius: 50%; }
.sand-colors button::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--sand-color); }
.sand-colors button[aria-pressed="true"]::before { outline: 1px solid #eddbc8; outline-offset: 4px; }
.sand-colors button[aria-pressed="true"]::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #30251f; }
.sand-clear { padding: 8px; border: 0; background: none; color: #d6bdab; text-decoration: underline; text-underline-offset: 4px; }
.sand-play canvas { display: block; width: 100%; aspect-ratio: 1.6; height: auto; touch-action: none; cursor: crosshair; }
.sand-play button:focus-visible, .sand-play canvas:focus-visible { outline: 2px solid #e4c76a; outline-offset: -3px; }
.sand-bottom { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; justify-content: space-between; padding: 8px 12px; border-top: 1px solid #574037; }
.sand-bottom p { font-size: 10px; color: #c5b3a5; }
.sand-pour { padding: 8px 13px; border: 1px solid #76594c; border-radius: 30px; background: #4b352b; color: #f1d4b4; }
.sand-pour:hover { background: #634332; }
.sand-fallback { display: grid; align-content: end; gap: 8px; min-height: 300px; padding: 30px; background: radial-gradient(ellipse at 15% 150%, #97b7a0 0 34%, transparent 34.5%), radial-gradient(ellipse at 80% 180%, #e4c76a 0 47%, transparent 47.5%), #392b28; }
.sand-fallback p { color: #ead1b9; font: 450 23px var(--serif); }
.sand-fallback p + p { font: 12px var(--sans); }
@media (max-width: 850px) {
  .sand-play { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .sand-play h2 br { display: none; }
  .sand-play-copy > p:not(.eyebrow) { max-width: none; }
  .sand-play-copy > a { margin-top: 0; }
}
@media (max-width: 520px) {
  .sand-play { padding: 20px 14px 14px; border-radius: 18px; }
  .sand-play-copy { padding-inline: 5px; }
  .sand-toolbar { padding: 6px; }
  .sand-colors button { width: 40px; }
  .sand-clear { font-size: 11px; }
  .sand-bottom { gap: 0; padding-inline: 8px; }
  .sand-bottom p { max-width: 145px; }
}