/* v26 · общее. Мёд, воск, тёмная вощина. Вёрстки: .m (телефон) и .d (компьютер) — свои файлы.
   Светлая и тёмная тема по prefers-color-scheme; анимации гасит prefers-reduced-motion. */
:root {
  --bg: #fbf6ea; --ink: #2b1d0e; --mut: #6b563a; --card: #fffaf0; --line: #e6d7b6;
  --cell: #f1e2b8; --sym: #4a2c0a; --honey: #f2b632; --honey-ink: #a85f00; --honey-deep: #c77800;
  --ok: #2f7d4f; --bad: #b0372a; --warn: #8a5a00; --focus: #1d64d8;
  --r: 18px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15100a; --ink: #f6ecd8; --mut: #bca98a; --card: #201810; --line: #3a2d1c;
    --cell: #2c2215; --sym: #f2c25a; --honey-ink: #f2b632; --ok: #6fcf97; --bad: #ff8a7a;
    --warn: #f2c25a; --focus: #7fb0ff;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--honey-ink); }
h1, h2, h3 { line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
.fatal { padding: 24px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg);
  padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.o-body { fill: currentColor; }
.o-det { fill: var(--o-det, var(--cell)); }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px;
  border-radius: 999px; border: 0; background: var(--honey); color: #2b1d0e; font: inherit; font-weight: 650;
  text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.btn:hover { box-shadow: 0 6px 18px -8px rgba(160, 95, 0, .7); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.small { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.link { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* шапка */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none; }
.brand b { font-size: 18px; letter-spacing: -.01em; }
.brand span { color: var(--mut); font-size: 13px; }
.grow { flex: 1; }
.lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px;
  color: var(--ink); text-decoration: none; font-weight: 650; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }

/* герой: кинетика «Від вулика до пряника» */
.hero { position: relative; }
.eyebrow { color: var(--honey-ink); font-weight: 650; letter-spacing: .02em; }
.kin { font-weight: 800; letter-spacing: -.03em; }
.kin .mask { display: inline-block; line-height: 1.08; padding: 0 .04em .22em; margin-bottom: -.14em;
  clip-path: inset(-0.4em -0.2em 0 -0.2em); vertical-align: bottom; }
.kin .w { display: inline-block; transform: translateY(105%); padding-bottom: .2em; margin-bottom: -.2em;
  animation: rise .8s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 130ms + 80ms); }
/* «заливка» из контура: медовый уровень поднимается в буквах */
.kin .hw { color: transparent; -webkit-text-stroke: 2px var(--honey-ink);
  background: linear-gradient(to top, var(--honey-deep) 0%, var(--honey-ink) 48%, transparent 52%) no-repeat;
  background-size: 100% 200%; background-position: 0 0; -webkit-background-clip: text; background-clip: text;
  animation: rise .8s cubic-bezier(.2, .8, .2, 1) forwards, fill 1.6s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--i) * 130ms + 80ms), calc(var(--i) * 130ms + 700ms); }
@media (prefers-color-scheme: dark) {
  .kin .hw { background-image: linear-gradient(to top, #e09a12 0%, var(--honey) 48%, transparent 52%); }
}
@keyframes rise { to { transform: none; } }
@keyframes fill { to { background-position: 0 100%; } }
.drip { display: block; width: 14px; height: 18px; margin: 2px 0 0 1.2em; background: var(--honey);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform-origin: top center; opacity: 0;
  animation: drip 2.8s 1.9s ease-in infinite; }
@keyframes drip {
  0% { opacity: 0; transform: translateY(-6px) scaleY(.4); }
  15% { opacity: 1; transform: translateY(0) scaleY(1); }
  60% { opacity: 1; transform: translateY(0) scaleY(1.15); }
  100% { opacity: 0; transform: translateY(46px) scaleY(1); }
}
.lead { color: var(--ink); }
.note { color: var(--mut); font-size: 14px; }
.hero-art { display: grid; }
.hhex { display: grid; place-items: center; aspect-ratio: 1 / 1.1547; background: var(--cell); color: var(--sym);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); --o-det: var(--cell);
  animation: bob 5s ease-in-out infinite; }
.hhex:nth-child(2n) { animation-delay: -2.5s; }
.hhex:nth-child(3n) { animation-delay: -1.2s; }
.hhex svg { width: 60%; height: 60%; }
.hhex:nth-child(4) { background: var(--honey); --o-det: var(--honey); color: #4a2c0a; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* разделы */
.sec { padding-block: 40px 8px; }
.sec h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -.02em; }
.sub { color: var(--mut); margin-top: 8px; max-width: 60ch; }
.fine { color: var(--mut); font-size: 13px; margin-top: 12px; }
.rise { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.rise.in { opacity: 1; transform: none; }
.badge { display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--honey); color: #2b1d0e; }

/* чипы тем */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
.chip { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 0; font: inherit; font-size: 15px;
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.chip .n { color: var(--mut); font-size: 13px; }
.chip[aria-checked="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.chip[aria-checked="true"] .n { color: inherit; opacity: .7; }

/* соты */
.comb { --cols: 5; padding-bottom: 8px; }
.comb .state { color: var(--mut); padding: 24px 0; }
.comb .state.bad { color: var(--bad); }
.hrow { display: flex; }
.hrow + .hrow { margin-top: calc(-100% / var(--cols) * 1.1547 * .25 + 2px); }
.hrow.odd .cell:first-child { margin-left: calc(100% / var(--cols) / 2); }
.cell { position: relative; width: calc(100% / var(--cols)); aspect-ratio: 1 / 1.1547; padding: 3px; }
.cell::before { content: ""; position: absolute; inset: 0; background: var(--focus); opacity: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.cell:has(.hex:focus-visible)::before { opacity: 1; }
.hex { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0;
  background: var(--cell); color: var(--sym); cursor: pointer; overflow: hidden; --o-det: var(--cell);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); touch-action: manipulation;
  transition: transform .2s; }
.hex:focus-visible { outline: none; }
.hex:active { transform: scale(.94); }
.hex .sym { position: relative; width: 60%; height: 60%; transition: color .4s .3s; }
.honey { position: absolute; inset: 0; transform: translateY(calc(100% + 14px));
  background: linear-gradient(180deg, #f8cd52 0%, #eda91f 45%, #c97a00 100%);
  transition: transform .75s cubic-bezier(.3, .7, .2, 1); }
.honey::before { content: ""; position: absolute; left: -20px; right: -20px; top: -9px; height: 10px;
  background: radial-gradient(circle at 10px 10px, #f8cd52 9px, transparent 9.5px) repeat-x 0 0 / 20px 10px;
  animation: wave 1.1s linear infinite; }
@keyframes wave { to { transform: translateX(20px); } }
.cell.seen .honey { transform: translateY(74%); }
.cell.full .honey { transform: translateY(0); }
.cell.full .hex { color: #3d2306; --o-det: #eda91f; }
@media (hover: hover) and (pointer: fine) {
  .hex:hover .honey { transform: translateY(84%); }
  .cell.seen .hex:hover .honey { transform: translateY(60%); }
  .cell.full .hex:hover .honey { transform: translateY(0); }
}

/* сцена */
.viewer { display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid var(--line); }
.grab { display: none; }
.v-head { display: flex; align-items: center; gap: 8px; }
.v-title { font-size: 22px; flex: 1; min-width: 0; }
.v-close { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
  color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.stage { position: relative; border-radius: var(--r); overflow: hidden; touch-action: none;
  background: radial-gradient(120% 90% at 50% 35%, #3b2b17 0%, #120c06 80%); transition: background .5s; }
.stage[data-bg="light"] { background: radial-gradient(120% 90% at 50% 35%, #fffaf0 0%, #e7d6b3 85%); }
.stage-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.stage-canvas:active { cursor: grabbing; }
.flat { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.flat[hidden] { display: none; }
.flat-sym { width: 46%; height: 46%; color: var(--honey); --o-det: #2a1e10; }
.stage[data-bg="light"] .flat-sym { color: #4a2c0a; --o-det: #f6ecd6; }
.pill { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: rgba(20, 14, 6, .72); color: #fbf1dc; backdrop-filter: blur(6px);
  pointer-events: none; }
.stage[data-bg="light"] .pill { background: rgba(255, 250, 240, .86); color: #2b1d0e; box-shadow: 0 0 0 1px #e1cfa8; }
.pill[data-mode="ok"]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #4cc27c; margin-right: 6px; vertical-align: 1px; }
.pill[data-mode="bad"]::before, .pill[data-mode="warn"]::before { content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: #f0a13a; margin-right: 6px; vertical-align: 1px; }
.pill[data-mode="bad"]::before { background: #ff6b57; }
.hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 12px; color: rgba(251, 241, 220, .7);
  pointer-events: none; }
.stage[data-bg="light"] .hint { color: rgba(43, 29, 14, .6); }
.stage.loading::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%;
  background: var(--honey); animation: load 1.2s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.v-body { display: flex; flex-direction: column; gap: 14px; }
.seg { display: flex; padding: 3px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.seg[hidden] { display: none; }
.seg-b { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.seg-b[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.knob { display: block; }
.knob-top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.knob-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.knob input { width: 100%; height: 32px; accent-color: var(--honey-deep); touch-action: pan-y; }
.knobs[hidden] { display: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.sw[aria-checked="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.proto h3 { font-size: 15px; margin-bottom: 6px; }
.proto dl { margin: 0; display: grid; gap: 4px; }
.proto dl div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line);
  font-size: 15px; }
.proto dt { color: var(--mut); }
.proto dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.proto .bad { color: var(--bad); font-size: 15px; }
.proto ul.bad { margin: 6px 0 0; padding-left: 18px; }

/* сценарии — карусель */
.track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 2px 8px;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); opacity: 0; transform: translateY(14px);
  transition: opacity .6s, transform .6s; }
.card.in { opacity: 1; transform: none; }
.card h3 { font-size: 20px; }
.card p { color: var(--mut); flex: 1; }
.card-ic { width: 64px; aspect-ratio: 1 / 1.1547; display: grid; place-items: center; background: var(--honey); color: #3d2306;
  --o-det: var(--honey); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.card-ic svg { width: 62%; height: 62%; }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: width .3s, background .3s; }
.dots span.on { width: 22px; border-radius: 4px; background: var(--honey-deep); }

/* приклад */
.case-figs { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin: 16px 0; }
.case-fig { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column; opacity: 0; transform: scale(.97); transition: opacity .6s, transform .6s; }
.case-fig.in { opacity: 1; transform: none; }
.case-fig img { display: block; width: 100%; height: auto; flex: 1; object-fit: contain; padding: 10px; }
.case-fig.dark { background: #000; border-color: #000; }
.case-fig figcaption { font-size: 13px; padding: 8px 12px; color: var(--mut); }
.case-fig.dark figcaption { color: #e7d6b3; }

/* свій герб */
.steps { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 12px; }
.step { position: relative; padding: 14px 16px 14px 60px; border-radius: var(--r); background: var(--card);
  border: 1px solid var(--line); opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s; }
.step.in { opacity: 1; transform: none; }
.step:nth-child(2) { transition-delay: .1s; }
.step:nth-child(3) { transition-delay: .2s; }
.step .n { position: absolute; left: 14px; top: 14px; width: 32px; aspect-ratio: 1 / 1.1547; display: grid; place-items: center;
  background: var(--honey); color: #2b1d0e; font-weight: 800;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.step p { color: var(--mut); }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 28px 16px 40px; color: var(--mut);
  font-size: 13px; border-top: 1px solid var(--line); margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kin .w { transform: none; }
  .kin .hw { background-position: 0 100%; }
  .drip { display: none; }
  .rise, .card, .case-fig, .step { opacity: 1; transform: none; }
}
.stage:has(.flat:not([hidden])) .hint { display: none; }