/* Studio tokens adapted from List Man Standing's theme.css. Hard edges, no framework. */
:root {
  color-scheme: dark;
  --night: #160e1c;
  --wood: #2b1a24;
  --wood-edge: #4a2c33;
  --plank: #7a4a2e;
  --plank-shade: #4e2c1a;
  --plank-light: #a86b44;
  --outline: #0b060e;
  --sand: #f4dfb0;
  --dust: #b89c7a;
  --sunset: #ff7a2f;
  --sunset-shade: #c4501a;
  --sunset-light: #ffb07a;
  --gold: #ffcf40;
  --gold-shade: #c99a1a;
  --gold-light: #ffe58a;
  --cactus: #38d9b0;
  --bang: #ff3b3b;
  --font-display: 'Jersey 10', monospace;
  --font-body: 'Pixelify Sans', monospace;
  --edge: 0 -4px 0 0 var(--outline), 0 4px 0 0 var(--outline), -4px 0 0 0 var(--outline), 4px 0 0 0 var(--outline);
  --notch: 0 -4px 0 0 var(--wood-edge), 0 4px 0 0 var(--wood-edge), -4px 0 0 0 var(--wood-edge), 4px 0 0 0 var(--wood-edge);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--sand); font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
main { max-width: 680px; min-height: 100dvh; margin: auto; padding: 36px 24px 40px; }
h1, h2, h3 { margin: 0 0 14px; font: 400 38px/1.1 var(--font-display); }
h1 { font-size: clamp(44px, 10vw, 62px); text-shadow: 3px 3px 0 var(--plank); }
p { margin: 0 0 16px; }
a { color: var(--sunset-light); text-underline-offset: 4px; overflow-wrap: anywhere; }
a:hover { color: var(--gold); }
button, input { font-family: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.studio { display: flex; justify-content: center; margin: 0 0 36px; }
.logo-plate { display: block; background: var(--sand); padding: 18px 24px; box-shadow: var(--edge); }
.logo-plate img { display: block; width: 92px; height: auto; }
.portal .logo-plate { padding: 24px 38px; }
.portal .logo-plate img { width: 150px; }
.portal { text-align: center; }
.eyebrow, .brand { color: var(--gold); font-size: 14px; letter-spacing: 3px; }
.presents { margin: 0 0 26px; font: 400 30px/1 var(--font-display); letter-spacing: 7px; color: var(--dust); }
.panel, .plate { margin: 28px 0; padding: 26px 24px; background: var(--wood); box-shadow: var(--notch); }
.account { margin-top: 40px; }
.account-heading { display: flex; align-items: center; justify-content: center; gap: 16px; }
.account-heading h2 { margin-bottom: 0; }
.hat { display: inline-block; width: 38px; height: 23px; background: currentColor; clip-path: polygon(18% 0, 82% 0, 82% 65%, 100% 65%, 100% 100%, 0 100%, 0 65%, 18% 65%); flex-shrink: 0; }
.hat-name { margin-top: 12px; color: var(--dust); font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 24px; }
.actions form { margin: 0; flex: 1 1 160px; }
.actions form .btn { width: 100%; }
.btn, .button, button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; border: 0; color: var(--night); background: var(--sunset); box-shadow: inset -4px -4px 0 var(--sunset-shade), inset 4px 4px 0 var(--sunset-light), var(--edge); font: 400 30px/1 var(--font-display); text-decoration: none; cursor: pointer; }
.btn:hover, .button:hover, button:hover { color: var(--night); background: var(--sunset-light); }
.btn-plank, .secondary { color: var(--sand); background: var(--plank); box-shadow: inset -4px -4px 0 var(--plank-shade), inset 4px 4px 0 var(--plank-light), var(--edge); }
.btn-plank:hover, .secondary:hover { color: var(--sand); background: var(--plank-light); }
.btn-danger, .danger { color: var(--bang); background: var(--night); box-shadow: 0 -3px 0 var(--bang), 0 3px 0 var(--bang), -3px 0 0 var(--bang), 3px 0 0 var(--bang); }
.btn-danger:hover, .danger:hover { color: var(--night); background: var(--bang); }
button:disabled { background: var(--wood-edge); color: var(--dust); cursor: wait; box-shadow: var(--edge); }
label { display: block; margin-bottom: 8px; }
input { width: 100%; min-height: 48px; margin: 0 0 18px; padding: 10px 12px; border: 2px solid var(--wood-edge); border-radius: 0; background: var(--night); color: var(--sand); font-size: 18px; }
input[name='code'], .code { font-size: 28px; letter-spacing: 6px; text-transform: uppercase; }
.hint, .muted, .updated, small { color: var(--dust); font-size: 14px; }
.notice { padding: 14px 16px; border-left: 4px solid var(--gold); background: var(--wood); }
.error { color: var(--sunset-light); }
.back { display: inline-block; min-height: 44px; padding: 8px 0; }
.policy section { margin-top: 28px; padding-top: 24px; border-top: 4px solid var(--wood-edge); }
.policy h2 { font-size: 32px; }
.policy section p:last-child { margin-bottom: 0; }
footer { margin-top: 36px; color: var(--dust); font-size: 14px; text-align: center; }
footer a { display: inline-block; min-height: 44px; padding: 8px; }
[hidden] { display: none !important; }
@media (min-width: 600px) { main { padding: 48px 40px 64px; } }
@media (max-width: 380px) { .panel, .plate { padding: 22px 16px; } .actions { flex-direction: column; } .actions form { flex-basis: auto; } }