/* Задариум — оболочка учебной студии.
   System fonts only. Worksheet UI and its print geometry belong to src/ui. */
:root {
  color-scheme: light;
  --site-background: #f7f4ec;
  --site-paper: #fffefb;
  --site-ink: #263c32;
  --site-muted: #536257;
  --site-green: #235b47;
  --site-green-dark: #184532;
  --site-mint: #e8ede1;
  --site-line: #d4d8cb;
  --site-focus: #985014;
  --site-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --site-editorial: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--site-background);
  color: var(--site-ink);
  font: 1rem/1.6 var(--site-sans);
}
:focus-visible { outline: 3px solid var(--site-focus); outline-offset: 4px; }
.site-container {
  width: 100%; max-width: 76rem; margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.site-header { border-bottom: 1px solid var(--site-line); background: var(--site-paper); }
.site-nav {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .25rem 2rem; min-height: 5.25rem; padding-block: .75rem;
}
.site-brand {
  display: inline-flex; align-items: center; gap: .7rem; min-width: 0; min-height: 2.75rem;
  color: var(--site-ink); text-decoration: none;
}
.site-brand-text {
  font-size: 1.55rem; font-weight: 750; line-height: 1.1;
  letter-spacing: -.055em; overflow-wrap: anywhere;
}
.site-mark {
  display: grid; flex: none; grid-template-columns: repeat(2, .46rem); gap: .23rem;
  padding: .64rem; border-radius: .65rem .65rem .65rem .2rem; background: var(--site-green);
}
.site-mark i { aspect-ratio: 1; border-radius: 1px; background: var(--site-paper); }
.site-mark i:nth-child(2) { border-radius: 50%; background: #edcb7e; }
.site-nav nav { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1.75rem; min-width: 0; }
.site-nav nav a, .site-footer a, .site-breadcrumb a {
  color: var(--site-green-dark); text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.site-nav nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: .9375rem; text-decoration: none;
}
.site-nav a[aria-current="page"] { font-weight: 750; }
.site-nav nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.site-skip {
  position: fixed; z-index: 100; top: .75rem; left: .75rem; max-width: calc(100% - 1.5rem);
  padding: .8rem 1rem; border: 1px solid var(--site-green); border-radius: .4rem;
  background: var(--site-paper); color: var(--site-green-dark); font-weight: 650;
}
.site-skip:not(:focus) { transform: translateY(-250%); }

/* A clear invitation and a real reading surface. No decorative copy. */
.site-hero {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.75rem, 5vw, 4.5rem);
}
.site-hero > div { min-width: 0; }
.site-hero h1, .site-intro h1 {
  margin: 0; font-family: var(--site-editorial); font-weight: 600;
  letter-spacing: -.04em; text-wrap: balance; overflow-wrap: break-word;
}
.site-hero h1 { max-width: 13ch; font-size: clamp(2.5rem, 4.6vw, 4.1rem); line-height: 1.06; }
.site-hero h1 span { display: block; color: var(--site-green); }
.site-hero p, .site-intro p { color: var(--site-muted); }
.site-hero > div > p {
  max-width: 43ch; margin-block: 1.5rem 1.75rem; font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.75; text-wrap: pretty;
}
.site-actions { display: flex; align-items: flex-start; flex-direction: column; gap: .6rem; }
.site-button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 3.25rem; max-width: 100%; padding: .8rem 1.3rem;
  border: 1px solid var(--site-green); border-radius: .6rem;
  background: var(--site-green); color: var(--site-paper);
  font-size: 1rem; font-weight: 700; line-height: 1.45; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.site-button > span, .site-text-link > span { flex: none; }
.site-text-link {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; max-width: 100%;
  padding-block: .5rem; color: var(--site-green-dark); font-size: .875rem; line-height: 1.55;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.paper-example {
  min-width: 0; margin: 0; padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid #d5ddce; border-radius: 1rem; background: var(--site-mint);
}
.paper-example figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  max-width: 22rem; margin: 0 auto 1.2rem; color: var(--site-muted);
  font-size: .8125rem; line-height: 1.5;
}
.paper-example figcaption > span {
  flex: none; color: var(--site-green-dark); font-size: .75rem; font-weight: 750;
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.sample-sheet {
  position: relative; width: 100%; max-width: 22rem; min-width: 0;
  aspect-ratio: 210 / 297; margin-inline: auto; padding: clamp(1.25rem, 2.2vw, 2rem);
  border: 1px solid #c8cebf; border-radius: 2px; background: #fff; color: #242b25;
  box-shadow: 5px 6px 0 -1px #d6ddcd, 0 12px 26px #263c3210;
  font-family: var(--site-sans);
}
.sample-sheet > strong {
  display: block; font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.3; letter-spacing: -.025em;
}
.sample-sheet > p {
  margin: .6rem 0 1.6rem; padding-bottom: 1.1rem; border-bottom: 1px solid #c8cebf;
  color: #48534b; font-size: .8125rem; line-height: 1.6;
}
.sample-sheet ol {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem;
  margin: 0; padding: 0; list-style-position: inside;
  font-size: clamp(.875rem, 1.15vw, 1.0625rem); font-variant-numeric: tabular-nums; line-height: 1.75;
}
.sample-sheet li { min-width: 0; white-space: nowrap; }
.sample-sheet li::marker { color: #5d675f; font-size: .68em; }

/* Topic identity follows data-topic, so related cards keep the same identity. */
.site-topics, .site-how, .site-explainer { padding-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.site-topics, .site-how { scroll-margin-block-start: 1.5rem; }
.site-topics h2, .site-how h2, .site-explainer h2 {
  margin: 0 0 1.4rem; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.25;
  letter-spacing: -.035em; font-weight: 700; text-wrap: balance;
}
.topic-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin: 0; padding: 0; list-style: none;
}
.topic-grid > li { min-width: 0; }
.topic-card {
  --topic-ink: #255c47; --topic-tint: #e5eddf;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  grid-template-areas: "symbol arrow" "copy copy"; align-content: start; align-items: start;
  gap: 1.35rem .8rem; height: 100%; padding: 1.5rem; border: 1px solid var(--site-line);
  border-radius: .8rem; background: var(--site-paper); color: var(--site-ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.topic-card[data-topic="add-subtract"] { --topic-ink: #255c47; --topic-tint: #e5eddf; }
.topic-card[data-topic="multiply-divide"] { --topic-ink: #85531f; --topic-tint: #f4e8ce; }
.topic-card[data-topic="compare"] { --topic-ink: #405d7b; --topic-tint: #e5eaf1; }
.topic-card[data-topic="number-bonds"] { --topic-ink: #785357; --topic-tint: #f3e5e5; }
.topic-card[data-topic="missing-number"] { --topic-ink: #605680; --topic-tint: #ece6f2; }
.topic-card[data-topic="sequences"] { --topic-ink: #48632d; --topic-tint: #e8ecd9; }
.topic-card > span:nth-child(2) { grid-area: copy; min-width: 0; }
.topic-card strong {
  display: block; margin-bottom: .6rem; font-size: clamp(1.0625rem, 1.55vw, 1.3rem);
  font-weight: 700; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere;
}
.topic-card strong + span {
  display: block; max-width: 40ch; color: var(--site-muted); font-size: .875rem;
  line-height: 1.65; overflow-wrap: anywhere;
}
.topic-symbol {
  grid-area: symbol; justify-self: start; display: inline-grid; place-items: center;
  min-width: 3.1rem; min-height: 3.1rem; padding: .4rem .6rem; border-radius: .55rem;
  background: var(--topic-tint); color: var(--topic-ink);
  font-size: 1.25rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.topic-arrow { grid-area: arrow; display: inline-grid; place-items: center; min-width: 2rem; min-height: 3.1rem; color: var(--topic-ink); font-size: 1.3rem; line-height: 1; }
.topic-card:focus-visible { border-color: var(--topic-ink); }
.topic-card:focus-visible strong { text-decoration: underline; text-underline-offset: .18em; }
.site-how { border-top: 1px solid var(--site-line); padding-top: 2.5rem; }
.site-how h2 { margin-bottom: 1.8rem; }
.site-how ol {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem;
  margin: 0; padding-left: 1.8rem; list-style-type: decimal-leading-zero;
}
.site-how li { min-width: 0; padding-inline-start: .4rem; }
.site-how li::marker { color: var(--site-green); font: 600 1.25rem var(--site-editorial); }
.site-how strong { display: block; line-height: 1.5; }
.site-how p { margin: .4rem 0 0; color: var(--site-muted); font-size: .9375rem; line-height: 1.7; }

/* Topic pages stay compact above the actual worksheet controls. */
.site-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .55rem; padding-top: 1rem;
  color: var(--site-muted); font-size: .8125rem; line-height: 1.5;
}
.site-breadcrumb > * { min-width: 0; overflow-wrap: anywhere; }
.site-breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-intro { margin: .7rem 0 1.75rem; }
.site-intro h1 { max-width: 28ch; font-size: clamp(1.9rem, 3.35vw, 2.85rem); line-height: 1.15; }
.site-intro p { max-width: 64ch; margin: .85rem 0 0; font-size: 1rem; line-height: 1.7; }
.site-explainer { padding-top: clamp(2.25rem, 5vw, 3.5rem); }
.site-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.site-notes > section { min-width: 0; padding-top: 1.5rem; border-top: 1px solid var(--site-line); }
.site-notes h2 { margin-bottom: .75rem; font-size: 1.3rem; }
.site-notes p { max-width: 65ch; margin: 0; color: var(--site-muted); line-height: 1.8; }
.site-related { margin-top: 2.5rem; }
.site-related .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 51rem; }
/* Ready-made landing pages: useful examples stay below the live constructor. */
.site-presets { margin-top: 2.5rem; }
.site-presets h2 { margin-bottom: 1rem; font-size: 1.3rem; }
.site-preset-links {
  display: flex; flex-wrap: wrap; gap: .65rem; margin: 0; padding: 0; list-style: none;
}
.site-preset-links li { min-width: 0; max-width: 100%; }
.site-preset-links a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 2.875rem; padding: .65rem 1rem; border: 1px solid var(--site-line);
  border-radius: .6rem; background: var(--site-paper); color: var(--site-green-dark);
  font-size: .9375rem; line-height: 1.5; text-underline-offset: .2em; overflow-wrap: anywhere;
}
.site-preset-links a > span { flex: none; text-decoration: none; }
.site-landing-examples {
  margin-bottom: 2.25rem; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--site-line);
  border-radius: .8rem; background: var(--site-paper);
}
.site-landing-examples h2, .site-pair-reference h2 { margin-bottom: .75rem; }
.site-landing-examples > p, .site-pair-reference > p { max-width: 65ch; margin: 0; color: var(--site-muted); }
.site-example-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem;
  margin-block: 1.5rem; padding-left: 1.75rem; font-size: 1.25rem; font-variant-numeric: tabular-nums;
}
.site-example-list li { min-width: 0; overflow-wrap: anywhere; padding-inline-start: .3rem; }
.site-example-list li::marker { color: var(--site-muted); font-size: .8rem; }
.site-example-answers { max-width: 42rem; border-top: 1px solid var(--site-line); }
.site-example-answers summary { min-height: 2.875rem; padding-block: .75rem; color: var(--site-green-dark); cursor: pointer; }
.site-example-answers ol { margin: .25rem 0 0; padding-left: 1.5rem; line-height: 2; font-variant-numeric: tabular-nums; }
.site-pair-reference { margin-top: 2.5rem; }
.site-pair-table {
  width: 100%; max-width: 37rem; table-layout: fixed; border-collapse: collapse; margin-top: 1rem;
  background: var(--site-paper); font-variant-numeric: tabular-nums;
}
.site-pair-table caption { padding-bottom: .6rem; color: var(--site-muted); text-align: left; font-size: .875rem; }
.site-pair-table th, .site-pair-table td { padding: .6rem; border: 1px solid var(--site-line); text-align: center; overflow-wrap: anywhere; }
.site-pair-table th { background: var(--site-mint); font-size: .875rem; font-weight: 650; }
.site-notice { padding: 1rem 1.25rem; border: 1px solid #9ba68f; border-radius: .6rem; background: var(--site-paper); }
.site-missing { padding-block: clamp(2.5rem, 8vw, 6rem); }
.site-missing .site-button { margin-top: 1.5rem; }
.site-footer { border-top: 1px solid var(--site-line); background: #eeeee4; color: var(--site-muted); font-size: .875rem; }
.site-footer > div {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .5rem 1.5rem; padding-block: 1.5rem;
}
.site-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1rem; font-weight: 700; }
.site-footer span { max-width: 42ch; }

@media (hover: hover) {
  .site-nav nav a:hover { text-decoration: underline; }
  .site-button:hover { background: var(--site-green-dark); border-color: var(--site-green-dark); }
  .site-text-link:hover { text-decoration-thickness: 2px; }
  .topic-card:hover { border-color: var(--topic-ink); box-shadow: 0 4px 18px #263c3209; }
  .topic-card:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
}
@media (max-width: 58rem) {
  .site-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; }
  .site-hero h1 { font-size: clamp(2.2rem, 4.8vw, 3rem); }
  .paper-example { padding: 1.25rem; }
  .sample-sheet { padding: 1.25rem; }
  .sample-sheet ol { grid-template-columns: 1fr; gap: .8rem; font-size: 1rem; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-how ol { gap: 1.5rem; }
}
@media (max-width: 42rem) {
  .site-example-list { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .site-preset-links { display: grid; grid-template-columns: minmax(0, 1fr); }
  .site-presets { margin-top: 2rem; }
  .site-hero, .site-notes, .site-how ol, .topic-grid, .site-related .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .site-nav { min-height: 0; gap: .15rem 1rem; padding-block: .5rem; }
  .site-nav nav { width: 100%; gap: .25rem 1.5rem; }
  .site-nav nav a { font-size: .875rem; }
  .site-hero { gap: 2rem; padding-block: 2.25rem 2.75rem; }
  .site-hero h1 { max-width: 14ch; font-size: clamp(2.15rem, 9.6vw, 3rem); line-height: 1.1; }
  .site-hero > div > p { margin-block: 1.15rem 1.35rem; font-size: 1rem; line-height: 1.7; }
  .site-actions { gap: .5rem; }
  .site-actions .site-button { align-self: stretch; }
  .site-text-link { font-size: .875rem; }
  .paper-example { width: 100%; max-width: 26rem; margin-inline: auto; }
  .sample-sheet ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem .65rem; font-size: .9375rem; }
  .paper-example figcaption { margin-bottom: 1rem; }
  .topic-card {
    grid-template-columns: auto minmax(0, 1fr) 1rem; grid-template-rows: auto;
    grid-template-areas: "symbol copy arrow"; gap: .75rem; padding: 1.1rem;
  }
  .topic-card strong { font-size: 1.0625rem; margin-bottom: .35rem; }
  .topic-card strong + span { font-size: .875rem; line-height: 1.6; }
  .topic-symbol { min-width: 2.5rem; min-height: 2.5rem; padding: .35rem; font-size: 1.05rem; }
  .topic-arrow { min-width: 0; min-height: 2.5rem; font-size: 1.1rem; }
  .site-how { padding-top: 2rem; }
  .site-how ol { gap: 1.5rem; }
  .site-breadcrumb { padding-top: .65rem; }
  .site-intro { margin: .5rem 0 1.25rem; }
  .site-intro h1 { font-size: clamp(1.8rem, 7.5vw, 2.25rem); }
  .site-notes { gap: 1.75rem; }
  .site-footer > div { align-items: flex-start; flex-direction: column; gap: .25rem; padding-block: 1rem 1.5rem; }
}
@media (max-width: 23rem) {
  .site-nav nav { gap: .25rem 1rem; }
  .paper-example { padding: 1rem; }
  .sample-sheet { padding: 1rem; }
  .sample-sheet ol { grid-template-columns: 1fr; gap: .65rem; }
  .sample-sheet > p { margin-bottom: 1.1rem; }
  .topic-card { gap: .6rem; padding: .95rem; }
  .topic-card strong { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-button, .site-text-link, .topic-card { transition: none; }
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .site-button, .site-mark, .topic-symbol, .sample-sheet { border: 1px solid ButtonText; }
  .site-button { background: ButtonFace; color: ButtonText; }
  .site-mark i { background: CanvasText; }
  .topic-card { border-color: ButtonText; }
  .sample-sheet { box-shadow: none; }
}
@media print {
  .site-header, .site-footer, .site-skip, .site-breadcrumb, .site-intro, .site-explainer { display: none !important; }
  body { background: #fff; color: #000; }
  main.site-container { width: auto; max-width: none; padding: 0; }
  .paper-example, .sample-sheet { box-shadow: none; background: #fff; border-color: #777; }
  .sample-sheet { aspect-ratio: auto; break-inside: avoid; }
  .topic-card { break-inside: avoid; box-shadow: none; }
}