:root{--space-3xs: clamp(.3125rem, .3125rem + 0vw, .3125rem);--space-2xs: clamp(.5625rem, .5369rem + .1136vw, .625rem);--space-xs: clamp(.875rem, .8494rem + .1136vw, .9375rem);--space-s: clamp(1.125rem, 1.0739rem + .2273vw, 1.25rem);--space-m: clamp(1.6875rem, 1.6108rem + .3409vw, 1.875rem);--space-l: clamp(2.25rem, 2.1477rem + .4545vw, 2.5rem);--space-xl: clamp(3.375rem, 3.2216rem + .6818vw, 3.75rem);--space-2xl: clamp(4.5rem, 4.2955rem + .9091vw, 5rem);--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);--space-3xs-2xs: clamp(.3125rem, .1847rem + .5682vw, .625rem);--space-2xs-xs: clamp(.5625rem, .4091rem + .6818vw, .9375rem);--space-xs-s: clamp(.875rem, .7216rem + .6818vw, 1.25rem);--space-s-m: clamp(1.125rem, .8182rem + 1.3636vw, 1.875rem);--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem)}h1,h2,h3,h4,h5,h6,p,blockquote,figure{margin-block:0}h1,h2,h3,h4,label,input{line-height:1.1}html{font-family:system-ui;line-height:1.6}body{margin:0;padding-block-end:2rem}main{display:grid;gap:var(--space-s);min-block-size:100vb;grid-template-rows:auto 1fr;@media (width > 960px){grid-template-columns:300px minmax(0,1200px);grid-template-rows:1fr;justify-content:center}}.page-header{display:flex;justify-content:space-between;gap:1rem;padding:var(--space-m-l);padding-block-end:0}.sidebar{padding:var(--space-m-l);padding-block-end:0}.preview-canvas{contain:size}.grid-flow{display:grid;gap:1rem}h1{font-size:1.25rem;font-weight:500;background:linear-gradient(90deg in oklch,red,#00f);width:fit-content;color:transparent;background-clip:text}h2{font-size:1rem;font-weight:500}.btn{cursor:pointer;font-family:inherit;padding:.25lh 1ch;background:none;border:2px solid currentColor;border-radius:100vw;font-weight:500;&:hover,&:focus-visible{background:#000;color:#fff}}.sidebar{display:grid;align-content:start;gap:1lh}.theme{padding:var(--space-s);background:#eff1f5;border-radius:1rem;display:grid;gap:1rem}.colors{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.color-input{display:grid;box-shadow:0 0 1rem hsl(0 0 0 / .2);border-radius:.5rem;overflow:clip}label{padding:.5ch .25lh}input[type=color]{appearance:none;-moz-appearance:none;-webkit-appearance:none;border:0;padding:0;cursor:pointer;height:3rem;width:100%}::-webkit-color-swatch-wrapper{padding:0}::-webkit-color-swatch{border:0;border-radius:0}::-moz-color-swatch,::-moz-focus-inner{border:0}::-moz-focus-inner{padding:0}@property --angle{syntax: "<angle>"; initial-value: 90deg; inherits: true;}details,::details-content{display:grid;gap:.35lh}summary{font-weight:500}.theme-actions{display:flex;flex-wrap:wrap;gap:.5rem}.theme-actions>button{--gradient: linear-gradient(var(--angle) in lch, red, purple, blue);width:min(100%,25ch);cursor:pointer;padding:.5lh 2ch;font:inherit;font-weight:500;border:5px solid transparent;border-radius:100vw;background:conic-gradient(var(--bg-fill, white)) padding-box,var(--gradient) border-box;animation:rotate-angle 5s linear infinite;animation-play-state:paused;position:relative;transition:scale .35s;transition-timing-function:linear(0,.013 .6%,.05 1.2%,.2 2.5%,.949 6.7%,1.2 8.4%,1.286 9.2%,1.35 10%,1.392 10.8%,1.411 11.6%,1.411 12.2%,1.401 12.8%,1.343 14.2%,1.258 15.5%,1.016 18.7%,.914 20.4%,.856 21.9%,.831 23.5%,.834 24.7%,.858 26.1%,.996 30.7%,1.037 32.4%,1.06 33.9%,1.07 35.4%,1.061 37.7%,.989 43.8%,.971 47.2%,1.012 59.1%,.995 70.8%,1);&:before,&:after{content:"";position:absolute}&:before{background:#fff;inset:0;border-radius:100vw;z-index:-1}&:after{background:var(--gradient);inset:-10px;z-index:-2;border-radius:inherit;opacity:.4;scale:0;filter:blur(1rem);transition:scale .5s}&:hover,&:focus-visible{animation-play-state:running;&:after{scale:1}}&:active{transition:scale .5s;transition-timing-function:ease-in-out;scale:.9}}@keyframes rotate-angle{0%{--angle: 90deg}to{--angle: 450deg }}.presets{display:grid;gap:.5lh}.swatch-preview{--swatch-br: 4px;position:relative;border-radius:var(--swatch-br);box-shadow:0 0 12px #0003;width:fit-content}.swatch-preview:is(:hover,:focus-within) .preset-swatches{scale:1.1}.swatch-preview:has(.preset-btn:focus)>.preset-swatches{outline:2px solid currentColor;outline-offset:2px}.preset-buttons{display:flex;gap:12px;flex-wrap:wrap}.preset-btn{cursor:pointer;position:absolute;inset:0;opacity:0}.preset-swatches{display:grid;grid-template-columns:repeat(2,1fr);width:25px;height:25px;transition:scale .2s;border-radius:var(--swatch-br)}.swatch{&:nth-child(1){border-radius:var(--swatch-br) 0 0 0}&:nth-child(2){border-radius:0 var(--swatch-br) 0 0}&:nth-child(3){border-radius:0 0 0 var(--swatch-br)}&:nth-child(4){border-radius:0 0 var(--swatch-br) 0}}.swatch-preview{position:relative}.swatch-preview:hover,.swatch-preview:focus-within{.heart-btn{display:block}}.heart-btn{--size: 6px;--heart-color: #cbcbcb;position:absolute;top:25px;border:none;background:transparent;border-radius:4px;left:0;right:0;font-size:.875rem;cursor:pointer;z-index:1;display:none;background:#fff;width:100%;height:100%;box-shadow:0 0 8px hsl(0 0 0 / .1);transition:scale 125ms;&:hover,&:focus{scale:1.1}>span{inset:0;margin:auto;display:block;background:var(--heart-color);width:var(--size);height:calc(var(--size) * 1.5);position:absolute;&:first-child{rotate:45deg;translate:1px;border-radius:100vw 100vw 0 0}&:last-child{translate:-1px;rotate:135deg;border-radius:0 0 100vw 100vw}}}.heart-btn:hover{transform:scale(1.05)}.heart-btn.hearted{--heart-color: hsl(0 100% 50%)}.preview-canvas{margin:var(--space-m-l);border-radius:1rem;color:var(--text-base);background:var(--surface-base);overflow:clip scroll;accent-color:var(--accent);>*{padding:var(--space-m)}h1,h2,h3,h4{color:var(--text-high-contrast, inherit)}input,textarea,select,button{color:inherit;font:inherit}header{display:flex;justify-content:space-between}.logo{font-weight:500}.subdued{color:var(--text-subdued)}.surface{--surface-variant: base;color:var(--text-color);background-color:var(--surface-color);&:not([data-theme]),&[data-theme=""],&[data-theme=base]{.surface{--text-color: var(--text-level-2);--surface-color: var(--surface-level-2);--text-high-contrast: var(--text-level-1-high-contrast);--text-subdued: var(--text-level-1-subdued);.surface{--text-color: var(--text-level-3);--surface-color: var(--surface-level-3);--text-high-contrast: var(--text-level-3-high-contrast);--text-subdued: var(--text-level-3-subdued);.surface{--text-color: var(--text-level-4);--surface-color: var(--surface-level-4);--text-high-contrast: var(--text-level-4-high-contrast);--text-subdued: var(--text-level-4-subdued);.surface{--text-color: var(--text-level-5);--surface-color: var(--surface-level-5);--text-high-contrast: var(--text-level-5-high-contrast);--text-subdued: var(--text-level-5-subdued);.surface{--text-color: var(--text-level-4);--surface-color: var(--surface-level-4);--text-high-contrast: var(--text-level-4-high-contrast);--text-subdued: var(--text-level-4-subdued)}}}}}}&[data-theme=primary]{--text-color: var(--text-primary-level-1);--surface-color: var(--surface-primary-level-1);--text-high-contrast: var(--text-primary-level-1-high-contrast);--text-subdued: var(--text-primary-level-1-subdued);.surface{--text-color: var(--text-primary-level-2);--surface-color: var(--surface-primary-level-2);--text-high-contrast: var(--text-primary-level-1-high-contrast);--text-subdued: var(--text-primary-level-1-subdued);.surface{--text-color: var(--text-primary-level-3);--surface-color: var(--surface-primary-level-3);--text-high-contrast: var(--text-primary-level-3-high-contrast);--text-subdued: var(--text-primary-level-3-subdued);.surface{--text-color: var(--text-primary-level-4);--surface-color: var(--surface-primary-level-4);--text-high-contrast: var(--text-primary-level-4-high-contrast);--text-subdued: var(--text-primary-level-4-subdued);.surface{--text-color: var(--text-primary-level-5);--surface-color: var(--surface-primary-level-5);--text-high-contrast: var(--text-primary-level-5-high-contrast);--text-subdued: var(--text-primary-level-5-subdued);.surface{--text-color: var(--text-primary-level-4);--surface-color: var(--surface-primary-level-4);--text-high-contrast: var(--text-primary-level-4-high-contrast);--text-subdued: var(--text-primary-level-4-subdued)}}}}}}&[data-theme=secondary]{--text-color: var(--text-secondary-level-1);--surface-color: var(--surface-secondary-level-1);--text-high-contrast: var(--text-secondary-level-1-high-contrast);--text-subdued: var(--text-secondary-level-1-subdued);.surface{--text-color: var(--text-secondary-level-2);--surface-color: var(--surface-secondary-level-2);--text-high-contrast: var(--text-secondary-level-2-high-contrast);--text-subdued: var(--text-secondary-level-2-subdued);.surface{--text-color: var(--text-secondary-level-3);--surface-color: var(--surface-secondary-level-3);--text-high-contrast: var(--text-secondary-level-3-high-contrast);--text-subdued: var(--text-secondary-level-3-subdued);.surface{--text-color: var(--text-secondary-level-4);--surface-color: var(--surface-secondary-level-4);--text-high-contrast: var(--text-secondary-level-4-high-contrast);--text-subdued: var(--text-secondary-level-4-subdued);.surface{--text-color: var(--text-secondary-level-5);--surface-color: var(--surface-secondary-level-5);--text-high-contrast: var(--text-secondary-level-5-high-contrast);--text-subdued: var(--text-secondary-level-5-subdued);.surface{--text-color: var(--text-secondary-level-4);--surface-color: var(--surface-secondary-level-4);--text-high-contrast: var( --text-secondary-level-4-high-contrast );--text-subdued: var(--text-secondary-level-4-subdued)}}}}}}&[data-theme=accent]{--text-color: var(--text-accent-level-1);--surface-color: var(--surface-accent-level-1);--text-high-contrast: var(--text-accent-level-1-high-contrast);--text-subdued: var(--text-accent-level-1-subdued);.surface{--text-color: var(--text-accent-level-2);--surface-color: var(--surface-accent-level-2);--text-high-contrast: var(--text-accent-level-2-high-contrast);--text-subdued: var(--text-accent-level-2-subdued);.surface{--text-color: var(--text-accent-level-3);--surface-color: var(--surface-accent-level-3);--text-high-contrast: var(--text-accent-level-3-high-contrast);--text-subdued: var(--text-accent-level-3-subdued);.surface{--text-color: var(--text-accent-level-4);--surface-color: var(--surface-accent-level-4);--text-high-contrast: var(--text-accent-level-4-high-contrast);--text-subdued: var(--text-accent-level-4-subdued);.surface{--text-color: var(--text-accent-level-5);--surface-color: var(--surface-accent-level-5);--text-high-contrast: var(--text-accent-level-5-high-contrast);--text-subdued: var(--text-accent-level-5-subdued);.surface{--text-color: var(--text-accent-level-4);--surface-color: var(--surface-accent-level-4);--text-high-contrast: var(--text-accent-level-4-high-contrast);--text-subdued: var(--text-accent-level-4-subdued)}}}}}}&[data-theme=inverted]{--text-color: var(--text-inverted-level-1);--surface-color: var(--surface-inverted-level-1);--text-high-contrast: var(--text-inverted-level-1-high-contrast);--text-subdued: var(--text-inverted-level-1-subdued);.surface{--text-color: var(--text-inverted-level-2);--surface-color: var(--surface-inverted-level-2);--text-high-contrast: var(--text-inverted-level-2-high-contrast);--text-subdued: var(--text-inverted-level-2-subdued);.surface{--text-color: var(--text-inverted-level-3);--surface-color: var(--surface-inverted-level-3);--text-high-contrast: var(--text-inverted-level-3-high-contrast);--text-subdued: var(--text-inverted-level-3-subdued);.surface{--text-color: var(--text-inverted-level-4);--surface-color: var(--surface-inverted-level-4);--text-high-contrast: var(--text-inverted-level-4-high-contrast);--text-subdued: var(--text-inverted-level-4-subdued);.surface{--text-color: var(--text-inverted-level-5);--surface-color: var(--surface-inverted-level-5);--text-high-contrast: var(--text-inverted-level-5-high-contrast);--text-subdued: var(--text-inverted-level-5-subdued);.surface{--text-color: var(--text-inverted-level-4);--surface-color: var(--surface-inverted-level-4);--text-high-contrast: var( --text-inverted-level-4-high-contrast );--text-subdued: var(--text-inverted-level-4-subdued)}}}}}}.surface{--surface-level: 2;.surface{--surface-level: 3;.surface{--surface-level: 4;.surface{--surface-level: 3}}}}}.cards{border-radius:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));>*{padding:1rem;border-radius:.5rem}}a{color:var(--accent, inherit);&:hover,&:focus{color:var(--text-high-contrast, inherit)}}.btn{cursor:pointer;text-decoration:none;border:0;background-color:var(--button-surface, var(--surface-inverted-level-1));color:var(--button-text, var(--text-inverted-level-1));padding:.5lh 2ch;border-radius:6px;font-weight:500;&[data-theme=primary]{--button-surface: var(--surface-primary);--button-text: var(--text-on-primary);&:hover,&:focus{--button-surface: var(--surface-primary-hover)}}&[data-theme=secondary]{--button-surface: var(--surface-secondary, var(--surface-inverted));--button-text: var(--text-on-secondary);&:hover,&:focus{--button-surface: var(--surface-secondary-hover)}}&[data-theme=accent]{--button-surface: var(--surface-accent, var(--surface-inverted));--button-text: var(--text-on-accent);&:hover,&:focus{--button-surface: var(--surface-accent-hover)}}&[data-theme=outline]{outline:1px solid var(--text-level-1, var(--text-base));outline-offset:-1px;--button-surface: transparent;--button-text: var(--text-level-1);&:hover,&:focus{--button-surface: var(--surface-inverted-level-1);--button-text: var(--surface-level-1)}}}.form-section{container-type:inline-size;form{display:grid;gap:1rem;align-items:start;@container (width > 600px){grid-template-columns:repeat(2,1fr)}}.form-group{display:grid}input,textarea,select{background:var(--surface-level-1);border:1px solid var(--surface-level-2);padding:.5lh 2ch;border-radius:.25rem}::placeholder{color:var(--text-subdued)}}.badges{display:flex;gap:1ch;font-size:.875rem;>*{padding:.25lh 2ch;background:var(--surface-primary);border-radius:100vh}}}:root{--surface-accent: #10b981;--surface-accent-level-1: #10b981;--surface-accent-level-1-high-contrast: #000000;--surface-accent-level-1-subdued: #2c3f35;--surface-accent-level-1-text: #14261d;--surface-accent-level-2: #008554;--surface-accent-level-2-high-contrast: #ffffff;--surface-accent-level-2-subdued: #c1d8ca;--surface-accent-level-2-text: #def5e7;--surface-accent-level-3: #006b41;--surface-accent-level-3-high-contrast: #ffffff;--surface-accent-level-3-subdued: #bcd2c4;--surface-accent-level-3-text: #dff5e7;--surface-accent-level-4: #005230;--surface-accent-level-4-high-contrast: #ffffff;--surface-accent-level-4-subdued: #b8cbbf;--surface-accent-level-4-text: #e0f4e7;--surface-accent-level-5: #003a1f;--surface-accent-level-5-high-contrast: #ffffff;--surface-accent-level-5-subdued: #b5c5ba;--surface-accent-level-5-text: #e3f3e8;--surface-base: #0f172a;--surface-inverted-level-1: #d5dee4;--surface-inverted-level-1-high-contrast: #000000;--surface-inverted-level-1-subdued: #444647;--surface-inverted-level-1-text: #202223;--surface-inverted-level-2: #bbc5ca;--surface-inverted-level-2-high-contrast: #000000;--surface-inverted-level-2-subdued: #3f4142;--surface-inverted-level-2-text: #202223;--surface-inverted-level-3: #a2abb1;--surface-inverted-level-3-high-contrast: #000000;--surface-inverted-level-3-subdued: #3b3d3e;--surface-inverted-level-3-text: #202223;--surface-inverted-level-4: #8a9398;--surface-inverted-level-4-high-contrast: #000000;--surface-inverted-level-4-subdued: #d7dadc;--surface-inverted-level-4-text: #eceff1;--surface-inverted-level-5: #727b80;--surface-inverted-level-5-high-contrast: #ffffff;--surface-inverted-level-5-subdued: #d1d4d6;--surface-inverted-level-5-text: #eceff1;--surface-level-1: #212a3f;--surface-level-1-high-contrast: #ffffff;--surface-level-1-subdued: #bcbfc7;--surface-level-1-text: #ebeef7;--surface-level-2: #353f55;--surface-level-2-high-contrast: #ffffff;--surface-level-2-subdued: #c0c4cd;--surface-level-2-text: #eaeef7;--surface-level-3: #4a546b;--surface-level-3-high-contrast: #ffffff;--surface-level-3-subdued: #c7cad3;--surface-level-3-text: #ebeef7;--surface-level-4: #606b83;--surface-level-4-high-contrast: #ffffff;--surface-level-4-subdued: #cdd0d8;--surface-level-4-text: #ebeef7;--surface-level-5: #77829b;--surface-level-5-high-contrast: #ffffff;--surface-level-5-subdued: #d2d5de;--surface-level-5-text: #ebeef7;--surface-primary: #3b82f6;--surface-primary-hover: #1a62d3;--surface-primary-level-1: #3b82f6;--surface-primary-level-1-high-contrast: #ffffff;--surface-primary-level-1-subdued: #ccd7e7;--surface-primary-level-1-text: #e3efff;--surface-primary-level-2: #85b9ff;--surface-primary-level-2-high-contrast: #000000;--surface-primary-level-2-subdued: #343f4f;--surface-primary-level-2-text: #182230;--surface-primary-level-3: #b0d4ff;--surface-primary-level-3-high-contrast: #000000;--surface-primary-level-3-subdued: #3b444f;--surface-primary-level-3-text: #1a222c;--surface-primary-level-4: #daeeff;--surface-primary-level-4-high-contrast: #000000;--surface-primary-level-4-subdued: #44494d;--surface-primary-level-4-text: #1e2226;--surface-primary-level-5: #fff;--surface-primary-level-5-high-contrast: #000000;--surface-primary-level-5-subdued: #4c4c4c;--surface-primary-level-5-text: #222;--surface-secondary: #8b5cf6;--surface-secondary-hover: #6f3ad3;--surface-secondary-level-1: #8b5cf6;--surface-secondary-level-1-high-contrast: #ffffff;--surface-secondary-level-1-subdued: #d6d2e6;--surface-secondary-level-1-text: #efebff;--surface-secondary-level-2: #b79eff;--surface-secondary-level-2-high-contrast: #000000;--surface-secondary-level-2-subdued: #3e3b4c;--surface-secondary-level-2-text: #221f2f;--surface-secondary-level-3: #cebfff;--surface-secondary-level-3-high-contrast: #000000;--surface-secondary-level-3-subdued: #43404f;--surface-secondary-level-3-text: #221f2d;--surface-secondary-level-4: #e7e0ff;--surface-secondary-level-4-high-contrast: #000000;--surface-secondary-level-4-subdued: #48454d;--surface-secondary-level-4-text: #222027;--surface-secondary-level-5: #fff;--surface-secondary-level-5-high-contrast: #000000;--surface-secondary-level-5-subdued: #4c4c4c;--surface-secondary-level-5-text: #222;--text-base: #ebeef7;--text-high-contrast: #ffffff;--text-on-accent: #14261d;--text-on-primary: #e3efff;--text-on-secondary: #efebff;--text-subdued: #b6b9c2}.surface[data-astro-cid-e7ogou6n] .surface[data-astro-cid-e7ogou6n]{padding:.5rem}h3[data-astro-cid-e7ogou6n]{text-transform:capitalize}.auth-modal[data-astro-cid-6iignqru]{border:none;border-radius:8px;padding:0;max-width:400px;width:90%}.auth-modal[data-astro-cid-6iignqru]::backdrop{background:#00000080;backdrop-filter:blur(4px)}.auth-modal-content[data-astro-cid-6iignqru]{background:#fff;color:#000;padding:2rem;position:relative}.auth-modal-close[data-astro-cid-6iignqru]{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#4d4d4d;padding:0;width:2rem;height:2rem}.auth-modal-close[data-astro-cid-6iignqru]:hover{color:#000}#magic-link-form[data-astro-cid-6iignqru]{display:grid;gap:1rem}#email-input[data-astro-cid-6iignqru]{padding:.75rem;border:0;border-radius:4px;font-size:1rem;background:var(--surface-base);color:var(--text-base)}#email-input[data-astro-cid-6iignqru]:focus{outline:2px solid var(--accent, #0ea5e9);outline-offset:2px}.auth-error[data-astro-cid-6iignqru]{margin-top:1rem;padding:.75rem;background:#fee;color:#c00;border-radius:4px;font-size:.9rem}.auth-success[data-astro-cid-6iignqru]{margin-top:1rem;padding:.75rem;background:#efe;color:#060;border-radius:4px;font-size:.9rem}.hidden[data-astro-cid-6iignqru]{display:none!important}.user-email[data-astro-cid-6iignqru]{color:var(--text-base, black);margin-bottom:1rem;font-weight:500}#user-info-container[data-astro-cid-6iignqru]{display:flex;flex-direction:column;gap:1rem}