:root {
  color-scheme: light;
  --ink: #292a2d;
  --muted: #7d7d7a;
  --quiet: #a3a29d;
  --paper: #fff;
  --canvas: #f6f5f1;
  --line: #e9e7e0;
  --eva: #c76350;
  --guewen: #625bbb;
  --radius: 18px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100% - 36px, 560px); margin: 0 auto; padding-bottom: 26px; }
.site-header {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.wordmark-star { color: var(--eva); font-size: 25px; line-height: 1; }
.wordmark strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.wordmark small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: 1.1px; }
.header-count { color: var(--muted); font-size: 12px; }
.page-intro { padding: 39px 0 22px; }
.eyebrow { margin: 0; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: 1.25px; }
.page-intro h1 { margin: 9px 0 6px; font: 600 34px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.6px; }
.intro-copy { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.alerts { padding-top: 12px; }
.alert { margin: 0; border: 1px solid #f0d1cb; border-radius: 11px; background: #fff7f4; padding: 11px 13px; color: #944737; font-size: 12px; line-height: 1.45; }

.vote-card, .add-card {
  --accent: var(--eva);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 12px 34px rgb(33 31 25 / 5%);
}
.vote-card { padding: 21px 22px 22px; }
.vote-card.guewen-card { --accent: var(--guewen); }
.candidate-meta { display: flex; justify-content: space-between; color: var(--quiet); font-size: 9px; font-weight: 750; letter-spacing: 1.05px; }
.candidate-title { margin: 12px 0 0; overflow-wrap: anywhere; font: 600 27px/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.35px; }
.handoff { display: flex; align-items: center; gap: 8px; margin: 11px 0 0; color: var(--muted); font-size: 12px; }
.person-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
.eva-dot { background: var(--eva); }
.guewen-dot { background: var(--guewen); }
.score-form { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.score-heading { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.score-heading strong { color: var(--accent); font-weight: 750; }
.score-heading > span { color: var(--quiet); font-size: 11px; }
.score-readout { display: flex; align-items: baseline; gap: 4px; margin: 14px 0 17px; }
.score-readout output { color: var(--accent); font: 600 56px/.95 Georgia, "Times New Roman", serif; font-variant-numeric: tabular-nums; letter-spacing: -2px; }
.out-of { color: var(--quiet); font-size: 14px; }
.score-mood { margin-left: auto; color: var(--muted); font-size: 11px; }
.score-range {
  --fill: 50%;
  display: block;
  width: 100%;
  height: 8px;
  margin: 0;
  border-radius: 99px;
  appearance: none;
  background: linear-gradient(to right, var(--accent) 0 var(--fill), #e8e7e2 var(--fill) 100%);
  cursor: pointer;
  touch-action: pan-y;
}
.score-range:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 5px; }
.score-range::-webkit-slider-thumb { width: 25px; height: 25px; appearance: none; border: 5px solid var(--paper); border-radius: 50%; background: var(--accent); box-shadow: 0 1px 5px rgb(26 26 24 / 24%); }
.score-range::-moz-range-thumb { width: 16px; height: 16px; border: 5px solid var(--paper); border-radius: 50%; background: var(--accent); box-shadow: 0 1px 5px rgb(26 26 24 / 24%); }
.range-ends { display: flex; justify-content: space-between; margin-top: 9px; color: var(--quiet); font-size: 10px; font-variant-numeric: tabular-nums; }
.submit-score {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  border: 0;
  border-radius: 12px;
  background: var(--accent, #37383b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.submit-score:hover { filter: brightness(.94); }
.submit-score:active { transform: translateY(1px); }
.submit-score:focus-visible, .finish-form button:focus-visible, .ranking-tab:focus-visible { outline: 3px solid #847bd7; outline-offset: 3px; }
.submit-score span, .finish-form button span { font-size: 17px; font-weight: 400; }
.add-card { padding: 23px 22px 22px; }
.add-card .eyebrow { color: var(--eva); }
.add-card h2 { margin: 8px 0 18px; font: 600 23px/1.15 Georgia, "Times New Roman", serif; }
.add-form input {
  display: block;
  width: 100%;
  min-height: 49px;
  padding: 0 13px;
  border: 1px solid #deddd7;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  outline: none;
}
.add-form input::placeholder { color: #aaa9a3; }
.add-form input:focus { border-color: var(--guewen); box-shadow: 0 0 0 3px rgb(98 91 187 / 12%); }
.add-form .submit-score { --accent: #37383b; margin-top: 11px; }
.finish-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.finish-form button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 0; border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.vote-footnote { margin: 16px 0 0; color: var(--quiet); text-align: center; font-size: 11px; }

.results-view { padding-top: 5px; }
.results-view .page-intro { padding-top: 34px; }
.summary-strip { display: flex; align-items: center; gap: 19px; margin: 1px 0 34px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.summary-cell { min-width: 103px; padding-right: 18px; border-right: 1px solid var(--line); }
.summary-cell > span { display: block; color: var(--muted); font-size: 10px; }
.summary-cell strong { display: block; margin-top: 3px; font: 600 24px Georgia, "Times New Roman", serif; font-variant-numeric: tabular-nums; }
.summary-cell small { color: var(--muted); font: 400 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.summary-strip > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.comparison-section, .ranking-section { margin-top: 32px; }
.section-title { display: flex; min-height: 43px; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.section-title .eyebrow { font-size: 9px; }
.section-title h2 { margin: 4px 0 0; font: 600 23px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.3px; }
.section-note { color: var(--quiet); font-size: 10px; }
.score-table { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.score-table-head, .score-table-row { display: grid; grid-template-columns: minmax(0, 1fr) 43px 54px 42px; align-items: center; column-gap: 8px; padding: 0 12px; }
.score-table-head { min-height: 34px; border-bottom: 1px solid var(--line); background: #fbfaf8; color: var(--quiet); font-size: 8px; font-weight: 750; letter-spacing: .65px; }
.score-table-head span:not(:first-child), .score-table-row > :not(:first-child) { text-align: right; }
.score-table-head .eva-label { color: var(--eva); }
.score-table-head .guewen-label { color: var(--guewen); }
.score-table-row { min-height: 44px; border-bottom: 1px solid #f0efe9; }
.score-table-row:last-child { border-bottom: 0; }
.table-name { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.table-score { font-size: 13px; font-variant-numeric: tabular-nums; }
.eva-score { color: var(--eva); }
.guewen-score { color: var(--guewen); }
.table-gap { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ranking-section { margin-top: 35px; }
.ranking-tabs { display: flex; gap: 20px; margin: 0 0 0; border-bottom: 1px solid var(--line); }
.ranking-tab { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.ranking-tab.is-active { border-bottom-color: var(--ink); color: var(--ink); }
.ranking-panel { border-bottom: 1px solid var(--line); }
.ranking-panel[hidden] { display: none; }
.ranking-list { margin: 0; padding: 0; list-style: none; }
.ranking-list li { display: flex; min-height: 44px; align-items: center; gap: 12px; border-bottom: 1px solid #efeee9; }
.ranking-list li:last-child { border-bottom: 0; }
.ranking-number { width: 20px; color: var(--quiet); font-size: 10px; font-variant-numeric: tabular-nums; }
.ranking-name { flex: 1; font-size: 12px; font-weight: 550; }
.ranking-list li > strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.ranking-list li > strong small { margin-left: 3px; color: var(--quiet); font-size: 9px; font-weight: 500; }
.closing-note { margin: 19px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.site-footer { padding-top: 34px; color: var(--quiet); text-align: center; font-size: 10px; }
.site-footer span { padding: 0 4px; color: #c1bfb8; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }

@media (min-width: 600px) {
  .app-shell { width: min(100% - 48px, 560px); }
  .page-intro { padding-top: 48px; }
  .page-intro h1 { font-size: 39px; }
  .vote-card, .add-card { padding: 25px 26px 26px; }
  .candidate-title { font-size: 30px; }
  .score-table-head, .score-table-row { grid-template-columns: minmax(0, 1fr) 58px 68px 52px; column-gap: 12px; padding-right: 16px; padding-left: 16px; }
}
@media (min-width: 700px) {
  .app-shell { width: min(100% - 64px, 760px); padding-bottom: 42px; }
  .site-header { height: 78px; }
  .wordmark { gap: 12px; }
  .wordmark-star { font-size: 29px; }
  .wordmark strong { font-size: 13px; }
  .wordmark small { font-size: 9px; }
  .header-count { font-size: 13px; }
  .page-intro { padding-top: 54px; padding-bottom: 28px; }
  .page-intro h1 { font-size: 43px; }
  .intro-copy { font-size: 14px; }
  .vote-card, .add-card { max-width: 700px; margin-right: auto; margin-left: auto; padding: 31px 34px 33px; border-radius: 21px; }
  .candidate-meta { font-size: 10px; }
  .candidate-title { margin-top: 15px; font-size: 35px; }
  .handoff { margin-top: 14px; font-size: 13px; }
  .score-form { margin-top: 30px; padding-top: 25px; }
  .score-heading { font-size: 14px; }
  .score-heading > span { font-size: 12px; }
  .score-readout { margin: 18px 0 22px; }
  .score-readout output { font-size: 68px; }
  .score-mood { font-size: 13px; }
  .score-range { height: 11px; }
  .score-range::-webkit-slider-thumb { width: 32px; height: 32px; border-width: 6px; }
  .score-range::-moz-range-thumb { width: 20px; height: 20px; border-width: 6px; }
  .range-ends { margin-top: 12px; font-size: 11px; }
  .submit-score { min-height: 58px; margin-top: 26px; border-radius: 14px; font-size: 14px; }
  .add-card h2 { margin-bottom: 22px; font-size: 27px; }
  .add-form input { min-height: 56px; font-size: 16px; }
  .add-form .submit-score { margin-top: 13px; }
  .finish-form { margin-top: 24px; padding-top: 19px; font-size: 13px; }
  .finish-form button { min-height: 42px; font-size: 13px; }
  .vote-footnote { margin-top: 20px; font-size: 12px; }
  .results-view .page-intro { padding-top: 42px; }
  .summary-strip { gap: 25px; margin-bottom: 42px; padding: 18px 21px; }
  .summary-cell { min-width: 125px; }
  .summary-cell > span { font-size: 11px; }
  .summary-cell strong { font-size: 28px; }
  .summary-strip > p { font-size: 13px; }
  .section-title h2 { font-size: 26px; }
  .section-title .eyebrow { font-size: 10px; }
  .section-note { font-size: 11px; }
  .score-table-head { min-height: 40px; font-size: 9px; }
  .score-table-row { min-height: 51px; }
  .table-name { font-size: 14px; }
  .table-score { font-size: 15px; }
  .table-gap { font-size: 13px; }
  .ranking-tab { min-height: 52px; font-size: 14px; }
  .ranking-list li { min-height: 52px; }
  .ranking-number { font-size: 12px; }
  .ranking-name { font-size: 14px; }
  .ranking-list li > strong { font-size: 15px; }
  .site-footer { padding-top: 45px; font-size: 11px; }
}
@media (min-width: 1000px) {
  .app-shell { width: min(100% - 80px, 1000px); }
  .results-panels { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); align-items: start; gap: 44px; }
  .comparison-section, .ranking-section { margin-top: 0; }
  .score-table-head, .score-table-row { grid-template-columns: minmax(0, 1fr) 58px 68px 52px; column-gap: 12px; padding-right: 16px; padding-left: 16px; }
}
@media (max-width: 360px) {
  .app-shell { width: min(100% - 28px, 560px); }
  .vote-card, .add-card { padding-right: 17px; padding-left: 17px; }
  .score-table-head, .score-table-row { grid-template-columns: minmax(0, 1fr) 37px 48px 34px; column-gap: 6px; padding-right: 8px; padding-left: 8px; }
  .score-table-head { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.reset-view{margin:54px auto 0;max-width:440px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 12px 34px rgb(33 31 25 / 5%)}.reset-view>.eyebrow{color:var(--eva)}.reset-view h1{margin:10px 0 12px;font:600 31px/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.5px}.reset-copy{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.reset-button{width:100%;min-height:50px;margin-top:22px;padding:9px 14px;border:0;border-radius:11px;background:#a63c32;color:#fff;font-size:12px;font-weight:700;cursor:pointer}.reset-button:hover{background:#8f3029}.reset-button:focus-visible,.cancel-reset:focus-visible{outline:3px solid #d7877e;outline-offset:3px}.cancel-reset{display:block;margin-top:15px;color:var(--muted);text-align:center;text-decoration:none;font-size:11px}.cancel-reset:hover{color:var(--ink);text-decoration:underline}