:root { color-scheme: dark; font: 16px/1.55 system-ui, sans-serif; color: #f7f1df; background: #141e22; }
body { margin: 0; }
main { max-width: 45rem; margin: 4vh auto; padding: 1.5rem; }
main.studio { max-width: 64rem; }
.eyebrow { color: #ffd68d; font-weight: 700; }
h1 { line-height: 1.15; }
label { display: block; margin-block: .75rem; }
input { font: inherit; padding: .25rem .5rem; }
button { color: #10171a; background: #ffd68d; border: 0; border-radius: .35rem; font: inherit; font-weight: 650; padding: .6rem .9rem; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid white; outline-offset: 3px; }
a { color: #ffd68d; }
nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-block-start: 1.5rem; }
.boutons { display: flex; gap: .65rem; flex-wrap: wrap; }
[role="alert"] { color: #ffc5b9; }
video, canvas { display: block; max-width: 100%; height: auto; margin-block: 1rem; background: #0a1418; }
pre, #sortie { overflow-wrap: anywhere; }
[hidden] { display: none !important; }