.animation{transition:background 4s;animation:example-animation 1s infinite alternate;animation-play-state:paused;padding:3em}.animation.in-view{background:#000;animation-play-state:running}@keyframes example-animation{0%{color:red}to{color:#0f0}}:root{--character-grid-cell:4rem;--character-grid-font-zize:2rem;--character-grid-gap:0}ol{margin:0;padding:0}.container-glyphs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:1px 1px;grid-template-areas:"glyphs preview";position:relative}@media only screen and (max-width:590px){.container-glyphs{display:block;width:94vw}}.character-grid-zoom-container{pointer-events:none;position:-webkit-sticky;position:sticky;top:0;background:var(--background);font-size:28vw;text-align:center}@media only screen and (max-width:590px){.character-grid-zoom-container{display:none}}.container-preview{grid-area:glyphs;position:absolute;top:0;left:0;right:0;bottom:0}.character-grid{grid-area:preview}.character-grid-list{list-style-type:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--character-grid-cell),1fr));gap:1px;font-size:var(--character-grid-font-zize);background:var(--background)}.character-grid-list>li{display:flex;height:var(--character-grid-cell);outline:1px solid var(--grey-dark);justify-content:center;align-items:center}.character-grid-list>li:hover{cursor:pointer;background-color:var(--text);color:var(--background)}@font-face{font-family:STIX Two Text Bold;src:url(./fonts/STIX2Text-Bold.cbe5baa62c07ac0e7e5809552734238b.woff2)}.stix-two-text-bold{font-family:STIX Two Text Bold,var(--specimen-fallback-font,monospace),monospace}@font-face{font-family:STIX Two Text Bold Italic;src:url(./fonts/STIX2Text-BoldItalic.d8ea231671919371fbff357fe06452c3.woff2)}.stix-two-text-bold-italic{font-family:STIX Two Text Bold Italic,var(--specimen-fallback-font,monospace),monospace}@font-face{font-family:STIX Two Text Italic;src:url(./fonts/STIX2Text-Italic.925bcb98c371de1527af31fa1ac5bfa7.woff2)}.stix-two-text-italic{font-family:STIX Two Text Italic,var(--specimen-fallback-font,monospace),monospace}@font-face{font-family:STIX Two Text;src:url(./fonts/STIX2Text-Regular.3d11ae4eadf760794ef95d4b33e1d5ab.woff2)}.stix-two-text{font-family:STIX Two Text,var(--specimen-fallback-font,monospace),monospace}*,:after,:before{box-sizing:border-box}body,html{padding:0;margin:0}ol,ul{list-style-type:none;padding:0}.interactive-controls{--label-width:7em}.interactive-controls-container{margin:1rem 0}.interactive-controls-text{font-size:calc(var(--font-size)*1px);line-height:var(--line-height)}@media only screen and (max-width:590px){.interactive-controls-text{font-size:calc(var(--font-size)*0.6px)}}.interactive-controls-instances,.interactive-controls-sliders li{display:flex;align-items:center}.interactive-controls label{flex:none;min-width:var(--label-width)}.interactive-controls-instances select,.interactive-controls-slider{width:100%}main{margin:0 auto;display:none}.fonts-loaded main{display:block}.loading-message{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background:#000;color:#fff;font-family:monospace;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fonts-failed .loading-message-loading,.fonts-loaded .loading-message,.loading-message-failed{display:none}.fonts-failed .loading-message-failed{display:inline}.variable-support-message{display:block}@supports (font-variation-settings:normal){.variable-support-message{display:none}}:root{--light:#fff;--dark:#000;--grey-light:#eee;--grey-mid:#999;--grey-dark:#666;--text:var(--dark);--background:var(--light);--font-system:"Inter",sans-serif;--specimen-fallback-font:var(--font-system)}html[data-dark-mode=true]{--text:var(--light);--background:var(--dark)}body{font-family:var(--font-system);color:var(--text);background-color:var(--background);transition-duration:.2s;transition-property:color,background-color;transition-timing-function:ease}main{max-width:90rem;padding:0 3vw}a,button{color:inherit}button{padding:.5rem;border:none;font:inherit;background-color:initial;cursor:pointer}.ltr{direction:ltr}.rtl{direction:rtl;unicode-bidi:bidi-override}.ltrttb{writing-mode:vertical-lr}.ltrttb,.rtlttb{-webkit-text-orientation:upright;text-orientation:upright}.rtlttb{writing-mode:vertical-rl}.mt-1u{margin-top:1rem}.mt-2u{margin-top:2rem}.mt-3u{margin-top:3rem}.mt-4u{margin-top:4rem}.mt-5u{margin-top:5rem}.mb-1u{margin-bottom:1rem}.mb-2u{margin-bottom:2rem}.mb-3u{margin-bottom:3rem}.mb-4u{margin-bottom:4rem}.mb-5u{margin-bottom:5rem}.pt-1u{padding-top:1rem}.pt-2u{padding-top:2rem}.pt-3u{padding-top:3rem}.pt-4u{padding-top:4rem}.pt-5u{padding-top:5rem}.pb-1u{padding-bottom:1rem}.pb-2u{padding-bottom:2rem}.pb-3u{padding-bottom:3rem}.pb-4u{padding-bottom:4rem}.pb-5u{padding-bottom:5rem}.italic{font-style:italic}.type-8xl{font-size:clamp(5rem,25vw,21rem);padding:0;margin:0}.type-7xl{font-size:clamp(4rem,17vw,17.5rem);padding:0;margin:0}.type-6xl{font-size:clamp(3rem,15vw,15.5rem);padding:0;margin:0}.type-5xl{font-size:clamp(2rem,14vw,14rem);padding:0;margin:0}.type-4xl{font-size:clamp(1.6rem,6vw,8rem);padding:0;margin:0}.type-3xl{font-size:clamp(3rem,5vw,6.2rem)}.type-2xl{font-size:clamp(1.8rem,3vw,3.4rem)}.type-xl{font-size:clamp(1.4rem,2vw,2.8rem)}.type-l{font-size:clamp(1.3rem,1.6vw,1.8rem)}.type-m{font-size:clamp(1.2rem,1.4vw,1.6rem)}.type-s{font-size:.8rem}.type-xs{font-size:.7rem}.type-2xs{font-size:.6rem}.type-3xs{font-size:.5rem}.fw100{font-variation-settings:"wght" 100}.fw200{font-variation-settings:"wght" 200}.fw300{font-variation-settings:"wght" 300}.fw400{font-variation-settings:"wght" 400}.fw500{font-variation-settings:"wght" 500}.fw600{font-variation-settings:"wght" 600}.fw700{font-variation-settings:"wght" 700}.fw800{font-variation-settings:"wght" 800}.fw900{font-variation-settings:"wght" 900}.lh08{line-height:.8}.lh09{line-height:.9}.lh10{line-height:1}.lh11{line-height:1.1}.lh12{line-height:1.2}.lh13{line-height:1.3}.lh14{line-height:1.4}.align-centre{text-align:center}.align-justify{text-align:justify}.align-left{text-align:left}.align-right{text-align:right}.columns-2{column-count:2;column-gap:1em}.columns-3{column-count:3;column-gap:.8em}.container{border-top:1px solid var(--text);padding:0}.masthead{display:grid;grid-template-columns:3fr 1fr;grid-template-rows:1fr;gap:1px 1px;grid-template-areas:"title meta"}@media only screen and (max-width:590px){.masthead{display:inline-block}}.masthead-title{grid-area:title}.masthead-meta{grid-area:meta;font-size:.8rem;font-family:var(--font-system);line-height:1.3;padding-left:1vw}.faux-button{background-color:var(--text);display:inline-block;padding:1em 3em;margin:2em 0 0;color:var(--background);text-decoration:none;font-weight:600;border:1px solid var(--background);transition-duration:.2s;transition-property:color,background-color,border;transition-timing-function:ease}.faux-button:hover{background-color:var(--background);color:var(--text);border:1px solid var(--text)}.meta{font-family:var(--font-system);text-transform:uppercase;letter-spacing:1px;font-size:.7em;color:var(--grey-mid)}.interactive-controls{display:grid;grid-template-columns:3fr 1fr;grid-template-rows:1fr;gap:1px 1px;grid-template-areas:"preview controls"}@media only screen and (max-width:590px){.interactive-controls{display:inline-block}}.controls{grid-area:controls;border-left:1px solid var(--text);padding-left:1vw;font-family:var(--font-system)}@media only screen and (max-width:590px){.controls{border:none}}.interactive-controls-text{grid-area:preview;padding:0 50px 0 0}[contenteditable]{outline:0 solid transparent}.interactive-controls label{font-size:.8rem;font-weight:400}.interactive-controls-buttons button{padding:8px 8px 5px;color:var(--text);transition-property:color,background-color;transition-timing-function:ease;transition-duration:.2s}.interactive-controls-buttons button svg{width:18px;fill:currentColor;transition:fill .2s ease}.interactive-controls-buttons button.active{background:var(--grey-mid)}input[type=range]{height:2em;-webkit-appearance:none;width:100%;background-color:var(--background)}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:1px;cursor:pointer;background:var(--text);border-radius:0;border:0 solid var(--text)}input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 var(--text);border:3px solid var(--background);height:17px;width:17px;border-radius:12px;background:var(--text);cursor:pointer;-webkit-appearance:none;margin-top:-8px}input[type=range]:focus::-webkit-slider-runnable-track{background:var(--text)}input[type=range]::-moz-range-track{width:100%;height:1px;cursor:pointer;background:var(--text)}input[type=range]::-moz-range-thumb{border:3px solid var(--background);height:12px;width:12px;border-radius:9px;background:var(--text);cursor:pointer}input[type=range]::-ms-track{width:100%;height:4px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:#000;border:0 solid #000;border-radius:0;box-shadow:0 0 0 #000}input[type=range]::-ms-thumb{margin-top:1px;box-shadow:0 0 0 #000;border:0 solid #000;height:20px;width:20px;border-radius:10px;background:#000;cursor:pointer}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#000}.setting{display:grid;grid-template-columns:1fr 1fr;grid-gap:2rem}@media only screen and (max-width:590px){.setting{display:inline-block}}.column-1{grid-column:1}.column-2{grid-column:2}.setting p{margin:.6em 0 .4em;padding:0}.character-grid h3{font-family:var(--font-system);font-size:.7rem;color:var(--grey-mid);text-transform:uppercase;letter-spacing:1px}.footer,.language{font-size:.8rem;font-family:var(--font-system);line-height:1.3}