:root{--black:#000;--grey-dark:#555;--grey:#999;--grey-light:#ddd;--grey-lighter:#f2f2f2;--white:#fff;}*,
*::before,
*::after{box-sizing:border-box;}html{color-scheme:light;}body{margin:0;font:16px/1.5 system-ui, sans-serif;color:var(--black);background:var(--white);}a{color:var(--black);text-decoration:underline;text-underline-offset:.2em;}a:hover{text-decoration-thickness:2px;}h1{margin:0 0 1rem;font-size:1.3rem;line-height:1.3;color:var(--black);}h2{margin:0;font-size:1.1rem;color:var(--black);}.muted{color:var(--grey-dark);}button{font:inherit;font-weight:600;padding:.4rem .9rem;color:var(--white);background:var(--black);border:0;border-radius:.4rem;cursor:pointer;}button:hover{background:var(--grey-dark);}button.quiet{color:var(--black);background:var(--grey-lighter);}button.quiet:hover{background:var(--grey-light);}application-header{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;padding:.6rem 1rem;color:var(--white);background:var(--black);}application-header .brand{font-weight:800;font-size:1.15rem;color:var(--white);text-decoration:none;}application-header p{margin:0;color:var(--grey);font-size:.9rem;}offline-note{display:block;padding:.5rem 1rem;color:var(--black);background:var(--grey-light);}net-probe{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;animation:components-net-tick 1s linear infinite;}@keyframes components-net-tick{from{opacity:0;}to{opacity:0;}}main{display:block;max-width:40rem;margin:0 auto;padding:1rem;}#components{display:grid;gap:.5rem;margin:0;padding:0;list-style:none;}#components li{display:grid;gap:.15rem;padding:.7rem 1rem;background:var(--grey-lighter);border-radius:.5rem;}#components p{margin:0;color:var(--grey-dark);}md-editor-demo h2{margin:1rem 0 .3rem;font-size:1rem;}md-editor-demo pre{margin:0 0 1rem;white-space:pre-wrap;overflow-wrap:anywhere;}md-editor-demo form > md-editor{margin:0 0 1rem;}.modal-openers{display:flex;flex-wrap:wrap;gap:.5rem;}modal-demo input{font:inherit;padding:.35rem .6rem;color:var(--black);background:var(--grey-lighter);border:0;border-radius:.4rem;}@keyframes code-editor-mount{from{opacity:.999;}to{opacity:1;}}code-editor{display:block;border:0;border-radius:.5rem;background:var(--color-background-sunken, #f2f2f2);color:var(--color-text, #000);overflow:hidden;}code-editor:focus-within{outline:2px solid var(--color-accent, #555);outline-offset:-1px;}code-editor code-scroll{display:flex;align-items:stretch;overflow:auto;min-height:var(--code-editor-min-height, 8rem);font:.9rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;tab-size:4;}code-editor code-gutter{position:sticky;left:0;flex:none;box-sizing:border-box;min-width:3rem;padding:.6rem .6rem .6rem .4rem;text-align:right;white-space:pre;user-select:none;color:var(--color-text-muted, #555);background:var(--color-surface, #ddd);border-right:0;}code-editor article{flex:1 0 auto;box-sizing:border-box;min-width:calc(100% - 3rem);padding:.6rem .8rem;outline:none;white-space:pre;caret-color:var(--color-accent, #000);animation:code-editor-mount 100ms infinite;}code-editor .tok-comment{color:var(--color-text-muted, #555);font-style:italic;}code-editor .tok-string{color:var(--orange, #555);}code-editor .tok-number{color:var(--green-light, #555);}code-editor .tok-keyword{color:var(--color-special, #555);}code-editor .tok-function{color:var(--yellow, #000);}code-editor .tok-type{color:var(--green-dark, #555);}date-picker{display:grid;gap:.75rem;max-width:18rem;}date-field{position:relative;display:block;}date-picker input{width:100%;box-sizing:border-box;font:inherit;padding:.4rem .6rem;color:var(--color-text, #000);background:var(--color-background-sunken, #f2f2f2);border:0;border-radius:.4rem;}date-picker input:focus{outline:2px solid var(--color-accent, #555);outline-offset:-1px;}date-picker input[aria-invalid="true"]{outline:2px dashed var(--color-danger, #000);outline-offset:-2px;}date-picker picker-popup{display:none;position:absolute;top:100%;left:0;z-index:4;width:min(22rem, 90vw);margin-top:.25rem;outline:none;}date-field:focus-within picker-popup{display:block;}date-picker month-view{display:grid;gap:.5rem;padding:.5rem;background:var(--color-background, #fff);border:0;border-radius:.5rem;box-shadow:0 .5rem 1.5rem rgba(0, 0, 0, .25);}date-picker month-view header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}date-picker month-view h2{margin:0;font-size:1.1rem;color:var(--color-text-strong, #000);text-align:center;flex:1;text-transform:capitalize;}date-picker month-view ol{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:.2rem;margin:0;padding:0;list-style:none;}date-picker button{font:inherit;font-weight:600;padding:.4rem .9rem;color:var(--color-text, #000);background:transparent;border:0;border-radius:.4rem;cursor:pointer;}date-picker button:hover{background:var(--color-surface, #f2f2f2);}date-picker ol.weekdays li{padding:.3rem 0;font-size:.8rem;font-weight:600;color:var(--color-text-muted, #555);text-align:center;}date-picker ol.days li{min-height:2rem;padding:.3rem;border:0;border-radius:.3rem;text-align:right;background:var(--color-surface, #f2f2f2);cursor:pointer;}date-picker ol.days li:hover{background:var(--color-background-sunken, #ddd);}date-picker ol.days time{color:var(--color-text, #000);font-size:.95rem;}date-picker ol.days li.outside{background:var(--color-background, #fff);}date-picker ol.days li.outside time{color:var(--color-text-muted, #555);}date-picker ol.days li.today{outline:2px solid var(--color-accent, #000);outline-offset:-2px;}date-picker ol.days li.selected{background:var(--color-accent, #000);}date-picker ol.days li.selected time{color:var(--color-accent-text, #fff);}file-upload{display:block;color:var(--color-text, #000);}file-upload drop-zone{display:block;padding:1rem;text-align:center;border:2px dashed var(--color-border, #999);border-radius:.5rem;}file-upload.over drop-zone{border-color:var(--color-accent, #000);background:var(--color-surface, #f2f2f2);}file-upload drop-zone p{margin:0 0 .5rem;color:var(--color-text-muted, #555);}file-upload label.choose{display:inline-block;padding:.35rem .8rem;cursor:pointer;border:0;border-radius:.35rem;background:var(--color-surface, #f2f2f2);}file-upload label.choose:hover{filter:brightness(.93);}file-upload label.choose input{display:none;}file-upload upload-status{display:none;margin-top:.8rem;text-align:left;}file-upload.shown upload-status{display:block;}file-upload upload-status .name{overflow-wrap:anywhere;}file-upload upload-status .size{margin-left:.6rem;color:var(--color-text-muted, #555);}file-upload progress{display:block;width:100%;margin:.4rem 0;accent-color:var(--color-accent, #000);}file-upload.done .state{color:var(--color-success, #000);}file-upload.failed .state{color:var(--color-danger, #000);}file-upload upload-status .state{font-size:.9rem;}file-upload uploaded-list h2{margin:1rem 0 .3rem;font-size:1rem;}file-upload ul.uploaded{margin:0;padding-left:1.2rem;}file-upload ul.uploaded:empty::after{content:"Nothing yet.";margin-left:-1.2rem;color:var(--color-text-muted, #555);}@keyframes md-editor-mount{from{opacity:.999;}to{opacity:1;}}md-editor{position:relative;display:block;border:0;border-radius:.5rem;background:var(--color-background-sunken, #f2f2f2);color:var(--color-text, #000);}md-editor:focus-within{outline:2px solid var(--color-accent, #555);outline-offset:-1px;}md-editor nav{display:flex;flex-wrap:wrap;gap:.25rem;padding:.35rem;border-bottom:0;background:var(--color-surface, #ddd);border-radius:.5rem .5rem 0 0;}md-editor nav button{font:inherit;font-size:.9rem;font-weight:600;min-width:2rem;padding:.25rem .5rem;color:var(--color-text, #000);background:transparent;border:1px solid transparent;border-radius:.35rem;cursor:pointer;}md-editor nav button:hover{background:var(--color-background, #fff);}md-editor nav button.on{color:var(--color-accent-text, #fff);background:var(--color-accent, #000);}md-editor nav button.italic{font-style:italic;}md-editor nav button.code{font-family:ui-monospace, monospace;}md-editor nav button:disabled{opacity:.4;cursor:default;}md-editor.source nav button{opacity:.4;pointer-events:none;}md-editor nav input.pick{display:none;}md-editor ul.files{display:none;margin:0;padding:.35rem .8rem;list-style:none;border-bottom:0;font-size:.85rem;}md-editor ul.files:not(:empty){display:block;}md-editor ul.files li{display:flex;align-items:center;gap:.6rem;}md-editor ul.files li span{flex:0 1 12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}md-editor ul.files progress{flex:1;accent-color:var(--color-accent, #000);}md-editor ul.files li.error{color:var(--color-danger, #000);}md-editor link-form{display:none;gap:.35rem;padding:.35rem;border-bottom:0;background:var(--color-surface, #ddd);}md-editor.linking link-form{display:flex;}md-editor link-form input{flex:1;min-width:0;font:inherit;padding:.3rem .5rem;color:var(--color-text, #000);background:var(--color-background, #fff);border:0;border-radius:.35rem;}md-editor link-form button{font:inherit;padding:.3rem .7rem;color:var(--color-text, #000);background:transparent;border:0;border-radius:.35rem;cursor:pointer;}md-editor article{display:block;min-height:8rem;padding:.6rem .8rem;outline:none;overflow-wrap:anywhere;animation:md-editor-mount 100ms infinite;}md-editor.source article{display:none;}md-editor .placeholder{display:none;position:absolute;left:.8rem;margin-top:.6rem;pointer-events:none;color:var(--color-text-muted, #555);}md-editor.empty:not(.source) .placeholder{display:block;}md-editor article > :first-child{margin-top:0;}md-editor article > :last-child{margin-bottom:0;}md-editor article h1, md-editor article h2, md-editor article h3, md-editor article h4, md-editor article h5, md-editor article h6{margin:1rem 0 .5rem;line-height:1.25;color:var(--color-text-strong, #000);}md-editor article h1{font-size:1.6rem;}md-editor article h2{font-size:1.35rem;}md-editor article h3{font-size:1.15rem;}md-editor article h4, md-editor article h5, md-editor article h6{font-size:1rem;}md-editor article p{margin:0 0 .7rem;}md-editor article ul, md-editor article ol{margin:0 0 .7rem;padding-left:1.5rem;}md-editor article img{display:block;max-width:100%;height:auto;margin:.3rem 0;border-radius:.3rem;}md-editor article strong{color:var(--color-text-strong, #000);}md-editor article a{color:var(--color-accent, #000);text-decoration:underline;}md-editor article code{padding:0 .25rem;font-family:ui-monospace, monospace;font-size:.9em;background:var(--color-surface, #ddd);border-radius:.25rem;}md-editor article pre{margin:0 0 .7rem;padding:.5rem .7rem;font-family:ui-monospace, monospace;font-size:.9rem;white-space:pre-wrap;background:var(--color-surface, #ddd);border:0;border-radius:.4rem;}md-editor footer{display:flex;justify-content:flex-end;padding:.3rem .5rem;border-top:0;}md-editor footer button{font:inherit;font-size:.85rem;padding:.2rem .6rem;color:var(--color-text-muted, #555);background:transparent;border:0;border-radius:.35rem;cursor:pointer;}md-editor footer button:hover{color:var(--color-text, #000);}md-editor textarea{display:none;box-sizing:border-box;width:100%;min-height:8rem;padding:.6rem .8rem;font:.9rem/1.5 ui-monospace, monospace;color:var(--color-text, #000);background:transparent;border:0;outline:none;resize:vertical;}md-editor.source textarea{display:block;}html:has(modal-dialog > dialog[open]){overflow:hidden;}modal-dialog{display:contents;}modal-dialog > dialog{box-sizing:border-box;width:min(34rem, calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);margin:auto;padding:0;color:var(--color-text, #000);background:var(--color-background, #fff);border:0;border-radius:.6rem;overscroll-behavior:contain;}modal-dialog > dialog[open]{display:flex;flex-direction:column;}modal-dialog > dialog::backdrop{background:var(--color-background-sunken, #555);opacity:.75;}modal-dialog > dialog:focus{outline:none;}modal-dialog header{display:flex;align-items:center;gap:.5rem;padding:.6rem .6rem .6rem 1rem;border-bottom:0;}modal-dialog h2{flex:1;margin:0;font-size:1.1rem;line-height:1.3;color:var(--color-text-strong, #000);overflow-wrap:anywhere;}modal-dialog button{font:inherit;font-weight:600;padding:.45rem .9rem;color:var(--color-text, #000);background:transparent;border:0;border-radius:.4rem;cursor:pointer;}modal-dialog button:hover{background:var(--color-surface, #f2f2f2);}modal-dialog button:focus-visible{outline:2px solid var(--color-accent, #555);outline-offset:1px;}modal-dialog button.modal-x{flex:none;width:2.4rem;height:2.4rem;padding:0;font-size:1.5rem;line-height:1;color:var(--color-text-muted, #555);}modal-dialog button.modal-x:hover{color:var(--color-text-strong, #000);}modal-dialog modal-body{display:block;flex:1;min-height:0;overflow:auto;padding:1rem;overflow-wrap:anywhere;}modal-dialog modal-body > :first-child{margin-top:0;}modal-dialog modal-body > :last-child:not(footer){margin-bottom:0;}modal-dialog modal-body footer{position:sticky;bottom:-1rem;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin:1rem -1rem -1rem;padding:.75rem 1rem;background:var(--color-background-sunken, #f2f2f2);border-top:0;}modal-dialog modal-body footer button:last-child{color:var(--color-accent-text, #fff);background:var(--color-accent, #000);}modal-dialog modal-body footer button:last-child:hover{filter:brightness(1.1);}@keyframes month-view-mount{from{opacity:.999;}to{opacity:1;}}month-view{display:grid;gap:.5rem;animation:month-view-mount 100ms infinite;}month-view header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}month-view h2{margin:0;font-size:1.1rem;color:var(--color-text-strong, #000);text-align:center;flex:1;text-transform:capitalize;}month-view ol{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:.25rem;margin:0;padding:0;list-style:none;}month-view button{font:inherit;font-weight:600;padding:.4rem .9rem;color:var(--color-text, #000);background:transparent;border:0;border-radius:.4rem;cursor:pointer;}month-view button:hover{background:var(--color-surface, #f2f2f2);}#month-weekdays li{padding:.3rem 0;font-size:.8rem;font-weight:600;color:var(--color-text-muted, #555);text-align:center;}#month-days li{min-height:3rem;padding:.3rem;border:0;border-radius:.3rem;text-align:right;background:var(--color-surface, #f2f2f2);}#month-days time{color:var(--color-text, #000);font-size:.95rem;}#month-days li.outside{background:var(--color-background, #fff);}#month-days li.outside time{color:var(--color-text-muted, #555);}#month-days li.today{outline:2px solid var(--color-accent, #000);outline-offset:-2px;}#month-days li.today time{color:var(--color-accent, #000);font-weight:800;}pagination{display:block;}pagination ol{display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0;list-style:none;}pagination button{font:inherit;font-weight:600;min-width:2.2rem;padding:.35rem .6rem;color:var(--color-text, #000);background:transparent;border:0;border-radius:.4rem;cursor:pointer;}pagination button:hover{background:var(--color-surface, #f2f2f2);}pagination li.current button{color:var(--color-accent-text, #fff);background:var(--color-accent, #000);border:0;}pagination li.gap button{color:var(--color-text-muted, #555);background:transparent;border:0;min-width:0;padding:.35rem .2rem;cursor:default;pointer-events:none;}range-picker{position:relative;display:block;max-width:18rem;}range-picker input{width:100%;box-sizing:border-box;font:inherit;padding:.4rem .6rem;color:var(--color-text, #000);background:var(--color-background-sunken, #f2f2f2);border:0;border-radius:.4rem;}range-picker input:focus{outline:2px solid var(--color-accent, #555);outline-offset:-1px;}range-picker input[aria-invalid="true"]{outline:2px dashed var(--color-danger, #000);outline-offset:-2px;}range-picker picker-popup{display:none;position:absolute;top:100%;left:0;z-index:4;width:min(22rem, 90vw);margin-top:.25rem;outline:none;}range-picker:focus-within picker-popup{display:block;}range-picker month-view{display:grid;gap:.5rem;padding:.5rem;background:var(--color-background, #fff);border:0;border-radius:.5rem;box-shadow:0 .5rem 1.5rem rgba(0, 0, 0, .25);}range-picker month-view header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}range-picker month-view h2{margin:0;font-size:1.1rem;color:var(--color-text-strong, #000);text-align:center;flex:1;text-transform:capitalize;}range-picker month-view ol{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:.2rem;margin:0;padding:0;list-style:none;}range-picker button{font:inherit;font-weight:600;padding:.4rem .9rem;color:var(--color-text, #000);background:transparent;border:0;border-radius:.4rem;cursor:pointer;}range-picker button:hover{background:var(--color-surface, #f2f2f2);}range-picker ol.weekdays li{padding:.3rem 0;font-size:.8rem;font-weight:600;color:var(--color-text-muted, #555);text-align:center;}range-picker ol.days li{min-height:2rem;padding:.3rem;border:0;border-radius:.3rem;text-align:right;background:var(--color-surface, #f2f2f2);cursor:pointer;}range-picker ol.days li:hover{background:var(--color-background-sunken, #ddd);}range-picker ol.days time{color:var(--color-text, #000);font-size:.95rem;}range-picker ol.days li.outside{background:var(--color-background, #fff);}range-picker ol.days li.outside time{color:var(--color-text-muted, #555);}range-picker ol.days li.today{outline:2px solid var(--color-accent, #000);outline-offset:-2px;}range-picker ol.days li.between{background:var(--color-background-sunken, #ddd);}range-picker ol.days li.selected{background:var(--color-accent, #000);}range-picker ol.days li.selected time{color:var(--color-accent-text, #fff);}@media (min-width: 40rem){#month-days li{min-height:5rem;}}