/* Colour themes and the interactive neural field; no external dependencies. */
:root {
  color-scheme: light;
  --surface: #edeee5;
  --hover: #e9eddc;
  --selected: #232622;
  --on-selected: #f3f2ec;
  --board-surface: #e9ede1;
  --neural-line: #829774;
  --neural-node: #6d855b;
  --neural-hot: #467d2a;
  --neural-glow: #a3cd7c47;
  --icon-surface: transparent;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141a17;
  --ink: #e6ebe2;
  --muted: #a0ae9c;
  --line: #354136;
  --lime: #c4e789;
  --orange: #f38d6a;
  --surface: #1b241e;
  --hover: #253021;
  --selected: #c4e789;
  --on-selected: #1a2416;
  --board-surface: #1b261e;
  --neural-line: #62775a;
  --neural-node: #819a69;
  --neural-hot: #d6f799;
  --neural-glow: #b0e57821;
  --icon-surface: #eeefe8;
}
body, .hero-board, .service-grid, .skill-card, .case-plus, .filters button, .search-box input, .education, .education-side {
  transition: background-color .5s ease, color .4s ease, border-color .4s ease;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 4px 0 4px 5px;
  color: var(--muted);
}
.theme-label { font: 9px var(--mono); min-width: 42px; text-align: right; }
.theme-scene {
  display: block;
  width: 82px;
  height: 40px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background: #a9cfe4;
  box-shadow: inset 0 1px 4px #1c385031, 0 0 0 1px #23262212;
  transition: background-color .65s ease, box-shadow .65s ease;
}
.theme-orb {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 5px;
  top: 5px;
  border-radius: 50%;
  background: #ffdb79;
  box-shadow: inset 0 -2px 3px #c08c2333, 0 0 0 8px #ffffff17, 0 0 0 16px #ffffff10, 0 2px 5px #394a393b;
  transform: translateX(0);
  transition: transform .65s cubic-bezier(.22,.8,.24,1), background-color .65s ease, box-shadow .65s ease;
  z-index: 2;
}
.theme-orb:after {
  content: '';
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  top: -2px;
  left: -4px;
  background: #283151;
  transform: translate(-21px,-15px);
  opacity: 0;
  transition: transform .65s cubic-bezier(.22,.8,.24,1), opacity .65s ease;
}
.theme-clouds, .theme-clouds:before, .theme-clouds:after {
  position: absolute;
  display: block;
  content: '';
  background: #f8fbfb;
  border-radius: 50%;
  transition: transform .65s ease, opacity .65s ease;
}
.theme-clouds { width: 57px; height: 24px; right: -10px; bottom: -13px; box-shadow: -17px 2px 0 #e3eff6; }
.theme-clouds:before { width: 27px; height: 23px; right: 5px; bottom: 8px; }
.theme-clouds:after { width: 24px; height: 20px; right: 26px; bottom: 1px; }
.theme-stars { position: absolute; inset: 0; opacity: 0; transform: translateY(-15px); transition: transform .65s ease, opacity .65s ease; }
.theme-stars i { position: absolute; display: block; width: 3px; height: 3px; border-radius: 50%; background: #eef0ff; }
.theme-stars i:nth-child(1) { left: 14px; top: 10px; width: 2px; height: 2px; }
.theme-stars i:nth-child(2) { left: 29px; top: 17px; }
.theme-stars i:nth-child(3) { left: 10px; top: 27px; width: 2px; height: 2px; }
.theme-stars i:nth-child(4) { left: 36px; top: 7px; width: 2px; height: 2px; }
.theme-stars i:nth-child(5) { left: 25px; top: 29px; width: 2px; height: 2px; }
[data-theme="dark"] .theme-scene { background: #283151; box-shadow: inset 0 1px 5px #0b10246b, 0 0 0 1px #b9c8da23; }
[data-theme="dark"] .theme-orb { transform: translateX(42px); background: #eff0d9; box-shadow: inset 0 -2px 3px #a7ad8f44, 0 0 0 8px #ffffff08, 0 0 0 16px #ffffff05, 0 2px 5px #060a1444; }
[data-theme="dark"] .theme-orb:after { opacity: 1; transform: translate(0,0); }
[data-theme="dark"] .theme-stars { opacity: 1; transform: translateY(0); }
[data-theme="dark"] .theme-clouds { opacity: 0; transform: translateY(30px); }
.theme-toggle:hover .theme-scene { box-shadow: 0 0 0 3px var(--line); }
.hero-board.neural-board { background: var(--board-surface); color: var(--ink); border: 1px solid var(--line); isolation: isolate; }
#neural-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; z-index: -1; }
.neural-board .board-top { color: var(--muted); pointer-events: none; }
.neural-board .board-top i { background: var(--neural-hot); box-shadow: 0 0 7px var(--neural-hot); }
.field-bottom { position: absolute; left: 23px; bottom: 26px; right: 180px; pointer-events: none; }
.field-bottom>span { display: block; font: 8px var(--mono); color: var(--muted); margin-bottom: 9px; letter-spacing: .04em; }
.field-bottom p { font-size: 11px; line-height: 1.6; color: var(--ink); }
.experience-stamp { color: #232622; }
.experience-stamp strong, .experience-stamp span { color: #232622; }
.service-grid { background: var(--surface); }
.service-outcome { border-color: var(--line); }
.skill-card:hover { background: var(--hover); }
.skill-card img { background: var(--icon-surface); border-radius: 7px; padding: 4px; box-sizing: content-box; }
.filters button[aria-pressed="true"], .empty-state button, .skip-link { background: var(--selected); color: var(--on-selected); border-color: var(--selected); }
.filters button[aria-pressed="true"] span { color: var(--on-selected); opacity: .75; }
[data-theme="dark"] .primary-link { background: var(--lime); color: #192513; }
[data-theme="dark"] .primary-link span { color: #192513; }
[data-theme="dark"] .primary-link:hover { background: #d4eea5; }
[data-theme="dark"] .hero-description em { box-shadow: inset 0 -3px var(--lime); }
.education { background: #232d23; color: #f3f2ec; }
.education-side { background: #2b372a; }
[data-theme="dark"] .education { background: #202b21; border: 1px solid var(--line); }
[data-theme="dark"] .education-side { background: #253226; }
@media(max-width:850px) { .theme-label { display: none; } .theme-scene { width: 74px; height: 36px; } .theme-orb { width: 28px; height: 28px; top: 4px; left: 4px; } [data-theme="dark"] .theme-orb { transform: translateX(38px); } .theme-orb:after { width: 22px; height: 22px; } .field-bottom { left: 15px; right: 150px; bottom: 22px; } .field-bottom>span { font-size: 7px; } .field-bottom p { font-size: 9px; } }
@media(max-width:600px) { .header { gap: 12px; } .header nav { gap: 10px; font-size: 9px; } .theme-toggle { padding: 3px 0; } .theme-scene { width: 64px; height: 34px; } .theme-orb { width: 26px; height: 26px; } [data-theme="dark"] .theme-orb { transform: translateX(30px); } .theme-orb:after { width: 21px; height: 21px; } .field-bottom { left: 16px; right: 160px; } .field-bottom>span { font-size: 6px; line-height: 1.7; } .field-bottom p { font-size: 10px; } }
@media(max-width:360px) { .header { gap: 7px; } .header nav { gap: 7px; font-size: 8px; } .monogram { width: 33px; height: 36px; font-size: 16px; } .theme-scene { width: 58px; height: 32px; } .theme-orb { width: 24px; height: 24px; } [data-theme="dark"] .theme-orb { transform: translateX(26px); } .theme-orb:after { width: 20px; height: 20px; } }
@media(prefers-reduced-motion:reduce) { body, .hero-board, .service-grid, .skill-card, .case-plus, .filters button, .search-box input, .education, .education-side, .theme-scene, .theme-orb, .theme-orb:after, .theme-clouds, .theme-clouds:before, .theme-clouds:after, .theme-stars { transition: none; } }