.nav-shell:has(.theme-control) {
  gap: 22px;
}

.nav-shell > .brand { order: 0; }
.nav-shell > .site-nav { order: 1; margin-left: auto; }
.nav-shell > .theme-control { order: 2; }
.nav-shell > .menu-toggle { order: 3; }

.theme-control {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--leaf-dark);
}

.theme-control[hidden] { display: none; }

.theme-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.theme-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.theme-symbol svg { display: block; width: 24px; height: 24px; }
.theme-symbol .theme-moon { display: none; }
html[data-theme="dark"] .theme-symbol .theme-sun { display: none; }
html[data-theme="dark"] .theme-symbol .theme-moon { display: initial; }

#theme-select {
  min-height: 44px;
  max-width: 125px;
  padding: 8px 7px;
  border: 1px solid #C9D3C0;
  border-radius: 8px;
  background-color: #FFFDF7;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

#theme-select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --cream: #17251F;
  --paper: #22352B;
  --ink: #F4EBD8;
  --leaf: #B6CBA2;
  --leaf-dark: #C7DCB6;
  --leaf-soft: #304738;
  --gold: #E8BD76;
  --gold-soft: #423D2A;
  --muted: #BBC4B3;
  --line: #425646;
  --garden-yellow: #E8BD76;
  --garden-pink: #DDA8B6;
  --garden-blue: #AAC6D0;
}

html[data-theme="dark"] body {
  background-color: var(--cream);
}

html[data-theme="dark"] ::selection {
  background: #6B6140;
  color: #FFF6E3;
}

html[data-theme="dark"] .site-header {
  background: #17251FF5;
}

html[data-theme="dark"] .site-nav .nav-download {
  background: #B6CBA2;
  color: #17251F;
}

html[data-theme="dark"] .site-nav .nav-download:hover {
  background: #C7DCB6;
  color: #17251F;
}

html[data-theme="dark"] #theme-select {
  border-color: #53664E;
  background-color: #22352B;
  color: #F4EBD8;
}

html[data-theme="dark"] .skip-link {
  background: #E8BD76;
  color: #17251F;
}

html[data-theme="dark"] .hero::before {
  background:
    linear-gradient(90deg, #17251FF5 0%, #17251FE8 34%, #17251FC7 66%, #17251FB8 100%),
    url("assets/garden-backdrop.webp") center 65% / cover no-repeat;
}

html[data-theme="dark"] .small-sun,
html[data-theme="dark"] .hero-english {
  color: var(--gold);
}

html[data-theme="dark"] .hero-product-frame {
  border-color: #6A7C5F;
  background: #22352B;
  box-shadow: 0 20px 54px #07120B66, 0 2px 0 #B6CBA21A;
}

html[data-theme="dark"] .hero-product-note {
  border-color: #586247;
  background: #22352BF5;
}

html[data-theme="dark"] .note-check {
  background: var(--gold);
  color: #17251F;
}

html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .button-light {
  background: var(--gold);
  color: #17251F;
}

html[data-theme="dark"] .button-primary:hover,
html[data-theme="dark"] .button-light:hover {
  background: #F2CC91;
}

html[data-theme="dark"] .button-outline {
  background: #22352B;
  border-color: #7D936D;
  color: #C7DCB6;
}

html[data-theme="dark"] .button-outline:hover {
  background: #304738;
}

html[data-theme="dark"] .task-section { background-color: #1E2C25; }
html[data-theme="dark"] .plugins-section { background-color: #1C3025; }
html[data-theme="dark"] .product-section::before { background-color: #2B2D2A; }
html[data-theme="dark"] .privacy-section::before { background-color: #1C2D2C; }

html[data-theme="dark"] .plugins-section::after {
  opacity: .1;
  mix-blend-mode: screen;
}

html[data-theme="dark"] .story-demo {
  border-color: var(--line);
  background: #22352B;
  box-shadow: 0 18px 52px #07120B33;
}

html[data-theme="dark"] .story-steps button[aria-pressed="true"] {
  background: #304738;
  border-color: #728764;
}

html[data-theme="dark"] .story-step-number {
  background: #17251F;
  color: #E8BD76;
}

html[data-theme="dark"] .story-controls button {
  border-color: #6A7C5F;
  color: #C7DCB6;
}

html[data-theme="dark"] .story-controls #story-play {
  background: #B6CBA2;
  border-color: #B6CBA2;
  color: #17251F;
}

html[data-theme="dark"] .story-screen {
  border-color: #53664E;
  background: #1C2A23;
  box-shadow: 0 14px 38px #07120B33;
}

html[data-theme="dark"] .story-chat {
  background: #1C2A23;
  color: #F4EBD8;
}

html[data-theme="dark"] .story-chat-bar {
  background: #293C30;
  border-color: #425646;
}

html[data-theme="dark"] .story-chat-time,
html[data-theme="dark"] .story-chat-sender,
html[data-theme="dark"] .story-chat-disclaimer {
  color: #B2BEAB;
}

html[data-theme="dark"] .story-chat-avatar {
  background: #566E50;
  color: #FFF6E3;
}

html[data-theme="dark"] .story-chat-message p {
  background: #314737;
}

html[data-theme="dark"] .story-chat-reply p {
  background: #4B6143;
  color: #F4EBD8;
}

html[data-theme="dark"] .story-chat-self {
  background: #E8BD76;
  color: #3D3220;
}

html[data-theme="dark"] .story-chat-transfer {
  background: #273D2D;
  border-color: #7D936D;
  color: #C7DCB6;
}

html[data-theme="dark"] .story-zoom,
html[data-theme="dark"] .product-image-zoom {
  background: #20362DF2;
  color: #F4EBD8;
}

html[data-theme="dark"] .care-visual {
  background: #22352B;
  border-color: #506443;
}

html[data-theme="dark"] .care-day {
  background: #3A5137;
  color: #D2E2C3;
}

html[data-theme="dark"] .work-duration p,
html[data-theme="dark"] .timeline-labels,
html[data-theme="dark"] .timeline-legend,
html[data-theme="dark"] .nudge-time {
  color: #BBC4B3;
}

html[data-theme="dark"] .work-timeline > span { background: #718967; }
html[data-theme="dark"] .work-timeline .timeline-focus,
html[data-theme="dark"] .timeline-legend .legend-focus { background: #B6CBA2; }
html[data-theme="dark"] .work-timeline .timeline-meeting { background: #AAC6D0; }
html[data-theme="dark"] .work-timeline .timeline-break,
html[data-theme="dark"] .timeline-legend .legend-rest { background: #756E52; }
html[data-theme="dark"] .timeline-legend .legend-active { background: #718967; }

html[data-theme="dark"] .care-nudge {
  border-color: #6E6A4A;
  background: #313B2D;
  box-shadow: 0 7px 14px #07120B33;
}

html[data-theme="dark"] .nudge-symbol { color: #B6CBA2; }
html[data-theme="dark"] .care-handwritten { color: #DDA8B6; }

html[data-theme="dark"] .plugin-button:hover { background: #2B4131; }
html[data-theme="dark"] .plugin-button[aria-pressed="true"] {
  background: #304738;
  box-shadow: inset 3px 0 #B6CBA2;
}

html[data-theme="dark"] .plugin-arrow { color: #B6CBA2; }
html[data-theme="dark"] .plugin-button[data-plugin="routine"] .plugin-symbol,
html[data-theme="dark"] .plugin-button[data-plugin="achievement"] .plugin-symbol { color: #E8BD76; }
html[data-theme="dark"] .plugin-button[data-plugin="focus"] .plugin-symbol { color: #DDA8B6; }
html[data-theme="dark"] .plugin-button[data-plugin="notebook"] .plugin-symbol { color: #AAC6D0; }

html[data-theme="dark"] .plugins-section .plugin-detail {
  border-color: #425646;
  background: #22352B;
}

html[data-theme="dark"] .plugins-section #plugin-preview,
html[data-theme="dark"] .product-screenshot-frame {
  border-color: #65775A;
  background: #22352B;
  box-shadow: 0 14px 38px #07120B33;
}

html[data-theme="dark"] .plugin-demo-caption { color: #BBC4B3; }

html[data-theme="dark"] .product-view-switcher button {
  border-color: #64705E;
  background: #22352B;
  color: #BBC4B3;
}

html[data-theme="dark"] .product-view-switcher button[aria-pressed="true"] {
  background: #B6CBA2;
  border-color: #B6CBA2;
  color: #17251F;
}

html[data-theme="dark"] .computer-icon { border-color: #B6CBA2; }
html[data-theme="dark"] .computer-icon::before,
html[data-theme="dark"] .computer-icon::after { background: #B6CBA2; }
html[data-theme="dark"] .computer-icon > span { border-color: #E8BD76; }
html[data-theme="dark"] .computer-icon > span::before,
html[data-theme="dark"] .computer-icon > span::after { background: #E8BD76; }

html[data-theme="dark"] .local-data-label {
  background: #304738;
  color: #C7DCB6;
}

html[data-theme="dark"] .data-actions {
  border-color: #425646;
  color: #C7DCB6;
}

html[data-theme="dark"] .download-section {
  background-color: #2B4132;
  color: #F4EBD8;
  border-block: 1px solid #425646;
}

html[data-theme="dark"] .download-intro,
html[data-theme="dark"] .download-layout > div > p:last-child,
html[data-theme="dark"] .primary-download > p,
html[data-theme="dark"] .release-links,
html[data-theme="dark"] .windows-download small,
html[data-theme="dark"] .windows-release,
html[data-theme="dark"] .download-options > .download-note {
  color: #C6D2BD;
}

html[data-theme="dark"] .platform-symbol,
html[data-theme="dark"] .windows-symbol { color: #E8BD76; }
html[data-theme="dark"] .windows-download { border-color: #6B7F5F; }
html[data-theme="dark"] .windows-download:hover { color: #E8BD76; }

html[data-theme="dark"] .faq-list,
html[data-theme="dark"] .faq-list details,
html[data-theme="dark"] .site-footer { border-color: #425646; }

html[data-theme="dark"] .faq-list summary > span::before,
html[data-theme="dark"] .faq-list summary > span::after { background: #B6CBA2; }

html[data-theme="dark"] .family-section { background: #17251F; }
html[data-theme="dark"] .family-copy {
  background: #22352BF7;
  border-color: #82936D;
  box-shadow: 0 8px 28px #07120B66;
}
html[data-theme="dark"] .family-floral-frame { border-color: #586C46; }

html[data-theme="dark"] .footer-top > p,
html[data-theme="dark"] .back-top,
html[data-theme="dark"] .motion-toggle { color: #BBC4B3; }

html[data-theme="dark"] .screenshot-lightbox {
  border: 1px solid #53664E;
  background: #22352B;
  color: #F4EBD8;
}
html[data-theme="dark"] .screenshot-lightbox::backdrop { background: #08130FE0; }
html[data-theme="dark"] .lightbox-bar { border-color: #425646; background: #22352B; }

@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .story-steps button:hover { border-color: #82936D; }
  html[data-theme="dark"] .story-screenshot:hover .story-zoom,
  html[data-theme="dark"] #plugin-preview:hover .story-zoom { background: #304738; }
}

@media (max-width: 1100px) {
  .nav-shell:has(.theme-control) { gap: 16px; }
  .nav-shell:has(.theme-control) .site-nav { gap: 16px; }
}

@media (max-width: 960px) {
  .nav-shell:has(.theme-control) { position: relative; }
  .nav-shell > .theme-control { order: 1; margin-left: auto; }
  .nav-shell > .menu-toggle { order: 2; display: flex; font-size: 12px; }
  .nav-shell > .site-nav {
    order: 3;
    display: none;
    position: absolute;
    inset: calc(100% - 9px) 0 auto;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 11px;
    padding: 12px;
    box-shadow: 0 12px 25px #39433010;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
  }
  .nav-shell > .site-nav.is-open,
  .nav-shell > .site-nav[data-open="true"] { display: flex; }
  .nav-shell > .site-nav > a { padding: 8px 13px; min-height: 46px; font-size: 13px; }
  .nav-shell > .site-nav .nav-download { margin-top: 6px; justify-content: space-between; }
  html[data-theme="dark"] .site-nav { background: #22352B; border-color: #53664E; box-shadow: 0 12px 25px #07120B66; }
}

@media (max-width: 760px) {
  html[data-theme="dark"] .hero::before {
    background-position: center, 62% bottom;
    background-size: auto, auto 100%;
  }
  html[data-theme="dark"] .plugins-section::after { opacity: .08; }
}

@media (max-width: 480px) {
  .nav-shell:has(.theme-control) { gap: 10px; }
  .theme-control { gap: 3px; }
  #theme-select { padding-inline: 4px; max-width: 108px; }
  .nav-shell:has(.theme-control) .menu-toggle { min-width: 44px; padding-inline: 3px; }
  .nav-shell:has(.theme-control) .menu-toggle > span:first-child { display: none; }
}

@media (max-width: 360px) {
  .nav-shell:has(.theme-control) { width: calc(100% - 28px); gap: 6px; }
  .nav-shell:has(.theme-control) > .brand { gap: 6px; font-size: 17px; }
  .nav-shell:has(.theme-control) > .brand img { width: 28px; height: 28px; }
  .nav-shell:has(.theme-control) > .brand > span { display: none; }
}