/* ===== themes =====
   style.css is the default theme ("bubbles"). Every other theme lives here, scoped by html[data-theme="<id>"], so a
   switch is instant (no reload) and an unknown id just falls back to bubbles. To add one: register it in THEMES in
   settings.py (label + optional quotes / click emoji / tab icon), then restyle the variables and pieces below. */

/* theme-specific logo in the header: each theme shows its own .logo-<id> svg, bubbles is the fallback */
.cutie.logo-miku{display:none}
html[data-theme="miku"] .cutie.logo-bubbles{display:none}
html[data-theme="miku"] .cutie.logo-miku{display:block}

/* ===== Miku: teal #39c5bb twin-tails, a pink accent, charcoal stage, floating notes, VU-meter bars =====
   Fan-made and unofficial; colours inspired by Hatsune Miku (Crypton Future Media). No artwork included:
   add your own mascot per theme on the settings page. */
html[data-theme="miku"]{--bg:#e5f3f2;--card:rgba(255,255,255,.62);--fg:#1d3136;--mute:#5d7a7f;--line:#c9e2df;--up:#1fa98e;--down:#e12885;
  --warn:#e39800;--acc:#39c5bb;--acc2:#9fe1db;--ink:#11776f;--bar:#d3e8e5;--coat:#e12885;--eye:#1eb4c8;--glow:rgba(57,197,187,.38);
  --shadow:0 8px 24px -12px rgba(16,92,90,.38)}
@media (prefers-color-scheme:dark){html[data-theme="miku"]{--bg:#0a1113;--card:rgba(17,29,32,.64);--fg:#e1f5f3;--mute:#86abab;--line:#1d3437;
  --up:#3fd9b1;--down:#ff4f9a;--warn:#ffc233;--acc:#39c5bb;--acc2:#1b6a65;--ink:#6fe4da;--bar:#17292c;--coat:#ff3d96;--eye:#4ad7e8;
  --glow:rgba(57,197,187,.30);--shadow:0 10px 28px -14px rgba(0,0,0,.75)}}

/* the stage: teal spotlight, pink rim light, and a faint grid like a concert floor */
html[data-theme="miku"] body{background:
  radial-gradient(1100px 620px at 8% -12%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 62%),
  radial-gradient(800px 520px at 108% 8%,color-mix(in srgb,var(--coat) 16%,transparent),transparent 60%),
  radial-gradient(1200px 500px at 50% 118%,color-mix(in srgb,var(--eye) 16%,transparent),transparent 65%),
  repeating-linear-gradient(0deg,transparent 0 39px,color-mix(in srgb,var(--acc) 7%,transparent) 39px 40px),
  repeating-linear-gradient(90deg,transparent 0 39px,color-mix(in srgb,var(--acc) 7%,transparent) 39px 40px),var(--bg);background-attachment:fixed}

/* header: twin-tail ribbon underneath, an "01" badge on the title, a little equalizer by the clock */
html[data-theme="miku"] header::after{height:4px;background:linear-gradient(90deg,var(--acc),var(--acc2),var(--coat),var(--acc2),var(--acc),var(--eye),var(--acc));
  background-size:50% 100%;box-shadow:0 2px 12px var(--glow)}
html[data-theme="miku"] #site-title{font-family:Orbitron,Fredoka,sans-serif;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(90deg,var(--ink),var(--acc) 60%,var(--eye));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="miku"] #site-title::after{content:"01";display:inline-block;margin-left:7px;padding:1px 5px 0;border-radius:5px;transform:rotate(-8deg) translateY(-2px);
  font:800 10px/1.4 Orbitron,sans-serif;color:#fff;background:var(--coat);-webkit-text-fill-color:#fff;box-shadow:0 2px 8px -2px var(--coat)}
/* the equalizer: five bars scaled with transform (compositor only; animating background-size restyled and repainted
   it 60 times a second) */
html[data-theme="miku"] #p-time .eq{display:inline-flex;align-items:flex-end;gap:2px;width:23px;height:13px;margin-right:9px;vertical-align:-1px}
html[data-theme="miku"] .eq i{width:3px;height:100%;background:linear-gradient(var(--eye),var(--acc));transform-origin:50% 100%;
  animation:1.6s ease-in-out infinite alternate}
html[data-theme="miku"] .eq i:nth-child(3){background:linear-gradient(var(--coat),var(--acc))}
html[data-theme="miku"] .eq i:nth-child(1){animation-name:miku-eq1}
html[data-theme="miku"] .eq i:nth-child(2){animation-name:miku-eq2}
html[data-theme="miku"] .eq i:nth-child(3){animation-name:miku-eq3}
html[data-theme="miku"] .eq i:nth-child(4){animation-name:miku-eq4}
html[data-theme="miku"] .eq i:nth-child(5){animation-name:miku-eq5}
@keyframes miku-eq1{0%{transform:scaleY(.4)}25%{transform:scaleY(.85)}50%{transform:scaleY(.55)}75%{transform:scaleY(.95)}100%{transform:scaleY(.3)}}
@keyframes miku-eq2{0%{transform:scaleY(.8)}25%{transform:scaleY(.35)}50%{transform:scaleY(1)}75%{transform:scaleY(.6)}100%{transform:scaleY(.9)}}
@keyframes miku-eq3{0%{transform:scaleY(.55)}25%{transform:scaleY(1)}50%{transform:scaleY(.4)}75%{transform:scaleY(.8)}100%{transform:scaleY(.65)}}
@keyframes miku-eq4{0%{transform:scaleY(.95)}25%{transform:scaleY(.5)}50%{transform:scaleY(.75)}75%{transform:scaleY(.3)}100%{transform:scaleY(1)}}
@keyframes miku-eq5{0%{transform:scaleY(.3)}25%{transform:scaleY(.7)}50%{transform:scaleY(.95)}75%{transform:scaleY(.5)}100%{transform:scaleY(.4)}}
html[data-theme="miku"] body.wall #p-time{font-family:Orbitron,Fredoka,sans-serif;font-weight:700;color:var(--ink);letter-spacing:.03em}

/* cards: glassy panels with a teal → pink top ribbon and a soft teal rim */
html[data-theme="miku"] section{border-color:color-mix(in srgb,var(--acc) 22%,var(--line));
  box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,#fff 35%,transparent)}
html[data-theme="miku"] section::before{height:3px;background:linear-gradient(90deg,var(--acc) 0 28%,var(--eye) 58%,color-mix(in srgb,var(--coat) 75%,transparent) 86%,transparent)}
html[data-theme="miku"] h2::before{content:"♪";background:none;border-radius:0;width:auto;height:auto;top:-2px;left:1px;
  font:700 16px/1 "M PLUS Rounded 1c",sans-serif;color:var(--acc);text-shadow:0 0 10px var(--glow)}
html[data-theme="miku"] section:nth-of-type(3n) h2::before{content:"♫";color:var(--coat);text-shadow:0 0 10px color-mix(in srgb,var(--coat) 35%,transparent)}
html[data-theme="miku"] .kpi{border-color:color-mix(in srgb,var(--acc) 22%,var(--line))}
html[data-theme="miku"] .kpi:hover{box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent),0 0 18px -4px var(--glow)}
html[data-theme="miku"] .kpi.ok::before{background:linear-gradient(180deg,var(--acc),var(--eye))}
html[data-theme="miku"] .box,html[data-theme="miku"] .stream{border-color:color-mix(in srgb,var(--acc) 18%,var(--line))}

/* meters: VU-meter segments in teal → cyan; Plex progress runs teal → pink */
html[data-theme="miku"] .meter{border-radius:4px}
html[data-theme="miku"] .meter i{border-radius:3px;background:
  repeating-linear-gradient(90deg,transparent 0 7px,color-mix(in srgb,var(--bg) 65%,transparent) 7px 9px),linear-gradient(90deg,var(--acc),var(--eye));
  box-shadow:0 0 10px -2px var(--glow)}
html[data-theme="miku"] .bar i{background:linear-gradient(90deg,var(--acc),var(--eye) 60%,var(--coat))}
/* the live window's 4px per-thread bars: segments that thin read as dashes, so a plain gradient there */
html[data-theme="miku"] .lv-bars .meter i{background:linear-gradient(90deg,var(--acc),var(--eye));box-shadow:none}
html[data-theme="miku"] .lv-bars .meter i.warn{background:var(--warn)}html[data-theme="miku"] .lv-bars .meter i.crit{background:var(--down)}
html[data-theme="miku"] .cores i b{background:repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--bg) 55%,transparent) 3px 4px),
  linear-gradient(0deg,var(--acc),var(--eye) 70%,var(--coat))}

/* services, buttons, chips, tabs */
html[data-theme="miku"] .app:hover{background:color-mix(in srgb,var(--acc) 13%,transparent);border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  box-shadow:0 0 16px -6px var(--glow)}
html[data-theme="miku"] .app .ic .lt{background:linear-gradient(135deg,var(--acc),var(--coat))}
html[data-theme="miku"] button.ok{background:linear-gradient(135deg,var(--acc),var(--eye));color:#06312e}
html[data-theme="miku"] .tabs button.on,html[data-theme="miku"] #wall-btn[aria-pressed=true]{background:linear-gradient(135deg,var(--acc),var(--eye));color:#06312e}
html[data-theme="miku"] button.mini:hover,html[data-theme="miku"] .gear:hover,html[data-theme="miku"] #theme-btn:hover{
  border-color:var(--acc);background:color-mix(in srgb,var(--acc) 20%,var(--card))}

/* scrollbars: teal twin-tail, pink when you grab it */
html[data-theme="miku"] ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--acc),var(--eye));background-clip:padding-box}
html[data-theme="miku"] ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--coat),var(--acc));background-clip:padding-box}

/* mascot: teal speech bubble with a pink note */
html[data-theme="miku"] .mascot .say{border-color:color-mix(in srgb,var(--acc) 75%,var(--line));box-shadow:var(--shadow),0 0 18px -8px var(--glow)}
html[data-theme="miku"] .mascot .say::before{content:"♪ ";color:var(--coat)}
html[data-theme="miku"] .mascot img{filter:drop-shadow(0 10px 14px rgba(20,110,105,.32))}

/* the floating bubbles become music notes (and the odd leek) */
html[data-theme="miku"] #bubbles i{background:none;border-radius:0;opacity:.5;container-type:size;animation-name:miku-note}
html[data-theme="miku"] #bubbles i::before{content:"♪";display:block;font:700 32px/1 "M PLUS Rounded 1c",sans-serif;font-size:100cqh;
  color:var(--acc);text-shadow:0 0 14px var(--glow)}
html[data-theme="miku"] #bubbles i:nth-child(3n)::before{content:"♫";color:var(--coat);text-shadow:0 0 14px color-mix(in srgb,var(--coat) 40%,transparent)}
html[data-theme="miku"] #bubbles i:nth-child(3n+1)::before{content:"♬";color:var(--eye)}
html[data-theme="miku"] #bubbles i:nth-child(9n)::before{content:"🥬";font-size:70cqh}
@keyframes miku-note{0%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(24px,-55vh) rotate(10deg)}100%{transform:translate(-16px,-115vh) rotate(-8deg);opacity:0}}

html[data-motion="still"][data-theme="miku"] .eq i{animation:none}
  html[data-motion="still"][data-theme="miku"] .eq i:nth-child(1){transform:scaleY(.4)}html[data-motion="still"][data-theme="miku"] .eq i:nth-child(2){transform:scaleY(.8)}
  html[data-motion="still"][data-theme="miku"] .eq i:nth-child(3){transform:scaleY(.55)}html[data-motion="still"][data-theme="miku"] .eq i:nth-child(4){transform:scaleY(.95)}
  html[data-motion="still"][data-theme="miku"] .eq i:nth-child(5){transform:scaleY(.3)}

/* ===== Gura: hood blue #33739d, silver hair with blue streaks, trident aqua, white shark teeth, pink blush =====
   Fan-made and unofficial; colours inspired by Gawr Gura (hololive production / COVER Corp). No artwork included:
   add your own mascot per theme on the settings page. Light = a sunlit lagoon, dark = the deep. Silly on purpose. */
.cutie.logo-gura{display:none}
html[data-theme="gura"] .cutie.logo-bubbles{display:none}
html[data-theme="gura"] .cutie.logo-gura{display:block}
html[data-theme="gura"]{
  /* palette by colour-theory rules: 60% tinted neutrals, 30% text/lines, 10% accent. OKLCH keeps steps even.
     brand hue 248 (hood blue), analogous aqua 205, pink 5 only for tiny highlights */
  --bg:oklch(95.5% .016 238);--card:oklch(99.2% .004 238 / .93);--bar:oklch(91.5% .02 238);--line:oklch(88% .022 238);
  --fg:oklch(27% .03 248);--mute:oklch(47% .03 244);--ink:oklch(39% .085 250);
  --acc:oklch(53% .115 250);--eye:oklch(69% .095 242);--coat:oklch(71% .085 208);--acc2:oklch(82% .06 240);
  --blush:oklch(72% .13 4);--teeth:oklch(99.5% .004 238);--outline:oklch(99.5% .004 238);
  --up:oklch(51% .12 155);--warn:oklch(52% .11 68);--down:oklch(53% .17 25);
  --ray:oklch(100% 0 0 / .35);--glow:oklch(53% .115 250 / .2);--shadow:0 8px 22px -14px oklch(30% .06 250 / .4)}
@media (prefers-color-scheme:dark){html[data-theme="gura"]{
  /* the deep: same hues, only lightness changes; surfaces get lighter with height (no black), accents desaturated */
  --bg:oklch(17% .025 248);--card:oklch(22% .03 248 / .9);--bar:oklch(27% .03 248);--line:oklch(32% .035 248);
  --fg:oklch(92% .014 238);--mute:oklch(73% .028 238);--ink:oklch(85% .06 232);
  --acc:oklch(72% .1 242);--eye:oklch(80% .075 236);--coat:oklch(78% .075 202);--acc2:oklch(40% .07 248);
  --blush:oklch(78% .1 4);--teeth:oklch(93% .012 238);--outline:oklch(17% .025 248);
  --up:oklch(78% .13 155);--warn:oklch(82% .12 80);--down:oklch(72% .15 22);
  --ray:oklch(85% .06 230 / .08);--glow:oklch(72% .1 242 / .2);--shadow:0 12px 28px -16px oklch(5% .02 248 / .85)}}

/* the water: surface light fading into depth, light rays from the top-left (the one always-on animation: a slow
   transform on one layer), a blush of pink in light mode, and a seabed with seaweed, a starfish and a lost trident */
html[data-theme="gura"] body{background:
  radial-gradient(900px 520px at 100% 0%,color-mix(in oklch,var(--acc) 10%,transparent),transparent 65%),
  linear-gradient(180deg,color-mix(in oklch,var(--bg) 60%,#fff) 0%,var(--bg) 42%,color-mix(in oklch,var(--bg) 85%,var(--acc)) 100%);background-attachment:fixed}
@media (prefers-color-scheme:dark){html[data-theme="gura"] body{background:
  radial-gradient(1100px 600px at 12% -14%,color-mix(in oklch,var(--acc) 12%,transparent),transparent 62%),
  radial-gradient(900px 500px at 105% 10%,color-mix(in oklch,var(--coat) 6%,transparent),transparent 65%),
  linear-gradient(180deg,oklch(22% .035 245) 0%,var(--bg) 50%,oklch(13% .02 250) 100%);background-attachment:fixed}}
html[data-theme="gura"] body::before{content:"";position:fixed;left:-15%;right:-15%;top:-25vh;height:105vh;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 150deg at 22% 0,transparent 0deg,var(--ray) 2.5deg,transparent 5deg,transparent 9deg);
  -webkit-mask:linear-gradient(180deg,#000 10%,transparent 78%);mask:linear-gradient(180deg,#000 10%,transparent 78%);
  transform-origin:22% 0;animation:gura-rays 16s ease-in-out infinite alternate;will-change:transform}
@keyframes gura-rays{from{transform:rotate(-2deg);opacity:.75}to{transform:rotate(2deg);opacity:1}}
html[data-theme="gura"] body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:150px;pointer-events:none;z-index:0;
  background:color-mix(in srgb,var(--acc) 10%,transparent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150V112c90-24 150 8 240-10s170-26 260 4 180 14 270-12 200-18 290 8 190 18 280-6 170-20 260 2v52z'/%3E%3Cpath d='M180 104c-14-30 12-46-2-76M196 102c10-26-10-40 4-66M1310 104c-12-28 10-44-4-72M1330 106c14-24-8-38 6-62' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M1040 110 1100 22M1086 16l20 4-6 20M1072 34c-10-14-6-24 4-30M1110 46c12-6 22-2 26 10' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M620 118l6-12 6 12 12 2-9 8 3 12-12-6-12 6 3-12-9-8z'/%3E%3Ccircle cx='430' cy='112' r='7'/%3E%3Ccircle cx='446' cy='116' r='4'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150V112c90-24 150 8 240-10s170-26 260 4 180 14 270-12 200-18 290 8 190 18 280-6 170-20 260 2v52z'/%3E%3Cpath d='M180 104c-14-30 12-46-2-76M196 102c10-26-10-40 4-66M1310 104c-12-28 10-44-4-72M1330 106c14-24-8-38 6-62' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M1040 110 1100 22M1086 16l20 4-6 20M1072 34c-10-14-6-24 4-30M1110 46c12-6 22-2 26 10' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M620 118l6-12 6 12 12 2-9 8 3 12-12-6-12 6 3-12-9-8z'/%3E%3Ccircle cx='430' cy='112' r='7'/%3E%3Ccircle cx='446' cy='116' r='4'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}

/* header: the hood's rim (blue band) with big white shark teeth under it, and a little shark on patrol behind the title */
html[data-theme="gura"] header{border-bottom:2px solid color-mix(in srgb,var(--acc) 70%,transparent);box-shadow:var(--shadow)}
html[data-theme="gura"] header::after{left:0;width:100%;bottom:-9px;height:7px;animation:none;will-change:auto;opacity:.9;
  background:conic-gradient(from -40deg at 50% 100%,var(--teeth) 80deg,transparent 0) 0 0/16px 7px repeat-x;
  filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--acc) 55%,transparent))}
html[data-theme="gura"] header::before{content:"";position:absolute;left:0;bottom:5px;width:40px;height:23px;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 26'%3E%3Cpath d='M3 15c3-7 13-11 24-9 5 1 9 4 11 7l6-6-1 8 3 7-7-4c-4 4-12 6-20 5-8-1-14-3-16-8z' fill='%234a92c4' stroke='%2324587c' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M6 17.5c7 3.6 18 4.4 28 1-4 3.6-11 4.6-18 3.8-5-.6-8-2-10-4.8z' fill='%23f4f8fb'/%3E%3Cpath d='M18 7.5l5-6.5 3 7.5z' fill='%232f6f98' stroke='%2324587c' stroke-width='1.1' stroke-linejoin='round'/%3E%3Ccircle cx='11' cy='12.6' r='2' fill='%2310263a'/%3E%3Ccircle cx='10.3' cy='11.9' r='.7' fill='%23fff'/%3E%3Cpath d='M4.6 16.4l1.3 1.8 1.3-1.8 1.3 1.8 1.3-1.8' fill='none' stroke='%23fff' stroke-width='1' stroke-linejoin='round'/%3E%3Cellipse cx='15' cy='15.6' rx='2.2' ry='1.2' fill='%23ff8fab' opacity='.85'/%3E%3C/svg%3E") center/contain no-repeat;animation:gura-patrol 38s linear infinite;will-change:transform}
@keyframes gura-patrol{0%{transform:translate(-50px,0) scaleX(-1)}12%{transform:translate(12vw,-4px) scaleX(-1)}25%{transform:translate(25vw,0) scaleX(-1)}
  37%{transform:translate(37vw,-4px) scaleX(-1)}49.9%{transform:translate(calc(100vw + 10px),0) scaleX(-1)}50%{transform:translate(calc(100vw + 10px),0) scaleX(1)}
  62%{transform:translate(63vw,-4px) scaleX(1)}75%{transform:translate(50vw,0) scaleX(1)}87%{transform:translate(25vw,-4px) scaleX(1)}100%{transform:translate(-50px,0) scaleX(1)}}
/* the title is a sticker (outlined, with a drop), the "a" badge is candy pink and wiggles when you point at it */
html[data-theme="gura"] #site-title{font-family:Fredoka,sans-serif;font-weight:700;letter-spacing:.01em;color:var(--acc);white-space:nowrap;
  text-shadow:1px 0 var(--outline),-1px 0 var(--outline),0 1px var(--outline),0 -1px var(--outline),0 2.5px 0 color-mix(in srgb,var(--acc) 20%,transparent)}
@media (prefers-color-scheme:dark){html[data-theme="gura"] #site-title{color:var(--ink)}}
html[data-theme="gura"] #site-title::after{content:"a";display:inline-block;margin-left:7px;padding:0 7px 1px;border-radius:10px 10px 10px 3px;
  transform:rotate(-10deg) translateY(-3px);font:700 13px/1.3 Fredoka,sans-serif;color:#fff;text-shadow:none;
  background:linear-gradient(135deg,var(--blush),color-mix(in srgb,var(--blush) 70%,#fff));border:1.5px solid #fff;box-shadow:0 2px 6px -2px var(--blush)}
html[data-theme="gura"] #title:hover #site-title::after{animation:gura-wiggle .5s ease-in-out}
html[data-theme="gura"] #title:hover .logo-gura{animation:gura-chomp .45s ease-in-out}
@keyframes gura-wiggle{0%,100%{transform:rotate(-10deg) translateY(-3px)}30%{transform:rotate(12deg) translateY(-5px)}60%{transform:rotate(-18deg) translateY(-2px)}}
@keyframes gura-chomp{0%,100%{transform:none}40%{transform:scale(1.15,.88)}70%{transform:scale(.94,1.08)}}
html[data-theme="gura"] body.wall #p-time{color:var(--ink)}

/* cards: glassy water panels with a wavy hoodie-fade ribbon; h2 markers are shark fins (every third a trident) */
html[data-theme="gura"] section{border-color:color-mix(in srgb,var(--acc) 16%,var(--line));
  box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,#fff 35%,transparent)}
html[data-theme="gura"] h2{color:var(--ink)}
html[data-theme="gura"] section::before{height:5px;opacity:.5;background:linear-gradient(90deg,var(--acc),color-mix(in oklch,var(--eye) 50%,transparent));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 1.5Q6-1.5 12 1.5T24 1.5V4.5Q18 7.5 12 4.5T0 4.5Z'/%3E%3C/svg%3E") 0 0/22px 5px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 1.5Q6-1.5 12 1.5T24 1.5V4.5Q18 7.5 12 4.5T0 4.5Z'/%3E%3C/svg%3E") 0 0/22px 5px repeat-x}
html[data-theme="gura"] h2::before{width:16px;height:16px;top:1px;border-radius:0;background:var(--acc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 15C5 13 8 7 13 1c-1 5-.5 10 2 14z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 15C5 13 8 7 13 1c-1 5-.5 10 2 14z'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-theme="gura"] section:nth-of-type(3n) h2::before{background:var(--coat);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.4 2.6 2.8 0l1.4 2.6H3.6v2.9c0 .6.4.9.9.9h2.7V2.6h-.9L8 0l1.7 2.6h-.9v3.8h2.7c.5 0 .9-.3.9-.9V2.6h-.6L13.2 0l1.4 2.6H14v2.9c0 1.4-1.1 2.5-2.5 2.5H8.8v8H7.2V8H4.5C3.1 8 2 6.9 2 5.5V2.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.4 2.6 2.8 0l1.4 2.6H3.6v2.9c0 .6.4.9.9.9h2.7V2.6h-.9L8 0l1.7 2.6h-.9v3.8h2.7c.5 0 .9-.3.9-.9V2.6h-.6L13.2 0l1.4 2.6H14v2.9c0 1.4-1.1 2.5-2.5 2.5H8.8v8H7.2V8H4.5C3.1 8 2 6.9 2 5.5V2.6z'/%3E%3C/svg%3E")}
html[data-theme="gura"] section:hover h2::before{animation:gura-fin .6s ease-in-out}
@keyframes gura-fin{0%,100%{transform:none}35%{transform:translateX(3px) rotate(8deg)}70%{transform:translateX(-1px) rotate(-5deg)}}
/* KPI tiles: the status bar has a row of teeth (still green/amber/red for the status) */
html[data-theme="gura"] .kpi{border-color:color-mix(in srgb,var(--acc) 16%,var(--line));box-shadow:var(--shadow)}
html[data-theme="gura"] .kpi::before{width:7px;
  -webkit-mask:linear-gradient(#000,#000) 0 0/4px 100% no-repeat,conic-gradient(from 225deg at 100% 50%,#000 90deg,transparent 0) 4px 0/3px 7px repeat-y;
  mask:linear-gradient(#000,#000) 0 0/4px 100% no-repeat,conic-gradient(from 225deg at 100% 50%,#000 90deg,transparent 0) 4px 0/3px 7px repeat-y}
html[data-theme="gura"] .kpi.ok::before{background:var(--acc)}
html[data-theme="gura"] .meter i{background:linear-gradient(90deg,var(--acc),var(--eye))}
html[data-theme="gura"] .bar i{background:linear-gradient(90deg,var(--acc),var(--eye))}
html[data-theme="gura"] .cores i b{background:linear-gradient(0deg,var(--acc),var(--eye))}
html[data-theme="gura"] .app .ic .lt{background:linear-gradient(135deg,var(--acc),color-mix(in oklch,var(--acc) 60%,var(--coat)))}
html[data-theme="gura"] .app:hover{transform:translateY(-2px) rotate(-1.5deg);background:color-mix(in srgb,var(--acc) 9%,transparent);border-color:color-mix(in srgb,var(--acc) 30%,transparent)}
html[data-theme="gura"] button.ok,html[data-theme="gura"] .tabs button.on,html[data-theme="gura"] #wall-btn[aria-pressed=true]{
  background:var(--acc);color:var(--outline)}
html[data-theme="gura"] ::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--acc) 70%,var(--bar));background-clip:padding-box}
html[data-theme="gura"] ::-webkit-scrollbar-thumb:hover{background:var(--acc);background-clip:padding-box}

/* the mascot gets the spotlight: bigger, and on the wall she stands on the seabed in the corner */
html[data-theme="gura"] .mascot img{width:min(250px,82%);filter:drop-shadow(0 10px 14px rgba(14,62,110,.45))}
@media (prefers-color-scheme:dark){html[data-theme="gura"] .mascot img{filter:drop-shadow(0 0 14px rgba(134,212,255,.45)) drop-shadow(0 10px 14px rgba(0,0,0,.6))}}
html[data-theme="gura"] .mascot .say{border-color:color-mix(in srgb,var(--acc) 40%,var(--line));box-shadow:var(--shadow)}
html[data-theme="gura"] body.wall .mascot img{max-height:min(240px,22vh)}

/* bubbles stay bubbles; every seventh is a little shark, one is an "a" and one is a shrimp */
html[data-theme="gura"] #bubbles i{opacity:.5;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 9%,transparent 12%),
  radial-gradient(circle,transparent 56%,color-mix(in srgb,var(--eye) 65%,#fff) 67%,transparent 72%),radial-gradient(circle,color-mix(in srgb,var(--eye) 14%,transparent),transparent 70%)}
@media (prefers-color-scheme:dark){html[data-theme="gura"] #bubbles i{opacity:.28}}
html[data-theme="gura"] #bubbles i:nth-child(7n){border-radius:0;opacity:.32;background:var(--acc);animation-name:gura-swim;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M2 12c6-6 17-8 28-4l6-6-1 8 4 7-7-3c-8 4-21 4-30-2zM16 6l5-6 2 7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M2 12c6-6 17-8 28-4l6-6-1 8 4 7-7-3c-8 4-21 4-30-2zM16 6l5-6 2 7z'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes gura-swim{0%{transform:translate(0,0) rotate(-24deg) scaleX(-1)}50%{transform:translate(30px,-55vh) rotate(-18deg) scaleX(-1)}
  100%{transform:translate(-10px,-115vh) rotate(-26deg) scaleX(-1);opacity:0}}
html[data-theme="gura"] #bubbles i:nth-child(11),html[data-theme="gura"] #bubbles i:nth-child(13){background:none;border-radius:0;container-type:size;opacity:.6}
html[data-theme="gura"] #bubbles i:nth-child(11)::before{content:"a";display:block;text-align:center;font:700 32px/1 Fredoka,sans-serif;font-size:90cqh;color:var(--acc)}
html[data-theme="gura"] #bubbles i:nth-child(13)::before{content:"🦐";display:block;text-align:center;font-size:70cqh;line-height:1}

html[data-motion="still"][data-theme="gura"] body::before,html[data-motion="still"][data-theme="gura"] header::before{animation:none}
  html[data-motion="still"][data-theme="gura"] header::before{display:none}