/* Lucent — liquid-glass design system · light + dark · desktop + mobile · EN/ZH/JA/KO */
:root{
  color-scheme:dark;
  --bg:#080b16;--ink:#eef1ff;--muted:#a3abcf;--faint:#7c85ae;
  --accent:#7dd3fc;--accent2:#c4b5fd;--accent3:#f0abfc;
  --glass:rgba(255,255,255,.06);--glass-hi:rgba(255,255,255,.13);
  --rim:rgba(255,255,255,.6);--rim-lo:rgba(255,255,255,.16);--edge:rgba(255,255,255,.1);
  --spec:rgba(255,255,255,.14);--shadow:rgba(0,0,0,.38);--sheet:rgba(22,27,54,.92);--sheet-solid:#161b36;--code:rgba(0,0,0,.3);
  --h1:linear-gradient(115deg,#fff 15%,var(--accent) 55%,var(--accent3) 90%);
  --btn:linear-gradient(120deg,#38bdf8,#818cf8);--btn-ink:#081020;--btn-glow:rgba(56,189,248,.38);
  --mesh1:#1a2350;--mesh2:#3a1c5e;--mesh3:#0c3a4d;--glint:.06;--grain:.05;--blob:.5;
  --o1:#5b5bd6;--o2:#0ea5e9;--o3:#a855f7;--o4:#14b8a6;
  --radius:24px;--blur:26px;--ob:64px;
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#eef2fb;--ink:#0f1530;--muted:#464f78;--faint:#5f6891;
  --accent:#0369a1;--accent2:#6d28d9;--accent3:#be185d;
  --glass:rgba(255,255,255,.46);--glass-hi:rgba(255,255,255,.78);
  --rim:rgba(255,255,255,1);--rim-lo:rgba(255,255,255,.6);--edge:rgba(15,21,48,.09);
  --spec:rgba(255,255,255,.7);--shadow:rgba(52,66,130,.18);--sheet:rgba(252,253,255,.94);--sheet-solid:#fcfdff;--code:rgba(15,21,48,.06);
  --h1:linear-gradient(115deg,#0f1530 10%,#0369a1 55%,#a21caf 92%);
  --btn:linear-gradient(120deg,#0284c7,#4f46e5);--btn-ink:#fff;--btn-glow:rgba(79,70,229,.32);
  --mesh1:#d4e5ff;--mesh2:#e9dcff;--mesh3:#d0f4ec;--glint:.55;--grain:.035;--blob:.6;
  --o1:#93c5fd;--o2:#7dd3fc;--o3:#d8b4fe;--o4:#f9a8d4;
}
:lang(zh){--f:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
:lang(ja){--f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",sans-serif;line-break:strict}
:lang(ko){--f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;word-break:keep-all}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{font-family:var(--f);background:var(--bg);color:var(--ink);line-height:1.8;overflow-x:hidden;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-wrap:pretty;transition:background-color .35s,color .35s}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a,button,summary{touch-action:manipulation}

/* ---------- liquid background ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1100px 750px at 85% -10%,var(--mesh1),transparent 60%),
  radial-gradient(950px 700px at 8% 18%,var(--mesh2),transparent 55%),
  radial-gradient(1000px 800px at 50% 115%,var(--mesh3),transparent 60%),var(--bg)}
.bg::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(1000px 750px at 75% 20%,var(--mesh2),transparent 60%),
  radial-gradient(900px 700px at 20% 80%,var(--mesh3),transparent 55%),
  radial-gradient(850px 650px at 45% 35%,var(--mesh1),transparent 50%);
  opacity:.7;filter:blur(40px);animation:mesh-flow 36s ease-in-out infinite alternate;
  will-change:transform,opacity;pointer-events:none}
.bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 38% at 18% 0%,rgba(255,255,255,var(--glint)),transparent 70%),
  radial-gradient(42% 30% at 92% 100%,rgba(255,255,255,calc(var(--glint)*.7)),transparent 70%);
  animation:glint-drift 24s ease-in-out infinite alternate;
  will-change:transform,opacity;pointer-events:none}
.orb{position:absolute;width:clamp(280px,42vmax,560px);aspect-ratio:1;background:var(--o);opacity:var(--blob);filter:blur(var(--ob));
  border-radius:42% 58% 63% 37%/45% 38% 62% 55%;will-change:transform,opacity}
.orb::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 60% 40%,var(--o-shift),transparent 70%);
  animation:color-shift 28s ease-in-out infinite alternate;
  will-change:transform,opacity}
.orb.a{--o:var(--o1);--o-shift:var(--o3);left:-9%;top:2%;animation:orb-flow-a 32s ease-in-out infinite alternate}
.orb.b{--o:var(--o2);--o-shift:var(--o4);right:-11%;top:30%;animation:orb-flow-b 36s ease-in-out infinite alternate;animation-delay:-8s}
.orb.c{--o:var(--o3);--o-shift:var(--o1);left:26%;bottom:-16%;animation:orb-flow-c 34s ease-in-out infinite alternate;animation-delay:-14s}
.orb.d{--o:var(--o4);--o-shift:var(--o2);right:24%;top:-14%;width:clamp(220px,30vmax,420px);animation:orb-flow-d 40s ease-in-out infinite alternate;animation-delay:-5s}
@keyframes mesh-flow{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.55}
  50%{transform:translate3d(-4vw,5vh,0) scale(1.08) rotate(15deg);opacity:.8}
  100%{transform:translate3d(5vw,-3vh,0) scale(.96) rotate(-10deg);opacity:.6}}
@keyframes glint-drift{
  0%{opacity:.8;transform:scale(1)}
  50%{opacity:1.2;transform:scale(1.04) translate3d(2vw,1vh,0)}
  100%{opacity:.9;transform:scale(.98) translate3d(-1vw,2vh,0)}}
@keyframes color-shift{
  0%{opacity:.15;transform:scale(.9) rotate(0deg)}
  50%{opacity:.65;transform:scale(1.1) rotate(60deg)}
  100%{opacity:.25;transform:scale(.95) rotate(120deg)}}
@keyframes orb-flow-a{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:var(--blob)}
  33%{transform:translate3d(10vw,8vh,0) rotate(45deg) scale(1.12);opacity:calc(var(--blob)*1.1)}
  66%{transform:translate3d(4vw,18vh,0) rotate(90deg) scale(.95);opacity:calc(var(--blob)*.85)}
  100%{transform:translate3d(-4vw,12vh,0) rotate(140deg) scale(1.06);opacity:var(--blob)}}
@keyframes orb-flow-b{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:var(--blob)}
  33%{transform:translate3d(-10vw,-8vh,0) rotate(-40deg) scale(1.08);opacity:calc(var(--blob)*.88)}
  66%{transform:translate3d(-16vw,6vh,0) rotate(-85deg) scale(.94);opacity:calc(var(--blob)*1.12)}
  100%{transform:translate3d(-6vw,14vh,0) rotate(-130deg) scale(1.04);opacity:var(--blob)}}
@keyframes orb-flow-c{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:var(--blob)}
  33%{transform:translate3d(12vw,-12vh,0) rotate(40deg) scale(1.14);opacity:calc(var(--blob)*1.08)}
  66%{transform:translate3d(-8vw,-18vh,0) rotate(95deg) scale(.92);opacity:calc(var(--blob)*.9)}
  100%{transform:translate3d(6vw,-6vh,0) rotate(150deg) scale(1.08);opacity:var(--blob)}}
@keyframes orb-flow-d{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:var(--blob)}
  33%{transform:translate3d(-12vw,14vh,0) rotate(-50deg) scale(1.1);opacity:calc(var(--blob)*.86)}
  66%{transform:translate3d(-4vw,22vh,0) rotate(-105deg) scale(.92);opacity:calc(var(--blob)*1.14)}
  100%{transform:translate3d(8vw,10vh,0) rotate(-160deg) scale(1.05);opacity:var(--blob)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- liquid glass material ---------- */
.glass{position:relative;isolation:isolate;border-radius:var(--radius);
  background:linear-gradient(145deg,var(--glass-hi),var(--glass) 42%,var(--glass));
  backdrop-filter:blur(var(--blur)) saturate(1.8);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.8);
  box-shadow:0 14px 44px var(--shadow),inset 0 1px 0 var(--rim-lo),inset 0 -1px 0 var(--edge);
  transition:transform .25s,box-shadow .25s}
.glass::before,nav::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:linear-gradient(140deg,var(--rim),transparent 28%,transparent 66%,var(--rim-lo));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),var(--spec),transparent 62%)}
@supports not (backdrop-filter:blur(1px)){.glass{background:var(--sheet)}}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left)) 0 max(24px,env(safe-area-inset-right))}
section{padding:clamp(56px,9vw,90px) 0}
.page-head{padding:clamp(72px,11vw,120px) 0 40px;text-align:center}

/* ---------- navigation ---------- */
nav{position:sticky;top:14px;z-index:60;isolation:isolate;margin:14px auto 0;width:min(1080px,calc(100% - 32px));border-radius:999px;
  box-shadow:0 10px 36px var(--shadow)}
nav::before{z-index:-1;padding:0;background:var(--glass-hi);border-radius:inherit;-webkit-mask:none;mask:none;
  box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--rim-lo);
  backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);transition:background-color .3s}
nav.scrolled::before{background:var(--sheet)}
nav .wrap{display:flex;align-items:center;height:60px;padding:0 14px 0 26px;max-width:none}
.logo{font-size:22px;font-weight:800;letter-spacing:.04em;text-decoration:none;
  background:linear-gradient(120deg,var(--accent),var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
nav .links{display:flex;gap:2px;margin-left:auto;margin-right:12px}
nav .links a{color:var(--muted);text-decoration:none;font-size:15px;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:color .2s,background-color .2s}
nav .links a.active{color:var(--ink);background:var(--glass-hi);box-shadow:inset 0 1px 0 var(--rim-lo),inset 0 0 0 1px var(--edge)}
.tools{display:flex;gap:8px;align-items:center}
.theme,.burger,.lang summary{height:40px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font:inherit;transition:background-color .2s,transform .15s}
.theme,.burger{width:40px}
.theme:active,.burger:active,.lang summary:active{transform:scale(.92)}
.theme svg{display:block}.theme .moon{display:none}
[data-theme=light] .theme .sun{display:none}[data-theme=light] .theme .moon{display:block}
.burger{display:none;flex-direction:column;gap:5px}
.burger i{display:block;width:17px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s}
nav.open .burger i:first-child{transform:translateY(3.5px) rotate(45deg)}nav.open .burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* collapsed language switcher */
.lang{position:relative}
.lang summary{list-style:none;gap:7px;padding:0 12px;font-size:13.5px;font-weight:600}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s;opacity:.7}
.lang[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.lang .menu{position:absolute;right:0;top:calc(100% + 12px);min-width:184px;padding:6px;border-radius:20px;background:var(--sheet);
  border:1px solid var(--edge);box-shadow:0 22px 60px var(--shadow);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8)}
.lang .menu a{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 14px;border-radius:14px;color:var(--ink);text-decoration:none;font-size:15.5px}
.lang .menu a.cur{background:var(--glass-hi);font-weight:700}
.lang .menu a.cur::after{content:"✓";color:var(--accent)}

/* ---------- type ---------- */
.kicker{color:var(--accent);font-size:13px;letter-spacing:.2em;font-weight:700;margin-bottom:16px}
h1{font-size:clamp(52px,9vw,100px);font-weight:900;letter-spacing:.02em;line-height:1.15;padding-bottom:.06em;
  background:var(--h1);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(28px,4.5vw,44px);font-weight:800;margin-bottom:16px;letter-spacing:.01em;line-height:1.35}
h3{font-size:20px;margin-bottom:10px}
h1,h2,h3,.tagline{text-wrap:balance}
:lang(zh) .kicker,:lang(ja) .kicker,:lang(ko) .kicker{letter-spacing:.12em}
.lead{color:var(--muted);max-width:700px;font-size:17px}
.center{text-align:center}.center .lead{margin:0 auto}
.tagline{font-size:clamp(19px,3vw,26px);font-weight:600;margin:24px 0 12px}
.sub{color:var(--muted);font-size:16px;max-width:660px;margin:0 auto}
.grad-text{background:linear-gradient(120deg,var(--accent),var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 34px;border-radius:16px;font-size:16px;font-weight:700;text-decoration:none;
  transition:transform .18s,box-shadow .18s,background-color .18s}
.btn.primary{background:var(--btn);color:var(--btn-ink);box-shadow:0 8px 30px var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.ghost{background:var(--glass);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--rim-lo);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn.big{min-height:58px;padding:0 48px;font-size:18px}
.btn:active{transform:scale(.97)}
.btn[aria-busy="true"]{opacity:.75;pointer-events:none}

/* ---------- content blocks ---------- */
.card{padding:34px 30px}
.card .icon{font-size:36px;margin-bottom:16px;display:block}
.card p{font-size:15px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}.grid.two{grid-template-columns:repeat(2,1fr)}
.panel{padding:clamp(30px,5vw,46px) clamp(22px,4.5vw,42px);margin-top:56px}
.panel p{color:var(--muted);margin-top:12px}
.hero{padding:clamp(48px,8vw,84px) 0 44px;text-align:center}
.badge{display:inline-block;padding:8px 20px;border-radius:999px;font-size:12.5px;letter-spacing:.12em;margin-bottom:30px;color:var(--accent);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--rim-lo);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.stats{display:flex;gap:16px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.stat{padding:22px 36px;min-width:160px}
.stat b{display:block;font-size:32px;font-weight:800;background:linear-gradient(120deg,var(--accent),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:13px;color:var(--muted)}
.feature-block{margin-top:64px}
.feature-block .num{font-size:13px;letter-spacing:.2em;color:var(--faint);font-weight:700}
.feature-block h2{margin:8px 0 12px}
.feature-block .body{color:var(--muted);font-size:16px;max-width:760px}.feature-block .body strong{color:var(--ink)}
.points{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.point{padding:22px 24px;font-size:15px;color:var(--muted)}.point b{color:var(--ink);display:block;margin-bottom:6px;font-size:16px}
.dl-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px}
.dl-card{padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);text-align:center}
.dl-card .icon{font-size:56px}.dl-card h3{font-size:24px;margin:16px 0 10px}
.dl-card p{color:var(--muted);font-size:15px;margin-bottom:26px}
.dl-card .ver{display:inline-block;margin-top:18px;font-size:13px;color:var(--faint)}
.dl-card .ver a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.dl-card .ver a:hover{color:var(--accent)}
.repo-strip{margin-top:40px;padding:30px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.repo-strip code{font-size:15px;color:var(--accent);background:var(--code);padding:10px 18px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--edge);overflow-wrap:anywhere}
.steps{margin-top:50px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{padding:30px 26px;text-align:center}
.step .n{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;background:var(--btn);color:var(--btn-ink)}
.step p{font-size:14.5px;color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:50px}
.contact-card{padding:34px 30px;display:flex;gap:20px;align-items:flex-start;text-decoration:none;color:var(--ink)}
.contact-card .icon{font-size:34px;flex-shrink:0}.contact-card h3{font-size:18px;margin-bottom:6px}
.contact-card p{font-size:14px;color:var(--muted)}.contact-card .val{color:var(--accent);font-size:15px;overflow-wrap:anywhere}

footer{margin-top:40px;padding:52px 0 max(40px,env(safe-area-inset-bottom));background:var(--glass);border-top:1px solid var(--edge);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer h4{font-size:14px;letter-spacing:.1em;color:var(--faint);margin-bottom:12px;font-weight:700}
footer a{display:block;color:var(--muted);text-decoration:none;font-size:14.5px;padding:5px 0;transition:color .2s}
footer .brand p{font-size:14px;color:var(--muted);max-width:280px}
footer .bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--edge);display:flex;justify-content:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--faint)}

/* ---------- motion ---------- */
.js .rv{opacity:0}
.js .rv.on{opacity:1;animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* ---------- desktop: precise pointer ---------- */
@media(hover:hover) and (pointer:fine){
  .glass:hover::after{opacity:1}
  .card:hover,.contact-card:hover{transform:translateY(-6px);box-shadow:0 22px 56px var(--shadow),inset 0 1px 0 var(--rim-lo)}
  .btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.45)}
  .btn.ghost:hover,.theme:hover,.lang summary:hover{background:var(--glass-hi);color:var(--ink)}
  nav .links a:hover,.lang .menu a:hover,footer a:hover{color:var(--ink)}
  footer a:hover{color:var(--accent)}
  nav .links a:not(.active):hover{background:var(--glass)}
}

/* ---------- tablet & mobile ---------- */
@media(max-width:960px){.grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}footer .cols{grid-template-columns:1fr 1fr}footer .brand{grid-column:1/-1}}
@media(max-width:860px){
  :root{--blur:18px;--ob:46px}
  .orb.d{display:none}.orb{will-change:auto}
  nav{top:0;margin:0;width:100%;border-radius:0 0 26px 26px;padding-top:env(safe-area-inset-top)}
  nav .wrap{height:58px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
  .burger{display:flex}.logo{margin-inline-end:auto}
  nav .links{position:absolute;left:12px;right:12px;top:calc(100% + 8px);flex-direction:column;gap:2px;margin:0;padding:8px;border-radius:26px;
    background:var(--sheet-solid);border:1px solid var(--edge);box-shadow:0 24px 60px var(--shadow);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .22s,transform .22s,visibility .22s}
  nav.open .links{opacity:1;visibility:visible;transform:none}
  nav .links a{display:flex;align-items:center;min-height:52px;padding:0 18px;font-size:17px;border-radius:18px}
  html{scroll-padding-top:76px}
}
@media(max-width:720px){
  .grid,.grid.two,.dl-cards,.points,.contact-grid{grid-template-columns:1fr}
  .grid{gap:14px;margin-top:36px}.card{padding:26px 22px}
  .hero{padding:40px 0 36px}.page-head{padding:56px 0 24px}.feature-block{margin-top:48px}
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,104px),1fr));gap:10px;margin-top:40px}
  .stat{padding:16px 10px;min-width:0}.stat b{font-size:26px}.stat span{font-size:12px}
  .cta{flex-direction:column;align-items:stretch}.btn,.btn.big{width:100%;padding:0 20px}
  .repo-strip{padding:24px 22px}
}
@media(max-width:440px){.wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}footer .cols{grid-template-columns:1fr}.lang summary{padding:0 10px}}

/* ---------- if app.js never runs, reveal the page after a short delay instead of leaving it blank ---------- */
@keyframes rv-failsafe{to{opacity:1}}
html.js:not(.rv-ready) .rv:not(.on){animation:rv-failsafe .5s ease 2.5s forwards}

/* ---------- long-form text: privacy policy, terms, release notes ---------- */
.prose h2,.prose h3{font-size:clamp(21px,2.8vw,26px);font-weight:800;line-height:1.35;margin:40px 0 10px;scroll-margin-top:96px}
.prose h2.policy-title{font-size:clamp(28px,4.4vw,40px);margin:0 0 6px}
.prose h4{font-size:clamp(17px,2.2vw,19px);font-weight:700;margin:26px 0 6px;color:var(--ink);scroll-margin-top:96px}
.prose p,.prose li{color:var(--muted);font-size:16px;line-height:1.85}
.prose p{margin:12px 0}
.prose strong,.prose em{color:var(--ink)}
.prose ul,.prose ol{margin:12px 0 14px 1.25em}
.prose li{margin:7px 0;padding-left:.2em}
.prose li::marker{color:var(--faint)}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose code{font-size:.9em;color:var(--ink);background:var(--code);padding:2px 7px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--edge);overflow-wrap:anywhere}
.prose hr{border:0;border-top:1px solid var(--edge);margin:36px 0 20px}
.prose .meta{margin:4px 0 6px}
.prose .meta strong{color:var(--accent);font-size:14px;letter-spacing:.04em}
.prose .table-wrap{overflow-x:auto;margin:20px 0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--edge);-webkit-overflow-scrolling:touch}
.prose table{width:100%;border-collapse:collapse;min-width:620px}
.prose th,.prose td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--edge);font-size:14.5px;line-height:1.7;color:var(--muted)}
.prose th{color:var(--ink);font-weight:700;background:var(--glass)}
.prose tr:last-child td{border-bottom:0}
.prose td:first-child{color:var(--ink);min-width:220px}
.prose blockquote{margin:16px 0;padding:4px 0 4px 18px;border-left:3px solid var(--edge)}
.prose pre{overflow-x:auto;margin:16px 0;padding:14px 18px;border-radius:14px;background:var(--code);box-shadow:inset 0 0 0 1px var(--edge)}
.prose pre code{background:none;box-shadow:none;padding:0}
.policy{text-align:left;margin-top:64px}
.policy>.panel{margin-top:18px}
.policy>.panel:first-child{margin-top:0}
.policy-toc{margin:20px 0 6px;padding:18px 22px;border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--edge)}
.policy-toc .toc-label{font-size:13px;letter-spacing:.14em;font-weight:700;color:var(--faint);margin:0 0 6px}
.policy-toc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.policy-toc li{margin:0;padding:0;break-inside:avoid}
.policy-toc a{display:block;padding:5px 0;font-size:15px;color:var(--muted);text-decoration:none}
.policy-toc a:hover{color:var(--accent)}
.legal-note{max-width:660px;margin:26px auto 0;text-align:center;font-size:13.5px;line-height:1.7;color:var(--faint)}
.legal-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.legal-note a:hover{color:var(--accent)}

/* ---------- screenshots (shown by app.js only once the image files exist) ---------- */
.shots{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:center;margin-top:44px}
.shot{margin:0;padding:12px}
.shot[hidden]{display:none}
.shot[data-device=android]{flex:0 1 330px}
.shot[data-device=windows]{flex:1 1 520px;max-width:760px}
.shot img{display:block;width:100%;height:auto;border-radius:calc(var(--radius) - 10px)}
.shot figcaption{padding:12px 6px 2px;font-size:13px;color:var(--faint);text-align:center}

/* ---------- version label while the release is being looked up ---------- */
[data-ver].loading{display:inline-block;min-width:8ch;border-radius:8px;color:transparent;user-select:none;
  background:linear-gradient(100deg,var(--glass) 30%,var(--glass-hi) 50%,var(--glass) 70%) 0 0/200% 100%;animation:shim 1.3s linear infinite}
@keyframes shim{to{background-position:-200% 0}}

/* ---------- changelog ---------- */
.cl-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:15px}
.cl-tools label{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.cl-tools input{width:20px;height:20px;accent-color:var(--accent)}
.cl-tools .btn{min-height:44px;padding:0 24px;font-size:15px}
.cl-status{margin:22px 0;color:var(--muted);font-size:15.5px}
.cl-status a{color:var(--accent);text-underline-offset:3px}
.release{margin-top:18px;padding:0}
.release summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:22px clamp(20px,3.4vw,32px)}
.release summary::-webkit-details-marker{display:none}
.release summary::after{content:"";margin-left:auto;width:9px;height:9px;border:solid var(--faint);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.release[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.rel-title{font-size:clamp(18px,2.6vw,22px);font-weight:800}
.rel-meta{font-size:13.5px;color:var(--faint)}
.rel-badge{font-size:11px;font-weight:700;letter-spacing:.1em;padding:3px 11px;border-radius:999px;color:var(--accent);background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--edge)}
.rel-body{padding:0 clamp(20px,3.4vw,32px) 26px}
.rel-body h4{font-size:16px;margin:20px 0 4px}
.rel-body p,.rel-body li{font-size:15px}
.rel-link{display:inline-block;margin-top:10px;font-size:14px;color:var(--accent);text-underline-offset:3px}
.rel-dl{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 2px}
.rel-dl .btn{min-height:44px;padding:0 22px;font-size:14.5px}

@media(max-width:720px){.policy-toc ul{columns:1}.prose p,.prose li{font-size:15.5px}.policy{margin-top:48px}}

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

/* ==========================================================================
   Website Phase 2: Beautification Pass
   Additive enhancements — typography rhythm, gallery framing, hover/focus states
   ========================================================================== */

/* 1. Long-form typography & layout rhythm (Privacy, Terms, Changelog) */
.panel.prose,
.prose {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.panel.prose > :first-child {
  margin-top: 0;
}
.prose h2 {
  font-size: clamp(22px, 3vw, 28px);
  margin-top: 44px;
  margin-bottom: 12px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.prose h2.policy-title {
  margin-top: 0;
  margin-bottom: 10px;
}
.prose h3 {
  font-size: clamp(19px, 2.5vw, 23px);
  margin-top: 36px;
  margin-bottom: 10px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.prose h4 {
  font-size: clamp(16px, 2vw, 18px);
  margin-top: 28px;
  margin-bottom: 8px;
}
.prose p {
  margin: 14px 0;
  line-height: 1.82;
}
.prose ul,
.prose ol {
  margin: 14px 0 16px 1.4em;
}
.prose li {
  margin: 8px 0;
  line-height: 1.78;
}
.prose li::marker {
  color: var(--accent);
}
.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* Terms section separation */
.panel.prose h2:not(:first-of-type) {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--edge);
}

/* Policy Table of Contents polish */
.policy-toc {
  background: linear-gradient(145deg, var(--glass-hi), var(--glass));
  border: 1px solid var(--rim-lo);
  box-shadow: 0 10px 32px var(--shadow), inset 0 1px 0 var(--rim-lo);
  padding: 22px 26px;
  margin: 24px 0 12px;
}
.policy-toc .toc-label {
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 8px;
}
.policy-toc a {
  padding: 6px 10px;
  margin: 2px -10px;
  border-radius: 10px;
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
@media(hover:hover) and (pointer:fine) {
  .policy-toc a:hover {
    color: var(--ink);
    background: var(--glass-hi);
    transform: translateX(3px);
  }
}

/* Table styling in prose (e.g. Android permissions table in policy) */
.prose .table-wrap {
  background: var(--glass);
  border: 1px solid var(--edge);
  box-shadow: 0 8px 30px var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  margin: 24px 0;
}
.prose table {
  border-collapse: separate;
  border-spacing: 0;
}
.prose th {
  background: var(--glass-hi);
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rim-lo);
  padding: 14px 18px;
}
.prose td {
  padding: 14px 18px;
  transition: background-color 0.15s ease;
}
.prose tr:hover td {
  background: var(--glass);
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  background: var(--glass);
  padding: 12px 18px;
  border-radius: 0 12px 12px 0;
  margin: 20px 0;
}

/* Changelog polish */
.cl-tools {
  padding: 16px 22px;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: 20px;
  box-shadow: 0 8px 24px var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 24px;
}
.cl-status {
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid var(--edge);
  margin: 24px 0;
}
.release {
  border: 1px solid var(--edge);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}
.release:hover {
  border-color: var(--rim-lo);
}
.release summary {
  user-select: none;
  transition: background-color 0.2s ease;
}
@media(hover:hover) and (pointer:fine) {
  .release summary:hover {
    background: var(--glass-hi);
  }
}
.release[open] summary {
  border-bottom: 1px solid var(--edge);
  background: var(--glass-hi);
}
.rel-badge {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rel-body {
  padding: 18px clamp(20px, 3.4vw, 32px) 28px;
}
.rel-body h4 {
  font-size: 16.5px;
  margin: 22px 0 8px;
  color: var(--ink);
}
.rel-body ul {
  margin: 10px 0 14px 1.25em;
}
.rel-body li {
  margin: 6px 0;
  color: var(--muted);
}
.rel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: var(--glass);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
@media(hover:hover) and (pointer:fine) {
  .rel-link:hover {
    background: var(--glass-hi);
    color: var(--ink);
    transform: translateX(2px);
  }
}

/* 2. Screenshot gallery framing (guaranteed hidden until real images exist) */
[data-shots][hidden],
.shots[hidden],
.shot[hidden] {
  display: none !important;
}

.shots {
  perspective: 1200px;
  gap: 28px;
}
.shot {
  position: relative;
  background: linear-gradient(145deg, var(--glass-hi), var(--glass));
  border: 1px solid var(--rim-lo);
  box-shadow: 0 20px 60px var(--shadow), inset 0 1px 0 var(--rim);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.shot[data-device="android"] {
  border-radius: 40px;
  padding: 14px;
  box-shadow: 0 24px 64px var(--shadow), inset 0 0 0 1px var(--edge), inset 0 2px 0 var(--rim);
}
.shot[data-device="android"] img {
  border-radius: 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.shot[data-device="windows"] {
  border-radius: 20px;
  padding: 12px 14px 14px;
  box-shadow: 0 24px 64px var(--shadow), inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--rim);
}
.shot[data-device="windows"] img {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.shot figcaption {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  padding: 12px 6px 4px;
}
@media(hover:hover) and (pointer:fine) {
  .shot:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 30px 70px var(--shadow), inset 0 1px 0 var(--rim);
  }
}

/* 3. Consistent hover & focus states across nav, buttons, cards, links */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px !important;
}
.btn:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
nav .links a:focus-visible {
  border-radius: 999px;
  outline-offset: 2px !important;
}
.logo:focus-visible {
  border-radius: 8px;
  outline-offset: 4px !important;
}
.theme:focus-visible,
.burger:focus-visible,
.lang summary:focus-visible {
  border-radius: 999px;
  outline-offset: 2px !important;
}
.lang .menu a:focus-visible {
  outline-offset: -2px !important;
  background: var(--glass-hi);
}
.release summary:focus-visible {
  outline-offset: -2px !important;
  border-radius: var(--radius);
}
.cl-tools input[type="checkbox"]:focus-visible {
  outline-offset: 2px !important;
  border-radius: 4px;
}
.contact-card:focus-visible,
.prose a:focus-visible,
footer a:focus-visible,
.legal-note a:focus-visible,
.policy-toc a:focus-visible,
.rel-link:focus-visible {
  border-radius: 6px;
  outline-offset: 2px !important;
}

@media(hover:hover) and (pointer:fine) {
  .dl-card,
  .step,
  .point {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  }
  .dl-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 56px var(--shadow), inset 0 1px 0 var(--rim-lo);
  }
  .step:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px var(--shadow), inset 0 1px 0 var(--rim-lo);
  }
  .point:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px var(--shadow), inset 0 1px 0 var(--rim-lo);
  }
  .btn.ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px var(--shadow), inset 0 0 0 1px var(--rim-lo);
  }
  .cl-tools label:hover {
    color: var(--ink);
  }
  .cl-tools .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--shadow);
  }
  .repo-strip {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .repo-strip:hover {
    box-shadow: 0 18px 48px var(--shadow), inset 0 1px 0 var(--rim-lo);
  }
  .prose a:hover,
  .legal-note a:hover,
  .dl-card .ver a:hover {
    color: var(--accent);
  }
}

/* 4. Preservation of commit 778cb4f (stats locked to 3 columns on mobile) */
@media(max-width:720px) {
  .stats {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 5. Reduced motion support */
@media(prefers-reduced-motion:reduce) {
  .bg::before,
  .bg::after,
  .orb,
  .orb::after,
  .shot,
  .dl-card,
  .step,
  .point,
  .repo-strip,
  .release,
  .policy-toc a,
  .rel-link,
  .donate-qr-box {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Phase 4: Support / Donate section
   ========================================================================== */
section#donate {
  padding-top: clamp(24px, 4vw, 48px);
}
.donate-panel {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: clamp(28px, 4.5vw, 40px) clamp(24px, 4.5vw, 44px);
}
.donate-content {
  flex: 1 1 360px;
}
.donate-content .kicker {
  margin-bottom: 8px;
}
.donate-content h2 {
  font-size: clamp(26px, 3.8vw, 34px);
  margin-bottom: 12px;
}
.donate-content p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0;
}
.donate-qr-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.donate-qr-box {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rim-lo);
  box-shadow: 0 12px 32px var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .donate-qr-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px var(--shadow), inset 0 1px 0 var(--rim);
  }
}
.donate-qr {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1446;
}
.donate-qr-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
}
@media (max-width: 680px) {
  .donate-panel {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 28px 20px;
  }
  .donate-content {
    flex: 1 1 auto;
  }
  .donate-qr {
    width: 180px;
  }
}

.rel-pager{display:flex;align-items:center;justify-content:center;gap:36px;margin:26px 0 8px;
  position:static;z-index:auto;isolation:auto;width:auto;border-radius:0;box-shadow:none}
.rel-pager::before{display:none}
.rel-pager[hidden]{display:none}
.rel-pagelink{background:none;border:0;padding:6px 4px;font:inherit;font-size:16px;color:var(--accent);cursor:pointer}
.rel-pagelink[disabled]{color:var(--faint);cursor:default}