:root{
  --bg0:#070a16;
  --bg1:#0b1020;
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --text:#e8ecff;
  --muted:#cfd7ff;
  --a:#8fb6ff;
  --b:#7ef0d6;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(143,182,255,.22), transparent 60%),
    radial-gradient(900px 420px at 80% 30%, rgba(126,240,214,.18), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
a{color:inherit}
.wrap{max-width:980px;margin:0 auto;padding:46px 18px}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);font-size:13px
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 18px rgba(143,182,255,.45)}
.hero{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border-radius:18px;padding:22px 18px;backdrop-filter: blur(8px)
}
.hero h1{font-size:26px;margin:0 0 8px;letter-spacing:.3px}
.hero p{margin:10px 0;line-height:1.75;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media (max-width:860px){.grid{grid-template-columns:1fr}}
.card{
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  padding:14px 14px;border-radius:16px;
  border:1px solid var(--line);
  background:var(--card);
  text-decoration:none
}
.card:hover{background:rgba(255,255,255,.09)}
.card .t{font-weight:650}
.card .d{color:var(--muted);font-size:13px;line-height:1.6}
.card .k{margin-top:6px;font-size:12px;color:rgba(232,236,255,.90)}
.footer{margin-top:16px;color:rgba(232,236,255,.92);font-size:12px}
code{background:rgba(255,255,255,.10);padding:2px 6px;border-radius:9px}
.icon{width:26px;height:26px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.icon svg{width:16px;height:16px}
.rowtitle{display:flex;align-items:center;gap:10px}

/* === Starling background art: stars, meteors, grass === */
body{position:relative; overflow-x:hidden;}

/* stars + meteors overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.70), transparent 55%),
    radial-gradient(1px 1px at 35% 28%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1px 1px at 62% 22%, rgba(255,255,255,.62), transparent 55%),
    radial-gradient(1px 1px at 78% 35%, rgba(255,255,255,.48), transparent 55%),
    radial-gradient(1px 1px at 90% 12%, rgba(255,255,255,.58), transparent 55%),
    radial-gradient(1px 1px at 15% 62%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1px 1px at 44% 72%, rgba(255,255,255,.50), transparent 55%),
    radial-gradient(1px 1px at 66% 66%, rgba(255,255,255,.44), transparent 55%),
    radial-gradient(1px 1px at 86% 74%, rgba(255,255,255,.40), transparent 55%),

    /* meteor streaks */
    linear-gradient(120deg, transparent 0%, transparent 45%, rgba(143,182,255,.0) 47%, rgba(143,182,255,.55) 49%, rgba(126,240,214,.10) 52%, transparent 56%, transparent 100%),
    linear-gradient(120deg, transparent 0%, transparent 60%, rgba(255,255,255,.0) 62%, rgba(255,255,255,.38) 64%, rgba(143,182,255,.10) 67%, transparent 70%, transparent 100%);
  background-size:
    420px 420px,
    520px 520px,
    480px 480px,
    600px 600px,
    560px 560px,
    680px 680px,
    740px 740px,
    820px 820px,
    900px 900px,
    1200px 1200px,
    1400px 1400px;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    -1200px -300px,
    -1500px -600px;
  animation: starling_meteors 14s linear infinite;
  opacity:.95;
}

@keyframes starling_meteors{
  0%{
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      -1200px -300px,
      -1500px -600px;
  }
  100%{
    background-position:
      60px 40px,
      40px 60px,
      80px 50px,
      35px 55px,
      70px 30px,
      25px 65px,
      55px 20px,
      30px 35px,
      45px 55px,
      400px 600px,
      520px 820px;
  }
}

/* grass silhouette */
body::after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  bottom:-4px;
  height:190px;
  z-index:-1;
  pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%231a5a3a' stop-opacity='0.0'/><stop offset='0.25' stop-color='%231a5a3a' stop-opacity='0.35'/><stop offset='1' stop-color='%23103b27' stop-opacity='0.98'/></linearGradient></defs><path d='M0,120 C80,140 120,80 190,115 C260,150 300,95 370,125 C440,155 500,105 560,130 C620,155 680,110 740,135 C820,170 880,120 960,140 C1040,160 1100,120 1200,150 L1200,220 L0,220 Z' fill='url(%23g)'/><path d='M0,170 C90,150 160,190 260,170 C360,150 440,190 540,170 C640,150 720,190 820,170 C920,150 1020,190 1120,170 C1160,162 1180,158 1200,154 L1200,220 L0,220 Z' fill='%230d2a1c' opacity='0.55'/></svg>");
  background-size: 1200px 220px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 -16px 30px rgba(0,0,0,.45));
  opacity:.96;
}

/* make cards float above grass */
.wrap{position:relative; z-index:1;}

/* === Meteor refine: smaller + rarer === */
/* override previous big streaks: keep only stars drift on body::before */
body::before{
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.70), transparent 55%),
    radial-gradient(1px 1px at 35% 28%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1px 1px at 62% 22%, rgba(255,255,255,.62), transparent 55%),
    radial-gradient(1px 1px at 78% 35%, rgba(255,255,255,.48), transparent 55%),
    radial-gradient(1px 1px at 90% 12%, rgba(255,255,255,.58), transparent 55%),
    radial-gradient(1px 1px at 15% 62%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1px 1px at 44% 72%, rgba(255,255,255,.50), transparent 55%),
    radial-gradient(1px 1px at 66% 66%, rgba(255,255,255,.44), transparent 55%),
    radial-gradient(1px 1px at 86% 74%, rgba(255,255,255,.40), transparent 55%);
  background-size:
    520px 520px,
    640px 640px,
    580px 580px,
    720px 720px,
    680px 680px,
    860px 860px,
    920px 920px,
    980px 980px,
    1100px 1100px;
  background-position: 0 0;
  animation: starling_star_drift 90s linear infinite;
  opacity:.95;
}
@keyframes starling_star_drift{
  0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  100%{background-position:60px 40px,40px 60px,80px 50px,35px 55px,70px 30px,25px 65px,55px 20px,30px 35px,45px 55px}
}

/* rare meteors: use wrap::before so we don't fight with grass */
.wrap::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  /* two tiny streaks */
  background:
    linear-gradient(135deg,
      transparent 0%,
      transparent 49.55%,
      rgba(143,182,255,.65) 49.62%,
      rgba(126,240,214,.20) 49.80%,
      transparent 49.92%,
      transparent 100%),
    linear-gradient(135deg,
      transparent 0%,
      transparent 49.40%,
      rgba(255,255,255,.40) 49.48%,
      rgba(143,182,255,.12) 49.62%,
      transparent 49.74%,
      transparent 100%);
  background-size: 1800px 1800px, 2200px 2200px;
  background-position: -2400px -1200px, -2800px -1600px;
  opacity:0;
  animation: starling_meteor_pass 26s linear infinite;
}
@keyframes starling_meteor_pass{
  /* mostly none */
  0%, 44%{opacity:0;}
  /* first small meteor */
  45%{opacity:0.55; background-position:-1200px -800px, -1600px -1100px;}
  48%{opacity:0.55; background-position:200px 600px, 120px 520px;}
  50%{opacity:0;}
  /* quiet */
  50%, 84%{opacity:0;}
  /* second meteor */
  85%{opacity:0.45; background-position:-1400px -900px, -1900px -1200px;}
  88%{opacity:0.45; background-position:120px 540px, 60px 460px;}
  90%,100%{opacity:0;}
}

/* === Light theme: blue sky + white clouds + soft grass === */
:root{
  --bg0:#eaf4ff;
  --bg1:#cfe8ff;
  --card:rgba(255,255,255,.72);
  --line:rgba(15,35,70,.14);
  --text:#14233f;
  --muted:rgba(20,35,63,.78);
  --a:#2f7bff;
  --b:#22c1a4;
}

body{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(47,123,255,.18), transparent 60%),
    radial-gradient(900px 420px at 80% 30%, rgba(34,193,164,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* clouds layer */
body::before{
  opacity:1;
  animation: starling_cloud_drift 80s linear infinite;
  background:
    radial-gradient(120px 55px at 12% 22%, rgba(255,255,255,.78) 45%, transparent 55%),
    radial-gradient(160px 70px at 18% 22%, rgba(255,255,255,.72) 45%, transparent 56%),
    radial-gradient(140px 62px at 25% 24%, rgba(255,255,255,.70) 45%, transparent 56%),

    radial-gradient(170px 74px at 62% 16%, rgba(255,255,255,.74) 45%, transparent 56%),
    radial-gradient(220px 90px at 70% 16%, rgba(255,255,255,.70) 45%, transparent 56%),
    radial-gradient(150px 66px at 78% 18%, rgba(255,255,255,.68) 45%, transparent 56%),

    radial-gradient(190px 82px at 40% 44%, rgba(255,255,255,.62) 45%, transparent 56%),
    radial-gradient(240px 96px at 48% 44%, rgba(255,255,255,.58) 45%, transparent 56%),
    radial-gradient(170px 76px at 56% 46%, rgba(255,255,255,.56) 45%, transparent 56%);
  background-size: 1200px 520px;
  background-repeat: repeat;
  background-position: 0 0;
}

@keyframes starling_cloud_drift{
  0%{background-position:0 0;}
  100%{background-position:1200px 0;}
}

/* disable meteors in light theme */
.wrap::before{opacity:0 !important; animation:none !important;}

/* grass: lighter */
body::after{
  opacity:.90;
  filter: drop-shadow(0 -10px 24px rgba(0,0,0,.18));
}

.badge{background:rgba(255,255,255,.60)}
.hero{background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62))}
.card:hover{background:rgba(255,255,255,.86)}
code{background:rgba(20,35,63,.10)}

/* light footer override */
.footer{color:rgba(20,35,63,.80)}
.card .k{color:rgba(20,35,63,.72)}

/* small button */
.sbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.60);
  color:inherit;
  text-decoration:none;
  font-weight:650;
  font-size:12px;
}
.sbtn:hover{background:rgba(255,255,255,.78)}

/* sbtn tap override */
.sbtn{padding:10px 14px;border-radius:14px;font-size:13px;background:rgba(255,255,255,.65)}

/* merged bg v1 */
body{
  background:
    radial-gradient(880px 520px at 18% 12%, rgba(47,123,255,.14), transparent 62%),
    radial-gradient(920px 560px at 86% 26%, rgba(34,193,164,.12), transparent 60%),
    radial-gradient(520px 360px at 52% 0%, rgba(255,255,255,.52), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* soft clouds + tiny dots */
body::before{
  opacity:.92;
  filter: blur(.35px);
  animation: starling_cloud_drift_merged 140s linear infinite;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(1.6px 1.6px at 36% 26%, rgba(255,255,255,.34), transparent 60%),
    radial-gradient(1.6px 1.6px at 62% 20%, rgba(255,255,255,.38), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 30%, rgba(255,255,255,.30), transparent 60%),

    radial-gradient(150px 68px at 14% 22%, rgba(255,255,255,.78) 45%, transparent 56%),
    radial-gradient(220px 90px at 24% 22%, rgba(255,255,255,.70) 45%, transparent 57%),
    radial-gradient(180px 78px at 66% 16%, rgba(255,255,255,.74) 45%, transparent 56%),
    radial-gradient(250px 102px at 76% 16%, rgba(255,255,255,.68) 45%, transparent 57%),
    radial-gradient(210px 90px at 42% 44%, rgba(255,255,255,.60) 45%, transparent 57%),
    radial-gradient(280px 112px at 54% 44%, rgba(255,255,255,.56) 45%, transparent 58%);
  background-size: 1400px 560px;
  background-repeat: repeat;
  background-position: 0 0;
}

@keyframes starling_cloud_drift_merged{
  0%{background-position:0 0;}
  100%{background-position:1400px 0;}
}

/* grass a bit lighter */
body::after{
  opacity:.84;
  filter: drop-shadow(0 -8px 18px rgba(0,0,0,.14));
}

@media (prefers-reduced-motion: reduce){
  body::before{animation:none !important;}
  .wrap::before{animation:none !important;}
}

/* merged bg v1b: desktop repeat reduction */
body::before{
  opacity:.78;
  filter: blur(.45px);
  animation: starling_cloud_drift_merged2 180s linear infinite;
  background:
    radial-gradient(220px 98px at 18% 22%, rgba(255,255,255,.70) 45%, transparent 58%),
    radial-gradient(320px 132px at 28% 22%, rgba(255,255,255,.62) 45%, transparent 60%),
    radial-gradient(260px 112px at 66% 18%, rgba(255,255,255,.66) 45%, transparent 59%),
    radial-gradient(360px 148px at 78% 18%, rgba(255,255,255,.58) 45%, transparent 61%),
    radial-gradient(300px 128px at 46% 44%, rgba(255,255,255,.52) 45%, transparent 62%);
  background-size: 2400px 760px;
  background-repeat: repeat;
  background-position: 0 0;
}
@keyframes starling_cloud_drift_merged2{
  0%{background-position:0 0;}
  100%{background-position:2400px 0;}
}

/* === Home photo background (2026-02-15) === */
body{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.72)),
    url("/assets/homebg.png");
  background-size: cover, cover;
  background-position: center center, center center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}

/* disable decorative overlays so the photo stays clean */
body::before{background:none !important; animation:none !important; opacity:0 !important;}
body::after{opacity:0 !important;}

/* === Theme switch (home) === */
:root{
  --overlay1: rgba(255,255,255,.58);
  --overlay2: rgba(255,255,255,.72);
  --text:#14233f;
  --muted:rgba(20,35,63,.78);
  --line:rgba(15,35,70,.14);
  --card:rgba(255,255,255,.72);
}
:root[data-theme="dark"]{
  --overlay1: rgba(0,0,0,.28);
  --overlay2: rgba(0,0,0,.42);
  --text:#e8ecff;
  --muted:#cfd7ff;
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.06);
}

/* photo background + overlay */
body{
  color: var(--text);
  background-image:
    linear-gradient(180deg, var(--overlay1), var(--overlay2)),
    url("/assets/homebg.png");
  background-size: cover, cover;
  background-position: center center, center center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}

/* cards and badges follow theme */
.badge{border:1px solid var(--line); background:rgba(255,255,255,.60)}
:root[data-theme="dark"] .badge{background:rgba(255,255,255,.04)}
.hero{border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62))}
:root[data-theme="dark"] .hero{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04))}
.card{border:1px solid var(--line); background:var(--card)}
.card:hover{background:rgba(255,255,255,.86)}
:root[data-theme="dark"] .card:hover{background:rgba(255,255,255,.09)}
.hero p,.card .d{color:var(--muted)}
.card .k{color:rgba(20,35,63,.72)}
:root[data-theme="dark"] .card .k{color:rgba(232,236,255,.90)}
.footer{color:rgba(20,35,63,.80)}
:root[data-theme="dark"] .footer{color:rgba(232,236,255,.92)}
code{background:rgba(20,35,63,.10)}
:root[data-theme="dark"] code{background:rgba(255,255,255,.10)}

/* small buttons: improve contrast in dark */
:root[data-theme="dark"] .sbtn{background:rgba(20,35,63,.55);border-color:rgba(255,255,255,.18);color:rgba(232,236,255,.96)}
:root[data-theme="dark"] .sbtn:hover{background:rgba(20,35,63,.72)}
:root[data-theme="dark"] .chip{background:rgba(20,35,63,.55);border-color:rgba(255,255,255,.18);color:rgba(232,236,255,.96)}

/* keep photo clean */
body::before{background:none !important; animation:none !important; opacity:0 !important;}
body::after{opacity:0 !important;}


/* === Theme switch (animated) === */

.themeSwitch{
  width:54px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  padding:2px;
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(191,230,255,.95), rgba(127,200,255,.92));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  text-decoration:none;
}
.themeSwitch:focus{outline:2px solid rgba(47,123,255,.45); outline-offset:2px;}

/* cloud (day) */
.themeSwitch::before{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  width:22px;
  height:12px;
  background:
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.95) 0 6px, transparent 7px),
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.92) 0 7px, transparent 8px),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.90) 0 5px, transparent 6px);
  opacity:.95;
  transition: opacity .35s ease, transform .35s ease;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.10));
}

/* stars (night) */
.themeSwitch::after{
  content:"";
  position:absolute;
  right:10px;
  top:8px;
  width:26px;
  height:14px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.85) 0 1.5px, transparent 2px),
    radial-gradient(circle at 52% 20%, rgba(255,255,255,.78) 0 1.2px, transparent 2px),
    radial-gradient(circle at 78% 55%, rgba(255,255,255,.82) 0 1.4px, transparent 2px),
    radial-gradient(circle at 35% 75%, rgba(255,255,255,.70) 0 1.1px, transparent 2px);
  opacity:0;
  transform: translateY(2px);
  transition: opacity .35s ease, transform .35s ease;
}

.themeSwitch .ts-knob{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#ffcc33;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.60) inset,
    0 10px 18px rgba(0,0,0,.16);
  transition:
    transform .38s cubic-bezier(.2,.95,.2,1),
    background .35s ease,
    box-shadow .35s ease;
}

:root[data-theme="dark"] .themeSwitch{
  background:linear-gradient(180deg, rgba(28,34,51,.96), rgba(10,14,26,.96));
}
:root[data-theme="dark"] .themeSwitch::before{opacity:0; transform: translateX(-4px) scale(.96);}
:root[data-theme="dark"] .themeSwitch::after{opacity:1; transform: translateY(0);}

:root[data-theme="dark"] .themeSwitch .ts-knob{
  transform: translateX(24px);
  background:#e8ecff;
  background-image:
    radial-gradient(circle at 35% 35%, rgba(0,0,0,.12) 0 3px, transparent 3.6px),
    radial-gradient(circle at 60% 55%, rgba(0,0,0,.10) 0 2.6px, transparent 3.2px),
    radial-gradient(circle at 45% 70%, rgba(0,0,0,.08) 0 2.2px, transparent 2.9px);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.55) inset,
    0 10px 18px rgba(0,0,0,.24);
}

@media (prefers-reduced-motion: reduce){
  .themeSwitch, .themeSwitch::before, .themeSwitch::after, .themeSwitch .ts-knob{transition:none !important;}
}


/* === Brand badge polish === */

.badge.brand{
  position:relative;
  color:var(--muted);
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.58)) padding-box,
    linear-gradient(135deg, rgba(47,123,255,.55), rgba(34,193,164,.40)) border-box;
  box-shadow:
    0 10px 24px rgba(15,35,70,.10),
    0 0 0 1px rgba(255,255,255,.35) inset;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
:root[data-theme="dark"] .badge.brand{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)) padding-box,
    linear-gradient(135deg, rgba(143,182,255,.55), rgba(126,240,214,.35)) border-box;
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
.badge.brand:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.badge.brand:active{transform: translateY(0); filter: brightness(.99);}

.badge.brand .dot{
  position:relative;
  background: linear-gradient(135deg, var(--a), var(--b));
  animation: brand_dot_breathe 2.2s ease-in-out infinite;
}
.badge.brand .dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(47,123,255,.35), transparent 60%);
  opacity:.55;
  filter: blur(.2px);
  animation: brand_dot_glow 2.2s ease-in-out infinite;
}
:root[data-theme="dark"] .badge.brand .dot::after{
  background: radial-gradient(circle, rgba(143,182,255,.35), transparent 60%);
}

@keyframes brand_dot_breathe{
  0%,100%{transform: scale(1); box-shadow:0 0 14px rgba(47,123,255,.30)}
  50%{transform: scale(1.12); box-shadow:0 0 22px rgba(47,123,255,.45)}
}
@keyframes brand_dot_glow{
  0%,100%{opacity:.42; transform: scale(1)}
  50%{opacity:.60; transform: scale(1.08)}
}

@media (prefers-reduced-motion: reduce){
  .badge.brand, .badge.brand .dot, .badge.brand .dot::after{transition:none !important; animation:none !important;}
}


/* === UI kit: buttons, section titles, skeleton, transitions === */

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.62);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  line-height:1;
  user-select:none;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
:root[data-theme="dark"] .btn{background:rgba(255,255,255,.06)}
.btn:hover{filter:brightness(1.03); transform:translateY(-1px)}
.btn:active{filter:brightness(.99); transform:translateY(0)}
.btn.primary{border-color:rgba(47,123,255,.35); background:linear-gradient(180deg, rgba(47,123,255,.18), rgba(47,123,255,.10))}
:root[data-theme="dark"] .btn.primary{border-color:rgba(143,182,255,.30); background:linear-gradient(180deg, rgba(143,182,255,.14), rgba(143,182,255,.07))}
.btn.danger{border-color:rgba(255,95,95,.28); background:linear-gradient(180deg, rgba(255,95,95,.14), rgba(255,95,95,.06))}
:root[data-theme="dark"] .btn.danger{border-color:rgba(255,140,140,.22)}

/* section title */
.sectionTitle{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 8px;
  color:var(--muted);
  font-weight:750;
  letter-spacing:.2px;
}
.sectionTitle::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--a),var(--b));
  box-shadow:0 0 18px rgba(47,123,255,.20);
}

/* skeleton */
.sk{
  display:inline-block;
  min-width:2.4em;
  border-radius:10px;
  color:transparent !important;
  background:
    linear-gradient(90deg,
      rgba(20,35,63,.10) 0%,
      rgba(20,35,63,.06) 40%,
      rgba(20,35,63,.12) 60%,
      rgba(20,35,63,.10) 100%);
  background-size: 220% 100%;
  animation: sk_shimmer 1.15s ease-in-out infinite;
}
:root[data-theme="dark"] .sk{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.06) 40%,
      rgba(255,255,255,.12) 60%,
      rgba(255,255,255,.10) 100%);
}
@keyframes sk_shimmer{0%{background-position:0% 0}100%{background-position:100% 0}}

/* page enter transition */
body{transition: opacity .14s ease}
body.page-enter{opacity:0}
body.page-ready{opacity:1}

@media (prefers-reduced-motion: reduce){
  .btn,.sk,body{transition:none !important; animation:none !important;}
}


/* brand text hierarchy */
.badge.brand .brandX{font-weight:800; letter-spacing:.2px; color:var(--text)}
.badge.brand .brandS{margin-left:4px; font-weight:700; opacity:.78; color:var(--muted)}

/* press feedback */
.badge.brand:active{transform: translateY(0) scale(.985); filter: brightness(.99)}

/* home vs away badge dot */
.badge.brand.home .dot{width:8px;height:8px;border-radius:50%}
.badge.brand:not(.home) .dot{
  width:12px;
  height:12px;
  border-radius:3px;
  background:linear-gradient(135deg,var(--a),var(--b));
  box-shadow:0 0 18px rgba(143,182,255,.38);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3 3 11h2v9a1 1 0 0 0 1 1h5v-6h2v6h5a1 1 0 0 0 1-1v-9h2z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3 3 11h2v9a1 1 0 0 0 1 1h5v-6h2v6h5a1 1 0 0 0 1-1v-9h2z'/></svg>") center/contain no-repeat;
}


/* === Design tokens v1: radius shadow motion === */

:root{
  --r-lg:18px;
  --r-md:14px;
  --ease-ui: cubic-bezier(.2,.95,.2,1);
  --t-fast: .16s;
}

.hero{border-radius:var(--r-lg)}
.card{
  border-radius:var(--r-lg);
  transition: transform var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui), filter var(--t-fast) var(--ease-ui);
}
.card:hover{filter:brightness(1.01)}
.card:active{transform: translateY(0) scale(.995)}

.btn,.sbtn{
  border-radius:var(--r-md);
  transition: transform var(--t-fast) var(--ease-ui), filter var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui);
}

.badge{
  transition: transform var(--t-fast) var(--ease-ui), filter var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui), box-shadow var(--t-fast) var(--ease-ui);
}

@media (prefers-reduced-motion: reduce){
  .card,.btn,.sbtn,.badge{transition:none !important;}
}


/* === Color system v1: accents for light/dark === */

:root{
  --accent1-rgb: 47 123 255;   /* blue */
  --accent2-rgb: 34 193 164;   /* green */
  --accent3-rgb: 138 91 255;   /* purple */
}
:root[data-theme="dark"]{
  --accent1-rgb: 143 182 255;
  --accent2-rgb: 126 240 214;
  --accent3-rgb: 186 160 255;
}

/* unify primary button + bars to the same accent */
.btn.primary{
  border-color: rgba(var(--accent1-rgb), .32);
  background: linear-gradient(180deg, rgba(var(--accent1-rgb), .18), rgba(var(--accent1-rgb), .10));
}

.bar{background: rgba(var(--accent1-rgb), .14);}
.bar>i{background: linear-gradient(90deg, rgba(var(--accent1-rgb), .95), rgba(var(--accent1-rgb), .55));}


/* === Final background v1: single source of truth === */

:root{
  --overlay1: rgba(255,255,255,.58);
  --overlay2: rgba(255,255,255,.72);
}
:root[data-theme="dark"]{
  --overlay1: rgba(0,0,0,.28);
  --overlay2: rgba(0,0,0,.42);
}

/* photo background + overlay, always */
body{
  background-image:
    linear-gradient(180deg, var(--overlay1), var(--overlay2)),
    url("/assets/homebg.png");
  background-size: cover, cover;
  background-position: center center, center center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}

/* keep photo clean */
body::before{background:none !important; animation:none !important; opacity:0 !important;}
body::after{opacity:0 !important;}


/* === Typography & spacing v1 === */

/* global readable rhythm */
body{line-height:1.7}
.hero p,.muted,.card .d{line-height:1.7}

/* consistent vertical spacing */
.card .t{margin-top:0}
.card .d{margin-top:2px}

/* subtle inner highlight for premium feel */
.card{
  box-shadow:
    0 10px 24px rgba(15,35,70,.08),
    0 0 0 1px rgba(255,255,255,.28) inset;
}
:root[data-theme="dark"] .card{
  box-shadow:
    0 10px 26px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

/* mobile padding refinement */
@media (max-width:860px){
  .card{padding:14px 14px}
  .hero{padding:18px 14px}
}