:root {
  color-scheme: dark;
  --teal-950:#102b2e; --teal-900:#183c3d; --teal-700:#325e59;
  --sand-50:#f5edda; --sand-100:#e9dcc0; --sand-300:#c6b88d;
  --wood-950:#30261b; --wood-700:#65563e; --wood-500:#8a7858;
  --gold-300:#efbd68; --gold-400:#d9a449; --red-100:#ffd2c4; --red-800:#8a261b;
  --bg:var(--teal-950); --surface:var(--teal-900); --fg:var(--sand-50); --fg-muted:var(--sand-300);
  --paper:var(--sand-100); --paper-fg:var(--wood-950); --paper-muted:var(--wood-700);
  --border:var(--teal-700); --paper-border:var(--wood-500); --accent:var(--gold-300); --accent-hover:var(--gold-400);
  --accent-fg:var(--wood-950); --focus:var(--gold-300); --paper-focus:var(--wood-950); --danger:var(--red-100); --paper-danger:var(--red-800);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --radius:4px; --line:1px; --edge:2px; --target:44px; --portrait:160px; --roster-portrait:96px; --wrap:1100px;
  --text-small:1rem; --text-base:1.125rem; --text-large:1.4rem; --text-heading:clamp(1.75rem,3vw,2.2rem); --text-display:clamp(2.5rem,5vw,3.75rem);
  --leading:1.5; --leading-tight:1.12; --display:'Pixelify Sans',ui-monospace,monospace; --body:'Alegreya Sans',system-ui,sans-serif;
  --shadow:0 6px 0 var(--wood-950); --press:2px; --ring-offset:4px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--text-base)/var(--leading) var(--body);-webkit-font-smoothing:antialiased}
.wrap{width:min(var(--wrap),calc(100% - var(--space-8)));margin-inline:auto}
a{color:inherit}
button{font:inherit}
button,a{touch-action:manipulation}
button,a{ -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:var(--edge) solid var(--focus);outline-offset:var(--ring-offset)}
.panel a:focus-visible,.panel button:focus-visible{outline-color:var(--paper-focus)}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:var(--leading-tight);text-wrap:balance}
h1{font-size:var(--text-display);max-width:20ch}
h2{font-size:var(--text-heading)}
h3{font-size:var(--text-large)}
p{max-width:65ch}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding-block:var(--space-6);border-bottom:var(--line) solid var(--border)}
.brand{font:700 var(--text-heading)/1 var(--display);text-decoration:none;display:flex;flex-direction:column;gap:var(--space-2);padding-block:var(--space-2)}
.brand span{font:400 var(--text-small)/1 var(--body);color:var(--fg-muted)}
.quiet-link{min-width:var(--target);min-height:var(--target);display:inline-flex;align-items:center;gap:var(--space-2);text-underline-offset:var(--space-1)}
.quiet-link:hover{color:var(--accent)}
.page-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-12) var(--space-8)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:var(--text-small);font-weight:700;margin-bottom:var(--space-3)}
.lede{margin-top:var(--space-4);color:var(--fg-muted)}
.account-bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;max-width:30%;overflow-wrap:anywhere}
.account-bar .button{color:var(--fg);border-color:var(--border)}
.panel{background:var(--paper);color:var(--paper-fg);padding:var(--space-8);border:var(--edge) solid var(--paper-border);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel p+h2,.panel h2+p,.panel p+p{margin-top:var(--space-3)}
.loading{min-height:calc(var(--portrait) + var(--space-16));display:flex;flex-direction:column;justify-content:center}
.welcome{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-12);align-items:center;padding-block:var(--space-12)}
.welcome-copy{max-width:56ch}
.welcome-copy h2{max-width:20ch;font-size:var(--text-display)}
.welcome-copy .eyebrow{margin-top:0}
.welcome-portrait{text-align:center;border-left:var(--line) solid var(--paper-border);padding-left:var(--space-12);color:var(--paper-muted)}
canvas{width:var(--portrait);height:auto;image-rendering:auto;display:block;max-width:100%}
.welcome-portrait canvas{width:calc(var(--portrait)*1.5);margin:auto}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-3);min-height:var(--target);padding:var(--space-2) var(--space-4);border:var(--edge) solid var(--paper-fg);border-radius:var(--radius);font-weight:700;text-decoration:none;cursor:pointer;line-height:var(--leading);white-space:normal}
.button.primary{background:var(--accent);color:var(--accent-fg);box-shadow:0 var(--space-1) 0 var(--paper-fg)}
.button.primary:hover{background:var(--accent-hover)}
.button.secondary{background:var(--paper);color:var(--paper-fg)}
.button.secondary:hover{background:var(--fg)}
.button.subtle{background:transparent;color:inherit;border-color:currentColor}
.button.subtle:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.button:active{transform:translateY(var(--press))}
.button:disabled{opacity:.6;cursor:wait;box-shadow:none}
.button[aria-busy=true]{cursor:wait;opacity:.65}
#check-signin,#load-error .button{margin-top:var(--space-6)}
.notice{padding:var(--space-4) var(--space-6);border:var(--line) solid var(--accent);background:var(--surface);margin-bottom:var(--space-6);max-width:none;overflow-wrap:anywhere}
.notice.error{color:var(--danger);border-color:var(--danger)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-6)}
.small{font-size:var(--text-small);line-height:var(--leading);color:var(--fg-muted)}
.panel .small{color:var(--paper-muted)}
.character-list{display:grid;gap:var(--space-4)}
.character-card{border:var(--line) solid var(--border);border-radius:var(--radius);padding:var(--space-6);background:var(--surface);display:grid;grid-template-columns:var(--roster-portrait) minmax(0,1fr);gap:var(--space-4)}
.character-card canvas{width:var(--roster-portrait)}
.character-card h3{overflow-wrap:anywhere;margin-top:var(--space-2)}
.character-card .actions{grid-column:1/-1;margin-top:0}
.character-card .button.subtle{border-color:var(--border)}
.character-card .small{margin-top:var(--space-2)}
.legacy-characters{margin-top:var(--space-8)}
.legacy-characters>.small{margin-bottom:var(--space-6)}
.recovery{margin-top:var(--space-8)}
.recovery-item{padding-top:var(--space-6);margin-top:var(--space-6);border-top:var(--line) solid var(--paper-border);overflow-wrap:anywhere}
.recovery-item .actions{margin-top:var(--space-3)}
.page-footer{padding-block:var(--space-12);color:var(--fg-muted);font-size:var(--text-small)}
.page-footer .quiet-link{margin-top:var(--space-2)}
.skip-link{position:absolute;top:var(--space-2);left:var(--space-4);z-index:2;background:var(--paper);color:var(--paper-fg);padding:var(--space-3);transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
@media(max-width:760px){
  .page-heading{display:block;padding-top:var(--space-8)}.account-bar{max-width:100%;margin-top:var(--space-6)}
  .welcome{grid-template-columns:1fr;gap:var(--space-8)}.welcome-portrait{border-left:0;border-top:var(--line) solid var(--paper-border);padding-left:0;padding-top:var(--space-6)}
  .welcome-portrait canvas{width:var(--portrait)}.panel{padding:var(--space-6)}
  .masthead{align-items:start}.brand{font-size:var(--text-large)}.brand span{max-width:16ch;line-height:var(--leading)}.masthead>.quiet-link{font-size:var(--text-small)}
}
@media(prefers-reduced-motion:no-preference){.button{transition:background .12s ease,transform .06s ease}}