:root{--page-ink:#141414;--page-bg:var(--light-bg,#fff);background:var(--page-bg);color-scheme:light}
html[data-theme=dark]{--page-bg:#111111;--dark-ink:#deded8;--page-ink:var(--dark-ink);background:var(--page-bg);color:var(--dark-ink);color-scheme:dark}
body{background:var(--page-bg)}
header nav{margin-left:auto;max-width:calc(100% - 150px)}
.theme-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;margin-left:20px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:11px;letter-spacing:.02em;cursor:pointer}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3}
.theme-toggle .theme-half{fill:currentColor;stroke:none}
.theme-toggle:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
header[data-nav-align=left] .theme-toggle,header[data-nav-align=center] .theme-toggle{margin-left:auto}
header[data-nav-align=center] nav{left:50%;max-width:calc(100% - 220px)}
html[data-theme=dark] .brand img{filter:brightness(0) invert(1) brightness(.87)}
html[data-theme=dark] .preview-bar{background:#1b1b1b;color:var(--dark-ink);border-color:#444}
@media(hover:hover) and (pointer:fine){html[data-theme=dark] body,html[data-theme=dark] body *{cursor:url('/branding/reframe-cursor-light.svg') 9 8,auto!important}}
@media(max-width:480px){.theme-toggle{margin-left:10px;gap:5px;font-size:10px}.theme-toggle svg{width:15px;height:15px}header nav{max-width:calc(100% - 115px);gap:15px}header[data-nav-align=center] nav{max-width:calc(100% - 170px)}}

html[data-theme=dark] .project-title{color:var(--dark-ink)}

html.theme-revealing::view-transition-group(root){animation:none}html.theme-revealing::view-transition-old(root),html.theme-revealing::view-transition-new(root){animation:none;mix-blend-mode:normal}html.theme-revealing::view-transition-old(root){z-index:1}html.theme-revealing::view-transition-new(root){z-index:2}

/* Animate the real page surface on iOS so Safari's toolbar samples the same colour. */
html.theme-blending,html.theme-blending body,html.theme-blending body>header{transition:background-color 350ms ease,color 350ms ease}
html.theme-blending .brand img{transition:filter 350ms ease}
@media(prefers-reduced-motion:reduce){html.theme-blending,html.theme-blending body,html.theme-blending body>header,html.theme-blending .brand img{transition:none}}