@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";:root{--palette-saturation-none: 0%;--palette-saturation-low: 20%;--palette-saturation-mid: 50%;--palette-saturation-high: 80%;--palette-saturation-full: 100%;--palette-primary-hue: 140;--palette-primary-saturation: var(--palette-saturation-mid);--palette-secondary-hue: 180;--palette-secondary-saturation: var(--palette-saturation-mid);--palette-tertiary-hue: 0;--palette-tetiary-saturation: var(--palette-saturation-mid);--palette-neutral-hue: 0;--palette-neutral-saturation: var(--palette-saturation-none)}@media (prefers-color-scheme: light){:root{--lightness-surface: 85%;--lightness-text: 20%;--lightness-emphasis: 10%}:root{font-size:20px;color:var(--color-surface-neutral, hsl(50, 50%, 50%));--color-surface-neutral-mild: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), var(--lightness-surface, 50%));--color-text-neutral-mild: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), var(--lightness-text, 50%));--color-emphasis-neutral-mild: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), var(--lightness-emphasis, 50%));--color-surface-neutral: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-surface, 50%) + 5%));--color-text-neutral: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-text, 50%) + 5%));--color-emphasis-neutral: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 5%));--color-surface-neutral-intense: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-surface, 50%) + 10%));--color-text-neutral-intense: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-text, 50%) + 10%));--color-emphasis-neutral-intense: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 10%));--color-surface-primary-mild: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), var(--lightness-surface, 50%));--color-text-primary-mild: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), var(--lightness-text, 50%));--color-emphasis-primary-mild: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), var(--lightness-emphasis, 50%));--color-surface-primary: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-surface, 50%) + 5%));--color-text-primary: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-text, 50%) + 5%));--color-emphasis-primary: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 5%));--color-surface-primary-intense: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-surface, 50%) + 10%));--color-text-primary-intense: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-text, 50%) + 10%));--color-emphasis-primary-intense: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 10%));--color-surface-secondary-mild: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), var(--lightness-surface, 50%));--color-text-secondary-mild: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), var(--lightness-text, 50%));--color-emphasis-secondary-mild: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), var(--lightness-emphasis, 50%));--color-surface-secondary: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-surface, 50%) + 5%));--color-text-secondary: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-text, 50%) + 5%));--color-emphasis-secondary: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 5%));--color-surface-secondary-intense: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-surface, 50%) + 10%));--color-text-secondary-intense: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-text, 50%) + 10%));--color-emphasis-secondary-intense: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 10%));--color-surface-tertiary-mild: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), var(--lightness-surface, 50%));--color-text-tertiary-mild: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), var(--lightness-text, 50%));--color-emphasis-tertiary-mild: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), var(--lightness-emphasis, 50%));--color-surface-tertiary: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-surface, 50%) + 5%));--color-text-tertiary: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-text, 50%) + 5%));--color-emphasis-tertiary: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 5%));--color-surface-tertiary-intense: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-surface, 50%) + 10%));--color-text-tertiary-intense: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-text, 50%) + 10%));--color-emphasis-tertiary-intense: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 10%))}}@media (prefers-color-scheme: dark){:root{--lightness-surface: 5%;--lightness-text: 80%;--lightness-emphasis: 90%}:root{font-size:20px;color:var(--color-surface-neutral, hsl(50, 50%, 50%));--color-surface-neutral-mild: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), var(--lightness-surface, 50%));--color-text-neutral-mild: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), var(--lightness-text, 50%));--color-emphasis-neutral-mild: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), var(--lightness-emphasis, 50%));--color-surface-neutral: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-surface, 50%) + 5%));--color-text-neutral: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-text, 50%) + 5%));--color-emphasis-neutral: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 5%));--color-surface-neutral-intense: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-surface, 50%) + 10%));--color-text-neutral-intense: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-text, 50%) + 10%));--color-emphasis-neutral-intense: hsl(var(--palette-neutral-hue, 0), var(--palette-neutral-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 10%));--color-surface-primary-mild: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), var(--lightness-surface, 50%));--color-text-primary-mild: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), var(--lightness-text, 50%));--color-emphasis-primary-mild: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), var(--lightness-emphasis, 50%));--color-surface-primary: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-surface, 50%) + 5%));--color-text-primary: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-text, 50%) + 5%));--color-emphasis-primary: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 5%));--color-surface-primary-intense: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-surface, 50%) + 10%));--color-text-primary-intense: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-text, 50%) + 10%));--color-emphasis-primary-intense: hsl(var(--palette-primary-hue, 0), var(--palette-primary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 10%));--color-surface-secondary-mild: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), var(--lightness-surface, 50%));--color-text-secondary-mild: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), var(--lightness-text, 50%));--color-emphasis-secondary-mild: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), var(--lightness-emphasis, 50%));--color-surface-secondary: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-surface, 50%) + 5%));--color-text-secondary: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-text, 50%) + 5%));--color-emphasis-secondary: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 5%));--color-surface-secondary-intense: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-surface, 50%) + 10%));--color-text-secondary-intense: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-text, 50%) + 10%));--color-emphasis-secondary-intense: hsl(var(--palette-secondary-hue, 0), var(--palette-secondary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 10%));--color-surface-tertiary-mild: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), var(--lightness-surface, 50%));--color-text-tertiary-mild: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), var(--lightness-text, 50%));--color-emphasis-tertiary-mild: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), var(--lightness-emphasis, 50%));--color-surface-tertiary: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-surface, 50%) + 5%));--color-text-tertiary: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-text, 50%) + 5%));--color-emphasis-tertiary: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 5%));--color-surface-tertiary-intense: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-surface, 50%) + 10%));--color-text-tertiary-intense: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-text, 50%) + 10%));--color-emphasis-tertiary-intense: hsl(var(--palette-tertiary-hue, 0), var(--palette-tertiary-saturation, 50%), calc(var(--lightness-emphasis, 50%) + 10%))}}body,#app{background-color:var(--color-surface-neutral);color:var(--color-text-neutral)}.surface:not(primary,secondary,tertiary):is(.mild){background-color:var(--color-surface-neutral-mild);color:var(--color-text-neutral-mild);--color-text-emphasis: var(--color-emphasis-neutral-mild)}.surface:not(primary,secondary,tertiary):not(mild,intense){background-color:var(--color-surface-neutral);color:var(--color-text-neutral);--color-text-emphasis: var(--color-emphasis-neutral)}.surface:not(primary,secondary,tertiary):is(.intense){background-color:var(--color-surface-neutral-intense);color:var(--color-text-neutral-intense);--color-text-emphasis: var(--color-emphasis-neutral-intense)}.surface:is(.primary):is(.mild){background-color:var(--color-surface-primary-mild);color:var(--color-text-primary-mild);--color-text-emphasis: var(--color-emphasis-primary-mild)}.surface:is(.primary):not(mild,intense){background-color:var(--color-surface-primary);color:var(--color-text-primary);--color-text-emphasis: var(--color-emphasis-primary)}.surface:is(.primary):is(.intense){background-color:var(--color-surface-primary-intense);color:var(--color-text-primary-intense);--color-text-emphasis: var(--color-emphasis-primary-intense)}.surface:is(.secondary):is(.mild){background-color:var(--color-surface-secondary-mild);color:var(--color-text-secondary-mild);--color-text-emphasis: var(--color-emphasis-secondary-mild)}.surface:is(.secondary):not(mild,intense){background-color:var(--color-surface-secondary);color:var(--color-text-secondary);--color-text-emphasis: var(--color-emphasis-secondary)}.surface:is(.secondary):is(.intense){background-color:var(--color-surface-secondary-intense);color:var(--color-text-secondary-intense);--color-text-emphasis: var(--color-emphasis-secondary-intense)}.surface:is(.tertiary):is(.mild){background-color:var(--color-surface-tertiary-mild);color:var(--color-text-tertiary-mild);--color-text-emphasis: var(--color-emphasis-tertiary-mild)}.surface:is(.tertiary):not(mild,intense){background-color:var(--color-surface-tertiary);color:var(--color-text-tertiary);--color-text-emphasis: var(--color-emphasis-tertiary)}.surface:is(.tertiary):is(.intense){background-color:var(--color-surface-tertiary-intense);color:var(--color-text-tertiary-intense);--color-text-emphasis: var(--color-emphasis-tertiary-intense)}:where(a):not(.button){color:var(--color-text-primary)}:where(a):is(.secondary){color:var(--color-text-secondary)}:where(a):is(.tertiary){color:var(--color-text-tertiary)}:where(button,.button):not(.solid):not(.secondary,.tertiary){color:var(--color-text-primary);background-color:transparent}:where(button,.button):is(.outlined):not(.secondary,.tertiary){border-color:var(--color-text-primary)}:where(button,.button):is(.solid):not(.secondary,.tertiary){color:var(--color-text-primary);background-color:var(--color-surface-primary)}:where(button,.button):is(.solid):not(.secondary,.tertiary):hover{background-color:var(--color-surface-primary)}:where(button,.button):not(.solid):is(.secondary){color:var(--color-text-secondary);background-color:transparent}:where(button,.button):is(.outlined):is(.secondary){border-color:var(--color-text-secondary)}:where(button,.button):is(.solid):is(.secondary){color:var(--color-text-secondary);background-color:var(--color-surface-secondary)}:where(button,.button):is(.solid):is(.secondary):hover{background-color:var(--color-surface-secondary)}:where(button,.button):not(.solid):is(.tertiary){color:var(--color-text-tertiary);background-color:transparent}:where(button,.button):is(.outlined):is(.tertiary){border-color:var(--color-text-tertiary)}:where(button,.button):is(.solid):is(.tertiary){color:var(--color-text-tertiary);background-color:var(--color-surface-tertiary)}:where(button,.button):is(.solid):is(.tertiary):hover{background-color:var(--color-surface-tertiary)}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400;line-height:inherit}html{color-scheme:light dark}body{display:flow-root;cursor:default;line-height:1.6;font-family:Roboto,Helvetica Neue,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,#app{min-height:100vh;min-height:100dvh}.hero{height:100vh;height:100dvh}img{max-width:100%;display:block}a,button,.button{cursor:pointer}button,.button{padding-inline:1rem;padding-block:.5rem;display:inline-block;text-decoration:none;font-weight:700;border-width:1px;transition:transform .2s,background-color .3s;border-radius:.2rem;font-family:inherit;font-size:inherit}:where(button,.button):is(.outlined){border-style:solid}:where(button,.button):not(.outlined){border-style:none}button:active,.button:active{transform:scale(.95)}.wrapper{max-width:min(100% - 3rem,75ch);margin-inline:auto}a[data-v-4c3f20fe]{position:absolute;top:0;padding-top:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;transition-property:transform;transition-duration:.26s;text-decoration:none}a[data-v-4c3f20fe]:not(:focus){transform:translateY(-110%)}.hue-slider[data-v-4b840719]{margin-bottom:.5rem;display:grid;gap:.2rem;grid-template-columns:repeat(3,min-content)}.name[data-v-4b840719]{grid-column:span 3;text-transform:capitalize}.color-preview[data-v-4b840719]{width:1em;height:1em}.theme-controls[data-v-84ac4c36]{margin-left:auto;position:relative}.controls[data-v-84ac4c36]{position:absolute;right:0rem;top:calc(100% + 1px);margin-top:.5rem;padding:.5rem;white-space:nowrap}nav[data-v-d425284d]{display:flex;gap:.5em}header[data-v-addec3d8]{padding:.5rem;border-bottom-color:var(--color-outline);border-bottom-style:solid;border-bottom-width:1px}header[data-v-b1069b4e]{padding:.5rem;border-bottom-color:var(--color-outline);border-bottom-style:solid;border-bottom-width:1px;position:absolute;top:0;left:0;width:100%;background-color:var(--color-surface)}.hero[data-v-30b3c2fd]{display:grid;place-items:center;text-align:center}section[data-v-30b3c2fd]{padding-block:3rem}p[data-v-30b3c2fd],h1[data-v-30b3c2fd],h2[data-v-30b3c2fd]{margin-bottom:1em}section[data-v-30b3c2fd]:nth-child(2n){background-color:var(--color-surface-variant);color:var(--color-on-surface-variant)}.buttons[data-v-35d7542b]{display:flex;gap:.5em;align-items:flex-start;flex-wrap:wrap}.hero[data-v-38ff1e1f]{display:grid;place-items:center;text-align:center}section[data-v-38ff1e1f]{padding-block:3rem}p[data-v-38ff1e1f],h1[data-v-38ff1e1f],h2[data-v-38ff1e1f]{margin-bottom:1em}section[data-v-38ff1e1f]:nth-child(2n){background-color:var(--color-surface-variant);color:var(--color-on-surface-variant)}.surface[data-v-350edf10]{padding:1rem;text-align:center}h2[data-v-350edf10]{margin-bottom:.5em;text-transform:capitalize;color:var(--color-text-emphasis)}.surfaces-table[data-v-345701b7]{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}