Spaces:
Running
Running
@font-face {
font-family: "MP Humanist";
font-weight: 400;
font-display: swap;
src: url(assets/fonts/mp-humanist-regular.woff2) format("woff2");
}
@font-face {
font-family: "MP Humanist";
font-weight: 700;
font-display: swap;
src: url(assets/fonts/mp-humanist-bold.woff2) format("woff2");
}
@font-face {
font-family: "MP Humanist";
font-weight: 900;
font-display: swap;
src: url(assets/fonts/mp-humanist-black.woff2) format("woff2");
}
/* A deep green band holds the title and the controls; the photo and the face pairs sit on cool grey below.
One accent (the green) marks the picked faces, both on the photo and on the pairs. */
:root {
--band: #0c3b2d;
--band-ink: #ffffff;
--band-ink-2: #b7d2c6;
--band-line: rgba(255, 255, 255, 0.22);
--band-fill: rgba(255, 255, 255, 0.1);
--band-error: #ffb0a4;
--bg: #e5e9e7;
--surface: #ffffff;
--well: #d3d9d6;
--ink: #111614;
--ink-2: #4a5450;
--ink-hint: #5b6560; /* small text: >= 4.5:1 on bg and surface */
--line: #c6cdc9;
--line-strong: #9aa49f;
--accent: #137a4e; /* boxes and tabs; white type on it */
--accent-ink: #0f6540; /* the accent as text on bg */
--accent-type: #ffffff;
--focus: #111614;
--error: #a8271c;
--ui: "MP Humanist", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #15191a;
--surface: #1e2423;
--well: #0d1010;
--ink: #edf1ef;
--ink-2: #a4aeaa;
--ink-hint: #8f9995;
--line: #2c3331;
--line-strong: #4a5450;
--accent: #3cc48a;
--accent-ink: #3cc48a;
--accent-type: #0b1a13;
--focus: #edf1ef;
--error: #ff9a8a;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #15191a;
--surface: #1e2423;
--well: #0d1010;
--ink: #edf1ef;
--ink-2: #a4aeaa;
--ink-hint: #8f9995;
--line: #2c3331;
--line-strong: #4a5450;
--accent: #3cc48a;
--accent-ink: #3cc48a;
--accent-type: #0b1a13;
--focus: #edf1ef;
--error: #ff9a8a;
color-scheme: dark;
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 15px/1.45 var(--ui);
font-feature-settings: "kern";
}
button,
input {
font: inherit;
color: inherit;
}
figure,
fieldset,
p,
h1,
h2,
ul {
margin: 0;
}
fieldset {
padding: 0;
border: 0;
min-width: 0;
}
ul {
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--line-strong);
}
a:hover {
text-decoration-color: currentColor;
}
button {
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--line-strong);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
button:hover:not(:disabled) {
border-color: var(--ink);
}
button:disabled {
cursor: default;
}
:where(button, a, summary):focus-visible,
.pick-button:focus-within,
.seg-option:has(input:focus-visible),
.example:focus-visible,
.overview:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
.numeric {
font-variant-numeric: lining-nums tabular-nums;
}
/* ------------------------------------------------------------------ the band */
.band {
background: var(--band);
color: var(--band-ink);
}
.band a {
text-decoration-color: var(--band-line);
}
.band a:hover {
text-decoration-color: currentColor;
}
.band :where(button, a, summary):focus-visible,
.band .pick-button:focus-within,
.band .seg-option:has(input:focus-visible) {
outline-color: var(--band-ink);
}
.band-inner {
max-width: 1360px;
margin: 0 auto;
padding: 26px 40px 22px;
}
.band-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
}
h1 {
font-size: 42px;
line-height: 1;
font-weight: 900;
letter-spacing: -0.02em;
}
.site {
font-size: 15px;
text-decoration: none;
white-space: nowrap;
}
.site .arrow {
display: inline-block;
margin-left: 0.2em;
transition: transform 0.2s;
}
.site:hover .arrow {
transform: translate(2px, -2px);
}
.lead {
margin-top: 10px;
max-width: 760px;
font-size: 18px;
line-height: 1.35;
letter-spacing: -0.008em;
}
.brand {
margin-top: 4px;
max-width: 760px;
font-size: 14px;
line-height: 1.45;
color: var(--band-ink-2);
}
.brand a {
color: var(--band-ink);
}
.notice {
margin-top: 16px;
padding: 10px 0;
border-top: 1px solid var(--band-line);
border-bottom: 1px solid var(--band-line);
font-size: 14px;
}
/* the controls: one row on a desk, a stack on a phone */
.deck {
display: grid;
grid-template-columns: minmax(280px, 1.3fr) auto auto auto;
gap: 14px 32px;
align-items: start;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--band-line);
}
.deck-label {
display: block;
margin-bottom: 6px;
font-size: 13px;
line-height: 19px;
color: var(--band-ink-2);
}
.pick {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0 12px;
min-width: 0;
}
.pick .deck-label {
grid-column: 1 / -1;
}
.pick-button {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 18px;
border: 1px solid var(--band-ink);
border-radius: 4px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.12s;
}
.pick-button:hover {
background: var(--band-fill);
}
.pick-button input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.pick-meta {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
color: var(--band-ink-2);
font-size: 13px;
line-height: 1.35;
}
.pick-thumb {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 50%;
flex: none;
}
.pick-text {
min-width: 0;
overflow-wrap: anywhere;
}
.pick-text strong {
color: var(--band-ink);
font-weight: 400;
}
.seg {
display: inline-flex;
padding: 3px;
border: 1px solid var(--band-ink);
border-radius: 6px;
}
.seg-option {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
min-height: 36px;
padding: 0 12px;
border-radius: 3px;
cursor: pointer;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: background-color 0.12s, color 0.12s;
}
.seg-option:hover {
background: var(--band-fill);
}
.seg-option input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.seg-option:has(input:checked) {
background: var(--band-ink);
color: var(--band);
}
.output {
min-width: 190px;
}
.output-size {
display: block;
font-size: 27px;
line-height: 1;
font-weight: 900;
letter-spacing: -0.01em;
font-variant-numeric: lining-nums tabular-nums;
}
.output-note {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.35;
color: var(--band-ink-2);
font-variant-numeric: tabular-nums;
}
.output-note .plan-error {
color: var(--band-error);
}
.go {
display: grid;
gap: 8px;
justify-items: end;
padding-top: 25px; /* level with the controls under their labels */
}
.primary {
border-color: var(--band-ink);
background: var(--band-ink);
color: var(--band);
font-weight: 700;
}
.primary:hover:not(:disabled) {
background: #e6f1ec;
border-color: #e6f1ec;
}
.primary:disabled {
background: var(--band-fill);
border-color: transparent;
color: var(--band-ink-2);
}
.run {
min-width: 180px;
min-height: 46px;
font-size: 16px;
}
.quota {
grid-column: 1 / -1;
margin-top: -2px;
font-size: 13px;
line-height: 1.4;
color: var(--band-ink-2);
}
.status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 20px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--band-line);
font-size: 15px;
}
.status[data-state="error"] .status-text strong {
color: var(--band-error);
}
.status-text strong {
font-weight: 700;
}
.status-text .meta {
color: var(--band-ink-2);
}
.status .actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.status .actions a,
.status .actions button {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 14px;
border: 1px solid var(--band-ink);
border-radius: 4px;
background: transparent;
color: var(--band-ink);
text-decoration: none;
font-weight: 700;
}
.status .actions button:hover:not(:disabled),
.status .actions a:hover {
background: var(--band-fill);
}
.status .actions .primary {
background: var(--band-ink);
color: var(--band);
}
.status .actions a.primary:hover {
background: #e6f1ec;
border-color: #e6f1ec;
}
.spinner {
display: inline-block;
width: 13px;
height: 13px;
margin-right: 8px;
vertical-align: -1px;
border: 2px solid var(--band-line);
border-top-color: var(--band-ink);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.turnstile:empty {
display: none;
}
.turnstile {
margin-top: 12px;
}
/* ------------------------------------------------------------------ main */
.main {
max-width: 1360px;
margin: 0 auto;
padding: 24px 40px 32px;
}
/* the photo on the left with its example chips under it; the faces as a column on the right */
.stage {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
grid-template-areas:
"photo faces"
"photos faces";
gap: 18px 36px;
align-items: start;
}
.photo {
grid-area: photo;
min-width: 0;
}
.photos {
grid-area: photos;
min-width: 0;
}
.faces {
grid-area: faces;
min-width: 0;
}
/* the whole photo with the picked faces boxed */
.overview {
position: relative;
width: 100%;
max-height: min(66vh, 640px);
aspect-ratio: var(--ar, 1.5);
overflow: hidden;
background: var(--well);
touch-action: pan-y;
cursor: crosshair;
user-select: none;
-webkit-user-select: none;
}
.overview-image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
.marks {
position: absolute;
inset: 0;
}
.mark {
position: absolute;
display: grid;
place-items: center;
min-width: 44px;
min-height: 44px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
cursor: move;
touch-action: none;
pointer-events: auto;
transform: translate(-50%, -50%);
}
.mark:hover:not(:disabled),
.mark:active {
background: transparent;
border: 0;
}
.mark:focus-visible {
outline: none;
}
.mark-box {
position: relative;
display: block;
border: 2px solid var(--accent);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.mark:focus-visible .mark-box {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 4px var(--bg), 0 0 0 6px var(--focus);
}
.mark-box::before,
.tab {
content: attr(data-n);
position: absolute;
left: -2px;
top: -2px;
z-index: 1;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: var(--accent);
color: var(--accent-type);
font-size: 12px;
line-height: 20px;
font-weight: 900;
text-align: center;
font-variant-numeric: tabular-nums;
}
.mark-box.is-small::before {
min-width: 14px;
height: 14px;
padding: 0 3px;
font-size: 10px;
line-height: 14px;
}
/* the corner handle resizes the box; its hit area is bigger than it looks */
.mark-handle {
position: absolute;
right: -8px;
bottom: -8px;
width: 14px;
height: 14px;
background: var(--accent);
border: 2px solid #ffffff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
cursor: nwse-resize;
touch-action: none;
}
.mark-handle::before {
content: "";
position: absolute;
inset: -10px;
}
.zoom-label {
align-self: center;
padding: 0 4px;
font-size: 13px;
color: var(--ink-2);
}
.zoom button {
min-width: 34px;
font-weight: 700;
}
.cursor {
position: absolute;
width: 28px;
height: 28px;
margin: -14px 0 0 -14px;
border: 2px dashed #ffffff;
outline: 1px solid rgba(0, 0, 0, 0.6);
pointer-events: none;
}
.photo-foot {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px 24px;
margin-top: 12px;
}
.caption {
font-size: 15px;
min-height: 22px;
}
.caption strong {
font-weight: 700;
}
.caption .meta {
margin-left: 8px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.whole {
display: inline-flex;
gap: 2px;
padding: 2px;
border: 1px solid var(--line-strong);
border-radius: 5px;
background: var(--surface);
}
.whole button {
min-height: 30px;
padding: 0 12px;
border: 0;
border-radius: 3px;
background: transparent;
font-size: 14px;
color: var(--ink-2);
}
.whole button:hover:not(:disabled) {
color: var(--ink);
}
.whole button:disabled {
color: var(--ink-hint);
opacity: 0.6;
}
.whole [aria-pressed="true"] {
background: var(--ink);
color: var(--bg);
}
.whole [aria-pressed="true"]:hover:not(:disabled) {
color: var(--bg);
}
.hint {
margin-top: 6px;
font-size: 13px;
color: var(--ink-hint);
}
.note-touch {
display: none;
}
/* the example photos: one face from each, in a round chip */
.photos-head {
margin-bottom: 8px;
font-size: 14px;
color: var(--ink-2);
}
.examples {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.example {
display: grid;
grid-template-columns: 44px auto;
align-items: center;
gap: 10px;
min-height: 0;
padding: 4px 14px 4px 4px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: transparent;
text-align: left;
color: var(--ink-2);
white-space: nowrap;
}
.example:hover:not(:disabled) {
border-color: var(--ink);
color: var(--ink);
}
.example img {
display: block;
width: 44px;
height: 44px;
object-fit: cover;
border-radius: 50%;
}
.example-text {
display: grid;
gap: 0;
min-width: 0;
font-size: 14px;
line-height: 1.25;
}
.example-text small {
font-size: 12px;
color: var(--ink-hint);
}
.example[aria-pressed="true"] {
border-color: var(--accent);
background: var(--surface);
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--accent);
}
.example[aria-pressed="true"] .example-text > span {
font-weight: 700;
}
.example[data-loading="true"] {
border-color: var(--line-strong);
background: var(--surface);
}
/* ------------------------------------------------------------------ the faces: numbered pairs, same spot, same scale */
.faces-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px 24px;
min-height: 36px;
margin-bottom: 14px;
}
.faces-head h2 {
font-size: 22px;
line-height: 1.1;
font-weight: 900;
letter-spacing: -0.015em;
}
.faces-head .count {
margin-left: 6px;
font-weight: 400;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.faces-tools {
display: flex;
align-items: center;
gap: 10px;
}
.zoom {
display: inline-flex;
gap: 2px;
padding: 2px;
border: 1px solid var(--line-strong);
border-radius: 5px;
background: var(--surface);
}
.zoom button {
min-height: 30px;
padding: 0 12px;
border: 0;
border-radius: 3px;
background: transparent;
font-size: 14px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.zoom button:hover:not(:disabled) {
color: var(--ink);
}
.zoom button:disabled {
color: var(--ink-hint);
opacity: 0.6;
}
.quiet {
min-height: 36px;
padding: 0 12px;
border-color: var(--line-strong);
font-size: 14px;
color: var(--ink-2);
}
.quiet:hover:not(:disabled) {
color: var(--ink);
}
.faces-empty {
padding: 28px 0;
font-size: 15px;
color: var(--ink-2);
}
.pairs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
gap: 18px 20px;
}
.pair {
min-width: 0;
}
.pair-tiles {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.pair-tiles .tab {
left: 0;
top: 0;
}
.tile {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--well);
}
.tile canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.tile-note {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 16px;
text-align: center;
font-size: 13px;
line-height: 1.35;
color: var(--ink-2);
}
.pair-foot {
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: center;
gap: 2px;
margin-top: 6px;
font-size: 13px;
color: var(--ink-2);
}
.pair-foot b {
font-weight: 700;
color: var(--ink);
}
.pair-foot .x {
margin-left: 6px;
color: var(--ink-hint);
font-variant-numeric: tabular-nums;
}
.remove {
min-width: 32px;
min-height: 28px;
padding: 0 8px;
border-color: transparent;
background: transparent;
font-size: 13px;
color: var(--ink-2);
}
.remove:hover:not(:disabled) {
border-color: var(--line-strong);
color: var(--ink);
}
/* ------------------------------------------------------------------ colophon */
.colophon {
margin-top: 40px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: 14px;
color: var(--ink-2);
}
.colophon-links {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
min-height: 32px;
align-items: center;
}
.about summary {
cursor: pointer;
padding: 8px 0;
list-style: none;
}
.about summary::-webkit-details-marker {
display: none;
}
.about summary::before {
content: "+";
display: inline-block;
width: 16px;
font-weight: 700;
}
.about[open] summary::before {
content: "–";
}
.about-body {
max-width: 76ch;
display: grid;
gap: 10px;
padding: 4px 0 16px 16px;
}
.about-body h2 {
margin-top: 8px;
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
.credits {
display: grid;
gap: 4px;
}
/* ------------------------------------------------------------------ drop anywhere */
.dropzone {
position: fixed;
inset: 12px;
display: none;
place-items: center;
border: 2px dashed var(--accent);
background: color-mix(in srgb, var(--bg) 82%, transparent);
font-size: 22px;
font-weight: 900;
letter-spacing: -0.01em;
z-index: 10;
pointer-events: none;
}
body[data-dragover="true"] .dropzone {
display: grid;
}
/* ------------------------------------------------------------------ input modes */
@media (hover: none) {
.note-mouse {
display: none;
}
.note-touch {
display: inline;
}
.overview {
cursor: default;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation-duration: 0.01ms !important;
}
}
/* ------------------------------------------------------------------ narrower desktops and tablets */
@media (max-width: 1180px) {
.deck {
grid-template-columns: minmax(240px, 1fr) auto auto;
}
.go {
grid-column: 1 / -1;
justify-items: start;
padding-top: 0;
}
}
@media (max-width: 900px) {
.stage {
grid-template-columns: 1fr;
grid-template-areas:
"photos"
"photo"
"faces";
gap: 18px;
}
.faces {
margin-top: 12px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.pairs {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
}
/* ------------------------------------------------------------------ phones */
@media (max-width: 760px) {
.band-inner {
padding: 22px 16px 20px;
}
.band-top {
flex-wrap: wrap;
gap: 6px 16px;
}
h1 {
font-size: 34px;
}
.lead {
margin-top: 10px;
font-size: 17px;
}
.deck {
grid-template-columns: 1fr;
gap: 14px;
margin-top: 20px;
padding-top: 18px;
}
.pick {
flex-wrap: wrap;
}
.pick-button {
width: 100%;
justify-content: center;
}
.seg {
display: flex;
}
.seg-option {
flex: 1;
}
.output {
min-width: 0;
}
.output-size {
font-size: 24px;
}
.go {
justify-items: stretch;
}
.run {
width: 100%;
}
.main {
padding: 18px 16px 28px;
}
.photos-head {
margin-bottom: 6px;
}
.examples {
flex-wrap: nowrap;
gap: 6px;
margin: 0 -16px;
padding: 0 16px 2px;
overflow-x: auto;
scrollbar-width: none;
}
.examples li {
flex: none;
}
.example {
grid-template-columns: 40px auto;
gap: 8px;
padding: 3px 12px 3px 3px;
}
.example img {
width: 40px;
height: 40px;
}
.example-text small {
display: none;
}
.overview {
max-height: 72vh;
}
.faces-head h2 {
font-size: 20px;
}
.pairs {
grid-template-columns: 1fr;
gap: 16px;
}
}
@font-face {
font-family: "MP Humanist";
font-weight: 400;
font-display: swap;
src: url(assets/fonts/mp-humanist-regular.woff2) format("woff2");
}
@font-face {
font-family: "MP Humanist";
font-weight: 700;
font-display: swap;
src: url(assets/fonts/mp-humanist-bold.woff2) format("woff2");
}
@font-face {
font-family: "MP Humanist";
font-weight: 900;
font-display: swap;
src: url(assets/fonts/mp-humanist-black.woff2) format("woff2");
}
/* A deep green band holds the title and the controls; the photo and the face pairs sit on cool grey below.
One accent (the green) marks the picked faces, both on the photo and on the pairs. */
:root {
--band: #0c3b2d;
--band-ink: #ffffff;
--band-ink-2: #b7d2c6;
--band-line: rgba(255, 255, 255, 0.22);
--band-fill: rgba(255, 255, 255, 0.1);
--band-error: #ffb0a4;
--bg: #e5e9e7;
--surface: #ffffff;
--well: #d3d9d6;
--ink: #111614;
--ink-2: #4a5450;
--ink-hint: #5b6560; /* small text: >= 4.5:1 on bg and surface */
--line: #c6cdc9;
--line-strong: #9aa49f;
--accent: #137a4e; /* boxes and tabs; white type on it */
--accent-ink: #0f6540; /* the accent as text on bg */
--accent-type: #ffffff;
--focus: #111614;
--error: #a8271c;
--ui: "MP Humanist", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #15191a;
--surface: #1e2423;
--well: #0d1010;
--ink: #edf1ef;
--ink-2: #a4aeaa;
--ink-hint: #8f9995;
--line: #2c3331;
--line-strong: #4a5450;
--accent: #3cc48a;
--accent-ink: #3cc48a;
--accent-type: #0b1a13;
--focus: #edf1ef;
--error: #ff9a8a;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #15191a;
--surface: #1e2423;
--well: #0d1010;
--ink: #edf1ef;
--ink-2: #a4aeaa;
--ink-hint: #8f9995;
--line: #2c3331;
--line-strong: #4a5450;
--accent: #3cc48a;
--accent-ink: #3cc48a;
--accent-type: #0b1a13;
--focus: #edf1ef;
--error: #ff9a8a;
color-scheme: dark;
}
* {
box-sizing: border-box;
}
[hidden] {
display: none ;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 15px/1.45 var(--ui);
font-feature-settings: "kern";
}
button,
input {
font: inherit;
color: inherit;
}