/* BenjiThatFoxGuy design system: tokens + components. Source: the design system artifact (tokens.json, components/bundle.css). */
@font-face{font-family:Johnston;src:url(fonts/Johnston.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CC Wild Words";src:url(fonts/CCWildWords-Roman.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{
  --bg-page:#000000;
  --bg-surface:#0a0a0a;
  --ink:#f0f0f0;
  --danger:#f44336;
  --danger-deep:#d32f2f;
  --on-brand:#ffffff;
  --error-text:#cf6679;
  --border:#262626;
  --disabled-ink:#888888;
  --wall-blue:#366fc2;
  --wall-violet:#7633b5;
  --wall-magenta:#be1886;
  --logo-blue:#2d71c7;
  --logo-blue-deep:#1961a9;
  --ink-muted:#9a9a9a;
  --surface-raised:#1a1a1a;
  --border-strong:#2a2a2a;
  --wall-blue-lt:#5a8fe0;
  --wall-violet-lt:#9b5bd6;
  --wall-magenta-lt:#e14ba8;
  --wash-blue:#366fc22e;
  --wash-magenta:#be18862e;
  --wash-violet:#9b5bd61f;
  --panel-border:#9b5bd62e;
  --accent-border:#9b5bd673;
  --glow:#7633b559;
  --space-5:5px;
  --space-10:10px;
  --space-12:12px;
  --space-15:15px;
  --space-20:20px;
  --space-25:25px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --shadow-card:0 6px 15px rgba(0, 0, 0, 0.4);
  --shadow-button:0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-button-hover:0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-button-active:0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-image-hover:0 5px 15px rgba(0, 0, 0, 0.3);
  --shadow-glow:0 0 0 0.2rem rgba(118, 51, 181, 0.35);
  --shadow-accent-bar:inset 3px 0 0 #be1886;
  --font-sans:Johnston, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-display:"CC Wild Words", "Comic Sans MS", cursive;
  --font-johnston:Johnston, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-beeching:Beeching, Johnston, "Segoe UI", sans-serif;
  --font-dotmatrix:"London Underground Dot", monospace;
}
:root[data-theme="dim"],[data-theme="dim"]{
  --bg-page:#121212;
  --bg-surface:#1f1f1f;
  --ink:#e0e0e0;
  --border:#444444;
}
*{box-sizing:border-box}
.bf-container{max-width:700px;margin:var(--space-20) auto;background:var(--bg-surface);padding:var(--space-25);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:center;font-family:var(--font-sans);color:var(--ink);line-height:1.6}
.bf-title{text-align:center;color:var(--wall-violet-lt);margin:0 0 var(--space-25);font-size:32px;font-weight:400}
.bf-button-row{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-12);margin-bottom:var(--space-25)}
.bf-btn{padding:var(--space-12) var(--space-20);background:linear-gradient(135deg,var(--wall-blue),var(--wall-violet),var(--wall-magenta));color:var(--on-brand);border:none;border-radius:var(--radius-sm);cursor:pointer;font:400 16px/1.6 var(--font-sans);box-shadow:var(--shadow-button);flex:1 1 120px;max-width:140px;text-transform:capitalize;user-select:none;white-space:nowrap;transition:background .3s ease,transform .1s ease,box-shadow .2s ease}
.bf-btn:hover{filter:brightness(1.15);transform:translateY(-2px);box-shadow:var(--shadow-button-hover),var(--shadow-glow)}
.bf-btn:active{filter:none;transform:translateY(0);box-shadow:var(--shadow-button-active)}
.bf-btn--danger{background:linear-gradient(to right,var(--danger),var(--danger-deep))}
.bf-btn--inverse{background:var(--on-brand);color:var(--wall-violet)}
.bf-btn:disabled{filter:none;background:var(--border);color:var(--disabled-ink);cursor:not-allowed;transform:none;box-shadow:none}
.bf-image{max-width:100%;border-radius:var(--radius-md);border:2px solid var(--border);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;user-select:none}
.bf-image:hover{transform:scale(1.02);box-shadow:var(--shadow-image-hover)}
.bf-message{margin-top:var(--space-10);color:var(--error-text);font-weight:400;min-height:1.5em;text-align:center}
@media (max-width:480px){.bf-btn{flex:1 1 100px;max-width:120px;font-size:14px;padding:var(--space-10) var(--space-15)}.bf-container{padding:var(--space-15);max-width:95vw}}
.bf-wallpaper{background:linear-gradient(to top right,var(--wall-blue) 0%,#6841b9 30%,var(--wall-violet) 50%,#7b2eb3 60%,var(--wall-magenta) 100%);color:var(--on-brand);font-family:var(--font-sans)}
.bf-gradient{background:linear-gradient(135deg,var(--wall-blue),var(--wall-violet),var(--wall-magenta))}
.bf-gradient-soft{background:linear-gradient(135deg,var(--wash-blue),var(--wash-magenta))}

.bf-link{color:var(--wall-violet-lt);text-decoration:none}.bf-link:hover{color:var(--wall-magenta-lt)}
.bf-header{background:var(--bg-page);color:var(--ink);font-family:var(--font-sans);padding:var(--space-15) var(--space-20);border-bottom:2px solid transparent;border-image:linear-gradient(135deg,var(--wall-blue),var(--wall-violet),var(--wall-magenta)) 1}
.bf-panel{background:var(--bg-surface);color:var(--ink);font-family:var(--font-sans);border:1px solid var(--panel-border);border-radius:var(--radius-md);padding:var(--space-15)}
.bf-alert{background:var(--bg-surface);color:var(--ink);font-family:var(--font-sans);border:1px solid var(--panel-border);border-left:4px solid var(--wall-violet);border-radius:var(--radius-md);padding:var(--space-15);line-height:1.6}
.bf-alert--info{background-image:linear-gradient(135deg,var(--wash-blue),var(--wash-magenta));border-color:var(--accent-border);border-left-color:var(--wall-violet)}
.bf-alert a{color:var(--wall-magenta-lt);text-decoration:underline}
.bf-alert small,.bf-alert .bf-date{color:var(--ink-muted)}
.bf-alert code{background:var(--surface-raised);color:var(--wall-violet-lt);padding:1px 6px;border-radius:4px}
.bf-input{background:var(--bg-surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-10) var(--space-12);font:400 16px/1.6 var(--font-sans);width:100%}
.bf-input:focus{outline:none;border-color:var(--wall-violet);box-shadow:var(--shadow-glow)}
.bf-tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--border);font-family:var(--font-sans)}
.bf-tab{padding:var(--space-10) var(--space-15);color:var(--ink-muted);border-bottom:2px solid transparent;margin-bottom:-1px;background:none;border-top:0;border-left:0;border-right:0;font:400 16px/1.6 var(--font-sans);cursor:pointer}
.bf-tab--active{color:var(--wall-violet-lt);border-bottom-color:var(--wall-magenta)}
.bf-pill{padding:var(--space-5) var(--space-15);border-radius:var(--radius-md);color:var(--ink);border:0;background:none;font:400 16px/1.6 var(--font-sans);cursor:pointer}
.bf-pill--active{background:linear-gradient(135deg,var(--wall-blue),var(--wall-violet),var(--wall-magenta));color:var(--on-brand)}
.bf-list-item{padding:var(--space-10) var(--space-15);color:var(--ink);font-family:var(--font-sans)}
.bf-list-item--active{background:linear-gradient(135deg,var(--wash-blue),var(--wash-magenta));box-shadow:var(--shadow-accent-bar);color:var(--wall-violet-lt)}

.bf-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-20);padding:var(--space-25) var(--space-20);min-height:320px}
.bf-hero__title{margin:0;font-family:var(--font-display);font-size:64px;line-height:1;text-transform:uppercase;color:var(--on-brand)}
.bf-hero__sub{margin:0;font-size:18px;line-height:1.6;color:var(--on-brand);max-width:36em}