@property --cur-viewport-width{syntax: "<length>"; initial-value: 0px; inherits: false;}@property --min-viewport-width{syntax: "<length>"; initial-value: 0px; inherits: false;}@property --max-viewport-width{syntax: "<length>"; initial-value: 0px; inherits: false;}:root{--cur-viewport-width: 100vw;--min-viewport-width: 25rem;--max-viewport-width: 80rem;--cur-width: calc(100vw/1vw) ;--cur-width: tan(atan2(var(--cur-viewport-width), 1px)) ;--min-width: tan(atan2(var(--min-viewport-width), 1px)) ;--max-width: 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(min-width:40rem){.font-size-demo{--demo-padding: calc(var(--x-large) * 1rem)}}@media(prefers-color-scheme:dark){.font-size-demo{--sample-linebox-bg-color: rgba(255, 255, 255, .1)}}.font-size-demo__figure{background:var(--secondary-bg-color)}.font-size-demo__metrics{padding:var(--demo-padding)}.font-size-demo__inputs{display:flex;flex-flow:row;padding-block:calc(var(--xx-large) * 1rem) calc(var(--small) * 1rem)}.font-size-demo__inputs>*{flex:1 1 33.333333%;text-align:center}.font-size-demo__inputs span{--size: var(--small);--ascender: 1.0478515625;--cap-height: .7109375;--x-height: .5283203125;--descender: -.2709960938;--left-bearing: 0;font-family:Roboto Mono,Roboto Mono fallback;font-weight:400;--char-height: var(--x-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));border-bottom:2px transparent solid}.font-size-demo__inputs input{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.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.6666666667% 0,50% 0,83.3333333333% 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.0478515625;--cap-height: .7109375;--x-height: .5283203125;--descender: -.2709960938;--left-bearing: 0;font-family:Roboto Mono,Roboto Mono fallback;font-weight:400;--char-height: var(--x-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));padding:calc(var(--x-large) * 1rem) var(--demo-padding);display:flex;flex-flow:row;gap:var(--demo-padding)}.font-size-demo__value>*{flex:1 1 33.333333%;text-align:center;display:block;--char-height: var(--cap-height);text-box:trim-both cap alphabetic}@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:"";display:table;margin-bottom:round(var(--half-leading) - var(--offset),1px)}.font-size-demo__value>*:after{content:"";display:table;margin-top:calc(var(--half-leading) + var(--offset))}}.font-size-demo__value .disabled{opacity:.25}.font-size-demo figcaption{margin-block-end:calc(var(--large) * 1rem)}.font-size-demo .tables{display:grid;gap:calc(var(--medium) * 1rem)}@media(min-width:40rem){.font-size-demo .tables{grid-template:1fr/1fr 1fr}.font-size-demo .tables h3{grid-column:1/3;grid-row:1}}.font-size-demo .tables h3{margin-block:0}.font-size-demo .tables span[aria-hidden]{display:inline-block;width:0;color:transparent}@media not (min-width:40rem){.font-size-demo .empty{display:none}}.font-size-demo table{table-layout:fixed;width:100%;border-collapse:collapse;--size: var(--small);--ascender: 1.0478515625;--cap-height: .7109375;--x-height: .5283203125;--descender: -.2709960938;--left-bearing: 0;font-family:Roboto Mono,Roboto Mono fallback;font-weight:400;--char-height: var(--x-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 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:"";display:table;margin-bottom:round(var(--half-leading) - var(--offset),1px)}.font-size-demo caption:after,.font-size-demo th:after,.font-size-demo td:after{content:"";display:table;margin-top:calc(var(--half-leading) + var(--offset))}}.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:left bottom}.font-size-demo caption{background-image:linear-gradient(var(--secondary-fg-color),var(--secondary-fg-color))}.font-size-demo select{--size: ;width:100%;display:inline-block;font-size:inherit;font-family:inherit;font-weight:700;color:var(--fg-color);line-height:calc(var(--line-height) * 1rem);padding-block:calc(var(--small) * 1rem);padding-inline:0 calc(var(--medium) * 1rem);box-sizing:border-box;margin:0;border:0;border-bottom:.0625rem solid var(--fg-color);border-radius:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:transparent;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%}@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;padding:0;border:0}.font-size-demo label{display:block;--char-height: var(--cap-height);text-box:trim-both cap alphabetic}@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:"";display:table;margin-bottom:round(var(--half-leading) - var(--offset),1px)}.font-size-demo label:after{content:"";display:table;margin-top:calc(var(--half-leading) + var(--offset))}}.font-size-demo input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:var(--bg-color);margin:0;font:inherit;color:currentColor;--size: var(--cap-height);width:calc(var(--size) * 1rem);height:calc(var(--size) * 1rem);border:.0625rem currentColor solid;border-radius: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);display:inline-block;height:calc((var(--size) - 2 * var(--border-scale)) * 1rem);margin-inline-end:calc(var(--large) * 1rem);--sprite-url-light: url(/img/sprite.svg#scale-light);--sprite-url-dark: url(/img/sprite.svg#scale-dark)}.font-size-demo .scale{--sprite-url: var(--sprite-url-light)}@media(prefers-color-scheme:dark){.font-size-demo .scale{--sprite-url: var(--sprite-url-dark)}}.font-size-demo .scale{border-style:solid;border-color:transparent;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{position:absolute;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;border-radius:50%;display:flex;text-align:center;align-content:center;flex-wrap:wrap;padding:calc(var(--medium) * 1rem);box-sizing:border-box;font-weight:900;pointer-events:none}