@property --cur-viewport-width{syntax:"<length>";inherits:false;initial-value:0}@property --min-viewport-width{syntax:"<length>";inherits:false;initial-value:0}@property --max-viewport-width{syntax:"<length>";inherits:false;initial-value:0}:root{--cur-viewport-width:100vw;--min-viewport-width:25rem;--max-viewport-width:80rem;--cur-width:calc(tan(atan2(var(--cur-viewport-width), 1px)));--min-width:calc(tan(atan2(var(--min-viewport-width), 1px)));--max-width:calc(tan(atan2(var(--max-viewport-width), 1px)));--x:clamp(0, (var(--cur-width) - var(--min-width)) / (var(--max-width) - var(--min-width)), 1);--ease-out-sine:sin((var(--x) * pi) / 2);--scale:calc((sqrt(5) + 1) / 2);--px-to-rem:.0625;--xxx-small:round(pow(var(--scale), -4), var(--px-to-rem));--xx-small:round(pow(var(--scale), -3), var(--px-to-rem));--x-small:round(pow(var(--scale), -2), var(--px-to-rem));--small:round(pow(var(--scale), -1), var(--px-to-rem));--medium:round(pow(var(--scale), 0), var(--px-to-rem));--large:round(pow(var(--scale), 1), var(--px-to-rem));--x-large:round(pow(var(--scale), 2), var(--px-to-rem));--xx-large:round(pow(var(--scale), 3), var(--px-to-rem));--xxx-large:round(pow(var(--scale), 4), var(--px-to-rem));--xxxx-large:round(pow(var(--scale), 5), var(--px-to-rem));--page-margin:calc(clamp(min(var(--x-large), var(--xxx-large)), min(var(--x-large), var(--xxx-large)) + var(--ease-out-sine) * (max(var(--x-large), var(--xxx-large)) - min(var(--x-large), var(--xxx-large))), max(var(--x-large), var(--xxx-large))) * 1rem);--page-margin-inline:calc(clamp(min(var(--large), var(--xxx-large)), min(var(--large), var(--xxx-large)) + var(--ease-out-sine) * (max(var(--large), var(--xxx-large)) - min(var(--large), var(--xxx-large))), max(var(--large), var(--xxx-large))) * 1rem);--column-width:calc(40rem + (var(--page-margin) * 2));--column-gutter:var(--page-margin);--nav-size:calc(var(--medium) * 1rem);--color-base:oklch(0% 0 0);--fg-color:oklch(from var(--color-base) 30% c h);--bg-color:oklch(from var(--color-base) 95% c h);--secondary-fg-color:oklch(from var(--color-base) 80% c h);--tertiary-fg-color:oklch(from var(--color-base) 70% c h);--secondary-bg-color:oklch(from var(--color-base) 90% c h);--random-fg-color:oklch(from var(--color-base) 35% c h);--random-bg-color:oklch(from var(--color-base) 100% c h);--accent-color:oklch(69.62% .1955 32.32)}@media (prefers-color-scheme:dark){:root{--fg-color:oklch(85% 0 0);--bg-color:oklch(30% 0 0);--secondary-fg-color:oklch(50% 0 0);--tertiary-fg-color:oklch(70% 0 0);--secondary-bg-color:oklch(35% 0 0);--random-fg-color:oklch(80% 0 0);--random-bg-color:oklch(35% 0 0);--accent-color:oklch(60% .1955 32.32)}}.font-size-demo{--horizontal-line:linear-gradient(90deg, var(--secondary-fg-color) 50%, transparent 50%) 0 0 / .5rem .0625rem repeat-x;--vertical-line:linear-gradient(var(--tertiary-fg-color), var(--tertiary-fg-color)) 0 0 / .0625rem 1rem no-repeat;--sample-linebox-bg-color:#d0d0d0;--demo-padding:calc(var(--large) * 1rem)}@media (width>=40rem){.font-size-demo{--demo-padding:calc(var(--x-large) * 1rem)}}@media (prefers-color-scheme:dark){.font-size-demo{--sample-linebox-bg-color:#ffffff1a}}.font-size-demo__figure{background:var(--secondary-bg-color)}.font-size-demo__metrics{padding:var(--demo-padding)}.font-size-demo__inputs{padding-block:calc(var(--xx-large) * 1rem) calc(var(--small) * 1rem);flex-flow:row;display:flex}.font-size-demo__inputs>*{text-align:center;flex:33.3333%}.font-size-demo__inputs span{--size:var(--small);--ascender:1.04785;--cap-height:.710938;--x-height:.52832;--descender:-.270996;--left-bearing:0;--char-height:var(--x-height);--font-size-adjust:var(--char-height);--font-size:calc(var(--size) / var(--font-size-adjust));font-family:Roboto Mono,Roboto Mono fallback;font-weight:400;font-size:calc(var(--font-size) * 1rem);line-height:calc(var(--large) * var(--font-size-adjust));border-bottom:2px solid #0000}.font-size-demo__inputs input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.font-size-demo__inputs input:checked+span{border-color:var(--fg-color)}.font-size-demo__sample{--size:6;--padding-top:calc(var(--xxx-large) * 1rem);--char-height:var(--cap-height);--font-size-adjust:var(--char-height);--font-size:calc(var(--size) / var(--font-size-adjust));font-size:calc(var(--font-size) * 1rem);line-height:calc(var(--large) * var(--font-size-adjust))}.font-size-demo__sample[data-metric=em]{--char-height:1;--char-top-edge:text}.font-size-demo__sample[data-metric=cap-height]{--char-height:var(--cap-height);--char-top-edge:cap}.font-size-demo__sample[data-metric=x-height]{--char-height:var(--x-height);--char-top-edge:ex}.font-size-demo__sample *{font-family:inherit}.font-size-demo__sample__linebox{--box-height:calc(var(--size) * var(--large) * 1rem);--line-box:calc((var(--ascender) - var(--descender)) * 1em);--half-box-offset:calc((var(--box-height) - var(--line-box)) / 2);--linebox-offset:calc(var(--half-box-offset) - (1em * var(--descender)));--linebox-padding-top:calc(var(--padding-top) + var(--linebox-offset));padding-block:var(--linebox-padding-top) 0;--em-offset:calc(var(--linebox-padding-top) + (var(--box-height) - var(--half-box-offset) - (1em * (1 - var(--descender)))));--cap-offset:calc(var(--linebox-padding-top) + (var(--box-height) - var(--half-box-offset) - (1em * (var(--cap-height) - var(--descender)))));--x-offset:calc(var(--linebox-padding-top) + (var(--box-height) - var(--half-box-offset) - (1em * (var(--x-height) - var(--descender)))));--baseline-offset:calc(var(--linebox-padding-top) + (var(--box-height) - var(--half-box-offset) - (-1em * var(--descender))));margin-bottom:calc(var(--linebox-offset) * -1);background:var(--horizontal-line), var(--horizontal-line), var(--horizontal-line), var(--horizontal-line), var(--vertical-line), var(--vertical-line), var(--vertical-line);background-position:0 var(--em-offset), 0 var(--cap-offset), 0 var(--x-offset), 0 var(--baseline-offset), 16.6667% 0, 50% 0, 83.3333% 0;background-size:.5rem .0625rem, .5rem .0625rem, .5rem .0625rem, .5rem .0625rem, .0625rem calc(var(--em-offset) + .0625rem), .0625rem calc(var(--cap-offset) + .0625rem), .0625rem calc(var(--x-offset) + .0625rem)}.font-size-demo__sample__text{text-align:center;pointer-events:none}.font-size-demo__value{--size:var(--small);--ascender:1.04785;--cap-height:.710938;--x-height:.52832;--descender:-.270996;--left-bearing:0;--char-height:var(--x-height);--font-size-adjust:var(--char-height);--font-size:calc(var(--size) / var(--font-size-adjust));font-family:Roboto Mono,Roboto Mono fallback;font-weight:400;font-size:calc(var(--font-size) * 1rem);line-height:calc(var(--large) * var(--font-size-adjust));padding:calc(var(--x-large) * 1rem) var(--demo-padding);gap:var(--demo-padding);flex-flow:row;display:flex}.font-size-demo__value>*{text-align:center;--char-height:var(--cap-height);text-box:trim-both cap alphabetic;flex:33.3333%;display:block}@supports not (text-box:trim-both cap alphabetic){.font-size-demo__value>*{--half-leading:calc((var(--char-height) * 1em - 1lh) / 2);--offset:round(calc(((var(--descender) + (var(--ascender) - var(--char-height))) / 2) * 1em), 1px)}.font-size-demo__value>:before{content:"";margin-bottom:round(var(--half-leading) - var(--offset), 1px);display:table}.font-size-demo__value>:after{content:"";margin-top:calc(var(--half-leading) + var(--offset));display:table}}.font-size-demo__value .disabled{opacity:.25}.font-size-demo figcaption{margin-block-end:calc(var(--large) * 1rem)}.font-size-demo .tables{gap:calc(var(--medium) * 1rem);display:grid}@media (width>=40rem){.font-size-demo .tables{grid-template:1fr/1fr 1fr}.font-size-demo .tables h3{grid-area:1/1/auto/3}}.font-size-demo .tables h3{margin-block:0}.font-size-demo .tables span[aria-hidden]{color:#0000;width:0;display:inline-block}@media (width<40rem){.font-size-demo .empty{display:none}}.font-size-demo table{table-layout:fixed;border-collapse:collapse;--size:var(--small);--ascender:1.04785;--cap-height:.710938;--x-height:.52832;--descender:-.270996;--left-bearing:0;--char-height:var(--x-height);--font-size-adjust:var(--char-height);--font-size:calc(var(--size) / var(--font-size-adjust));width:100%;font-family:Roboto Mono,Roboto Mono fallback;font-weight:400;font-size:calc(var(--font-size) * 1rem);line-height:calc(var(--large) * var(--font-size-adjust))}.font-size-demo caption,.font-size-demo th,.font-size-demo td{--char-height:var(--cap-height);text-box:trim-both cap alphabetic}@supports not (text-box:trim-both cap alphabetic){.font-size-demo caption,.font-size-demo th,.font-size-demo td{--half-leading:calc((var(--char-height) * 1em - 1lh) / 2);--offset:round(calc(((var(--descender) + (var(--ascender) - var(--char-height))) / 2) * 1em), 1px)}.font-size-demo caption:before,.font-size-demo th:before,.font-size-demo td:before{content:"";margin-bottom:round(var(--half-leading) - var(--offset), 1px);display:table}.font-size-demo caption:after,.font-size-demo th:after,.font-size-demo td:after{content:"";margin-top:calc(var(--half-leading) + var(--offset));display:table}}.font-size-demo caption,.font-size-demo th,.font-size-demo td{padding:calc(var(--medium) * 1rem) 0}.font-size-demo caption,.font-size-demo th{text-align:left;font-weight:900}.font-size-demo td{text-align:right}.font-size-demo caption,.font-size-demo tr{background:var(--horizontal-line);background-position:0 100%}.font-size-demo caption{background-image:linear-gradient(var(--secondary-fg-color), var(--secondary-fg-color))}.font-size-demo select{--size: ;width:100%;font-size:inherit;color:var(--fg-color);font-family:inherit;font-weight:700;line-height:calc(var(--line-height) * 1rem);padding-block:calc(var(--small) * 1rem);padding-inline:0 calc(var(--medium) * 1rem);box-sizing:border-box;border:0;border-bottom:.0625rem solid var(--fg-color);appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' fill='none' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right calc(var(--xx-small) * 1rem) top 50%;border-radius:0;margin:0;display:inline-block}@media (prefers-color-scheme:dark){.font-size-demo select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23CCCCCC' fill='none' /%3E%3C/svg%3E")}}.font-size-demo select::-ms-expand{display:none}.font-size-demo select option{font-weight:700}.font-size-demo fieldset{margin:calc(var(--medium) * 1rem) 0 0;border:0;padding:0}.font-size-demo label{--char-height:var(--cap-height);text-box:trim-both cap alphabetic;display:block}@supports not (text-box:trim-both cap alphabetic){.font-size-demo label{--half-leading:calc((var(--char-height) * 1em - 1lh) / 2);--offset:round(calc(((var(--descender) + (var(--ascender) - var(--char-height))) / 2) * 1em), 1px)}.font-size-demo label:before{content:"";margin-bottom:round(var(--half-leading) - var(--offset), 1px);display:table}.font-size-demo label:after{content:"";margin-top:calc(var(--half-leading) + var(--offset));display:table}}.font-size-demo input[type=checkbox]{appearance:none;background-color:var(--bg-color);font:inherit;color:currentColor;--size:var(--cap-height);width:calc(var(--size) * 1rem);height:calc(var(--size) * 1rem);border:.0625rem solid;border-radius:0;margin:0;margin-inline-end:calc(var(--size) * 1rem)}.font-size-demo input[type=checkbox]:checked{background-color:currentColor}.font-size-demo .scale{--border-width:30;--border-scale:calc(var(--border-width) / 16);--border-rem:calc(var(--border-scale) * 1rem);height:calc((var(--size) - 2 * var(--border-scale)) * 1rem);--sprite-url-light:url(/img/sprite.svg#scale-light);--sprite-url-dark:url(/img/sprite.svg#scale-dark);--sprite-url:var(--sprite-url-light);margin-inline-end:calc(var(--large) * 1rem);display:inline-block}@media (prefers-color-scheme:dark){.font-size-demo .scale{--sprite-url:var(--sprite-url-dark)}}.font-size-demo .scale{border-style:solid;border-color:#0000;border-width:var(--border-rem) 0 var(--border-rem) var(--border-rem);border-image:var(--sprite-url);border-image-slice:calc(var(--border-width) / 260 * 100%) calc(var(--border-width) / 520 * 100%);border-image-width:var(--border-rem) 0 var(--border-rem) var(--border-rem)}.font-size-demo__callout{top:calc((min(25vw, 10rem) - var(--page-margin)) * -1);right:calc(var(--page-margin) * -1 + var(--large) * 1rem);background:var(--fg-color);color:var(--bg-color);width:min(25vw,10rem);font-size:min(3vw, var(--medium) * 1rem);aspect-ratio:1;text-align:center;padding:calc(var(--medium) * 1rem);box-sizing:border-box;pointer-events:none;border-radius:50%;flex-wrap:wrap;align-content:center;font-weight:900;display:flex;position:absolute}