/* Кофейня «Зерно» — чертёж 03 в стиле портфолио anorrodev.tech.
   Светлая тема — рабочий лист: бумага, тушь, красная ручка. Тёмная — чёрный лист. Клетки 100 px от нуля линеек.
   На листе два живых устройства: iPhone с Mini App гостя и iPad mini с экраном бариста. */

:root {
  --paper: #f2f0ea; --paper-2: #e8e5dc; --paper-3: #d9d5ca;
  --ink: #161614; --pencil: #645f57; --line: #b7b2a7;
  --grid: rgba(22, 22, 20, .08);
  --mark: #d4431f; --mark-ink: #b3341a;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .14 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --app-bg: #F6F1E7; --app-ink: #221A14; --app-surface: #FFFCF6;
  --f-letter: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cond: "Sofia Sans Condensed", "Sofia Sans", system-ui, sans-serif;
  --f-display: "Sofia Sans Extra Condensed", "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --f-mono: "Overpass Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --edge: 12px; --ruler: 0px; --gutter: clamp(18px, 3.4vw, 52px);
  --ease: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #151412; --paper-2: #1d1c19; --paper-3: #2c2a25;
  --ink: #ebe7dd; --pencil: #a39d91; --line: #4d4941;
  --grid: rgba(235, 231, 221, .07);
  --mark: #e8583a; --mark-ink: #f06b4b;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .92 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --app-bg: #15110E; --app-ink: #F1E9DC; --app-surface: #1F1915;
  color-scheme: dark;
}

/* линейки — как в портфолио: только с мышью и на широком экране */
.rulers, .ruler-corner { display: none; }
@media (min-width: 1024px) and (pointer: fine) {
  :root:root { --ruler: 22px; }
  :root body { padding: calc(var(--edge) + var(--ruler)) var(--edge) var(--edge) calc(var(--edge) + var(--ruler)); }
  :root .rulers { display: block; }
  .ruler { position: fixed; z-index: 60; background: var(--paper-2); pointer-events: none; }
  .ruler-x { top: 0; left: var(--ruler); right: 0; height: var(--ruler); width: calc(100% - var(--ruler)); }
  .ruler-y { top: var(--ruler); left: 0; bottom: 0; width: var(--ruler); height: calc(100% - var(--ruler)); }
  :root .ruler-corner { display: grid; place-items: center; position: fixed; top: 0; left: 0; z-index: 61; width: var(--ruler); height: var(--ruler); background: var(--paper-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--pencil); }
  .ruler-corner .icon { width: 13px; height: 13px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
.reduce { scroll-behavior: auto; }
body { margin: 0; padding: var(--edge); background: var(--noise), var(--paper); color: var(--ink); font: 400 17px/1.55 var(--f-letter); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }
[hidden] { display: none !important; }
.sprite { display: none; }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); font-weight: 700; }
.skip:focus { top: 16px; }
.mono { font-family: var(--f-mono) !important; }

/* ---------- лист ---------- */
.frame-in {
  position: relative; display: flex; flex-direction: column;
  min-height: calc(100svh - var(--edge) * 2 - var(--ruler));
  border: 2.5px solid var(--ink);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100px 100px;
  background-position: calc(-1 * var(--edge) - 2.5px) calc(-1 * var(--edge) - 2.5px);
}

/* ---------- шапка: логотип, «как попробовать», вид ---------- */
.top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; min-height: 60px; padding: 8px var(--gutter); border-bottom: 1.5px solid var(--ink); }
.logo { display: inline-flex; align-items: center; min-height: 44px; font: 800 26px/1 var(--f-display); white-space: nowrap; }
.logo span { margin-left: .25em; color: var(--pencil); font-weight: 700; }
.logo:hover span { color: var(--mark-ink); }
.views-seg { display: inline-flex; border: 1.5px solid var(--ink); }
.views-seg button { display: grid; place-items: center; min-width: 44px; height: 38px; padding: 0 14px; font: 500 13px/1 var(--f-mono); letter-spacing: .04em; }
.views-seg button + button { border-left: 1.5px solid var(--ink); }
.views-seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.views-seg button:not([aria-checked="true"]):hover { background: var(--paper-3); }

.howto { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.howto-k { flex: none; font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pencil); }
.guide { display: flex; align-items: center; gap: 4px 18px; min-width: 0; }
.guide li { position: relative; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.2; color: var(--pencil); white-space: nowrap; }
.guide .n { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; font: 600 12.5px/1 var(--f-mono); }
.guide .ring { position: absolute; inset: -9px -12px; width: calc(100% + 24px); height: calc(100% + 18px); max-width: none; overflow: visible; fill: none; stroke: var(--mark); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.guide li.now { color: var(--ink); }
.guide li.now .n { border-color: var(--ink); }
.guide li.now .ring { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease); }
.guide li.done { color: var(--pencil); }
.guide li.done .n { border-color: var(--mark); background: var(--mark); color: var(--paper); }
.guide li.done > span:last-child { text-decoration: line-through; text-decoration-color: var(--mark); text-decoration-thickness: 2px; }
.restart { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 10px; border: 1.5px solid var(--line); font: 500 12.5px/1 var(--f-mono); color: var(--pencil); }
.restart:hover { border-color: var(--ink); color: var(--ink); }
.restart .icon { width: 14px; height: 14px; }
/* шапка тесная: без подписи «как попробовать», кнопка — только значок */
@media (max-width: 1700px) { .howto-k { display: none; } .restart span { display: none; } .restart { width: 36px; justify-content: center; padding: 0; } }
@media (max-width: 1360px) {
  .top { grid-template-columns: auto auto; }
  .views { justify-self: end; }
  .howto { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding: 4px 0 2px; }
}

/* ---------- чертёж: два устройства, масштаб через zoom (не transform — iframe остаются чёткими) ---------- */
.sheet { padding: 14px var(--gutter) clamp(40px, 5vw, 72px); flex: 1; }
.stage { display: grid; justify-items: center; margin: 0; }
.drawing { --z: 1; --dw: 2040px; --ox: 0px; position: relative; width: var(--dw); height: 1024px; zoom: var(--z); }
.plane { position: absolute; top: 0; left: var(--ox); width: 2040px; height: 1024px; }
.lines { position: absolute; inset: 0; width: 2040px; height: 1024px; max-width: none; overflow: visible; }
.lines .cons line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 7 6; }
.lines .axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 22 5 3 5; }
.lines .body { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.lines .thin { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.lines .bits rect { fill: var(--ink); }
.lines .dim line { stroke: var(--ink); stroke-width: 1.2; }
.lines marker path { fill: var(--ink); }
.lines .dim-bg { fill: var(--paper); }
.lines .dim text { font: 500 16px var(--f-mono); fill: var(--ink); }
.lines .label { font: 800 13px var(--f-cond); font-size: min(calc(12.5px / var(--z)), 19px); letter-spacing: .08em; fill: var(--ink); }
.lines .link line { stroke: var(--ink); stroke-width: 1.6; }
.lines .link text { font: 500 15px var(--f-mono); font-size: min(calc(12px / var(--z)), 20px); fill: var(--pencil); }
.lines .link .lk-name { fill: var(--ink); font-weight: 600; }
.lines .pulse { fill: var(--mark); opacity: 0; }
.lines .leads line { stroke: var(--mark); stroke-width: 1.8; }
.lines .dots circle { fill: var(--mark); }
.lines .balloons circle { fill: var(--paper); stroke: var(--mark); stroke-width: 2.2; }
.lines .balloons text { font: 600 16px var(--f-mono); fill: var(--mark-ink); }
.dev { position: absolute; }
.phone { left: 110px; top: 64px; width: 441px; height: 900px; padding: 24px; }
.tablet { left: 751px; top: 106px; width: 1205px; height: 816px; padding: 36px; }
.screen, .tscreen { position: relative; overflow: hidden; background: var(--app-bg); isolation: isolate; outline: 1.5px solid var(--ink); transition: outline-color .3s; }
.screen { width: 393px; height: 852px; border-radius: 46px; }
.tscreen { width: 1133px; height: 744px; border-radius: 8px; }
.dev.is-focus .screen, .dev.is-focus .tscreen { outline: 3px solid var(--mark); }
.island { position: absolute; z-index: 3; top: 11px; left: 50%; translate: -50% 0; width: 124px; height: 36px; border-radius: 20px; background: #000; }
.statusbar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 54px; padding: 18px 34px 0 42px; display: flex; justify-content: space-between; align-items: center; font: 600 16px/1 -apple-system, "SF Pro Text", "Segoe UI", sans-serif; color: var(--app-ink); background: var(--app-bg); transition: background .4s, color .4s; }
.statusbar svg { height: 13px; fill: currentColor; }
.sb-right { display: flex; gap: 6px; align-items: center; }
.tg-head { position: absolute; z-index: 2; top: 54px; left: 0; right: 0; height: 48px; padding: 0 16px; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; text-align: center; background: var(--app-bg); color: var(--app-ink); font-family: -apple-system, "SF Pro Text", "Segoe UI", sans-serif; transition: background .4s, color .4s; }
.tg-head .close { justify-self: start; color: #2F8CFF; font-size: 16px; }
.tg-head .ttl { display: grid; line-height: 1.15; }
.tg-head .ttl b { font-size: 16px; font-weight: 600; }
.tg-head .ttl span { font-size: 12px; opacity: .55; }
.tg-head .more { justify-self: end; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #2F8CFF; display: grid; place-items: center; color: #2F8CFF; font-weight: 700; font-size: 13px; line-height: 1; }
.screen iframe { position: absolute; top: 102px; left: 0; width: 393px; height: 750px; border: 0; background: var(--app-bg); }
.tscreen iframe { display: block; width: 1133px; height: 744px; border: 0; background: var(--app-bg); }
.home-bar { position: absolute; z-index: 3; bottom: 8px; left: 50%; translate: -50% 0; width: 134px; height: 5px; border-radius: 3px; background: var(--app-ink); opacity: .85; pointer-events: none; }
/* мелкий масштаб (телефон): планшет не потрогать — поверх кнопка «открыть» */
.screen-open { display: none; position: absolute; inset: 0; place-items: center; }
.screen-open span { display: inline-flex; align-items: center; gap: .4em; padding: .6em 1em; background: var(--ink); color: var(--paper); font: 700 calc(16px / var(--z)) / 1 var(--f-letter); }
.screen-open .icon { width: calc(16px / var(--z)); height: calc(16px / var(--z)); }
.drawing.tiny .tscreen iframe { pointer-events: none; }
.drawing.tiny .screen-open { display: grid; }
.drawing.tiny .lines .dim, .drawing.tiny .lines .cons, .drawing.tiny .lines .axis, .drawing.tiny .lines .label, .drawing.tiny .lines .leads, .drawing.tiny .lines .dots, .drawing.tiny .lines .balloons { display: none; }
.drawing.tiny .lines .body { stroke-width: calc(1.6px / var(--z)); }
.drawing.tiny .tscreen { outline-width: calc(1px / var(--z)); }
/* какой вид показан */
.drawing[data-view="guest"] .tablet, .drawing[data-view="guest"] .g-bar, .drawing[data-view="guest"] .g-link,
.drawing[data-view="bar"] .phone, .drawing[data-view="bar"] .g-guest, .drawing[data-view="bar"] .g-link { display: none; }
.fig-cap { display: none; max-width: 430px; margin: 12px auto 0; font-size: 14.5px; line-height: 1.5; color: var(--pencil); }
.fig-cap b { color: var(--ink); }
.open-full { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- текст кейса ---------- */
.sheet-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--pencil); }
.sheet-label b { padding: 3px 8px; border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
.hero { display: grid; gap: 20px 72px; align-items: end; margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 1024px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); } }
.title { margin-top: 26px; font: 800 clamp(64px, 7vw, 118px)/.88 var(--f-display); letter-spacing: -.008em; }
.title span { display: inline-block; }
.title-dim { width: 100%; height: 34px; margin-top: 4px; overflow: visible; }
.title-dim line { stroke: var(--ink); stroke-width: 1.2; }
.title-dim .ext { stroke: var(--line); stroke-dasharray: 4 3; }
.title-dim path { fill: var(--ink); }
.title-dim rect { fill: var(--paper); }
.title-dim text { font: 500 14px var(--f-mono); fill: var(--ink); }
.lead { max-width: 52ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; }
.look { margin-top: 22px; }
.block-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font: 800 24px/1 var(--f-cond); text-align: left; }
.block-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.5px solid var(--ink); }
.seg button { display: grid; gap: 3px; justify-items: start; min-height: 56px; padding: 8px 16px; font-weight: 600; font-size: 16px; line-height: 1.1; text-align: left; }
.seg button + button { border-left: 1.5px solid var(--ink); }
.seg small { font: 500 12px/1 var(--f-mono); color: var(--pencil); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.seg button[aria-checked="true"] small { color: inherit; opacity: .75; }
.seg button:not([aria-checked="true"]):hover { background: var(--paper-2); }
.lower { display: grid; gap: 8px 72px; margin-top: 12px; }
.lower > div { min-width: 0; }
@media (min-width: 1024px) { .lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.block-gap { margin-top: 44px; }
.spec { table-layout: fixed; }
.spec thead th { padding: 7px 10px; border: 1.5px solid var(--ink); font: 500 12px/1.2 var(--f-mono); color: var(--pencil); text-align: left; }
.spec thead th:first-child { width: 56px; text-align: center; }
.spec td { padding: 11px 12px; border: 1px solid var(--line); border-top: 0; vertical-align: top; font-size: 15.5px; line-height: 1.45; }
.spec td:first-child { border-left: 1.5px solid var(--ink); }
.spec td:last-child { border-right: 1.5px solid var(--ink); }
.spec tr:last-child td { border-bottom: 1.5px solid var(--ink); }
.spec td b { display: block; margin-bottom: 2px; font-weight: 700; font-size: 16.5px; }
td.pos { padding-top: 12px; text-align: center; font: 600 15px/1 var(--f-mono); color: var(--mark-ink); }
.spec-note { margin-top: 10px; font: 500 12.5px/1.4 var(--f-mono); color: var(--pencil); }
.data tr { border-bottom: 1px solid var(--line); }
.data tr:first-of-type { border-top: 1.5px solid var(--ink); }
.data th, .data td { padding: 10px 0; text-align: left; vertical-align: baseline; }
.data th { width: 30%; padding-right: 16px; font: 500 12.5px/1.5 var(--f-mono); color: var(--pencil); }
.data td { font-size: 15.5px; line-height: 1.45; }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.swatches li { display: flex; align-items: center; gap: 8px; font: 500 12.5px var(--f-mono); color: var(--pencil); }
.swatches i { width: 22px; height: 22px; flex: none; border: 1px solid var(--ink); }
.rev { position: relative; margin: 44px 14px 8px; padding: 18px 20px; }
.rev p { position: relative; max-width: 54ch; font-size: 15.5px; line-height: 1.5; color: var(--pencil); }
.rev b { color: var(--ink); }
.rev a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 3px; }
.rev-cloud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--mark); stroke-width: 1.8; stroke-linecap: round; }
.rev-mark { position: absolute; top: -26px; right: -16px; display: grid; place-items: end center; width: 34px; height: 30px; padding-bottom: 5px; font: 600 12px/1 var(--f-mono); color: var(--mark-ink); background: var(--mark); clip-path: polygon(50% 0, 100% 100%, 0 100%); isolation: isolate; }
.rev-mark::before { content: ""; position: absolute; inset: 2px 2.6px 1.5px; background: var(--paper); clip-path: polygon(50% 0, 100% 100%, 0 100%); z-index: -1; }

/* ---------- основная надпись ---------- */
.tb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; width: min(820px, 100%); margin-left: auto; background: var(--ink); border-top: 2.5px solid var(--ink); border-left: 2.5px solid var(--ink); }
.tb .c { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 8px 12px 10px; background: var(--paper); }
.tb .c-2 { grid-column: span 2; }
.tb .k { font: 500 11px/1.2 var(--f-mono); color: var(--pencil); letter-spacing: .02em; }
.tb .v { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.tb .v-big { font-size: 22px; letter-spacing: .03em; text-transform: uppercase; }
.tb a.v { justify-self: start; min-height: 30px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.tb a.v:hover { text-decoration-color: var(--mark); }
.copy { padding: 10px 2px 2px; font: 500 12px/1.4 var(--f-mono); color: var(--pencil); }

/* ---------- смена темы: новый лист проявляется слева направо под красной лампой копира ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.vt-expose::view-transition-new(root) { animation: expose .85s var(--ease) both; }
.vt-expose::view-transition-new(lamp) { animation: none; }
.vt-expose::view-transition-group(lamp) { animation: lamp .85s var(--ease) both; }
@keyframes expose { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lamp { from { transform: translateX(0); } to { transform: translateX(100vw); } }
.lamp { position: fixed; top: 0; left: 0; z-index: 90; width: 3px; height: 100vh; background: var(--mark); view-transition-name: lamp; pointer-events: none; }

/* ---------- появление: контуры чертятся ---------- */
.js:not(.reduce) .lines:not(.drawn) .body { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) .1s forwards; }
.js:not(.reduce) .title-dim:not(.drawn) line:not(.ext) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s var(--ease) .35s forwards; }
.js:not(.reduce) .rev-cloud:not(.drawn) path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.reduce .guide .ring { transition: none !important; }

/* ---------- телефон: чертежа нет — Mini App в натуральную величину на всю ширину ---------- */
@media (max-width: 760px) {
  :root { --edge: 6px; --gutter: 16px; }
  .frame-in { border-width: 2px; }
  .top { padding-inline: 14px; }
  .logo { font-size: 22px; }
  .logo span { display: none; }
  .views-seg button { padding: 0 10px; font-size: 12px; }
  .views-seg [data-value="both"] { display: none; }
  .howto-k, .guide li:not(.now) { display: none; }
  .guide li { white-space: normal; }
  .drawing.native { width: 100%; height: auto; zoom: 1; }
  .drawing.native .plane { position: static; width: auto; height: auto; }
  .drawing.native .lines { display: none; }
  .drawing.native .phone { position: relative; left: auto; top: auto; width: 100%; max-width: 430px; height: auto; margin: 0 auto; padding: 6px; border: 2px solid var(--ink); border-radius: 52px; }
  .drawing.native .screen { width: 100%; height: min(852px, calc(100svh - 150px)); min-height: 560px; outline: 0; }
  .drawing.native .screen iframe { width: 100%; height: calc(100% - 102px); }
  .stage:has(.drawing.native) .fig-cap { display: block; }
  .tb { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .tb .c-2 { grid-column: 1 / -1; }
  .tb .v-big { font-size: 19px; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rev { margin-inline: 8px; }
  .spec-note { display: none; } /* выносок на телефоне нет */
  .rev-mark { right: -8px; }
}
@media (max-width: 560px) {
  .seg { grid-template-columns: 1fr; }
  .seg button + button { border-left: 0; border-top: 1.5px solid var(--ink); }
  .title { font-size: clamp(56px, 18vw, 80px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }