:root {
    --ink: #3a3836;
    --ink-soft: #6b6763;
    --bronze: #a9845f;
    --bronze-deep: #7a5b3c;
    --sand: #c8a27d;
    --linen: #e6dfd8;
    --linen-soft: #f3eee8;
    --paper: #fbf9f6;
    --white: #fff;
    --control-line: #968d83;
    --danger: #96392c;

    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --radius: 6px;
    --control-height: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    font-family: var(--font-text);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    caret-color: var(--bronze-deep);
}

::selection { color: var(--ink); background: var(--sand); }

.card {
    width: 100%;
    max-width: 25rem;
    padding: 2.5rem 2.25rem;
    background: var(--white);
    border: 1px solid var(--linen);
    border-radius: var(--radius);
}

.card-wide { max-width: 33rem; }

.logo { display: block; width: 4.5rem; height: auto; margin: 0 0 2rem; }

h1 {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

label { display: block; margin: 1.25rem 0 0.4rem; font-size: 0.95rem; font-weight: 500; }

input {
    width: 100%;
    height: var(--control-height);
    padding: 0 0.85rem;
    font: inherit;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--control-line);
    border-radius: var(--radius);
    transition: border-color 180ms var(--ease-out);
}
input:hover { border-color: var(--ink); }

:focus { outline: none; }
input:focus-visible, button:focus-visible {
    outline: 2px solid var(--bronze-deep);
    outline-offset: 2px;
}

button {
    width: 100%;
    min-height: var(--control-height);
    margin-top: 1.75rem;
    padding: 0 1.5rem;
    font: inherit;
    font-weight: 500;
    color: var(--paper);
    background: var(--ink);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 180ms var(--ease-out);
}
button:hover { background: var(--bronze-deep); }
button:disabled { cursor: progress; background: var(--ink-soft); }

.error {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    color: var(--danger);
    font-size: 0.95rem;
    background: var(--linen-soft);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
}

.hint { margin: 0 0 1rem; font-size: 0.95rem; color: var(--ink-soft); }

.steps { margin: 0 0 1rem; padding-left: 1.25rem; font-size: 0.95rem; line-height: 1.55; }
.steps li + li { margin-top: 0.3rem; }

.qr { margin: 0 0 1rem; text-align: center; }
.qr img {
    max-width: 100%;
    height: auto;
    padding: 0.5rem;
    background: var(--white);
    border: 1px solid var(--linen);
    border-radius: var(--radius);
}

.secret { margin: 0 0 0.5rem; text-align: center; }
.secret code {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.08em;
    word-break: break-all;
    background: var(--linen-soft);
    border-radius: var(--radius);
}

.codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}
.codes li { padding: 0.6rem 0.5rem; text-align: center; background: var(--linen-soft); border-radius: var(--radius); }
.codes code { font-size: 0.95rem; letter-spacing: 0.04em; }

.aside { margin: 0; }

button.secondary {
    margin-top: 0.75rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--control-line);
}
button.secondary:hover { background: var(--linen-soft); border-color: var(--ink); }

@media (max-width: 26rem) {
    .card { padding: 2rem 1.5rem; }
    .codes { grid-template-columns: 1fr; }
}