:root{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#253d35;background:#f7f6f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{height:88px;border-bottom:1px solid #dedfd5;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,22px)}.brand{font-size:22px;font-weight:750;letter-spacing:-.8px;display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.logo{font-size:34px;color:#286150}.tag,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700}main{max-width:1280px;margin:auto;padding:48px 40px 24px}.eyebrow{color:#6b7e64}h1{font-size:clamp(32px,4vw,49px);letter-spacing:-2px;line-height:1.16;margin:18px 0}h1 em{font-style:normal;color:#367259}.intro p{color:#71766c;font-size:16px}.workspace{display:grid;grid-template-columns:320px 1fr;gap:48px;margin-top:38px;align-items:start}aside{padding:4px 0}.step{display:flex;align-items:center;gap:10px;margin-bottom:18px}.step span{border:1px solid #b8c6b6;border-radius:50%;font-size:11px;padding:6px;color:#60755f}h2{font-size:16px;margin:0}.motifs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:32px}button,select{font:inherit}button{cursor:pointer;border:1px solid #d7dcd0;background:white;color:inherit;border-radius:9px;padding:10px 12px}button:hover{border-color:#286150;background:#f1f6ef}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #d69e3e;outline-offset:3px}.motif{font-size:12px;padding:12px 4px}.motif svg{display:block;margin:0 auto 6px;width:42px;height:42px}.motif[aria-pressed=true]{background:#e9efdf;border:2px solid #42664c;padding:11px 3px}label{display:block;font-size:12px;font-weight:650;margin:16px 0 7px}select{width:100%;padding:12px 8px;border:1px solid #d7dcd0;border-radius:7px;background:#fff;color:inherit;font-size:13px}.check{display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.5}.check input{accent-color:#286150;margin-top:3px}.hint{font-size:11px;color:#72796e;line-height:1.6}.primary{background:#286150;color:white;width:100%;padding:15px 10px;font-size:13px;font-weight:650;margin-top:12px}.primary:hover{background:#214e41;color:white}.status{min-height:18px}.tip{background:#eeeddf;padding:18px 20px;border-radius:8px;margin-top:20px;font-size:12px;line-height:1.65}.tip p{margin:7px 0 0}.preview{background:#e9ebe3;border:1px solid #dde0d5;border-radius:13px;padding:20px 24px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:20px}.tabs{display:flex;background:#dce1d5;padding:3px;border-radius:8px}.tabs button{border:none;background:transparent;font-size:12px}.tabs button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #253d3512}.print{font-size:12px;background:transparent;border-color:#bcc5b4}.sheet{background:#fff;padding:30px 32px;color:#17271f;box-shadow:0 5px 15px #283d3510;min-height:650px}.sheet .kicker{font-size:9px;letter-spacing:2px;color:#777}.sheet h2{font-size:24px;letter-spacing:-.6px;margin-top:10px}.sheet .instructions{font-size:11px;line-height:1.7;max-width:390px}.name{border-bottom:1px solid #ccc;padding-bottom:8px;font-size:10px;color:#777;margin:16px 0}.grid{border-collapse:collapse;margin:18px auto 20px;table-layout:fixed}.grid td,.grid th{width:21px;height:21px;font-size:9px;text-align:center;padding:0}.grid td{border:1px solid #9da39d}.grid th{font-weight:500}.grid td.fill{background:var(--ink,#253d35)!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:7px 10px;font-size:11px;font-variant-numeric:tabular-nums}.exercise{white-space:nowrap}.exercise small{font-size:8px;color:#7c817b;display:inline-block;width:19px}.sheetfoot{font-size:8px;color:#777;border-top:1px solid #ddd;margin-top:18px;padding-top:10px;display:flex;justify-content:space-between}.below{text-align:center;font-size:11px;line-height:1.7;color:#747c70;margin-bottom:0}footer{text-align:center;font-size:12px;color:#808779;padding-top:40px}@media(max-width:850px){main{padding:28px 20px}.workspace{grid-template-columns:1fr;gap:20px}.tag{display:none}.motifs{grid-template-columns:repeat(6,1fr)}.preview{padding:16px}.sheet{padding:24px 18px}.intro h1{letter-spacing:-1px}.tip{margin-top:10px}header{height:70px}.examples{font-size:10px;gap:8px 4px}}@media(max-width:440px){.motifs{grid-template-columns:repeat(3,1fr)}.toolbar{flex-wrap:wrap}.sheet{padding:20px 12px}.exercise small{width:14px}.examples{font-size:9px}.grid td,.grid th{width:19px;height:19px}}@page{size:A4 portrait;margin:14mm}@media print{body,main,.workspace,.preview{display:block;background:white;margin:0;padding:0;border:0}header,.intro,aside,.toolbar,.below,footer{display:none}.sheet{box-shadow:none;padding:0;min-height:0}.sheet h2{font-size:23px}.grid td,.grid th{width:6mm;height:6mm;font-size:9px}.examples{font-size:11px;gap:8px 15px}.sheet .instructions{font-size:11px;max-width:none}.sheetfoot{margin-top:15px}.sheet{break-inside:avoid}}

.motifs{max-height:350px;overflow-y:auto;padding:3px;scrollbar-gutter:stable}.color-toggle{font-size:14px;margin:0 0 10px}.legend{display:flex;flex-wrap:wrap;gap:5px 13px;font-size:10px;line-height:1.6}.legend>span{display:inline-flex;align-items:center;gap:4px}.swatch{display:inline-block;width:9px;height:9px;border:1px solid #666;background:var(--ink);vertical-align:middle;print-color-adjust:exact;-webkit-print-color-adjust:exact;flex-shrink:0}.color-code{display:inline-flex;align-items:center;gap:3px;font-size:8px;color:#30333a;vertical-align:middle;margin-left:2px}.grid{margin-top:12px}.examples{column-gap:8px}@media(max-width:440px){.sheet{padding-left:8px;padding-right:8px}.examples{grid-template-columns:repeat(2,1fr);font-size:11px;gap:8px}.color-code{font-size:8px}.motifs{max-height:290px}}@media print{.examples{grid-template-columns:repeat(3,1fr);font-size:11px;gap:7px 12px}.color-code{font-size:8px}.legend{font-size:10px}.sheet{break-inside:auto}.exercise,.legend,.grid{break-inside:avoid}.sheetfoot{break-inside:avoid}.swatch{width:9px;height:9px}}

@media print{.grid td,.grid th{width:5mm;height:5mm}.examples{grid-template-columns:repeat(4,1fr);font-size:10px;line-height:1.3;gap:5px 8px}.exercise small{width:16px}.color-code{font-size:7px;gap:2px;margin-left:1px}.swatch{width:8px;height:8px}}

.exercise{display:grid;grid-template-columns:1.8em 8.5ch 1.2ch 2.4ch 1.3ch max-content;align-items:baseline;column-gap:.2ch}.exercise small{width:auto;text-align:right;padding-right:.5em}.exercise .expression{text-align:right;padding-right:.35ch}.exercise .equals,.exercise .answer,.exercise .coordinate{text-align:center}.exercise .color-code{margin-left:0;align-self:center}

/* Varianty s dlouhými příklady (písemné počítání, desetinná čísla, zlomky, procenta):
   širší sloupec pro výraz i pro výsledek, popisky řádků mřížky se roztáhnou podle obsahu. */
.examples.wide .exercise{grid-template-columns:1.8em 13ch 1.2ch 5.5ch 1.3ch max-content}
.examples.wide{grid-template-columns:repeat(2,1fr)}
.grid.wide{table-layout:auto}
.grid.wide th:first-child{min-width:34px;padding:0 4px;white-space:nowrap}
@media print{.examples.wide{grid-template-columns:repeat(3,1fr)}.grid.wide th:first-child{min-width:11mm}}
@media(max-width:440px){.examples.wide{grid-template-columns:1fr}}

/* Sada listů: na obrazovce pod sebou s mezerou, v tisku každý na svou stránku. */
#sheets{display:grid;gap:22px}
input[type=number]{width:100%;padding:12px 8px;border:1px solid #d7dcd0;border-radius:7px;background:#fff;color:inherit;font:inherit;font-size:13px}
@media print{#sheets{display:block;gap:0}.sheet+.sheet{break-before:page}}