:root{
  --bg:#695650;
  --card: #ded2ce;
  --muted: #493b38;
  --accent: #b99b8c;
  --accent-2: #7d6c68;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(16,24,40,0.08);
  --max-width: 420px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(315deg, var(--bg) 0%, var(--card) 100%);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items: center;
  justify-content:left;
  padding:40px 20px;
}
.main{width:100%;max-width:var(--max-width)}
.site-header{position:fixed;top:18px;left:18px}
.site-title{margin:0;font-size:20px}
.tagline{margin:2px 0 0 0;color:var(--muted);font-size:13px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin:80px auto 20px;}
.card-title{margin:0 0 12px 0;font-size:18px;text-align-last:center;}
.links-grid{display:flex;flex-direction:column;gap:12px;align-items:center;}
.link-btn{display:flex;align-items:center;justify-content:center;width:60%;padding:12px 16px;border-radius:10px;background:linear-gradient(180deg,var(--accent),#7d6c68);color:white;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(124,140,255,0.18);transition:transform .14s ease,box-shadow .14s ease;}
.link-btn:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(124,140,255,0.12)}
.hint{margin-top:14px;color:var(--muted);font-size:13px}
.site-footer{position:fixed;right:18px;bottom:18px;color:var(--muted);font-size:13px}

@media (max-width:520px){
  .card{padding:20px;margin-top:110px}
  .link-btn{flex:1 1 100%}
  .site-header{left:12px}
}