/* Theme experiment, shared across the preview pages. */
:root:not([data-theme="light"]){
 color-scheme:dark;--bg:#191918;--ink:#eeeee8;--muted:#96918C;--muted-2:#85857e;--hover:#242423;--line:rgba(238,238,232,.12);
}
:root[data-theme="light"]{color-scheme:light;--ink:#343434;--muted:#848281}
:root[data-theme="light"] .site-grid8 .case p,
:root[data-theme="light"] .site-grid8 .case p.role{color:#4A443F}
:root:not([data-theme="light"]) .site-grid8 .case p,
:root:not([data-theme="light"]) .site-grid8 .case p.role{color:#C7C0B9}
::selection{background:#494943;color:#eeeee8}
.case .case-shot-frame,.case figure > img{background:var(--hover)}
.case .case-shot-crop{border-radius:8px}
:root[data-theme="light"] .case-shot-crop{border-radius:5px}
:root[data-theme="light"] .shot-tight-standard{--shot-ratio:2920 / 1840!important;--shot-width:123.28767123%!important;--shot-left:-11.64383562%!important;--shot-top:-15.21739130%!important}
:root[data-theme="light"] .shot-tight-wide{--shot-ratio:2920 / 1840!important;--shot-width:136.98630137%!important;--shot-left:-18.49315068%!important;--shot-top:-17.93478261%!important}
.clock-controls{display:inline-flex;align-items:center;gap:13px;margin-left:auto}
.local-footer .clock-controls .visitor-clock{margin-left:0}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:-8px 0;padding:8px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;flex-shrink:0}
.theme-toggle:hover{background:var(--hover);color:var(--ink)}
.theme-toggle:focus-visible{outline:2px solid var(--muted);outline-offset:5px}
.theme-toggle svg{display:block;width:18px;height:18px;overflow:visible}
.theme-toggle .sun,.theme-toggle .moon{transform-origin:12px 12px;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s ease}
.theme-toggle .sun{opacity:0;transform:rotate(-45deg) scale(.5)}
.theme-toggle .moon{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .theme-toggle .sun{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .theme-toggle .moon{opacity:0;transform:rotate(45deg) scale(.5)}
@property --theme-reveal-progress{syntax:"<length>";inherits:true;initial-value:0px}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){animation:themeDefocus .4s ease-out forwards;background:var(--theme-old-bg)}
::view-transition-new(root){mask-image:radial-gradient(circle at var(--theme-x,50%) var(--theme-y,50%),#000 calc(var(--theme-reveal-progress) - 160px),transparent var(--theme-reveal-progress));animation:themeReveal .4s cubic-bezier(.65,0,.35,1) forwards}
@keyframes themeDefocus{from{filter:blur(0)}to{filter:blur(8px)}}
@keyframes themeReveal{from{--theme-reveal-progress:0px;opacity:.5}to{--theme-reveal-progress:var(--theme-radius,150vmax);opacity:1}}
@media(prefers-reduced-motion:reduce){.theme-toggle .sun,.theme-toggle .moon{transition:none}::view-transition-old(root),::view-transition-new(root){animation:none;mask-image:none}}