docstyle.css

:root{color-scheme:light dark;--back: light-dark(hsl(220deg 2% 85%), hsl(220deg 2% 15%));--color: light-dark(hsl(220deg 0 10%), hsl(220deg 0 90%));--success-hue: 80deg;--success-back: hsl(var(--success-hue) 90% 75%);--success-line: hsl(var(--success-hue) 90% 40%);--warning-hue: 40deg;--warning-back: hsl(var(--warning-hue) 90% 75%);--warning-line: hsl(var(--warning-hue) 90% 40%);--warning-color: black;--error-hue: 0deg;--error-back: hsl(var(--error-hue) 90% 75%);--error-line: hsl(var(--error-hue) 90% 40%);--error-color: color;--focus: hsl(220, 50%, 50%);--text-spacing: 0.5rem;--transition: 0.3s ease}html,body{box-sizing:border-box;margin:0;padding:0;font-family:arial,ui-sans-serif,sans-serif;font-size:1rem;line-height:1.2rem;color:var(--color);background-color:var(--back)}*,*::before,*::after{box-sizing:inherit}img{max-width:600px;height:auto}a,a:any-link{color:inherit;text-decoration:underline;cursor:pointer}svg{color:currentcolor}svg.button{width:2em;height:2em}svg.button .object{fill:hsl(220,80%,30%);fill-opacity:1}svg.button .connect{fill:#0c0;fill-opacity:1}svg.icon{user-select:none}h1{font-size:2em}label,input,input+span,input::placeholder,select,output,button{display:inline-block;font-size:inherit;margin:0;border:1px solid rgba(0,0,0,0);padding:.1em .2em;color:currentcolor}input[type=color]{padding:0;border:0}input::placeholder{padding-top:.4em;font-size:.8em}label{cursor:pointer;height:1.6em}label>img,label>.icon{width:1em !important;height:1em !important;margin:0 !important}input,select,button{border-color:var(--color)}input,select{width:22ch;border-radius:.2em}select{padding-left:0}select:invalid,input:invalid{border-color:#f55}input[type=checkbox],input[type=radio]{width:2ch;vertical-align:baseline}dialog::backdrop{background-color:rgba(200,200,200,.7)}dialog{position:relative;padding:1rem;background-color:canvas;border:0}dialog .u-close{position:absolute;top:1rem;right:1rem;height:1.6rem;width:1.6rem;background-color:red;background-size:1.6rem 1.6rem;background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M12 12L36 36M36 12L12 36' stroke='white' stroke-width='8' stroke-linecap='round' /></svg>");z-index:1 !important;user-select:none;cursor:pointer}dialog::before{content:"";position:absolute;top:0;right:0;width:2rem;height:2rem;z-index:-1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M0 0h48v48h-16v-32h-32z' fill='red' /></svg>")}.warning{border:2px solid var(--warning-line);background-color:var(--warning-back);color:var(--warning-color)}.error{border:2px solid var(--error-line);background-color:var(--error-back);color:var(--error-color)}.invalid{border:2px solid #f11 !important;background-color:#fcc !important;color:var(--color)}.valid{border:2px solid #0c0 !important;background-color:#cfc !important;color:var(--color)}@media print{.noprint{display:none !important}}:root{--sidebar-width: 14em;--layout-gap: 1em;--layout-padding: 0.5em;--header-back: var (--back);--header-color: var (--color);--main-back: var (--back);--main-color: var(--color);--main-width: 56em;--navbar-back: hsl(220, 80%, 30%);--navbar-color: white;--navbar-padding: var(--layout-padding);--footer-back: var(--back);--footer-color: var(--color);--menu-back: light-dark(white, black);--menu-color: light-dark(black, white);--menu-top: 0;--menu-width: 14em;--menu-padding: var(--layout-padding);--dropshadow: rgb(0 0 0 / 40%) 4px 4px 12px 0}body.sitelayout{display:grid;gap:0;width:var(--main-width);margin:0 auto;padding:1em 0 0 0;grid-template-columns:1fr;grid-template-areas:"header" "navbar" "main" "sidebar" "footer"}@media(71em <= width){body.sitelayout:has(>.sidebar){width:71em;grid-template-columns:1fr auto;grid-template-areas:"header header" "navbar navbar" "main sidebar" "footer footer"}}body.sitelayout>header{grid-area:header;margin-bottom:var(--layout-gap)}body.sitelayout>.navbar{grid-area:navbar;margin-bottom:var(--layout-gap)}body.sitelayout>main{grid-area:main}body.sitelayout>.sidebar{grid-area:sidebar;margin-left:var(--layout-gap)}body.sitelayout>footer{grid-area:footer;margin-top:var(--layout-gap)}body.sitelayout.fillscreen{width:100vw;height:100vh;grid-template-rows:auto auto 1fr auto}body.sitelayout header{display:flex;padding:var(--layout-padding);background-color:var(--header-back);color:var(--header-color)}@media print{body.sitelayout header{display:none !important}}body.sitelayout header>.icon{width:2rem;height:2rem}body.sitelayout header>h1{margin:0;padding:0}body.sitelayout header>*{align-self:center;display:inline-block}body.sitelayout header>*:not(:first-child){margin-left:var(--layout-padding)}body.sitelayout header>.logo{font-size:160%;font-weight:bold}body.sitelayout header a{text-decoration:none;width:12ch;text-align:center;padding:.2ch 1ch;transition:box-shadow .3s ease-in-out}body.sitelayout header a:hover{box-shadow:var(--dropshadow)}body.sitelayout .navbar{display:flex;flex-flow:row nowrap;padding:var(--layout-padding);background-color:var(--navbar-back);color:var(--navbar-color)}body.sitelayout .navbar>*{align-self:center}body.sitelayout .navbar>.gap{flex-grow:2}body.sitelayout .navbar>a{text-decoration:none;font-size:1.25em;min-width:2em;padding:0 var(--layout-padding)}body.sitelayout .navbar>a:hover{border-color:var(--focus);background-color:var(--focus)}body.sitelayout .navbar>button,body.sitelayout .navbar>img,body.sitelayout .navbar>svg{padding:0;min-width:1.25em !important;width:1.25em !important;height:1.25em !important}body.sitelayout .navbar>*:not(:first-child){margin-left:var(--layout-padding)}body.sitelayout .navbar>button:hover{box-shadow:var(--dropshadow)}@media print{body.sitelayout .navbar{display:none}}body.sitelayout .sidebar{color:var(--main-color);background-color:var(--main-back);padding:var(--layout-padding);width:var(--sidebar-width)}@media print{body.sitelayout .sidebar{display:none !important}}body.sitelayout main{background-color:var(--main-back);color:var(--main-color);padding:var(--layout-padding) 0;container-name:main;container-type:inline-size}body.sitelayout footer{background-color:var(--main-back);color:var(--main-color);padding:var(--layout-padding)}.menu{position:absolute;display:block;border:1px solid var(--menu-color);background-color:var(--menu-back);color:var(--menu-color);width:var(--menu-width);min-height:360px;z-index:1;top:6.2rem;left:0;transition:all var(--transition);padding:var(--menu-padding);margin:0;transform:translateX(calc(0px - var(--menu-width)))}.menu:popover-open{transform:translateX(0)}.menu::backdrop{background-color:rgba(200,200,200,.7)}.menu a,.menu a:hover{text-decoration:none}@media print{.menu{display:none}}@media(width > 1200px){.menu{transform:translateX(0)}:root:has(.menu){padding-left:var(--menu-width);transition:padding-left var(--transition)}button[popovertarget]{display:none}}:root{--card-width: 280px;--card-gap: 16px;--card-height: 320px;--card-back: light-dark(white, black);--card-color: var(--main-color);--card-head: hsl(220deg 20% 80%);--card-head-active: hsl(220, 80%, 80%);--card-border: none;--card-padding: 0.5em;--card-image-size: 120px;--card-radius: 1em}.card-container{display:flex;flex-wrap:wrap;width:100%;gap:var(--card-gap);margin:0 auto}.card-container.horizontal{--card-width: 100%;--card-height: 7.2rem}.card-container.horizontal>.card{grid-template:"header main" 1fr "header footer" auto/max-content auto}.card-container.horizontal>.card>svg:first-child,.card-container.horizontal>.card>img:first-child{width:var(--card-image-size);height:100%}.card-container.col280{width:1168px}@container main (width < 1168px){.card-container.col280{width:872px}}@container main (width < 872px){.card-container.col280{width:576px}}@container main (width < 560px){.card-container.col280{width:280px}}.card-container.col365{--card-width: 365px;--card-gap: 10px;width:1490px}@container main (width <=1490px){.card-container.col365{width:1115px}}@container main (width < 1115px){.card-container.col365{width:740px}}@container main (width < 730px){.card-container.col365{width:365px}}.card{position:relative;width:var(--card-width);height:var(--card-height);display:grid;grid-template:"header" auto "main" 1fr "footer" auto/auto;gap:0;margin:0;padding:0;page-break-inside:avoid;overflow:hidden;background-color:var(--card-back);border:var(--card-border);border-radius:var(--card-radius)}@media print{.card{border:1px solid var(--color)}}.card.wide{width:calc(var(--card-width)*2 + var(--card-gap))}.card.small{width:calc((var(--card-width) - var(--card-gap))/2);height:calc((var(--card-height) - var(--card-gap))/2)}.card.shadow{box-shadow:var(--dropshadow)}.card>svg:first-child,.card>img:first-child{grid-area:header;width:100%;height:var(--card-image-size);object-fit:cover}.card>svg:first-child.icon,.card>img:first-child.icon{width:2.75rem;height:2.75rem}.card .header{grid-area:header;background-color:var(--card-head);padding:var(--card-padding);min-height:2.75em;max-height:4rem}.card .header h3,.card .header h4{display:inline-block;margin:0}.card .header>svg:first-child,.card .header>img:first-child{float:left;height:2.75rem;aspect-ratio:1/1;margin-right:var(--card-padding)}.card .main,.card .body{grid-area:main;flex:1;padding:var(--card-padding)}.card .footer{grid-area:footer;height:auto;width:100%;padding:var(--card-padding);border-top:1px solid rgba(0,0,0,.125);background-color:inherit;text-align:right}.card .footer button:not(:first-child){margin-left:var(--text-spacing)}.card.autolink h3>a::before{position:absolute;top:0;left:0;height:100%;width:100%;content:""}.imgcard{position:relative;margin:.5rem .5rem .5rem 0;width:100%;max-width:100%;background-color:var(--card-back);page-break-inside:avoid;padding:.25rem .25rem 0 9.85rem;min-height:7.2rem}.imgcard>h3{margin-top:0}.imgcard img{position:absolute;top:0;left:0;height:auto;width:9.6rem;max-height:7.2rem}:root{--code-back: rgb(245 245 230);--code-text: black;--code-border: 1px solid var(--code-text);--code-radius: var(--text-spacing)}pre:has(>code){display:block;padding:0;font-size:1rem;border:var(--code-border);border-left:var(--code-radius) solid #4060a0;border-radius:var(--code-radius);background-color:var(--code-back);background-image:linear-gradient(transparent 50%, rgba(0, 0, 0, 0.06) 50%);background-size:auto 2.4em;background-origin:content-box;background-attachment:local}pre:has(>code):not(:first-child){margin-top:calc(var(--text-spacing)*3)}pre:has(>code) code{display:block;color:#000;font-size:1rem;line-height:1.2;padding-left:.2em}pre:has(>code) code .comment,pre:has(>code) code .block-comment{color:#7d8b99}pre:has(>code) code .property,pre:has(>code) code .tag,pre:has(>code) code .boolean,pre:has(>code) code .number,pre:has(>code) code .function-name,pre:has(>code) code .constant,pre:has(>code) code .symbol{color:#c92c2c}pre:has(>code) code .selector,pre:has(>code) code .attr-name,pre:has(>code) code .string,pre:has(>code) code .char,pre:has(>code) code .function,pre:has(>code) code .builtin{color:#2f9c0a}pre:has(>code) code .attr-value,pre:has(>code) code .keyword,pre:has(>code) code .class-name{color:#1990b8}@media print{pre:has(>code) code{border:1px solid var(--code-text)}}p>code{font-size:1rem;padding:0 var(--text-spacing);background-color:var(--code-back);color:#000}:root{--grid-width: 20ch;--grid-gap: 1ch}.card.active .border{border-color:#039}.card.active .band::-webkit-slider-thumb{border-color:#039 rgba(0,0,0,0)}.card.active>.header{background-color:var(--card-head-active)}.card img.active,.card svg.active{background-color:#32cd32}.card>hr{background-color:rgba(0,0,0,.125);border:0;height:1px;margin:0;padding:0}.card .icon{width:2.6rem;height:2.6rem;vertical-align:top}button,.button{display:inline-block;min-width:6.5ch;padding:2px 4px;border-radius:4px;border-color:hsl(220,80%,30%);background-color:hsl(220,80%,30%);color:#fff;cursor:pointer;user-select:none}button:visited,.button:visited{color:#fff}button:disabled,button:disabled:focus,.button:disabled,.button:disabled:focus{border-color:gray;background-color:gray}button.active,.button.active{background-color:#acc1e4 !important;border-color:#203050 !important}button.secondary,.button.secondary{background-color:#777;border-color:#777}option[disabled]{color:gray}input[type=range]{appearance:none;-webkit-appearance:none;vertical-align:top;margin:.2em;height:1.2em;padding:0;width:9.8em;transition:.4s all ease-out;border-radius:.6em}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:1em;width:1em;border-radius:.5em;background:#203050;border:1px solid #f0f0f0;cursor:pointer}input.switch[type=range]{pointer-events:none;width:2.5em !important}*:focus{outline:0;box-shadow:0 0 .1rem .2rem var(--focus)}.btn-group{display:flex;flex-flow:row nowrap;align-items:flex-start}.btn-group>*{flex:1 1 auto;margin:0;border-radius:0}.btn-group>*:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.btn-group>*:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.form-grid{display:grid;grid-template-columns:12.6ch auto;grid-gap:5px;margin-bottom:.5rem}.form-grid>*{grid-column-end:-1}.form-grid>label{grid-column:1;text-align:right}.form-grid>.wide{grid-column:1/-1}.form-grid .icon{width:1.2em;height:1.2em;margin:.2em}.form-inline{height:1.6em}.form-inline>*{vertical-align:top}.form-actions{display:flex;flex-flow:row wrap;gap:.25rem}.element{position:relative;display:inline-block;height:6rem;width:6rem;margin:.6rem}.element.wide{width:10rem}.element>svg,.element>img{position:relative;left:1rem;top:.4rem;height:4rem;width:4rem}.element>.id{position:absolute;display:inline-block;bottom:.4rem;left:0;height:1rem;width:6rem;text-align:center}.element>.info{position:absolute;display:inline-block;top:.4rem;right:0;height:5.2rem;width:4rem}.u-bool{display:inline-block;height:1.4rem;width:1.4rem;border-radius:.7rem;text-align:center;background-color:silver}.u-bool[value="1"]{background-image:linear-gradient(145deg, rgb(64.2, 255, 64.2), rgb(0, 166.2, 0))}.u-bool[value="0"]{background-image:linear-gradient(145deg, #ff9999, red)}.ux-levelbar{display:inline-block;border-color:hsl(220,80%,30%);border-style:solid;border-width:1px;width:32px;height:64px}.ux-value{position:absolute;right:.5rem;top:.5rem}.u-bar{position:relative;height:1.4em;width:100%;background-color:#aaa}.u-bar>.pulse,.u-bar>.current{display:inline-block;position:absolute}.u-bar>.pulse{top:0;left:0;height:1.4em;background-color:green}.u-bar>.current{top:.4em;height:.6em;background-color:red}.text-right{text-align:right}.border{border:1px solid #555}.display{position:relative;box-sizing:content-box;margin:auto;line-height:10px;font-size:10px;font-family:Verdana,Geneva,sans-serif;border:2px solid #555}.display>span{box-sizing:border-box;display:inline-block;position:absolute;top:0;left:0;height:10px;overflow:hidden;background-color:rgba(0,0,0,0)}.display>span.text{color:var(--color)}.display>span.dot{height:10px;width:10px;border-radius:50%}.display>span.dot.active{background-color:green}.display>button{box-sizing:border-box;display:inline-block;position:absolute;top:0;left:0;height:10px;overflow:hidden;background-color:pink;color:var(--color);border-radius:.4em}.displayinc{position:relative;margin:auto;zoom:2}.displayinc>.icon{width:1.2em;height:1.2em;margin:0}input.band{width:100%;border-radius:0;border-width:1px}input.band.hue{background:linear-gradient(to right, red 0%, yellow 17%, lime 33%, aqua 50%, blue 67%, fuchsia 83%, red 100%)}input.band.white,input.band.lightness,input.band.saturation{background:linear-gradient(to right, black 0%, white 100%)}table{empty-cells:show;border-collapse:collapse;border-left:solid 1px #203050;border-right:solid 1px #203050;margin-top:.4em;margin-bottom:.4em}table thead tr{background-color:#203050}table thead tr th{color:#fff}table td,table th{vertical-align:top;padding:.2em .6em;border-bottom:1px solid #203050}table th{font-weight:bold}.warning{margin:.2rem;padding:.4rem;border-radius:.4rem}a[href^=http]::after{content:"";display:inline-block;width:1em;height:1em;vertical-align:text-bottom;margin-left:.25em;background-size:1em;background-image:url("data:image/svg+xml, %3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.689 4v4.918h13.114l-17.049 17.05 3.279 3.606 17.377-17.05v12.787H44V4z' /%3E%3Cpath d='M33 22.99V40H8V15h17v-4l-21 .001V44h33V22.952z' /%3E%3C/svg%3E")}p,pre,h1,h2,h3,h4,.text{margin:0;min-height:1em}p>img,p>svg,pre>img,pre>svg,h1>img,h1>svg,h2>img,h2>svg,h3>img,h3>svg,h4>img,h4>svg,.text>img,.text>svg{height:1em;height:auto}p>img:first-child,p>svg:first-child,pre>img:first-child,pre>svg:first-child,h1>img:first-child,h1>svg:first-child,h2>img:first-child,h2>svg:first-child,h3>img:first-child,h3>svg:first-child,h4>img:first-child,h4>svg:first-child,.text>img:first-child,.text>svg:first-child{margin-right:.2em}p:not(:first-child),pre:not(:first-child),.text:not(:first-child){margin-top:var(--text-spacing)}h1:not(:first-child),h2:not(:first-child),h3:not(:first-child),h4:not(:first-child){margin-top:calc(var(--text-spacing)*3)}h1,h2,h3,h4{text-wrap:balance;font-family:arial,ui-sans-serif,sans-serif;font-weight:bold;clear:both}h2{font-size:1.6em;min-height:1.6em}h3{font-size:1.25em;min-height:1.25em}h4{font-size:1em;min-height:1em}@media print{html,body{font-size:.66em;background-color:#fff}}.gpio{display:inline-block;padding:0 4px;border-radius:4px}.gpio.yellow{background-color:#ff0}.gpio.red{background-color:#f22;color:#fff}.gpio.black{background-color:#111;color:#fff}.gpio.blue{background-color:#22f;color:#fff}main h2{margin-top:1rem !important}.taglist>a{display:inline-block;height:1.6em;background:#203050;text-align:center;padding:.2em .6em;position:relative;margin-right:1em;text-decoration:none;color:#fff}.taglist>a::before{content:"#"}.taglist>a::after{content:"";border-top:.8em solid rgba(0,0,0,0);border-bottom:.8em solid rgba(0,0,0,0);border-left:.8em solid #203050;position:absolute;right:-0.8em;top:0}