/* KIXSS.COM - Liquid Glass Single Page */

:root{
  --radius: 22px;
  --blur: 18px;
  --brand: #14f195;
  --brand2:#60a5fa;
  --brand3:#a78bfa;

  /* data-url noise */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  /* theme tokens (overridden by html[data-theme]) */
  --bg0:#070a16;
  --bg1:#0b1020;
  --text:#eaf0ff;
  --muted: rgba(234,240,255,.72);
  --muted2: rgba(234,240,255,.56);
  --stroke: rgba(255,255,255,.16);
  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.14);
  --subGlass: rgba(255,255,255,.06);
  --subGlassHover: rgba(255,255,255,.09);
  --subStroke: rgba(255,255,255,.12);
  --shadow: 0 26px 90px rgba(0,0,0,.55);
  --shadowSoft: 0 18px 60px rgba(0,0,0,.25);
  --noiseOpacity: .12;
  --focus: rgba(96,165,250,.72);

  --blobA: rgba(20,241,149,.18);
  --blobB: rgba(96,165,250,.22);
  --blobC: rgba(167,139,250,.18);
}

html[data-theme="dark"]{ color-scheme: dark; }

html[data-theme="light"]{
  color-scheme: light;
  --bg0:#f7f8fb;
  --bg1:#eef2ff;
  --text:#0f172a;
  --muted: rgba(15,23,42,.72);
  --muted2: rgba(15,23,42,.56);
  --stroke: rgba(15,23,42,.10);
  --glass: rgba(255,255,255,.62);
  --glass2: rgba(255,255,255,.42);
  --subGlass: rgba(255,255,255,.46);
  --subGlassHover: rgba(255,255,255,.58);
  --subStroke: rgba(15,23,42,.10);
  --shadow: 0 22px 70px rgba(15,23,42,.18);
  --shadowSoft: 0 18px 44px rgba(15,23,42,.12);
  --noiseOpacity: .08;
  --focus: rgba(37,99,235,.42);

  --blobA: rgba(20,241,149,.14);
  --blobB: rgba(59,130,246,.18);
  --blobC: rgba(167,139,250,.16);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 800px at 12% 12%, var(--blobA), transparent 60%),
    radial-gradient(900px 700px at 88% 22%, var(--blobB), transparent 60%),
    radial-gradient(900px 900px at 55% 100%, var(--blobC), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a,button{ -webkit-tap-highlight-color: transparent; }
button{ font: inherit; }
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.blob{
  position:absolute;
  width: 44vmax;
  height: 44vmax;
  border-radius: 999px;
  filter: blur(60px) saturate(1.35);
  opacity: .75;
  transform: translateZ(0);
  mix-blend-mode: screen;
  animation: drift 22s ease-in-out infinite;
}
html[data-theme="light"] .blob{
  mix-blend-mode: normal;
  opacity: .55;
  filter: blur(55px) saturate(1.18);
}
.blob--1{
  left: -8vmax;
  top: -10vmax;
  background:
    radial-gradient(circle at 30% 30%, rgba(20,241,149,.55), transparent 62%),
    radial-gradient(circle at 70% 70%, rgba(96,165,250,.42), transparent 58%);
  animation-duration: 26s;
}
.blob--2{
  right: -12vmax;
  top: -14vmax;
  width: 38vmax;
  height: 38vmax;
  background:
    radial-gradient(circle at 35% 35%, rgba(96,165,250,.55), transparent 62%),
    radial-gradient(circle at 70% 65%, rgba(167,139,250,.42), transparent 58%);
  animation-duration: 28s;
  animation-direction: reverse;
}
.blob--3{
  left: 18vmax;
  bottom: -18vmax;
  width: 46vmax;
  height: 46vmax;
  background:
    radial-gradient(circle at 30% 30%, rgba(167,139,250,.50), transparent 62%),
    radial-gradient(circle at 70% 60%, rgba(20,241,149,.32), transparent 58%);
  animation-duration: 32s;
}
@keyframes drift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  35%{ transform: translate3d(6vmax,-4vmax,0) scale(1.05); }
  70%{ transform: translate3d(-5vmax,4vmax,0) scale(.98); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:3;
  background-image: var(--noise);
  opacity: var(--noiseOpacity);
  mix-blend-mode: overlay;
}

.controls{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10;
  display:flex;
  align-items:center;
  gap: 10px;
}

/* iOS 风格主题开关 */
.themeSwitch{
  height: 38px;
  width: 62px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  color: var(--text);
  box-shadow: var(--shadowSoft);
  cursor:pointer;
  position:relative;
  padding: 0;
  display:block;
  backdrop-filter: blur(calc(var(--blur) - 2px)) saturate(180%);
  -webkit-backdrop-filter: blur(calc(var(--blur) - 2px)) saturate(180%);
  overflow:hidden;
}
.themeSwitch::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(520px 240px at var(--mx, 25%) var(--my, 0%), rgba(255,255,255,.26), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 50%, rgba(0,0,0,.08));
  opacity:.75;
  pointer-events:none;
}
.themeThumb{
  position:absolute;
  top: 3px;
  left: 3px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  display:grid;
  place-items:center;
  transition: transform .22s ease;
  z-index:1;
}
html[data-theme="light"] .themeThumb{
  border-color: rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 38px rgba(15,23,42,.14);
}
html[data-theme="dark"] .themeThumb{ transform: translateX(24px); }
.themeThumb svg{ width: 18px; height: 18px; opacity: .92; }
.themeThumb .iconMoon{ display:none; }
html[data-theme="dark"] .themeThumb .iconSun{ display:none; }
html[data-theme="dark"] .themeThumb .iconMoon{ display:block; }

.wrap{
  min-height: 100%;
  display:grid;
  place-items:center;
  padding: 74px 16px 48px;
  position:relative;
  z-index:2;
}

.card{
  width: min(760px, 92vw);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  box-shadow: var(--shadow);
  padding: 26px 22px 18px;
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  isolation: isolate;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(860px 320px at var(--mx, 16%) var(--my, 0%), rgba(255,255,255,.30), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 48%, rgba(0,0,0,.08));
  opacity: .72;
  pointer-events:none;
  z-index:0;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.08);
  opacity: .9;
  pointer-events:none;
  z-index:0;
}
.card > *{ position:relative; z-index:1; }

.brandRow{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}
.brandMark{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  box-shadow: var(--shadowSoft);
  display:grid;
  place-items:center;
  backdrop-filter: blur(calc(var(--blur) - 6px)) saturate(180%);
  -webkit-backdrop-filter: blur(calc(var(--blur) - 6px)) saturate(180%);
}
.brandLogo{
  width: 40px;
  height: 40px;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}
.brandName{
  font-weight: 760;
  letter-spacing: .08em;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1.05;
}
.brandTag{
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: .02em;
  margin-top: 4px;
}

h1{
  margin: 10px 0 10px;
  font-size: clamp(24px, 3.6vw, 36px);
  letter-spacing: .02em;
}
.sub{
  margin: 0 0 16px;
  color: var(--muted);
  max-width: 60ch;
}
.sub strong{ color: var(--text); font-weight: 740; }

.meter{
  width:min(560px, 100%);
  background: color-mix(in srgb, var(--subGlass) 85%, transparent);
  border: 1px solid var(--subStroke);
  border-radius: 999px;
  height: 12px;
  overflow:hidden;
  margin: 6px 0 10px;
}
.bar{
  height: 100%;
  width: 62%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 95%, white 5%), color-mix(in srgb, var(--brand2) 92%, white 8%), color-mix(in srgb, var(--brand3) 90%, white 10%));
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(96,165,250,.22), 0 0 38px rgba(20,241,149,.16);
  animation: load 2.2s ease-in-out infinite;
}
@keyframes load{
  0%{ transform: translateX(-8%); filter:saturate(1.15); opacity:.92;}
  50%{ transform: translateX(8%); filter:saturate(1.35); opacity:1;}
  100%{ transform: translateX(-8%); filter:saturate(1.15); opacity:.92;}
}
.hint{
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: .02em;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}
.chip{
  font-size: 12px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--subStroke);
  background: var(--subGlass);
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 0 14px rgba(96,165,250,.22);
}

.line{
  height:1px;
  margin: 16px 0 14px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stroke) 90%, transparent), transparent);
}

.footer{
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
  z-index: 9;
  text-align:center;
  font-size: 12px;
  color: var(--muted2);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
}
.footer a{
  color: var(--muted);
  text-decoration:none;
}
.footer a:hover{
  color: var(--text);
}

/* 不支持毛玻璃时的降级 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .card, .themeSwitch{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .themeSwitch{
    background: rgba(10,14,30,.86);
  }
  html[data-theme="light"] .card,
  html[data-theme="light"] .themeSwitch{
    background: rgba(255,255,255,.92);
  }
}

@media (prefers-reduced-motion: reduce){
  .blob, .bar{ animation: none !important; }
  .themeThumb, .icp{ transition: none !important; }
}