/* site.css — контентные страницы (техники, хабы, статьи, автор, 404) и маркетинговые элементы вкладки «Программы». Подключается после tokens/base. Всё, что помечено классом .mk (крошки, футер, SEO-тексты), скрыто в установленном приложении: html.is-app (ставит inline-скрипт в ) или display-mode standalone — пользователь PWA видит только приложение. */ html.is-app .mk{display:none !important} @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui){ .mk{display:none !important} } body[data-page="content"]{ padding-bottom:0; font-size:17px; line-height:1.6; } /* ---------- шапка ---------- */ .site-header{ max-width:1120px;margin:0 auto; display:flex;align-items:center;gap:18px; padding:calc(14px + env(safe-area-inset-top,0px)) 20px 10px; } .sh-brand{display:inline-flex;flex:0 0 auto;border-radius:var(--radius-sm)} .sh-brand img{display:block;height:26px;width:auto;opacity:.92} .sh-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap} .sh-nav a{ color:var(--muted);text-decoration:none;font-size:15px;font-weight:500; padding:7px 10px;border-radius:var(--radius-sm); } .sh-nav a:hover{color:var(--fg);background:var(--bg-elev)} .sh-cta{ flex:0 0 auto; color:var(--accent);text-decoration:none;font-size:15px;font-weight:600; padding:8px 14px;border-radius:999px; background:var(--accent-soft);border:1px solid var(--accent-border); } .sh-cta:hover{background:rgba(127,209,255,.24)} @media (max-width:720px){ .sh-nav{display:none} .sh-cta{margin-left:auto} } html.is-app .sh-cta{margin-left:auto} /* ---------- хлебные крошки ---------- */ .crumbs{max-width:1120px;margin:0 auto;padding:4px 20px 0} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:13.5px;color:var(--muted)} .crumbs li:not(:last-child)::after{content:"›";margin:0 8px;opacity:.6} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--fg)} .crumbs [aria-current]{color:var(--fg);opacity:.85} body[data-page="programs"] .crumbs{max-width:920px;padding-top:calc(14px + env(safe-area-inset-top,0px))} body[data-page="programs"] main#page{padding-top:16px} /* ---------- раскладка ---------- */ .page{max-width:1120px;margin:0 auto;padding:18px 20px 8px} .art-head h1{ margin:0 0 12px; font-size:clamp(28px, 6.2vw, 44px);line-height:1.15; font-weight:650;letter-spacing:-.01em; text-wrap:balance; } .lead{margin:0 0 10px;font-size:clamp(17px, 2.4vw, 19.5px);line-height:1.55;color:var(--fg);opacity:.9;max-width:62ch} .byline{margin:0;font-size:14px;color:var(--muted)} .byline a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)} .art-head{margin-bottom:26px} .art-timer{margin:-6px 0 28px} .nw{white-space:nowrap} @media (max-width:720px){ body[data-page="content"]{font-size:16.5px} .site-header{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:6px} .page{padding-top:12px} .art-head h1{font-size:clamp(26px, 7.4vw, 34px);margin-bottom:10px} .lead{font-size:16.5px;line-height:1.5} } @media (min-width:1000px){ .page-article.has-timer{ display:grid; grid-template-columns:minmax(0,1fr) 380px; grid-template-areas:"head timer" "body timer"; column-gap:56px; align-items:start; } .page-article.has-timer .art-head{grid-area:head} .page-article.has-timer .art-body{grid-area:body} .page-article.has-timer .art-timer{grid-area:timer;position:sticky;top:16px;margin:6px 0 0} .page-article.has-timer .art-head{margin-bottom:34px} } /* ---------- текст ---------- */ .prose{max-width:68ch;color:rgba(232,241,255,.86)} .prose > :first-child{margin-top:0} .prose h2{ margin:2.1em 0 .6em;color:var(--fg); font-size:clamp(22px, 3.4vw, 27px);line-height:1.25;font-weight:650;letter-spacing:-.005em; } .prose h3{margin:1.7em 0 .5em;color:var(--fg);font-size:19px;font-weight:650} .prose p{margin:0 0 1em} .prose ul, .prose ol{margin:0 0 1.1em;padding-left:1.3em} .prose li{margin:.35em 0} .prose li::marker{color:var(--muted)} .prose strong, .prose b{color:var(--fg);font-weight:650} .prose a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(127,209,255,.35);text-underline-offset:3px} .prose a:hover{text-decoration-color:var(--accent)} .prose blockquote{margin:1.2em 0;padding:4px 0 4px 18px;border-left:3px solid var(--accent-border);color:var(--fg)} .prose hr{border:0;border-top:1px solid var(--border-soft);margin:2em 0} .table-wrap{overflow-x:auto;margin:0 0 1.2em;-webkit-overflow-scrolling:touch} .prose table{border-collapse:collapse;min-width:100%;font-size:15.5px} .prose th, .prose td{padding:9px 12px;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:top} .prose th{color:var(--fg);font-weight:600;background:var(--bg-elev)} .callout{margin:1.3em 0;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--accent-border);background:var(--accent-soft)} .callout > :last-child{margin-bottom:0} .callout-warn{border-color:rgba(255,195,92,.35);background:rgba(255,195,92,.08)} .launch{ display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap; padding:10px 16px;border-radius:999px; background:var(--accent-soft);border:1px solid var(--accent-border); color:var(--fg) !important;text-decoration:none !important;font-weight:600;font-size:16px; } .launch:hover{background:rgba(127,209,255,.24)} .launch-play{color:var(--accent);font-size:12px} .launch-rhythm{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums} /* ---------- блоки статьи ---------- */ .steps{counter-reset:st;list-style:none;padding-left:0 !important} .steps li{counter-increment:st;position:relative;padding-left:44px;margin:.9em 0} .steps li::before{ content:counter(st);position:absolute;left:0;top:.05em; width:30px;height:30px;border-radius:50%;display:grid;place-items:center; font-size:14px;font-weight:700;color:var(--accent-fg);background:var(--accent); } .safety{margin-top:2em;padding:4px 20px 14px;border-radius:var(--radius-lg);border:1px solid rgba(255,195,92,.28);background:rgba(255,195,92,.05)} .safety h2{margin-top:.9em} .disclaimer{font-size:15px;color:var(--muted)} .faq details{border-bottom:1px solid var(--border-soft);padding:2px 0} .faq summary{ cursor:pointer;list-style:none;padding:14px 32px 14px 0;position:relative; color:var(--fg);font-weight:600;font-size:17px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:22px;color:var(--muted);font-weight:400} .faq details[open] summary::after{content:"−"} .faq-a{padding:0 0 10px} .sources h2{font-size:17px;margin-top:2em} .sources ol{font-size:13px;line-height:1.5;color:var(--muted);padding-left:1.4em} .sources li{margin:.3em 0} .sources a{word-break:break-word} .author-card{ display:flex;gap:16px;align-items:flex-start; margin:2.2em 0 0;padding:18px;border-radius:var(--radius-lg); background:var(--bg-elev);border:1px solid var(--border-soft); } .ac-avatar{ flex:0 0 56px;width:56px;height:56px;border-radius:50%;overflow:hidden; display:grid;place-items:center;font-size:22px;font-weight:700;color:var(--accent-fg); background:linear-gradient(135deg, var(--accent), var(--hold)); } .ac-avatar img{width:100%;height:100%;object-fit:cover} /* портрет на /avtor/: под заголовком на телефоне, справа от текста на десктопе */ .author-portrait{margin:0 0 26px;max-width:360px} .author-portrait img{display:block;width:100%;height:auto;border-radius:18px;background:var(--bg-elev)} .author-portrait figcaption{margin-top:8px;font-size:14px;color:var(--muted)} @media (min-width:900px){ .page-plain.has-portrait{ display:grid;grid-template-columns:minmax(0,1fr) 320px; grid-template-areas:"head portrait" "body portrait";column-gap:56px;align-items:start; } .page-plain.has-portrait .art-head{grid-area:head} .page-plain.has-portrait .prose{grid-area:body} .page-plain.has-portrait .author-portrait{grid-area:portrait;margin:6px 0 0} } .ac-name{font-weight:600;color:var(--fg)} .ac-name a{color:var(--fg)} .ac-bio, .ac-date{margin:.4em 0 0 !important;font-size:15px;color:var(--muted)} /* ---------- карточки хабов ---------- */ .tcards{list-style:none;padding:0 !important;margin:1.2em 0 1.6em;display:grid;gap:12px;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))} .tcard{margin:0 !important} .tcard a{ display:flex;flex-direction:column;gap:6px;height:100%; padding:16px 18px;border-radius:var(--radius-lg); background:var(--bg-elev);border:1px solid var(--border); text-decoration:none !important;color:inherit; transition:border-color .15s ease, background .15s ease; } .tcard a:hover{border-color:var(--accent-border);background:var(--bg-elev-2)} .tc-title{color:var(--fg);font-weight:650;font-size:17.5px} .tc-rhythm{color:var(--accent);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em} .tc-text{color:var(--muted);font-size:15px;line-height:1.5} .page-hub .prose{max-width:none} .page-hub .prose > :not(.tcards){max-width:68ch} .page-hub .prose > .table-wrap{max-width:820px} /* ---------- виджет таймера (стили движка — timer-widget.css) ---------- */ .pr-timer{ /* Шар: по ширине не больше 270px, по высоте — чтобы на телефоне «Старт» помещался в первый экран вместе с заголовком; не меньше 150px. */ --r:clamp(150px, calc(100svh - 580px), min(64vw, 270px)); position:relative; padding:16px 16px 14px; border-radius:24px; border:1px solid var(--border); background: radial-gradient(420px 300px at 50% 30%, rgba(127,209,255,.10), transparent 70%), rgba(255,255,255,.025); box-shadow:0 18px 50px rgba(0,0,0,.28); font-size:15px;line-height:1.3; } .pr-timer .dial{gap:10px} .pr-timer .phase{font-size:15px} @supports (font-size:1cqmin){ .pr-timer .count{font-size:clamp(26px, 31cqmin, 96px)} } .pr-timer .controls{background:none;padding:14px 0 0;gap:9px} .pr-timer .ctl, .pr-timer .btns{max-width:none} .pr-timer .btns-main{margin-bottom:4px} .pr-timer .btns-toggle button{min-height:42px} .tw-full{ display:inline-flex;align-items:center;justify-content:center;gap:8px; align-self:center;padding:6px 10px;border-radius:10px; color:var(--muted);text-decoration:none;font-size:14px; } .tw-full svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tw-full:hover{color:var(--fg);background:rgba(255,255,255,.06)} .tw-variants{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 8px} .pr-timer .tw-chip{ min-height:34px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.02em; color:var(--muted);font-variant-numeric:tabular-nums; } .pr-timer .tw-chip.active{color:var(--fg);background:rgba(127,209,255,.16);border-color:rgba(127,209,255,.4)} .pr-timer .done-card .done-link{display:block;margin-top:14px;color:var(--muted);font-size:14px} /* ---------- инструменты (этап 4): задержка дыхания, калькулятор сна ---------- */ .pr-tool .tool-hint{margin:0 auto;max-width:40ch;text-align:center;color:var(--muted);font-size:14px;line-height:1.45;min-height:2.9em} .mode-hold .count{font-variant-numeric:tabular-nums} .hold-result{ padding:14px 16px;border-radius:var(--radius-lg);text-align:center; background:var(--accent-soft);border:1px solid var(--accent-border); } .hold-result .hr-big{font-size:28px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums} .hold-result .hr-band{margin-top:4px;color:var(--fg)} .hold-result .hr-best{margin-top:6px;color:var(--muted);font-size:14px} .hn-head{font-size:13px;color:var(--muted);margin:2px 0 6px;text-transform:uppercase;letter-spacing:.06em} .hold-norms{list-style:none;margin:0;padding:0;display:grid;gap:4px} .hold-norms li{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border-radius:10px;font-size:14px;color:var(--muted)} .hold-norms .hn-range{flex:0 0 5.6em;font-variant-numeric:tabular-nums;color:var(--fg);font-weight:600} .hold-norms li.is-you{background:var(--accent-soft);color:var(--fg);outline:1px solid var(--accent-border)} .hold-log summary{cursor:pointer;color:var(--muted);font-size:14px;padding:4px 0} .hold-log-list{margin:6px 0 0;padding-left:1.4em;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums} /* Оверлей задержки: весь экран — одна кнопка «стоп». Тёмный, крупные цифры. */ .hold-overlay{ position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px)); background:#04090f;color:#e8f1ff;text-align:center;cursor:pointer; -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation; } .hold-overlay[hidden]{display:none} .hold-overlay:focus{outline:none} .ho-phase{font-size:17px;color:#8aa3c4;letter-spacing:.04em} .ho-count{font-size:clamp(72px, 26vw, 168px);font-weight:300;line-height:1;font-variant-numeric:tabular-nums} .hold-overlay.is-hold .ho-count{color:#c8a8ff} .hold-overlay.is-rest .ho-count{color:#9ee9c5} .ho-sub{font-size:19px;max-width:28ch;min-height:1.4em} .ho-tap{font-size:15px;color:#8aa3c4;max-width:30ch;min-height:1.3em} .ho-cancel{ position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px; padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18); background:transparent;color:#8aa3c4;font:inherit;font-size:14px;cursor:pointer; } html.hold-running, html.hold-running body{overflow:hidden} .mode-sleepcalc{display:flex;flex-direction:column;gap:12px} .mode-sleepcalc .sc-dir{align-self:center} .sc-when{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} .sc-when label{color:var(--muted);font-size:15px} .sc-when input[type=time]{ font:inherit;font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg); background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;padding:6px 12px;color-scheme:dark; } .sc-now{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elev);color:var(--fg);font:inherit;font-size:14px;cursor:pointer} .sc-lead{margin:0;text-align:center;color:var(--muted);font-size:14px} .sc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))} .sc-opt{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--radius-lg);background:var(--bg-elev);border:1px solid var(--border-soft)} .sc-opt.sc-c5, .sc-opt.sc-c6{border-color:var(--accent-border);background:var(--accent-soft)} .sc-time{font-size:28px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.1} .sc-dur{font-size:14px;color:var(--fg)} .sc-note{font-size:13px;color:var(--muted)} .sc-breath{align-self:center;margin:2px 0 0} /* ---------- блок B: раунды, метроном, ноздри ---------- */ .pr-tool .ctl-custom .custom-grid.grid-1{grid-template-columns:minmax(0,1fr);max-width:220px;margin:0 auto} .pr-tool .ctl-custom .custom-grid.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))} .pr-tool .custom-grid.grid-5 .cp-name{font-size:12px} .pr-tool .count{font-variant-numeric:tabular-nums} .hold-overlay.is-pumps .ho-count{color:#7fd1ff} .tool-overlay .ho-count{transition:color .3s} .mt-ex{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:mx} .mt-ex li{display:flex;justify-content:space-between;gap:10px;padding:5px 10px;border-radius:10px;font-size:14px;color:var(--muted);counter-increment:mx} .mt-ex li::before{content:counter(mx) '.';flex:0 0 1.6em;color:var(--muted)} .mt-ex .mx-name{flex:1;color:var(--fg)} .mt-ex .mx-dose{font-variant-numeric:tabular-nums} .mt-ex li.is-done{opacity:.5} .mt-ex li.is-cur{background:var(--accent-soft);outline:1px solid var(--accent-border)} /* Ноздри: две плашки по бокам шара (внутри .scene) — какая открыта, вдох или выдох. */ .pr-timer.has-nostrils{--r:clamp(140px, calc(100svh - 600px), min(50vw, 230px))} .has-nostrils .scene{overflow:visible} .ns-side{ position:absolute;top:50%;transform:translateY(-50%);width:clamp(52px, 17vw, 84px); display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:12px; border:1px solid var(--border-soft);background:rgba(255,255,255,.03);color:var(--muted);font-size:12.5px;line-height:1.2;text-align:center; transition:background .3s, border-color .3s, color .3s, opacity .3s; } #nsLeft{right:calc(100% + 12px)} #nsRight{left:calc(100% + 12px)} .ns-dot{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;transition:background .3s} .ns-lbl{font-weight:650} .ns-act{font-size:11.5px;min-height:1.2em} .ns-side[data-st="in"]{color:var(--fg);border-color:var(--inhale);background:rgba(127,209,255,.14)} .ns-side[data-st="in"] .ns-dot{background:var(--inhale);border-color:var(--inhale)} .ns-side[data-st="out"]{color:var(--fg);border-color:var(--exhale);background:rgba(158,233,197,.13)} .ns-side[data-st="out"] .ns-dot{background:var(--exhale);border-color:var(--exhale)} .ns-side[data-st="closed"]{opacity:.5} .ns-side[data-st="next"]{color:var(--fg);border-color:var(--accent-border)} .ns-text{margin:-4px 0 0;text-align:center;font-size:13px;line-height:1.35;color:var(--muted);min-height:1.35em;max-width:40ch} @media (max-height:760px){ .ns-text{display:none} } .tw-sep{width:1px;align-self:stretch;margin:4px 2px;background:var(--border)} /* Раунды и метроном: шар чуть меньше — «Старт» остаётся в первом экране. */ .pr-timer.mode-rounds, .pr-timer.mode-metronome{--r:clamp(140px, calc(100svh - 610px), min(60vw, 250px))} /* ---------- блок C: тест тревожности, таймер медитации ---------- */ .pr-timer.mode-gong{--r:clamp(140px, calc(100svh - 610px), min(60vw, 250px))} /* «10:00» — пять знаков: мельче, чем секунды дыхания, чтобы не вылезать за шар */ @supports (font-size:1cqmin){ .pr-timer.mode-gong .count{font-size:clamp(24px, 19cqmin, 64px);letter-spacing:-.02em} } .gn-sound .tw-variants{margin:2px 0 8px} .gn-sound input[type=range]{width:100%} /* Медитация: оверлей тише и темнее — цифры не должны светить в закрытые веки. */ .gong-overlay{background:#010306} .gong-overlay .ho-count{color:#5d7391;font-weight:200} .gong-overlay .ho-phase, .gong-overlay .ho-tap{color:#4a5d78} .gong-overlay .ho-sub{color:#6d83a1;font-size:17px} .gong-overlay.is-paused .ho-count{color:#8aa3c4} /* Тратака: свеча — точка взгляда. Всё рисуется CSS, картинок нет. В режиме со свечой цифры и подписи приглушены ещё сильнее: смотреть надо на пламя, а не на таймер. */ .gong-overlay.has-candle{background:#000} .gong-overlay.has-candle .ho-count{color:#3b4a5e;font-size:clamp(28px,7vw,44px)} .gong-overlay.has-candle .ho-phase, .gong-overlay.has-candle .ho-tap{color:#33425a} .gong-overlay.has-candle .ho-sub{color:#4d6180} .gn-candle{position:relative;width:64px;height:150px;margin:0 auto 18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end} .gn-flame{width:26px;height:58px;border-radius:50% 50% 46% 46%/62% 62% 38% 38%; background:radial-gradient(ellipse at 50% 72%,#fff6d8 0%,#ffd77a 28%,#ffa32b 55%,#ff6a10 78%,rgba(255,90,10,0) 100%); box-shadow:0 0 34px 12px rgba(255,150,40,.34),0 0 90px 30px rgba(255,120,20,.16); transform-origin:50% 100%;animation:gn-flicker 2.6s ease-in-out infinite} .gn-wick{width:3px;height:9px;background:#3a2a1c;border-radius:2px;margin-top:-3px} .gn-wax{width:34px;height:74px;border-radius:5px 5px 3px 3px; background:linear-gradient(180deg,#e8e0cf 0%,#cfc4ad 55%,#a89b82 100%); box-shadow:0 0 26px 6px rgba(255,170,70,.12)} @keyframes gn-flicker{ 0%,100%{transform:scale(1) skewX(0deg);opacity:.96} 25%{transform:scale(1.05,.97) skewX(1.6deg);opacity:1} 50%{transform:scale(.97,1.05) skewX(-1.2deg);opacity:.93} 75%{transform:scale(1.03,1) skewX(.8deg);opacity:.99} } @media (prefers-reduced-motion: reduce){ .gn-flame{animation:none} } .mode-quiz{display:flex;flex-direction:column;gap:10px} .qz-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px} .qz-step{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums} .qz-back{padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer} .qz-bar{grid-column:1 / -1;height:4px;border-radius:2px;background:var(--border-soft);overflow:hidden} .qz-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s} .qz-stem{margin:0;font-size:14.5px;color:var(--muted);line-height:1.4} .qz-list{list-style:none;margin:0;padding:0;display:grid;gap:14px} .qz-js .qz-q:not(.cur){display:none} .qz-q fieldset{margin:0;padding:0;border:0;min-width:0} .qz-q legend{padding:0;margin:0 0 10px;font-size:19px;font-weight:600;line-height:1.3;color:var(--fg)} .qz-opts{display:grid;gap:8px} .qz-opt{position:relative;display:block;cursor:pointer} .qz-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .qz-opt span{display:block;padding:12px 16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-elev);color:var(--fg);font-size:16px;transition:background .15s,border-color .15s} .qz-opt:hover span{border-color:var(--accent-border)} .qz-opt input:checked + span{background:var(--accent-soft);border-color:var(--accent);font-weight:600} .qz-opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px} .qz-result{display:flex;flex-direction:column;gap:10px;outline:none} .qz-score{font-size:30px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;text-align:center} .qz-band{align-self:center;padding:4px 14px;border-radius:999px;font-weight:650;font-size:15px;background:var(--accent-soft)} .qz-band.qz-min{color:var(--ok)} .qz-band.qz-mild{color:var(--accent)} .qz-band.qz-mod{color:var(--warn)} .qz-band.qz-high{color:var(--danger)} .qz-scale{position:relative;display:flex;gap:2px;margin:6px 0 4px;font-size:11.5px;color:var(--muted);text-align:center} .qz-seg{display:flex;flex-direction:column;gap:1px;padding-top:10px;border-top:5px solid;line-height:1.2;min-width:0} .qz-seg b{font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums} .qz-seg.qz-min{border-color:var(--ok)} .qz-seg.qz-mild{border-color:var(--accent)} .qz-seg.qz-mod{border-color:var(--warn)} .qz-seg.qz-high{border-color:var(--danger)} .qz-mark{position:absolute;top:-6px;width:3px;height:17px;margin-left:-1px;border-radius:2px;background:var(--fg);box-shadow:0 0 0 2px var(--bg)} .qz-text{margin:0;font-size:15.5px;line-height:1.5;color:var(--fg)} .qz-help{margin:0} .qz-help p{margin:0 0 8px;font-size:15px} .qz-phones{list-style:none;margin:0;padding:0;display:grid;gap:6px} .qz-phones li{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:14px;color:var(--muted)} .qz-phones a{font-weight:700;font-size:16px;color:var(--fg);white-space:nowrap;font-variant-numeric:tabular-nums} .qz-breath{align-self:center} .qz-note{margin:0;font-size:13px;color:var(--muted);text-align:center;line-height:1.45} /* ---------- блок E: Помодоро ---------- */ .pr-timer.mode-pomodoro{--r:clamp(140px, calc(100svh - 610px), min(60vw, 250px))} @supports (font-size:1cqmin){ .pr-timer.mode-pomodoro:not(.pm-breathing) .count{font-size:clamp(24px, 19cqmin, 64px);letter-spacing:-.02em} } .pm-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap} .pm-row:not(:has(button:not([hidden]))){display:none} .pm-breath-now, .pm-skip{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--fg);font:inherit;font-size:14px;cursor:pointer} .pm-breath-now{border-color:var(--accent-border);background:var(--accent-soft)} .pm-skip{color:var(--muted)} .pm-toggles{flex-wrap:wrap} .pm-full-btn{border:0;background:none;cursor:pointer;font:inherit} /* На весь экран: Fullscreen API или (iOS) фиксированный слой поверх страницы. Тёмный фон, крупное время. */ .pr-timer.mode-pomodoro.pm-full{position:fixed;inset:0;z-index:1000;margin:0;max-width:none;border-radius:0;border:0; display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px)); background:#04090f;overflow:auto;--r:min(62vmin, 380px)} .pr-timer.mode-pomodoro:fullscreen{background:#04090f} .pm-full .tw-variants, .pm-full .ctl-custom, .pm-full .tool-hint, .pm-full .pm-toggles, .pm-full .hold-log{display:none} .pm-full .controls{max-width:420px;width:100%;margin:0 auto} @supports (font-size:1cqmin){ .pm-full.mode-pomodoro:not(.pm-breathing) .count{font-size:clamp(36px, 22cqmin, 120px)} } /* ---------- блок D: шум и звуки природы ---------- */ .pr-timer.mode-noise{--r:clamp(120px, calc(100svh - 650px), min(52vw, 220px))} .mode-noise .count{font-variant-numeric:tabular-nums} @supports (font-size:1cqmin){ .pr-timer.mode-noise:not(.nz-breathing) .count{font-size:clamp(22px, 18cqmin, 56px)} } .nz-layers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .nz-layer{display:flex;flex-direction:column;gap:6px;padding:10px 10px 8px;border-radius:var(--radius);border:1px solid var(--border-soft);background:var(--bg-elev);min-width:0} .nz-layer.on{border-color:var(--accent-border);background:var(--accent-soft)} /* общие стили кнопок таймера (.pr-timer button) внутри плиток не нужны */ .pr-timer .nz-layer button{all:unset;box-sizing:border-box;cursor:pointer} .pr-timer .nz-layer button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pr-timer .nz-layer .nz-toggle{display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:left} .pr-timer .nz-layer.on .nz-toggle{color:var(--fg)} .nz-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);font-size:15px;flex:0 0 auto} .nz-layer.on .nz-ic{border-color:var(--accent)} .nz-layer input[type=range]{width:100%;margin:0} .nz-layer:not(.on) input[type=range]{opacity:.45} .nz-drift{display:block;height:2px;border-radius:1px;background:var(--accent);opacity:.45;transform-origin:left;transform:scaleX(0);transition:transform 1s linear} .nz-types{display:flex;flex-wrap:wrap;gap:4px} .pr-timer .nz-layer .nz-type{padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer} .pr-timer .nz-layer .nz-type.active{color:var(--fg);border-color:var(--accent-border);background:var(--accent-soft)} .nz-sleep{justify-content:flex-start;margin:4px 0 0} .nz-toggles{flex-wrap:wrap} .nz-dark{position:fixed;inset:0;z-index:1000;background:#000;color:#1c2636;display:flex;align-items:flex-end;justify-content:center;padding:0 20px calc(40px + env(safe-area-inset-bottom,0px));font-size:14px;cursor:pointer} .nz-dark[hidden]{display:none} @media (min-width:720px){ .nz-layers{grid-template-columns:repeat(3,minmax(0,1fr))} } .qz-wipe{margin-top:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer} /* ---------- футер ---------- */ .site-footer{max-width:1120px;margin:56px auto 0;padding:26px 20px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border-soft)} .sf-hubs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px} .sf-hubs a{color:var(--fg);opacity:.8;text-decoration:none;font-size:15px} .sf-hubs a:hover{opacity:1;color:var(--accent)} .sf-legal{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);opacity:.75} .sf-legal a{color:inherit} body[data-page="programs"] .site-footer{max-width:920px;margin-top:28px;padding-bottom:12px} /* ---------- вкладка «Программы» ---------- */ .pg-goal-text{margin:-4px 0 12px !important;font-size:14.5px} .pg-seo{margin-top:36px} main#page .pg-seo h2{text-transform:none;letter-spacing:0;font-size:22px;color:var(--fg)} main#page .pg-seo p{color:rgba(232,241,255,.8)}