@font-face { font-family: 'PT Sans'; font-weight: 400; font-display: swap; src: local('PT Sans'), url(/fonts/pt-sans-400-ext.woff2) format('woff2');
  unicode-range: U+00A1-017F, U+0400-052F, U+2010-202E, U+2030-205E, U+20A0-20BF, U+2100-2122; }
@font-face { font-family: 'PT Sans'; font-weight: 400; font-display: swap; src: local('PT Sans'), url(/fonts/pt-sans-400.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+00D7, U+0401, U+0410-044F, U+0451, U+2013-2014, U+2026, U+2212, U+2248; }
@font-face { font-family: 'PT Sans'; font-weight: 700; font-display: swap; src: local('PT Sans Bold'), url(/fonts/pt-sans-700-ext.woff2) format('woff2');
  unicode-range: U+00A1-017F, U+0400-052F, U+2010-202E, U+2030-205E, U+20A0-20BF, U+2100-2122; }
@font-face { font-family: 'PT Sans'; font-weight: 700; font-display: swap; src: local('PT Sans Bold'), url(/fonts/pt-sans-700.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+00D7, U+0401, U+0410-044F, U+0451, U+2013-2014, U+2026, U+2212, U+2248; }
@font-face { font-family: 'Ysabeau'; font-weight: 600; font-display: swap; src: url(/fonts/ysabeau-600-ext.woff2) format('woff2');
  unicode-range: U+00A1-017F, U+0400-052F, U+2010-202E, U+2030-205E, U+20A0-20BF, U+2100-2122; }
@font-face { font-family: 'Ysabeau'; font-weight: 600; font-display: swap; src: url(/fonts/ysabeau-600.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+00D7, U+0401, U+0410-044F, U+0451, U+2013-2014, U+2026, U+2212, U+2248; }
:root {
  --midnight: #021218; --plate: #07171E;
  --text-strong: rgba(255,255,255,0.92); --text-body: rgba(255,255,255,0.80); --text-muted: rgba(255,255,255,0.60);
  --radius-inner: 2px;
  --sunset: #FA9E48; --focus-ring: rgba(250,158,72,0.55);
  --key-accent-top: #FFAA60; --key-accent-bottom: #F0943D;
  --key-accent-hi-top: #FFC48B; --key-accent-hi-bottom: #F2AD69;
  --key-accent-lo-top: #EF9646; --key-accent-lo-bottom: #DB8430;
  --key-edge: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.30);
  --key-edge-hi: inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.30);
  --key-edge-pressed: inset 0 1px 0 rgba(0,0,0,0.30), inset 0 -1px 0 rgba(255,255,255,0.15);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--midnight); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: var(--text-body);
       font: 16px/1.5 'PT Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
a { color: var(--sunset); }
#topo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.home main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
             padding: 48px 16px 24px; text-align: center; }
.wolf { display: block; width: 112px; height: auto; fill: var(--sunset); }
.home h1 { margin: 20px 0 0; font: 600 44px/1.1 'Ysabeau', 'PT Sans', system-ui, sans-serif; color: var(--text-strong); }
.lead { max-width: 33em; margin: 16px 0 0; text-wrap: pretty; }
.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: var(--radius-inner);
       background: rgba(255,255,255,0.06); color: var(--text-strong); font-size: 15px; white-space: nowrap; text-decoration: none;
       transition-property: background-color, color, scale; transition-duration: 120ms, 120ms, 100ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.btn:hover { background: rgba(255,255,255,0.12); }
.btn:active { background: rgba(255,255,255,0.18); scale: 0.96; }
@property --key-top { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --key-bottom { syntax: '<color>'; inherits: false; initial-value: transparent; }
.btn.accent { --key-top: var(--key-accent-top); --key-bottom: var(--key-accent-bottom); background: linear-gradient(var(--key-top), var(--key-bottom));
              color: var(--midnight); font-weight: 700; box-shadow: var(--key-edge);
              transition-property: --key-top, --key-bottom, color, scale; transition-duration: 120ms, 120ms, 120ms, 100ms; }
.btn.accent:hover { --key-top: var(--key-accent-hi-top); --key-bottom: var(--key-accent-hi-bottom); box-shadow: var(--key-edge-hi); }
.btn.accent:active { --key-top: var(--key-accent-lo-bottom); --key-bottom: var(--key-accent-lo-top); box-shadow: var(--key-edge-pressed); padding-top: 2px; }
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; padding: 16px; font-size: 13px; }
.foot a { color: var(--text-muted); text-decoration: none; }
.foot a:hover { color: var(--text-strong); text-decoration: underline; }
.mark { display: inline-flex; align-items: center; gap: 10px; margin: 16px; padding: 4px; color: var(--text-strong); text-decoration: none;
        font: 600 20px/1 'Ysabeau', 'PT Sans', system-ui, sans-serif; }
.mark .wolf { width: 32px; }
.doc { width: 100%; max-width: 46em; margin: 0 auto; padding: 8px 16px 48px; flex: 1; }
.doc h1 { margin: 16px 0 8px; font: 600 32px/1.15 'Ysabeau', 'PT Sans', system-ui, sans-serif; color: var(--text-strong); }
.doc h2 { margin: 2em 0 0.5em; font: 600 21px/1.25 'Ysabeau', 'PT Sans', system-ui, sans-serif; color: var(--text-strong); }
.doc p, .doc li { text-wrap: pretty; }
.doc p { margin: 0 0 0.75em; }
.doc ul { margin: 0 0 0.75em; padding-left: 1.25em; }
.doc li { margin: 0.25em 0; }
.doc strong { color: var(--text-strong); }
.nf { display: flex; flex-direction: column; justify-content: center; }
.nf .keys { justify-content: flex-start; }
@media (max-width: 480px) {
  .home .wolf { width: 88px; }
  .home h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; } }