* {
 position: relative;
 box-sizing: border-box;
 font-family: inherit;
 -webkit-user-select: none;
 user-select: none;
 scrollbar-width: thin;
 scrollbar-color: #EEF8 transparent;
 -webkit-tap-highlight-color: transparent;
}
html, body {
 min-width: max(100%, 300px);
 min-height: max(100%, 600px);
 overflow: hidden;
 &:has(#start.current) { overflow: hidden; }
}
html {
 --base: 4.4vh;
 --chr: calc(1ch / 1em);
 --speed: 1;
 --global-icon-size: calc(var(--base) * 2);
 --global-spacing: calc(var(--base) / 4);
 width: 100%;
 height: 100%;
 background: black;
 font-family: 'Copperplate Gothic';
 font-weight: bold;
 color: white;
 font-size: min(var(--base) * 0.8, 7vw);
 &:has([open][role]) { overflow: hidden; }
}
body {
 container-type: inline-size;
 margin: 0;
 > div.background { background: linear-gradient(#456, #002); }
}
h1,h2,h3,h4 {
 font-family: 'Copperplate Gothic';
 font-weight: bold;
 text-align: center;
}
p {
 font-family: 'Palatino Linotype';
}