/* 外观修改入口：背景色、文字色。下方各区块控制布局与交互。 */
:root {
  --page-background:#C8B8AA;
  --text-color:#3F2A0E;
  --outer-background:#b0a296;
  
}


@font-face {
  font-family:"DM Sans";
  font-style:normal;
  font-weight:100 900;
  src:url("../fonts/dm-sans.woff2")
}


* {
  box-sizing:border-box
}

html {
  font-size:16px;
  background:var(--outer-background);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-font-smoothing:antialiased
}

body {
  margin:0;
  font-family:'DM Sans',Arial,'PingFang TC','Microsoft JhengHei',sans-serif;
  color:var(--text-color)
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

main {
  max-width:580px;
  min-height:calc(100vh - 24px);
  margin:24px auto 0;
  background:var(--page-background);
  border-radius:24px 24px 0 0;
  position:relative;
  padding-bottom:max(28px,env(safe-area-inset-bottom))
}

.toolbar {
  position:absolute;
  top:20px;
  right:24px
}

.share {
  background:#ffffffb3;
  border:0;
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center
}

.share svg {
  width:20px;
  height:20px
}

header {
  text-align:center;
  padding:104px 24px 0
}

.avatar {
  display:block;
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 16px
}

h1 {
  font-size:24px;
  line-height:1.2;
  font-weight:600;
  margin:0;
  overflow-wrap:break-word
}

.links {
  padding:0 28px;
  margin-top:32px;
  display:grid;
  gap:14px
}

.link {
  position:relative;
  border:1px solid var(--text-color);
  border-radius:28px;
  background:transparent;
  transition:background .18s
}

.link:hover {
  background:#00000012
}

.link>a {
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px 64px;
  position:relative
}

.link img {
  position:absolute;
  left:7px;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:20px;
  object-fit:cover
}

.link span {
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.2px;
  text-wrap:balance;
  overflow-wrap:break-word;
  min-width:0
}

.more {
  display:grid;
  place-items:center;
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:44px;
  border:0;
  border-radius:16px;
  background:transparent;
  opacity:.55;
  font-size:22px
}

.more:hover {
  background:#00000015;
  opacity:1
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--text-color);
  outline-offset:4px
}

.footer {
  text-align:center;
  margin:42px 14px 0
}

.join {
  display:inline-block;
  background:#fff9;
  color:#241c14;
  border-radius:28px;
  padding:14px 22px;
  font-size:14px;
  font-weight:600
}

.legal {
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:24px;
  font-size:12px
}

.legal a:hover {
  text-decoration:underline
}

dialog {
  width:min(420px,calc(100% - 32px));
  padding:24px;
  border:0;
  border-radius:20px;
  color:var(--text-color);
  background:#f4eee8
}

dialog::backdrop {
  background:#0006
}

dialog h2 {
  margin:0 0 16px;
  font-size:20px
}

dialog input {
  width:100%;
  padding:12px;
  border:1px solid #9a8976;
  border-radius:8px;
  font-size:14px
}

dialog .actions {
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:18px
}

dialog button {
  border:1px solid var(--text-color);
  padding:10px 18px;
  border-radius:20px;
  background:transparent
}

#copy {
  background:var(--text-color);
  color:white
}

#status {
  min-height:20px;
  margin:8px 0 0;
  font-size:14px
}

@media(max-width:575px) {
  html {
  background:var(--page-background)
}

main {
  margin:0;
  border-radius:0;
  min-height:100vh;
  min-height:100svh
}

.links {
  padding:0 14px
}

.link span {
  font-size:14px
}

.toolbar {
  right:16px
}


}

@media(prefers-reduced-motion:reduce) {
  .link {
  transition:none
}

.link:hover {
  transform:none
}


}


.cookie {
  padding:0;
  border:0;
  background:none;
  font-size:12px
}

.cookie:hover {
  text-decoration:underline
}

@media(hover:none) {
  .link:hover {
  background:transparent
}


}

@media(max-width:360px) {
  h1 {
  font-size:22px
}

.link>a {
  padding-right:48px;
  padding-left:60px
}

.link span {
  line-height:1.35
}


}