body { margin: 0; background: #f5f6f8; color: #242b35; font: 16px Georgia, serif; }
main { max-width: 1380px; margin: 24px auto; padding: 0 20px; }
h1 { font-size: 30px; }
button, input, select { font: 15px sans-serif; padding: 10px; border: 1px solid #bac2cc; border-radius: 5px; }
button { cursor: pointer; background: #fff; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #628db4; }
input { width: min(65vw, 750px); }
form, .actions { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#message { padding: 12px; background: #e1ebf3; min-height: 24px; }
#screen { min-height: 160px; background: #d9dee4; outline: 1px solid #8c98a6; touch-action: none; }
#screen:focus { outline: 3px solid #366e9d; }
#frame { display: block; width: 100%; height: auto; user-select: none; }
#resume { background: #215b43; color: white; }
@media (max-width: 700px) { main { padding: 0 10px; } input { width: 85vw; } h1 { font-size: 24px; } }