*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--m3-bg: #fafbff;--m3-on-bg: #1a1b21;--m3-primary: #4858a9;--m3-primary-cont: #dde1ff;--m3-on-primary-cont: #001257;--m3-secondary: #595d72;--m3-secondary-cont: #dde1f9;--m3-on-secondary-cont: #161a2c;--m3-tertiary: #745470;--m3-tertiary-cont: #ffd7f5;--m3-on-tertiary-cont: #2b122a;--m3-surface: #fafbff;--m3-surface-cont: #eef0f9;--m3-on-surface: #1a1b21;--m3-on-surface-var: #45464f;--m3-outline-var: #c6c6d0;--m3-blob1: #dde1ff;--m3-blob2: #ffd7f5;--m3-blob3: #dde1f9}@media(prefers-color-scheme:dark){:root{--m3-bg: #121319;--m3-on-bg: #e3e1ec;--m3-primary: #b8c3ff;--m3-primary-cont: #2f4090;--m3-on-primary-cont: #dde1ff;--m3-secondary: #c2c5dd;--m3-secondary-cont: #414659;--m3-on-secondary-cont: #dde1f9;--m3-tertiary: #e4bad9;--m3-tertiary-cont: #5b3c58;--m3-on-tertiary-cont: #ffd7f5;--m3-surface: #121319;--m3-surface-cont: #1e1f27;--m3-on-surface: #e3e1ec;--m3-on-surface-var: #c6c6d0;--m3-outline-var: #45464f;--m3-blob1: #2f4090;--m3-blob2: #5b3c58;--m3-blob3: #414659}}html{background-color:var(--m3-bg)}body{font-family:Outfit,system-ui,sans-serif;background-color:var(--m3-bg);color:var(--m3-on-bg);min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased}.m3-ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.m3-blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.35;animation:m3-float 20s ease-in-out infinite}.m3-blob--1{width:400px;height:400px;background:var(--m3-blob1);top:-10%;right:-15%;animation-delay:0s}.m3-blob--2{width:350px;height:350px;background:var(--m3-blob2);bottom:-5%;left:-20%;animation-delay:-7s}.m3-blob--3{width:300px;height:300px;background:var(--m3-blob3);top:40%;left:50%;transform:translate(-50%);animation-delay:-14s}@keyframes m3-float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,15px) scale(.95)}}main{position:relative;z-index:1;width:100%;max-width:420px}.m3-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.m3-grid a:last-child:nth-child(odd){grid-column:1 / -1}.m3-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;aspect-ratio:1;padding:24px 16px;border-radius:32px;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:hidden;transition:transform .4s cubic-bezier(.2,0,0,1),box-shadow .4s cubic-bezier(.2,0,0,1);animation:m3-enter .6s cubic-bezier(.2,0,0,1) both}.m3-card:nth-child(1){animation-delay:.08s}.m3-card:nth-child(2){animation-delay:.16s}.m3-card:nth-child(3){animation-delay:.24s}.m3-card:nth-child(4){animation-delay:.32s}.m3-card:nth-child(5){animation-delay:.4s}.m3-card--wide{flex-direction:row;aspect-ratio:auto;padding:20px 28px;gap:16px;justify-content:flex-start}.m3-card--primary{background-color:var(--m3-primary-cont);color:var(--m3-on-primary-cont)}.m3-card--secondary{background-color:var(--m3-secondary-cont);color:var(--m3-on-secondary-cont)}.m3-card--tertiary{background-color:var(--m3-tertiary-cont);color:var(--m3-on-tertiary-cont)}.m3-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px -8px #0000001f}@media(prefers-color-scheme:dark){.m3-card:hover{box-shadow:0 12px 32px -8px #00000080}}.m3-card:active{transform:scale(.97);transition-duration:.1s}.m3-card:before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.2,0,0,1)}.m3-card:hover:before{opacity:.08}.m3-card:focus-visible{outline:none}.m3-card:focus-visible:before{opacity:.12}.m3-card-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0;color:inherit}.m3-card-icon svg{width:100%;height:100%}.m3-card-label{font-size:15px;font-weight:500;letter-spacing:.2px;text-align:center;color:inherit}.m3-card--wide .m3-card-label{font-size:16px;text-align:left;flex-grow:1}.m3-card--wide .m3-card-icon{width:32px;height:32px}.m3-ripple{position:absolute;border-radius:50%;background-color:currentColor;pointer-events:none;animation:m3-ripple-out .6s cubic-bezier(0,0,.2,1) forwards}@keyframes m3-ripple-out{0%{transform:scale(0);opacity:.16}to{transform:scale(1);opacity:0}}@keyframes m3-enter{0%{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}