/* Reedach site. Concept «Правка»: a serious book serif, corrected in red pencil. */
@font-face{font-family:Literata;src:url(fonts/literata.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Literata;src:url(fonts/literata-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:Golos;src:url(fonts/golos.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
 --bg:#f3efe6;--card:#fbf8f2;--ink:#141414;--muted:#6b665d;--line:#ddd5c5;--red:#ff3d1f;--red-text:#c42a10;
 --code-bg:#ebe5d8;--btn:#141414;--btn-ink:#f3efe6;
 --paper:#fffdf8;--accent-ink:#c42a10;--spell:#ff3d1f;--word:rgba(255,184,0,.24);--mistake:#e0321a;--long:rgba(20,20,20,.06);--active:#ffc4b5;--blend:multiply;
 --tip-bg:#141414;--tip-ink:#f3efe6;
 --serif:Literata,"Iowan Old Style",Georgia,serif;--sans:Golos,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --c-str:#7a5200;--c-attr:#b12a12;--c-num:#7a5200;
 color-scheme:light;
}
@media (prefers-color-scheme:dark){
 :root{--bg:#121211;--card:#1b1a18;--ink:#f3efe6;--muted:#a39d92;--line:#34322e;--red:#ff5a3d;--red-text:#ff7a5c;
  --code-bg:#22211e;--btn:#f3efe6;--btn-ink:#141414;--c-str:#e3b867;--c-attr:#ff8a70;--c-num:#e3b867;
  --paper:#1d1c1a;--accent-ink:#ff7a5c;--spell:#ff6a4d;--word:rgba(255,190,40,.26);--mistake:#ff6a4d;--long:rgba(243,239,230,.08);--active:#a8402b;--blend:screen;
  --tip-bg:#f3efe6;--tip-ink:#141414;color-scheme:dark}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--red);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--red-text)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:32px}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.top-logo img{height:58px;width:auto}
.top nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px}
.top nav a{text-decoration:none;color:var(--muted)}
.top nav a:hover{color:var(--ink)}

/* Hero */
.hero{padding-block:56px 40px}
.hero h1{margin:0;font:600 clamp(38px,5.3vw,64px)/1.08 var(--serif);letter-spacing:-.025em}
.hero h1 .line{display:block}
.hero h1 .gone{color:var(--muted);text-decoration:line-through .07em var(--red);text-decoration-skip-ink:none}
.fix{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--red-text)}
.hero-lead{max-width:44ch;margin:28px 0 0;font-size:21px;line-height:1.5;color:var(--muted)}
.hero-lead b{color:var(--ink);font-weight:600}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:32px}
.btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-weight:600;text-decoration:none}
.btn:hover{color:var(--btn-ink);opacity:.88}
.btn-ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost:hover{color:var(--ink);opacity:1;background:var(--card)}
.cmd{font:15px var(--mono);color:var(--muted);padding:0 6px}
.cmd b{color:var(--ink);font-weight:500}

/* Live demo: the widget over a textarea; the widget brings no colors, these are ours. */
.try{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;margin-top:48px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.try-editor{position:relative;min-width:0}
.try-label{display:block;margin-bottom:8px;font-size:14px;color:var(--muted)}
.try textarea{display:block;width:100%;height:400px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);resize:vertical}
.try textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
::highlight(reedach-word){background-color:var(--word)}
::highlight(reedach-long){background-color:var(--long)}
::highlight(reedach-spell){text-decoration:underline wavy var(--spell);text-decoration-thickness:1.5px;text-underline-offset:3px}
::highlight(reedach-mistake){text-decoration:underline solid var(--mistake);text-decoration-thickness:2px;text-underline-offset:3px}
::highlight(reedach-active){background-color:var(--active)}
.reedach-mirror{mix-blend-mode:var(--blend)}
.reedach-panel{max-height:430px;overflow:auto;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:14px;line-height:1.45}
.reedach-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.reedach-title{font:600 18px var(--serif)}
.reedach-count{margin-left:4px;color:var(--muted);font:500 15px var(--sans)}
.reedach-close,.reedach-action{padding:0;border:0;background:none;color:var(--accent-ink);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.reedach-status,.reedach-credit,.reedach-hidden{margin:8px 0 0;color:var(--muted)}
.reedach-error{margin:8px 0;padding:8px 10px;border-radius:6px;background:var(--word);color:var(--ink)}
.reedach-list{margin:0;padding:0;list-style:none}
.reedach-item{padding:10px 0;border-top:1px solid var(--line)}
.reedach-jump{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.reedach-jump:hover .reedach-fragment{text-decoration:underline;text-underline-offset:2px}
.reedach-label{display:inline-block;margin-right:4px;padding:1px 6px;border-radius:4px;background:var(--word);color:var(--ink);font-size:12px;font-weight:600}
.reedach-long .reedach-label{background:var(--long)}
.reedach-spell .reedach-label,.reedach-mistake .reedach-label{background:color-mix(in srgb,var(--mistake) 16%,transparent)}
.reedach-fragment{font-weight:500}
.reedach-message{margin:4px 0 0;color:var(--muted)}
.reedach-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:8px}
.reedach-variant{padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.reedach-note{color:var(--muted);font-size:13px}
.reedach-done{color:var(--muted)}
.reedach-panel .reedach-skip{color:var(--muted);text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.reedach-panel .reedach-skip:hover{color:var(--accent-ink)}
.reedach-tooltip{max-width:320px;padding:8px 10px;border-radius:6px;background:var(--tip-bg);color:var(--tip-ink);font-size:13px;line-height:1.4;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.reedach-tooltip .reedach-label{background:none;padding:0;color:inherit}
.shot{margin:48px 0 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
.shot-cap{margin:12px 2px 0;font-size:14px;color:var(--muted)}

/* Sections */
section{padding-block:88px 8px}
h2{margin:0 0 20px;font:600 clamp(32px,4.4vw,52px)/1.08 var(--serif);letter-spacing:-.02em;max-width:22ch}
h3{margin:40px 0 12px;font:600 26px/1.2 var(--serif);letter-spacing:-.01em}
h4{margin:28px 0 8px;font-size:17px;font-weight:700}
p{margin:0 0 14px;max-width:70ch}
.lead{font-size:19px;color:var(--muted);max-width:60ch}
ul{margin:0 0 14px;padding-left:1.2em;max-width:70ch}
li{margin:4px 0}
li::marker{color:var(--red)}

/* What it finds */
.finds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.find{padding:22px 22px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.find h3{margin:0 0 14px;font:600 13px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.find .ex{margin:0 0 10px;font:500 22px/1.35 var(--serif)}
.find .ex s{color:var(--muted);text-decoration:line-through 2px var(--red);text-decoration-skip-ink:none}
.find p{margin:0;font-size:15px;color:var(--muted)}
.note{margin-top:18px;font-size:15px;color:var(--muted)}

.pair{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:32px;align-items:start}
.pair figure{margin:0}
.pair img{border:1px solid var(--line);border-radius:12px}
.pair figcaption{margin-top:8px;font-size:14px;color:var(--muted)}

/* Ways to connect */
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.way{display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none}
.way:hover{color:inherit;border-color:var(--ink)}
.way b{font:600 24px/1.2 var(--serif)}
.way span{margin-top:8px;color:var(--muted);font-size:15px}
.way code{margin-top:auto;padding:18px 0 0;background:none;font:14px var(--mono);color:var(--ink);overflow-wrap:anywhere}

/* Code and tables */
pre{margin:14px 0 18px;padding:18px 20px;border-radius:12px;background:var(--code-bg);overflow:auto;font:14.5px/1.6 var(--mono);tab-size:2}
pre,code{font-variant-ligatures:none}
code{font-family:var(--mono);font-size:.88em}
:not(pre)>code{padding:.1em .35em;border-radius:5px;background:var(--code-bg)}
/* Syntax highlighting, baked in by tools/highlight.mjs */
.hljs-comment{color:var(--muted);font-style:italic}
.hljs-keyword,.hljs-built_in,.hljs-literal,.hljs-name{font-weight:700}
.hljs-string,.hljs-regexp{color:var(--c-str)}
.hljs-number{color:var(--c-num)}
.hljs-attr,.hljs-attribute,.hljs-property,.hljs-variable{color:var(--c-attr)}
.hljs-punctuation,.hljs-tag{color:var(--muted)}
.hljs-tag .hljs-name{color:var(--ink)}
.hljs-title{font-weight:700}
.steps{margin:18px 0 22px;padding-left:1.4em;max-width:none}
.steps li{margin:0 0 6px;padding-left:4px}
.steps li::marker{font:600 17px var(--serif);color:var(--red-text)}
.steps pre{margin:8px 0 14px}
.table{overflow-x:auto;margin:14px 0 18px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:10px 14px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
td code{white-space:nowrap}

.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 48px}

/* Footer */
footer{margin-top:96px;padding:36px 0 48px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}

@media (max-width:960px){
 .wrap{padding-inline:20px}
 .finds,.ways{grid-template-columns:1fr 1fr}
 .pair,.cols,.try{grid-template-columns:1fr}
 .reedach-panel{max-height:none}
}
@media (max-width:640px){
 body{font-size:16px}
 .wrap{padding-inline:16px}
 .top{flex-direction:column;align-items:flex-start;gap:12px}
 .top-logo img{height:46px}
 .hero{padding-block:28px 24px}
 .hero-lead{font-size:18px}
 .finds,.ways{grid-template-columns:1fr}
 .shot{border-radius:12px;margin-top:32px}
 .try{margin-top:32px;padding:12px;border-radius:14px}
 .try textarea{height:340px;font-size:16px;padding:14px 16px}
 section{padding-block:60px 4px}
 pre{font-size:13px;padding:14px 16px}
}