.sp-plate{position:relative;padding:var(--si-ground);border-radius:var(--si-ground-r);isolation:isolate;margin:0}.sp-plate[data-pop=true]{margin-bottom:clamp(26px,4vw,56px)}.sp-plate:after,.sp-plate:before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none}.sp-plate:before{background:var(--sp-plate-bg)}.sp-plate:after{background-image:var(--sp-plate-pattern);background-size:34px 34px;opacity:var(--sp-plate-pattern-op,.5)}.sp-plate__main{position:relative;z-index:1;display:block;width:100%;box-shadow:0 1px 2px rgba(24,30,21,.1),0 18px 44px rgba(24,30,21,.2)}.sp-plate__main,.sp-plate__pop{height:auto;border-radius:var(--si-screen-r);background:#fff}.sp-plate__pop{position:absolute;z-index:2;left:clamp(-16px,-1.5%,0px);bottom:clamp(-34px,-5%,-16px);width:clamp(190px,44%,340px);box-shadow:0 2px 6px rgba(24,30,21,.14),0 22px 50px rgba(24,30,21,.3)}.sp-plate[data-tone=lavender]{--sp-plate-bg:linear-gradient(145deg,var(--si-lav-50) 0%,var(--si-lav) 150%);--sp-plate-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M0 17h34M17 0v34' stroke='%236E3FC4' stroke-width='.6' opacity='.22'/%3E%3C/svg%3E");--sp-plate-pattern-op:.55}.sp-plate[data-tone=aqua]{--sp-plate-bg:linear-gradient(145deg,var(--hx-mint,#c3fcff) 0%,#8feef6 140%);--sp-plate-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='1.4' fill='%23137f8c' opacity='.26'/%3E%3C/svg%3E");--sp-plate-pattern-op:.6}.sp-plate[data-tone=ink]{--sp-plate-bg:linear-gradient(145deg,#23252a,#121315 120%);--sp-plate-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M0 34L34 0M-8 8L8 -8M26 42L42 26' stroke='%23ffffff' stroke-width='.7' opacity='.10'/%3E%3C/svg%3E");--sp-plate-pattern-op:1}.sp-plate[data-tone=canvas]{--sp-plate-bg:linear-gradient(145deg,var(--si-canvas) 0%,var(--si-line) 160%);--sp-plate-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='1.3' fill='%23181E15' opacity='.16'/%3E%3C/svg%3E");--sp-plate-pattern-op:.7}@media (max-width:760px){.sp-plate__pop{width:52%;left:-8px;bottom:-22px}}@media (prefers-reduced-motion:no-preference){.sp-plate__main,.sp-plate__pop{transition:transform .35s var(--si-ease,cubic-bezier(.2,.7,.3,1))}.sp-plate:hover .sp-plate__pop{transform:translateY(-4px)}}