/* Dark (after sunset where you work). script.js switches data-theme live. */
:root, [data-theme="dark"] {
  --bg: #0A0A0A;
  --raised: #161616;
  --line: #262626;
  --line-strong: #3A3A3A;
  --text: #EDEDED;
  --muted: #A3A3A0;
  --accent: #F2A15A;
  --tree: #0A0A0A;
  --sans: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Martian Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
/* Light (while the sun is up) */
[data-theme="light"] {
  --bg: #FFFFFF;
  --raised: #F4F4F2;
  --line: #E6E6E3;
  --line-strong: #CFCFCB;
  --text: #111111;
  --muted: #5E5E5B;
  --accent: #B8520F;
  --tree: #1F3A31;
  color-scheme: light;
}
:root {
  /* live-sky values, overwritten by script.js */
  --sky-top: #060B12;
  --sky-bot: #15302E;
  --far: #1D3530;
  --mid: #14241F;
  --snow: #B9C9C2;
  --lake: #18302F;
  --sun: #E9EFE9;
  --stars: 1;
  --aurora: 1;
  --window: 1;
  --hero-ink: #EDEDED;
  --hero-soft: #C9C9C6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden sections stay hidden, whatever their layout */
/* no colour fades while the page loads (they're only for real changes, like sunset) */
.preload *, .preload *::before, .preload *::after, .preload body { transition: none !important; }
html { scroll-behavior: smooth; scrollbar-color: var(--line-strong) var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  caret-color: var(--accent);
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--bg); }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 6px; text-decoration: none; }
.skip-link:focus { top: 12px; }
kbd {
  font-family: var(--mono); font-size: 0.72em; line-height: 1;
  border: 1px solid currentColor; border-radius: 3px; padding: 2px 4px; opacity: .8;
}
.i { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px clamp(16px, 5vw, 64px);
  color: var(--hero-ink); font-size: 16px;
  transition: background-color .3s, color .3s;
}
.nav.scrolled { background: var(--bg); color: var(--text); border-bottom: 1px solid var(--line); }
.nav-name { text-decoration: none; font-weight: 600; }
.nav nav { display: flex; align-items: center; gap: 28px; }
.nav nav a { text-decoration: none; }
.nav-term {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-term:hover { color: var(--accent); }
.nav-mode { font: inherit; color: inherit; background: none; border: 0; padding: 4px; cursor: pointer; display: inline-flex; line-height: 1; }
.nav-mode .i { width: 18px; height: 18px; }
.nav-mode:hover { color: var(--accent); }

/* ---------- hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 78%);
  color: var(--hero-ink);
}
.sky-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.starfield { position: absolute; inset: 0; opacity: var(--stars); transition: opacity 2s; pointer-events: none; }
.starfield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.starfield circle { fill: #fff; }
.starfield .tw { will-change: opacity; animation: twinkle 4s ease-in-out infinite; }
.starfield .tw2 { animation-delay: -1.4s; animation-duration: 5s; }
.starfield .tw3 { animation-delay: -2.7s; animation-duration: 3.6s; }
@keyframes twinkle { 50% { opacity: .25; } }
/* Northern lights from soft colour fades: no blur filter, only the whole layer moves (GPU-friendly). */
.aurora {
  position: absolute; left: 28%; right: -8%; top: 4%; height: 46%; pointer-events: none;
  opacity: var(--aurora); transition: opacity 2s; will-change: transform; animation: aurora 18s ease-in-out infinite alternate;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0, rgba(0, 0, 0, .5) 13px, #000 26px);
  mask: repeating-linear-gradient(90deg, #000 0, rgba(0, 0, 0, .5) 13px, #000 26px);
}
.aur { position: absolute; }
.a1 { left: 16%; right: 0; top: 22%; height: 38%; transform: rotate(-8deg); background: radial-gradient(closest-side, rgba(127, 224, 176, .55), rgba(127, 224, 176, .18) 55%, rgba(127, 224, 176, 0)); }
.a2 { left: 34%; right: 0; top: 4%; height: 32%; transform: rotate(-5deg); background: radial-gradient(closest-side, rgba(143, 217, 200, .42), rgba(156, 140, 255, .14) 55%, rgba(156, 140, 255, 0)); }
.a3 { left: 2%; right: 46%; top: 40%; height: 30%; transform: rotate(-11deg); background: radial-gradient(closest-side, rgba(95, 200, 150, .38), rgba(95, 200, 150, 0)); }
@keyframes aurora {
  0% { transform: translateX(0) scaleY(1); }
  100% { transform: translateX(-50px) scaleY(1.12); }
}
[data-night="no"] .starfield, [data-night="no"] .aurora { visibility: hidden; }
[data-night="no"] .starfield .tw, [data-night="no"] .aurora { animation-play-state: paused; }
.hero.off *, .hero.off *::before { animation-play-state: paused !important; }
.sun {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: var(--sun); transform: translate(-50%, -50%) scaleY(var(--squash, 1));
  transition: left 1.5s, top 1.5s, background-color 1.5s, opacity 3s;
}
.sun:not(.moon) { opacity: var(--sun-o, 1); }
.sun.down, .sun.down::before { animation: none !important; }
.sun.moon { width: 40px; height: 40px; background: none; transform: translate(-50%, -50%) scaleY(var(--moon-squash, 1)); opacity: var(--moon-o, 1); }
.sun.moon.by-day .moon-lit { fill: #F4F6F8; } .sun.moon.by-day .moon-dark { fill: none; }
.sun svg { display: block; overflow: visible; }
.moon-dark { fill: rgba(233, 237, 239, .07); }
.moon-lit { fill: var(--sun); }

.landscape { position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; } /* wide screens: script.js sizes it */
.l-far { fill: var(--far); transition: fill 1.5s; }
.l-mid { fill: var(--mid); transition: fill 1.5s; }
.l-near { fill: var(--ground, var(--bg)); transition: fill .6s; }
#leafy, #frontLeafy { display: none; }
#leafy .trunk, #frontLeafy .trunk { fill: var(--tree); }
#leafy .l1, #frontLeafy .l1 { fill: var(--leaf-1); } #leafy .l2, #frontLeafy .l2 { fill: var(--leaf-2); } #leafy .l3, #frontLeafy .l3 { fill: var(--leaf-3); }
[data-season="spring"] #leafy, [data-season="summer"] #leafy, [data-season="autumn"] #leafy, [data-season="spring"] #frontLeafy, [data-season="summer"] #frontLeafy, [data-season="autumn"] #frontLeafy { display: inline; }
#flowers { display: none; opacity: var(--flower-o, 1); }
[data-season="spring"] #flowers { display: inline; }
#flowers .f1 circle { fill: #F4D35E; } #flowers .f2 circle { fill: #FFFFFF; }
#flowers .f3 circle { fill: #E58FB1; } #flowers .f4 circle { fill: #A99BEA; }
#flowers .c { fill: #E9B233 !important; }
/* flowers close for the night (nyctinasty) and open again in the morning */
#flowers .petals { transform-box: fill-box; transform-origin: center; }
[data-daylight="no"] #flowers .petals { transform: scale(.4); }
[data-daylight="no"] #flowers .c { display: none; }
.weather { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.world { position: absolute; inset: 0; }
.frost { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2.5s; }
.frost.on { opacity: 1; }
/* soft edge where a coloured meadow meets the page */
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3%; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
/* summer: the sun gets slow rays */
[data-season="summer"] .sun:not(.moon)::before {
  content: ''; position: absolute; inset: -44px; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--sun) 60%, transparent) 0 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 34px, #000 36px, transparent 72px);
  mask: radial-gradient(circle, transparent 34px, #000 36px, transparent 72px);
  animation: spin 80s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#trees path, #frontTrees path { fill: var(--tree); }
#frontTrees, #frontLeafy { visibility: hidden; } [data-forestwalk="yes"] #frontTrees, [data-forestwalk="yes"] #frontLeafy { visibility: visible; }
.landscape.front { pointer-events: none; }
#trees.fractal path, #frontTrees.fractal path { fill: none; stroke: var(--tree); stroke-width: .8; stroke-linecap: round; }
.l-snow { fill: var(--snow); transition: fill 1.5s; }
.l-cross { stroke: var(--snow); stroke-width: 2; fill: none; }
.l-lake { fill: var(--lake); transition: fill 1.5s; }
.window { fill: #F4C95D; opacity: var(--window); }

/* a soft shade behind the hero text, only visible at dawn and dusk when the sky alone isn't enough */
.hero-text::before {
  content: ''; position: absolute; inset: 0 -10px; z-index: -1; pointer-events: none; border-radius: 40px;
  background: var(--hero-shade, transparent); box-shadow: 0 0 70px 50px var(--hero-shade, transparent);
}
.hero-text { isolation: isolate; }
.hero-text { position: absolute; z-index: 2; left: clamp(16px, 5vw, 64px); right: 16px; top: 16vh; max-width: 900px; }
.hero h1 {
  font-size: clamp(52px, 9.5vw, 96px); line-height: 0.95; letter-spacing: -0.035em;
  font-weight: 600; margin: 0; text-wrap: balance;
}
.hero-line { font-size: clamp(18px, 1.9vw, 23px); line-height: 1.45; margin: 20px 0 0; max-width: 44ch; }
.hero-line span { display: block; }
.hero-line a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hero-line a:hover { color: inherit; text-decoration-thickness: 2px; }
.hero-place { display: flex; align-items: center; gap: 6px; font-size: clamp(16px, 1.6vw, 19px); margin: 10px 0 0; }
.hero-place .i { width: 1.05em; height: 1.05em; }
.hero-time { font-size: 15px; color: var(--hero-soft); margin: 14px 0 0; }
.hero-clock { white-space: nowrap; } /* the time sentence never breaks in the middle */

/* ---------- microscope stars, birds, road, ice ---------- */
.rainbow { opacity: 0; transition: opacity 4s; pointer-events: none; }
.iss {
  position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 0; background: none;
  cursor: pointer; display: none; transition: left 5s linear, top 5s linear;
}
.iss::after { content: ''; position: absolute; left: 8px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 6px 2px rgba(255, 255, 255, .5); }
.iss.demo { transition-duration: 3.3s; }
.iss.show { display: block; }
[data-rainbow="yes"][data-daylight="yes"][data-lowsun="yes"] .rainbow { opacity: .38; }
.rainbow g { transform: translateY(var(--rainbow-drop, 0px)); transition: transform 30s linear; } /* sinks as the sun climbs */
.smlm { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero.smlm-on .starfield { opacity: calc(var(--stars) * .35); }
.birds { position: absolute; left: 0; top: 15%; width: 66px; height: 64px; opacity: 0; pointer-events: none; will-change: transform; }
.birds .goose { transition: transform 3s ease-in-out; }
.birds .b, .birds .neck { fill: none; stroke: var(--hero-ink); stroke-width: 1.4; stroke-linecap: round; opacity: .7; }
.birds .b { transform-box: fill-box; transform-origin: center; animation: flap .45s ease-in-out infinite alternate; }
.birds .goose:nth-child(2n) .b { animation-delay: -.2s; }
.flock { position: absolute; left: 0; top: 0; width: 100%; height: 55%; pointer-events: none; }
.ripples { position: absolute; pointer-events: none; }
.hero.life-on .starfield { opacity: calc(var(--stars) * .2); }
@keyframes flap { to { transform: scaleY(.35); } }
/* cranes in spring: grey, legs trailing, slower wingbeats */
.birds .legs { display: none; fill: none; stroke: var(--hero-ink); stroke-width: 1; stroke-linecap: round; opacity: .6; }
.birds.cranes .legs { display: inline; }
.birds.cranes .b { animation-duration: .7s; }
.birds.cranes .neck { stroke-width: 1.1; }
/* the hot-air balloon drifts slowly with the (light) wind and rises a little */
.balloon { position: absolute; left: 0; top: 20%; width: 30px; height: 44px; opacity: 0; pointer-events: none; will-change: transform; }
.balloon.fly { opacity: 1; animation: balloon-east 160s linear forwards; }
.balloon.fly.west { animation-name: balloon-west; }
@keyframes balloon-east { from { transform: translate(-40px, 30px); } to { transform: translate(105vw, -25px); } }
@keyframes balloon-west { from { transform: translate(105vw, 30px); } to { transform: translate(-40px, -25px); } }
.balloon .bl-bob { animation: bl-bob 7s ease-in-out infinite alternate; }
.balloon:not(.fly) .bl-bob { animation: none; }
@keyframes bl-bob { to { transform: translateY(3px); } }
.balloon .bl-lift { transition: transform 4s ease-out; }
.balloon.burn .bl-lift { transform: translateY(-14px); }
.balloon .bl-env { fill: #C8453B; } .balloon .bl-gore { fill: #F0C04A; }
.balloon .bl-band { fill: none; stroke: #3D5A80; stroke-width: 2.4; }
.balloon .bl-rope { stroke: var(--hero-ink); stroke-width: .8; opacity: .6; }
.balloon .bl-basket { fill: #7A5230; }
.balloon .bl-flame { fill: #FFB347; opacity: 0; }
.balloon.burn .bl-flame { opacity: 1; animation: bl-flicker .12s steps(2) infinite; }
@keyframes bl-flicker { to { opacity: .55; } }
.balloon .hit { fill: transparent; pointer-events: all; cursor: pointer; }
.birds.fly { opacity: 1; animation: fly-south 26s linear forwards; }
.birds.fly.north { animation-name: fly-north; }
@keyframes fly-south { from { transform: translateX(105vw); } to { transform: translateX(-130px); } }
@keyframes fly-north { from { transform: translateX(-130px) scaleX(-1); } to { transform: translateX(105vw) scaleX(-1); } }
/* the gravel road: a sandy track with darker edges and small stones, following the light of the meadow */
.road-g { --gravel: var(--gravel-sky, #CDB78C); } /* sandy by day, dark at night (gadgets.js) */
.road-g use { fill: none; stroke-linecap: round; transition: stroke 1.5s; }
.road-edge { stroke: color-mix(in srgb, var(--gravel) 72%, #3A3020); stroke-width: 6.4; }
.road { stroke: var(--gravel); stroke-width: 5; }
.road-grit { stroke: color-mix(in srgb, var(--gravel) 62%, #3A3020); stroke-width: .8; stroke-dasharray: .1 3.3 .1 5.9; stroke-dashoffset: 0; transform: translateY(-1.1px); }
.road-grit.g2 { stroke: color-mix(in srgb, var(--gravel) 70%, #FFFFFF); stroke-dasharray: .1 4.6 .1 2.7; transform: translateY(1.2px); }
/* winter: ploughed, with snow banks along both sides */
.road-bank { display: none; }
[data-season="winter"] .road-bank { display: inline; stroke: color-mix(in srgb, var(--ground, #FFFFFF) 80%, #7D93A6); stroke-width: 10.4; }
[data-season="winter"] .road-edge { stroke: color-mix(in srgb, var(--ground, #FFFFFF) 70%, #FFFFFF); stroke-width: 8.6; }
[data-season="winter"] .road { stroke: color-mix(in srgb, var(--gravel) 60%, #E8ECEF); }
/* autumn: fallen leaves on the road */
.road-leaves { display: none; stroke-width: 1.3; }
[data-season="autumn"] .road-leaves { display: inline; stroke: #D2691E; stroke-dasharray: .1 17 .1 31; transform: translateY(-.8px); }
[data-season="autumn"] .road-leaves.l2 { stroke: #B8452B; stroke-dasharray: .1 23 .1 13; transform: translateY(1px); }
/* rain: a wet shine down the middle */
.road-wet { display: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.2; }
[data-wet="yes"] .road-wet { display: inline; }
/* boat ramp, small jetty with a ladder, beached boat */
.ramp { fill: var(--gravel-sky, #CDB78C); transition: fill 1.5s; }
.ramp.wet-part { opacity: .5; }
[data-frozen="yes"] .ramp.wet-part { opacity: .25; }
.ladder { fill: none; stroke: #8E9296; stroke-width: .45; stroke-linecap: round; }
.bb-hull { fill: #5C3E27; } .bb-rim { stroke: #8A6441; stroke-width: .6; stroke-linecap: round; }
[data-season="winter"] .bb-hull { fill: color-mix(in srgb, #5C3E27 70%, #FFFFFF); }
/* tracks in the snow */
.tracks { fill: none; stroke: rgba(90, 80, 70, .35); stroke-width: .5; opacity: 0; transition: opacity 20s linear; pointer-events: none; }
.tracks.on { opacity: 1; transition: opacity .4s; }
.ice-cracks { display: none; fill: none; stroke: #FFFFFF; stroke-width: .8; stroke-linejoin: round; opacity: .5; }
[data-frozen="yes"] .ice-cracks { display: inline; }

/* ---------- small figures in the landscape ---------- */
:root { --figure: #1B2530; }
[data-daylight="no"] { --figure: #C9D1D8; }
.figure path, .figure line { fill: none; stroke: var(--figure); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.figure circle { fill: var(--figure); }
.figure .wheel { fill: none; stroke: var(--figure); stroke-width: 1.1; }
.figure .scarf { stroke: #D9483B; }
.hit { fill: transparent; pointer-events: all; cursor: pointer; }

.skater { display: none; }
[data-frozen="yes"][data-daylight="yes"] .skater { display: inline; } /* skating by day only */
.sk-glide { animation: glide 12s ease-in-out infinite; }
.sk-flip { transform-box: fill-box; transform-origin: center; animation: glide-flip 12s steps(1) infinite; }
@keyframes glide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(268px); } } /* turns before the jetty */
@keyframes glide-flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
.sk-spin { transform-box: fill-box; transform-origin: center; }
.skater.spin .sk-spin { animation: pirouette .9s ease-in-out; }
@keyframes pirouette { 25% { transform: scaleX(-1); } 50% { transform: scaleX(1); } 75% { transform: scaleX(-1); } }

.ducks { display: none; }
[data-season="summer"][data-frozen="no"][data-daylight="yes"] .ducks { display: inline; }
.dk-body { fill: #7A5B3A; } .dk-head { fill: #2F6B3C; } .dk-head2 { fill: #8A6A48; } .dk-beak { fill: #E0A030; }

/* shore path, veranda and path lights by the cottage */
.rocks path { fill: #979EA3; }
.rocks .dark { fill: #767D82; }
[data-daylight="no"] .rocks path { fill: #3C4146; }
[data-daylight="no"] .rocks .dark { fill: #2E3236; }
[data-season="winter"] .rocks path { fill: #DCE2E7; }
.shadows path { fill: var(--shadow-col, #1E2A20); opacity: var(--shadow-o, 0); }
.shadows.on-water { opacity: .5; }
[data-season="winter"] .shadows path { fill: #4A5F80; } /* bluish on snow */
#shSnowman { display: none; } .snowman-shadow #shSnowman { display: inline; }
.gravel { fill: none; stroke: #CDBF9E; stroke-width: 1.3; stroke-linecap: round; opacity: .75; }
[data-daylight="no"] .gravel { stroke: #4A443A; }
[data-season="winter"] .gravel { stroke: #B3AEA4; opacity: .8; } /* shovelled: a trodden, gravelly track through the snow */
[data-season="winter"][data-daylight="no"] .gravel { stroke: #5A5650; }
.deck { fill: #8C7652; }
.deck-edge { fill: none; stroke: #5E4E36; stroke-width: .8; }
.rail { fill: none; stroke: #F3EEE6; stroke-width: .7; stroke-linecap: round; }
[data-daylight="no"] .deck { fill: #3E3426; }
[data-daylight="no"] .rail { stroke: #8E8A83; }
.path-lights .post { stroke: #3A3A3A; stroke-width: .6; }
.path-lights .head { fill: #D8D2C0; }
.path-lights .halo, .path-lights .refl { display: none; }
[data-daylight="no"] .path-lights .head { fill: #FFE3A3; }
[data-daylight="no"] .path-lights .halo { display: inline; fill: #FFC96B; opacity: .22; }
[data-daylight="no"] .path-lights .refl { display: inline; stroke: #FFC96B; stroke-width: .8; stroke-linecap: round; opacity: .35; }
[data-frozen="yes"] .path-lights .refl { opacity: .15; }
/* glints of sun or moonlight on the lake */
.glints path { fill: none; stroke-linecap: round; animation: glint 3.2s ease-in-out infinite; }
@keyframes glint { 0%, 100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * .35); } }
/* cows on the meadow */
.cow .body, .cow .face { fill: #F4F2EC; stroke: #2A2A2A; stroke-width: .35; }
.cow .spot { fill: #2A2A2A; }
.cow .muzzle, .cow .udder { fill: #E7A9A3; }
.cow .legs path, .cow .tail, .cow .horn { fill: none; stroke: #2A2A2A; stroke-width: .8; stroke-linecap: round; }
.cow .horn { stroke: #D9CBB0; stroke-width: .5; }
.cow .ear, .cow .eye { fill: #2A2A2A; }
.cow .bell { fill: #D4A93A; }
.cow .scarf { display: none; fill: none; stroke: #C8102E; stroke-width: 1.1; stroke-linecap: round; }
#cows.cold .cow .scarf { display: inline; }
.cow.sleep .legs { display: none; }
.cow.sleep .cow-body { transform: translateY(2.4px); }
.cow .tail { transform-box: fill-box; transform-origin: top; }
.cow.swish .tail { animation: swish .9s ease-in-out; } /* now and then, started by gadgets.js (no endless loop to redraw) */
.cow:nth-child(2) .tail { animation-delay: -2.3s; } .cow:nth-child(3) .tail { animation-delay: -4.6s; }
@keyframes swish { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(28deg); } 65% { transform: rotate(-18deg); } }
[data-daylight="no"] .cow .body, [data-daylight="no"] .cow .face { fill: #A9ADB1; }
/* the UFO */
.ufo { display: none; }
.ufo.out { display: inline; }
.ufo .saucer { fill: #B8C1C9; stroke: #6F7880; stroke-width: .4; }
.ufo .dome { fill: #A8DDEB; opacity: .9; }
.ufo .rim { fill: #7E878F; }
.ufo .light { fill: #FFE27A; animation: ufo-blink .8s steps(1) infinite; }
.ufo .l2 { animation-delay: -.27s; fill: #7AF0B4; } .ufo .l3 { animation-delay: -.53s; fill: #FF8FA3; }
@keyframes ufo-blink { 50% { opacity: .2; } }
.ufo .beam { fill: #D8FFE8; opacity: 0; transition: opacity .5s; }
.ufo.beaming .beam { opacity: .35; }
/* tent and campfire */
.camp { display: none; }
.camp.show { display: inline; }
.tent-front { fill: #D9772E; }
.tent-side { fill: #A6561F; }
.tent-door { fill: #4A2A14; }
.tent-line { fill: none; stroke: #8A8F94; stroke-width: .35; }
[data-daylight="no"] .tent-front { fill: #8C4A1E; }
[data-daylight="no"] .tent-side { fill: #5E3314; }
.tent-glow { fill: #FFD27A; opacity: 0; transition: opacity 1.5s; }
.camp.lit .tent-glow { opacity: .75; }
.camp.lit .tent-door { fill: #FFE7A8; }
.fire, .fire-glow { display: none; }
.camp.fire .fire, .camp.fire .fire-glow { display: inline; }
.fire-glow { fill: #F2A13A; opacity: .28; }
.logs { fill: none; stroke: #5A3E2B; stroke-width: .9; stroke-linecap: round; }
.flame { transform-box: fill-box; transform-origin: center bottom; }
.f-a { fill: #F08A24; animation: flicker .5s ease-in-out infinite alternate; }
.f-b { fill: #FFD35A; animation: flicker .37s ease-in-out infinite alternate-reverse; }
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(.88, 1.16) skewX(-4deg); } }
.spark { fill: #FFC46B; opacity: 0; animation: spark 2.4s ease-out infinite; }
.s2 { animation-delay: .8s; } .s3 { animation-delay: 1.6s; }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(2px, -12px); } }
.camp.poke .spark { animation-duration: .9s; }
/* moose and the warning sign */
.moose, .alg-sign { display: none; }
.moose.out { display: inline; }
.alg-sign.show { display: inline; }
.ms-body { fill: #3E2C21; }
.ms-legs { fill: none; stroke: #3E2C21; stroke-width: 1.3; stroke-linecap: round; }
.ms-antler { fill: #B89E7C; }
[data-daylight="no"] .ms-body { fill: #2A211C; }
[data-daylight="no"] .ms-legs { stroke: #2A211C; }
.sign-post { stroke: #8A8F94; stroke-width: 1; }
.sign-board { fill: #F2C230; stroke: #C8102E; stroke-width: 1; stroke-linejoin: round; }
.sign-moose path { fill: #111111; }
.sign-moose .l { fill: none; stroke: #111111; stroke-width: 1.6; }
/* snowman */
.snowman { display: none; }
.snowman.show { display: inline; }
.sm-snow { fill: #FAFCFD; stroke: #A9B7C4; stroke-width: .5; }
.sm-coal { fill: #1B1B1B; }
.sm-carrot { fill: #E8792A; }
.sm-arms { fill: none; stroke: #5A3E2B; stroke-width: .6; stroke-linecap: round; }
.sm-scarf { fill: none; stroke: #C8102E; stroke-width: 1.1; stroke-linecap: round; }
.sm-hat { fill: #1B1B1B; }
.sm-hat, .sm-body { transform-box: fill-box; }
.sm-body { transform-origin: center bottom; transition: transform 4s ease-in-out; }
.sm-puddle { fill: #9DB6C8; opacity: 0; transition: opacity 4s; }
.snowman.melting .sm-body { transform: scale(1.08, .72); }
.snowman.melting .sm-puddle { opacity: .5; }
.snowman.melting .sm-hat { transform: rotate(-18deg) translate(-.6px, 1.2px); }
.sm-hat { transform-origin: center bottom; }
.snowman.hop .sm-hat { animation: hat-hop .9s ease-out; }
@keyframes hat-hop { 30% { transform: translateY(-7px) rotate(25deg); } 60% { transform: translateY(-2px) rotate(-10deg); } 100% { transform: none; } }
.fish { display: none; }
.fish.show { display: inline; }
.fish path { fill: var(--figure); }
.cyclist, .skier, .penguin { display: none; }
/* the penguin's own small layer, slid across the scene by gadgets.js (placePenguin) */
.sprite { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; will-change: transform; }
.cyclist.out, .skier.out, .penguin.out { display: inline; }
.cyclist .tucked { display: none; }
.cyclist.tuck .tucked { display: inline; }
.cyclist.tuck .upright { display: none; }
.cyclist .headlight { fill: #F4E27A; stroke: none; opacity: var(--window); }
/* weather gear, chosen from the real weather in Vienna when the ride starts */
.cyclist .gear { display: none; }
.cyclist[data-gear="rain"] .gear-rain, .cyclist[data-gear="cold"] .gear-cold, .cyclist[data-gear="sun"] .gear-sun { display: inline; }
.cyclist .gear-rain { fill: #F2C94C; stroke: #B8920F; stroke-width: .5; }
.cyclist .gear-cold .hat { fill: #D9483B; stroke: none; }
.cyclist .gear-cold .scarf { stroke: #D9483B; stroke-width: 1.2; }
.cyclist .gear-sun { stroke: #111111; stroke-width: 1; }

/* plane */
.plane { position: absolute; left: 0; top: 10%; width: 240px; height: 24px; opacity: 0; pointer-events: none; will-change: transform; }
.plane.fly { opacity: 1; animation: plane-east 30s linear forwards; }
.plane.fly.west { animation-name: plane-west; }
@keyframes plane-east { from { transform: translateX(-260px); } to { transform: translateX(105vw); } }
@keyframes plane-west { from { transform: translateX(105vw) scaleX(-1); } to { transform: translateX(-260px) scaleX(-1); } }
.plane .contrail { stroke: url(#contrail); stroke-width: 1.6; stroke-linecap: round; }
.plane .body { fill: var(--hero-ink); opacity: .7; }
.plane .jet { pointer-events: all; cursor: pointer; }
.plane .nav { opacity: 0; }
.plane.night .contrail { display: none; }
.plane.night .body { opacity: .25; }
.plane.night .nav { animation: nav-blink 1.2s steps(1) infinite; }
.plane .nav-red { fill: #FF4D4D; } .plane .nav-green { fill: #4DFF88; } .plane .nav-white { fill: #FFFFFF; animation-delay: .6s !important; }
@keyframes nav-blink { 0% { opacity: 1; } 50% { opacity: .15; } }

/* triathletes, skier, barbecue */
.swimmer, .runner, .xc { display: none; }
.swimmer.out, .runner.out, .xc.out { display: inline; }
.swimmer .water { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: .6; }
.swimmer .stroke-b, .swimmer.alt .stroke-a { opacity: 0; }
.swimmer.alt .stroke-b { opacity: 1; }
.swimmer circle { fill: #F2A13B; } /* orange swim cap */
.diver { display: none; }
.diver.out { display: inline; }
.diver .figure circle { fill: #F2A13B; }
.diver .arms-up, .diver.up .arms-down { display: none; }
.diver.up .arms-up { display: inline; }
.splash { display: none; }
.splash.go { display: inline; }
.splash circle { fill: rgba(255, 255, 255, .85); animation: splash .55s ease-out forwards; }
.splash circle:nth-child(1) { --dx: -3px; } .splash circle:nth-child(2) { --dx: 0px; } .splash circle:nth-child(3) { --dx: 3px; }
.splash circle:nth-child(4) { --dx: -1.5px; animation-duration: .45s; } .splash circle:nth-child(5) { --dx: 1.5px; animation-duration: .5s; }
@keyframes splash { 0% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(var(--dx), -4px); } 100% { transform: translate(calc(var(--dx) * 1.5), 0); opacity: 0; } }
.runner .bib { fill: #FFFFFF; stroke: none; }
.xc .rollers circle { fill: none; stroke: var(--figure); stroke-width: .6; }
.xc .skis { stroke-width: 1.1; }
.xc:not(.snow) .skis { transform: scaleX(.55); transform-box: fill-box; transform-origin: center; }
.xc.snow .rollers { display: none; }
.bbq-legs { fill: none; stroke: #2B2B2B; stroke-width: .9; }
.bbq-bowl, .bbq-lid { fill: #2B2B2B; }
.bbq-lid { transition: transform .5s; transform-box: fill-box; transform-origin: 100% 100%; }
.grilling .bbq-lid { transform: rotate(70deg); }
.bbq-smoke { display: none; }
.grilling .bbq-smoke { display: inline; }
.bbq-smoke circle { fill: rgba(215, 215, 215, .6); transform-box: fill-box; transform-origin: center; animation: smoke 3s ease-out infinite; }
.bbq-smoke circle:nth-child(2) { animation-delay: 1s; }
.bbq-smoke circle:nth-child(3) { animation-delay: 2s; }
[data-holiday="christmas"] .bbq { display: none; } /* the Christmas tree stands there */
.flagpole .pole { stroke: #F3EEE6; stroke-width: .8; }
.flagpole .knob { fill: #D9B44A; }
.flagpole .flag { display: none; transform-box: fill-box; transform-origin: 0% 50%; animation: flag-wave 3.2s ease-in-out infinite; }
.flagpole[data-flag="se"] .flag-se, .flagpole[data-flag="at"] .flag-at { display: inline; }
@keyframes flag-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(3deg) scaleX(.94); } }
[data-holiday="christmas"] .flagpole { display: none; } /* the Christmas tree stands there */
.pg-spatula { display: none; }
.pg-rod, .pg-fish, .pg-hole { display: none; }
.penguin.fishing .pg-rod, .penguin.fishing .pg-hole { display: inline; }
.penguin.caught .pg-fish { display: inline; }
.penguin.caught .pg-rod .line { display: none; }
.pg-rod .rod { stroke: #6B4A2B; stroke-width: .7; }
.pg-rod .line { stroke: rgba(255, 255, 255, .8); stroke-width: .25; }
.pg-fish path { fill: #8FA3AD; }
.pg-hole { fill: #1E2A33; }
.jetty-deck { fill: color-mix(in srgb, #8A6A4A 70%, var(--mid)); }
.jetty-planks, .jetty-posts { stroke: color-mix(in srgb, #5A4430 75%, var(--mid)); stroke-width: .7; fill: none; }
.jetty-posts { stroke-width: 1.2; }
.penguin.grill .pg-spatula { display: inline; }
.pg-handle { stroke: #6B6B6B; stroke-width: .7; }
.pg-blade { fill: #9A9A9A; }
.pg-black { fill: #15181B; } .pg-white { fill: #F4F4F2; } .pg-orange { fill: #EE9A2E; }
.pg-phone { display: none; }
.penguin.selfie .pg-phone { display: inline; }
.pg-phone rect { fill: #2A2F35; }
.pg-arm { fill: none; stroke: #15181B; stroke-width: 1.2; stroke-linecap: round; }
.pg-flash { fill: #FFFFFF; opacity: 0; }
.penguin.snap .pg-flash { animation: pg-flash .35s ease-out; }
@keyframes pg-flash { 20% { opacity: .95; } 100% { opacity: 0; } }
/* the cyclist rings the bell (a cow on the road) */
.cyclist .ring-lines { display: none; }
.cyclist.ring .ring-lines { display: inline; animation: ufo-blink .3s steps(1) infinite; }
/* mountain hut and chairlift */
.hut-wall { fill: #7A5436; } .hut-roof { fill: #3B2A20; } .hut-base { fill: var(--far); transition: fill 1.5s; }
.hut-window { fill: #F4C95D; opacity: var(--window); }
[data-season="winter"] .hut-roof { fill: #EEF2F5; }
.lift { display: none; }
[data-season="winter"] .lift { display: inline; }
.lift-cable { fill: none; stroke: #2E3338; stroke-width: .35; }
.lift-pylon { stroke: #3A4046; stroke-width: .8; }
.lift-station { fill: #4A5057; }
.lift-chair { fill: none; stroke: #2E3338; stroke-width: .45; stroke-linecap: round; }
/* sauna by the jetty */
.sauna-wall { fill: #5A3D28; } .sauna-logs { fill: none; stroke: #3F2A1B; stroke-width: .35; }
.sauna-roof { fill: #2A1E17; } .sauna-door { fill: #2E2018; } .sauna-pipe { fill: #5E6368; }
.sauna-window { fill: #3A2A1E; }
.sauna.on .sauna-window { fill: #FFB561; }
[data-season="winter"] .sauna-roof { fill: #EEF2F5; }
[data-daylight="no"] .sauna-wall { fill: #3A281B; }
.sauna-smoke { display: none; }
.sauna-smoke.on { display: inline; }
.sauna-smoke circle { fill: rgba(205, 205, 205, .5); transform-box: fill-box; transform-origin: center; animation: smoke 4.5s ease-out infinite; }
.sauna-smoke circle:nth-child(2) { animation-delay: -1.5s; } .sauna-smoke circle:nth-child(3) { animation-delay: -3s; }
.vak { display: none; fill: #1F3140; }
[data-frozen="yes"] .vak { display: inline; }
/* the penguin in and out of the sauna */
.penguin { transition: opacity .35s; }
.penguin.inside { opacity: 0; }
.pg-steam { display: none; }
.penguin.steamy .pg-steam { display: inline; }
.pg-steam circle { fill: rgba(255, 255, 255, .7); transform-box: fill-box; transform-origin: center; animation: pg-steam 1.6s ease-out infinite; }
.pg-steam circle:nth-child(2) { animation-delay: -.55s; } .pg-steam circle:nth-child(3) { animation-delay: -1.1s; }
@keyframes pg-steam { from { transform: translateY(0) scale(.6); opacity: .9; } to { transform: translateY(-6px) scale(1.6); opacity: 0; } }
/* owl */
.owl { display: none; }
[data-daylight="no"] .owl { display: inline; }
.owl-eyes circle { fill: #F2D45C; }
.owl.blink .owl-eyes circle { opacity: 0; } /* a blink every few seconds, from gadgets.js */
.owl-eyes circle + circle { animation-delay: 0s; }
.owl-bird { display: none; }
.owl.flying .owl-bird { display: inline; }
.owl.flying .owl-eyes, .owl.gone .owl-eyes { display: none; }
.owl-body, .owl-wing { fill: #9C8468; } .owl-eye { fill: #F2D45C; }
/* puddle and snow angel */
.puddle { fill: #8FA9BC; opacity: 0; transition: opacity 3s; }
.puddle.wet { opacity: .7; }
.snow-angel { opacity: 0; transition: opacity 6s; }
.snow-angel.show { opacity: 1; transition: opacity 1.2s; }
.snow-angel path, .snow-angel ellipse, .snow-angel circle { fill: #C9D6E0; stroke: #A9B9C6; stroke-width: .3; }
/* the penguin's telescope */
.pg-scope { display: none; }
/* kayak (summer) and chanterelle basket (autumn) */
.pg-kayak, .pg-paddle, .pg-basket, .kayak-moored, .chanterelles { display: none; }
.pg-chair, .pg-shovel, .pg-rake, .pg-can, .pg-book, .pg-snowball { display: none; }
.penguin.rolling .pg-snowball { display: inline; }
.pg-snowball { fill: #FAFCFD; stroke: #A9B7C4; stroke-width: .4; }
.penguin.shovel .pg-shovel, .penguin.rake .pg-rake, .penguin.watering .pg-can, .penguin.reading .pg-chair, .penguin.reading .pg-book { display: inline; }
.pg-chair path { fill: none; stroke: #8A6A48; stroke-width: .7; stroke-linecap: round; }
.pg-handle { stroke: #8A6A48; stroke-width: .5; stroke-linecap: round; } .pg-blade2 { fill: #5E6A73; }
.pg-rakehead { stroke: #5E6A73; stroke-width: .4; stroke-linecap: round; }
.pg-canbody { fill: #4E8A5A; } .pg-spout, .pg-canhandle { fill: none; stroke: #4E8A5A; stroke-width: .5; stroke-linecap: round; }
.pg-drops circle { fill: #8CC8EE; opacity: 0; }
.penguin.pouring .pg-drops circle { animation: pg-drip .5s linear infinite; }
.penguin.pouring .pg-drops circle:nth-child(2) { animation-delay: .17s; } .penguin.pouring .pg-drops circle:nth-child(3) { animation-delay: .34s; }
@keyframes pg-drip { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(2px); } }
.pg-pages { fill: #F4F4F2; stroke: #3D5A80; stroke-width: .3; } .pg-spine { stroke: #3D5A80; stroke-width: .25; }
.penguin.pageturn .pg-pages { transform-box: fill-box; transform-origin: 50% 50%; animation: pg-page .4s ease-in-out; }
@keyframes pg-page { 50% { transform: scaleX(.4); } }
.penguin.kayak .pg-kayak, .penguin.kayak .pg-paddle, .penguin.basket .pg-basket { display: inline; }
[data-season="summer"] .kayak-moored { display: inline; }
.kayak-moored.away { display: none !important; }
[data-season="autumn"] .chanterelles { display: inline; }
.pg-hull { fill: #E0703A; } .pg-rim { stroke: #2B2B2B; stroke-width: .6; stroke-linecap: round; }
.pg-shaft { stroke: #3A3A3A; stroke-width: .45; stroke-linecap: round; } .pg-blade { stroke: #F2C14E; stroke-width: 1.1; stroke-linecap: round; }
.pg-bk { fill: #9C7446; } .pg-bk-h { fill: none; stroke: #7A5230; stroke-width: .45; }
.pg-cht, .cht { fill: #F0A830; }
.pg-cht { display: none; }
.penguin.p1 .c1, .penguin.p2 .c1, .penguin.p2 .c2, .penguin.p3 .pg-cht { display: inline; }
.cht.picked { display: none; }
/* the farm (gadgets.js): the field, the barn, the tractor, gulls, picnic. Fading with the light
   (opacity follows --flower-o), so at night they sink into the dark meadow like everything else */
.farm > g, .farm > path:not(.hit) { opacity: max(.3, var(--flower-o, 1)); }
.field-soil { fill: color-mix(in srgb, #6E4B2D 52%, var(--ground, #86B061)); stroke: color-mix(in srgb, #4F7A34 30%, var(--ground, #86B061)); stroke-width: 1.4; stroke-linejoin: round; paint-order: stroke; }
.field-soil.straw { fill: color-mix(in srgb, #D8BE80 70%, var(--ground, #86B061)); }
.field-furrow { fill: none; stroke: color-mix(in srgb, #3F2A18 50%, var(--ground, #86B061)); stroke-linecap: round; }
[data-season="winter"] .field-soil { fill: color-mix(in srgb, #8C7A66 18%, var(--ground)); } [data-season="winter"] .field-furrow { stroke: color-mix(in srgb, #6E6458 25%, var(--ground)); }
.field-sprout { fill: none; stroke: color-mix(in srgb, #79B04A 85%, var(--ground, #86B061)); stroke-linecap: round; stroke-dasharray: .01 2.2; }
.field-crop path { fill: none; stroke: color-mix(in srgb, var(--crop) 82%, var(--ground, #86B061)); stroke-linecap: round; }
.field-stubble { fill: none; stroke: color-mix(in srgb, #9A7F45 70%, var(--ground, #86B061)); stroke-width: .25; }
.field-bale { fill: color-mix(in srgb, #E2C26C 85%, var(--ground, #86B061)); stroke: #A9883E; stroke-width: .25; } .field-bale-spiral { fill: none; stroke: #B49248; stroke-width: .22; }
.field-shrub circle { fill: color-mix(in srgb, #3E6B3F 80%, var(--ground, #86B061)); }
.barn-wall { fill: #7A5534; } .barn-planks { stroke: #5E3F25; stroke-width: .25; fill: none; } .barn-roof { fill: #4B3A30; } .barn-door { fill: #4A311E; }
.tr-body, .tr-fender { fill: #C0392B; } .tr-seat, .tr-pipe { fill: #2B2B2B; } .tr-steer { stroke: #2B2B2B; stroke-width: .3; fill: none; }
.tr-tyre { fill: #1E1E1E; } .tr-hub { fill: #E6E2D6; } .tr-spokes { stroke: #9A958A; stroke-width: .25; }
.tr-plough path { stroke: #4A4A4A; stroke-width: .45; fill: none; stroke-linecap: round; } .tr-reel circle { fill: none; stroke: #C9A33E; stroke-width: .35; } .tr-reel-spokes { stroke: #C9A33E; stroke-width: .25; }
.tr-plough, .tr-reel, .tr-puffs { display: none; }
.tractor.ploughing .tr-plough, .tractor.reaping .tr-reel { display: inline; }
.tractor.running .tr-puffs { display: inline; }
.tractor.running .tr-puffs circle { fill: rgba(120, 120, 120, .55); animation: tr-puff 1s ease-out infinite; }
.tractor.running .tr-puffs circle:nth-child(2) { animation-delay: .5s; }
@keyframes tr-puff { from { opacity: .8; transform: translate(0, 0); } to { opacity: 0; transform: translate(-1.5px, -2.5px); } }
.gulls { display: none; } .gulls.on { display: inline; } .gulls path { fill: none; stroke: #F4F4F2; stroke-width: .35; stroke-linecap: round; }
.picnic { display: none; } [data-picnic="yes"] .picnic { display: inline; }
.pn-cloth { fill: #D84A3A; } .pn-check { stroke: #F4F4F2; stroke-width: .35; fill: none; } .pn-bk { fill: #A0784A; } .pn-bkh { fill: none; stroke: #7A5634; stroke-width: .3; }
.pg-seedbag, .pg-sandwich { display: none; }
.penguin.sowing .pg-seedbag, .penguin.picnic .pg-sandwich { display: inline; }
.pg-sack { fill: #CDB58A; } .pg-strap { stroke: #8F7650; stroke-width: .3; } .pg-seeds circle { fill: #E7D9A8; opacity: 0; }
.penguin.sowing .pg-seeds circle { animation: pg-seed .7s linear infinite; } .penguin.sowing .pg-seeds circle:nth-child(2) { animation-delay: .23s; } .penguin.sowing .pg-seeds circle:nth-child(3) { animation-delay: .46s; }
@keyframes pg-seed { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(1.5px, 2.5px); } }
.pg-sandwich path { fill: #E9C98A; stroke: #A9874E; stroke-width: .15; }
.penguin.bite .pg-sandwich { transform: translate(-.6px, -1.6px); }
/* the orca: a fin on the lake now and then; tap it and it leaps (gadgets.js) */
.orca { display: none; }
.orca.on { display: inline; }
.orca-black { fill: #121417; } .orca-white { fill: #F2F3F1; } .orca-saddle { fill: #8F9AA3; }
.orca-wake { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .35; stroke-linecap: round; }
.orca.leap .orca-wake, .orca.under .orca-wake { display: none; }
.orca-blow circle { fill: rgba(255, 255, 255, .8); opacity: 0; }
.orca.blow .orca-blow circle { animation: orca-blow 1.2s ease-out; }
@keyframes orca-blow { 0% { opacity: .9; transform: translateY(1px); } 100% { opacity: 0; transform: translateY(-3px); } }
/* tap targets for the penguin's jobs; a ring shows that a tap arrived */
.tap-ring { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: .5; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: tap-ring .6s ease-out forwards; }
@keyframes tap-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.tap-leaves, .tap-pathsnow { display: none; }
[data-season="autumn"] .tap-leaves { display: inline; }
[data-pathsnow="yes"] .tap-pathsnow { display: inline; }
.hit-stroke { fill: none; stroke: transparent; stroke-width: 3; pointer-events: stroke; cursor: pointer; }
.visitors use { pointer-events: all; cursor: pointer; }
/* night stroll: nightcap and lantern; the trophy for all badges */
.pg-nightcap, .pg-lantern, .pg-trophy, .trophy { display: none; }
.penguin.nightcap .pg-nightcap, .penguin.nightcap .pg-lantern, .penguin.carrytrophy .pg-trophy, .trophy.show { display: inline; }
.pg-cap { fill: #3D5A80; } .pg-capband { fill: none; stroke: #F4F4F2; stroke-width: .5; stroke-linecap: round; } .pg-pompom { fill: #F4F4F2; }
.pg-lbody { fill: #2B2B2B; } .pg-lhandle { fill: none; stroke: #2B2B2B; stroke-width: .3; } .pg-lflame { fill: #FFC857; }
.pg-lglow { fill: rgba(255, 200, 110, .28); }
.tr-cup, .tr-stem { fill: #E0B642; stroke: #A7832A; stroke-width: .15; } .tr-shine { fill: #FFF3C4; }
/* sunglasses when the UV index is 6 or more (extras.js) */
.pg-shades { display: none; }
[data-uv="high"] .penguin .pg-shades { display: inline; }
.pg-lens { fill: #121417; stroke: #3E5A74; stroke-width: .12; } .pg-arm { stroke: #121417; stroke-width: .28; stroke-linecap: round; }
/* World Penguin Day visitors */
.visitors { display: none; }
[data-penguinday="yes"] .visitors { display: inline; }
/* the beaver lodge and the beaver (science.js) */
.bl-mound { fill: #5B4330; } .bl-sticks, .bl-cache path { fill: none; stroke: #36271B; stroke-width: .35; stroke-linecap: round; }
.bl-cache path { stroke: #4A3626; }
.bl-cache, .bl-snow, .bl-steam { display: none; }
.beaver-lodge.cache .bl-cache { display: inline; }
[data-season="winter"] .bl-snow { display: inline; } .bl-snow { fill: var(--snow); }
[data-lodgesteam="yes"] .bl-steam { display: inline; } .bl-steam { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: .3; stroke-linecap: round; }
.beaver { display: none; }
.beaver.out { display: inline; }
.bv-back { fill: #3F2E21; } .bv-head { fill: #5A4230; } .bv-ear, .bv-eye { fill: #1E1510; }
.bv-wake { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: .25; stroke-linecap: round; }
.bv-branch { fill: none; stroke: #6B8F3A; stroke-width: .3; stroke-linecap: round; display: none; }
.beaver.branch .bv-branch { display: inline; }
/* footprints and animal tracks in the snow (gadgets.js) */
.prints ellipse { fill: #5A7489; opacity: .45; }
.animal-tracks ellipse { opacity: .35; }
/* blueberries (July and August) and the penguin's pail */
.blueberries, .pg-pail, .pg-pb { display: none; }
[data-berries="yes"] .blueberries { display: inline; }
.penguin.pail .pg-pail { display: inline; }
.penguin.b1 .b1, .penguin.b2 .b1, .penguin.b2 .b2, .penguin.b3 .pg-pb { display: inline; }
.bb-leaf { fill: #2F5A34; } .bb-leaf2 { fill: #3C6E3E; }
.bb-berries circle, .pg-pb { fill: #43569F; }
.bb-bush.picked .bb-berries { display: none; }
.pg-pl { fill: #9AA5AE; } .pg-pl-h { fill: none; stroke: #6E7A84; stroke-width: .4; }
/* firewood: the pile, the chopping block, the axe (gadgets.js) */
.woodpile .log, .pg-logs .log { fill: #C68E55; stroke: #7E5530; stroke-width: .25; }
.woodpile .log.gone { display: none; }
.chop-block .cb-side { fill: #7A5534; } .chop-block .cb-top { fill: #C9A273; }
.axe-handle { stroke: #9A7348; stroke-width: .4; stroke-linecap: round; fill: none; } .axe-head { fill: #6F7880; }
.pg-axe, .pg-logs, .split-log { display: none; }
.penguin.axe .pg-axe, .penguin.carrylogs .pg-logs { display: inline; }
.block-axe.taken { display: none; }
.split-log.show { display: inline; }
.split-log rect { fill: #C68E55; stroke: #7E5530; stroke-width: .2; }
/* a blueberry pie on the window sill */
.pie { display: none; }
.pie.show { display: inline; }
.pie-dish { fill: #EDE9E0; } .pie-left, .pie-right { fill: #C98B4B; } .pie-lattice { stroke: #A36A35; stroke-width: .18; fill: none; }
.pie-cut { fill: #4B3C7A; display: none; }
.pie.bitten .pie-right, .pie.bitten .pie-lattice.r { display: none; } .pie.bitten .pie-cut { display: inline; }
.pie-steam { display: none; } .pie-steam path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: .18; stroke-linecap: round; }
.pie.hot .pie-steam { display: inline; }
.pie.hot .pie-steam path { animation: pie-steam 2.6s ease-out infinite; }
.pie.hot .pie-steam path:nth-child(2) { animation-delay: 1.3s; }
@keyframes pie-steam { from { opacity: 0; transform: translateY(.6px); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(-1.4px); } }
/* birthday cake (16 November) */
.cake, .pg-cake { display: none; }
.cake.show, .penguin.carrycake .pg-cake { display: inline; }
.cake-plate ellipse { fill: #E9E6DF; } .cake-body { fill: #F3E3C3; } .cake-icing { fill: #E98AA5; }
.cake-candles path { stroke: #7FB3E0; stroke-width: .3; }
.cake-flames ellipse { fill: #FFC24A; transform-box: fill-box; transform-origin: 50% 100%; }
.cake.show:not(.out) .cake-flames ellipse, .penguin.carrycake .cake-flames ellipse { animation: cake-flicker .5s ease-in-out infinite alternate; }
.cake.out .cake-flames { display: none; }
@keyframes cake-flicker { to { transform: scaleY(.75) skewX(6deg); } }
.cake .hit { fill: transparent; pointer-events: all; cursor: pointer; }
.penguin.stargaze .pg-scope { display: inline; }
.pg-tripod { fill: none; stroke: #8A8F94; stroke-width: .5; }
.pg-tube rect { fill: #C9CED3; }
/* night fishing */
.rowboat { display: none; }
.rowboat.show { display: inline; }
/* the rowboat's drift and rocking: moved by gadgets.js a few times a second (slow, so no need for 60 frames) */
.rb-rock { transform-box: fill-box; transform-origin: 50% 90%; }
.rb-hull { fill: #5C3E27; }
.rb-plank { fill: none; stroke: #43301F; stroke-width: .35; }
.rb-rim { stroke: #8A6441; stroke-width: .7; stroke-linecap: round; }
.rb-shadow { fill: rgba(0, 0, 0, .28); }
.rb-oar { stroke: #7A5B3A; stroke-width: .55; stroke-linecap: round; }
.rb-blade { fill: #7A5B3A; }
.rb-jacket { fill: #34546E; }
.rb-arm { stroke: #34546E; stroke-width: 1; stroke-linecap: round; }
.rb-head { fill: #D8B99A; }
.rb-hat { fill: #B8412F; }
.rb-rod { fill: none; stroke: #6B4A2B; stroke-width: .45; stroke-linecap: round; }
.rb-line { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: .2; }
.rb-float { fill: #E0493A; }
.rb-post { fill: none; stroke: #2E2E2E; stroke-width: .45; }
.rb-lamp { fill: #FFE3A3; }
.rb-halo { fill: #FFC96B; opacity: .1; }
.rb-refl { fill: none; stroke: #FFC96B; stroke-width: .7; stroke-linecap: round; opacity: .4; }
/* the angler's catch */
.rb-catch { display: none; fill: #A9B8C2; }
.rowboat.catch .rb-catch { display: inline; }
.rowboat.catch .rb-line { display: none; }
/* a big puff of steam when you throw water on the stones (löyly) */
.sauna-smoke.burst circle { animation-duration: 1.2s; fill: rgba(240, 240, 240, .75); }
/* ice hockey */
.hockey { display: none; }
.hockey.on { display: inline; }
.hockey .net { fill: none; stroke: #F4F4F2; stroke-width: .5; opacity: .85; }
.hockey .puck { fill: #15181B; }
.hockey .stick { stroke: #7A5B3A !important; }
.hockey .red .jersey { stroke: #C8102E !important; stroke-width: 2.2 !important; }
.hockey .blue .jersey { stroke: #2B6CA3 !important; stroke-width: 2.2 !important; }
.hockey .red circle { fill: #C8102E !important; } .hockey .blue circle { fill: #2B6CA3 !important; }
.skater.away { display: none !important; }
/* the penguin under the footer */
.footer { position: relative; overflow: hidden; }
.footer-peek { position: absolute; right: clamp(24px, 12vw, 180px); bottom: 0; width: 44px; height: 55px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(105%); transition: transform .6s cubic-bezier(.34, 1.3, .64, 1); }
.footer-peek svg { display: block; width: 100%; height: 100%; }
.footer-peek.peek { transform: translateY(38%); }
.footer-peek.peek .wave { animation: pg-wave .5s ease-in-out 3 alternate .5s; transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes pg-wave { to { transform: rotate(-35deg); } }
.pg-ripple { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: .8; opacity: 0; }

/* ---------- live weather ---------- */
#clouds { overflow: visible; opacity: var(--clouds-o, 0); transition: opacity 3s; will-change: transform; animation: drift 160s linear infinite alternate; }
[data-cloudy="no"] #clouds { visibility: hidden; animation-play-state: paused; }
#clouds ellipse { fill: var(--cloud); transition: fill 1.5s; }
#clouds .heavy { display: none; }
[data-heavy="yes"] #clouds .heavy { display: inline; }
@keyframes drift { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.fog {
  position: absolute; inset: auto 0 0 0; height: 48%; pointer-events: none;
  background: linear-gradient(to top, var(--fog) 20%, transparent);
  opacity: calc(var(--fog-o, 0) * .85); transition: opacity 3s;
}
.flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; }
.flash.on { animation: flash .9s ease-out; }
@keyframes flash { 0%, 30% { opacity: 0; } 8% { opacity: .55; } 16% { opacity: .1; } 22% { opacity: .4; } 100% { opacity: 0; } }

/* ---------- cottage, deer, holidays ---------- */
.fx { pointer-events: none; }
.stuga-hit { fill: transparent; pointer-events: all; cursor: pointer; }
[data-cottage="on"] .window { opacity: 1; }
/* cottage windows and door */
.win-frame, .door-frame { fill: #F3EEE6; } .win-glass { fill: #3A2E2C; } .win-bar { stroke: #F3EEE6; stroke-width: .45; }
.door-in { fill: #1E1512; } .door-in-light { fill: #F4C95D; opacity: calc(var(--window) * .8); }
[data-cottage="on"] .door-in-light { opacity: .8; } [data-cottage="off"] .door-in-light { opacity: 0; }
.door-leaf rect { fill: #3F5A48; } .door-panel { fill: none; stroke: #2E4436; stroke-width: .35; } .door-knob { fill: #E3C26B; }
.door-leaf { transform-box: fill-box; transform-origin: 0 50%; transition: transform .35s ease-in-out; }
.stuga-door.open .door-leaf { transform: scaleX(.16); }
.porch-lamp rect { fill: #2B2B2B; } .porch-glow { fill: #FFD27A; opacity: 0; transition: opacity .6s; }
.porch-lamp.on .porch-glow { opacity: .28; }
/* window boxes */
.wb-box { fill: #7A5230; } .wb-stems { stroke: #4E7A3A; stroke-width: .35; }
.wb-flowers, .wb-stems { display: none; }
[data-season="spring"] .wb-flowers, [data-season="summer"] .wb-flowers, [data-season="spring"] .wb-stems, [data-season="summer"] .wb-stems { display: inline; }
.wf1 { fill: #E0455A; } .wf2 { fill: #F2C14E; } .wf3 { fill: #E98AA5; }
.wb-flowers circle { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 2s ease-out, opacity 2s; }
.winboxes.thirsty .wb-flowers circle { transform: translateY(.6px) scale(.7); opacity: .6; }
/* autumn leaves and the pile */
.leaves, .leafpile { display: none; }
[data-season="autumn"] .leaves, [data-season="autumn"] .leafpile { display: inline; }
.leaves .lf { transition: transform 1.1s ease-in-out; }
.leaves.burst .lf { transition-duration: .7s; transition-timing-function: cubic-bezier(.2, .8, .3, 1); }
/* fresh snow on the path, shovelled off from the step to the jetty */
.path-snow { display: none; fill: none; stroke: var(--snow, #F7F9FB); stroke-width: 2.6; stroke-linecap: round; }
[data-pathsnow="yes"] .path-snow { display: inline; }
/* shore ice before the lake freezes over: a band along the edges, as wide as extras.js says */
.shore-ice { fill: none; stroke: var(--ice-col, #E3EDF2); stroke-width: var(--ice-band, 0); opacity: .9; }
[data-frozen="yes"] .shore-ice { display: none; }
[data-cottage="off"] .window { opacity: 0; }
.smoke { display: none; }
[data-smoke="on"] .smoke, [data-cottage="on"] .smoke { display: inline; }
[data-cottage="off"] .smoke { display: none; }
.smoke circle { fill: rgba(205, 205, 205, .55); transform-box: fill-box; transform-origin: center; animation: smoke 4.5s ease-out infinite; }
.smoke circle:nth-child(2) { animation-delay: 1.5s; }
.smoke circle:nth-child(3) { animation-delay: 3s; }
/* the smoke drifts downwind: --smoke-dx and --smoke-dy come from the real wind (gadgets.js) */
@keyframes smoke { from { transform: translate(0, 0) scale(.6); opacity: .9; } to { transform: translate(var(--smoke-dx, 6px), var(--smoke-dy, -26px)) scale(2.4); opacity: 0; } }

.deer { opacity: 0; pointer-events: none; transition: opacity 3s; cursor: pointer; }
.deer.show { opacity: 1; pointer-events: auto; }
.deer-body { transition: transform 1.2s ease-in, opacity 1.2s; }
/* a roe deer: red-brown in summer, grey-brown in winter, white rump patch */
.deer-coat { fill: #9A5E36; } .deer-leg { fill: none; stroke: #7E4C2C; stroke-width: .75; stroke-linecap: round; }
[data-season="winter"] .deer-coat { fill: #7A6858; } [data-season="winter"] .deer-leg { stroke: #62544A; }
.deer-rump { fill: #F2EBDD; } .deer-nose { fill: #1C1A18; }
.deer .antler { fill: none; stroke: #5A4632; stroke-width: .4; stroke-linecap: round; }
.deer-head { transform-box: fill-box; transform-origin: 100% 100%; animation: graze 11s ease-in-out infinite; }
.deer:not(.show) .deer-head { animation-play-state: paused; }
@keyframes graze { 0%, 55%, 100% { transform: rotate(0); } 62%, 88% { transform: rotate(-58deg); } }
.deer.flee .deer-body { transform: translateX(-45px); opacity: 0; } /* bounds off into the forest */

.special, .xmas-lights { display: none; }
[data-holiday="christmas"] .special-christmas, [data-holiday="christmas"] .xmas-lights,
[data-holiday="midsommar"] .special-midsommar, [data-holiday="easter"] .special-easter { display: inline; }
.xmas-tree { fill: var(--tree); }
.xmas-star { fill: #F2C94C; }
.special-christmas .b1 { fill: #E5484D; } .special-christmas .b2 { fill: #F2C94C; } .special-christmas .b3 { fill: #3E8EDE; }
.xmas-lights circle { animation: twinkle 1.4s ease-in-out infinite; }
.special-midsommar .pole { stroke: var(--tree); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.special-midsommar .greens { stroke: #4F8A3A; stroke-width: 3.4; stroke-dasharray: 2 2; fill: none; }
.special-midsommar .ring { fill: none; stroke: #4F8A3A; stroke-width: 1.8; }
.special-midsommar .bloom { fill: #FFFFFF; } .special-midsommar .bloom.y { fill: #F2C94C; }
.bunny { fill: #9B7B5B; }
.bunny .tail { fill: #FFFFFF; }

/* ---------- shooting stars and the riddle ---------- */
.shooting-star {
  position: absolute; z-index: 3; width: 150px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  animation: shoot 2.8s cubic-bezier(.4, 0, .9, .6) forwards;
}
.shooting-star::before {
  content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 2px; border-radius: 2px;
  background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
}
@keyframes shoot {
  from { transform: translate(0, 0) rotate(-22deg); opacity: 0; }
  12% { opacity: 1; }
  to { transform: translate(-380px, 155px) rotate(-22deg); opacity: 0; }
}
.shooting-star.caught { animation: caught .6s ease-out forwards; }
.shooting-star.caught::before { background: linear-gradient(to right, #F2C94C, rgba(242, 201, 76, 0)); }
@keyframes caught { to { transform: scale(1.6) rotate(-22deg); opacity: 0; } }
.aurora-storm .aurora { opacity: 1 !important; transition: opacity 1s; }
.aurora-storm .a1, .aurora-storm .a2, .aurora-storm .a3 { opacity: 1; filter: none; }
.aurora-storm .a1 { background: radial-gradient(closest-side, rgba(127, 240, 180, .85), rgba(127, 240, 180, .3) 55%, rgba(127, 240, 180, 0)); }
.aurora-storm .aurora { animation-duration: 4s; }

.toast {
  position: fixed; left: 24px; bottom: 24px; z-index: 60; max-width: calc(100vw - 48px);
  background: var(--text); color: var(--bg); font-size: 15px; padding: 10px 14px; border-radius: 6px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.toast.show { opacity: 1; transform: none; }

/* ---------- sections: heading left, content right ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px); }
.section {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 48px;
  padding: 96px 0 0;
}
.section h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
  margin: 0; padding-top: 18px; border-top: 1px solid var(--line-strong);
}
.section .body { border-top: 1px solid var(--line); padding-top: 18px; margin: 0; }

/* about */
.about { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
/* round portrait inside a thin ring */
.photo { aspect-ratio: 1; border-radius: 50%; padding: 5px; border: 1px solid var(--line-strong); }
.photo picture, .pub-img picture { display: contents; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; border-radius: 50%; display: block; }
.about p { margin: 0 0 16px; max-width: 62ch; color: var(--muted); }
.about .now { color: var(--text); font-size: 17px; margin: 0 0 22px; }
.now strong { font-weight: 600; margin-right: 6px; }
.now-date { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.about .lead { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.4; color: var(--text); letter-spacing: -0.01em; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 24px 0 0; font-size: 16px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.facts-wide { flex-basis: 100%; }
.keywords { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.keywords li:not(:last-child)::after { content: '·'; margin: 0 10px; color: var(--muted); }

/* career: profile + table */
.topo {
  margin: 0; overflow-x: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='340' fill='none' stroke='%23A3B5AB' stroke-opacity='.09'%3E%3Cellipse cx='400' cy='110' rx='40' ry='24'/%3E%3Cellipse cx='400' cy='114' rx='82' ry='50'/%3E%3Cellipse cx='392' cy='120' rx='128' ry='80'/%3E%3Cellipse cx='384' cy='126' rx='180' ry='112'/%3E%3Cellipse cx='376' cy='132' rx='236' ry='148'/%3E%3Cellipse cx='70' cy='320' rx='54' ry='30'/%3E%3Cellipse cx='70' cy='320' rx='108' ry='62'/%3E%3C/svg%3E");
}
#profile { display: block; width: 100%; min-width: 600px; height: auto; }
#profile .tick { stroke: var(--line-strong); }
#profile .axis { fill: var(--muted); font: 12px var(--sans); text-anchor: middle; }
#profile .span { opacity: .22; transition: opacity .35s; pointer-events: none; }
#profile .span.hover { opacity: .6; }
#profile .span.active { opacity: 1; }
#profile .area { fill: var(--muted); opacity: .06; }
#profile .trail { fill: none; stroke: none; }
#profile .trail-past { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
#profile .trail-ahead { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; opacity: .6; }
#profile .wp { cursor: pointer; outline: none; }
#profile .wp .ring { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
#profile .wp .core { fill: var(--accent); opacity: 0; }
#profile .wp .summit { fill: var(--accent); }
#profile .wp text { fill: var(--text); font: 500 14px var(--sans); text-anchor: middle; }
#profile .wp:hover .core, #profile .wp.active .core { opacity: 1; }
#profile .wp:focus-visible .ring, #profile .wp:focus-visible .diamond { stroke: var(--text); stroke-width: 3; }
#profile .wp .diamond { fill: var(--bg); stroke: var(--edu); stroke-width: 2; stroke-linejoin: round; }
#profile .wp.edu:hover .diamond, #profile .wp.edu.active .diamond { fill: var(--edu); }
#profile .wp.edu text { fill: var(--edu); }
#profile .legend text { fill: var(--muted); font: 13px var(--sans); }
#profile .legend .lg-job { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
#profile .legend .lg-edu { fill: var(--bg); stroke: var(--edu); stroke-width: 2; stroke-linejoin: round; }
#eduList li { cursor: pointer; }
#eduList li.active::after { background: var(--edu); border-color: var(--edu); }
#eduList li.active .tl-years { color: var(--edu); }
#eduList li::after { border-color: var(--edu); }
#cvList li { cursor: pointer; }
#cvList li.active::after { background: var(--accent); }
#cvList li.active .tl-years { color: var(--accent); }
#cvList { margin-bottom: 28px; }
#profile .hiker { pointer-events: none; }
#profile .gd { pointer-events: none; transition: opacity .8s; }
#profile .gd.gone { opacity: 0; }
#profile .gd-status { fill: var(--muted); font: 13px var(--sans); }
#profile .gd-plain { fill: var(--muted); opacity: .7; }
#profile .gd-momentum { fill: var(--accent); }
#profile .hiker line { stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; }
#profile .hiker circle { fill: var(--text); }
#profile .hiker .pack { fill: var(--accent); }
#profile .hiker .pole { stroke: var(--muted); stroke-width: 1; }
#profile .hiker .lamp, #profile .hiker .beam { display: none; }
[data-daylight="no"] #profile .hiker .lamp, [data-daylight="no"] #profile .hiker .beam { display: inline; }
#profile .hiker .lamp { fill: #FFF3B0; }
#profile .hiker .beam { fill: #FFF3B0; opacity: .22; stroke: none; }
#profile .hiker .cup, #profile .hiker .sit-legs { display: none; }
#profile .hiker .umbrella-packed, #profile .hiker .umbrella-open { display: none; }
#profile .hiker.rain-soon .umbrella-packed, #profile .hiker.rain .umbrella-open { display: inline; }
#profile .hiker .umbrella-packed line, #profile .hiker .umbrella-open line { stroke-width: 1; }
#profile .hiker .umbrella-packed path { fill: none; stroke: var(--text); stroke-width: 1; stroke-linecap: round; }
#profile .hiker .canopy { fill: var(--accent); }
#profile .hiker .sit-legs { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#profile .hiker.sitting .walk-legs { display: none; }
#profile .hiker.sitting .cup, #profile .hiker.sitting .sit-legs { display: inline; }
#profile .hiker.sitting .hk-upper { transform: translateY(4px); }
#profile .hiker .cup rect { fill: var(--accent); }
#profile .hiker .steam { fill: none; stroke: var(--muted); stroke-width: .8; stroke-linecap: round; animation: steam 2.4s ease-in-out infinite; }
@keyframes steam { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }

.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }

.entry-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 15px; }
.entry-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; }
.entry-links a:hover { text-decoration: underline; }

/* education: a vertical route with waypoints */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 0 28px; position: relative; padding: 0 0 30px; }
.timeline li:last-child { padding-bottom: 4px; }
.timeline li { --lane: 0; }
.timeline li::after {  /* the waypoint; a branch (--lane: 1) sits beside the route */
  content: ''; position: absolute; left: calc(8.5em + 8px + var(--lane) * 22px); top: 7px; width: 8px; height: 8px;
  border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); z-index: 1;
}
.timeline .tl-body { padding-left: calc(4px + var(--lane) * 22px); }
/* the dashed route and its branches, drawn by renderRoute() in script.js */
.timeline svg.route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.timeline svg.route path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 5; transition: stroke .2s; }
#eduList svg.route path.active { stroke: var(--edu); }
#cvList svg.route path.active { stroke: var(--accent); }

.tl-years { color: var(--muted); font-size: 16px; padding-top: 1px; white-space: nowrap; }
.tl-body { padding-left: 4px; }
.tl-body h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.tl-org { margin: 2px 0 0; color: var(--text); }
.tl-place { color: var(--muted); margin-left: 6px; }
.tl-text { margin: 6px 0 0; color: var(--muted); max-width: 62ch; }
.award { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 4px 10px; font-size: 15px; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; }
.award .i { width: 1em; height: 1em; }

/* publications, grouped by year */
.pub-year { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 0 28px; padding: 0 0 8px; }
.pub-year + .pub-year { border-top: 1px solid var(--line); padding-top: 18px; }
.pub-year h3 { font-size: 20px; font-weight: 600; margin: 0; color: var(--muted); }
.pub-year ol { list-style: none; padding: 0; margin: 0; }
.pub-year li { margin: 0 0 20px; }
.pub-title { font-size: 18px; font-weight: 500; line-height: 1.35; text-decoration: none; display: inline; }
.pub-title:hover { text-decoration: underline; }
.pub-authors { margin: 4px 0 0; color: var(--muted); font-size: 16px; }
.pub-authors strong { color: var(--text); font-weight: 600; white-space: nowrap; }
.pub-venue { margin: 2px 0 0; color: var(--muted); font-size: 15px; font-style: italic; }
.pub-type { font-style: normal; font-size: 12px; letter-spacing: .02em; color: var(--text); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px; margin-right: 6px; }
#publications .text-link { margin-top: 0; }
.pub-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 8px 0 0; }
.footer .updated { margin-left: 10px; }
.footer .updated:not(:empty)::before { content: '·'; margin-right: 10px; }
.pub-cite { margin: 6px 0 0; display: flex; gap: 14px; }
.pub-cite button, .copied-note { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.pub-cite button:hover { color: var(--accent); }
.pub-cite button.copied { color: var(--edu); text-decoration: none; }
.copied-note { cursor: default; text-decoration: none; color: var(--edu); margin-left: 10px; font-size: 14px; }
span.pub-title { display: inline; }
.talk-role { margin: 4px 0 0; font-size: 16px; }
.talk-role .pub-type { margin-right: 6px; }
.talk-map { margin: 0 0 28px; }
.talk-map svg { display: block; width: 100%; height: auto; aspect-ratio: 2.4; border-radius: 8px; background: color-mix(in srgb, var(--edu) 8%, var(--bg)); }
.talk-map .land { fill: color-mix(in srgb, var(--text) 9%, var(--bg)); stroke: var(--line-strong); stroke-width: .15; stroke-linejoin: round; }
.map-pin circle { fill: var(--accent); }
.map-pin { cursor: pointer; outline: none; }
.map-pin .halo { opacity: .22; transition: opacity .2s; }
.map-pin:hover .halo, .map-pin:focus-visible .halo { opacity: .4; }
.map-pin.active .halo { opacity: .55; }
.map-pin.active text { fill: var(--accent); }
#talkList li { cursor: pointer; transition: background-color .2s; margin-left: -12px; padding: 6px 12px; border-radius: 6px; }
#talkList li:hover { background: var(--raised); }
/* co-author map in Publications: my pin in Stockholm, faint arcs to every co-author's city */
.co-line { fill: none; stroke: var(--accent); stroke-opacity: .35; stroke-width: .12; stroke-linecap: round; }
.co-map { position: relative; }
.co-play { position: absolute; top: 8px; left: 8px; font: 11px var(--mono); color: var(--muted); background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.co-play:hover, .co-play.on { color: var(--accent); border-color: currentColor; }
.co-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease-in-out; }
.co-line.hid { stroke-dashoffset: 1; }
.co-pin { transition: opacity .45s .7s; }
.co-pin.hid { opacity: 0; transition: none; }
#coMapSvg.instant .co-line, #coMapSvg.instant .co-pin { transition: none; }
@media (prefers-reduced-motion: reduce) { .co-line, .co-pin { transition: none; } }
.co-pin { cursor: pointer; outline: none; }
.co-pin .dot { fill: var(--edu); }
.co-pin .halo { fill: var(--edu); opacity: .14; transition: opacity .2s; }
.co-pin.home .dot, .co-pin.home .halo { fill: var(--accent); }
.co-pin .dot { stroke: var(--bg); stroke-width: .12; } /* a thin outline keeps touching pins apart */
.co-pin:hover .halo, .co-pin:focus-visible .halo { opacity: .38; }
.co-pin.active .halo { opacity: .55; }
.co-pin text { fill: var(--text); font-family: var(--sans); font-weight: 500; paint-order: stroke; stroke: var(--bg); stroke-width: .35; }
.co-pin.home text { font-weight: 700; }
.co-pin.active text { fill: var(--accent); }
.co-cap { margin: 10px 2px 0; font-size: 13px; line-height: 1.55; color: var(--muted); min-height: 3.1em; }
.co-cap b { color: var(--text); font-weight: 600; }
.co-cap .co-n { color: var(--accent); font-size: 12px; }
.pub-list .pub-year li { margin: 0 -12px 4px; padding: 8px 12px; border-radius: 6px; transition: background-color .25s; } /* same spacing as before, room for the highlight */
.pub-list li.co-active { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.pub-list li.co-active .pub-title { color: var(--accent); }
#talkList li.active { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
#talkList li.active .pub-title { color: var(--accent); }
.map-pin text { fill: var(--text); font-family: var(--sans); font-weight: 500; paint-order: stroke; stroke: var(--bg); stroke-width: .35; }
.pub-type.award-type { border-color: var(--accent); color: var(--accent); }

/* skills */
.skills { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 36px; }
.skills dt, .skills dd { padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
.skills dt { color: var(--muted); }
.skills dt:first-of-type, .skills dd:first-of-type { padding-top: 0; }

/* projects */
.projects { list-style: none; padding: 0; }
.sub-h { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: .02em; margin: 0 0 12px; }
.projects + .sub-h { margin-top: 36px; }
.projects .desc a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.projects .desc a:hover { color: var(--accent); }
.projects li { border-bottom: 1px solid var(--line); }
.projects li:first-child > * { padding-top: 0; }
.projects a, .projects li > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline;
  padding: 18px 0; text-decoration: none;
}
.projects .name { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; }
.projects .desc { grid-column: 1 / -1; color: var(--muted); }
.projects .where { grid-row: 1; grid-column: 2; color: var(--muted); font-size: 15px; }
.projects a:hover .name { color: var(--accent); }

/* contact */
.big { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; margin: 0 0 20px; }
.big a { text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.links a { display: inline-flex; align-items: center; gap: 6px; }

.footer {
  max-width: 1180px; margin: 120px auto 0; padding: 24px clamp(16px, 5vw, 64px) 48px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 15px; color: var(--muted);
}

/* publications with a small picture (\web{image}{…} in cv/cv.tex) */
.pub-list li.has-img { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.pub-img { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #fff; margin-top: 4px; }
.pub-img img { display: block; width: 100%; height: auto; max-height: 170px; object-fit: contain; transition: transform .4s ease; }
.pub-img:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .pub-list li.has-img { grid-template-columns: 76px minmax(0, 1fr); gap: 0 14px; } }

/* ---------- performance: no animations on things that aren't on screen ----------
   Hidden or transparent elements would otherwise keep being animated every frame (battery). */
.birds:not(.fly) .b,
.ufo:not(.out) .light,
.camp:not(.fire) .flame, .camp:not(.fire) .spark,
.sauna-smoke:not(.on) circle,
.penguin:not(.steamy) .pg-steam circle,
.rowboat:not(.show) .rb-drift, .rowboat:not(.show) .rb-rock,
.deer:not(.show) .deer-head,
#profile .hiker:not(.sitting) .steam,
html:not(.grilling) .bbq-smoke circle,
html:not([data-smoke="on"]):not([data-cottage="on"]) .smoke circle, [data-cottage="off"] .smoke circle,
html:not([data-frozen="yes"]) .sk-glide, html:not([data-frozen="yes"]) .sk-flip, [data-daylight="no"] .sk-glide, [data-daylight="no"] .sk-flip,
html:not([data-daylight="no"]) .owl-eyes circle,
html:not([data-holiday="christmas"]) .xmas-lights circle,
.flagpole:not([data-flag="se"]) .flag-se, .flagpole:not([data-flag="at"]) .flag-at, .flag-vimpel { animation: none; }

/* ---------- GPS terminal ---------- */
.gps {
  --line: #262626; --line-strong: #3A3A3A; --text: #EDEDED; --muted: #A3A3A0; --accent: var(--accent-night, #F2A15A);
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  width: min(520px, calc(100vw - 32px)); height: min(460px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: #0E0E0E; color: #DADADA; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 18px 40px -8px rgba(0, 0, 0, .55);
  overflow: hidden; animation: rise .22s cubic-bezier(.16, 1, .3, 1);
}
.gps[hidden] { display: none; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
.gps-head {
  display: flex; align-items: center; gap: 12px; font-size: 11px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted);
}
.gps-coords { flex: 1; text-align: right; }
.gps-head button { background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.gps-head button:hover { color: var(--text); }
.gps-head .gps-live { font: 11px var(--mono); color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; }
.gps-head .gps-live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.gps-out { flex: 1; overflow-y: auto; padding: 14px; line-height: 1.7; white-space: pre-wrap; scrollbar-width: thin; }
.gps-out .cmd { color: var(--muted); }
.gps-out .cmd b { color: var(--accent); font-weight: 400; }
.gps-out .ok { color: #9FD3B8; }
.gps-out .warn { color: var(--accent); }
.gps-out a { color: var(--accent); }
.gps-in { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.gps-in label { color: var(--accent); }
.gps-in input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font: 13px var(--mono); }
.gps-in input::placeholder { color: #5A5A58; }
/* help screen: groups of commands; the commands and options are buttons */
.gps-out .h-group { white-space: normal; margin: 0 0 12px; }
.gps-out .h-title { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; margin: 4px 0 4px; }
.gps-out .h-row { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: 0 12px; align-items: baseline; padding: 1px 0; }
.gps-out .h-desc { color: #CFCFCB; }
.gps-out .h-opts { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 1px; }
.gps-out .h-cmd, .gps-out .h-opt { font: inherit; background: none; border: 0; padding: 0; margin: 0; color: var(--accent); cursor: pointer; text-align: left; }
.gps-out .h-opt { color: var(--muted); }
.gps-out .h-cmd:hover, .gps-out .h-opt:hover { text-decoration: underline; text-underline-offset: 3px; }
.gps-out .h-opt:hover { color: var(--text); }
.gps-out .psf { display: block; line-height: 1.2; margin: 10px 0 4px; }
.gps-out .h-tip { white-space: normal; color: var(--muted); margin-top: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .section { grid-template-columns: minmax(0, 1fr); padding-top: 72px; }
  .section h2 { border-top: 0; padding-top: 0; margin-bottom: 12px; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .photo { max-width: 220px; }
  .skills { grid-template-columns: minmax(0, 1fr); }
  .skills dt { border-bottom: 0; padding-bottom: 0; }
  .skills dd:first-of-type { padding-top: 0; }
  .skills dt ~ dt { padding-top: 14px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); padding-left: calc(28px + var(--lane) * 22px); }
  .timeline li::after { left: calc(var(--lane) * 22px); }
  .timeline .tl-body { padding-left: 4px; }
  .tl-years { font-size: 14px; }
  .tl-place { display: block; margin-left: 0; }
  .pub-year { grid-template-columns: minmax(0, 1fr); }
  .pub-year h3 { margin-bottom: 10px; }
}
@media (max-width: 760px) {
  .hero { touch-action: pan-y; } /* sideways swipes pan the landscape (script.js), up and down scroll the page */
  .world { right: auto; will-change: transform; } /* wider than the screen, slid by script.js: its own layer, so sliding is cheap */
  .nav nav a { display: none; }
  .hero-text { top: 18vh; }
  .hero-clock { display: block; margin-top: 2px; } /* on phones: greeting on one line, time on the next */
  .landscape { height: 44%; }
  /* phones: the terminal is a sheet across the bottom of the screen */
  .gps { left: 0; right: 0; bottom: 0; width: auto; height: min(74svh, 640px); border-width: 1px 0 0; border-radius: 14px 14px 0 0; font-size: 12.5px; }
  .gps-head { padding: 12px 16px; }
  .gps-head button { font-size: 24px; padding: 0 4px; }
  .gps-out { padding: 14px 16px; }
  .gps-in { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .gps-in input { font-size: 16px; } /* 16 px or more: iPhones don't zoom in when you tap it */
  .gps-out .h-row { grid-template-columns: 11ch minmax(0, 1fr); gap: 0 10px; padding: 3px 0; }
  .gps-out .h-opts { gap: 4px 14px; }
}

/* ---------- time-lapse: no smoothing, every picture is a new moment ---------- */
.timelapse *, .timelapse *::before, .timelapse body { transition: none !important; }

/* ---------- a single note (note.html) ---------- */
.note-main { max-width: 760px; margin: 0 auto; padding: 116px clamp(16px, 5vw, 32px) 0; }
.note-back { font-size: 15px; font-weight: 400; color: var(--muted); text-decoration: none; }
.note-back:hover { color: var(--accent); }
.note h1 { font-size: clamp(34px, 5.4vw, 52px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; margin: 28px 0 10px; text-wrap: balance; }
.note-date { color: var(--muted); font-size: 15px; margin: 0 0 36px; }
.note p, .note li { font-size: 19px; line-height: 1.7; }
.note p { margin: 0 0 20px; max-width: 66ch; }
.note h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; margin: 44px 0 12px; }
.note h3 { font-size: 21px; font-weight: 600; margin: 32px 0 10px; }
.note h4 { font-size: 18px; font-weight: 600; margin: 24px 0 8px; }
.note ul, .note ol { padding-left: 1.3em; margin: 0 0 20px; }
.note li { margin: 4px 0; }
.note a { color: var(--accent); }
.note img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 28px 0; }
.note blockquote { margin: 0 0 20px; padding-left: 18px; border-left: 1px solid var(--line-strong); color: var(--muted); font-size: 19px; line-height: 1.7; }
.note code { font-family: var(--mono); font-size: .8em; background: var(--raised); padding: 1px 5px; border-radius: 4px; }
.note pre { background: var(--raised); padding: 16px 18px; border-radius: 8px; overflow-x: auto; margin: 0 0 24px; }
.note pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
.note hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.note-loading { color: var(--muted); }

/* ---------- screensaver: only the landscape after a minute of no input ---------- */
.hero-text { transition: opacity .35s ease-out; }
.nav { transition: background-color .3s, color .3s, opacity .35s ease-out; }
.screensaver .hero-text, .screensaver .nav { opacity: 0; transition: opacity 3s ease-in; pointer-events: none; }
.screensaver, .screensaver * { cursor: none !important; }

/* ---------- link-preview card (?card) ---------- */
.card .nav, .card .hero-time, .card .weather, .card .birds, .card .iss, .card .toast { display: none !important; }
.card .hero { height: 630px; min-height: 0; }
.card .landscape { height: 69%; } /* the full drawing, no peaks cut off */
.card .hero-text { top: 46px; left: 64px; }
.card .hero h1 { font-size: 76px; }
.card .hero-line { font-size: 21px; margin-top: 14px; }
.card .hero-place { font-size: 18px; }
.card .hero-text::after { content: 'sebjbauer.github.io'; display: block; margin-top: 16px; font-size: 17px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- print: a clean, light one-column page without the sky ---------- */
@media print {
  :root, [data-theme] {
    --bg: #FFFFFF !important; --raised: #FFFFFF !important; --text: #111111 !important; --muted: #555555 !important;
    --accent: #111111 !important; --edu: #111111 !important; --line: #DDDDDD !important; --line-strong: #BBBBBB !important;
    color-scheme: light;
  }
  @page { margin: 15mm 14mm; }
  html, body { background: #FFFFFF !important; color: #111111 !important; font-size: 10.5pt; }
  .nav, .skip-link, .gps, .toast, .copied-note, #timeline, .talk-map, .pub-cite, #cvDownload, .entry-links svg, .links svg,
  .hero > :not(.hero-text), .hero::after, .hero-time, .hero-text::before, .badges { display: none !important; }
  .hero { height: auto !important; min-height: 0 !important; background: none !important; color: #111111 !important; overflow: visible; margin: 0 auto 6mm; max-width: 1180px; padding: 0 clamp(16px, 5vw, 64px); }
  .hero-text { position: static !important; opacity: 1 !important; max-width: none; }
  .hero h1 { font-size: 30pt !important; margin: 0 0 2mm; color: #111111 !important; }
  .hero-line, .hero-place { color: #111111 !important; font-size: 11pt; margin: 0 0 1mm; }
  .hero-line a { color: inherit !important; }
  .section { display: block !important; padding-top: 7mm !important; }
  .section h2 { border-top: 0 !important; padding-top: 0 !important; margin: 0 0 2mm; font-size: 14pt; break-after: avoid; }
  .section .body { padding-top: 3mm; }
  .photo { display: none; }
  .about { display: block !important; }
  .links { display: block !important; }
  .links li { margin: 0 0 1mm; }
  .links a { display: inline !important; }
  .footer > span:last-child { display: none; }
  .links li:has(a[href$=".vcf"]), .links li:has(a[href$=".pdf"]) { display: none; }
  .links a[href^="http"]::after { content: ': ' attr(href); color: #555555; }
  .links a[href^="mailto:"]::after { content: ': ' attr(title); color: #555555; }
  li, tr, .pub-year h3, dt { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  .footer { margin-top: 8mm; padding: 3mm 0 0; border-top: 1px solid #DDDDDD; }
  .footer::after { content: 'sebjbauer.github.io'; }
  * { transition: none !important; animation: none !important; }
}