/* Website appearance is independent of the five app-theme swatches. */
:root {
  --section: #e8ebdf;
  --surface: #f8f7f1;
  --soft-surface: #e6e8de;
  --hover-surface: #e5eadc;
  --glass: rgba(244,243,237,.88);
  --menu-glass: rgba(248,248,240,.96);
  --control-surface: #e7ebdf;
  --selected-bg: #344a36;
  --selected-ink: #fff;
  --button-hover: #40543e;
  --button-hover-ink: #f4f3ed;
  --ambient: #dfe6d940;
  --overlay: #1e2c2455;
  --shadow: #18251d35;
  --mark-filter: none;
  --selection-bg: #d1dcc5;
  --selection-ink: #1c2b20;
  --contact-bg: #ebe6dc;
  --contact-ink: #594b3e;
}
:root[data-color-mode='dark'] {
  color-scheme: dark;
  --paper: #141c18;
  --ink: #edf0e6;
  --muted: #a8b3a6;
  --accent: #b4c99e;
  --line: rgba(212,225,201,.19);
  --panel: #1d2821;
  --soft: #26342b;
  --section: #1b261f;
  --surface: #202c24;
  --soft-surface: #29362d;
  --hover-surface: #344637;
  --glass: rgba(26,37,30,.9);
  --menu-glass: rgba(32,44,36,.97);
  --control-surface: #344637;
  --selected-bg: #b4c99e;
  --selected-ink: #17231b;
  --button-hover: #c2d4b2;
  --button-hover-ink: #141c18;
  --ambient: #637e4b24;
  --overlay: #060c09b3;
  --shadow: #00000066;
  --mark-filter: brightness(0) invert(.92);
  --selection-bg: #b4c99e;
  --selection-ink: #141c18;
  --contact-bg: #302d23;
  --contact-ink: #e0d0b6;
}
/* A useful dark page remains available even with JavaScript disabled. */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-mode]) {
    color-scheme: dark;
    --paper:#141c18;--ink:#edf0e6;--muted:#a8b3a6;--accent:#b4c99e;--line:rgba(212,225,201,.19);
    --panel:#1d2821;--soft:#26342b;--section:#1b261f;--surface:#202c24;--soft-surface:#29362d;
    --hover-surface:#344637;--glass:rgba(26,37,30,.9);--menu-glass:rgba(32,44,36,.97);
    --control-surface:#344637;--selected-bg:#b4c99e;--selected-ink:#17231b;
    --button-hover:#c2d4b2;--button-hover-ink:#141c18;--ambient:#637e4b24;--overlay:#060c09b3;
    --shadow:#00000066;--mark-filter:brightness(0) invert(.92);--selection-bg:#b4c99e;--selection-ink:#141c18;
    --contact-bg:#302d23;--contact-ink:#e0d0b6;
  }
}
:root[data-color-mode='light'] { color-scheme: light; }
::selection { background:var(--selection-bg);color:var(--selection-ink); }
img[src$='plop-mark.png'] { filter:var(--mark-filter); }
.appearance-toggle {
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;
  width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.appearance-toggle[hidden] { display:none; }
.appearance-toggle:hover { background:var(--hover-surface); }
.appearance-toggle:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }
.appearance-toggle svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.appearance-toggle .appearance-sun { display:none; }
[data-color-mode='dark'] .appearance-toggle .appearance-moon { display:none; }
[data-color-mode='dark'] .appearance-toggle .appearance-sun { display:block; }
.nav-shell>nav { gap:22px; }
.nav-cta:hover { background:var(--hover-surface);border-color:var(--accent); }
.ambient-light { background:radial-gradient(ellipse at 78% 46%,var(--ambient) 0,transparent 55%); }
.themes-section,.get-section { background:var(--section); }
.chapter-buttons,.motion-control { background:var(--glass); }
.chapter-buttons button:hover,.motion-control:hover { background:var(--hover-surface); }
.chapter-buttons button[aria-pressed='true'] { background:var(--ink);color:var(--paper); }
.theme-controls .swatch:hover { background:var(--hover-surface); }
.swatches .swatch[aria-pressed='true'] { border-color:var(--accent); }
.swatches .swatch span { border-color:var(--line); }
.theme-demo { border-color:var(--line);box-shadow:0 35px 70px -45px var(--shadow); }
.button-primary:hover { background:var(--button-hover);color:var(--button-hover-ink); }
#command-dialog { background:var(--surface);border-color:var(--line);box-shadow:0 40px 130px var(--shadow); }
#command-dialog::backdrop { background:var(--overlay); }
.command-close:hover,.command-result:hover,.command-result.is-selected { background:var(--hover-surface); }
#command-dialog input::placeholder { color:var(--muted);opacity:1; }
.ipad-preview { background:var(--paper); }
.ipad-menu { background:var(--menu-glass);border-color:var(--line);box-shadow:0 14px 50px var(--shadow); }
.ipad-menu button { background:var(--control-surface); }
.ipad-menu button[aria-pressed='true'] { background:var(--selected-bg);color:var(--selected-ink); }
.mac-preview { background:var(--surface);border-color:var(--line);box-shadow:0 28px 60px -35px var(--shadow); }
.mac-preview-bar { background:var(--soft-surface); }
.mac-preview-second { border-color:var(--line); }
.contact-note { background:var(--contact-bg);color:var(--contact-ink); }
.skip { color:var(--paper); }
.site-nav { align-items:center; }
.photography-nav { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px; }
@media(max-width:700px) {
  .nav-shell>nav { gap:10px; }
  .nav-cta { padding-inline:16px; }
  .site-header { gap:12px; }
  .site-nav { gap:12px; }
}
@media(max-width:380px) {
  .site-header { flex-wrap:wrap; }
  .site-nav { width:100%;justify-content:space-between; }
}