:root{--primary: #555;--accent: #09FF84;--accent-focus: color-mix(in srgb, var(--accent) 90%, #000);--color-text-dark: #333;--color-text-light: #bbb;--border: 2px solid rgba(0, 0, 0, .2)}*,*:before,*:after{box-sizing:inherit}html{min-height:100%;box-sizing:border-box}body{margin:0;display:flex;padding:20px;font-size:16px;background:#eee;min-height:100vh;color:var(--primary);flex-direction:column;accent-color:var(--accent);justify-content:space-between;font-family:Space Mono,monospace}body:not(.controls-open) .colophone{opacity:0;pointer-events:none}::selection{color:#000;background-color:var(--accent)}main{flex:1}footer{display:flex;position:relative;padding-inline:20px;justify-content:center;padding-block-start:20px}footer .colophone{gap:6px;opacity:1;color:#fff;display:grid;padding:.2em;font-size:14px;mix-blend-mode:difference;transition:opacity .3s ease-out}footer .colophone:has(a:hover,a:focus-visible){color:#000;background-color:#fff;mix-blend-mode:normal}footer a{color:inherit;text-underline-offset:2px}body.loaded .rotator{opacity:1}*:focus-visible{outline-offset:.35em}main{height:100%;display:grid;place-items:center}.hidden{width:0;height:0;z-index:-1;overflow:hidden;position:absolute;visibility:hidden}.rotator{inset:0;opacity:0;position:fixed;overflow:hidden;max-height:100vh;background:rgba(0,0,0,.9);transition:opacity .2s ease-out;img {block-size: 100%; inline-size: 100%; object-fit: cover; position: absolute; visibility: hidden; object-position: center center; &.current {visibility: visible;}} .-loading::before {top: 0; left: 0; right: 0; bottom: 0; z-index: 1; content: ""; position: absolute; background-color: rgba(170,170,170,.5);} &.natural-ratio img {top: auto; left: 50%; width: auto; height: 100%; min-width: 1px; transform: translateX(-50%);}}.controls{opacity:0;width:100%;padding:20px;max-width:550px;position:relative;background:#efefef;pointer-events:none;transition:opacity .2s ease-out;border:2px solid rgba(0,0,0,.2);&.-active,&:focus-within{opacity:1;z-index:5;pointer-events:auto}header {display: flex; column-gap: 6px; position: relative; margin-bottom: 10px; padding-bottom: 10px; justify-content: space-between; border-bottom: 2px solid rgba(0,0,0,.2); > div {display: flex; column-gap: 6px;}} h1,h2 {margin: 0; font-size: 1rem; font-weight: 700; display: inline-block;} h1 {color: var(--color-text-dark);} h2 {color: var(--color-text-light);} p,li {margin-top: 0; text-wrap: pretty;} ul {margin: 0; padding: 0 0 0 1em;} form {margin-top: 20px; .control-row {gap: 20px; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between;} .grow {flex-grow: 1;} > div {margin-top: 20px; &:first-of-type {margin-top: 0;}} label {display: block; margin-bottom: 6px;} fieldset {margin: 0; padding: 0; border: none;} legend {padding: 0; margin-bottom: 1rem;} button {width: 100%; cursor: pointer; margin-top: 20px; border-radius: 0; font-size: 1.5rem; padding: 10px 20px; font-family: inherit; border: var(--border); background: var(--accent); color: var(--color-text-dark); transition: background .2s ease-out; &:hover,&:focus-visible {background: var(--accent-focus);} &:active {transform: scale(.99);}} input {width: 100%; display: block; font-size: 1rem; border-radius: 0; font-family: inherit; border: var(--border); &[type="text"] {padding: 10px; border-radius: 0; &:focus-visible {border-color: var(--accent-focus);}} &[type="radio"],&[type="checkbox"] {width: 1.5rem; height: 1.5rem; border-radius: 0;}} .radio-wrap {gap: 6px; display: flex; align-items: center; + .radio-wrap {margin-top: .5rem;} label,input {margin: 0; cursor: pointer; display: inline-block;}} .select-wrap {position: relative; display: inline-block; &::before {top: 2px; z-index: 0; right: 2px; bottom: 2px; content: ""; width: 30px; background: #fff; position: absolute; pointer-events: none;} &::after {top: 2px; z-index: 1; right: 5px; bottom: 1px; content: "❮"; position: absolute; pointer-events: none; transform: rotate(-90deg);}} select {font-size: 1rem; border-radius: 0; font-family: inherit; color: var(--primary); border: var(--border); display: inline-block; -webkit-appearance: none; padding: 10px 40px 10px 10px; &:focus-visible {border-color: var(--accent-focus);}}} .close {top: 12px; right: 20px; border: none; cursor: pointer; font-size: 1rem; padding: .5rem; background: none; position: absolute; font-family: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: .2em; &:hover,&:focus-visible {background-color: var(--accent);}}}.spinner{top:50%;left:50%;z-index:10;width:50px;height:50px;border-radius:50%;position:absolute;margin:-25px 0 0 -25px;border-top:3px solid #51D693;border-left:3px solid #51D693;animation:spin .5s forwards infinite linear}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.testing .staging.hidden{inset:0;z-index:1;display:-ms-flexbox;display:flex;position:absolute;visibility:visible}.testing .staging.hidden>*{flex-basis:10%}