:root { color-scheme: dark; --bg:#0b0b0f; --surface:#18181f; --border:#2b2b38; --text:#f4f4f5; --muted:#adadb6; --soft:#81818b; --violet:#6c5cff; --violet-hover:#7c6dff; --violet-border:rgba(108,92,255,.38); --lime:#b8ff3d; --radius-card:18px; --space-paragraph:18px; --space-heading:22px; --space-visual:44px; --space-quote:36px; --space-section:clamp(38px,7vw,62px); }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.5; }
a { color:inherit; }
h1,h2,p { margin-top:0; }
.ambient { position:fixed; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(circle at 84% -12%,rgba(108,92,255,.18),transparent 32rem),radial-gradient(circle at -12% 76%,rgba(184,255,61,.035),transparent 25rem); }
.page-shell { width:min(100% - 32px,860px); margin:0 auto; padding:26px 0 72px; }
.site-header { display:flex; align-items:center; margin-bottom:var(--space-section); }
.back-link { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:0 5px; color:#fff; font-size:14px; font-weight:700; text-decoration:none; }
.button-arrow { color:#fff; font-size:26px; font-weight:700; line-height:1; }
.back-link:hover { color:#c9c4ff; }
.back-link:focus-visible,.button:focus-visible { outline:3px solid rgba(108,92,255,.5); outline-offset:4px; border-radius:4px; }
.eyebrow { margin-bottom:10px; color:#a99fff; font-size:11px; font-weight:850; letter-spacing:.13em; line-height:1.3; text-transform:uppercase; }
.section { margin-bottom:var(--space-section); }
.section-heading { max-width:760px; margin-bottom:var(--space-visual); }
h1,h2 { letter-spacing:-.065em; line-height:1.02; }
h1 { max-width:800px; margin-bottom:var(--space-heading); font-size:clamp(36px,6vw,54px); font-weight:700; }
h2 { max-width:700px; margin-bottom:var(--space-heading); font-size:clamp(30px,5vw,45px); }
.section-heading > p,.problem-section > p:not(.eyebrow),.calculator-section > p:not(.eyebrow) { max-width:700px; margin-bottom:0; color:var(--muted); font-size:clamp(16px,2vw,18px); line-height:1.55; }
.section-heading > p + p,.problem-section > p + p,.calculator-section > p + p { margin-top:var(--space-paragraph); }
.method-layout { display:grid; grid-template-columns:minmax(280px,.92fr) minmax(0,1fr); align-items:center; gap:clamp(30px,7vw,72px); }
.plate-figure { display:grid; justify-items:center; margin:0; }
.plate-diagram { width:min(100%,340px); filter:drop-shadow(0 18px 32px rgba(0,0,0,.22)); }
.plate-rim { fill:var(--surface); stroke:#3a3a49; stroke-width:3; }
.plate-vegetables { fill:rgba(184,255,61,.75); stroke:var(--bg); stroke-width:4; }
.plate-protein { fill:#8d82ff; stroke:var(--bg); stroke-width:4; }
.plate-carbs { fill:#555466; stroke:var(--bg); stroke-width:4; }
.plate-center { fill:var(--bg); }
.food-groups { display:grid; gap:0; margin:0; }
.food-groups div { padding:18px 0; border-top:1px solid var(--border); }
.food-groups div:last-child { border-bottom:1px solid var(--border); }
.food-groups dt { margin-bottom:6px; color:#bdb6ff; font-size:11px; font-weight:850; letter-spacing:.11em; }
.food-groups div:nth-child(2) dt { color:#555466; }
.food-groups div:last-child dt { color:#d0f68a; }
.food-groups dd { margin:0; color:var(--muted); font-size:15px; line-height:1.5; }
.problem-section { max-width:760px; margin-bottom:var(--space-section); }
.problem-section > p:not(.eyebrow) { margin-bottom:var(--space-paragraph); }
blockquote { margin:var(--space-quote) 0 0; padding:22px 0 22px 24px; border-left:2px solid var(--lime); color:var(--text); font-size:clamp(22px,3.3vw,30px); font-weight:700; letter-spacing:-.045em; line-height:1.18; }
blockquote strong { color:var(--lime); }
.problem-section blockquote + p { margin-top:var(--space-quote); }
.calculator-section { padding:clamp(24px,5vw,38px); border:1px solid var(--violet-border); border-radius:var(--radius-card); background:linear-gradient(135deg,rgba(108,92,255,.12),var(--surface) 58%); box-shadow:0 18px 40px rgba(0,0,0,.22); }
.calculator-section > p:not(.eyebrow) { margin-bottom:0; }
.calculator-section > h2 + p { margin-bottom:var(--space-paragraph); }
.calculator-section > h2 + p + p { margin-top:var(--space-paragraph); margin-bottom:40px; }
.result-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 12px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.result-preview div { min-width:0; padding:16px 18px 17px 0; }
.result-preview div + div { padding-left:18px; border-left:1px solid var(--border); }
.result-preview span { display:block; color:var(--muted); font-size:13px; font-weight:650; line-height:1.35; }
.result-preview strong { display:block; margin-top:8px; color:var(--lime); font-size:clamp(26px,3.8vw,35px); letter-spacing:-.06em; line-height:1; white-space:nowrap; }
.result-caption { margin:0 0 23px !important; color:var(--soft) !important; font-size:13px !important; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:54px; padding:0 22px; border:1px solid transparent; border-radius:14px; background:var(--violet); color:#fff; box-shadow:0 12px 30px rgba(108,92,255,.24); font-size:15px; font-weight:800; text-decoration:none; transition:background .14s ease,transform .14s ease; }
.button:hover { background:var(--violet-hover); transform:translateY(-1px); }
@media (max-width:700px) { :root { --space-paragraph:16px; --space-heading:18px; --space-visual:32px; --space-quote:30px; --space-section:38px; } .page-shell { width:min(100% - 24px,600px); padding-top:18px; padding-bottom:46px; } .site-header { justify-content:flex-start; margin-bottom:var(--space-section); } .section { margin-bottom:var(--space-section); } .problem-section { margin-bottom:var(--space-section); } .method-layout { grid-template-columns:1fr; gap:34px; } .food-groups { max-width:520px; } .calculator-section { padding:22px 19px; } .calculator-section > h2 + p + p { margin-bottom:32px; } }
@media (max-width:480px) { .page-shell { width:min(100% - 20px,460px); } .button-arrow { transform:translateY(-2px); } h1 { font-size:36px; } h2 { font-size:clamp(29px,8.8vw,38px); } .result-preview { grid-template-columns:1fr; } .result-preview div,.result-preview div + div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-left:0; } .result-preview div + div { border-top:1px solid var(--border); } .result-preview strong { flex:0 0 auto; margin-top:0; } .button { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }

.site-footer { display:flex; flex-wrap:wrap; gap:4px 7px; margin-top:38px; padding-top:18px; border-top:1px solid var(--border); color:var(--soft); font-size:12px; line-height:1.45; }
.site-footer a { color:var(--muted); text-underline-offset:3px; }
.site-footer a:hover,.site-footer a:focus-visible { color:var(--text); }

/* Единый ритм и выравнивание ссылки «Назад». */
.page-shell { padding-top:24px; }
.site-header { margin-bottom:28px; }
.back-link .button-arrow { transform:translateY(-1px); }
@media (max-width:700px) { .page-shell { padding-top:20px; } .site-header { margin-bottom:24px; } .back-link .button-arrow { transform:translateY(-2px); } }