* { box-sizing: border-box; }
body { margin: 0; background: #141414; color: #eee; font: 14px/1.3 system-ui, sans-serif; }
.btn { display: inline-flex; align-items: center; background: #222; color: #eee; border: 1px solid #333; border-radius: 99px; padding: 7px 14px; font: inherit; cursor: pointer; text-decoration: none; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.primary { background: #1d9bf0; border-color: #1d9bf0; color: #fff; font-weight: 600; }
.btn[aria-pressed=true] { background: #eee; color: #111; }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.hint { color: #888; font-size: 12px; }
input[type=text] { background: #1e1e1e; color: #eee; border: 1px solid #333; border-radius: 8px; padding: 9px 10px; font: inherit; width: 100%; }

/* Wordmark: white "TierList" over a strip of six squares in the S→F tier colors, .picchi.ch quieter */
.logo { display: inline-flex; align-items: baseline; color: #fff; text-decoration: none; white-space: nowrap; }
.logo .word { display: inline-flex; flex-direction: column; }
.logo b { font: 800 19px 'Bricolage Grotesque', system-ui; letter-spacing: 1.2px; }
.logo .tiers { display: flex; gap: 2px; margin-top: 1px; }
.logo .tiers span { flex: 1; height: 4px; border-radius: 1px; }
.logo .tiers span:nth-child(1) { background: #f08080; }
.logo .tiers span:nth-child(2) { background: #f5b880; }
.logo .tiers span:nth-child(3) { background: #f5d880; }
.logo .tiers span:nth-child(4) { background: #f0f080; }
.logo .tiers span:nth-child(5) { background: #c8f080; }
.logo .tiers span:nth-child(6) { background: #80f0f0; }
.logo small { color: #b4b4b4; font: 600 11px system-ui; }
.logo.big b { font-size: 30px; letter-spacing: 1.8px; }
.logo.big .tiers { gap: 3px; margin-top: 2px; }
.logo.big .tiers span { height: 6px; border-radius: 2px; }
.logo.big small { font-size: 15px; }