:root{
  --paper:#f7f5ef; --paper-2:#ffffff; --ink:#16211f; --ink-2:#4a5a56; --line:#d9d4c6;
  --jade:#2f7d6d; --jade-2:#1f5a4e; --jade-soft:#e3efe9; --vermilion:#b8412e;
  --sans:"Source Sans 3","Chiron Hei HK",-apple-system,"PingFang HK","PingFang TC","Segoe UI","Microsoft JhengHei","Noto Sans CJK TC",sans-serif;
  --display:"Newsreader","Chiron Sung HK","Songti TC",Georgia,serif;
  --shadow:0 2px 4px rgba(22,33,31,.06),0 14px 40px rgba(22,33,31,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#141a19; --paper-2:#1d2523; --ink:#eef0ec; --ink-2:#a9b5b1; --line:#2f3a37; --jade:#5fb39f; --jade-2:#8fd0c0; --jade-soft:#1f2f2b; --vermilion:#e0725e; --shadow:0 2px 4px rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.4); }
}
:root[data-theme="dark"]{ --paper:#141a19; --paper-2:#1d2523; --ink:#eef0ec; --ink-2:#a9b5b1; --line:#2f3a37; --jade:#5fb39f; --jade-2:#8fd0c0; --jade-soft:#1f2f2b; --vermilion:#e0725e; --shadow:0 2px 4px rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.4); }
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;padding-block:20px 40px;padding-inline:16px}
.card{max-width:440px;margin:0 auto;background:var(--paper-2);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.head{padding:26px 22px 18px;display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;border-bottom:1px solid var(--line)}
.head img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;max-width:100%}
.head h1{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.1;margin:0;letter-spacing:-.005em}
.head .cn{font-size:15px;color:var(--ink-2);margin:2px 0 6px}
.head .role{font-size:14px;color:var(--ink);margin:0}
.head .studio{font-size:13px;color:var(--ink-2);margin:0}
.head .studio b{color:var(--vermilion);letter-spacing:.06em}
.prim{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 22px 6px}
.prim .save{grid-column:1/-1;background:var(--vermilion)}
.prim a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:12px;background:var(--jade);color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.prim a small{font-weight:400;font-size:11px;opacity:.9}
.prim a:focus-visible,.list a:focus-visible,.tab:focus-visible{outline:2px solid var(--vermilion);outline-offset:2px}
.list{padding:8px 22px 6px;display:grid;gap:6px}
.list a{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--paper)}
.list a:hover{border-color:var(--jade)}
.list .ic{width:34px;height:34px;border-radius:50%;background:var(--c,var(--jade));color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.list b{display:block;font-size:15px}
.list small{display:block;color:var(--ink-2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .go{color:var(--ink-2);font-size:18px}
.qr{padding:18px 22px 24px;border-top:1px solid var(--line);margin-top:10px}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tab{flex:1;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.qrbox{display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;min-height:260px}
.qrbox img,.qrbox canvas{max-width:100%;height:auto;display:block}
.qrcap{text-align:center;font-size:13px;color:var(--ink-2);margin:10px 0 0}
.qrcap b{color:var(--ink)}
.area{padding:0 22px 22px;font-size:13px;color:var(--ink-2);text-align:center}
.foot{max-width:440px;margin:14px auto 0;font-size:12px;color:var(--ink-2);text-align:center}
[hidden]{display:none!important}
@media (max-width:360px){ .prim{grid-template-columns:repeat(3,1fr)} .head{grid-template-columns:60px 1fr} .head img{width:60px;height:60px} }