.avatar{display:flex;flex-flow:column nowrap;justify-content:center;max-height:var(--size-10);max-width:var(--size-10);border-radius:var(--shape-corner-full);fill:var(--color-primary-container);& path { fill: var(--color-on-primary-container); } &.monogram { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: var(--size-10); width: var(--size-10); max-height: var(--size-10); max-width: var(--size-10); border-radius: var(--shape-corner-full); background-color: var(--color-primary-container); color: var(--color-on-primary-container); font-family: var(--typescale-title-medium-font); font-size: var(--typescale-title-medium-size); font-weight: var(--typescale-title-medium-weight); line-height: var(--typescale-title-medium-line-height); } &.check { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: var(--size-10); width: var(--size-10); max-height: var(--size-10); max-width: var(--size-10); border-radius: var(--shape-corner-full); background-color: var(--color-primary-container); color: var(--color-on-primary-container); }}#github-button{margin-top:var(--size-7);width:100%}@media screen and (max-width:599px){#github-button{width:0;padding:unset;align-self:flex-end;transition:width var(--motion-duration-long4)var(--motion-easing-emphasized);.repo-name { display: none; }}}#random-button{cursor:pointer;&:hover,&:focus { animation:rattle var(--motion-duration-short4) var(--motion-easing-emphasized) infinite; } &:active { animation:roll var(--motion-duration-extra-long4) var(--motion-easing-emphasized) infinite; }}@keyframes roll{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes rattle{0%{transform:rotate(0)}25%{transform:rotate(10deg)}50%{transform:rotate(0)}75%{transform:rotate(-10deg)}100%{transform:rotate(0)}}#top-link{position:fixed;bottom:var(--size-4);right:var(--size-4);z-index:10007;opacity:0;visibility:hidden;transition:all var(--motion-duration-extra-long4)var(--motion-easing-emphasized);.icon { color: var(--icon-color); }}.sub-tabs-container{position:relative;flex:auto}.sub-tabs-container .sub-tabs{position:absolute;top:100%;left:0;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;z-index:10;max-height:0;opacity:0;overflow:hidden;pointer-events:none;box-shadow:var(--elevation2);border-radius:var(--shape-corner-s-bottom);border-top-left-radius:var(--shape-corner-s);border-top-right-radius:var(--shape-corner-xl);transition:max-height .5s ease,opacity .3s ease}.sub-tabs-container:hover .sub-tabs,.sub-tabs-container:focus-within .sub-tabs{max-height:100vh;opacity:.99;pointer-events:auto}.set.tabs.has-sub-tabs{background-color:var(--color-surface);padding-inline:var(--size-4);padding-bottom:var(--size-4);border-radius:var(--shape-corner-m-bottom);--set-gap:var(--size-4);--set-overflow:visible}.set.tabs.has-sub-tabs>.sub-tabs-container>.tab{--container-shape:var(--shape-corner-s-bottom);transition:all .2s ease;padding-top:var(--size-8)}.set.tabs.has-sub-tabs>.sub-tabs-container>.tab.active{background-color:var(--color-secondary);color:var(--color-on-primary)}.set.tabs.has-sub-tabs>.sub-tabs-container>.tab:not(.active){background-color:var(--color-surface-container-low)}.set.tabs.has-sub-tabs>.sub-tabs-container>.tab::before{all:unset;content:"";position:absolute;inset:0;border:var(--container-outline);border-radius:var(--shape-corner-m-bottom)}.sub-tabs-container .sub-tabs .tab{flex:auto;flex-flow:row nowrap;align-items:center;justify-content:flex-start;gap:var(--size-2);padding:var(--size-7);--container-color:var(--color-surface-container);--container-shape:var(--shape-corner-none);box-shadow:var(--elevation1)}.sub-tabs-container .sub-tabs .tab.active{--container-color:var(--color-surface-container-high);color:var(--color-surface-container-high);gap:var(--size-2)}.sub-tabs-container .sub-tabs .tab::before{all:unset;content:"";position:absolute;inset:0;background-color:var(--container-color);box-shadow:var(--container-elevation);border:var(--container-outline);border-radius:var(--container-shape)}@media screen and (max-width:599px){.set.tabs.has-sub-tabs .tab{max-height:var(--size-16)}.set.tabs.has-sub-tabs .tab .icon,.title-medium{display:none}}.hidden{display:none}.theme-controls{position:relative;.divider { margin-block: var(--size-5); } .theme-controls-title { display: flex; flex-flow: row nowrap; align-items: center; padding: var(--size-3); } .controls::before { box-shadow:none; } .controls { position: absolute; inset: auto 0 auto auto; display: flex; flex-flow: column nowrap; flex: 1 1 auto; border: none; padding: var(--size-3); overflow-y: auto; color: var(--color-on-surface); background-color: var(--color-surface-container-low); max-height: calc(100dvh - var(--size-16)); visibility: hidden; width: var(--size-100); max-width: 90vw; height: 0%; transition: all var(--motion-duration-short4); transform-origin: top right; box-shadow: var(--elevation4); } & input#theme-controls { display: none; } &:has(input#theme-controls[type="checkbox"]:checked) { .controls { visibility: visible; width: var(--size-100); height: calc(100dvh - var(--size-16)); min-height: 100%; transition: height var(--motion-duration-medium4); } } .slider { position: relative; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; width: 100%; & input { width: 100%; } & output { display: flex; width: 100%; } } #theme-hues, #theme-chromas, #theme-lightness { display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; width: 100%; height: var(--size-5); margin-bottom: var(--size-3); border-radius: var(--shape-corner-full); } #theme-hues { background: linear-gradient( 0.25turn, var(--palette-hue-0), var(--palette-hue-30), var(--palette-hue-60), var(--palette-hue-90), var(--palette-hue-120), var(--palette-hue-150), var(--palette-hue-180), var(--palette-hue-210), var(--palette-hue-240), var(--palette-hue-270), var(--palette-hue-300), var(--palette-hue-330) ); } #theme-chromas { background: linear-gradient( 0.25turn, var(--palette-chroma-0), var(--palette-chroma-10), var(--palette-chroma-20), var(--palette-chroma-30), var(--palette-chroma-40), var(--palette-chroma-50), var(--palette-chroma-60), var(--palette-chroma-70), var(--palette-chroma-80), var(--palette-chroma-90), var(--palette-chroma-100) ); } #theme-lightness { margin-top: var(--size-3); background: linear-gradient( 0.25turn, var(--palette-primary-0), var(--palette-primary-10), var(--palette-primary-20), var(--palette-primary-30), var(--palette-primary-40), var(--palette-primary-50), var(--palette-primary-60), var(--palette-primary-70), var(--palette-primary-80), var(--palette-primary-90), var(--palette-primary-100) ); } [id*="selector-container"] { border-radius: var(--shape-corner-l); background-color: var(--color-surface-container-lowest); padding: var(--size-8); margin-bottom: var(--size-4); gap: var(--size-2); & label:not([class]), & legend:not([class]) { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; margin-bottom: var(--size-2); &:not(:first-child) { margin-top: var(--size-3); } } } #typography-selector { margin-top: var(--size-3); .typography-fieldset { margin-block: var(--size-2); } .example { text-align: right; } } #color-selector-container { display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; width: 100%; gap: var(--size-2); text-align: left; .title-large { margin-bottom: var(--size-2); } .title-large:not(:first-child) { margin-top: var(--size-5); } .color-temp-reference { display: flex; flex-flow: row nowrap; align-items: center; margin-top: var(--size-2); #primary, #primary-container, #tertiary, #tertiary-container { flex: 1 1 0; display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: center; padding: var(--size-2); } #primary { background-color: var(--color-primary); border-radius: var(--shape-corner-xl-start); } #tertiary { background-color: var(--color-tertiary); border-radius: var(--shape-corner-xl-end); } #primary-container { background-color: var(--color-on-primary); border-radius: var(--shape-corner-xl-start); } #tertiary-container { background-color: var(--color-on-tertiary); border-radius: var(--shape-corner-xl-end); } } }}:root{--color-showcase-tokens-container:var(--palette-neutral-variant-10);--input-dim-image:1;img { filter: brightness(var(--input-dim-image)); } #moon { opacity: 0; } #sun { transform: translate(calc(-1 * var(--size-3)), 0px); opacity: 1; } :has(#sun[style*="opacity: 1"]) .invert img { filter: invert(100%); } #theme-toggle-container:focus-within { #moon { animation: set-moon var(--motion-duration-medium2) var(--motion-easing-emphasized) forwards; } #sun { animation: rise-sun var(--motion-duration-medium2) var(--motion-easing-emphasized) forwards; } }}:root:has(#theme-toggle:checked){--color-showcase-tokens-container:var(--palette-neutral-variant-90); #sun { opacity: 0; } #moon { transform: translate(var(--size-3), 0px); opacity: 1; } #theme-toggle-container:focus-within { #sun { animation: set-sun var(--motion-duration-medium2) var(--motion-easing-emphasized) forwards; } #moon { animation: rise-moon var(--motion-duration-medium2) var(--motion-easing-emphasized) forwards; } } #theme-toggle { + label { --container-color: var(--color-surface-container-highest); --icon-color: var(--color-on-surface-variant); .icon { font-variation-settings: "FILL" 0; } } }}@keyframes rise-moon{0%{transform:translate(calc(-1 * var(--size-9)),var(--size-12));opacity:0}100%{transform:translate(var(--size-3),0);opacity:1}}@keyframes rise-sun{0%{transform:translate(calc(-1 * var(--size-15)),var(--size-12));opacity:0}100%{transform:translate(calc(-1 * var(--size-3)),0);opacity:1}}@keyframes set-moon{0%{transform:translate(var(--size-3),0);opacity:1}100%{transform:translate(var(--size-15),var(--size-12));opacity:0}}@keyframes set-sun{0%{transform:translate(calc(-1 * var(--size-3)),0);opacity:1}100%{transform:translate(var(--size-9),var(--size-12));opacity:0}}.invert img{border:none;box-shadow:none;background:0 0}.admonition{position:relative;display:block;margin-block:var(--size-8);padding:var(--spacing-panes);outline:1px solid var(--color-outline-variant);border-radius:var(--shape-corner-m);box-shadow:var(--elevation1);min-height:var(--size-24);background-color:var(--color-surface-container-low);color:var(--text-color);--icon-size:calc(var(--spacing-panes) * 5);&[class*="-container"] { outline: unset; padding: var(--size-8) var(--size-4) var(--size-8) var(--icon-size); background-color: var(--container-color); } & a { word-break: break-word; } .icon { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; bottom: 0; left: 0; width: var(--icon-size); height: 100%; font-size: var(--size-12); color: var(--icon-color); } &.centered { box-shadow: unset; padding: unset; background-color: unset; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; }}h1,h2,h3,h4,h5,h6{.anchor { flex: 1 1 0; height: 100%; display: inline-flex; align-items: center; gap: var(--size-1); user-select: none; opacity: 0; transition: opacity var(--motion-duration-medium2) var(--motion-easing-emphasized); margin-inline-start: var(--size-1); &:hover { color: var(--color-primary); } } &:active .anchor, &:focus-within .anchor, &:hover .anchor { opacity: 1; }}:root,body,main,#footer,.layout,#top-link{background-color:var(--color-surface);transition:var(--motion-duration-long2)var(--motion-easing-emphasized);transition-property:font-size,font-weight,line-height,font-family,margin,border-radius,height,min-height,max-height,width,min-width,max-width,transform,visibility,opacity,display}.layout,.layout *{transition:background-color var(--motion-duration-short1)var(--motion-easing-emphasized)}.scroll-fade{opacity:0;transform:translateY(5dvh);transition:opacity .8s ease-out,transform .6s ease-out}.scroll-fade.is-visible{opacity:1;transform:translateY(0)}.no-js .scroll-fade{opacity:1;transform:none}@media(prefers-reduced-motion){:root{animation:none!important}}.icon{font-family:var(--font-icon);font-weight:400;font-style:normal;font-size:var(--size-6);line-height:2;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga";user-select:none;height:var(--size-6);width:var(--size-6);min-height:var(--size-6);min-width:var(--size-6)}.github-icon,.site-icon{min-width:var(--size-6);min-height:var(--size-6);max-width:var(--size-6);max-height:var(--size-6);padding:2px}.site-icon-w{fill:var(--color-primary)}.site-icon-j-left{fill:var(--color-tertiary)}.site-icon-j-right{fill:var(--color-secondary)}#home-page-icon{min-width:var(--size-12);min-height:var(--size-12);max-width:var(--size-12);max-height:var(--size-12);padding:var(--size-2)}.share-icon{min-width:var(--size-12);min-height:var(--size-12);max-width:var(--size-12);max-height:var(--size-12);padding:var(--size-3);fill:var(--color-secondary)}h1[id]{color:var(--color-heading-1)}h2[id]{color:var(--color-heading-2)}h3[id]{color:var(--color-heading-3)}h4[id]{color:var(--color-heading-4)}h5[id]{color:var(--color-heading-5)}h6[id]{color:var(--color-heading-6)}.highlight-text{background-color:var(--color-complementary);color:var(--color-on-complementary);padding-inline:5px;border-radius:var(--shape-corner-xs);max-width:fit-content; *{ color: inherit; }}#footer{position:relative;flex:auto;display:flex;flex-flow:column nowrap;align-items:stretch;margin-inline:auto;padding:var(--spacing-panes);gap:5vmax;.acknowledgement-of-country{ padding-top: var(--size-16); padding-bottom: var(--size-16); p{ color: var(--color-secondary); } background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='currentColor' opacity='0.5' stroke-width='1' d='M0,3.5 c5,0,5,-3,10,-3 s5,3,10,3 s5,-3,10,-3 s5,3,10,3'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: bottom; background-size: 20px 4px; } .footer-links { display: flex; flex-flow: row wrap; gap: var(--spacing-panes); margin-left: 25vw; margin-right: 25vw; .footer-links-list { flex: 1 1 0; display: flex; flex-flow: row wrap; & span:first-child { color: var(--color-on-surface-variant); margin-top: calc(var(--spacing-panes)*2); } } & a { display: flex; align-items: center; text-decoration: none; margin-bottom: var(--size-1); } & span { margin-block: 0 var(--spacing-panes); } li { display: inline-block; margin-block: var(--size-2); padding: var(--size-4); background-color: var(--color-primary-variant); border-radius: var(--shape-corner-s); } li:hover { transition: background-color 0.05s ease; background-color: var(--color-on-primary); } li > a { list-style-type: none; text-decoration: none; color: var(--color-primary-variant); } li > a:hover { list-style-type: none; text-decoration: none; color: var(--color-primary-variant); font-weight: bold; transition: 0.2s ease-in-out; } li > a::before { content: "▧"; letter-spacing: 0.5em; color: var(--color-primary); font-size: 1.2em; } } .footer-lower { flex: 1 1 0; display: flex; flex-flow: row nowrap; align-items: flex-end; justify-content: space-between; gap: var(--size-5); margin-top: var(--spacing-panes); > * { flex: 1 1 0; } & a { text-decoration: none; } .copyright { display: flex; align-items: flex-start; flex-flow: column nowrap; gap: var(--spacing-panes); } #copyright-button { display: flex; justify-content: flex-start; align-items: center; color: var(--color-on-surface-variant); &:hover { color: var(--color-on-surface); text-decoration: underline; } } .footer-buttons { display: flex; flex-flow: column nowrap; gap: var(--spacing-panes); align-items: stretch; .footer-buttons-set { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: var(--size-3); } } }}#footer{position:relative;overflow:hidden;isolation:isolate}#footer::after{content:"";position:absolute;top:-50%;left:-50%;right:-50%;bottom:-50%;background-image:url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="5" seed="0"/><feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.15 0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');opacity:.75;mix-blend-mode:multiply;animation:subtle-grain 24s linear infinite;pointer-events:none;z-index:0}@keyframes subtle-grain{0%{transform:translate(0,0)}30%{transform:translate(1%,-1.5%)}60%{transform:translate(.5%,1%)}100%{transform:translate(0,0)}}@media(prefers-color-scheme:dark){#footer::after{mix-blend-mode:screen;opacity:.8}}@media screen and (max-width:599px){#footer{margin-inline:auto;padding:var(--spacing-panes);gap:5vmax;.footer-links { margin-left: 2.5vw; margin-right: 2.5vw; } & a { margin-bottom: var(--size-2); } & span { margin-block: 0 var(--spacing-panes); } & .footer-links { & li{ margin-block: var(--size-2); padding: var(--size-1); } }}}.copyright-notice{position:fixed;transform:translate(-100%,-100%);z-index:9999;background:var(--color-tertiary-container);padding:var(--size-6);border-radius:var(--shape-corner-s);box-shadow:var(--inset1);max-width:80%;text-align:center;line-height:1.5;opacity:1;transition:opacity .3s ease}.notice-content{text-align:center}main{position:relative;z-index:1}#header{flex:auto;display:flex;flex-flow:row wrap;position:sticky;top:0;gap:var(--size-2);z-index:1000;view-transition-name:none;transition:transform .4s cubic-bezier(.4,0,.2,1)}#header.hidden{transform:translateY(-105%);pointer-events:none}.app-tabs-container{backface-visibility:hidden;transform-style:preserve-3d}#header.menu-open{z-index:5}.app-bar.top{padding-inline:var(--size-2)var(--size-4);z-index:3;display:flex;justify-content:space-between;align-items:center;view-transition-name:none}.component.app-bar.top.center{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;box-shadow:var(--elevation1);border-radius:var(--shape-corner-l);background-color:var(--color-surface-container)}.menu-button{display:none;background:0 0;border:none;font-size:var(--size-4);cursor:pointer;z-index:4;position:relative;transition:background-color .3s ease,box-shadow .3s ease;touch-action:manipulation}.menu-checkbox{display:none;z-index:2}.menu-button::before,.menu-button::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;transition:opacity .3s ease}.menu-button::before{content:"✖";opacity:0}.menu-button::after{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%235f6368"><path d="M360-440h400L622-620l-92 120-62-80-108 140ZM120-120q-33 0-56.5-23.5T40-200v-520h80v520h680v80H120Zm160-160q-33 0-56.5-23.5T200-360v-440q0-33 23.5-56.5T280-880h200l80 80h280q33 0 56.5 23.5T920-720v360q0 33-23.5 56.5T840-280H280Zm0-80h560v-360H527l-80-80H280v440Zm0 0v-440 440Z"/></svg>');opacity:1}.menu-checkbox:checked+.menu-button::before{opacity:1}.menu-checkbox:checked+.menu-button::after{opacity:0}.app-tabs-container{visibility:hidden;position:absolute;top:0;width:101%;left:-1%;background-color:var(--color-surface-container);box-shadow:var(--elevation5);z-index:6;max-height:0;overflow:visible;opacity:0;transform:translateZ(0);transition:all .5s cubic-bezier(.4,0,.2,1);touch-action:pan-y;will-change:transform,opacity,max-height,visibility}.app-tabs-container.visible{visibility:visible;opacity:1;max-height:66dvh;height:fit-content;padding:var(--size-2);background-color:var(--color-surface-container-highest);border-radius:var(--shape-corner-m)}.menu-checkbox:checked+.menu-button+.app-tabs-container{height:fit-content;visibility:visible;max-height:66dvh;padding:var(--size-2);opacity:1;transform:translateZ(0);background-color:var(--color-surface-container-highest);border-radius:var(--shape-corner-m)}.app-tabs-container a{color:inherit;text-decoration:none;flex-direction:row}.tab{width:100%;padding:var(--size-6);text-align:center}.sub-tabs-container{width:100%}#site-headline{position:relative;color:var(--color-on-surface);flex-flow:row nowrap;align-items:center;justify-content:flex-start}.site-id-title{display:none;font-family:var(--typescale-title-large-font);font-size:var(--typescale-title-large-size);font-weight:var(--typescale-title-large-weight);line-height:var(--typescale-title-large-line-height)}#site-headline img{object-fit:cover;padding:var(--size-1);max-width:var(--size-6);max-height:var(--size-6);margin:0;animation:none;opacity:1}@media screen and (max-width:599px){#header{width:100%;gap:var(--size-1);box-shadow:var(--elevation1);border-radius:var(--shape-corner-l);background-color:var(--color-surface-container);opacity:.99}.component.app-bar.top.center{width:100%;pointer-events:all;min-height:var(--size-16);position:sticky;top:0;margin-inline:auto}.app-tabs-container{top:var(--header-height,60px);left:0;right:0;bottom:0;overflow:auto;padding:var(--size-2)}.invert{margin-top:var(--header-height,calc(20% - .35lh))}.menu-checkbox:checked+.menu-button+.app-tabs-container{max-height:75dvh}.app-bar{position:sticky;top:0}.app-bar .middle{display:contents}.menu-button{display:block;top:0;left:27.5dvw;width:var(--size-8);height:var(--size-8);font-size:0;transform:scale(1.25);filter:contrast(2)}.menu-button::before,.menu-button::after{pointer-events:none}.menu-button::before{font-size:var(--size-4);color:var(--color-on-surface,#000);line-height:1}.menu-button::after{width:24px;height:24px;display:block}.sub-tabs-container{display:none}.footer-buttons{position:inherit;display:flex;flex-flow:row wrap}}@media screen and (min-width:600px) and (max-width:899px){main{margin-left:var(--size-18)}#header{position:absolute;left:0;height:100vh;width:var(--size-24);overflow-y:auto;padding:var(--size-2);margin-right:calc(-1 * var(--size-24));pointer-events:visible;flex:initial}.component.app-bar.top.center{flex-direction:column;padding:var(--size-2);right:100%;width:var(--size-24);height:100%;overflow-y:hidden;overflow-x:hidden;pointer-events:visible}.set.tabs.has-sub-tabs{--set-gap:var(--size-1);--set-width:auto;flex-direction:column;flex:initial;align-items:center}.set.tabs.has-sub-tabs .label{display:none}.tabs:not(.sub-tabs) .tab.primary:has(.icon+.label),.component.tab.primary:has(.icon+.label){flex-direction:column}.app-bar.top .end{margin-left:0}.app-bar.top .end .footer-buttons{flex-direction:column;justify-content:center;align-items:center}}@media screen and (min-width:600px){#site-headline{height:var(--size-16)}.app-bar.middle{display:none}.footer-buttons{display:flex;justify-content:flex-end;gap:var(--size-2);bottom:0}.menu-button{display:none}}@-moz-document url-prefix(){.menu-button{touch-action:manipulation}.app-tabs-container{transition:all .3s cubic-bezier(.4,0,.2,1)}@media(max-width:599px){#header{position:absolute;transform:none;opacity:1;pointer-events:all}}}.is-firefox #header{position:fixed;top:0;left:0;width:100%;z-index:99999;transform:none!important;visibility:visible;opacity:1}.is-firefox main{z-index:auto!important;padding-top:80px}@keyframes openMenu{0%{max-height:0;opacity:0;transform:translateY(-20px)}100%{height:fit-content;max-height:66vh;opacity:1;transform:translateY(0)}}@keyframes closeMenu{0%{max-height:66vh;opacity:1}100%{max-height:0;opacity:0}}@property --angle{syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}:is(.button,.chip,.text-field) img,svg,:is(.set.tabs) :is(img,svg){min-inline-size:var(--size-10);max-inline-size:var(--size-10);min-block-size:var(--size-10);max-block-size:var(--size-10)}.gallery-item{position:relative;aspect-ratio:initial;height:auto;width:auto;max-height:100%;max-width:var(--input-char-width);margin-inline:auto;margin-bottom:var(--size-8);transition:transform var(--motion-duration-long2)var(--motion-easing-emphasized);figcaption { .tag{ text-decoration: none; } .meta-title b { font-size: var(--typescale-title-medium-size); color: var(--color-secondary); } }}.gallery-item img,.gallery-item video{width:100%;height:100%;max-width:100%;max-height:50dvh;transition:transform var(--motion-duration-long2)var(--motion-easing-emphasized)}.showcase-metadata{width:inherit;padding:var(--size-6);transition:var(--motion-duration-long2)var(--motion-easing-emphasized);color:var(--color-outline);strong{ color: var(--color-on-surface-variant); }}.gallery-metadata{padding:var(--size-4)}.gallery-title{background-image:linear-gradient(90deg,var(--color-secondary),var(--color-tertiary));background-size:0% 1px;background-repeat:no-repeat;background-position:0 90%;transition:background-size .3s ease,color .3s ease;.title-link { text-decoration: none; }}.gallery-title:hover,.gallery-item:hover{color:var(--color-outline-variant);background-size:100% 1px}.gallery-title::after{content:'';position:absolute;width:0;height:var(--size-1);bottom:-4px;left:0;background:var(--color-outline-variant);transition:width .3s ease .2s}.gallery-item::after{content:'';position:absolute;width:0;height:2px;bottom:-5px;left:0;background:var(--color-outline-variant);transition:width .4s ease .6s}.gallery-title:hover::after,.gallery-item:hover::after{width:100%}.loading-orb{position:absolute;display:grid;grid-template-areas:"stack";width:50vmin;height:50vmin;aspect-ratio:1;overflow:hidden;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);--bg:var(--color-primary);--c1:var(--color-on-surface-variant);--c2:var(--color-surface);--c3:var(--color-outline-variant);z-index:0}.loading-orb::before,.loading-orb::after{content:"";display:block;grid-area:stack;width:100%;height:100%;border-radius:50%;transform:translateZ(0)}.loading-orb::before{background:conic-gradient( from calc(var(--angle) * 2) at 25% 70%,var(--c3),transparent 20% 80%,var(--c3) ),conic-gradient( from calc(var(--angle) * 2) at 45% 75%,var(--c2),transparent 30% 60%,var(--c2) ),conic-gradient( from calc(var(--angle) * -3) at 80% 20%,var(--c1),transparent 40% 60%,var(--c2) ),conic-gradient( from calc(var(--angle) * 2) at 15% 5%,var(--c2),transparent 10% 90%,var(--c2) ),conic-gradient( from calc(var(--angle) * 1) at 20% 80%,var(--c1),transparent 10% 90%,var(--c1) ),conic-gradient( from calc(var(--angle) * -2) at 85% 10%,var(--c3),transparent 20% 80%,var(--c2) );box-shadow:inset var(--bg)0 0 5vmin 1vmin;filter:blur(4vmin)contrast(4);animation:rotate 12s linear infinite}.loading-orb::after{--dot:calc(var(--size-1)/2);background-image:radial-gradient( circle at center,var(--bg) var(--dot),transparent var(--dot) );background-size:calc(var(--dot) * 2)calc(var(--dot) * 2);mask-image:radial-gradient(var(--color-surface),transparent 90%);backdrop-filter:blur(8vmin)contrast(2);mix-blend-mode:soft-light}.hero-image{position:relative;display:flex;justify-content:center;align-items:center;max-width:var(--input-char-width);min-height:50vmin;transition:var(--motion-duration-long2)var(--motion-easing-emphasized);overflow:hidden;margin-inline:var(--size-4);cursor:crosshair;@media(min-width:1100px){margin-inline: auto;}}.hero-image img{position:relative;opacity:0;max-width:100%;max-height:90vh;width:auto;height:auto;z-index:1;transition:opacity .5s ease,transform .4s ease-out}.hero-image img.loaded{opacity:1}.metadata-tags{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:var(--size-1);text-transform:lowercase}.metadata-tags a:not(:last-child)::after{margin-left:.25rem;opacity:.6}.metadata-tags a,.tag{padding:0 var(--size-1);border-radius:var(--shape-corner-s);text-decoration:none;text-align:center;box-shadow:inset 0 0 0 1px var(--color-outline-variant);transition:.2s ease-in-out}.metadata-tags a:hover,.tag:hover{box-shadow:inset 0 0 0 20px var(--color-outline-variant);text-decoration:wavy}.metadata-category,.metadata-year,.metadata-artist,.metadata-location{display:flex;justify-content:space-between;font-family:var(--typeface-plain)}.tags-label,.artist-label,.location-label,.year-label,.category-label{margin-right:auto;color:var(--color-outline-variant);font-family:var(--typeface-plain)}.metadata-tags-showcase{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}.metadata-tags-showcase a{padding:0 var(--size-1)var(--size-1);border-radius:var(--shape-corner-s);margin-left:.125rem;box-shadow:inset 0 0 0 1px var(--color-outline-variant);transition:.2s ease-in-out}.metadata-tags-showcase a:hover{box-shadow:inset 0 0 0 20px var(--color-outline-variant)}.metadata-tags-showcase:first-child{margin-right:auto}.metadata-category a,.metadata-tags-showcase a,.metadata-year a,.metadata-artist a,.metadata-location a{text-decoration:none}.metadata-tags-showcase a:not(:last-child)::after{margin-left:.25rem;margin-right:.125rem;text-decoration:none}.viewbox-overlay{position:fixed;top:0;left:0;width:100%;height:fit-content;background-color:rgba(0,0,0,.98);z-index:10003;opacity:0;visibility:hidden;overflow:hidden;padding:env(safe-area-inset-top)env(safe-area-inset-right)env(safe-area-inset-bottom)env(safe-area-inset-left);box-shadow:inset 0 0 100px rgba(168,168,168,.1),0 5px 540px 2px #fff,0 5px 100px 2px rgba(255,255,255,.95),0 0 6px 1px rgba(0,0,0,.85);will-change:contents,opacity,transform;transform:translate(-10%,0);transition:opacity .3s ease,visibility .3s ease,transform .6s ease-in}.viewbox-overlay.active{opacity:1;visibility:visible;transform:translate(50%,0);transition:opacity .3s ease,visibility .3s ease,transform .3s ease-in;will-change:contents,opacity,transform;display:flex;justify-content:space-between;align-items:center;flex-flow:row nowrap}.viewbox-content{position:relative;padding-bottom:4px;padding:2vmax;width:auto;height:90dvh;max-width:100%;max-height:100dvh;transform:translate(25%,0);transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .4s ease;-webkit-overflow-scrolling:touch;flex-grow:1;border-left:1px solid var(--color-outline)}.viewbox-content::after{content:"";position:absolute;bottom:0;left:0;width:0%;height:2px;background:var(--color-outline);animation:expandFade 5s ease}@keyframes expandFade{0%{width:0%;opacity:1}50%{width:100%;opacity:1}100%{width:0%;opacity:0}}.viewbox-overlay.active .viewbox-content,.viewbox-overlay.active{transform:translate(0,0);opacity:1}.viewbox-content img{width:auto;height:auto;max-height:85vh;max-width:100%;object-fit:contain;display:block;align-self:flex-start;padding:inherit;box-shadow:none}.viewbox-content unused img:nth-child(1 of img){clip-path:shape(from 90.89% 45.64%,curve to 93.04% 54.85% with 93.56% 50%,curve to 88.92% 63.36% with 92.52% 59.71%,curve to 85.12% 72.43% with 85.31% 67.01%,curve to 80.16% 79.84% with 84.93% 77.86%,curve to 71.71% 84.64% with 75.38% 81.83%,curve to 64.58% 93.09% with 68.04% 87.45%,curve to 55.56% 93.65% with 61.12% 98.72%,curve to 44.63% 92.82% with 50% 88.58%,curve to 35.6% 92.27% with 39.26% 97.07%,curve to 26.56% 86.82% with 31.95% 87.48%,curve to 20.85% 79.83% with 21.17% 86.16%,curve to 13.55% 72.21% with 20.53% 73.5%,curve to 4.51% 65.88% with 6.58% 70.91%,curve to 5.39% 55.43% with 2.45% 60.85%,curve to 9.9% 45.6% with 8.32% 50%,curve to 12.31% 36.73% with 11.47% 41.21%,curve to 14.9% 27.83% with 13.14% 32.25%,curve to 20.42% 20.52% with 16.65% 23.41%,curve to 27.53% 13.96% with 24.19% 17.64%,curve to 36.18% 11.48% with 30.88% 10.29%,curve to 45.74% 10.19% with 41.48% 12.66%,curve to 55.18% 6.14% with 50% 7.71%,curve to 65.11% 6.68% with 60.37% 4.57%,curve to 73.49% 12.38% with 69.85% 8.79%,curve to 78.33% 21.21% with 77.14% 15.97%,curve to 85.48% 28.25% with 79.52% 26.46%,curve to 89.83% 35.66% with 91.44% 30.04%,curve to 90.89% 45.64% with 88.22% 41.28%);transition:clip-path .5s cubic-bezier(.33,1,.68,1);transform:translateZ(0)translateX(0)translateY(0);backface-visibility:hidden;outline:1px solid transparent;will-change:clip-path;padding:var(--size-12)}.viewbox-content unused img:nth-child(1 of img):hover{transform:translateZ(180)translateX(0)translateY(180);clip-path:shape( from 100% 50%,curve to 100% 15% with 100% 7.5%,curve to 100% 30% with 100% 22.5%,curve to 100% 45% with 100% 37.5%,curve to 100% 60% with 100% 52.5%,curve to 100% 75% with 100% 67.5%,curve to 100% 90% with 100% 82.5%,curve to 100% 100% with 100% 97.5%,curve to 85% 100% with 92.5% 100%,curve to 70% 100% with 77.5% 100%,curve to 55% 100% with 62.5% 100%,curve to 40% 100% with 47.5% 100%,curve to 25% 100% with 32.5% 100%,curve to 10% 100% with 17.5% 100%,curve to 0% 100% with 5% 100%,curve to 0% 85% with 0% 92.5%,curve to 0% 70% with 0% 77.5%,curve to 0% 55% with 0% 62.5%,curve to 0% 40% with 0% 47.5%,curve to 0% 25% with 0% 32.5%,curve to 0% 10% with 0% 17.5%,curve to 0% 0% with 0% 5%,curve to 15% 0% with 7.5% 0%,curve to 30% 0% with 22.5% 0%,curve to 45% 0% with 37.5% 0%,curve to 60% 0% with 52.5% 0%,curve to 75% 0% with 67.5% 0%,curve to 90% 0% with 82.5% 0%,curve to 100% 0% with 97.5% 0% )}#viewboxOverlay{touch-action:manipulation;-webkit-overflow-scrolling:touch;cursor:zoom-out}.viewbox-open #header{transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s ease;z-index:-1}.viewbox-close{touch-action:manipulation;border:none;color:#fff;font-size:3rem;cursor:pointer;z-index:10006;transition:transform .2s ease;padding-inline:1rem;-webkit-tap-highlight-color:transparent;align-self:flex-start}.viewbox-content{touch-action:pan-y;-webkit-overflow-scrolling:touch;pointer-events:none;transition:transform .3s ease .2s;order:2}.viewbox-close:hover{transform:scale(1.2)rotate(-90deg)}#viewboxOverlay.active{pointer-events:auto}.viewbox-content img{pointer-events:auto}.viewbox-container{display:flex;gap:var(--size-4)}.viewbox-metadata{margin-top:auto;margin-right:auto;flex-shrink:1;width:auto;padding:2vmax;min-width:300px;p{color: var(--color-on-surface-variant); line-height: normal;} .meta-title b { font-size: var(--typescale-title-medium-size); color: var(--color-on-surface-variant); line-height: normal; } h2{ line-height: normal; }}.viewbox-nav,.viewbox-page-nav{display:flex;padding:var(--size-2);margin:var(--size-2);column-gap:var(--size-4);align-items:stretch;justify-content:space-between}.component.card.viewbox-prev,.component.card.viewbox-next,.component.card.viewbox-page-prev,.component.card.viewbox-page-next{text-decoration:none;flex:1 1 calc(50% - var(--size-4));display:flex;padding:var(--size-4);background-color:var(--color-secondary-container);border-radius:var(--shape-corner-s);opacity:.75;gap:var(--size-4)}.component.card.viewbox-page-prev{align-items:start}.component.card.viewbox-page-next{align-items:end;text-align:right;.page-direction { display: flex; flex-flow: column-reverse; align-items: flex-end; .icon{ order: 1 } }}.component.card.next{text-align:right}@media screen and (max-width:599px){.viewbox-overlay.active{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;height:min-content}.viewbox-close{order:0;margin-block:0;margin-left:auto;line-height:normal}.viewbox-content{margin-block:0;order:2;width:100%;padding-block:0;border-left:none;flex-shrink:1;display:flex;align-items:center;margin-block:auto;justify-content:center;height:auto;min-height:67dvh;img{ align-self: center; }}.viewbox-content{position:relative;padding-bottom:4px}.viewbox-content::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:radial-gradient(var(--color-outline),black)}.viewbox-metadata{width:100%;h2{ line-height: normal; } .showcase-metadata{ padding-top: 0; margin-top: 0; }}.viewbox-details{display:flex;flex-direction:column;order:4;flex:1;width:inherit}.viewbox-nav{order:5}}body.viewbox-open::before{content:'';position:fixed;top:0;left:0;width:100%;height:100vh;z-index:3;opacity:0;visibility:hidden;transition:opacity .3s ease}body.viewbox-open::before{opacity:1}@keyframes rotate{to{--angle:360deg}}.viewbox-content{pointer-events:auto}.viewbox-nav-button{position:absolute;top:50%;transform:translateY(-50%);background:var(--color-secondary);color:#fff;border:none;border-radius:50%;width:var(--size-12);height:var(--size-12);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10005;transition:background .1s ease;box-shadow:var(--elevation3)}.viewbox-nav-button:hover{background:var(--color-primary)}.viewbox-prev{left:20px}.viewbox-next{right:20px}.viewbox-nav-button .material-symbols-sharp{font-size:24px}.viewbox-page-prev:hover,.viewbox-page-next:hover{background:rgba(0,0,0,.3)}.about-page{display:flex;flex-direction:column;margin-inline:auto;justify-content:center;text-align:center;max-width:var(--input-char-width);img{ margin-inline: auto; width: fit-content; } figure { width: auto; }}article#single #post-content{max-width:var(--input-char-width);margin:var(--input-post-content-margin);line-height:var(--input-line-height);width:inherit;flex-flow:column nowrap;display:flex;gap:var(--size-8)}#post-content{max-width:var(--input-char-width);margin:var(--input-post-content-margin);line-height:var(--input-line-height);flex-flow:row wrap;display:flex;width:inherit;gap:var(--size-8);& h1, & h2, & h3 { flex-basis: 100%; max-width: var(--input-char-width); display: flex; } .highlight-text, & p, & pre, & blockquote { width: auto; flex-flow: column nowrap; } & p { padding: 0 0.5em 1.0em 0.5em; line-height: calc(var(--input-line-height)*1.25); &:has(img:first-of-type) { position: relative; display: flex; flex-flow: row wrap; height: fit-content; min-height: auto; margin: var(--size-2) 0; margin-inline: auto; padding: var(--size-4) 0 var(--size-4) 0; overflow: visible; } } & ul { &:has(li:first-child > figure) { position: relative; margin: 0; padding: 0; display: flex; flex-flow: column nowrap; min-height: max-content; padding-left: 16%; & li:first-child > figure { position: absolute; top: 0; left: 0; height: 100%; width: 16%; margin: 0; & img { width: 88%; height: 100%; object-fit: cover; margin: 0; } } } &:has(li:last-child > figure) { position: relative; margin: 0; padding: 0; display: flex; flex-flow: column nowrap; min-height: max-content; padding-right: 16%; & li:last-child > figure { position: absolute; top: 0; right: 0; height: 100%; width: 16%; margin: 0; & img { width: 100%; height: 100%; object-fit: cover; margin: 0; } } } & li > figure { max-width: 16%; margin: 0; } } & h2[id]{ padding-top: 0.4em; padding-block-start: 0.4em; padding-bottom: 0.4em; padding-block-end: 0.8em; } & h3[id], & h4[id], & h5[id], & h6[id] { padding-top: 0.4em; padding-block-start: 0.4em; padding-bottom: 0.4em; padding-block-end: 0.8em; } & ul { display: flex; flex-flow: column nowrap; } & figure:has(img, svg, video) { margin: var(--size-2) auto; max-width: 100%; & img, & svg, & video { max-inline-size: 100%; align-items: center; margin: var(--size-3) auto; } } #cover-image { margin: var(--size-4) auto; border-radius: var(--shape-corner-m); & img, & svg, & video { border-radius: inherit; max-width: 100%; margin: var(--size-4) auto; } & figcaption { font-style: normal; font-size: 100%; max-width: 100%; margin: var(--size-5) auto; display: contents; justify-content: left; text-align: left; } } *:not(pre) > code { display: inline-flex; flex-flow: row nowrap; background-color: var(--color-surface-container-high); color: var(--color-on-surface-variant); border-radius: var(--shape-corner-xs); padding-inline: 5px; margin-inline: 3px; } @keyframes fadeInSlideUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }}figure{display:flex;box-sizing:border-box;min-width:256px;width:510px;max-width:fit-content;min-height:max-content;height:fit-content;max-height:100%;align-self:center;margin:auto;margin-block:var(--size-2);object-fit:cover;object-position:center;padding:var(--size-4);flex-flow:column nowrap;text-align:left;position:relative;transition:opacity .4s ease-in-out}figcaption,figure::after{font-size:.9em;color:var(--color-secondary);text-align:left;margin-top:var(--size-2);visibility:hidden;opacity:0;transition:visibility .2s,opacity .4s ease-in-out}figure[data-year]::after{content:attr(data-year);font-size:.8em;margin-top:var(--size-1)}@media(min-width:600px){figure:hover figcaption,figure:hover::after{visibility:visible;opacity:1;transition:visibility .4s,opacity .4s ease-in-out}}@media(max-width:599px){figcaption,figure::after{visibility:visible;opacity:1}#post-content{display:flex;flex-flow:column nowrap;gap:var(--size-4)}}.highlight{position:relative;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch;align-content:stretch;overflow:auto;padding-block:var(--size-2);margin-bottom:var(--size-4); *{ font-size: var(--typescale-body-small-size); line-height: var(--typescale-body-small-line-height); font-weight: var(--typescale-body-small-weight); font-family: var(--typeface-mono); } & span { display: flex; flex-flow: row nowrap; & a { color: var(--color-secondary) !important; &:hover { color: var(--color-primary-fixed-dim) !important; } } } .copy-code { display: none; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 100; padding: var(--size-2); border-radius: var(--shape-corner-m); background-color: var(--color-tertiary-container); font-weight: var(--typeface-weight-bold); color: var(--color-on-tertiary-container); cursor: pointer; } &:hover { .copy-code { display: block; } }}.feedback-form{--layout-flex:1 1 auto;--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-padding:var(--size-13);--layout-margin:var(--size-13);--layout-gap:var(--size-13);--layout-shape:var(--shape-corner-m);--layout-border:initial;--layout-bg:var(--color-surface-container);box-shadow:var(--elevation1);color:var(--color-on-surface);.button { cursor: pointer; margin-top: var(--size-21); } .error { color: var(--color-on-error); } .status { color: var(--color-inverse-primary); }}@media screen and (max-width:599px){.feedback-form{--layout-padding:var(--size-5);--layout-margin:var(--size-2);--layout-gap:var(--size-10)}}.component.text-field.filled input:valid+label,.component.text-field.filled input:focus:not(:placeholder-shown)+label{opacity:0;transform:translateY(0)}.component.text-field.filled input.has-value+label{opacity:0!important;display:none!important}.layout.page-header{--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:initial;--layout-height:max-content;--layout-padding:var(--size-6);--layout-gap:var(--size-6);--header-height:var(--size-10);--layout-shape:var(--shape-corner-xl-bottom);--layout-border:initial;--layout-bg:var(--color-surface-container-lowest);.title{ gap: var(--layout-gap); word-wrap: break-word; white-space: normal; color: var(--color-outline-variant); } .description { word-wrap: break-word; color: var(--color-secondary); font-family: var(--typescale-body-medium-font); max-width: 120ch; margin: var(--input-post-content-margin); line-height: var(--input-line-height); flex-flow: row wrap; display: flex; gap: var(--layout-gap); transition: all var(--motion-duration-medium) var(--motion-easing-emphasized); } .metadata { color: var(--color-on-surface-variant); }}@media screen and (max-width:599px){.layout.page-header{.title { margin-top: var(--header-height); }}}.page-links{--layout-flex:initial;--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:flex-start;--layout-width:100%;--layout-height:auto;--layout-min-height:auto;--layout-padding:var(--spacing-panes);--layout-margin:0;--layout-gap:var(--size-6);--layout-border:inherit; #backlinks, #related-pages { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--size-8); .page-links-title { grid-column: 1 / 3; margin-block: var(--size-5) var(--size-3); padding: var(--size-2); font-kerning: 0.5rem; } .card { .card-content { align-items: flex-start } } } #share-links { flex: 1 1 auto; display: flex; flex-flow: column nowrap; max-width: var(--input-char-width); background: var(--color-surface-container-low); border-radius: var(--shape-corner-s); box-shadow: var(--elevation2); margin-block: var(--size-8); padding: var(--size-4); width: 100%; min-width: 75%; margin-inline: auto; gap: var(--size-4); .share-buttons, .action-buttons { display: flex; flex-flow: row wrap; align-items: center; padding: var(--size-1); gap: var(--size-6); margin-inline: auto; .button { flex: 1 1 0; } } .share-buttons { min-width: 95%; } .action-buttons { width: 85%; } .page-links-title { display: flex; flex-flow: row nowrap; width: 100%; } } .page-links-title { width: 100%; font-family: var(--typescale-headline-large-font); font-size: var(--typescale-headline-large-size); font-weight: var(--typescale-headline-large-weight); line-height: var(--typescale-headline-large-line-height); }}@media screen and (max-width:599px){.page-links{ #backlinks, #related-pages { display: flex; flex-flow: column nowrap; gap: var(--size-2); .page-links-title { width: 100%; margin-block: var(--size-5) var(--size-3); } .card .card-content { align-items: flex-start } }}}@media screen and (min-width:1200px){.page-links{ #backlinks, #related-pages { display: grid; grid-template-columns: repeat(4, 1fr); .page-links-title { grid-column: 1 / 5; margin-block: var(--size-5) var(--size-3); } .card .card-content { align-items: flex-start } }}}.card-thumbnail.small-thumbnail{margin-top:var(--size-1)}.page-navigation{--layout-flex:initial;--layout-display:flex;--layout-flex-flow:row nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:flex-start;--layout-width:100%;--layout-height:auto;--layout-min-height:auto;--layout-padding:var(--spacing-panes);--layout-margin:auto;--layout-gap:var(--size-2);--layout-border:inherit;max-width:var(--input-char-width);.prev, .next { flex: 1 1 calc(50% - var(--size-4)); display: flex; min-width: 0; flex-flow: column nowrap; align-content: flex-start; align-items: stretch; justify-content: flex-start; padding: var(--size-4); gap: var(--size-2); --container-shape: var(--shape-corner-xs); --container-color: var(--color-surface-container-lowest); color: var(--color-on-surface); box-shadow: var(--elevation1); .icon { font-size: 18px; } .page-direction { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; color: var(--color-on-surface-variant); } &.empty { opacity: 0; pointer-events: none; height: 0px; } }}@media screen and (min-width:600px){.page-navigation{--layout-flex-flow:row nowrap;--layout-gap:var(--size-8);--layout-width:100%;.prev, .next { flex: 1 1 0; }}}.content-wrapper{--layout-flex:1 1 auto;--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:initial;--layout-width:100%;--layout-height:100%;--layout-min-height:calc(100dvh - var(--size-32));--layout-margin:0;--layout-gap:0;--layout-border:initial;--layout-bg:var(--color-surface);--layout-shape:var(--shape-corner-none);position:relative;z-index:1}.page-header,.page-navigation,.page-links{--layout-bg:inherit;--layout-shape:var(--shape-corner-none)}.page-navigation{margin-top:var(--spacing-panes)}#footer{background-color:var(--color-surface-container);border-radius:var(--shape-corner-none)}#header{view-transition-name:none;will-change:transform}.toc li,.toc li::before,.toc ul{all:unset}.toc{--toc-indent-size:var(--size-4);--layout-display:flex;--layout-flex-flow:column nowrap;--layout-padding:0;--layout-margin:0;margin:var(--size-4);position:-webkit-sticky;position:sticky;top:var(--size-30);& ul { margin-left: var(--toc-indent-size); } & li { display: flex; flex-flow: column nowrap; } & a { font-family: var(--typescale-body-medium-font); font-size: var(--typescale-body-medium-size); font-weight: var(--typescale-body-medium-weight); line-height: var(--typescale-body-medium-line-height); color: var(--color-on-surface-variant); text-decoration: none; display: flex; flex-flow: row nowrap; align-items: center; padding: var(--size-1) var(--size-4); border-radius: var(--shape-corner-l); cursor: pointer; position: relative; z-index: 1; &:focus-visible { outline: 2px solid var(--color-outline-variant); outline-offset: -2px; text-decoration: none; color: inherit; } &::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background-color: var(--color-surface-container-lowest); z-index: -1; transition: width var(--motion-duration-short2) var(--motion-easing-emphasized); border-radius: var(--shape-corner-l); } &:target::before, &:hover::before, &:active::before, &:focus::before { width: 100%; } } .headline { font-family: var(--typescale-label-small-font); font-size: var(--typescale-label-small-size); font-weight: var(--typescale-label-small-weight); line-height: var(--typescale-label-small-line-height); padding: 0 var(--size-4) var(--size-2); color: var(--color-on-surface-variant); } .title { display: none; font-family: var(--typescale-headline-small-font); font-size: var(--typescale-headline-small-size); font-weight: var(--typescale-headline-small-weight); line-height: var(--typescale-headline-small-line-height); padding: 0 var(--size-4) var(--size-2); color: var(--color-on-surface); }}@media screen and (min-width:1400px){.toc{display:block;.title { display: block; }}}@media screen and (width:1401px){.toc{display:none}}html.is-publish-mode{all:unset;& main, .panes, .pane { all: unset; } #header, #footer, .page-header, .page-links, .page-navigation, #toc, #top-link { display: none; } #main-content-container { all: unset; flex: 1 1 auto; display: flex; flex-flow: column nowrap; align-items: stretch; overflow-y: auto; overflow-x: hidden; * { flex: 1 1 auto; } }}@media print{html,body,main,article,section{overflow:visible;margin:0}#header,#footer,#top-link,#share-links,.page-navigation,#related-pages,.component.app-bar.top.center{display:none!important}*{break-inside:auto!important;page-break-inside:auto!important}@page{size:auto}table,figure,img{page-break-inside:avoid}img{max-width:80vmin!important}h1,h2,h3,h4,h5,h6{page-break-after:avoid}}.upper{text-transform:uppercase}.lower{text-transform:lowercase}.capitalize{text-transform:capitalize}.strikethrough{text-decoration:line-through}.underline{text-decoration:underline}.overline{text-decoration:overline}body{font-family:archivo,sans-serif;text-wrap:pretty}h1,h2{font-family:archivo,sans-serif;font-optical-sizing:auto;font-weight:800;font-variation-settings:"wdth" 100;text-wrap:balance;box-sizing:border-box;padding:.5rem 0;overflow:hidden}.page-404{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;height:100%;width:100%;gap:var(--spacing-panes);margin-block:var(--spacing-panes);& h1 { font-family: var(--typeface-mono); color: var(--color-on-surface); } & h2 { color: var(--color-on-surface-variant); }}.archive-entry-title{margin:var(--size-2)0}.archive-year-header *,.archive-count,.archive-meta{font-family:var(--typeface-mono)}.archive-count,.archive-meta{color:var(--color-on-surface-variant)}.archive-count{font-size:var(--typescale-title-small-size);margin-left:unset;vertical-align:super}.archive-year{padding:var(--size-8);& h2, & h3 { color: var(--color-primary); } [class*="-link"] { text-decoration: none; } .archive-month { background: var(--color-surface-container-lowest); padding: var(--size-5); border-radius: var(--shape-corner-l); box-shadow: var(--elevation2); margin: var(--size-3) 0 var(--size-3) var(--size-1); .archive-posts { padding: var(--size-3); margin: var(--size-2) 0 0 var(--size-1); .archive-entry { background: var(--color-surface-container-low); padding: var(--size-5); margin: var(--size-3); border-radius: var(--shape-corner-m); box-shadow: var(--elevation3); &:hover { background: var(--color-surface-container); } .archive-entry-title { display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } } } }}#home-page{flex:auto;display:flex;flex-flow:column nowrap;padding:unset;margin:unset; #home-header { flex: 0 1 auto; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; text-align: center; gap: var(--size-5); padding: var(--size-14) var(--spacing-panes); min-height: 18dvh; .site-id { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: var(--size-8); & img { object-fit: cover; max-width: var(--size-20); animation-duration: 0; animation: none; animation-name: none; view-transition-name: none; } } .tagline { color: var(--color-complementary); & strong { color: var(--color-add180); margin-inline: var(--size-2); } } } #home-blurb { flex: 0 1 0; display: flex; flex-flow: column nowrap; text-wrap: balance; gap: var(--size-5); padding: var(--size-8); margin: var(--spacing-panes); border-radius: var(--shape-corner-m); .blurb { display: flex; flex-flow: column nowrap; text-wrap: balance; gap: var(--size-5); padding: var(--size-8); border-radius: var(--shape-corner-xl); } } .home-page-content { margin: 0 var(--spacing-panes); padding: 0 var(--spacing-panes); border-radius: var(--shape-corner-m); display: flex; flex-flow: column nowrap; align-items: flex-start; padding-bottom: var(--size-8); flex: 1 1 auto; width: var(--layout-width); margin-inline: auto; & h2 { flex-basis: auto; } & li { display: inline-flex; flex-flow: row wrap; padding-right: var(--spacing-panes); &::before { display: none; } } .welcome-page{ margin-inline: var(--spacing-panes); padding-inline: var(--spacing-panes); max-width: var(--input-char-width); height: auto; figure, img { display: flex; width: 100%; height: auto; max-width: 1440px; margin-block: 0; gap:0; } h2{ line-height: normal; } } video { max-inline-size: 100%; max-block-size: fit-content; width: fit-content; max-width: 510px; height: auto; max-height: 510px; align-items: center; margin: var(--size-3) auto; } } .home-buttons-container { display: flex; flex-flow: row wrap; gap: var(--size-3); margin: var(--size-8); .home-buttons { flex: 1 1 auto; display: flex; flex-flow: column nowrap; gap: var(--size-5); padding: var(--size-5); min-width: calc(33% - var(--size-5)); & h3 { margin-block: var(--size-3) var(--size-5); } .button, .button span { flex: 0 1 auto; min-width: fit-content; max-height: fit-content; } } }}@media screen and (max-width:599px){#home-page{.site-id svg, .site-id img { display: none; view-transition-name: none; }}}.most-recently-updated-pages{min-width:100%;border:1px solid var(--color-outline-variant);margin-block:var(--size-16)var(--size-1);overflow-x:auto;& caption { margin-bottom: var(--spacing-panes); } & tbody { & tr { color: var(--color-on-surface-variant); &:nth-child(even) { background: var(--color-surface-container-lowest); } &:nth-child(odd) { background: var(--color-surface-container-low); } } } & td, & th { padding: var(--size-1) var(--size-2); border: 1px solid var(--color-outline-variant); } & th { background: var(--color-surface); text-align: left; padding: var(--size-3); color: var(--color-on-surface); font-family: var(--typescale-title-large-font); font-size: var(--typescale-title-large-size); line-height: var(--typescale-title-large-line-height); font-weight: var(--typescale-title-large-weight); }}#searchbox{position:relative;display:flex;flex-flow:column nowrap;align-self:stretch;&:has(#searchResults:not(:empty)) { .search.bar { &::before { border-bottom:1px solid var(--color-outline-variant); border-radius:var(--shape-corner-xl-top); box-shadow:var(--elevation0); } } } #searchResults { background:var(--color-surface-container-high); border-radius:var(--shape-corner-xl-bottom); & li { margin-left:unset; position:relative; min-width:fit-content; color:var(--color-on-surface); padding:var(--size-4); &:active { background:var(--color-primary-container); } &::before { display:none; } } & a { position:absolute; inset:0; } .focus,& li:hover { color:var(--color-on-tertiary-container); background:var(--color-tertiary-container); } }}#page-sitemap{padding:unset;margin:unset;max-width:100%;overflow-x:auto;.table-sitemap { width: 100%; background: var(--color-surface-container); padding: var(--size-1); & td, & th { padding: var(--size-2) var(--size-4); } & th { background: var(--color-surface-container-lowest); border-bottom: var(--color-outline-variant); text-align: left; color: var(--color-on-surface); font-family: var(--typescale-title-medium-font); font-size: var(--typescale-title-medium-size); line-height: var(--typescale-title-medium-line-height); font-weight: var(--typescale-title-medium-weight); } & tr:nth-of-type(2n) { background: var(--color-surface-container-low); } }}@media(max-width:599px){th{display:none}td{display:grid;grid-template-columns:15ch auto;gap:var(--size-4);padding:var(--size-4)var(--size-8);&:first-child { padding-top:var(--size-16); } &:last-child { padding-bottom:var(--size-16); } &::before { font-weight:var(--typeface-weight-bold); text-transform:capitalize; } &:nth-of-type(1) { display:none; } &:nth-of-type(2)::before { content:"title"; } &:nth-of-type(3)::before { content:"link"; } &:nth-of-type(4)::before { content:"date created"; } &:nth-of-type(5)::before { content:"last modified"; } &:nth-of-type(6)::before { content:"kind"; } &:nth-of-type(7)::before { content:"type"; } &:nth-of-type(8)::before { content:"layout"; }}}