:root { --ink:#1b2632; --muted:#66727c; --paper:#f4f0e8; --white:#fffdf9; --line:#d9d4ca; --yellow:#ffbd38; --blue:#2f6bea; --orange:#f06b4f; --teal:#16a28c; --purple:#8067d7; --red:#dd4967; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } .shell { max-width:1240px; padding:0 32px; margin:auto; }
.masthead { min-height:94px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-1.5px; line-height:.8; font-size:17px; } .brand span { color:var(--orange); }
.eyebrow,.formula { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.03em; color:var(--muted); } .formula { color:var(--ink); background:#e7e1d6; padding:9px 12px; border-radius:3px; }
.hero { padding:72px 0 56px; display:flex; justify-content:space-between; align-items:end; gap:30px; } .kicker,.section-label { font:500 11px "DM Mono",monospace; color:var(--orange); text-transform:uppercase; letter-spacing:.075em; margin:0 0 13px; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Fraunces,serif; letter-spacing:-.055em; } h1 { font-size:clamp(45px,6.3vw,80px); line-height:.95; margin:0; font-weight:700; } h1 em,h2 em { color:var(--orange); font-style:italic; }
.intro { width:335px; margin:0 0 4px; color:var(--muted); font-size:16px; line-height:1.55; }.workspace { display:grid; grid-template-columns:430px 1fr; gap:18px; align-items:stretch; }.panel { background:var(--white); border:1px solid var(--line); border-radius:5px; }
.controls { padding:27px; }.panel-heading h2,.parties-heading h2,.result-topline h2 { font-size:29px; margin:0; line-height:1; }.compact-field { margin-top:27px; }
.field { display:block; color:var(--muted); font-size:13px; font-weight:600; }.field > span { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }.field input { width:100%; color:var(--ink); border:1px solid var(--line); background:#faf8f3; padding:10px 11px; border-radius:3px; outline-color:var(--blue); font-family:"DM Mono",monospace; font-size:14px; }
.number-stepper { display:flex; align-items:stretch; }.number-stepper input { text-align:center; border-radius:0; border-left:0;border-right:0; }.step { width:42px; border:1px solid var(--line); background:#faf8f3; color:var(--ink); font-size:20px; }.step:first-child { border-radius:3px 0 0 3px; }.step:last-child { border-radius:0 3px 3px 0; }
.parties-heading { margin-top:34px; display:flex; justify-content:space-between; align-items:end; }.text-button { background:none; color:var(--blue); border:0; padding:2px 0; font-size:13px; font-weight:700; }.party-controls { margin-top:15px; display:grid; gap:10px; }
.party-row { display:grid; grid-template-columns:16px 1fr 113px 18px; gap:9px; align-items:center; }.party-dot { height:11px; width:11px; border-radius:50%; }.party-name { min-width:0; padding:8px 0; border:0; border-bottom:1px solid transparent; color:var(--ink); background:transparent; font-weight:600; font-size:14px; }.party-name:focus { outline:none; border-color:var(--blue); }.party-votes { width:100%; border:1px solid var(--line); background:#faf8f3; padding:8px; border-radius:3px; color:var(--ink); font:13px "DM Mono",monospace; }.remove { border:0; background:transparent; color:#a6a59e; font-size:17px; padding:0; }.remove:hover { color:var(--red); }.other-votes { margin-top:23px; padding-top:21px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:13px; }.info { margin-left:3px; height:15px;width:15px; padding:0; border:1px solid #a6aaa7; border-radius:50%; color:var(--muted); background:transparent; font:500 10px Georgia,serif; }.hint { color:#8a928f; font-size:11px; margin:13px 0 0; }
.results { padding:27px; display:flex; flex-direction:column; min-width:0; }.result-topline { display:flex; justify-content:space-between; }.threshold-badge { background:#f5f1e8; border-radius:4px; padding:7px 10px; text-align:right; font:10px "DM Mono",monospace; color:var(--muted); }.threshold-badge strong { display:block;color:var(--ink);font-size:14px;margin-top:2px; }.summary-line { margin:27px 0 20px; color:var(--muted); font-size:14px; }.summary-line b { color:var(--ink); }.seat-visual { min-height:148px; display:flex; align-items:flex-end; align-content:flex-end; flex-wrap:wrap; gap:7px; padding:18px; background:#f8f5ef; border-radius:3px; }.seat { height:42px; width:42px; border-radius:50% 50% 6px 6px; display:grid; place-items:center; color:white; font:500 12px "DM Mono",monospace; box-shadow:inset 0 -4px rgba(0,0,0,.1); animation:rise .35s ease both; } @keyframes rise { from { transform:translateY(10px);opacity:0; } }
.legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin:18px 0; }.legend-item { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }.legend-dot { width:9px;height:9px;border-radius:50%; }.legend-item b { font-family:"DM Mono",monospace; font-weight:500; }.explain-card { border-left:3px solid var(--yellow); background:#fff8e6; padding:12px 14px; font-size:13px; line-height:1.4; margin-top:auto; }.explain-card b { font-family:"DM Mono",monospace; }
.calculation-section { padding:87px 0 77px; }.section-title { display:flex; align-items:baseline; gap:25px; margin-bottom:25px; }.section-title .section-label { margin:0; }.section-title h2 { font-size:32px; margin:0; }.section-title > p:last-child { margin:0 0 0 auto; font-size:13px; color:var(--muted); }.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:4px; background:var(--white); } table { border-collapse:collapse; width:100%; min-width:690px; font-size:13px; } th { text-align:right; font:500 11px "DM Mono",monospace; color:var(--muted); background:#f8f5ef; } th:first-child,td:first-child { text-align:left; } th,td { padding:13px 15px; border-bottom:1px solid #ebe7df; } tbody tr:last-child td { border:0; } td:not(:first-child) { text-align:right; font-family:"DM Mono",monospace; } .party-cell { display:flex;align-items:center;gap:8px;font-weight:700; } .winning { background:#fff0c7; color:#5c4300; font-weight:600; }.excluded { opacity:.42; }.table-note { color:var(--muted); font-size:12px; margin:12px 0 0; }
.quotient-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-bottom:16px; }.quotient-guide article { display:flex; gap:12px; padding:17px; background:var(--white); }.quotient-guide span { flex:0 0 25px; height:25px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:white; font:11px "DM Mono",monospace; }.quotient-guide b { font-size:13px; }.quotient-guide p { color:var(--muted); font-size:12px; line-height:1.35; margin:4px 0 0; }
.comparison { margin:0 -32px; padding:75px max(32px, calc((100vw - 1176px) / 2)); background:var(--ink); color:#fffdf9; display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; }.comparison .section-label { color:var(--yellow); }.comparison h2 { font-size:47px; line-height:.98; margin:0 0 20px; }.comparison h2 em { color:var(--yellow); }.comparison-copy > p:not(.section-label) { color:#b9c2c7; line-height:1.55; max-width:365px; }.switcher { display:flex; margin-top:28px; border-bottom:1px solid #50606c; }.choice { border:0; background:none; color:#aeb8bd; padding:10px 10px 10px 0; margin-right:15px; font-size:12px; }.choice.active { color:#fff; border-bottom:2px solid var(--yellow); }.compare-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.compare-card { padding:24px; border-radius:4px; }.blank-card { background:#f7d984; color:var(--ink); }.abstain-card { background:#ecede9; color:var(--ink); }.invalid-card { background:#d9e6eb; color:var(--ink); }.compare-icon { font-size:28px; line-height:1; margin-bottom:28px; }.card-label { font:500 11px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.03em; margin:0 0 6px; }.compare-card h3 { font:700 34px Fraunces,serif; margin:0; letter-spacing:-.06em; }.small { font-size:12px; margin:1px 0 24px; color:#4f5351; }.bar-label { display:flex;justify-content:space-between;font-size:11px;font-weight:600;margin-bottom:7px; }.meter { height:5px;background:rgba(27,38,50,.15);overflow:hidden;border-radius:5px; }.meter i { display:block;height:100%;background:var(--ink);width:0;transition:width .25s; }.impact { border-top:1px solid rgba(27,38,50,.17); margin:21px 0 0;padding-top:12px;font-size:12px;line-height:1.45; }.impact b { font-family:"DM Mono",monospace; }footer { min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font:10px "DM Mono",monospace; }.tooltip { position:fixed;max-width:220px;padding:9px 10px;background:var(--ink);color:white;font-size:11px;line-height:1.35;border-radius:3px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:4; }
.comparison-key { border-left:2px solid var(--yellow); padding-left:12px; font-size:13px; }.comparison-key b { color:var(--yellow); }.comparison-note { font-size:11px; margin:10px 0 0; color:#829099 !important; }
@media (max-width:800px) { .shell { padding:0 18px; }.masthead { min-height:76px; }.eyebrow { display:none; }.hero { padding:50px 0 39px; display:block; }.intro { width:auto;margin-top:24px; }.workspace,.comparison { grid-template-columns:1fr; }.comparison { margin:0 -18px; padding:55px 18px; gap:37px; }.calculation-section { padding:60px 0; }.section-title { display:block; }.section-title h2 { font-size:29px; }.section-title > p:last-child { margin-top:12px; }.results { min-height:410px; }.seat { width:36px;height:36px; }.compare-card { padding:20px; } footer { align-items:flex-start; flex-direction:column; padding:20px 0; gap:7px; } }
@media (max-width:800px) { .compare-cards { grid-template-columns:1fr; } }
@media (max-width:800px) { .quotient-guide { grid-template-columns:1fr; } }
@media (max-width:420px) { .other-votes { grid-template-columns:1fr; }.comparison h2 { font-size:41px; }.compare-cards { grid-template-columns:1fr; }.choice { font-size:11px;margin-right:9px; }.formula { font-size:9px; } }