:root { color-scheme: dark; --ink: #f1f3ef; --pencil: #909a99; --yellow: #ffcf00; --green: #00e070; --red: #ff4938; --orange: #ff7518; background: #141617; color: var(--ink); }
body { background: #141617; }
.scarf { opacity: .9; }
.header { padding-top: 17px; padding-bottom: 17px; }
.account, .tabs button { background: #232729; }
.tabs { margin-top: 23px; margin-bottom: 28px; gap: 12px; }
.tabs button { --pencil: #6e807c; }
.tabs button[aria-current] { color: #161b1a; background: #00e070; --pencil: #00e070; }
.community { padding: 20px 0 23px; border-top: 1px solid #3c4446; border-bottom: 1px solid #3c4446; }
.community-heading, .community-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; }
.community-heading h2 { display: flex; align-items: center; gap: 12px; font-size: 29px; }
.community-heading svg { width: 27px; height: 27px; color: #ff7518; }
.community-count { font-size: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.community-count > span:last-child { font-size: 14px; color: #bbc5c5; font-weight: 700; }
.community progress { display: block; appearance: none; width: 100%; height: 15px; border: 1px solid #68726c; border-radius: 0; overflow: hidden; margin: 15px 0 12px; background: #292e2f; accent-color: #ff7518; }
.community progress::-webkit-progress-bar { background: #292e2f; }
.community progress::-webkit-progress-value { background: linear-gradient(90deg,#ff4938,#ffcf00); transition: width .7s ease; }
.community progress::-moz-progress-bar { background: linear-gradient(90deg,#ff4938,#ffcf00); }
.community-bottom { align-items: baseline; }
.community-bottom p { color: #c8cece; font-size: 14px; }
#community-status { color: #ffcf00; text-align: right; }
.community[data-state="complete"] progress { accent-color: #00e070; border-color: #00e070; }
.community[data-state="complete"] progress::-webkit-progress-value { background: #00e070; }
.community[data-state="complete"] progress::-moz-progress-bar { background: #00e070; }
.community[data-state="complete"] #community-status { color: #00e070; }
.community[data-state="signed-out"] progress, .community[data-state="loading"] progress, .community[data-state="error"] progress { opacity: .45; }
.community.points-added progress { animation: points-arrive .8s ease-out; }
@keyframes points-arrive { 40% { box-shadow: 0 0 18px #ff9f4c66; } }
.section-title { margin-bottom: 22px; }
.mode { white-space: normal; overflow-wrap: anywhere; max-width: 40%; }
.game-card { --pencil: #788b85; background: #222729; transition: background .16s, transform .16s; }
.game-card[aria-pressed=true] { --pencil: #ff7518; background: #352922; }
.game-card:hover { background: #313937; transform: translateY(-3px); }
.game-card[aria-pressed=true]:hover { background: #423125; }
.game-card small { color: #c2cbca; }
.game-stage { --pencil: #78ba9b; background: #202627; }
.tools button, .icon-button { background: #2a3431; color: #00e070; border-color: #689f88; }
.primary { color: #191d1b; --pencil: #ff7518; box-shadow: 0 3px 0 #080b0a; transition: transform .15s; }
.primary:hover { transform: translateY(-2px); }
.meter { background: #353e3b; }
.eyebrow, .rank-you { color: #ff7518; }
.quiet, .rank-filter > span, .example-note, .rank-list-head p, th, td:first-child { color: #b8c5c4; }
.big-score { color: #00e070; }
.text-button { color: #00b8ff; }
.rule { background: #ff7518; }
select, input, dialog { background: #232a2b; color: var(--ink); border-color: #7e8d8a; }
dialog { --pencil: #ff7518; }
dialog::backdrop { background: #080a0cd9; }
#auth-status { color: #ff4938; }
.paused { background: #171d1efa; }
.quiz { background: #242a2a; }
.answers button { background: #323b3b; border-color: #7e8d8a; }
.answers .correct { background: #00e070; color: #111719; border-color: #00e070; }
.answers .wrong { background: #ff4938; color: #111719; border-color: #ff4938; }
td { border-color: #3b4644; }
th { border-color: #6d817b; }
tr.mine { background: #293d33; }
tr.mine td { border-bottom-color: #68806f; }
.rank-empty { border-color: #3b4644; }
.podium-step { color: #111c20; }
.podium-entry[data-place="1"] .podium-step { background: #ffcf00; --pencil: #ffcf00; }
.podium-entry[data-place="2"] .podium-step { background: #00b8ff; --pencil: #00b8ff; }
.podium-entry[data-place="3"] .podium-step { background: #ff7518; --pencil: #ff7518; }
.avatar-preview { --pencil: #78ba9b; background: #222d2a; }
.avatar-effects label { --pencil: #748880; background: #232a2b; }
.avatar-effects label:has(input:checked) { --pencil: #ff7518; background: #352c23; }
.avatar-effects input { accent-color: #ff7518; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible, .avatar-swatches input:focus-visible { outline-color: #00b8ff; }
@media (max-width:650px) {
  .community-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .community-heading h2 { font-size: 26px; }
  .community-count { font-size: 23px; }
  .community-bottom { flex-direction: column; gap: 6px; }
  .community-bottom p { font-size: 13px; }
  #community-status { text-align: left; }
  .community { padding: 17px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .community.points-added progress { animation: none; }
  .community progress::-webkit-progress-value, .game-card, .primary { transition: none; }
  .game-card:hover, .primary:hover { transform: none; }
}