/* MVP: one static page. Works without JavaScript (js/main.js only adds a theme
   toggle, project filters, a copy button and nav highlighting).
   Font: Geist Sans (SIL OFL). An installed copy is used if the device has one (local()); otherwise it is
   downloaded from assets/fonts. No third-party requests. */

@font-face {
  font-family: "Geist Mono";
  src: local("Geist Mono"), local("GeistMono"), url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: local("Geist"), local("Geist Variable"), url("../assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Palette from the chosen colours: #137547 green, #beff8b lime, #9dbbc5 / #86A2B1 blue, #567257 / #5B6D49 sage.
     Themes: js/main.js sets data-theme (palette) and data-mode (light or dark) on <html>.
     Without JavaScript the default palette follows the system light/dark setting. */
  --bg:#ffffff; --fg:#13201a; --muted:#58675f; --line:#dde5e0; --accent:#137547; --accent-hover:#0d5e37; --on-accent:#ffffff; --tint:#eef3f4; --hero-top:#e3edf0; --card:#ffffff; --lime:#beff8b; --i1:#567257; --i2:#137547; --i3:#86A2B1;
  --max: 74rem;
  /* Editor-card colours are derived from the palette above */
  --ed-bg: color-mix(in srgb, var(--tint) 55%, var(--bg));
  --ed-bar: var(--tint);
  --ed-border: var(--line);
  --ed-ln: color-mix(in srgb, var(--muted) 65%, var(--bg));
  --syn-k: var(--i3); --syn-s: var(--accent); --syn-c: var(--muted); --syn-l: var(--i1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) { --bg:#0e1411; --fg:#e8efe9; --muted:#9aaba0; --line:#213029; --accent:#beff8b; --accent-hover:#d2ffae; --on-accent:#0e1411; --tint:#131c18; --hero-top:#15211f; --card:#121a16; --lime:#beff8b; --i1:#9dbbc5; --i2:#beff8b; --i3:#86A2B1; color-scheme: dark; }
}
:root[data-mode="light"] { color-scheme: light; }
:root[data-mode="dark"] { --bg:#0e1411; --fg:#e8efe9; --muted:#9aaba0; --line:#213029; --accent:#beff8b; --accent-hover:#d2ffae; --on-accent:#0e1411; --tint:#131c18; --hero-top:#15211f; --card:#121a16; --lime:#beff8b; --i1:#9dbbc5; --i2:#beff8b; --i3:#86A2B1; color-scheme: dark; }
:root[data-theme="ocean"][data-mode="light"] { --bg:#fbf6e8; --fg:#0c2a36; --muted:#4f6a70; --line:#e4d8b6; --accent:#0a6f8c; --accent-hover:#085874; --on-accent:#ffffff; --tint:#f2e8cc; --hero-top:#86d0e2; --card:#fffdf5; --lime:#e3c887; --i1:#d9825b; --i2:#0a6f8c; --i3:#b98f3a; color-scheme: light; }
:root[data-theme="ocean"][data-mode="dark"] { --bg:#041118; --fg:#d4eef5; --muted:#86aebb; --line:#123242; --accent:#4dd6e8; --accent-hover:#82e4f1; --on-accent:#041118; --tint:#071b26; --hero-top:#0a3a50; --card:#071f2b; --lime:#7be8d4; --i1:#2fb5c4; --i2:#4dd6e8; --i3:#e6c58a; color-scheme: dark; }
:root[data-theme="paper"][data-mode="light"] { --bg:#f7f1e3; --fg:#2b2418; --muted:#6e624d; --line:#e0d4b8; --accent:#8a4b12; --accent-hover:#6d3a0d; --on-accent:#ffffff; --tint:#efe6d0; --hero-top:#efe3c6; --card:#fbf7ec; --lime:#e8c46a; --i1:#8a4b12; --i2:#567257; --i3:#86A2B1; color-scheme: light; }
:root[data-theme="paper"][data-mode="dark"] { --bg:#1b1610; --fg:#eadfc6; --muted:#a89a7e; --line:#33291b; --accent:#e0a96d; --accent-hover:#eec28f; --on-accent:#1b1610; --tint:#231c13; --hero-top:#2b2216; --card:#20190f; --lime:#e0a96d; --i1:#c9a46a; --i2:#9fbf9a; --i3:#9dbbc5; color-scheme: dark; }
:root[data-theme="alien"][data-mode="light"] { --bg:#f6f3ff; --fg:#1a0f33; --muted:#5f5480; --line:#ded6f5; --accent:#5b21b6; --accent-hover:#4a1896; --on-accent:#ffffff; --tint:#ece6fb; --hero-top:#dcd1f7; --card:#ffffff; --lime:#7ad63a; --i1:#5b21b6; --i2:#3f9d0f; --i3:#c026d3; color-scheme: light; }
:root[data-theme="alien"][data-mode="dark"] { --bg:#05020d; --fg:#e8defa; --muted:#8f82b5; --line:#1e1540; --accent:#7dff3a; --accent-hover:#a3ff72; --on-accent:#05020d; --tint:#0a0618; --hero-top:#12082e; --card:#0a0618; --lime:#7dff3a; --i1:#c04bff; --i2:#7dff3a; --i3:#19e6c1; color-scheme: dark; }
:root[data-theme="christmas"][data-mode="light"] { --bg:#f5fbf5; --fg:#10281a; --muted:#52695a; --line:#cde2d1; --accent:#c1121f; --accent-hover:#9b0e18; --on-accent:#ffffff; --tint:#e2f1e5; --hero-top:#b5dfc0; --card:#ffffff; --lime:#e0b422; --i1:#14673b; --i2:#c1121f; --i3:#c9a227; color-scheme: light; }
:root[data-theme="christmas"][data-mode="dark"] { --bg:#0b1810; --fg:#f6efe4; --muted:#a9b9ac; --line:#1b3324; --accent:#ff5c66; --accent-hover:#ff8a92; --on-accent:#0b1810; --tint:#10241a; --hero-top:#15301f; --card:#0e1f15; --lime:#f5c542; --i1:#4fbf7a; --i2:#ff5c66; --i3:#f5c542; color-scheme: dark; }
:root[data-theme="thanksgiving"][data-mode="light"] { --bg:#fff8ee; --fg:#2d1b0e; --muted:#6f5a45; --line:#ecdcc4; --accent:#b45309; --accent-hover:#92400e; --on-accent:#ffffff; --tint:#fbeedb; --hero-top:#f6e0bf; --card:#fffdf8; --lime:#e0a34a; --i1:#7c2d12; --i2:#b45309; --i3:#a16207; color-scheme: light; }
:root[data-theme="thanksgiving"][data-mode="dark"] { --bg:#1a0f08; --fg:#f3e3cf; --muted:#b49a7e; --line:#3a2616; --accent:#f59e0b; --accent-hover:#fbb83d; --on-accent:#1a0f08; --tint:#22140b; --hero-top:#2c1a0d; --card:#1f130a; --lime:#f59e0b; --i1:#d97706; --i2:#f59e0b; --i3:#e07a3f; color-scheme: dark; }
:root[data-theme="diwali"][data-mode="light"] { --bg:#fff8ec; --fg:#2b0f3a; --muted:#6b4f7a; --line:#f0dfc4; --accent:#b3126b; --accent-hover:#8c0e54; --on-accent:#ffffff; --tint:#fdeed6; --hero-top:#fbdcae; --card:#fffdf8; --lime:#f5b700; --i1:#ea580c; --i2:#b3126b; --i3:#d99a00; color-scheme: light; }
:root[data-theme="diwali"][data-mode="dark"] { --bg:#12051f; --fg:#fde9c8; --muted:#bba0c9; --line:#2b1445; --accent:#ffb703; --accent-hover:#ffc93c; --on-accent:#12051f; --tint:#1a0a2c; --hero-top:#260f40; --card:#170829; --lime:#ffb703; --i1:#ff4fa3; --i2:#ffb703; --i3:#ff7a1a; color-scheme: dark; }
:root[data-theme="halloween"][data-mode="dark"] { --bg:#0b080f; --fg:#f3e8d8; --muted:#a8977f; --line:#2a1c30; --accent:#ff7a00; --accent-hover:#ff9a33; --on-accent:#0b080f; --tint:#130d19; --hero-top:#1e1226; --card:#110b16; --lime:#ff7a00; --i1:#a855f7; --i2:#ff7a00; --i3:#9be15d; color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.65 "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); color: var(--accent); }
p { margin: 0 0 .75rem; }
ul { margin: .4rem 0 0; padding-left: 1.1rem; }
li { margin: .25rem 0; }
[hidden] { display: none !important; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 2rem; }
@media (max-width: 640px) { .wrap { padding: 0 1.1rem; } }

/* Top bar */
.top { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); z-index: 5; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 2rem; min-height: 4rem; }
.brand { font-weight: 650; text-decoration: none; font-size: 1.05rem; }
.brand::before { content: none; }  /* the S mark is the tab icon (favicon.svg), not part of the page */
#site-nav { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; font-size: .95rem; color: var(--muted); margin-left: auto; }
#site-nav a { text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
#site-nav a:hover, #site-nav a.on { color: var(--fg); border-bottom-color: var(--accent); }
.bar-actions { display: flex; align-items: center; gap: .6rem; }
@media (max-width: 760px) { .bar { padding-top: .5rem; padding-bottom: .5rem; } #site-nav { order: 3; width: 100%; margin-left: 0; } .bar-actions { margin-left: auto; } }

/* Buttons */
.btn { display: inline-block; padding: .65rem 1.2rem; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 500; font-size: .95rem; text-decoration: none; border: 1px solid var(--accent); cursor: pointer; transition: transform .15s, background .15s; }
.btn:hover { color: var(--on-accent); background: var(--accent-hover); transform: translateY(-1px); }
.btn-sm { padding: .4rem .95rem; font-size: .85rem; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-ghost:hover { color: var(--accent); background: transparent; border-color: var(--accent); }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Mode button shows one icon: monitor = auto, sun = light, moon = dark */
.theme-btn .i-sun, .theme-btn .i-moon, .theme-btn .i-auto { display: none; }
.theme-btn[data-pref="light"] .i-sun, .theme-btn[data-pref="dark"] .i-moon, .theme-btn[data-pref="auto"] .i-auto { display: block; }
/* Without JS the button does not exist; with JS but before the first sync, show the monitor */
.theme-btn:not([data-pref]) .i-auto { display: block; }
.pal-wrap { display: inline-flex; }
.pal-menu { position: fixed; z-index: 60; min-width: 11.5rem; padding: .3rem; display: flex; flex-direction: column; gap: 1px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.pal-menu[hidden] { display: none; }
.pal-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .6rem; border: 0; border-radius: 7px; background: transparent; color: var(--fg); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.pal-item:hover, .pal-item:focus-visible { background: var(--tint); outline: none; }
.pal-item[aria-current] { font-weight: 600; color: var(--accent); }
.pal-item[aria-current]::after { content: ""; margin-left: auto; width: .35rem; height: .6rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); }
.pal-dot { flex: none; width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.icon-btn { font: inherit; font-size: .85rem; padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Hero */
.intro { position: relative; overflow: hidden; padding: 6rem 0 4.5rem; background: linear-gradient(180deg, var(--hero-top), var(--bg)); }
.intro > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .intro { padding: 3.5rem 0 3rem; } }
.intro h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 650; margin: 0 0 .9rem; }
.lede { font-size: 1.5rem; line-height: 1.4; color: var(--muted); max-width: 40rem; letter-spacing: -.015em; margin-bottom: 1.2rem; }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; color: var(--muted); font-size: .98rem; margin: 0; }
.facts span:not(.sep) { display: inline-flex; align-items: center; gap: .45rem; }
.facts .i1 svg { color: var(--i1); } .facts .i2 svg { color: var(--i2); } .facts .i3 svg { color: var(--i3); }
.sep { opacity: .5; }
.links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 3.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--line); }
.stats dt { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--accent); }
.stats dd { margin: .3rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.45; max-width: 15rem; }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; gap: 1.2rem; } }

/* Sections */
section { border-top: 1px solid var(--line); padding: 4.5rem 0; }
section:nth-of-type(even) { background: var(--tint); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: -.03em; font-weight: 650; margin: 0 0 1.8rem; line-height: 1.1; }
h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.filters { display: flex; gap: .4rem; margin-bottom: 1.8rem; }
.filters button { font: inherit; font-size: .9rem; padding: .35rem 1rem; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.filters button:hover { color: var(--fg); border-color: var(--accent); }
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; align-items: stretch; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
@media (max-width: 1050px) { .three, .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .two, .three, .grid { grid-template-columns: 1fr; } }

.card { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 1.4rem 1.5rem; transition: border-color .15s, transform .15s; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.when { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.kind { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: .2rem 0 .7rem; }
.sub { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .9rem 0 0; }
.tags span { font-size: .8rem; padding: .15rem .6rem; border-radius: 6px; background: color-mix(in srgb, #9dbbc5 22%, var(--bg)); color: var(--fg); border: 0; }
h3 + .tags { margin-top: .8rem; }
.plain { list-style: none; padding: 0; margin: .8rem 0 0; }
.plain li { position: relative; padding-left: 1.1rem; }
.plain li::before { content: ""; position: absolute; left: 0; top: .7em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); }
.badges { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.badges img { width: 6rem; height: 6rem; }
.cols { columns: 2; column-gap: 1.6rem; }
.cols li { break-inside: avoid; }
@media (max-width: 1050px) and (min-width: 721px) { .cols { columns: 1; } }
@media (max-width: 480px) { .cols { columns: 1; } }

/* Contact */
.big { font-size: 1.6rem; line-height: 1.35; letter-spacing: -.02em; font-weight: 500; max-width: 30rem; margin-bottom: 1.4rem; }
.emailline { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; font-size: 1.1rem; }
.form label { display: block; font-size: .85rem; color: var(--muted); margin: .9rem 0 .3rem; }
.form label:first-child { margin-top: 0; }
.form input, .form textarea { width: 100%; padding: .65rem .8rem; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.form input:focus, .form textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); border-color: var(--accent); }
.form .btn { margin-top: 1.2rem; }

footer { border-top: 1px solid var(--line); padding: 2rem 0 2.6rem; color: var(--muted); font-size: .9rem; }
.foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

#toast { position: fixed; right: 1.5rem; bottom: 1.5rem; background: var(--fg); color: var(--bg); padding: .6rem 1rem; border-radius: 8px; font-size: .9rem; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
#toast.show { opacity: 1; transform: none; }


/* Languages: plain English name and level first; native script and CEFR as detail */
.summary { font-size: 1.25rem; line-height: 1.5; max-width: 46rem; margin: -.6rem 0 .8rem; letter-spacing: -.01em; }
.summary strong { font-weight: 600; }
.note { color: var(--muted); max-width: 44rem; margin: 0 0 1.8rem; font-size: .95rem; }
.lang { display: flex; flex-direction: column; gap: .1rem; }
.native { font-size: 2.1rem; line-height: 1.25; font-weight: 500; margin: 0; letter-spacing: -.01em; }
.names { margin: .15rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; color: var(--muted); }
.names .en { color: var(--fg); font-weight: 600; }
.en-self { display: none; }
:root[lang]:not([lang="en"]) .en-self { display: inline; }
.roman { color: var(--muted); }
.ipa { color: var(--i3); font-size: .9rem; }
.level { margin: .9rem 0 .55rem; display: flex; align-items: center; gap: .6rem; }
.word { font-weight: 600; color: var(--accent); }
.cefr { padding: .05rem .45rem; border-radius: 4px; background: color-mix(in srgb, var(--i3) 28%, var(--bg)); color: var(--muted); font-size: .75rem; font-weight: 600; cursor: help; }
.meter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.meter i { height: .45rem; border-radius: 2px; background: var(--line); }
.meter i.on { background: var(--accent); }
/* Skills as an editor-style card: dots, filename, line numbers, syntax colours, pill tags. */
.editor { border: 1px solid var(--ed-border); background: var(--ed-bg); border-radius: 10px; overflow: hidden; font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9rem; }
.titlebar { display: flex; align-items: center; gap: .9rem; padding: .55rem .9rem; background: var(--ed-bar); border-bottom: 1px solid var(--ed-border); }
.dots { display: inline-flex; gap: .35rem; }
.dots i { width: .6rem; height: .6rem; border-radius: 50%; }
.dots i:nth-child(1) { background: var(--syn-l); } .dots i:nth-child(2) { background: var(--syn-k); } .dots i:nth-child(3) { background: var(--syn-s); }
.fname { color: var(--muted); font-size: .8rem; }
.code { padding: .9rem 0 1.1rem; counter-reset: ln; color: var(--fg); }
.l { display: block; position: relative; padding: 0 1.4rem 0 4rem; line-height: 2.2rem; min-height: 2.2rem; counter-increment: ln; }
.l::before { content: counter(ln); position: absolute; left: 0; width: 2.9rem; text-align: right; color: var(--ed-ln); user-select: none; }
.ind { padding-left: 5.6rem; }
.blank { min-height: 2.2rem; }
.k { color: var(--syn-k); font-weight: 500; }
.c { color: var(--syn-c); font-style: italic; }
.lb { color: var(--syn-l); font-weight: 600; }
.toks { line-height: 2.2rem; }
.t { display: inline-block; margin: 0 .2rem; padding: 0 .75rem; line-height: 1.6; vertical-align: middle; border-radius: 999px; color: var(--syn-s); background: color-mix(in srgb, var(--syn-s) 10%, transparent); border: 1px solid color-mix(in srgb, var(--syn-s) 38%, transparent); }
@media (max-width: 560px) { .editor { font-size: .8rem; } .l { padding-left: 3rem; } .ind { padding-left: 4rem; } .l::before { width: 2.1rem; } }

/* ---------- Theme decorations (CSS only, no images) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* snow falls by moving a taller layer (transform only, runs on the compositor); the old background-position animation repainted the whole hero every frame */
  @keyframes snow { from { transform: translateY(0); } to { transform: translateY(600px); } }
  @keyframes hover-ufo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
}

/* Alien: a UFO hovering over the hero with a tractor beam, stars, monospace type */
:root[data-theme="alien"] body { font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; }
:root[data-theme="alien"] h2, :root[data-theme="alien"] .kind, :root[data-theme="alien"] .pill { text-transform: uppercase; letter-spacing: .12em; }
:root[data-theme="alien"] h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
:root[data-theme="alien"][data-mode="dark"] body { background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 38% 62%, #cfc 50%, transparent 52%), radial-gradient(1.4px 1.4px at 71% 26%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 86% 78%, #b9f 50%, transparent 52%), radial-gradient(1px 1px at 55% 9%, #fff 50%, transparent 52%); background-size: 340px 340px, 270px 270px, 410px 410px, 300px 300px, 230px 230px; background-attachment: fixed; }
:root[data-theme="alien"][data-mode="dark"] h1 { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); }
:root[data-theme="alien"] .intro::after { content: ""; position: absolute; right: 9%; top: 2.2rem; width: 20rem; height: 120%; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 38%, transparent), transparent 85%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); pointer-events: none; }
:root[data-theme="alien"] .intro::before { content: ""; position: absolute; right: calc(9% + 7.2rem); top: 1.4rem; width: 5.6rem; height: 1.5rem; border-radius: 50%; background: linear-gradient(180deg, #d6dbe8, #7b84a0 55%, #444a66); box-shadow: 0 -.75rem 0 -.2rem color-mix(in srgb, var(--i3) 80%, #fff), 0 0 1.6rem var(--accent); z-index: 1; }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="alien"] .intro::before { animation: hover-ufo 4s ease-in-out infinite; } }
@media (max-width: 900px) { :root[data-theme="alien"] .intro::before, :root[data-theme="alien"] .intro::after { display: none; } }
:root[data-theme="alien"] .brand::before { content: ""; display: inline-block; -webkit-mask: none; mask: none; vertical-align: baseline; margin-right: .6rem; width: .85rem; height: 1.05rem; border-radius: 50% 50% 46% 46%; background: radial-gradient(ellipse .22rem .12rem at 30% 48%, #000 60%, transparent 62%), radial-gradient(ellipse .22rem .12rem at 70% 48%, #000 60%, transparent 62%), var(--accent); box-shadow: 0 0 .6rem var(--accent); }
:root[data-theme="alien"] .card:hover { box-shadow: 0 0 1.2rem color-mix(in srgb, var(--accent) 35%, transparent); }

/* Halloween (dark only): harvest moon, pumpkin glow */
:root[data-theme="halloween"] .intro::before { content: ""; position: absolute; right: 10%; top: 1.5rem; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #ffd9a0, #ff9a33 55%, #c2410c); box-shadow: 0 0 5rem 1rem color-mix(in srgb, var(--accent) 45%, transparent); opacity: .9; }
:root[data-theme="halloween"] .intro::after { content: ""; position: absolute; right: calc(10% + 2.2rem); top: 3.2rem; width: 4.6rem; height: 2.4rem; background: #0b080f; clip-path: polygon(50% 100%, 45% 72%, 36% 88%, 28% 58%, 14% 66%, 0 34%, 20% 40%, 34% 14%, 44% 42%, 50% 26%, 56% 42%, 66% 14%, 80% 40%, 100% 34%, 86% 66%, 72% 58%, 64% 88%, 55% 72%); }
@media (max-width: 900px) { :root[data-theme="halloween"] .intro::before, :root[data-theme="halloween"] .intro::after { display: none; } }
:root[data-theme="halloween"] h1 { text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-theme="halloween"] .card:hover { box-shadow: 0 0 1.2rem color-mix(in srgb, var(--accent) 30%, transparent); }
:root[data-theme="halloween"] .top { border-bottom: 3px solid var(--accent); }

/* Christmas: candy-cane edge under the nav, snow in the hero */
:root[data-theme="christmas"] .top { border-bottom: 5px solid transparent; border-image: repeating-linear-gradient(135deg, var(--i2) 0 14px, #ffffff 14px 28px, var(--i1) 28px 42px) 1; }
:root[data-theme="christmas"] .intro::before { content: ""; position: absolute; left: 0; right: 0; top: -600px; height: calc(100% + 600px); pointer-events: none; background-image: radial-gradient(2px 2px at 20px 30px, var(--snow, #fff) 50%, transparent 52%), radial-gradient(3px 3px at 90px 120px, var(--snow, #fff) 50%, transparent 52%), radial-gradient(2px 2px at 160px 60px, var(--snow, #fff) 50%, transparent 52%); background-size: 150px 150px, 200px 200px, 300px 300px; opacity: .9; }
:root[data-theme="christmas"][data-mode="light"] { --snow: #9db7c9; }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="christmas"] .intro::before { animation: snow 20s linear infinite; will-change: transform; } }

/* Thanksgiving: autumn stripe, serif headings, falling leaves (js/fx-leaves.js) */
:root[data-theme="thanksgiving"] .top { border-bottom: 5px solid transparent; border-image: linear-gradient(90deg, #7c2d12, #b45309, #d97706, #a16207, #7c2d12) 1; }
:root[data-theme="thanksgiving"] .intro { background: radial-gradient(60rem 22rem at 85% -10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), linear-gradient(180deg, var(--hero-top), var(--bg)); }
:root[data-theme="thanksgiving"] h1, :root[data-theme="thanksgiving"] h2 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
:root[data-theme="thanksgiving"] h1 { font-weight: 700; }
:root[data-theme="thanksgiving"] .card:hover { box-shadow: 0 0 1.2rem color-mix(in srgb, var(--accent) 28%, transparent); }
:root[data-theme="thanksgiving"][data-mode="dark"] h1 { text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); }

/* Diwali: diya glow and sparkles, gold-magenta stripe */
:root[data-theme="diwali"] .top { border-bottom: 5px solid transparent; border-image: linear-gradient(90deg, var(--i3), var(--accent), var(--i1), var(--accent), var(--i3)) 1; }
:root[data-theme="diwali"] .intro { background: radial-gradient(28rem 14rem at 82% 8%, color-mix(in srgb, var(--lime) 40%, transparent), transparent 70%), radial-gradient(22rem 12rem at 12% 90%, color-mix(in srgb, var(--i1) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--hero-top), var(--bg)); }
:root[data-theme="diwali"] .intro::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 14% 22%, var(--lime) 50%, transparent 52%), radial-gradient(2px 2px at 64% 14%, var(--i1) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 88% 52%, var(--lime) 50%, transparent 52%), radial-gradient(2px 2px at 36% 70%, var(--i3) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 76% 84%, var(--lime) 50%, transparent 52%), radial-gradient(2px 2px at 48% 38%, var(--lime) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 6% 56%, var(--i1) 50%, transparent 52%), radial-gradient(2px 2px at 93% 24%, var(--i3) 50%, transparent 52%); }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="diwali"] .intro::before { animation: twinkle 3s ease-in-out infinite; } }

/* ---------- Yakuake-style drop-down terminal (js/terminal.js; exists only with JavaScript) ---------- */
.term { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; flex-direction: column; height: var(--term-h, 46vh); min-height: 18rem; max-height: calc(100vh - 3rem);
  background: rgba(11, 16, 14, .95); color: #cfd8d3; font: 13.5px/1.55 "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  border-bottom: 2px solid #86A2B1; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); backdrop-filter: blur(8px);
  transform: translateY(-104%); visibility: hidden; }
.term.open { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .term { transition: transform .22s ease-out, visibility 0s linear .22s; }
  .term.open { transition: transform .22s ease-out, visibility 0s; }
}
.term-out { flex: 1; overflow-y: auto; padding: .9rem 1.1rem .3rem; white-space: pre-wrap; word-break: break-word; }
.term .tl { min-height: 1.55em; }
.term .b { font-weight: 700; color: #eef3f0; }
.term .ok { color: #9fd3b0; }
.term .err { color: #ff9a9a; }
.term .u { color: #9dbbc5; } .term .p { color: #86A2B1; } .term .d { color: #e6ede9; margin: 0 .35rem 0 .1rem; }
.term .art { white-space: pre; font-weight: 700; line-height: 1.15; }
.term .a0 { color: #c3d6dd; } .term .a1 { color: #9dbbc5; } .term .a2 { color: #86A2B1; } .term .a3 { color: #6f8f84; } .term .a4 { color: #8a9a70; }
.term-in { display: flex; align-items: center; gap: .3rem; padding: .2rem 1.1rem .7rem; }
.term-prompt { white-space: nowrap; cursor: text; }
.term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #f2f6f3; font: inherit; caret-color: #86A2B1; padding: 0; }
.term-tabs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .3rem .9rem; background: rgba(255, 255, 255, .05); border-top: 1px solid rgba(255, 255, 255, .08); font-size: .75rem; }
.term-tab { padding: .1rem .8rem; border-radius: 4px 4px 0 0; background: rgba(134, 162, 177, .25); color: #eef3f0; }
.term-hint { color: #7f8f89; margin-right: auto; margin-left: 1rem; }
.term-x { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.5rem; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 5px; background: transparent; color: #cfd8d3; cursor: pointer; }
.term-x:hover, .term-x:focus-visible { color: #fff; border-color: #ff9a9a; background: rgba(255, 154, 154, .15); outline: none; }
.term-grip { height: 8px; cursor: ns-resize; background: linear-gradient(transparent 3px, rgba(255, 255, 255, .18) 3px 5px, transparent 5px); touch-action: none; }
.term-btn.on { color: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) { .term { font-size: 12.5px; } .term-input { font-size: 16px; } .term-hint { display: none; } }
.term .dim { color: #7f8f89; }
.term .c1 { color: #3a403d; } .term .c2 { color: #e57373; } .term .c3 { color: #7fb88f; } .term .c4 { color: #d9b86a; }
.term .c5 { color: #86A2B1; } .term .c6 { color: #b58fb8; } .term .c7 { color: #8ec5c0; } .term .c8 { color: #e6ede9; }
.term .tl span { white-space: pre; }

/* ---------- Projects, certifications and clubs: same editor/terminal vibe as Skills, plain HTML + CSS (no JS needed) ---------- */
.proj { position: relative; display: flex; flex-direction: column; overflow: hidden; font-size: .97rem; }
.proj .tab { display: flex; align-items: center; gap: .8rem; margin: -1.4rem -1.5rem 1.1rem; padding: .5rem .9rem; background: var(--ed-bar); border-bottom: 1px solid var(--ed-border); }
.proj .fname { font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; }
.proj .kind { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; padding: .1rem .6rem .1rem .5rem; border-radius: 999px; font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.proj .kind::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.proj[data-cat="academic"] .kind { color: var(--i3); background: color-mix(in srgb, var(--i3) 12%, transparent); border-color: color-mix(in srgb, var(--i3) 40%, transparent); }
.proj .when { font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; }
.proj ul { list-style: none; padding: 0; }
.proj li { position: relative; padding-left: 1.2rem; }
.proj li::before { content: ">"; position: absolute; left: 0; color: var(--accent); font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; font-weight: 600; }
.proj .tags { margin-top: auto; padding-top: .9rem; }
.proj .tags span { font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .74rem; padding: .1rem .6rem; border-radius: 999px; background: transparent; color: var(--muted); border: 1px solid var(--line); transition: color .15s, border-color .15s; }
.proj:hover .tags span { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.proj:hover .tags span:hover { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .proj:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.4rem -.8rem color-mix(in srgb, var(--accent) 45%, transparent); } }

.more h3 { font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.more .badges { margin: 1rem 0 .4rem; }
.more .badges img { width: 5.5rem; height: 5.5rem; padding: .5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.items { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .55rem; }
.items li { display: flex; align-items: center; gap: .8rem; margin: 0; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--tint) 55%, var(--card)); transition: border-color .15s; }
.items li:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.items .sub { white-space: nowrap; }
.mark { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--accent); }
.done .mark { background: var(--accent) no-repeat center / .7rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.prog .mark { background: conic-gradient(var(--accent) 0 50%, transparent 0); }
.aud .mark { border-style: dotted; border-color: var(--i3); }
.mono { flex: none; min-width: 2.9rem; text-align: center; padding: .1rem .45rem; border-radius: 999px; font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; font-weight: 600; color: var(--syn-s); background: color-mix(in srgb, var(--syn-s) 10%, transparent); border: 1px solid color-mix(in srgb, var(--syn-s) 38%, transparent); }

/* Top bar shared by project cards, the Skills editor and the Education cards. Two colours per theme and mode. */
:root { --bar-a: #137547; --bar-b: #86A2B1; }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) { --bar-a: #beff8b; --bar-b: #9dbbc5; } }
:root[data-mode="dark"] { --bar-a: #beff8b; --bar-b: #9dbbc5; }
:root[data-theme="ocean"][data-mode="light"] { --bar-a: #0a6f8c; --bar-b: #e0b96a; }
:root[data-theme="ocean"][data-mode="dark"] { --bar-a: #4dd6e8; --bar-b: #e6c58a; }
:root[data-theme="paper"][data-mode="light"] { --bar-a: #8a4b12; --bar-b: #e0b050; }
:root[data-theme="paper"][data-mode="dark"] { --bar-a: #e0a96d; --bar-b: #9fbf9a; }
:root[data-theme="alien"][data-mode="light"] { --bar-a: #5b21b6; --bar-b: #c026d3; }
:root[data-theme="alien"][data-mode="dark"] { --bar-a: #7dff3a; --bar-b: #19e6c1; }
:root[data-theme="christmas"][data-mode="light"] { --bar-a: #14673b; --bar-b: #c1121f; }
:root[data-theme="christmas"][data-mode="dark"] { --bar-a: #4fbf7a; --bar-b: #ff5c66; }
:root[data-theme="thanksgiving"][data-mode="light"] { --bar-a: #7c2d12; --bar-b: #d97706; }
:root[data-theme="thanksgiving"][data-mode="dark"] { --bar-a: #f59e0b; --bar-b: #e07a3f; }
:root[data-theme="diwali"][data-mode="light"] { --bar-a: #ea580c; --bar-b: #f5b700; }
:root[data-theme="diwali"][data-mode="dark"] { --bar-a: #ffb703; --bar-b: #ff7a1a; }
:root[data-theme="halloween"][data-mode="dark"] { --bar-a: #ff7a00; --bar-b: #a855f7; }
.proj, .editor, .edu { position: relative; overflow: hidden; }
.proj::before, .editor::before, .edu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1; background: linear-gradient(90deg, var(--bar-a), var(--bar-b)); }
.proj[data-cat="academic"]::before { background: linear-gradient(90deg, var(--bar-b), var(--bar-a)); }

/* Education: one large card. The university sits in an embedded card at the top left (a third of the width)
   and the coursework wraps around it in an L shape: beside it first, then full width underneath. */
.edu { position: relative; overflow: hidden; padding: 1.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.8rem; row-gap: .2rem; grid-auto-rows: minmax(2.9rem, auto); align-items: start; }
.edu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--bar-a), var(--bar-b)); }
.edu-uni { grid-column: 1; grid-row: 1 / span 5; align-self: stretch; display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.2rem; background: var(--tint); border: 1px solid var(--line); border-radius: 10px; }
.edu-uni h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.edu-uni .when { align-self: flex-start; font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: var(--accent); padding: .15rem .7rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.edu-facts { display: flex; flex-direction: column; gap: .5rem; margin: .3rem 0 0; color: var(--muted); }
.edu-facts > span { display: inline-flex; align-items: center; gap: .5rem; }
.edu-facts .i1 svg { color: var(--i1); } .edu-facts .i2 svg { color: var(--i2); } .edu-facts .i3 svg { color: var(--i3); }
.edu-h { grid-column: 2 / -1; grid-row: 1; align-self: end; margin: 0 0 .5rem; font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.edu-list { display: contents; }
.edu-list li { break-inside: avoid; padding-top: .3rem; padding-bottom: .3rem; border-bottom: 1px dashed var(--line); }
.edu-list li.now { font-weight: 600; }
.edu-list li.now::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
@media (max-width: 900px) {
  .edu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-uni, .edu-h { grid-column: 1 / -1; grid-row: auto; }
  .edu-h { margin-top: 1.2rem; }
}
@media (max-width: 560px) { .edu { grid-template-columns: 1fr; } }

/* ---------- Announcements (js/announce.js) and the season pop-up (js/main.js) ---------- */
.ann { font-size: .92rem; border-bottom: 1px solid var(--line); }
.ann-in { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; padding-top: .55rem; padding-bottom: .55rem; }
.ann a { font-weight: 600; text-decoration: underline; white-space: nowrap; }
.ann-x { margin-left: auto; background: none; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .3rem; border-radius: 4px; }
.ann-x:hover, .ann-x:focus-visible { background: color-mix(in srgb, currentColor 18%, transparent); }
.ann-info { background: var(--tint); color: var(--fg); }
.ann-info a { color: var(--accent); }
.ann-good { background: var(--accent); color: var(--on-accent); border-bottom-color: transparent; }
.ann-warn { background: #f5c542; color: #2b2000; border-bottom-color: transparent; }
#season-pop { position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 90; max-width: min(26rem, calc(100vw - 3rem)); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .85rem 1rem; background: var(--card); color: var(--fg); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
#season-pop span { flex: 1 1 100%; }

/* ---------- Effects canvas (js/fx.js). Only exists while an effect is running ---------- */
canvas#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
:root.fx-on main, :root.fx-on footer { position: relative; z-index: 1; }
/* Let the effect show through the page backgrounds (cards stay solid and sit in front of it) */
:root.fx-on .intro { background: linear-gradient(180deg, color-mix(in srgb, var(--hero-top) 55%, transparent), transparent); }
:root.fx-on section:nth-of-type(even) { background: color-mix(in srgb, var(--tint) 55%, transparent); }
/* Cheaper header while an effect runs: no live blur behind it */
:root.fx-on .top { backdrop-filter: none; background: color-mix(in srgb, var(--bg) 96%, transparent); }
/* The CSS snow is only the no-JavaScript fallback */
:root.fx-on[data-theme="christmas"] .intro::before { display: none; }
/* Diwali keeps its glowing balls while the flame canvas shows through */
:root.fx-on[data-theme="diwali"] .intro { background: radial-gradient(28rem 14rem at 82% 8%, color-mix(in srgb, var(--lime) 40%, transparent), transparent 70%), radial-gradient(22rem 12rem at 12% 90%, color-mix(in srgb, var(--i1) 22%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--hero-top) 45%, transparent), transparent); }

/* ---------- Ocean: light = the beach, dark = the deep ---------- */
:root[data-theme="ocean"] .intro { background: linear-gradient(180deg, var(--hero-top) 0%, color-mix(in srgb, var(--hero-top) 35%, var(--bg)) 62%, var(--bg) 100%); }
:root[data-theme="ocean"][data-mode="light"] .top { border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, #86d0e2, #0a6f8c, #e3c887, #d9825b) 1; }
:root[data-theme="ocean"][data-mode="dark"] .top { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #0a3a50, #4dd6e8, #7be8d4, #0a3a50) 1; }
:root[data-theme="ocean"] .card:hover { box-shadow: 0 0 1.2rem color-mix(in srgb, var(--accent) 25%, transparent); }
/* The scenery sits behind the page, so let it show through the section backgrounds (cards stay solid) */
:root[data-theme="ocean"] main, :root[data-theme="ocean"] footer { position: relative; z-index: 1; }
:root[data-theme="ocean"] section:nth-of-type(even) { background: color-mix(in srgb, var(--tint) 55%, transparent); }

/* The fish (js/fx-ocean.js) swims in front of the page */
:root[data-theme="ocean"] canvas#fx { z-index: 20; }
/* Deep ocean (dark): a faint blue glow low down so the shape against it can be made out. Pure CSS, so it works without JavaScript. */
:root[data-theme="ocean"][data-mode="dark"] body { background: linear-gradient(180deg, transparent 50%, rgba(25, 100, 125, .30)) fixed, var(--bg); }
/* Reaper-style leviathan, seen head-on as it rises from below: four hooked mandibles, a crested skull, two eyes that
   open now and then (assets/scenery/leviathan.svg, regenerate with tools/make-leviathan.py). Silhouette only. */
:root[data-theme="ocean"][data-mode="dark"] { --lw: 46vw; --ll: 30vw; --lb: -29vh; }
@media (max-width: 700px) { :root[data-theme="ocean"][data-mode="dark"] { --lw: 96vw; --ll: 2vw; --lb: -21vh; } }
:root[data-theme="ocean"][data-mode="dark"] body::before { content: ""; position: fixed; left: var(--ll); bottom: var(--lb); width: var(--lw); aspect-ratio: 600 / 460; z-index: 0; pointer-events: none;
  background: url("../assets/scenery/leviathan.svg") no-repeat center / 100% 100%; }
/* eyes: a pair 100/600 of the figure wide, centred, 156/460 down from its top */
:root[data-theme="ocean"][data-mode="dark"] body::after,
:root[data-theme="ocean"][data-mode="dark"]::after { content: ""; position: fixed; width: calc(var(--lw) * .1667 + 1.8rem); height: 1.1rem; z-index: 0; pointer-events: none; opacity: 0;
  left: calc(var(--ll) + var(--lw) * .5 - (var(--lw) * .1667 + 1.8rem) / 2);
  bottom: calc(var(--lb) + var(--lw) * .7667 * .66 - .55rem);
  background: radial-gradient(circle at .9rem 50%, #e9fbff 0 .1rem, rgba(150, 230, 240, .55) .22rem, transparent .7rem), radial-gradient(circle at calc(100% - .9rem) 50%, #e9fbff 0 .1rem, rgba(150, 230, 240, .55) .22rem, transparent .7rem); }
/* Brighter glow over the eyes when the fish swims past its face (js/fx-ocean.js sets html[data-lit]) */
:root[data-theme="ocean"][data-mode="dark"]::after { transition: opacity .6s ease; background: radial-gradient(circle at .9rem 50%, rgba(220, 250, 255, .95) 0 .12rem, rgba(150, 230, 240, .55) .3rem, transparent .9rem), radial-gradient(circle at calc(100% - .9rem) 50%, rgba(220, 250, 255, .95) 0 .12rem, rgba(150, 230, 240, .55) .3rem, transparent .9rem); }
:root[data-theme="ocean"][data-mode="dark"][data-lit]::after { opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes lurk { from { transform: translate(-14vw, 3vh); } to { transform: translate(18vw, 0); } }
  @keyframes watch { 0%, 62%, 100% { opacity: 0; } 67%, 90% { opacity: .85; } 94% { opacity: 0; } }
  :root[data-theme="ocean"][data-mode="dark"] body::before { animation: lurk 90s ease-in-out infinite alternate; will-change: transform; }
  :root[data-theme="ocean"][data-mode="dark"] body::after { animation: lurk 90s ease-in-out infinite alternate, watch 26s ease-in-out infinite; will-change: transform; }
  :root[data-theme="ocean"][data-mode="dark"]::after { animation: lurk 90s ease-in-out infinite alternate; will-change: transform; }
}

/* Beach (light): just the sky-to-sand gradient and the crabs (js/crabs.js). */
:root[data-perf="lite"] body::before, :root[data-perf="off"] body::before, :root[data-perf="lite"] body::after, :root[data-perf="off"] body::after, :root[data-perf="lite"]::after, :root[data-perf="off"]::after { animation: none !important; }

/* ---------- Christmas (light mode): frost, pine and berry red, with a string of lights ---------- */
:root[data-theme="christmas"][data-mode="light"] .intro { background: linear-gradient(180deg, color-mix(in srgb, #14673b 32%, #fff) 0%, var(--bg) 100%); }
:root[data-theme="christmas"][data-mode="light"] .intro::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.6rem; pointer-events: none;
  background:
    radial-gradient(circle at 1rem 1.25rem, #e63946 0 .34rem, transparent .4rem) 0 0 / 8rem 2.6rem repeat-x,
    radial-gradient(circle at 3rem 1.55rem, #f5c542 0 .34rem, transparent .4rem) 0 0 / 8rem 2.6rem repeat-x,
    radial-gradient(circle at 5rem 1.25rem, #2fa866 0 .34rem, transparent .4rem) 0 0 / 8rem 2.6rem repeat-x,
    radial-gradient(circle at 7rem 1.55rem, #3b82f6 0 .34rem, transparent .4rem) 0 0 / 8rem 2.6rem repeat-x; }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="christmas"][data-mode="light"] .intro::after { animation: twinkle 2.4s ease-in-out infinite; } }
:root[data-theme="christmas"][data-mode="light"] section { border-top: 3px solid transparent; border-image: repeating-linear-gradient(135deg, var(--i2) 0 10px, #fff 10px 20px, var(--i1) 20px 30px) 1; }
:root[data-theme="christmas"][data-mode="light"] h2::after { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-left: .7rem; border-radius: 50%; background: var(--i2); box-shadow: .95rem 0 0 var(--i1), 1.9rem 0 0 var(--i3); vertical-align: middle; }
:root[data-theme="christmas"][data-mode="light"] .card:hover { box-shadow: 0 0 1rem color-mix(in srgb, var(--i2) 25%, transparent); }

/* ---------- Diwali: dotted dividers between sections; the glowing balls and sparkles are in the rules above ---------- */
:root[data-theme="diwali"] section { position: relative; }
:root[data-theme="diwali"] section::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 6px; pointer-events: none; opacity: .85;
  background:
    radial-gradient(circle at 6px 3px, var(--accent) 0 2px, transparent 2.5px) 0 0 / 18px 6px repeat-x,
    radial-gradient(circle at 15px 3px, var(--i1) 0 1.5px, transparent 2px) 0 0 / 18px 6px repeat-x; }
:root[data-theme="diwali"] .card:hover { box-shadow: 0 0 1.4rem color-mix(in srgb, var(--accent) 30%, transparent); }

/* Low-power mode (set by js/fx.js on weak machines, or with ?fx=lite / ?fx=off): the decorative CSS animations stop too */
:root[data-perf="lite"] .intro::before, :root[data-perf="lite"] .intro::after,
:root[data-perf="off"] .intro::before, :root[data-perf="off"] .intro::after { animation: none !important; will-change: auto; }
:root[data-perf="off"] .top, :root[data-perf="lite"] .top { backdrop-filter: none; }

/* ---------- Beach crabs (js/crabs.js): little crabs that scuttle along the bottom of the window, like Colab's crab mode ---------- */
.crabs { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: 21; pointer-events: none; overflow: hidden; }
.crab { position: absolute; left: 0; bottom: 0; will-change: transform; }
.crab svg { display: block; width: 100%; height: auto; overflow: visible; }
.crab .leg-a, .crab .leg-b, .crab .claw-l, .crab .claw-r { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes leg-a { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
  @keyframes leg-b { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } }
  @keyframes claw-wave { from { transform: rotate(-12deg); } to { transform: rotate(10deg); } }
  .crab.walk .leg-a { animation: leg-a .22s linear infinite alternate; transform-origin: 18px 25px; }
  .crab.walk .leg-b { animation: leg-b .22s linear infinite alternate; transform-origin: 18px 25px; }
  .crab.walk .leg-a.r, .crab.walk .leg-b.r { transform-origin: 42px 25px; }
  .crab.run .leg-a, .crab.run .leg-b { animation-duration: .08s; }
  .crab.wave .claw-l { animation: claw-wave .5s ease-in-out infinite alternate; transform-origin: 14px 20px; }
  .crab.wave .claw-r { animation: claw-wave .5s ease-in-out infinite alternate-reverse; transform-origin: 46px 20px; }
}