* { box-sizing: border-box; }
body { margin: 0; background: #102323; color: #f4faf8; font: 17px/1.55 system-ui, sans-serif; }
main { max-width: 900px; margin: auto; padding: 52px 24px 72px; }
h1 { font-size: clamp(42px, 8vw, 70px); line-height: 1.02; margin: .2em 0; }
h2 { font-size: 30px; line-height: 1.2; margin: 0 0 10px; }
a { color: #8cf0c9; }
.eyebrow { color: #8cf0c9; letter-spacing: .08em; font-size: 13px; font-weight: 700; }
section { border-top: 1px solid #345550; padding-top: 30px; margin-top: 34px; }
details { background: #1a3634; padding: 12px 16px; border-radius: 8px; margin: 10px 0; overflow-wrap: anywhere; }
summary { cursor: pointer; font-weight: 650; }
blockquote { margin: 12px 0; border-left: 3px solid #8cf0c9; padding-left: 14px; color: #dcece8; }
video { width: 100%; background: #081616; border-radius: 8px; }
.links, .examples { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.muted { color: #b8d2cc; }
form { display: grid; gap: 8px; margin: 22px 0; }
form label { font-weight: 650; }
textarea, select, button { font: inherit; border: 1px solid #698a80; border-radius: 7px; padding: 9px 12px; }
textarea, select { width: 100%; min-width: 0; color: #f4faf8; background: #162f2d; }
textarea { resize: vertical; }
button { width: fit-content; color: #102323; background: #8cf0c9; cursor: pointer; font-weight: 650; }
.examples button { color: #f4faf8; background: #1a3634; text-align: left; }
:focus-visible, .result:focus { outline: 2px solid #8cf0c9; outline-offset: 4px; }
.result:not(:empty) { margin: 18px 0; padding: 12px 16px; border: 1px solid #698a80; border-radius: 8px; }
.result article + article { border-top: 1px solid #698a80; margin-top: 14px; padding-top: 6px; }
.catalog li { margin: 12px 0; }
.catalog li p { margin: 0; color: #b8d2cc; }