* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #191919; font: 17px/1.5 "Courier New", Courier, monospace; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #191919; outline-offset: 6px; }
header { max-width: 1120px; margin: auto; padding: 32px 32px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { font-weight: bold; letter-spacing: .06em; }
.wordmark:hover { text-decoration: underline; text-underline-offset: 4px; }
h1 { margin: 0; font-size: 17px; font-weight: normal; }
main { max-width: 1120px; margin: auto; padding: 56px 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.demo { display: block; min-width: 0; }
.preview { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; background: #f8f8f5; border-radius: 8px; }
.label { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
.label > span { transition: transform .2s; }
.demo:hover .label > span { transform: translate(3px, -3px); }
@media (max-width: 640px) {
 header { padding: 24px 20px 0; }
 main { grid-template-columns: 1fr; padding: 36px 20px; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
 .label > span { transition: none; }
 .demo:hover .label > span { transform: none; }
}