@font-face{font-family:Bungee;src:url(fonts/bungee-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Rajdhani;src:url(fonts/rajdhani-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Rajdhani;src:url(fonts/rajdhani-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--punainen:#E94E1B;--punainen-tumma:#B23A12;--valkoinen:#F2F2F2;--kortti:#FFFFFF;--musta:#0E0E0E;--harmaa:#55534F;--ura:#C9C7C2}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--valkoinen);color:var(--musta);font-family:Rajdhani,system-ui,sans-serif;font-weight:500;-webkit-text-size-adjust:100%}
body{display:flex;justify-content:center;padding:clamp(20px,6vw,56px) 18px 48px}
main{width:100%;max-width:520px}
.logo{display:block;width:72px;height:72px}
h1{font-family:Bungee,Impact,sans-serif;font-weight:400;font-size:clamp(32px,9.6vw,50px);line-height:1.08;margin-top:20px;border-bottom:6px solid var(--punainen);padding-bottom:14px;overflow-wrap:anywhere}
.johdanto{font-size:20px;line-height:1.35;margin-top:16px;max-width:30em}
.lataus{font-size:19px;margin-top:24px;color:var(--harmaa)}
.viesti{font-size:19px;line-height:1.35;margin-top:18px;padding:13px 15px;background:var(--kortti);border-left:6px solid var(--musta);outline:0}
.viesti.virhe{border-left-color:var(--punainen-tumma);color:var(--punainen-tumma);font-weight:700}
.lomake{margin-top:24px}
.jako{padding:18px 0;border-top:2px solid var(--musta)}
.nimi{display:block;font-size:23px;line-height:1.15;font-weight:700}
.selite{font-size:18px;line-height:1.3;margin-top:4px}
.rivi{display:flex;align-items:center;gap:14px;margin-top:12px}
.summa{flex:none;font-size:20px;font-weight:700;white-space:nowrap}
.summa input{width:5.2em;font:inherit;text-align:right;color:inherit;background:var(--kortti);border:2px solid var(--musta);border-radius:6px;padding:9px 10px;min-height:46px}
.summa input:focus-visible{outline:3px solid var(--punainen);outline-offset:1px}
.summa input[aria-invalid=true]{border-color:var(--punainen-tumma);box-shadow:inset 0 0 0 1px var(--punainen-tumma)}
.summavirhe{font-size:18px;line-height:1.3;font-weight:700;color:var(--punainen-tumma);margin-top:8px}
.liuku{flex:1;min-width:0;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;touch-action:pan-y;cursor:pointer}
.liuku::-webkit-slider-runnable-track{height:8px;background:var(--ura);border-radius:4px}
.liuku::-moz-range-track{height:8px;background:var(--ura);border-radius:4px}
.liuku::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-12px;border-radius:50%;background:var(--punainen);border:3px solid var(--musta)}
.liuku::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--punainen);border:3px solid var(--musta)}
.liuku:focus-visible{outline:3px solid var(--musta);outline-offset:2px}
.jaa{font-size:21px;padding:16px 0;border-top:2px solid var(--musta);border-bottom:2px solid var(--musta)}
.pika{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.nappi{font:inherit;font-weight:700;font-size:19px;line-height:1.15;border:2px solid var(--musta);border-radius:6px;padding:12px 14px;min-height:50px;cursor:pointer;touch-action:manipulation}
.nappi.ensisijainen{color:var(--valkoinen);background:var(--musta)}
.nappi.ensisijainen:hover{background:#333}
.nappi.toissijainen{color:var(--musta);background:transparent}
.nappi.toissijainen:hover{background:var(--kortti)}
#tallenna{width:100%;margin-top:12px;font-size:21px;padding:15px}
button:focus-visible{outline:3px solid var(--punainen);outline-offset:2px}
button:disabled{cursor:wait;opacity:.65}
.vahvistus{margin-top:12px;background:var(--kortti);border:2px solid var(--punainen);border-radius:6px;padding:15px 16px 16px}
.vahvistus p{font-size:19px;line-height:1.35;font-weight:700;outline:0}
.napit{display:grid;gap:10px;margin-top:14px}
@media (min-width:480px){.napit{grid-template-columns:auto auto;justify-content:start}}
@media (max-width:360px){.rivi{flex-wrap:wrap}.liuku{flex-basis:100%}}