:root { color-scheme: light; font-family: ui-sans-serif, system-ui, sans-serif; color: #24271f; background: #f5f4ed; font-size: 17px; line-height: 1.55; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1.25rem, 5vw, 4rem); gap: 1rem; border-bottom: 1px solid #d2d3c7; }
a { color: #334c23; text-underline-offset: .2em; }
.brand { color: inherit; font-weight: 800; font-size: 1.4rem; text-decoration: none; letter-spacing: -.03em; }
.brand-dot { color: #466431; }
.hint { color: #595e50; font-size: .875rem; }
nav { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 1.5rem); font-size: .875rem; }
nav a { color: inherit; text-decoration: none; padding-block: .6rem; }
nav a:hover, nav a[aria-current] { text-decoration: underline; }
nav button { font-size: inherit; padding: .6rem .25rem; min-height: 2.75rem; font-weight: 400; }
main { width: min(100% - 2.5rem, 48rem); margin: clamp(2.5rem, 8vh, 5rem) auto; flex: 1; }
h1 { font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 1.75rem; text-wrap: balance; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 .65rem; }
p { max-width: 65ch; margin: 0 0 1.25rem; }
.entry { max-width: 32rem; }
.sign-in main { width: min(100% - 2.5rem, 22rem); min-height: 100svh; margin: 0 auto; display: grid; place-items: center; }
.sign-in .entry { width: 100%; position: relative; }
.sign-in .actions { margin: 0; }
.sign-in #feedback { position: absolute; top: calc(100% + 1rem); width: 100%; margin: 0; text-align: center; }
.actions { display: flex; flex-direction: column; align-items: stretch; gap: .8rem; margin: 1.75rem 0 1.25rem; max-width: 27rem; }
button, .button { display: inline-block; min-height: 3rem; padding: .8rem 1.25rem; border: 1px solid transparent; border-radius: .4rem; background: #334c23; color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; }
button:hover, .button:hover { background: #26391a; }
.secondary { border-color: #777f6b; color: #24271f; background: transparent; }
.secondary:hover { background: #e5e8dc; }
.text-button { background: transparent; color: #334c23; text-decoration: underline; text-underline-offset: .2em; }
.text-button:hover { background: #e5e8dc; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid #587d40; outline-offset: 4px; }
::selection { background: #d4e5bb; color: #192211; }
dl { border-block: 1px solid #d2d3c7; padding: 1rem 0; }
dt { color: #595e50; font-size: .85rem; }
dd { margin: .2rem 0 1rem; overflow-wrap: anywhere; }
dd:last-child { margin-bottom: 0; }
code { font-size: .85rem; }
li { margin-block: .4rem; }
#feedback { min-height: 1.6rem; }
#feedback:empty { display: none; }
.applications { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.applications li { margin: 0; }
.application { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; height: 100%; min-height: 9rem; padding: 1.5rem; border: 1px solid #b9beaf; border-radius: .75rem; color: inherit; text-decoration: none; }
.application:hover { background: #e5e8dc; border-color: #777f6b; }
.application-name { font-size: 1.2rem; font-weight: 600; overflow-wrap: anywhere; }
.application-arrow { width: 1.4rem; height: 1.4rem; margin: .2rem 0 0 .75rem; color: #334c23; }
.application-host { grid-column: 1 / -1; color: #595e50; font-size: .875rem; margin-top: .5rem; overflow-wrap: anywhere; }
.application .hint { grid-column: 1 / -1; margin-top: .75rem; }
.account { max-width: 40rem; }
.back-link { display: inline-block; margin-bottom: 1.5rem; font-size: .875rem; }
@media (max-width: 600px) { .applications { grid-template-columns: minmax(0, 1fr); } }