@layer config{:root{--gutter: clamp(1rem, 2.5vmax, 1.5rem);--stack: clamp(1.25ex, 2.5vmax, 1.75ex);--paragraph-indent: 3ch;--line-length: 66ch;--page-padding-inline: calc((100vi - min(var(--line-length), 80vi))/2) ;--page-padding-block: calc(var(--stack) * 8);--landmark-hr-size: 1ex;--landmark-hr-margin-block: calc(var(--stack) * 8);--hr-size: .5ex;--hr-margin-block: calc(var(--stack) * 4);--border-image-source: gray, color-mix(in hsl, gray 40%, transparent), color-mix(in hsl, gray 40%, transparent), gray;--underline: solid;--focus-outline: 2px solid crimson;--focus-outline-offset: 2px;--font: "Georgia", serif;--font-variant: "Verdana", system-ui, sans-serif;--font-mono: ui-monospace, sfmono-regular, sf mono, menlo, consolas, liberation mono, monospace;--font-size: clamp(95%, 80% + .5vi, 150%);--leading: 1.475;--pt-double-canon: clamp(3em, 2.5179em + 2.4107vi, 4.666em);--pt-canon: clamp(2.5em, 2.2321em + 1.9643vi, 3.999em);--pt-double-great-primer: clamp(2em, 1.7143em + 1.4286vi, 2.999em);--pt-double-pica: clamp(1.65em, 1.3571em + .7143vi, 2em);--pt-paragon: clamp(1.35em, 1.2054em + .5357vi, 1.666em);--pt-english: 1.166em;--pt-pica: 1em;--pt-small-pica: .916em;--pt-long-primer: .833em;--pt-bourgeois: .75em;font-family:var(--font);font-size:var(--font-size);line-height:var(--leading);color-scheme:dark light;accent-color:crimson}[data-theme=verdana]{--landmark-hr-size: 2px;--hr-size: 1px;--landmark-hr-margin-block: calc(var(--stack) * 2);--hr-margin-block: calc(var(--stack) * 1.5);--underline: wavy;--font: "Verdana", system-ui, sans-serif;--font-variant: var(--font);--font-size: clamp(75%, 65% + .5vi, 100%);--leading: 1.45}}@layer resets{*,:before,:after{font-feature-settings:"kern";font-kerning:normal;box-sizing:border-box;@media (prefers-color-scheme: dark){-moz-osx-font-smoothing:grayscale!important;-webkit-font-smoothing:antialiased!important}}*{margin:0;padding:0}input:is([type=checkbox],[type=radio]),select,label,button{cursor:pointer}input,select,textarea,button{font:inherit}img,svg,video{max-inline-size:100%;block-size:auto}svg{fill:currentcolor}@media (forced-colors: active){button{border:1px solid}}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}}@layer elements{::-moz-selection{color:#fff;background:#dc143c}::selection{color:#fff;background:#dc143c}:where(:focus-visible){outline:var(--focus-outline);outline-offset:var(--focus-outline-offset)}:disabled{border-style:groove;cursor:not-allowed}[readonly]{border-style:dashed;background:transparent}:where(input:not([type=radio],[type=checkbox],[type=file]),textarea,select){border:1px inset;border-radius:0;background:color-mix(in hsl,canvasText 5%,transparent)}:where(kbd,fieldset,dd,nav a,figure img){border:1px solid}@media (forced-colors: none){:where(kbd,fieldset,dd,nav a,figure img){border-image-source:linear-gradient(-6deg,var(--border-image-source))}}:where(th,td){border-block-end:1px solid}@media (forced-colors: none){:where(th,td){border-image-source:linear-gradient(to right,gray,color-mix(in hsl,gray 60%,transparent))}}:where(pre){border-inline-start:var(--hr-size) solid}@media (forced-colors: none){:where(pre){border-image-source:linear-gradient(to bottom,crimson,transparent)}}:where(hr){block-size:0;margin-block:var(--hr-margin-block);border:0;border-block-end:1px solid}@media (forced-colors: none){:where(hr){border-image-source:linear-gradient(to right,currentcolor,transparent)}}:where(header,main)+hr{border-block-end-width:var(--landmark-hr-size)}@media (forced-colors: none){:where(header,main)+hr{border-image-source:linear-gradient(to right,transparent,currentcolor,transparent)}}@media (forced-colors: none){:where(kbd,fieldset,dd,nav a,figure img,th,td,hr,pre){border-image-slice:1}}@media (forced-colors: none) and (any-hover: hover){:where(nav a:hover){border-image-source:linear-gradient(6deg,var(--border-image-source))}}:where(section+hr){border-block-end-width:var(--hr-size)}:where(header,section,main)+hr{margin-block:var(--landmark-hr-margin-block)}:where(select,label,button,summary){cursor:pointer}body{padding-block:var(--page-padding-block)}:where(header,main,footer){padding-inline:var(--page-padding-inline)}:where(button,dd,th,td,kbd,select,input:not([type=radio],[type=checkbox]),textarea,nav a){padding-block:calc(var(--stack) / 6);padding-inline:calc(var(--gutter) / 3)}:where(th,td,caption,figcaption,pre code){padding-inline:calc(var(--gutter) / 2)}:where(th,td,caption,figcaption){padding-block:calc(var(--stack) / 2)}:where(pre code){padding-block:var(--stack)}:where(figure,dl,blockquote){padding-block-start:calc(var(--stack) / 2.5)}:where(details[open]){padding-block-end:var(--stack)}:where(fieldset){padding-block:0 var(--stack);padding-inline:calc(var(--gutter) / 2)}:where(button){padding-inline:var(--gutter)}:where(*:not(p)+p,figure,form,fieldset,pre,blockquote,ul,ol,dl,details,form li+li,nav){margin-block-start:var(--stack)}:where(h1,h2,h3,h4,h5,h6,header nav){margin-block-start:calc(var(--stack) * 1.5)}:where(h1,h2,h3,h4,h5,h6)+*:not(h1,h2,h3,h4,h5,h6){margin-block-start:calc(var(--stack) / 2)}:where(li ol:first-of-type,li ul:first-of-type,nav ul){margin-block-start:0}:where(li li){margin-inline-start:2ch}:where(input,textarea,select)~*{margin-block-start:calc(var(--stack) / 4)}:where(figure img){display:block;margin-inline:auto}:where(form ol,form ul){list-style:none}:where(p:not(:first-of-type)){text-indent:var(--paragraph-indent)}:where(h1,h2,h3,h4,h5,h6,pre)+p{text-indent:0}:where(h1,h2,h3,h4,h5,h6){line-height:1.1;letter-spacing:-.02ch;text-wrap:pretty}:where(header h1~p){line-height:1.25}:where(h1,h2,h3,h4){overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}:where(h1){font-size:var(--pt-double-canon)}:where(main h1){font-size:var(--pt-canon)}:where(h2){font-size:var(--pt-double-great-primer)}:where(h3,header h1~p){font-size:var(--pt-double-pica)}:where(h4,blockquote p,big){font-size:var(--pt-paragon)}:where(h5){font-size:var(--pt-english)}:where(h6,legend){font-size:var(--pt-pica)}:where(code,label,th,td){font-size:var(--pt-long-primer)}:where(small,kbd,figcaption,caption,sup,sub,input~*,textarea~*,select~*){font-size:var(--pt-bourgeois)}:where(small,kbd,figcaption,label,legend,summary,caption,sup,sub,input~*,textarea~*,select~*,nav a){font-family:var(--font-variant);letter-spacing:0}:where(code){font-family:var(--font-mono)}:where(button,select,input,textarea,summary>*){font:inherit}:where(nav a){text-decoration:none;&[aria-current]{border-image-source:unset}}:where(summary>*){display:inline}:where(legend,summary,button){font-weight:700}:where(sup,sub){line-height:1}:where(figcaption,caption){text-align:center}:where(th){text-align:start}:where(th,td){vertical-align:baseline}:where(figure){overflow-x:auto}:where(img){block-size:auto;max-inline-size:100%}:where(table){border-spacing:0;caption-side:bottom}:where(tr>*:first-child){white-space:nowrap}:where(kbd){padding-block:1px 2px;padding-inline:.5ch;letter-spacing:.1ch;text-transform:uppercase}:where(code){text-decoration:underline;text-decoration-style:dashed;text-decoration-color:#dc143c;text-underline-offset:.35ex}:where(pre){display:block;position:relative;word-spacing:normal;white-space:pre-wrap;word-wrap:break-word;word-break:normal;color:#fff;background:#000}:where(pre):after{position:absolute;inset-inline:0;z-index:0;background:linear-gradient(to bottom,transparent,black);pointer-events:none;content:"";inset-block-end:0;block-size:var(--stack)}:where(pre code){display:block;text-decoration:none;overflow:auto;max-block-size:60vh;color-scheme:dark}:where(dl){display:grid;align-items:baseline;grid-template-columns:auto minmax(75%,1fr);gap:calc(var(--gutter) / 2)}:where(dd){block-size:100%}:where(input:not([type=checkbox],[type=radio]),select,textarea){display:block;inline-size:100%}:where(input[type=radio],input[type=checkbox]){inline-size:1.5ex;block-size:1.5ex;vertical-align:baseline}:where(input[type=file]){padding-inline:0;border:0}::-webkit-file-upload-button{font:inherit;cursor:pointer;-webkit-appearance:auto;appearance:auto}:where(input[type=checkbox],input[type=radio]){vertical-align:middle}:where(select){-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:.01px;text-overflow:""}:where(a){color:inherit;text-decoration-style:var(--underline);text-underline-offset:.3ex}:where(abbr){cursor:help}:where(abbr,dt){text-decoration:underline;text-decoration-style:dotted;text-underline-offset:.3ex}:where(big){display:inline}:where(blockquote q):before{position:absolute;margin-inline-start:-1ex}:where(blockquote q q):before{position:static;margin-inline-start:unset}:where(blockquote footer){padding-inline:0}:where(input:required+mark){display:none;color:inherit;background:transparent}:where(input:required:invalid+mark){display:block}:where(nav ul){display:flex;gap:calc(var(--gutter) / 2);flex-wrap:wrap;list-style:none}[data-theme=verdana] :where(h1,h2,h3,h4,h5,h6,header h1~p,blockquote p){font-size:inherit;line-height:inherit;letter-spacing:0}[data-theme=verdana] :where(h1,h2,h3,h4,h5,h6):before{position:absolute;font-weight:400;opacity:50%;transform:translate(-125%)}[data-theme=verdana] :where(h1):before{content:"H1"}[data-theme=verdana] :where(h2):before{content:"H2"}[data-theme=verdana] :where(h3):before{content:"H3"}[data-theme=verdana] :where(h4):before{content:"H4"}[data-theme=verdana] :where(h5):before{content:"H5"}[data-theme=verdana] :where(h6):before{content:"H6"}}@layer config,resets,elements,components,docs,utilities;@layer docs{.doc-main{padding:0;overflow-x:clip;+hr{margin-block-start:0;border-block-end-width:0}}body:has(.doc-header,.doc-main){padding-block-start:0}.doc-header{display:flex;margin:0;padding-block:calc(var(--stack) * 2);padding-inline:10dvi;color:#fff;background-image:url(https://mikemai.net/mcss/img/mc-hero-edited.jpg);background-position:top center;background-size:cover;justify-content:center;align-items:flex-start;gap:var(--gutter);>*:first-child{font:inherit;font-weight:700}>*{margin:0}}.doc-header p a{text-decoration:none;@media (any-hover: hover){&:hover{text-decoration:underline}}}.doc-header+hr{margin-block-start:0}.doc-header+main>*:first-child{margin-block-start:0}.doc-hero{--_columns: repeat(2, minmax(61.8dvi, 1fr));--_template: "text text" "kitchen-sink1 kitchen-sink2";--_padding-inline: var(--page-padding-inline) 10dvi;display:grid;margin:0;padding-block:var(--landmark-hr-margin-block);padding-inline:var(--_padding-inline);background-color:color-mix(in hsl,canvasText 4%,transparent);align-content:start;grid-template-columns:var(--_columns);grid-template-areas:var(--_template);list-style:none;gap:var(--gutter);row-gap:calc(var(--stack) * 2);>li{display:flex;flex-direction:column;gap:var(--stack);grid-area:text;min-inline-size:0;&:first-child{max-inline-size:100dvi;padding-inline-end:calc(var(--page-padding-inline) * 2)}&:nth-child(2){grid-area:kitchen-sink1}&:nth-child(3){grid-area:kitchen-sink2}&:not(:first-child){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:grayscale(100%);*:not(.mc-switch__control){font-family:Flow Block,system-ui,sans-serif!important;font-weight:400!important;font-style:normal!important;word-break:break-all!important}}>*{margin:0}}@media (width >= 66rem) and (orientation: landscape){--_columns: repeat(3, minmax(40ch, 1fr));--_template: "text kitchen-sink1 kitchen-sink2";--_padding-inline: 10dvi;align-content:center;min-block-size:100dvb;>li{&:first-child{align-self:center;max-inline-size:unset;padding-inline-end:unset}}}}.doc-section{padding-inline:var(--page-padding-inline);&:first-of-type{margin-block-start:var(--landmark-hr-margin-block)}&:first-of-type>*:first-child{margin-block-start:0}}.doc-side-by-side{display:flex;flex-wrap:wrap;gap:calc(var(--gutter) * 1.5);row-gap:var(--stack);>*{flex:1 1 25ch}}.doc-demo-inline{display:flex;flex-wrap:wrap;gap:calc(var(--gutter) / 2);row-gap:var(--stack);>*{margin:0}}.doc-demo-stack{display:flex;flex-direction:column;gap:var(--stack);>*{margin:0}}.doc-component-example{margin-block-start:var(--stack);>*:not(dialog){margin:0}}:where(dt){word-break:break-word;-webkit-hyphens:auto;hyphens:auto}}@layer components;@layer utilities{.u-skip-link{position:absolute;inset-block-start:1ex;inset-inline-start:1ex;padding:1ex;background-color:canvas}.u-margin-none{margin:0}.u-visually-hidden:not(:focus,:active),.u-skip-link:not(:focus){position:absolute;white-space:nowrap;overflow:hidden;clip-path:inset(50%);inline-size:1px;block-size:1px}.u-word-break-all{word-break:break-all}}@layer config{:root{--transition: .2s ease-in-out}}