/* Shared by the blog and the standalone cycling scene. */
:root {
  --control-ink: #294e44;
  --control-muted: #5b7769;
  --control-paper: #f5f8ee;
  --control-soft: #e1eddd;
  --control-line: #a1bcac;
  --control-sun: #f5cf83;
  --control-sun-hover: #f9dc9c;
  --control-sun-line: #c39e60;
  --control-coral: #d66d52;
  --control-shadow: #bfd1be;
  --primary: #407461;
  --soft: #edf3e9;
  --border: #d8e4d5;
}
:root.dark {
  --control-ink: #e0ecda;
  --control-muted: #b3c7b7;
  --control-paper: #30463b;
  --control-soft: #405c4b;
  --control-line: #698679;
  --control-coral: #f1a181;
  --control-shadow: #1d3127;
  --primary: #acd2b9;
  --soft: #354b3d;
  --border: #516b5a;
}
button { border-radius: 6px; letter-spacing: 0; transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .18s; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--control-coral); outline-offset: 4px; }
.icon-button, .social-links a, .social-links button, .copy-contact,
.scene-control, .scene-speed-presets button, .scene-weather-control button,
.music-icon-button, .music-skip, .music-loop, .notification button,
.pagination button, .page .theme {
  border: 1px solid var(--control-line);
  border-radius: 6px;
  color: var(--control-ink);
  background: var(--control-paper);
  box-shadow: 0 2px 0 var(--control-shadow);
  letter-spacing: 0;
}
.icon-button:hover, .social-links a:hover, .social-links button:hover, .copy-contact:hover,
.scene-control:hover, .scene-speed-presets button:hover, .scene-weather-control button:hover,
.music-icon-button:hover, .music-skip:hover, .music-loop:hover, .notification button:hover,
.pagination button:not(:disabled):hover, .page .theme:hover {
  color: var(--control-ink);
  border-color: var(--primary);
  background: var(--control-soft);
}
.icon-button:active, .social-links a:active, .social-links button:active, .copy-contact:active,
.scene-control:active, .scene-speed-presets button:active, .scene-weather-control button:active,
.music-icon-button:active, .music-skip:active, .music-loop:active, .notification button:active,
.page .theme:active { transform: translateY(2px); box-shadow: none; }
.icon-button, .social-links a, .social-links button, .music-icon-button, .notification button {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: none;
}
.icon-button { font-size: 23px; }
.mobile-menu { display: none; }
.social-links { padding: 14px 26px; gap: 12px; }
.social-links .icon { font-size: 22px; }
.profile-cover-button { border: 0; border-radius: 0; box-shadow: none; }
.profile-cover-button:focus-visible { outline-offset: -4px; }
.gitee-link { padding: 5px 8px; border: 1px solid var(--control-ink); border-radius: 6px; background: #365e51; color: #f5f8ee; font-size: 14px; }
.gitee-link:hover { background: #477765; color: #fff; }
.desktop-nav { gap: 5px; }
.desktop-nav>a, .desktop-nav>button {
  height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; color: var(--control-ink);
}
.desktop-nav>a:after { display: none; }
.desktop-nav>a:hover, .desktop-nav>button:hover { color: var(--control-ink); background: var(--control-soft); border-color: var(--control-line); }
.desktop-nav>a.active, .mobile-drawer nav a.active { color: #294e44; background: var(--control-sun); border-color: var(--control-sun-line); }
.desktop-nav .search-button { width: 36px; padding: 0; margin-right: 4px; border-color: var(--control-line); background: var(--control-paper); }
.desktop-nav .search-button .icon { font-size: 23px; }
.desktop-nav>button[data-action=login] { border-color: var(--control-line); background: var(--control-paper); }
.desktop-nav>button[data-action=login]:hover { background: var(--control-soft); }
.site-header.scrolled { background: rgba(245,248,238,.95); }
.dark .site-header.scrolled { background: rgba(38,55,45,.96); }
.dark .site-header:not(.scrolled) { color: var(--control-ink); background: rgba(38,55,45,.94); }
.theme-toggle { width: 48px; height: 26px; padding: 0 4px; border: 1px solid var(--control-line); background: #abc7b4; color: #294e44; border-radius: 16px; box-shadow: 0 2px 0 var(--control-shadow); }
.theme-toggle:hover { border-color: var(--primary); }
.theme-knob { left: 3px; top: 3px; width: 18px; height: 18px; background: var(--control-sun); border: 1px solid var(--control-sun-line); }
.dark .theme-toggle { background: #3e5a4b; color: #e0ecda; }
.dark .theme-knob { transform: translateX(22px); }
.mobile-drawer nav a, .mobile-drawer nav button { min-height: 44px; border: 1px solid transparent; border-radius: 6px; }
.mobile-drawer nav a:hover, .mobile-drawer nav button:hover { color: var(--control-ink); background: var(--control-soft); border-color: var(--control-line); }
.mobile-drawer p, .profile-say { overflow-wrap: anywhere; line-height: 1.9; }
.skip-link { border: 1px solid var(--control-line); border-radius: 6px; }
.gradient-button, .music-controls .play-toggle, .page .play {
  min-height: 40px; border: 1px solid var(--control-sun-line); border-radius: 6px;
  padding: 9px 20px; color: #294e44; background: var(--control-sun);
  box-shadow: 0 2px 0 var(--control-sun-line); font-weight: 600;
}
.gradient-button:hover, .music-controls .play-toggle:hover, .page .play:hover { background: var(--control-sun-hover); color: #294e44; transform: translateY(-1px); }
.gradient-button:active, .music-controls .play-toggle:active, .page .play:active { transform: translateY(2px); box-shadow: none; }
.dialog-heading h2 { color: var(--control-ink); }
.dialog-heading .icon-button { color: var(--control-ink); }
dialog { border: 1px solid var(--control-line); }
dialog::backdrop { background: rgba(25,49,40,.48); }
.field input, .field textarea, .search-input-wrap input { border: 1px solid var(--control-line); border-radius: 6px; background: var(--control-paper); }
.search-input-wrap input:focus-visible { outline: 2px solid var(--control-coral); }
.copy-contact { min-height: 30px; padding: 4px 9px; }
.notification { border: 1px solid var(--control-line); background: var(--control-paper); color: var(--control-ink); }
.notification strong { padding-right: 32px; }
.notification button { width: 28px; height: 28px; top: 10px; right: 10px; font-size: 20px; }
.back-top { width: 44px; height: 44px; border: 1px solid var(--control-line); color: var(--control-ink); background: var(--control-paper); box-shadow: 0 2px 0 var(--control-shadow); }
.back-top:hover { color: var(--control-ink); background: var(--control-sun); border-color: var(--control-sun-line); }
.hero:not(.compact) .scroll-down { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; bottom: 100px; border: 1px solid #87a994; border-radius: 50%; color: #294e44; background: rgba(237,243,229,.82); }
.hero:not(.compact) .scroll-down:hover { background: var(--control-sun); border-color: var(--control-sun-line); }
.scene-controls { background: rgba(245,248,238,.95); border-color: #a1bcac; gap: 14px; padding: 9px 14px; }
.dark .scene-controls { color: var(--control-ink); background: rgba(48,70,59,.95); border-color: var(--control-line); }
.scene-speed-heading output { color: var(--control-ink); }
.scene-speed-presets { gap: 5px; }
.scene-speed-presets button { flex: 1; min-width: 0; height: 25px; padding: 0 3px; font-size: 11px; }
.scene-weather-control { padding: 0; border: 0; gap: 5px; }
.scene-weather-control button { height: 36px; }
.scene-control[aria-pressed=true], .scene-speed-presets button[aria-pressed=true],
.scene-weather-control button[aria-pressed=true], .music-loop.active,
.pagination button.active, .page .theme[aria-pressed=true] {
  color: #294e44; background: var(--control-sun); border-color: var(--control-sun-line); box-shadow: 0 2px 0 var(--control-sun-line);
}
input[type=range], .scene-controls input[type=range], .music-panel input[type=range] {
  height: 6px; border-radius: 3px; accent-color: var(--primary); background: var(--control-line);
}
.scene-controls input[type=range] { background: linear-gradient(to right,#458675 var(--speed-progress,27.27%),var(--control-line) var(--speed-progress,27.27%)); }
input[type=range]::-webkit-slider-thumb, .scene-controls input[type=range]::-webkit-slider-thumb, .music-panel input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border: 3px solid var(--control-paper); border-radius: 50%; background: var(--control-sun); box-shadow: 0 0 0 1px var(--primary);
}
input[type=range]::-moz-range-thumb, .scene-controls input[type=range]::-moz-range-thumb, .music-panel input[type=range]::-moz-range-thumb {
  width: 10px; height: 10px; border: 3px solid var(--control-paper); border-radius: 50%; background: var(--control-sun); box-shadow: 0 0 0 1px var(--primary);
}
.music-launcher, .music-panel, .dark .music-launcher, .dark .music-panel {
  --music-paper: var(--control-paper); --music-ink: var(--control-ink); --music-muted: var(--control-muted);
  --music-line: var(--control-line); --music-soft: var(--control-soft); --music-sun: var(--control-sun);
  border-color: var(--control-line); border-radius: 8px; letter-spacing: 0;
}
.music-launcher[aria-expanded=true] { background: var(--control-soft); }
.music-panel { background-image: none; }
.music-header, .music-artwork>span, .music-info strong { letter-spacing: 0; }
.music-artwork { border-radius: 6px; }
.music-controls .play-toggle { width: 50px; height: 50px; padding: 0; border-radius: 50%; }
.music-skip { width: 38px; height: 38px; padding: 4px; }
.music-loop { min-height: 30px; padding: 4px 8px; }
.music-panel input[type=range] { margin: 0; }
.music-volume input { width: 70px; }
.category-tile, .friend-link { border: 1px solid var(--control-line); }
.category-tile:hover, .friend-link:hover { color: var(--control-ink); background: var(--control-soft); border-color: var(--primary); }
.friend-logo { background: #477765; color: #f5f8ee; }
.friend-link:nth-child(2n) .friend-logo { background: var(--control-sun); color: #294e44; }
.badges .blue { background: #477765; }
.badges span { background: #294e44; }
.like-button { border-color: var(--control-coral); color: var(--control-coral); background: var(--control-paper); }
.like-button.liked { background: var(--control-coral); color: #fff; }
.page .theme { padding: 11px 16px; }
.page .play { min-width: 118px; height: 42px; }
@media (max-width: 1100px) and (min-width: 769px) {
  .desktop-nav { gap: 3px; }
  .desktop-nav>a, .desktop-nav>button { padding: 0 6px; }
}
@media (max-width: 768px) {
  .mobile-menu { display: inline-grid; }
  .mobile-profile .social-links { padding: 14px 52px; }
  .theme-toggle { width: 48px; }
}
@media (max-width: 600px) {
  .scene-controls { padding: 9px 12px; gap: 8px 12px; }
  .scene-weather-control button { height: 32px; }
  .hero:not(.compact) .scroll-down { bottom: 154px; }
}