* { box-sizing: border-box; }
    body { margin: 0; background: #f3f5f3; color: #294740; font: 17px/1.7 system-ui, sans-serif; }
    header { background: #294740; color: #eee; padding: 22px 32px; }
    header strong { font-size: 24px; font-weight: 700; }
    header span { margin-left: 20px; font-size: 14px; letter-spacing: 2px; }
    main { max-width: 560px; margin: 60px auto; padding: 32px; background: white; border: 1px solid #d5dfd8; border-radius: 8px; }
    h1 { font-size: 28px; margin-top: 0; }
    label { display: block; margin: 18px 0 6px; }
    input { width: 100%; padding: 12px; font: inherit; border: 1px solid #a5b6aa; border-radius: 4px; }
    button, .button { display: inline-block; margin: 18px 8px 0 0; padding: 12px 18px; background: #294740; color: white; border: 0; border-radius: 4px; font: inherit; text-decoration: none; cursor: pointer; }
    button:disabled { opacity: .5; cursor: wait; }
    .secondary { background: #e9eeea; color: #294740; }
    #message { min-height: 28px; white-space: pre-wrap; }
    a { color: #294740; }
    @media (max-width: 600px) { main { margin: 24px 12px; padding: 24px; } }
dialog { max-width: 520px; width: calc(100% - 32px); padding: 32px; border: 1px solid #d5dfd8; border-radius: 8px; color: #294740; }
dialog::backdrop { background: rgba(20, 35, 30, .4); }