/* tracklog.studio — the one stylesheet every page shares.
   Tokens, the base type, the header, the footer, buttons, and the browser
   surfaces (selection, caret, scrollbar, focus). Page-specific styles stay in
   the page. Markup of the header and footer: scripts/site-chrome.mjs.
   Tokens are DESIGN.md's; the site is the app's own language on a page. */

@font-face{ font-family:"Montserrat"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/montserrat.woff2") format("woff2") }

:root{
  --bg:#010101; --row:#0a0a09; --surface:#121211; --panel:#191817;
  --text:rgba(255,255,255,.94); --body:rgba(255,255,255,.82); --muted:rgba(255,255,255,.72); --faint:rgba(255,255,255,.55);
  --border:rgba(255,255,255,.10);
  --accent:#f2b700; --accent-hover:#e8b000; --accent-rgb:242,183,0; --ok:#3ecf8e; --ok-rgb:62,207,142; --bad:#ff6b6b;
  --font:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px;
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-expo:cubic-bezier(.16,1,.3,1);
  /* TYPE ROLES (typeset 2026-10-09; site-wide since the same day): one size per job, so text of the same rank matches
     from page to page. display: a page's title · section: a block's heading · closing: a page's last call ·
     lede: the line under the title · read: a block's sentences · small: offer lines under a button, notes ·
     caption: the quietest UI words. A phone redefines them below; a rule only ever names the role. */
  --t-display:clamp(2.875rem,9vw,5.25rem);
  --t-section:clamp(1.625rem,3.2vw,2.375rem);
  --t-closing:clamp(1.875rem,5vw,3.25rem);
  --t-lede:clamp(1.125rem,1.7vw,1.375rem);
  --t-read:clamp(1rem,1.5vw,1.125rem);
  --t-small:.9375rem;
  --t-caption:.8125rem;
}
@media (max-width:680px){ :root{ --t-display:2rem; --t-section:1.4375rem; --t-closing:1.625rem; --t-lede:1rem; --t-read:.9375rem; --t-small:.875rem } }

*{box-sizing:border-box}
/* words for a screen reader only: a table's corner, a price's context */
.vh{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
html{-webkit-text-size-adjust:100%; overflow-x:clip; color-scheme:dark; scrollbar-color:rgba(255,255,255,.22) transparent; scroll-padding-top:88px}
body{margin:0; background:var(--bg); color:var(--body); font-family:var(--font); font-weight:400; line-height:1.7; font-size:1.0625rem;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; caret-color:var(--accent)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(16px,4vw,40px)}
a{color:var(--accent); text-decoration:none; text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration:underline}
b,strong{font-weight:700; color:#fff}
::selection{background:rgba(var(--accent-rgb),.30); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:5px}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:999px; border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
::-webkit-scrollbar-track{background:transparent}
.dot{color:var(--accent)}

/* ---------- the ambient field (site.js) and page layers ---------- */
#grid{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.veil{position:fixed; inset:0; pointer-events:none; z-index:0; background:radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(1,1,1,.55) 100%)}
main, footer.site{position:relative; z-index:1}
/* reveals: visible by default; hidden only once site.js confirms it can show them */
html.io .reveal{opacity:0; transform:translateY(34px); transition:opacity .85s var(--e-out), transform .85s var(--e-out)}
html.io .reveal.in{opacity:1; transform:none}
.tilt{perspective:1400px}
.tilt .frame{transition:transform .5s var(--e-out)}
/* a list arrives as a list: the children of a .stagger rise one after another (site.js observes it) */
html.io .stagger > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--e-out), transform .7s var(--e-out)}
html.io .stagger.in > *{opacity:1; transform:none}
.stagger.in > :nth-child(2){transition-delay:80ms} .stagger.in > :nth-child(3){transition-delay:160ms} .stagger.in > :nth-child(4){transition-delay:240ms}
.stagger.in > :nth-child(5){transition-delay:320ms} .stagger.in > :nth-child(6){transition-delay:400ms} .stagger.in > :nth-child(7){transition-delay:480ms}
.stagger.in > :nth-child(8){transition-delay:560ms} .stagger.in > :nth-child(9){transition-delay:640ms} .stagger.in > :nth-child(10){transition-delay:720ms}
.stagger.in > :nth-child(n+11){transition-delay:800ms}
/* a status being set: the dot lands and its ring fades, the app's own gesture */
@keyframes setDot{0%{transform:scale(0); box-shadow:0 0 0 0 rgba(62,207,142,.55)} 55%{transform:scale(1.18); box-shadow:0 0 0 9px rgba(62,207,142,0)} 100%{transform:scale(1); box-shadow:0 0 0 0 rgba(62,207,142,0)}}
@keyframes setDotAmber{0%{transform:scale(0); box-shadow:0 0 0 0 rgba(242,183,0,.55)} 55%{transform:scale(1.18); box-shadow:0 0 0 9px rgba(242,183,0,0)} 100%{transform:scale(1); box-shadow:0 0 0 0 rgba(242,183,0,0)}}
@keyframes rise{from{opacity:0; transform:translateY(22px) scale(.985)} to{opacity:1; transform:none}}
/* light passes over the one amber action: once when it is the thing to press, and on hover */
@keyframes sheen{0%{left:-50%; opacity:0} 12%{opacity:1} 100%{left:125%; opacity:0}}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:10; background:rgba(1,1,1,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07)}
.top .wrap{display:flex; align-items:center; gap:20px; height:64px}
.wordmark{font-weight:800; font-size:1.1875rem; letter-spacing:-.03em; color:#fff; white-space:nowrap; line-height:1}
.wordmark:hover{text-decoration:none}
.wordmark .dot{color:var(--accent)}
.nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.nav a{color:var(--muted); font-size:.9375rem; font-weight:600; line-height:1.2; padding:13px 14px; border-radius:999px; white-space:nowrap;
  transition:color .15s, background .15s, box-shadow .15s}
.nav a:hover{color:#fff; background:rgba(255,255,255,.05); text-decoration:none}
.nav a[aria-current="page"]{color:#fff}
/* the one link that is an action: the build itself */
.nav a.dl{margin-left:8px; color:var(--text); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.nav a.dl:hover{background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.nav a.dl[aria-current="page"]{color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
@media (max-width:560px){
  .top .wrap{gap:12px}
  .nav a{padding:13px 10px; font-size:.875rem}
  .nav a.dl{margin-left:4px}
}
/* A phone keeps one row: Pricing and Download, as the home page decided
   (2026-10-09). Tutorials and Guides stay in the footer: five links did not fit
   and pushed Download off the screen. The browser demo needs a computer, so a
   phone's footer leaves it out too (2026-10-12). */
@media (max-width:680px){
  .nav a[href="/tutorials/"], .nav a[href="/guides/"], .nav a[href="/try/"]{display:none}
}
/* the narrowest phones: the two links tighten into the row. */
@media (max-width:420px){
  .top .wrap{gap:8px; padding:0 14px}
  .nav{gap:0}
  .nav a{padding:12px 8px; font-size:.8125rem}
  .nav a.dl{margin-left:2px}
}

/* ---------- buttons (pills, DESIGN.md) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-size:.9375rem; font-weight:700; line-height:1.2;
  letter-spacing:-.01em; border-radius:999px; padding:14px 26px; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s, transform .12s var(--e-out)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#000; position:relative; overflow:hidden; isolation:isolate}
.btn-primary:hover{background:var(--accent-hover); transform:translateY(-1px)}
.btn-primary::after{content:""; position:absolute; top:-40%; bottom:-40%; left:-50%; width:34%; opacity:0; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-18deg)}
@media (prefers-reduced-motion:no-preference){
  .btn-primary:hover::after{animation:sheen .7s var(--e-out)}
  .btn-primary.shine::after{animation:sheen .9s var(--e-out) 1.4s}
}
.btn-ghost{background:transparent; color:var(--text); border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.36)}

/* ---------- fields (DESIGN.md → Site: buttons and fields) ----------
   A pill on the surface tone with a quiet 1px edge. In focus the edge turns amber and doubles to a crisp
   2px line: no glow, no blur, no growing. An error is the same line in red. */
.field{display:block; width:100%; font-family:inherit; font-size:1rem; line-height:1.2; color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:15px 22px; outline:none; box-shadow:none;
  transition:border-color .15s, box-shadow .15s}
.field::placeholder{color:var(--faint)}
.field:hover{border-color:rgba(255,255,255,.2)}
.field:focus, .field:focus-visible{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none}
.field[aria-invalid="true"]{border-color:var(--bad); box-shadow:0 0 0 1px var(--bad)}
textarea.field{border-radius:12px; resize:vertical; line-height:1.5}

/* ---------- reading pages (terms, privacy, refund, what's new) ---------- */
article.doc{max-width:720px; padding:clamp(48px,8vh,80px) 0 0}
article.doc h1{font-weight:800; font-size:clamp(2.25rem,5vw,3rem); line-height:1.05; letter-spacing:-.03em; margin:0; color:#fff; text-wrap:balance}
article.doc .updated{margin:12px 0 0; color:var(--faint); font-size:.9375rem}
article.doc .summary{margin:28px 0 0; padding:18px 22px; border-radius:10px; border:1px solid rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.07); color:var(--text)}
article.doc .summary p{margin:0}
article.doc .summary ul{margin:8px 0 0; padding-left:1.3em}
article.doc .summary li{margin:4px 0 0}
article.doc h2{font-weight:700; font-size:1.3125rem; line-height:1.3; letter-spacing:-.015em; color:#fff; margin:48px 0 0; scroll-margin-top:88px}
article.doc p{margin:12px 0 0}
article.doc ul, article.doc ol{margin:12px 0 0; padding-left:1.4em}
article.doc li{margin:6px 0 0; padding-left:4px}
article.doc li::marker{color:var(--faint)}
article.doc table{width:100%; border-collapse:collapse; margin:16px 0 0; font-size:.9375rem; font-variant-numeric:tabular-nums}
article.doc th, article.doc td{text-align:left; padding:10px 14px 10px 0; border-top:1px solid var(--border); vertical-align:top}
article.doc thead th{border-top:0; font-size:.8125rem; font-weight:600; color:var(--faint)}
article.doc td:first-child{color:#fff}
@media (max-width:560px){ article.doc th, article.doc td{padding-right:8px} }

/* the three legal pages are one set: a row of pills above the title moves between them */
.legal-nav{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 26px}
.legal-nav a{font-size:.875rem; font-weight:600; line-height:1.3; color:var(--muted); padding:12px 16px; border-radius:999px; border:1px solid var(--border); transition:color .15s, border-color .15s}
.legal-nav a:hover{color:#fff; border-color:rgba(255,255,255,.3); text-decoration:none}
.legal-nav a[aria-current="page"]{color:#fff; border-color:rgba(255,255,255,.45)}

/* contents of a long page: a quiet list, not a second title */
.onpage{margin:32px 0 0; padding:0 0 0 18px; border-left:1px solid var(--border); font-size:.9375rem}
.onpage summary{list-style:none; cursor:pointer; margin:0 0 6px; font-weight:700; color:#fff; font-size:.8125rem; padding:6px 0}
.onpage summary::-webkit-details-marker{display:none}
.onpage summary::after{content:" \2193"; color:var(--faint)}
.onpage[open] summary::after{content:" \2191"}
.onpage ol{list-style:none; margin:0; padding:0; columns:2; column-gap:32px}
.onpage li{margin:0; padding:0; break-inside:avoid}
.onpage a{display:inline-block; padding:5px 0; color:var(--muted)}
article.doc h2 .n{color:var(--faint); font-weight:600; margin-right:.25em}
.onpage a:hover{color:#fff}
@media (max-width:560px){ .onpage ol{columns:1} }

/* ---------- footer (PRODUCT.md → Бизнес → «Подвал сайта», 2026-10-12) ---------- */
/* Type: one size for the footer's words (--t-small), the caption step only for metadata (version, address, social, ©).
   Weight carries the rank: 800 the wordmark, 700 headings and the button, 400 the rest. One line height for every page. */
footer.site{margin-top:clamp(96px,14vh,170px); border-top:1px solid var(--border); padding:clamp(44px,6vh,64px) 0 36px; font-size:var(--t-small); line-height:1.5}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2.7fr); gap:40px 48px; align-items:start}
.foot-brand .lockup{display:inline-flex; align-items:center; gap:12px; color:#fff; padding:4px 0}
.foot-brand .lockup:hover{text-decoration:none}
.foot-brand .mark{flex:none; border-radius:9px}
.foot-brand > p{margin:16px 0 0; max-width:34ch; color:var(--muted); line-height:1.6; text-wrap:pretty}
.foot-get{margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.07); max-width:36ch}
.foot-get p{margin:0; max-width:32ch; color:var(--text); line-height:1.6; text-wrap:balance}
.foot-doors{display:flex; align-items:center; flex-wrap:wrap; gap:6px 22px; margin-top:16px}
.foot-doors .btn{padding:12px 24px}
.foot-doors .more{display:inline-flex; align-items:center; color:var(--muted); padding:11px 0}
.foot-doors .more:hover{color:#fff; text-decoration:none}

.foot-links{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 28px}   /* Guides joined 2026-10-26 */
.foot-col .foot-h{margin:6px 0 6px; font-size:var(--t-small); font-weight:700; color:var(--text)}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin:0}
.foot-col a{display:inline-block; padding:6px 0; color:var(--muted); line-height:1.45; transition:color .15s}
.foot-col a:hover{color:#fff; text-decoration:none}
.foot-col a[aria-current="page"]{color:#fff; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:.35em; text-decoration-thickness:1.5px}
.foot-col .ver{margin-left:6px; font-size:var(--t-caption); color:var(--faint)}
.foot-col a.mail{display:inline-flex; flex-direction:column}
.foot-col a.mail .addr{color:var(--faint); font-size:var(--t-caption); margin-top:1px; overflow-wrap:anywhere; transition:color .15s}
.foot-col a.mail:hover .addr{color:var(--muted)}

.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:14px 32px; flex-wrap:wrap; margin-top:clamp(40px,6vh,56px); padding-top:22px; border-top:1px solid rgba(255,255,255,.07)}
.foot-bottom .promise{margin:0; color:var(--muted); font-size:var(--t-small); text-wrap:balance}
.foot-meta{display:flex; align-items:center; gap:4px 22px; flex-wrap:wrap; color:var(--faint); font-size:var(--t-caption)}
.foot-meta .social{display:inline-flex; align-items:center; gap:7px; color:var(--muted); padding:6px 0; transition:color .15s}
.foot-meta .social:hover{color:#fff; text-decoration:none}
.foot-meta svg{flex:none; width:20px; height:20px}
.foot-meta .copy a{color:inherit; transition:color .15s}   /* the name leads to /about/, quiet like the line it sits in */
.foot-meta .copy a:hover{color:#fff; text-decoration:none}

/* a finger gets 44px rows; a mouse gets the tighter list */
@media (pointer:coarse){
  .foot-col a{padding:12px 0}   /* 14px type on a phone: 12px each side keeps 44px */
  .foot-col a.mail{padding:7px 0}
  .foot-meta .social, .foot-doors .more{min-height:44px; padding:0}
}
@media (max-width:900px){
  .foot-grid{grid-template-columns:minmax(0,1fr); gap:40px}
}
/* a tablet: the sale lines sit beside the description, not under it */
@media (min-width:681px) and (max-width:900px){
  .foot-brand{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; align-items:start}
  .foot-brand .lockup{grid-column:1 / -1; justify-self:start}
  .foot-get{margin-top:16px; padding-top:0; border-top:0}
}
/* a phone: two columns, the same on every page; the demo stays off, as in the header */
@media (max-width:680px){
  .foot-links{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"product guides" "support legal"; gap:28px 20px}
  .fc-product{grid-area:product} .fc-guides{grid-area:guides} .fc-support{grid-area:support} .fc-legal{grid-area:legal}
  .foot-col .on-wide{display:none}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:10px}
  .foot-get{max-width:none}
}

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important; scroll-behavior:auto!important} }