/* ===== neumorphism-mono · 新拟态单色 ===== */
:root{
  --base:#e4e9f0; --ink:#475067; --sub:#67708a; --dim:#9aa3b5;
  --accent:#5b76c9; --dark:#b9c2d0; --lite:#ffffff;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --maxw:880px; --r:22px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --base:#262b33; --ink:#cdd4e0; --sub:#9099a8; --dim:#666e7e;
    --accent:#8aa0e0; --dark:#1c2026; --lite:#30363f;
    color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--base);color:var(--ink);line-height:1.62;min-height:100vh;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:#fff;}
kbd{font-family:var(--mono);font-size:11.5px;border-radius:7px;padding:2px 8px;color:var(--ink);box-shadow:inset 2px 2px 4px var(--dark),inset -2px -2px 4px var(--lite);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) clamp(16px,4vw,30px) calc(44px + env(safe-area-inset-bottom));}

/* extruded panel */
.panel{background:var(--base);border-radius:var(--r);box-shadow:7px 7px 16px var(--dark),-7px -7px 16px var(--lite);}
.inset{background:var(--base);border-radius:14px;box-shadow:inset 4px 4px 9px var(--dark),inset -4px -4px 9px var(--lite);}

/* announcement */
.bar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:16px;box-shadow:5px 5px 12px var(--dark),-5px -5px 12px var(--lite);}
.bar-led{width:9px;height:9px;border-radius:999px;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none;}
.bar p{flex:1;font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-clk{font-family:var(--mono);font-size:12.5px;color:var(--accent);flex:none;}

/* header */
.head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 4px;}
.brand{display:flex;align-items:center;gap:11px;font-size:clamp(18px,4vw,22px);font-weight:700;}
.brand-knob{width:20px;height:20px;border-radius:50%;background:var(--base);flex:none;box-shadow:3px 3px 6px var(--dark),-3px -3px 6px var(--lite),inset 0 0 0 3px var(--accent);}
.toggle{width:46px;height:46px;border-radius:16px;cursor:pointer;background:var(--base);border:none;color:var(--accent);display:grid;place-items:center;box-shadow:5px 5px 12px var(--dark),-5px -5px 12px var(--lite);transition:.15s;}
.toggle svg{width:20px;height:20px;}
.toggle:active{box-shadow:inset 4px 4px 9px var(--dark),inset -4px -4px 9px var(--lite);}

/* main */
section{margin-top:clamp(22px,4vw,34px);}

.hero{text-align:center;padding:clamp(30px,6vw,52px) clamp(20px,4vw,40px);}
.tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--accent);margin-bottom:18px;}
.hero h1{font-size:clamp(38px,11vw,80px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink);word-break:break-word;}
.hero-p{max-width:560px;margin:18px auto 0;color:var(--sub);font-size:clamp(14.5px,2.6vw,17px);}

/* domain */
.domain{padding:clamp(24px,5vw,38px);}
.d-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
.d-key{font-size:11.5px;letter-spacing:.08em;color:var(--dim);padding:6px 12px;}
.d-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--accent);}
.d-live i{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:bb 2.4s infinite;}
@keyframes bb{50%{opacity:.4;}}
.d-domain{font-size:clamp(22px,6vw,46px);font-weight:700;letter-spacing:-.02em;margin:16px 0 24px;padding:18px 20px;word-break:break-all;text-align:center;}
.d-act{display:flex;flex-wrap:wrap;gap:14px;}
.key{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--sans);font-size:14.5px;font-weight:600;padding:13px 26px;border:none;border-radius:16px;background:var(--base);color:var(--ink);box-shadow:5px 5px 12px var(--dark),-5px -5px 12px var(--lite);transition:.15s;}
.key:active{box-shadow:inset 4px 4px 9px var(--dark),inset -4px -4px 9px var(--lite);}
.key-go{color:var(--accent);}
.d-save{display:inline-block;margin-top:22px;font-size:13px;color:var(--sub);cursor:pointer;}
.d-save:hover{color:var(--accent);}

/* sections */
.sect-h{display:flex;align-items:center;gap:13px;font-size:clamp(19px,4.5vw,27px);font-weight:700;margin-bottom:20px;}
.sect-no{font-family:var(--mono);font-size:13px;color:var(--accent);padding:5px 11px;}

/* rows / backups */
.rows{display:grid;gap:13px;}
.row{display:flex;align-items:center;gap:14px;padding:15px 20px;transition:.15s;}
.row:active{box-shadow:inset 4px 4px 9px var(--dark),inset -4px -4px 9px var(--lite);}
.row-n{font-family:var(--mono);font-size:13px;color:var(--accent);}
.row-h{flex:1;font-size:clamp(13.5px,3.2vw,16px);word-break:break-all;}
.row-ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);}
.row-ok i{width:6px;height:6px;border-radius:999px;background:var(--accent);}
.row-cp{background:var(--base);border:none;color:var(--ink);font-size:12px;padding:8px 15px;border-radius:11px;cursor:pointer;box-shadow:3px 3px 7px var(--dark),-3px -3px 7px var(--lite);transition:.15s;}
.row-cp:active{box-shadow:inset 3px 3px 6px var(--dark),inset -3px -3px 6px var(--lite);}

/* cards / notice */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;}
.card{padding:24px;text-align:center;}
.card-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--accent);font-weight:700;margin-bottom:12px;}
.card b{font-size:16px;display:block;margin-bottom:7px;}
.card p{color:var(--sub);font-size:13.5px;}
.pin{margin-top:14px;padding:16px 20px;color:var(--sub);font-size:13.5px;text-align:center;}
.pin strong{color:var(--accent);}

/* contacts */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;}
.contact{display:flex;flex-direction:column;gap:6px;padding:24px;cursor:pointer;transition:.15s;}
.contact:active{box-shadow:inset 4px 4px 9px var(--dark),inset -4px -4px 9px var(--lite);}
.contact-ic{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:var(--accent);margin-bottom:8px;box-shadow:inset 3px 3px 6px var(--dark),inset -3px -3px 6px var(--lite);}
.contact-ic svg{width:22px;height:22px;}
.contact-k{font-size:12px;color:var(--dim);}
.contact-v{font-size:15px;font-weight:600;word-break:break-all;}

/* footer */
.foot{margin-top:clamp(34px,6vw,54px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:22px 24px;}
.foot-id{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;}
.foot nav{display:flex;flex-wrap:wrap;gap:16px;}
.foot nav a{color:var(--sub);font-size:13px;transition:.15s;}
.foot nav a:hover{color:var(--accent);}
.foot small{color:var(--dim);font-size:12.5px;width:100%;}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:60;opacity:0;pointer-events:none;display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;font-size:14px;font-weight:600;color:var(--ink);transition:.3s cubic-bezier(.2,.8,.2,1);}
.toast span[aria-hidden]{color:var(--accent);}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);}
.reveal.on{opacity:1;transform:none;}

@media (max-width:760px){.cards,.contacts{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}
