:root{
  --bg:#070809; --surface:#0e1012; --surface-2:#14171a; --hair:rgba(255,255,255,.07);
  --hair-2:rgba(255,255,255,.12); --ink:#f3f5f6; --sub:#8b9398; --dim:#5a6166;
  --acc:#6ee7b7; --acc-2:#38bdf8; --acc-soft:rgba(110,231,183,.12);
  --r:16px; --maxw:980px;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Consolas",monospace;
  --sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.16,.84,.24,1);
}
@media (prefers-color-scheme:light){
  :root{ --bg:#fafbfb; --surface:#ffffff; --surface-2:#f3f5f6; --hair:rgba(8,15,20,.08);
    --hair-2:rgba(8,15,20,.14); --ink:#0c1114; --sub:#5c656b; --dim:#9aa1a6;
    --acc:#059669; --acc-2:#0284c7; --acc-soft:rgba(5,150,105,.1); }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6;
  min-height:100dvh; overflow-x:hidden; letter-spacing:-.01em;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 75%);opacity:.6}
.glow{position:fixed;top:-20%;left:50%;transform:translateX(-50%);width:70vw;height:55vh;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(110,231,183,.16),transparent 60%);filter:blur(40px)}
.wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,5vw,28px)}

/* top bar */
.bar{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--hair)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand .dot{width:30px;height:30px;border-radius:9px;background:radial-gradient(circle at 35% 30%,var(--acc),var(--acc-2));box-shadow:0 0 18px var(--acc-soft);position:relative}
.brand .dot::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--bg)}
.brand b{font-size:15.5px;letter-spacing:.02em}
.brand .pill{font-family:var(--mono);font-size:10px;color:var(--acc);border:1px solid var(--hair-2);padding:2px 7px;border-radius:6px;margin-left:2px}
.bar-r{display:flex;align-items:center;gap:14px}
.tnow{font-family:var(--mono);font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.swt{cursor:pointer;width:34px;height:34px;border-radius:9px;border:1px solid var(--hair-2);background:var(--surface);color:var(--ink);
  display:grid;place-items:center;font-size:14px;transition:.3s var(--ease)}
.swt:hover{border-color:var(--acc);color:var(--acc)}

/* hero */
.hero{text-align:center;padding:clamp(56px,12vw,116px) 0 clamp(8px,3vw,20px)}
.status-chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;color:var(--sub);
  border:1px solid var(--hair-2);background:var(--surface);padding:7px 15px;border-radius:999px;margin-bottom:30px}
.status-chip i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:bp 2s infinite}
@keyframes bp{50%{opacity:.35;transform:scale(.7)}}
h1{font-size:clamp(2.4rem,8vw,4.6rem);line-height:1.05;font-weight:760;letter-spacing:-.035em}
h1 .g{background:linear-gradient(100deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.h1-sub{margin-top:14px;font-family:var(--mono);font-size:clamp(1rem,3vw,1.4rem);font-weight:600;letter-spacing:.04em}
.h1-sub .g{background:linear-gradient(100deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{margin:18px auto 0;max-width:52ch;color:var(--sub);font-size:clamp(1rem,2.3vw,1.15rem)}

/* main domain — dedicated block */
.primary{margin:clamp(40px,6vw,60px) auto 0;max-width:680px;border:1px solid var(--hair-2);border-radius:calc(var(--r) + 6px);
  background:linear-gradient(180deg,var(--surface),var(--bg));padding:clamp(24px,5vw,40px);position:relative;overflow:hidden;
  box-shadow:0 30px 80px -50px rgba(0,0,0,.8)}
.primary::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.7}
.primary .cap{display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:16px}
.primary .dom{font-family:var(--mono);font-size:clamp(1.9rem,8vw,3.2rem);font-weight:700;letter-spacing:-.02em;word-break:break-all;
  background:linear-gradient(100deg,var(--ink),var(--acc));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.primary .meta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--sub)}
.primary .meta i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:bp 1.8s infinite}
.p-act{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.btn{cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;border:1px solid var(--hair-2);padding:13px 26px;border-radius:12px;
  text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:.3s var(--ease);color:var(--ink);background:var(--surface)}
.btn.fill{background:linear-gradient(100deg,var(--acc),var(--acc-2));color:#04130d;border:none}
.btn.fill:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--acc)}
.btn.line:hover{border-color:var(--acc);color:var(--acc)}

/* save shortcut hint */
.save-hint{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px auto 0;max-width:680px;
  border:1px dashed var(--hair-2);border-radius:14px;background:var(--surface);padding:14px 20px;cursor:pointer;
  transition:.3s var(--ease);font-size:13.5px;color:var(--sub)}
.save-hint:hover{border-color:var(--acc);color:var(--ink)}
.save-hint .si{width:18px;height:18px;flex:none;color:var(--acc)}
.save-hint b{color:var(--ink);font-weight:600}
.save-hint kbd{font-family:var(--mono);font-size:12px;color:var(--acc);background:var(--surface-2);
  border:1px solid var(--hair-2);border-bottom-width:2px;border-radius:7px;padding:3px 9px;letter-spacing:.02em}
.save-hint .plus{color:var(--dim);font-size:12px}

/* section frame */
section{padding:clamp(50px,9vw,84px) 0}
.head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.head .no{font-family:var(--mono);font-size:13px;color:var(--acc)}
.head h2{font-size:clamp(1.35rem,3.6vw,1.8rem);font-weight:680;letter-spacing:-.02em}
.head .ln{flex:1;height:1px;background:var(--hair);align-self:center}

/* backup nodes — simple chips */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.chip-row{display:flex;align-items:center;gap:14px;border:1px solid var(--hair);background:var(--surface);
  border-radius:var(--r);padding:16px 18px;transition:.28s var(--ease)}
.chip-row:hover{border-color:var(--hair-2);background:var(--surface-2);transform:translateY(-2px)}
.chip-row .n{font-family:var(--mono);font-size:12px;color:var(--dim);flex:none}
.chip-row .h{font-family:var(--mono);font-size:clamp(.95rem,3vw,1.1rem);font-weight:600;flex:1;word-break:break-all}
.chip-row .ok{font-size:11px;color:var(--acc);display:inline-flex;align-items:center;gap:6px;flex:none}
.chip-row .ok i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 7px var(--acc)}
.chip-row .cp{cursor:pointer;border:1px solid var(--hair);background:transparent;color:var(--sub);font:inherit;font-size:12px;
  padding:7px 13px;border-radius:9px;flex:none;transition:.25s var(--ease)}
.chip-row .cp:hover{border-color:var(--acc);color:var(--acc)}

/* notice (placed BEFORE contact) */
.notice{border:1px solid var(--hair);border-radius:calc(var(--r) + 4px);background:var(--surface);
  padding:clamp(24px,4vw,36px);position:relative;overflow:hidden}
.notice::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 100% 0,var(--acc-soft),transparent)}
.notice .steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:680px){.notice .steps{grid-template-columns:1fr;gap:18px}}
.step .k{font-family:var(--mono);font-size:13px;color:var(--acc);margin-bottom:8px}
.step b{display:block;font-size:15px;margin-bottom:5px}
.step p{font-size:13.5px;color:var(--sub)}
.notice-pin{position:relative;display:flex;align-items:center;gap:12px;margin-top:24px;padding:15px 18px;
  border:1px solid var(--acc);border-radius:14px;background:var(--acc-soft);font-size:14px;color:var(--ink);flex-wrap:wrap}
.notice-pin svg{width:20px;height:20px;flex:none;color:var(--acc)}
.notice-pin strong{color:var(--acc);font-weight:700}
.notice-pin kbd{font-family:var(--mono);font-size:12px;color:var(--acc);background:var(--surface);
  border:1px solid var(--hair-2);border-bottom-width:2px;border-radius:7px;padding:3px 9px}

/* contact */
.cnt{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:680px){.cnt{grid-template-columns:1fr}}
.cc{display:flex;align-items:center;gap:13px;border:1px solid var(--hair);background:var(--surface);border-radius:var(--r);
  padding:16px;text-decoration:none;color:var(--ink);cursor:pointer;transition:.28s var(--ease)}
.cc:hover{border-color:var(--acc);transform:translateY(-2px)}
.cc .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--acc)}
.cc .ic svg{width:18px;height:18px}
.cc .kk{font-size:11px;color:var(--dim);letter-spacing:.04em}
.cc .vv{font-family:var(--mono);font-size:13.5px;word-break:break-all}

/* footer */
footer{border-top:1px solid var(--hair);padding:34px 0 52px;margin-top:24px}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer .fl{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:13px}
footer .fl .dot{width:22px;height:22px;border-radius:7px;background:radial-gradient(circle at 35% 30%,var(--acc),var(--acc-2))}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--sub);text-decoration:none;font-size:13px;transition:.3s}
footer a:hover{color:var(--acc)}
footer small{color:var(--dim);font-size:12px}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%,40px);z-index:60;
  display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:12px;background:var(--surface);border:1px solid var(--acc);
  color:var(--ink);font-size:13.5px;font-weight:600;box-shadow:0 20px 50px -20px rgba(0,0,0,.7);opacity:0;pointer-events:none;
  transition:.42s var(--ease);backdrop-filter:blur(12px)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 9px var(--acc)}

/* reveal */
.r{opacity:0;transform:translateY(22px);transition:.8s var(--ease)}
.r.s{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.r{opacity:1;transform:none}.status-chip i,.primary .meta i,.chip-row .ok i{animation:none}}