@import url("./tokens.css");
html body [hidden]{display:none!important}
.sa-squircle { --sa-corner: 32px; border-radius:var(--sa-corner); corner-shape:squircle; }
.sa-squircle[data-squircle="55"]{--sa-corner:55px}
.sa-squircle[data-squircle="49"]{--sa-corner:49px}
.sa-squircle[data-squircle="44"]{--sa-corner:44px}
.sa-squircle[data-squircle="39"]{--sa-corner:39px}
.sa-squircle[data-squircle="32"]{--sa-corner:32px}
.sa-squircle[data-squircle="28"]{--sa-corner:28px}
.sa-squircle[data-squircle="24"]{--sa-corner:24px}
.sa-squircle[data-squircle="20"]{--sa-corner:20px}
.sa-squircle[data-squircle="18"]{--sa-corner:18px}
.sa-squircle[data-squircle="15"]{--sa-corner:15px}
.sa-squircle[data-squircle="12"]{--sa-corner:12px}
.sa-squircle[data-squircle="10"]{--sa-corner:10px}
.sa-card { background:var(--sa-surface); border:1px solid var(--he-p-D3D9D359); box-shadow:var(--sa-shadow); position:relative; isolation:isolate; }
.sa-card--porcelain {background:linear-gradient(160deg,var(--he-p-FFFFFF),var(--he-p-FEFEFE) 70%,var(--he-p-F9FAF9));}
.sa-card--inset {background:var(--sa-surface-subtle);box-shadow:inset 0 2px 5px var(--he-p-1F252B0B),inset 0 1px 0 var(--he-p-FFFFFFA6);}
.sa-card--glass {background:var(--he-p-FFFFFF42);border:1px solid var(--he-p-FFFFFF99);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);box-shadow:inset 0 1px 0 var(--he-p-FFFFFFA6),0 18px 40px -28px var(--he-p-09132033);}
.sa-card--aurora {color:var(--sa-ink);background:linear-gradient(135deg,var(--he-p-BBC2F3) 0%,var(--he-p-F8F5FB) 48%,var(--he-p-FFD1F4) 100%);overflow:hidden;isolation:isolate;border:1px solid var(--he-p-FFFFFF99)}
.sa-card--aurora::before{content:"";position:absolute;inset:-18%;pointer-events:none;z-index:-2;background:radial-gradient(ellipse at 16% 5%,var(--he-p-5F5ABEC2),transparent 49%),radial-gradient(ellipse at 101% 94%,var(--he-p-ED4BCCC4),transparent 52%),radial-gradient(ellipse at 62% 12%,var(--he-p-FFFFFFFA),transparent 44%),radial-gradient(ellipse at 34% 95%,var(--he-p-F9D9FAE6),transparent 57%);filter:blur(27px);animation:sa-aurora-drift 16s ease-in-out infinite alternate;transform-origin:50% 50%}
.sa-card--aurora::after{content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;background:linear-gradient(165deg,var(--he-p-FFFFFF2B),transparent 44%,var(--he-p-FFFFFF17) 70%,var(--he-p-FBADEF38))}
.sa-card--aurora-green{background:linear-gradient(145deg,var(--sa-foam),var(--sa-wave) 70%,var(--sa-ocean));color:white;overflow:hidden;isolation:isolate}
.sa-card--aurora-green::before{content:"";position:absolute;inset:-18%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 22% 5%,var(--he-p-FFD5AF),transparent 51%),radial-gradient(ellipse at 38% 84%,var(--sa-wave),transparent 54%),radial-gradient(ellipse at 90% 33%,var(--sa-wave),transparent 58%),linear-gradient(150deg,var(--sa-wave),var(--sa-tide));filter:blur(27px);animation:sa-aurora-drift 13s ease-in-out infinite alternate}
.sa-card--aurora-green::after{content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--he-p-FFFFFF21),transparent 45%,var(--he-p-0D213A59));}
.sa-surface-padding{padding:28px}
.sa-tag { display:inline-flex;align-items:center;gap:7px;padding:8px 12px;white-space:nowrap;font-size:12px;line-height:1.2;font-weight:500;background:var(--he-p-F0F2EF);color:var(--sa-deep);}
.sa-tag--lime{background:var(--sa-lime);color:var(--sa-ocean)}
.sa-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.sa-button{font-family:var(--sa-font);font-weight:500;font-size:13px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 18px;position:relative;cursor:pointer;border:1px solid transparent;color:var(--sa-ink);background:var(--he-p-ECEFEB);transition:transform .44s var(--sa-ease),background-color .3s ease,color .3s ease,box-shadow .44s var(--sa-ease);}
.sa-button:hover{transform:translateY(-2px);background:var(--he-p-E2E6E9);box-shadow:0 12px 24px -18px var(--he-p-121F2E59)}
.sa-button:active{transform:translateY(0) scale(.975)}
.sa-button--primary{background:var(--sa-lime);color:var(--sa-ocean)}
.sa-button--primary:hover{background:var(--sa-current)}
.sa-button--white{background:var(--he-p-FFFFFF);border-color:var(--he-p-EBEDEB)}
.sa-button--dark{background:var(--sa-forest);color:white}
.sa-button--dark:hover{background:var(--he-p-1C3659)}
.sa-button--icon{min-height:44px;min-width:44px;padding:10px}
.sa-control{display:block;width:100%;min-height:46px;border:1px solid transparent;padding:12px 16px;background:var(--he-p-EFF0EF);color:var(--sa-ink);font-size:13px;line-height:1.4;font-family:var(--sa-font);box-shadow:inset 0 1px 2px var(--he-p-19202906);transition:background .3s,box-shadow .3s,border-color .3s;}
.sa-control:hover{background:var(--he-p-E9ECE9)}
.sa-control:focus{background:white;box-shadow:0 0 0 3px var(--he-p-3080C726);border-color:var(--sa-wave);outline:none}
.sa-control::placeholder{color:var(--he-p-939699)}
.sa-card-title{font-size:14px;font-weight:500;letter-spacing:-.025em;margin:0}
.sa-subtext{font-size:12px;line-height:1.5;color:var(--sa-muted)}
.sa-value{font-size:clamp(32px,3.2vw,52px);letter-spacing:-.07em;font-weight:400;line-height:1}
.sa-value--dot{font-family:var(--helium-type-metric);letter-spacing:-.085em;font-variant-numeric:tabular-nums;font-weight:500}
.sa-quiet-link{text-decoration:none;color:var(--sa-muted);font-size:12px;display:inline-flex;align-items:center;gap:8px;transition:color .25s,transform .3s var(--sa-ease)}
.sa-quiet-link:hover{color:var(--sa-ocean);transform:translateX(3px)}
.sa-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sa-grid-gap);}
.sa-col-3{grid-column:span 3}
.sa-col-4{grid-column:span 4}
.sa-col-5{grid-column:span 5}
.sa-col-6{grid-column:span 6}
.sa-col-7{grid-column:span 7}
.sa-col-8{grid-column:span 8}
.sa-col-12{grid-column:span 12}
.sa-sparkline{width:100%;height:55px;overflow:visible}
.sa-sparkline path{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;fill:none}
.sa-hover{transition:transform .6s var(--sa-ease),box-shadow .6s var(--sa-ease),filter .6s ease}
.sa-hover:hover{transform:translateY(-5px);box-shadow:0 28px 50px -30px var(--he-p-0D1A2933)}
.sa-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;background:var(--he-p-F3F4F3)}
.sa-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sa-field-label{font-size:12px;font-weight:500;display:block;margin-bottom:9px}
.sa-divider{height:1px;background:var(--he-p-EBEDEB);border:none;margin:0}
.sa-focus:focus-visible,.sa-button:focus-visible,.sa-control:focus-visible{outline:3px solid var(--sa-tide);outline-offset:4px}
@keyframes sa-aurora-drift{from{transform:translate(-1.5%,1%) rotate(-2deg) scale(1)}to{transform:translate(2%,-1.5%) rotate(3deg) scale(1.035)}}
@media  (max-width:1200px){.sa-col-3{grid-column:span 6}
.sa-col-4{grid-column:span 6}
.sa-col-5,.sa-col-7{grid-column:span 6}
.sa-col-8{grid-column:span 12}
}
@media  (max-width:700px){.sa-col-3,.sa-col-4,.sa-col-5,.sa-col-6,.sa-col-7,.sa-col-8{grid-column:span 12}
.sa-surface-padding{padding:20px}
}
@media (prefers-reduced-motion:reduce){.sa-card--aurora::before,.sa-card--aurora-green::before{animation:none}
.sa-hover,.sa-button,.sa-control{transition:none!important;transform:none!important}
}
@media (prefers-reduced-transparency:reduce){.sa-card--glass{background:var(--he-p-F8F9F6);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--he-p-E0E4E0)}
}
.sa-edge-lit{--sa-light:var(--he-p-CA8DFE);position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(165deg,var(--he-p-FFFFFF) 15%,var(--he-p-FFFFFF) 50%,var(--he-p-F8F7FB));box-shadow:0 14px 30px -24px var(--he-p-23282D2E),inset 0 1px 0 var(--he-p-FFFFFFCC);border:1px solid var(--he-p-FFFFFFD1)}
.sa-edge-lit::before{content:"";position:absolute;inset:auto -8% -42%;height:88%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,var(--sa-light),transparent 72%);filter:blur(35px);opacity:.8;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s;z-index:-2}
.sa-edge-lit::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--he-p-FFFFFFD6),var(--he-p-FFFFFF78) 63%,var(--he-p-FFFFFF1F)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");pointer-events:none;z-index:-1}
.sa-edge-lit:hover::before{transform:translateY(-14%) scale(1.2);opacity:1}
.sa-edge-lit[data-color="orange"]{--sa-light:var(--he-p-FFB36C)}
.sa-edge-lit[data-color="lime"]{--sa-light:var(--sa-current)}
.sa-edge-lit[data-color="blue"]{--sa-light:var(--he-p-8AB3FF)}
.sa-edge-lit[data-color="pink"]{--sa-light:var(--he-p-FF9AD6)}
.sa-edge-lit[data-color="mint"]{--sa-light:var(--sa-wave)}
.sa-liquid{position:relative;isolation:isolate;overflow:hidden; background:var(--he-p-FFFFFF30);border:1px solid var(--he-p-FFFFFF91);box-shadow:inset 0 2px 1px var(--he-p-FFFFFFA1),inset 0 -1px 1px var(--he-p-FFFFFF26),0 14px 32px -20px var(--he-p-0C172538);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
.sa-liquid::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(153deg,var(--he-p-FFFFFF57),var(--he-p-FFFFFF0F) 45%,var(--he-p-FFFFFF1A) 82%,var(--he-p-FFFFFF42));z-index:-1}
html.sa-refraction-active .sa-liquid[data-refraction="on"]{backdrop-filter:url(#sa-liquid-refraction);-webkit-backdrop-filter:url(#sa-liquid-refraction)}
@media (prefers-reduced-transparency:reduce){html .sa-liquid{background:var(--he-p-F8FAF8)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--sa-ocean)!important}
}
.sa-button,.sa-hover,.sa-quiet-link,.sa-control{transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease,filter .28s ease!important}
.sa-button:hover,.sa-hover:hover,.sa-button:active,.sa-quiet-link:hover{transform:none!important}
.sa-button{min-height:48px;padding:12px 20px;color:var(--sa-ocean);background:var(--he-p-EDF1ED)}
.sa-button:hover{background:var(--he-p-F5F7F5);box-shadow:0 12px 24px -22px var(--he-p-121F2E1F)}
.sa-button--primary{background:var(--sa-current);color:var(--sa-ocean)}
.sa-button--primary:hover{background:var(--sa-current);color:var(--sa-ocean)}
.sa-button--dark{background:var(--sa-ocean);color:var(--he-p-FFFFFF)}
.sa-control{background:var(--he-p-F6F8F6);color:var(--sa-ocean);border-color:var(--he-p-DFE5DF)}
.sa-control:hover{background:var(--he-p-EEF2EE)}
.sa-control:focus{border-color:var(--sa-tide);box-shadow:0 0 0 3px var(--he-p-3080C72E)}
