:root { --bg:#0b0e0c; --panel:#0f1310; --panel-2:#121814; --line:#232b24; --ink:#e9efe7; --ink-dim:#8b978a; --ink-faint:#5b675c; --green:#46e08d; --green-dim:rgba(70,224,141,.12); --amber:#f2b552; --serif:"Noto Serif SC","Songti SC",SimSun,serif; --sans:"Noto Sans SC","Microsoft YaHei",sans-serif; --mono:"IBM Plex Mono",monospace; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body { min-height:100vh; min-height:100dvh; margin:0; padding:max(32px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); background-color:var(--bg); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:72px 72px; color:var(--ink); font-family:var(--sans); line-height:1.75; -webkit-font-smoothing:antialiased; }
::selection { background:var(--green); color:#08120c; } a { color:inherit; text-decoration:none; }.wrap { width:min(880px,100%); margin:0 auto; }.top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:40px; }.brand { display:inline-flex; align-items:center; gap:8px; font:500 14px var(--mono); letter-spacing:.04em; }.brand img { width:25px; height:25px; }.brand em { color:var(--green); font-style:normal; }.status { display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border:1px solid rgba(70,224,141,.3); border-radius:99px; background:var(--green-dim); color:var(--green); font:12px var(--mono); letter-spacing:.08em; }.status i { width:7px; height:7px; border-radius:50%; background:var(--green); animation:breathe 2.2s ease-in-out infinite; } @keyframes breathe { 50% { opacity:.35; } }
.hero { margin-bottom:44px; }.kicker { margin:0 0 18px; color:var(--ink-dim); font:12px var(--mono); letter-spacing:.16em; }.kicker b { color:var(--green); font-weight:500; }.hero h1 { margin:0 0 15px; font:900 clamp(30px,5vw,42px)/1.35 var(--serif); }.hero h1 span { color:var(--green); }.lead { max-width:46em; margin:0; color:var(--ink-dim); font-size:14.5px; }.lead b { color:var(--ink); font-weight:500; }.domain { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:26px; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); transition:border-color .2s,background-color .2s; }.domain:hover { border-color:var(--green); }.domain span { color:var(--green); font:500 15px var(--mono); overflow-wrap:anywhere; }.domain b { flex:none; color:var(--ink-dim); font:500 11px var(--mono); }
.directory { border-top:1px solid var(--line); padding:40px 0; }.section-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }.section-head > span { color:var(--ink-faint); font:11px var(--mono); }.contacts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.contact-card { min-width:0; min-height:405px; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--panel); display:flex; flex-direction:column; }.card-meta { display:flex; justify-content:space-between; color:var(--ink-faint); font:11px var(--mono); letter-spacing:.04em; }.card-meta i { color:var(--green); font-style:normal; }.contact-card h2 { margin:14px 0 0; font:900 20px var(--serif); }.qr { display:block; width:min(100%,178px); aspect-ratio:1; margin:30px auto 22px; padding:8px; background:#fff; border:1px solid var(--line); }.contact-card p { margin:auto 0 0; color:var(--ink-dim); font-size:13px; text-align:center; }.contact-card p strong { color:var(--ink); font:500 13px var(--mono); }.email-card { background:var(--panel-2); }.at-mark { display:grid; place-items:center; width:92px; height:92px; margin:42px 0 24px; border:1px solid rgba(70,224,141,.35); border-radius:50%; color:var(--green); font:48px var(--serif); }.email { color:var(--green); font:500 14px var(--mono); overflow-wrap:anywhere; border-bottom:1px solid rgba(70,224,141,.4); padding-bottom:5px; align-self:flex-start; }.email:hover { color:#5ceb9e; }.email-card p { text-align:left; }
footer { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:24px 0 8px; color:var(--ink-faint); font:12px var(--mono); }.contact-card, .hero, .directory { animation:fade-in .55s cubic-bezier(.2,.7,.3,1) both; }.directory { animation-delay:.08s; } @keyframes fade-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; } }
.bookmark-note { margin:12px 0 0; color:var(--ink-dim); font-size:13px; }.bookmark-note span { margin-right:8px; color:var(--amber); font:500 11px var(--mono); letter-spacing:.08em; }
@media (max-width:720px) { body { padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right)); background-size:56px 56px; }.top { margin-bottom:32px; }.hero { margin-bottom:36px; }.directory { padding:32px 0; }.contacts { grid-template-columns:1fr; }.contact-card { min-height:340px; }.qr { width:180px; margin:24px auto 20px; }.email-card { min-height:280px; }.at-mark { margin:30px 0 20px; } footer { flex-direction:column; gap:4px; } }