:root {
  --c-blue:#4C97F2; --c-green:#46C26A; --c-gold:#F2C94C; --c-red:#F2655C; --c-orange:#F28C4C; --c-purple:#7C6BF5; --c-silver:#9FB0C8;
  --c:#4C97F2;
  --radius:11px;
  --mono:'JetBrains Mono', monospace;
  --sans:'Inter', -apple-system, sans-serif;
}
/* Default season: summer (production palette) */
html[data-theme="dark"] {
  --bg:#16181D; --bg-accent:#22262E;
  --win:#1E222A; --win-2:#2C313B; --bar:#1A1D23;
  --ink:#454B57;
  --shadow:#000000;
  --text-hi:#F1F3F6; --text-mid:#A2A9B5; --text-dim:#6C7480;
  --pill-text:#06122A;
  --dot-off:#3A404A;
  --cell-off:#2C313B;
  --c-blue:#4C97F2; --c-gold:#F2C94C;
}
html[data-theme="light"] {
  --bg:#A6F0A0; --bg-accent:#FFFFFF;
  --win:#F7F3E9; --win-2:#FFFFFF; --bar:#FFFFFF;
  --ink:#111111;
  --shadow:#111111;
  --text-hi:#111111; --text-mid:#3a3a3a; --text-dim:#5a5a5a;
  --pill-text:#FFFFFF;
  --dot-off:#cfc9b6;
  --cell-off:#d9d3c2;
  --c-blue:#4C97F2; --c-gold:#F2C94C;
}

/* Fall */
html[data-season="fall"][data-theme="dark"] {
  --bg:#1A1714; --bg-accent:#2A231C;
  --win:#221E19; --win-2:#332C24; --bar:#1E1A16;
  --ink:#5A4F42;
  --text-hi:#F5EDE3; --text-mid:#B5A894; --text-dim:#7A6F60;
  --pill-text:#1A1008;
  --dot-off:#3A332C;
  --cell-off:#332C24;
  --c-blue:#E8A04C; --c-gold:#D4A03A;
}
html[data-season="fall"][data-theme="light"] {
  --bg:#E5C76B; --bg-accent:#FFFAF2;
  --win:#F5EDE0; --win-2:#FFFAF2; --bar:#FFFAF2;
  --ink:#2A1F14;
  --shadow:#2A1F14;
  --text-hi:#1A1208; --text-mid:#4A3D2E; --text-dim:#6B5A45;
  --dot-off:#d9cdb8;
  --cell-off:#e8dcc8;
  --c-blue:#C45C3E; --c-gold:#E8A04C;
}

/* Winter */
html[data-season="winter"][data-theme="dark"] {
  --bg:#121820; --bg-accent:#1A2330;
  --win:#18202C; --win-2:#243040; --bar:#151C28;
  --ink:#3D4F66;
  --text-hi:#E8EEF5; --text-mid:#8FA3B8; --text-dim:#5C7085;
  --pill-text:#0A1828;
  --dot-off:#2E3D52;
  --cell-off:#243040;
  --c-blue:#6BB8E8; --c-gold:#E8D48C;
}
html[data-season="winter"][data-theme="light"] {
  --bg:#C8DCE8; --bg-accent:#FFFFFF;
  --win:#F4F8FC; --win-2:#FFFFFF; --bar:#FFFFFF;
  --ink:#1A2838;
  --shadow:#1A2838;
  --text-hi:#0E1824; --text-mid:#3A5068; --text-dim:#5A7088;
  --dot-off:#b8ccd8;
  --cell-off:#d0e0ea;
  --c-blue:#4A9FD4; --c-gold:#E8D48C;
}

/* Spring */
html[data-season="spring"][data-theme="dark"] {
  --bg:#151A17; --bg-accent:#1E2822;
  --win:#1C241E; --win-2:#2A352C; --bar:#181F1A;
  --ink:#455548;
  --text-hi:#ECF5EE; --text-mid:#9BB0A0; --text-dim:#6A8070;
  --pill-text:#0A2018;
  --dot-off:#354038;
  --cell-off:#2A352C;
  --c-blue:#5CD68A; --c-gold:#F2D87C;
}
html[data-season="spring"][data-theme="light"] {
  --bg:#B8E8C8; --bg-accent:#FFFFFF;
  --win:#F5FAF6; --win-2:#FFFFFF; --bar:#FFFFFF;
  --ink:#1A3020;
  --shadow:#1A3020;
  --text-hi:#0E2018; --text-mid:#3A5A48; --text-dim:#5A7868;
  --dot-off:#a8d8b8;
  --cell-off:#c8e8d0;
  --c-blue:#E07A8A; --c-gold:#F2D87C;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--sans); background:var(--bg); color:var(--text-hi);
  line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  transition:background .25s;
}
a { color:inherit; text-decoration:none; }
input { font-family:inherit; }

/* ---------- Menu bar ---------- */
.menubar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:18px;
  background:var(--bar); border-bottom:2.5px solid var(--ink);
  padding:7px 18px; font-family:var(--mono); font-size:12px; color:var(--text-mid);
}
.menubar .logo { font-weight:700; color:var(--text-hi); }
.menubar nav { display:flex; gap:18px; }
.menubar nav a { color:var(--text-mid); }
.menubar nav a:hover { color:var(--text-hi); }
.menubar nav a.active { color:var(--text-hi); font-weight:700; }
html[data-theme="light"] .menubar nav a.active { color:var(--c-blue); }
.menubar .back { color:var(--text-mid); }
.menubar .back:hover { color:var(--c-blue); }
.menubar .spacer { flex:1; }
.menubar .clock { color:var(--text-mid); }
.theme-controls { display:flex; align-items:center; gap:8px; flex:none; }
.themebtn {
  font-family:var(--mono); font-size:12px; font-weight:500; color:var(--text-hi);
  background:var(--win); border:2px solid var(--ink); border-radius:7px;
  padding:3px 10px; cursor:pointer; box-shadow:2px 2px 0 var(--ink); transition:transform .1s, box-shadow .1s;
  white-space:nowrap;
}
.themebtn:active { transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }

.seasonpick { position:relative; }
.season-menu {
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:156px; background:var(--win);
  border:2.5px solid var(--ink); border-radius:var(--radius);
  box-shadow:4px 4px 0 var(--shadow); z-index:40; overflow:hidden;
}
.season-menu[hidden] { display:none; }
.season-menu-bar {
  display:flex; align-items:center; gap:7px;
  padding:5px 9px; border-bottom:2.5px solid var(--ink); background:var(--win-2);
}
.season-menu-bar .dot-close { width:10px; height:10px; }
.season-menu-bar .grip { height:6px; }
.season-menu-bar .tname { font-family:var(--mono); font-size:10px; color:var(--text-dim); }
.season-menu-body { padding:5px; display:flex; flex-direction:column; gap:3px; }
.season-opt {
  font-family:var(--mono); font-size:11px; text-align:left;
  color:var(--text-mid); background:transparent;
  border:2px solid transparent; border-radius:6px;
  padding:5px 8px; cursor:pointer; width:100%;
}
.season-opt:hover { color:var(--text-hi); background:var(--win-2); }
.season-opt.is-active {
  color:var(--text-hi); font-weight:700;
  border-color:var(--ink); background:var(--win-2);
  box-shadow:2px 2px 0 var(--shadow);
}

.wrap { width:100%; margin:0 auto; padding:0 1.5rem; flex:1 0 auto; }

/* ---------- Window primitive ---------- */
.win { background:var(--win); border:2.5px solid var(--ink); border-radius:var(--radius); box-shadow:6px 6px 0 var(--shadow); overflow:hidden; }
.titlebar { display:flex; align-items:center; gap:9px; padding:7px 11px; border-bottom:2.5px solid var(--ink); background:var(--win); }
.dot-close { width:13px; height:13px; border:2px solid var(--ink); border-radius:3px; background:var(--win-2); flex:none; }
.grip { flex:1; height:8px; background:repeating-linear-gradient(var(--ink) 0 2px, transparent 2px 5px); opacity:.85; }
.titlebar .tname { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--text-mid); white-space:nowrap; }

/* ---------- Shared utilities ---------- */
.hl { background:var(--c-blue); color:var(--pill-text); border:2.5px solid var(--ink); border-radius:8px; padding:0 8px; display:inline-block; line-height:1.15; }
.page-head { padding:2.5rem 0 0.5rem; }
.page-head h1 { font-size:clamp(1.9rem,4vw,2.8rem); font-weight:800; line-height:1.1; letter-spacing:-0.03em; }
.page-head p { margin-top:0.8rem; max-width:60ch; color:var(--text-mid); font-size:1.02rem; }
.section { padding:2rem 0; }
.sec-label { font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.9rem; }
.prose { padding:1.4rem 1.6rem; font-size:1rem; color:var(--text-mid); line-height:1.75; }
.prose p + p { margin-top:0.8rem; }
.actions { display:flex; gap:0.8rem; flex-wrap:wrap; }
.btn { font-family:var(--sans); font-size:0.9rem; font-weight:600; color:var(--text-hi); border:2.5px solid var(--ink); border-radius:9px; padding:0.6rem 1.1rem; cursor:pointer; box-shadow:4px 4px 0 var(--ink); transition:transform .1s, box-shadow .1s; display:inline-flex; align-items:center; gap:8px; }
.btn:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn-primary { background:var(--c-gold); color:#1a1300; }
.btn-ghost { background:var(--win-2); color:var(--text-hi); }
.tag { font-family:var(--mono); font-size:0.7rem; color:var(--text-mid); border:2px solid var(--ink); border-radius:6px; padding:1px 8px; }
.skill-row { display:flex; flex-wrap:wrap; gap:0.5rem; }
.skill { font-family:var(--mono); font-size:0.72rem; color:var(--text-mid); border:2px solid var(--ink); border-radius:6px; padding:2px 9px; background:var(--win-2); }

/* ---------- Footer (mirrors menubar) ---------- */
.footbar {
  margin-top:3rem; flex:none;
  display:flex; align-items:center; gap:18px;
  background:var(--bar); border-top:2.5px solid var(--ink);
  padding:7px 18px; font-family:var(--mono); font-size:12px; color:var(--text-mid);
}
.footbar .c { color:var(--text-dim); }
.footbar .spacer { flex:1; }
.footlinks { display:flex; gap:16px; }
.footlinks a { color:var(--text-mid); }
.footlinks a:hover { color:var(--c-blue); }

@media (max-width:560px){
  .menubar{gap:10px;padding:calc(7px + env(safe-area-inset-top,0px)) 12px 7px;}
  .menubar nav{gap:10px;}
  .menubar .clock{display:none;}
  .theme-controls{gap:6px;}
  .themebtn{font-size:11px;padding:3px 8px;}
  .footbar{flex-wrap:wrap;gap:8px 12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));margin-top:2rem;}
  .footbar .spacer{display:none;}
  .footlinks{flex-wrap:wrap;gap:12px;}
  .wrap{padding:0 1rem;}
}