/* tema.css · dag, skymning, natt — written by tools/tema.py (the one source of the hall's colours; do not edit by hand).
   <html class="natt|skymning|dag"> follows the sun in Göteborg (app/tema.py first, web/js/tema.js after). Every colour is a
   registered @property, so a change of class glides for 20 minutes once the page has drawn (html.fade); reduced motion = at once. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #07080f; }
@property --bg-2 { syntax: "<color>"; inherits: true; initial-value: #0b0d1f; }
@property --bg-3 { syntax: "<color>"; inherits: true; initial-value: #1a1f4a; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #f2f3f7; }
@property --mut { syntax: "<color>"; inherits: true; initial-value: #9a9db0; }
@property --dim { syntax: "<color>"; inherits: true; initial-value: #8286a3; }
@property --rail { syntax: "<color>"; inherits: true; initial-value: #5e6280; }
@property --acc { syntax: "<color>"; inherits: true; initial-value: #8fa9ff; }
@property --acc-2 { syntax: "<color>"; inherits: true; initial-value: #3f63ee; }
@property --acc-wash { syntax: "<color>"; inherits: true; initial-value: rgba(143, 169, 255, .14); }
@property --acc-line { syntax: "<color>"; inherits: true; initial-value: rgba(143, 169, 255, .55); }
@property --line { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .14); }
@property --line-2 { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .08); }
@property --glass { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .07); }
@property --glass-2 { syntax: "<color>"; inherits: true; initial-value: rgba(12, 14, 34, .7); }
@property --glass-3 { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .05); }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #0b0d1f; }
@property --danger { syntax: "<color>"; inherits: true; initial-value: #ff8fb1; }
@property --warn { syntax: "<color>"; inherits: true; initial-value: #f2b36b; }
@property --ok { syntax: "<color>"; inherits: true; initial-value: #8fa9ff; }
@property --fill { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .08); }
@property --fill-2 { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .13); }
@property --field { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .06); }
@property --field-hover { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .26); }
@property --track { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .1); }
@property --primary-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --wash { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --shade { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 1); }
@property --deep { syntax: "<color>"; inherits: true; initial-value: #07080f; }
@property --navy { syntax: "<color>"; inherits: true; initial-value: #0c0e22; }
@property --scrim { syntax: "<color>"; inherits: true; initial-value: rgba(4, 5, 14, .66); }
@property --scrim-2 { syntax: "<color>"; inherits: true; initial-value: rgba(4, 5, 14, .45); }
@property --sheet { syntax: "<color>"; inherits: true; initial-value: #111330; }
@property --menu { syntax: "<color>"; inherits: true; initial-value: #12143a; }
@property --csheet { syntax: "<color>"; inherits: true; initial-value: #11143a; }
@property --bar-bg { syntax: "<color>"; inherits: true; initial-value: rgba(10, 11, 26, .94); }
@property --thead { syntax: "<color>"; inherits: true; initial-value: rgba(17, 19, 44, .97); }
@property --violet { syntax: "<color>"; inherits: true; initial-value: #9b6bff; }
@property --hero-glow { syntax: "<color>"; inherits: true; initial-value: rgba(143, 169, 255, .45); }
@property --fj-under { syntax: "<color>"; inherits: true; initial-value: rgba(80, 100, 230, 0); }
@property --fjw-1 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fjw-2 { syntax: "<color>"; inherits: true; initial-value: #6f8cff; }
@property --fjw-3 { syntax: "<color>"; inherits: true; initial-value: #9b6bff; }
@property --fjh-1 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fjh-2 { syntax: "<color>"; inherits: true; initial-value: #9b6bff; }
@property --fjh-3 { syntax: "<color>"; inherits: true; initial-value: #cfe6ff; }
@property --fjb-1 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fjb-2 { syntax: "<color>"; inherits: true; initial-value: #6f8cff; }
@property --fj-edge { syntax: "<color>"; inherits: true; initial-value: #6f8cff; }
@property --fj-edge-2 { syntax: "<color>"; inherits: true; initial-value: #9b6bff; }
@property --fj-vein { syntax: "<color>"; inherits: true; initial-value: #cfe6ff; }
@property --fj-core { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fjw-1o { syntax: "<number>"; inherits: true; initial-value: .75; }
@property --fjw-2o { syntax: "<number>"; inherits: true; initial-value: .35; }
@property --fjw-3o { syntax: "<number>"; inherits: true; initial-value: .05; }
@property --fjh-1o { syntax: "<number>"; inherits: true; initial-value: .6; }
@property --fjh-2o { syntax: "<number>"; inherits: true; initial-value: .35; }
@property --fjh-3o { syntax: "<number>"; inherits: true; initial-value: .04; }
@property --fjb-2o { syntax: "<number>"; inherits: true; initial-value: .15; }
@property --fj-vein-o { syntax: "<number>"; inherits: true; initial-value: .9; }
:root.fade { transition: --bg 20min linear, --bg-2 20min linear, --bg-3 20min linear, --fg 20min linear, --mut 20min linear, --dim 20min linear, --rail 20min linear, --acc 20min linear, --acc-2 20min linear, --acc-wash 20min linear, --acc-line 20min linear, --line 20min linear, --line-2 20min linear, --glass 20min linear, --glass-2 20min linear, --glass-3 20min linear, --ink 20min linear, --danger 20min linear, --warn 20min linear, --ok 20min linear, --fill 20min linear, --fill-2 20min linear, --field 20min linear, --field-hover 20min linear, --track 20min linear, --primary-hover 20min linear, --wash 20min linear, --shade 20min linear, --deep 20min linear, --navy 20min linear, --scrim 20min linear, --scrim-2 20min linear, --sheet 20min linear, --menu 20min linear, --csheet 20min linear, --bar-bg 20min linear, --thead 20min linear, --violet 20min linear, --hero-glow 20min linear, --fj-under 20min linear, --fjw-1 20min linear, --fjw-2 20min linear, --fjw-3 20min linear, --fjh-1 20min linear, --fjh-2 20min linear, --fjh-3 20min linear, --fjb-1 20min linear, --fjb-2 20min linear, --fj-edge 20min linear, --fj-edge-2 20min linear, --fj-vein 20min linear, --fj-core 20min linear, --fjw-1o 20min linear, --fjw-2o 20min linear, --fjw-3o 20min linear, --fjh-1o 20min linear, --fjh-2o 20min linear, --fjh-3o 20min linear, --fjb-2o 20min linear, --fj-vein-o 20min linear; }
:root, html.natt { --bg: #07080f; --bg-2: #0b0d1f; --bg-3: #1a1f4a; --fg: #f2f3f7; --mut: #9a9db0; --dim: #8286a3; --rail: #5e6280; --acc: #8fa9ff; --acc-2: #3f63ee; --acc-wash: rgba(143, 169, 255, .14); --acc-line: rgba(143, 169, 255, .55); --line: rgba(255, 255, 255, .14); --line-2: rgba(255, 255, 255, .08); --glass: rgba(255, 255, 255, .07); --glass-2: rgba(12, 14, 34, .7); --glass-3: rgba(255, 255, 255, .05); --ink: #0b0d1f; --danger: #ff8fb1; --warn: #f2b36b; --ok: #8fa9ff; --fill: rgba(255, 255, 255, .08); --fill-2: rgba(255, 255, 255, .13); --field: rgba(255, 255, 255, .06); --field-hover: rgba(255, 255, 255, .26); --track: rgba(255, 255, 255, .1); --primary-hover: #ffffff; --wash: #ffffff; --shade: rgba(0, 0, 0, 1); --deep: #07080f; --navy: #0c0e22; --scrim: rgba(4, 5, 14, .66); --scrim-2: rgba(4, 5, 14, .45); --sheet: #111330; --menu: #12143a; --csheet: #11143a; --bar-bg: rgba(10, 11, 26, .94); --thead: rgba(17, 19, 44, .97); --violet: #9b6bff; --hero-glow: rgba(143, 169, 255, .45); --fj-under: rgba(80, 100, 230, 0); --fjw-1: #ffffff; --fjw-2: #6f8cff; --fjw-3: #9b6bff; --fjh-1: #ffffff; --fjh-2: #9b6bff; --fjh-3: #cfe6ff; --fjb-1: #ffffff; --fjb-2: #6f8cff; --fj-edge: #6f8cff; --fj-edge-2: #9b6bff; --fj-vein: #cfe6ff; --fj-core: #ffffff; --fjw-1o: .75; --fjw-2o: .35; --fjw-3o: .05; --fjh-1o: .6; --fjh-2o: .35; --fjh-3o: .04; --fjb-2o: .15; --fj-vein-o: .9; --shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .18); }
html.skymning { --bg: #12132e; --bg-2: #1a1838; --bg-3: #4a3468; --fg: #f7f3f2; --mut: #cdc6d8; --dim: #b3abc4; --rail: #a59cba; --acc: #a9b8ff; --acc-2: #4c5bdc; --acc-wash: rgba(169, 184, 255, .14); --acc-line: rgba(169, 184, 255, .55); --line: rgba(255, 240, 235, .16); --line-2: rgba(255, 240, 235, .09); --glass: rgba(255, 245, 240, .08); --glass-2: rgba(26, 20, 46, .66); --glass-3: rgba(255, 245, 240, .06); --ink: #1a1838; --danger: #ffa0bc; --warn: #ffc27a; --ok: #a9b8ff; --fill: rgba(255, 245, 240, .09); --fill-2: rgba(255, 245, 240, .15); --field: rgba(255, 245, 240, .07); --field-hover: rgba(255, 240, 235, .3); --track: rgba(255, 245, 240, .12); --primary-hover: #ffffff; --wash: #fff5f0; --shade: rgba(20, 8, 30, 1); --deep: #12132e; --navy: #1a142e; --scrim: rgba(14, 8, 24, .66); --scrim-2: rgba(14, 8, 24, .45); --sheet: #1d1838; --menu: #1f1a3c; --csheet: #1f1a3c; --bar-bg: rgba(26, 20, 46, .94); --thead: rgba(26, 20, 46, .97); --violet: #a98bff; --hero-glow: rgba(255, 170, 140, .5); --fj-under: rgba(80, 100, 230, 0); --fjw-1: #ffffff; --fjw-2: #6f8cff; --fjw-3: #9b6bff; --fjh-1: #ffffff; --fjh-2: #9b6bff; --fjh-3: #cfe6ff; --fjb-1: #ffffff; --fjb-2: #6f8cff; --fj-edge: #6f8cff; --fj-edge-2: #9b6bff; --fj-vein: #cfe6ff; --fj-core: #ffffff; --fjw-1o: .75; --fjw-2o: .35; --fjw-3o: .05; --fjh-1o: .6; --fjh-2o: .35; --fjh-3o: .04; --fjb-2o: .15; --fj-vein-o: .9; --shadow: 0 20px 60px rgba(20, 8, 30, .45), inset 0 1px 0 rgba(255, 235, 225, .2); }
html.dag { --bg: #f4f7fc; --bg-2: #eaf1fa; --bg-3: #d3e3f5; --fg: #121a2e; --mut: #434d66; --dim: #4b556f; --rail: #4f5975; --acc: #2948c8; --acc-2: #3557e0; --acc-wash: rgba(41, 72, 200, .12); --acc-line: rgba(41, 72, 200, .45); --line: rgba(18, 26, 46, .13); --line-2: rgba(18, 26, 46, .07); --glass: rgba(255, 255, 255, .58); --glass-2: rgba(255, 255, 255, .72); --glass-3: rgba(255, 255, 255, .42); --ink: #f8fafd; --danger: #a8204a; --warn: #8a4a00; --ok: #2948c8; --fill: rgba(255, 255, 255, .62); --fill-2: rgba(255, 255, 255, .88); --field: rgba(255, 255, 255, .7); --field-hover: rgba(18, 26, 46, .26); --track: rgba(18, 26, 46, .08); --primary-hover: #26304d; --wash: #121a2e; --shade: rgba(44, 68, 120, .32); --deep: #eaf1fa; --navy: #ffffff; --scrim: rgba(60, 80, 120, .24); --scrim-2: rgba(60, 80, 120, .18); --sheet: #fbfcff; --menu: #fbfcff; --csheet: #fbfcff; --bar-bg: rgba(250, 252, 255, .94); --thead: rgba(246, 249, 253, .97); --violet: #6440e0; --hero-glow: rgba(255, 255, 255, .95); --fj-under: rgba(80, 100, 230, .22); --fjw-1: #ffffff; --fjw-2: #5f7cff; --fjw-3: #8f5cff; --fjh-1: #ffffff; --fjh-2: #8b5cff; --fjh-3: #6f9bff; --fjb-1: #3f52d8; --fjb-2: #8f6bff; --fj-edge: #3d5ae0; --fj-edge-2: #7448e0; --fj-vein: #ffffff; --fj-core: #3f52d8; --fjw-1o: .95; --fjw-2o: .5; --fjw-3o: .2; --fjh-1o: .9; --fjh-2o: .48; --fjh-3o: .16; --fjb-2o: .35; --fj-vein-o: 1; --shadow: 0 18px 50px rgba(44, 68, 120, .14), inset 0 1px 0 rgba(255, 255, 255, .95); }

/* ---- the skies: night is body (super.css); dusk, dawn and day are layers above it that cross-fade ---------------------------------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sky i { position: absolute; inset: 0; opacity: 0; }
:root.fade .sky i, :root.fade .clouds, :root.fade .stars { transition: opacity 20min linear; }
@media (prefers-reduced-motion: reduce) { :root.fade, :root.fade .sky i, :root.fade .clouds, :root.fade .stars { transition: none !important; } }
.sky i.s-skymning { background: radial-gradient(1000px 420px at 82% 112%, rgba(255, 168, 112, .62), rgba(240, 120, 120, .26) 42%, transparent 72%), radial-gradient(700px 260px at 12% 108%, rgba(214, 112, 150, .22), transparent 70%), linear-gradient(180deg, #12132e 0%, #22224e 36%, #3f3166 66%, #63385f 88%, #74405e 100%); }
.sky i.s-gryning { background: radial-gradient(1000px 420px at 18% 112%, rgba(255, 168, 112, .62), rgba(240, 120, 120, .26) 42%, transparent 72%), radial-gradient(700px 260px at 88% 108%, rgba(214, 112, 150, .22), transparent 70%), linear-gradient(180deg, #12132e 0%, #22224e 36%, #3f3166 66%, #63385f 88%, #74405e 100%); }
.sky i.s-dag { background: radial-gradient(820px 600px at 90% -10%, rgba(255, 228, 168, 1), rgba(255, 238, 200, .62) 30%, transparent 70%), radial-gradient(520px 300px at 8% 104%, rgba(255, 255, 255, .7), transparent 70%), linear-gradient(180deg, #b9d4f1 0%, #d3e3f5 38%, #e9f0f8 66%, #f6f2ea 100%); }
html.skymning:not(.grynig) .sky i.s-skymning, html.skymning.grynig .sky i.s-gryning, html.dag .sky i.s-dag { opacity: 1; }
/* ---- clouds instead of stars by day; at dusk the stars only high up --------------------------------------------------------------- */
.clouds { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; opacity: 0; }
.clouds i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, 0)); filter: blur(6px); animation: drift 240s linear infinite; }
.clouds i::before, .clouds i::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.clouds i::before { width: 60%; height: 120%; left: 14%; top: -46%; } .clouds i::after { width: 46%; height: 96%; left: 48%; top: -30%; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-60px); } }   /* leftwards: a cloud never leaves the screen on the right */
html.dag .clouds { opacity: .9; } html.dag .stars { opacity: 0; }
html.skymning .stars { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 65%); mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 65%); }
/* ---- the butterfly: the same symbols; only its colours are tokens ------------------------------------------------------------------ */
#fj-wg stop:nth-child(1) { stop-color: var(--fjw-1); stop-opacity: var(--fjw-1o); } #fj-wg stop:nth-child(2) { stop-color: var(--fjw-2); stop-opacity: var(--fjw-2o); } #fj-wg stop:nth-child(3) { stop-color: var(--fjw-3); stop-opacity: var(--fjw-3o); }
#fj-wg2 stop:nth-child(1) { stop-color: var(--fjh-1); stop-opacity: var(--fjh-1o); } #fj-wg2 stop:nth-child(2) { stop-color: var(--fjh-2); stop-opacity: var(--fjh-2o); } #fj-wg2 stop:nth-child(3) { stop-color: var(--fjh-3); stop-opacity: var(--fjh-3o); }
#fj-bodyg stop:nth-child(1) { stop-color: var(--fjb-1); } #fj-bodyg stop:nth-child(2) { stop-color: var(--fjb-2); stop-opacity: var(--fjb-2o); }
#fj-wing > path:nth-of-type(1) { stroke: var(--fj-edge); } #fj-wing > path:nth-of-type(2) { stroke: var(--fj-edge-2); }
#fj-wing > g[stroke] { stroke: var(--fj-vein); opacity: var(--fj-vein-o); }
#fj-body circle { fill: var(--fj-core); } #fj-body path { stroke: var(--fj-core); }
html.dag .mk.fj, html.dag .brand .mk.fj { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95)); }