/* * 🎨 mnml.css 5.0.2 * Support Matrix * | Browser | Supported Versions | * | --------------------- | ------------------------- | * | Android Browser | 111 | * | Chrome | 108-111 | * | Chrome (Android) | 111 | * | Edge | 109-111 | * | Firefox | 102; 109-111 | * | Firefox (Android) | 110 | * | KaiOS Browser | 2.5; 3.0-3.1 | * | Opera | 94-95 | * | Opera Mobile | 73 | * | QQ Browser (Android) | 13.1 | * | Safari (iOS & iPadOS) | 14.5; 14.8; 15.6; 16-16.4 | * | Safari (macOS) | 15.6; 16.2-16.4 | * | Samsung Internet | 19-20 | * | UC Browser (Android) | 13.4 | */ /* * Inspirations * https://www.sarasoueidan.com/blog/focus-indicators/ * https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/ */ @layer mnml, mnml.reset, mnml.baseline, mnml.layout, mnml.animation, mnml.forms, mnml.buttons, mnml.a11y, mnml.utils;@layer mnml{@layer reset{:where(:not(iframe,canvas,img,svg,video,dialog,[popover]):not(svg *)){all:unset;cursor:revert;display:revert;list-style-type:revert;outline:revert;resize:revert}:where(:focus-visible){outline:2px solid var(--focus-ring--color,hsl(--focus-ring-color));outline-offset:var(--focus-ring--offset,var(--focus-ring-offset,2px))}}@layer baseline{*,:after,:before{box-sizing:border-box}ol[class],ul[class]{list-style:none}:where(:root,:host){--ui-font-sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Ubuntu,roboto,noto,arial,sans-serif;--ui-font-serif:ui-serif,Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;--ui-font-monospace:ui-monospace,Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--body-bg:hsl(0deg 0% 100%);--body-color:hsl(0deg 0% 0%);--button-base--default:hsl(0deg 0% 50%);--button-base--default--hover:hsl(0deg 0% 75%);--button-base--disabled:hsl(0deg 0% 75%);--button-color--default:hsl(0deg 0% 0%);--button-color--disabled:hsl(210deg 11% 50%);--button-border--default:transparent;--button-border--disabled:transparent;--button-font-family:var(--ui-font-sans);--button-padding-block:0.5rem;--button-padding-inline:1rem;--button-radius:0.25rem;--button-min-block-size:56px;--button-text-transform:none;--focus-ring-color:208.4deg 76.9% 47.5%;--headers-weight:bolder;--link-color--hover:hsl(208deg 80% 52%);--link-color--visited:hsl(255deg 53% 50%);--link-color:hsl(209deg 75% 38%);--link-decoration:underline;--link-decoration--hover:var(--link-decoration);--selection-bg:hsl(47deg 100% 62%);--selection-color:hsl(210deg 11% 15%);--input-min-block-size:56px;--skip-link-color:hsl(210deg 11% 15%);--skip-link-bg:hsl(47deg 100% 62%);color-scheme:light dark}:where(:root,:host)[data-theme~=light]{color-scheme:light}:where(:root,:host)[data-theme~=dark]{color-scheme:dark}@media (prefers-color-scheme:dark){:where(:root,:host):not([data-theme~=light]){--body-bg:hsl(210deg 11% 15%);--body-color:hsl(0deg 0% 100%);--link-color:hsl(207deg 91% 64%);--link-color--visited:hsl(256deg 100% 87%);--link-color--hover:hsl(206deg 100% 82%)}}::selection{background-color:var(--selection-bg);color:var(--selection-color)}html{text-size-adjust:none;line-height:1.15}body{background-color:var(--body-bg);color:var(--body-color);font-family:var(--body-font-family,var(--ui-font-sans))}:where(a){text-decoration:var(--link-decoration);transition-duration:var(--transition-duration);transition-property:color;transition-timing-function:ease-out;will-change:color}:where(a):where(:link){color:var(--link-color)}:where(a):where(:visited){color:var(--link-color--visited)}:where(a):where(:hover,:active,:focus-visible){color:var(--link-color--hover);text-decoration:var(--link-decoration--hover)}:where(hr){border-top:1px solid;margin-block:1rem}h1,h2,h3,h4,h5,h6{color:var(--headers-color,inherit);font-family:var(--headers-font-family,var(--ui-font-sans));font-weight:var(--headers-weight)}h1,h2,h3,h4,h5,h6,p{margin-block-end:var(--spacing);margin-block-start:0;margin-inline:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1rem}h5{font-size:.8125rem}h6{font-size:.625rem}blockquote,h1,h2,h3,h4,h5,h6,li,p{line-height:calc(1em + .5rem);overflow-wrap:break-word}ol:not([class]),ul:not([class]){margin-inline-start:var(--list-inline-spacing,1.25rem)}ol:not([class]) li+li,ul:not([class]) li+li{margin-block-start:var(--spacing)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}em,i{font-style:italic}u{text-decoration:underline}code,kbd,pre,samp{font-family:var(--font-monospace,var(--ui-font-monospace));font-size:1rem;white-space:revert}small{font-size:.8em}sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}:where(button,input,optgroup,select,textarea){font-family:inherit;font-size:1em;line-height:1.15}:where(button){cursor:pointer}body{margin:0;min-block-size:100vh;min-block-size:100dvh}img{block-size:auto;border-style:none;max-inline-size:100%}table{border-collapse:collapse}textarea{white-space:revert}hr{block-size:0;box-sizing:content-box;overflow:visible}details{display:block;margin-inline-start:1rem}summary{display:list-item}[hidden],template{display:none}}@layer layout{:where(:root,:host){--spacing:1rem;--spacing--double:calc(var(--spacing)*2);--spacing--half:calc(var(--spacing)/2)}.container{margin-inline:auto;max-inline-size:var(--container-max-inline-size,var(--container-max-width,1200px));padding-inline:var(--spacing)}:where(.site-header,.site-main,.site-footer),body>:where(header,main,footer,section){padding-block:var(--spacing)}.site-header,body>header{align-items:center}.sticky:is(body>header,.site-header){inset-block-start:0;position:sticky;z-index:10}.site-footer,body>footer{text-align:center}.sticky:is(body>footer,.site-footer){position:sticky;top:100%;z-index:10}.grid,.grid--vertical{display:grid;gap:var(--grid-spacing,var(--spacing))}.grid{grid-template-columns:repeat(auto-fit,minmax(var(--grid-column-min-inline-size,var(--grid-column-min-width,200px)),1fr))}.grid--vertical{grid-auto-flow:row;grid-auto-rows:var(--grid-row-block-size,var(--grid-row-height,auto));grid-template-columns:unset}}@layer animation{:where(:root,:host){--transition-duration:200ms;--transition-duration--slow:400ms;--transition-duration--fast:100ms;--bezier--sudden-end:cubic-bezier(0.9,0.03,0.69,0.22);--bezier--sudden-start:cubic-bezier(0.17,0.84,0.44,1);--bezier--smooth:cubic-bezier(0.62,0.16,0.13,1.01);--bezier--inertia:cubic-bezier(0.5,-0.53,0.14,1.23)}@media (update:slow),screen and (prefers-reduced-motion:reduce){:where(:root,:host){--transition-duration:0ms;--transition-duration--slow:0ms;--transition-duration--fast:0ms}}}@layer forms{form{--input-bg:hsl(0deg 0% 100%);--input-bg--disabled:hsl(210deg 16% 93%);--input-bg--focus:hsl(0deg 0% 100%);--input-border-color:hsl(210deg 17% 95%);--input-border-color--disabled:hsl(210deg 16% 93%);--input-border-color--focus:hsl(210deg 14% 89%);--input-border-width:1px;--input-padding-block:1rem;--input-padding-inline:1rem;--input-radius:0.25rem;--input-text-color:hsl(0deg 0% 0%);--input-text-color--focus:hsl(0deg 0% 0%);--input-text-color--disabled:hsl(0deg 0% 0%);--input-text-size:1rem;--input-file-button-bg:var(--theme-primary,hsl(240deg 100% 50%));--input-file-button-color:var(--theme-primary--contrast-color,hsl(0deg 0% 100%));--input-file-button-bg--hover:var(--theme-primary--hover,hsl(240deg 100% 50%));--input-file-button-color--hover:var(--theme-primary--contrast-color,hsl(0deg 0% 100%));--input-focus-ring-opacity:0.5;--input-focus-ring:hsl(var(--focus-ring-color)/var(--input-focus-ring-opacity));--input-placeholder-color:hsl(210deg 7% 56%);--help-text-opacity:0.8;--required-color:hsl(0deg 65% 48%);--select-arrow:url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3e%3cpath fill="none" stroke="hsl(210deg 10.3% 22.7%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/%3e%3c/svg%3e')}form fieldset legend{font-weight:bolder;margin-block-end:var(--spacing)}form fieldset+fieldset{margin-block-start:calc(var(--spacing)*2)}form label{display:block;margin-block-end:.25rem}form label.toggle-label{display:grid;gap:calc(var(--spacing)*.75);grid-template-columns:1em auto}form .help{display:block;font-style:italic;margin-block-start:.25rem;opacity:var(--help-text-opacity)}form abbr[title~=required i]{color:var(--required-color);text-decoration:none}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select){appearance:auto;background-clip:padding-box;background:var(--input-bg);border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-radius);color:var(--input-text-color);display:block;font-size:var(--input-text-size);inline-size:100%;min-block-size:var(--input-min-height,var(--input-min-block-size));padding-block:var(--input-padding-block);padding-inline:var(--input-padding-inline);transition-duration:var(--transition-duration);transition-property:box-shadow,background-color,border-color;transition-timing-function:ease-out;will-change:box-shadow,background-color,border-color}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select):where(:focus-visible){background-color:var(--input-bg--focus);border-color:var(--input-border-color--focus);box-shadow:0 0 0 4px var(--input-focus-ring);color:var(--input-text-color--focus);outline:none}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select):where([disabled],[readonly]){background-color:var(--input-bg--disabled);border-color:var(--input-border-color--disabled);color:var(--input-text-color--disabled);opacity:.8}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select):where([disabled]){cursor:not-allowed}form :where(input[type]:not([type=radio]):not([type=checkbox]),textarea,select)::placeholder{color:var(--input-placeholder-color)}form :where(input[type=radio],input[type=checkbox]){accent-color:var(--theme-primary,currentColor);appearance:auto}form input.no-arrows[type=number]{-moz-appearance:textfield}form input.no-arrows[type=number]::-webkit-inner-spin-button,form input.no-arrows[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}form input[type=file]{overflow:hidden}form input[type=file]::-webkit-file-upload-button,form input[type=file]::file-selector-button{align-items:center;background:var(--input-file-button-bg);border:2px solid transparent;color:var(--input-file-button-color);display:inline-flex;filter:brightness(1);font-weight:400;justify-content:center;margin-block:-1rem;margin-inline-end:var(--spacing);margin-inline-start:-1rem;min-block-size:100%;padding:1rem;text-align:center;transition-duration:var(--transition-duration);transition-property:background-color;will-change:background-color}form input[type=file]:not(:disabled):not([readonly])::-webkit-file-upload-button,form input[type=file]:not(:disabled):not([readonly])::file-selector-button{cursor:pointer}form input[type=file]:where(:hover,:focus-visible)::-webkit-file-upload-button,form input[type=file]:where(:hover,:focus-visible)::file-selector-button{--input-file-button-bg:var(--input-file-button-bg--hover);--input-file-button-color:var(--input-file-button-color--hover)}form select{word-wrap:normal;-webkit-appearance:none;appearance:none;padding-block:var(--input-padding-block);padding-inline:var(--input-padding-inline)}form select:where(:not([multiple])){background-image:var(--select-arrow);background-position:right .75rem center;background-repeat:no-repeat;background-size:16px 12px;padding-inline-end:calc(1.75rem + var(--input-padding-inline))}form select:where([multiple]){overflow-x:hidden;overflow-y:scroll}form select:where([multiple]) option{align-items:center;display:flex;margin:.25rem -.5rem;min-block-size:1.5em;padding:0 .5rem}[dir=rtl]:where(:root,:host) form select{background-position:left .75rem center}@media (prefers-color-scheme:dark){:where(:root,:host):not([data-theme~=light]) form{--input-bg:hsl(210deg 8.8% 31.4%);--input-bg--disabled:hsl(210deg 10.3% 22.7%);--input-bg--focus:hsl(210deg 8.8% 31.4%);--input-border-color:hsl(210deg 10.3% 22.7%);--input-border-color--disabled:hsl(210deg 10.3% 22.7%);--input-border-color--focus:hsl(210deg 8.8% 31.4%);--input-focus-ring-opacity:1;--input-placeholder-color:hsl(210deg 16.7% 95.3%);--input-text-color:hsl(0deg 0% 100%);--input-text-color--disabled:hsl(210deg 14% 83.1%);--input-text-color--focus:hsl(0deg 0% 100%);--required-color:hsl(0deg 100% 76.5%);--select-arrow:url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3e%3cpath fill="none" stroke="hsl(0deg 0% 100%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/%3e%3c/svg%3e')}}}@layer buttons{:where(button,.button){--button-base:var(--button-base--default);--button-base--hover:var(--button-base--default--hover);--button-bg:var(--button-base);--button-bg--hover:var(--button-base--hover);--button-color:var(--button-color--default);--button-color--hover:var(--button-color--default);--button-border:var(--button-base);--button-border--hover:var(--button-base--hover);align-items:center;background:var(--button-bg);border:2px solid var(--button-border);border-radius:var(--button-radius);color:var(--button-color);display:inline-flex;font-family:var(--button-font-family);font-size:var(--button-font-size,1rem);font-weight:var(--button-font-weight,bold);gap:var(--button-gap,.5em);justify-content:center;min-block-size:var(--button-min-block-size);padding:var(--button-padding-block) var(--button-padding-inline);text-align:center;text-decoration:none;text-transform:var(--button-text-transform);transition-duration:var(--transition-duration);transition-property:color,background-color;will-change:color,background-color}:where(button,.button):where(:hover,:active,:focus-visible){--button-bg:var(--button-bg--hover);--button-color:var(--button-color--hover);--button-border:var(--button-border--hover)}:where(button,.button):where(:link){color:var(--button-color)}.primary:where(button,.button){--button-base:var(--theme-primary,--button-base--default);--button-base--hover:var(--theme-primary--hover,var(--theme-primary,--button-base--default));--button-color:var(--theme-primary--contrast-color,var(--button-color--default))}.secondary:where(button,.button){--button-base:var(--theme-secondary,--button-base--default);--button-base--hover:var(--theme-secondary--hover,var(--theme-secondary,--button-base--default));--button-color:var(--theme-secondary--contrast-color,var(--button-color--default))}.white:where(button,.button){--button-base:hsl(0deg 0% 100%);--button-base--hover:hsl(0deg 0% 90.2%);--button-color:hsl(210deg 10.3% 22.7%)}.black:where(button,.button){--button-base:hsl(0deg 0% 0%);--button-base--hover:hsl(210deg 10.3% 22.7%);--button-color:hsl(0deg 0% 100%)}.outline:where(button,.button):where(:not(:hover,:active,:focus-visible)){--button-bg:transparent;--button-border:var(--button-base);--button-color:var(--button-base)}.no-bg:where(button,.button){--button-color:var(--button-base);--button-color--hover:var(--button-base--hover);background-color:transparent;border-color:transparent}.inline:where(button,.button){background:none;border:0;border-radius:0;color:var(--link-color);display:inline;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;min-block-size:0;padding:0;text-align:inherit;vertical-align:baseline}.inline:where(button,.button):where(:hover,:active,:focus-visible){color:var(--link-color--hover)}.rounded:where(button,.button){--button-radius:5rem}:where(button,.button):is(:disabled,[disabled]){--button-base:var(--button-base--disabled);--button-color:var(--button-color--disabled);--button-border:var(--button-border--disabled);cursor:not-allowed;pointer-events:none}.outline:where(button,.button):is(:disabled,[disabled]){--button-bg:var(--button-base);--button-color:var(--button-color--disabled)}:where(button,.button) svg{block-size:1em;inline-size:1em}form :where(button,.button){min-block-size:var(--input-min-height,var(--input-min-block-size))}}@layer a11y{:where(.reader-only,.skip-link):not(:focus-visible):not(:active){word-wrap:normal!important;block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap}.skip-link{position:absolute;z-index:1}.skip-link:focus-visible{--link-color--hover:var(--skip-link-color);--focus-ring-color:transparent;--focus-ring-offset:0;background-color:var(--skip-link-bg);inset-block-start:5px;inset-inline-start:5px;padding:1rem;z-index:100000}}}