/* Quieter outlines and a dark shade of the lime brand color. */
:root {
 --control-border: #9b9f94;
 --primary-dark: #3f5216;
 --primary-dark-hover: #31420f;
}
.dark {
 --control-border: #73796c;
 --primary-dark: #4d621d;
 --primary-dark-hover: #5b7225;
}
.pill,
.button {
 border-color: var(--control-border);
 border-width: 1px;
}
.identity { box-shadow: 0 2px 0 #1412100b; }
.button {
 box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 11%, transparent);
 transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.button:hover { box-shadow: 0 5px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.button.primary {
 background: var(--primary);
 color: #141210;
 border-color: var(--primary-dark);
}
.button.primary:hover {
 background: var(--primary);
 color: #141210;
}
.header .email {
 background: var(--ink);
 color: var(--paper);
 border-color: var(--control-border);
}
.header .email:hover {
 background: var(--primary);
 color: #141210;
}
.header-email { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer; transition: width .4s cubic-bezier(.22, 1, .36, 1), background-color .25s ease, color .25s ease; }
.header-email-label { min-width: 0; overflow: hidden; text-overflow: clip; }
.header-email-icon { display: inline-flex; flex: 0 0 auto; width: 0; opacity: 0; overflow: hidden; transform: translateX(-8px); transition: width .3s ease, margin .3s ease, opacity .2s ease, transform .3s ease; }
.header-email-icon svg { width: 15px; height: 15px; flex: none; }
.header-email.is-copied .header-email-icon { width: 15px; margin-right: 7px; opacity: 1; transform: translateX(0); }
.header-email.is-copied .header-email-label { animation: header-email-reveal .3s ease both; }
@keyframes header-email-reveal { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .header-email, .header-email-icon { transition: none; } .header-email.is-copied .header-email-label { animation: none; } }
.close-dialog { border-color: var(--control-border); }
.header nav a:hover,
.icon-button:hover {
 background: color-mix(in srgb, var(--primary) 16%, var(--paper));
 color: var(--ink);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible { outline-color: var(--primary-dark); }
@media (prefers-reduced-motion: reduce) {
 .button { transition: none; }
}