/* Morning is also the no-JavaScript fallback. */
:root {
  color-scheme: light;
  --scene-wash: linear-gradient(90deg,var(--wash-strong) 0%,var(--wash-middle) 36%,var(--wash-faint) 63%,transparent 85%),linear-gradient(0deg,var(--wash-bottom),transparent 23%,transparent 78%,var(--wash-top));
  --scene-image: url('assets/morning-street.png');
  --surface: #fffdf5;
  --surface-hover: #f1f3e6;
  --surface-tint: #e8eddc;
  --surface-glass: #fffdf5ed;
  --paper-overlay: #f7f5ebd1;
  --contact-overlay: #f7f5ebbd;
  --band-overlay: #e9eddfc7;
  --footer-overlay: #e9eddfd1;
  --secondary-ink: #41513d;
  --accent-soft: #6e8d60;
  --title: #304e38;
  --title-shadow: #fff8df;
  --title-shadow-soft: #7e98642b;
  --button-ink: #fffdf3;
  --button-edge: #dfc181;
  --label-fill: #f2e5be;
  --ornament: #aebf9c;
  --card-edge: #fff8e080;
  --selection: #d2dbc4;
  --terminal-bg: #293e31;
  --terminal-ink: #d7e4c2;
  --terminal-line: #697e59;
  --terminal-muted: #c1cfab;
  --terminal-accent: #d4b375;
  --portrait-start: #e1ead2;
  --portrait-mid: #f7ebcf;
  --portrait-end: #d2e3da;
  --particle: #f9e9af;
  --particle-glow: #eed38b;
  --leaf: #adc385;
  --wash-strong: #fbf7eaf2;
  --wash-middle: #fbf7eac9;
  --wash-faint: #fbf7ea38;
  --wash-bottom: #f6f3e8e6;
  --wash-top: #f7f4e9b3;
}

:root[data-theme="evening"], .theme-preview[data-theme="evening"] {
  --scene-image: url('assets/evening-street.png');
  --ink: #49382f;
  --muted: #786052;
  --accent: #884e37;
  --sunlight: #a06d34;
  --paper: #f5e9dc;
  --line: #ddc8b5;
  --surface: #fff2e4;
  --surface-hover: #f4e4d3;
  --surface-tint: #efdbc5;
  --surface-glass: #fff2e4ed;
  --paper-overlay: #f5e9dcd1;
  --contact-overlay: #f5e9dcbd;
  --band-overlay: #e9d5c0c7;
  --footer-overlay: #e9d5c0d1;
  --secondary-ink: #654b3d;
  --accent-soft: #a17247;
  --title: #6b402e;
  --title-shadow: #ffefd5;
  --title-shadow-soft: #a36b392b;
  --button-ink: #fff6e8;
  --button-edge: #e4b578;
  --label-fill: #f0d4aa;
  --ornament: #c4a17c;
  --card-edge: #f8d8b080;
  --selection: #e4c2a4;
  --terminal-bg: #3c302a;
  --terminal-ink: #f0d5b5;
  --terminal-line: #927157;
  --terminal-muted: #d8bda1;
  --terminal-accent: #e8b775;
  --portrait-start: #e7c7a6;
  --portrait-mid: #fae2c0;
  --portrait-end: #d4c5b3;
  --particle: #ffdaa0;
  --particle-glow: #f5b95c;
  --leaf: #cbb378;
  --wash-strong: #f5e9dcf2;
  --wash-middle: #f5e9dcc9;
  --wash-faint: #f5e9dc38;
  --wash-bottom: #f5e9dce6;
  --wash-top: #f5e9dcb3;
}

:root[data-theme="night"], .theme-preview[data-theme="night"] {
  color-scheme: dark;
  --scene-image: url('assets/night-street.png');
  --ink: #e7ece4;
  --muted: #adbcc5;
  --accent: #b8d2b1;
  --sunlight: #e5bc7b;
  --paper: #141f2c;
  --line: #3c5061;
  --surface: #1d2c3b;
  --surface-hover: #283b4b;
  --surface-tint: #2b4050;
  --surface-glass: #1d2c3bed;
  --paper-overlay: #141f2cd1;
  --contact-overlay: #141f2cbd;
  --band-overlay: #192937c7;
  --footer-overlay: #192937d1;
  --secondary-ink: #c2cfd5;
  --accent-soft: #a1bfa0;
  --title: #e5ebd8;
  --title-shadow: #192f40;
  --title-shadow-soft: #8aaf9d35;
  --button-ink: #182b26;
  --button-edge: #e5bc7b;
  --label-fill: #344558;
  --ornament: #79958b;
  --card-edge: #839ea333;
  --selection: #425e65;
  --terminal-bg: #101d28;
  --terminal-ink: #c8dcc8;
  --terminal-line: #3c5766;
  --terminal-muted: #aabdbd;
  --terminal-accent: #e5bc7b;
  --portrait-start: #344d5a;
  --portrait-mid: #465563;
  --portrait-end: #213949;
  --particle: #f6d99a;
  --particle-glow: #eec479;
  --leaf: #a2bbb0;
  --wash-strong: #141f2cf2;
  --wash-middle: #141f2cc9;
  --wash-faint: #141f2c38;
  --wash-bottom: #141f2ce6;
  --wash-top: #141f2cb3;
}

/* The logo and AINKUN heading share the exact morning/evening/night title color. */
[data-theme="night"] .sidebar-logo img { filter:brightness(0) invert(1); }
@supports (mask-image: url('')) or (-webkit-mask-image: url('')) {
  .sidebar-logo img { visibility:hidden; }
  .sidebar-logo::after {
    content:'';position:absolute;inset:0;pointer-events:none;
    background-color:var(--title);
    -webkit-mask:url('assets/logo-clean/ainkun-clean.png') center / contain no-repeat;
    mask:url('assets/logo-clean/ainkun-clean.png') center / contain no-repeat;
    transition:background-color .35s ease;
  }
}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.theme-controls {
  position:fixed;top:16px;right:24px;z-index:30;width:290px;
  padding:7px 8px 5px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-glass);color:var(--ink);
  box-shadow:0 5px 24px #101d2814;backdrop-filter:blur(14px);
}
.theme-controls[hidden] { display:none; }
.theme-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px; }
.theme-options button {
  display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;
  border:1px solid transparent;border-radius:6px;padding:5px 6px;
  background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.theme-options button:hover { background:var(--surface-hover);color:var(--ink); }
.theme-options button[aria-pressed="true"] { background:var(--surface-tint);color:var(--accent);border-color:var(--line); }
.theme-options svg { width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.theme-meta { display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 5px 0;font:9px/1.5 var(--mono); }
.theme-auto { padding:2px 0;background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;text-underline-offset:3px; }
.theme-auto:hover,.theme-controls[data-mode="preview"] .theme-auto { text-decoration:underline; }
.theme-auto::before { content:'';display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:var(--sunlight); }
.theme-auto[aria-pressed="true"]::before { background:var(--accent-soft); }
.theme-clock { color:var(--muted);font-variant-numeric:tabular-nums; }
.theme-controls[aria-busy="true"] .theme-options { opacity:.65; }
/* Make space for the controls without covering the hero's opening line. */
@media(min-width:761px) { .hero { padding-top:102px; } }
@media(max-width:760px) {
  .theme-controls { top:8px;right:18px;width:250px;padding:4px 5px 3px;border-radius:7px;box-shadow:none; }
  .theme-options button { min-height:29px;padding:3px 4px;font-size:10px; }
  .theme-options svg { width:15px;height:15px; }
  .theme-meta { font-size:8px;padding-top:1px; }
  .sidebar-bottom { left:18px;right:auto;top:59px;font-size:8px;line-height:1.2;gap:4px; }
}
@media(max-width:420px) {
  .theme-controls { right:10px;width:184px; }
  .theme-options button { gap:3px;font-size:9px;padding:3px 2px; }
  .theme-options svg { width:12px;height:12px; }
  .theme-meta { padding-left:2px;padding-right:2px;font-size:7px; }
  .sidebar { padding-left:12px;padding-right:12px; }
  .sidebar-bottom { left:12px; }
}
@media(prefers-reduced-motion:reduce) { .theme-options button { transition:none; } }