/* SUURA theme layer: dark is the default look, light is optional. Pages are authored in their
   native look (data-native on <html>); the other theme is produced by a colour inversion,
   with photos, video and the dark sidebar/panels re-inverted so they keep their look. */
html[data-theme]:not([data-theme="x"]){color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html[data-native="dark"][data-theme="light"],html[data-native="light"][data-theme="dark"]{filter:invert(1) hue-rotate(180deg)}
html[data-native="dark"][data-theme="light"] body,html[data-native="light"][data-theme="dark"] body{min-height:100vh}
html[data-theme] video,html[data-theme] .keep,html[data-theme] .split .r,html[data-theme] .side{}
html[data-native="dark"][data-theme="light"] video,
html[data-native="light"][data-theme="dark"] .side,html[data-native="light"][data-theme="dark"] .split .r,html[data-native="light"][data-theme="dark"] .keep{filter:invert(1) hue-rotate(180deg)}
/* toggle */
.tg{font:500 12px/1 'Helvetica Neue',Arial,sans-serif;letter-spacing:.06em;display:inline-flex;align-items:center;gap:7px;cursor:pointer;border-radius:999px;padding:9px 14px;border:1px solid rgba(255,255,255,.28);background:#1b1b1c;color:#f5f5f5}
.tg.fx{position:fixed;right:16px;bottom:16px;z-index:60;box-shadow:0 4px 18px rgba(0,0,0,.35)}
html[data-native="light"] .tg.fx,html[data-native="tokens"][data-theme="light"] .tg.fx{background:#fff;color:#0a0a0a;border-color:#cfcfd2}
.tg.in{margin:10px 8px 0;background:#232323;color:#efefef;border-color:#2c2c2c}
.tg:focus-visible{outline:2px solid #C7CAD0;outline-offset:2px}
@media(min-width:900px){html[data-native="tokens"] .tg.fx{left:28px;right:auto;bottom:88px}}
@media(min-width:761px){html[data-native="light"] .tg.fx{left:28px;right:auto;bottom:88px}}