/* Стили страницы ревью. Правится напрямую, пересобирать index.html не нужно — файл подключается ссылкой и отдаётся сервером без кеширования. */ /* Светлая палитра — база. Тёмная включается атрибутом data-theme="dark" на , который проставляет скрипт в : в режиме «авто» он читает системную настройку, в ручном — сохранённый выбор. Медиазапроса здесь намеренно нет, иначе палитру пришлось бы держать в двух местах и они бы разъезжались. */ :root{ --bg:#fbfaf8; --panel:#ffffff; --text:#1b1a18; --muted:#6f6b64; --faint:#928d84; --rule:#e4e1db; --rule-soft:#eeebe5; --like:#16914b; --rewrite:#c06510; --dislike:#cf3a34; --question:#2563c9; --like-hi:#1fb862; --rewrite-hi:#f08a1c; --dislike-hi:#f0554d; --question-hi:#4b8bf5; --like-bg:#e6f5ec; --rewrite-bg:#fbf0dd; --dislike-bg:#fceceb; --question-bg:#e7effc; --on-fill:#ffffff; --accent:#1b1a18; color-scheme:light; /* Единственная ручка кегля. Всё, что должно расти вместе с текстом, задано в rem; ширина колонки — тоже, поэтому длина строки в знаках не меняется при увеличении. */ --fs:1; } :root[data-theme="dark"]{ --bg:#141417; --panel:#1b1b1f; --text:#e9e7e2; --muted:#9b968e; --faint:#7d786f; --rule:#2c2c32; --rule-soft:#232328; --like:#2fbd6e; --rewrite:#dc9114; --dislike:#ec5a52; --question:#4b8ef7; --like-hi:#43d982; --rewrite-hi:#f0a72c; --dislike-hi:#ff736a; --question-hi:#6ba6ff; --like-bg:#17301f; --rewrite-bg:#2e2513; --dislike-bg:#331d1c; --question-bg:#17233a; --on-fill:#0f0f13; --accent:#e9e7e2; color-scheme:dark; } html{font-size:calc(16px * var(--fs))} *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg); color:var(--text); font:400 1.1875rem/1.62 Georgia,"Iowan Old Style",Charter,"Noto Serif",serif; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; overflow-wrap:break-word} body.locked{overflow:hidden} .top{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--rule)} .top-in{max-width:62.5rem; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:12px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; font-size:0.844rem} .progress{font-weight:600; white-space:nowrap} .progress span{color:var(--faint); font-weight:400} .saved{color:var(--faint); white-space:nowrap; transition:color .2s} .saved.ok{color:var(--like)} .saved.off{color:var(--dislike)} .spacer{flex:1} .top button{font:inherit; color:var(--muted); background:transparent; border:1px solid var(--rule); border-radius:7px; padding:5px 10px; cursor:pointer; white-space:nowrap} .top button:hover{color:var(--text); border-color:var(--faint)} .top .narrow{display:none} .top button.primary{background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600} .filters{display:flex; gap:5px} .filters button.on{background:var(--rule-soft); color:var(--text); border-color:var(--faint)} #tocBtn{display:none} .menu-wrap{position:relative} .menu{position:absolute; right:0; top:34px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:5px; min-width:210px; box-shadow:0 12px 34px rgba(0,0,0,.14); display:none} .menu.open{display:block} .menu button{display:block; width:100%; text-align:left; border:0; border-radius:6px; padding:8px 10px} .menu button:hover{background:var(--rule-soft)} .menu .sep{height:1px; background:var(--rule); margin:5px 3px} .menu .note{padding:7px 10px 4px; color:var(--faint); font-size:0.719rem; line-height:1.4} .seg{display:flex; gap:4px; padding:2px 8px 8px} .seg button{flex:1; text-align:center; border:1px solid var(--rule); border-radius:6px; padding:5px 4px; color:var(--muted); font-size:0.75rem; line-height:1.2} .seg button:hover{border-color:var(--faint); color:var(--text); background:transparent} .seg button.on{background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600} .seg button.val{flex:1.3; font-variant-numeric:tabular-nums; cursor:pointer} .menu code{font:600 0.781rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; color:var(--text)} .wrap{max-width:62.5rem; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:12.4rem minmax(0,1fr); gap:3.25rem} .toc{position:sticky; top:60px; align-self:start; padding:26px 0 40px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; font-size:0.813rem; max-height:calc(100dvh - 70px); overflow:auto} .toc a{display:flex; flex-direction:column; align-items:flex-start; gap:4px; color:var(--muted); text-decoration:none; padding:5px 0; line-height:1.3} .toc a:hover,.toc a.cur{color:var(--text)} .toc .dots{display:flex; gap:2px; flex:none; flex-wrap:wrap; max-width:100%; order:2} .toc .dot{width:5px; height:5px; border-radius:50%; background:var(--rule)} .toc .dot.like{background:var(--like-hi)} .toc .dot.rewrite{background:var(--rewrite-hi)} .toc .dot.dislike{background:var(--dislike-hi)} .toc .dot.question{background:var(--question-hi)} main{padding:26px 0 140px; min-width:0} h1{font-size:1.938rem; line-height:1.22; margin:0 0 8px; letter-spacing:-.015em} h2{font-size:1.469rem; margin:52px 0 16px; letter-spacing:-.01em; scroll-margin-top:74px} h3{font-size:1.219rem; margin:32px 0 12px; scroll-margin-top:74px} p{margin:0 0 16px} ul,ol{margin:0 0 17px; padding-left:24px} li{margin:0 0 9px} .small{font-size:1.031rem; color:var(--muted); line-height:1.58} .num{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-weight:700; font-size:1.063rem} .tag{display:inline-flex; align-items:center; gap:6px; vertical-align:1px; font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-size:0.719rem; letter-spacing:.04em; border:1px solid var(--rule); border-radius:5px; padding:2px 8px 2px 6px; white-space:nowrap; cursor:default} .tag .meter{display:inline-flex; align-items:flex-end; gap:1.5px; flex:none} .tag .meter b{width:3px; border-radius:1px; background:currentColor; opacity:.2} .tag .meter b:nth-child(1){height:5px} .tag .meter b:nth-child(2){height:8px} .tag .meter b:nth-child(3){height:11px} .tag.lvl3 .meter b{opacity:1} .tag.lvl2 .meter b:nth-child(-n+2){opacity:1} .tag.lvl1 .meter b:nth-child(1){opacity:1} .tag.lvl3{color:var(--text); font-weight:600; border-color:var(--faint); background:var(--rule-soft)} .tag.lvl2{color:var(--muted); font-weight:500; border-color:var(--rule)} .tag.lvl1{color:var(--faint); border-style:dashed; font-style:italic} a{color:inherit; overflow-wrap:anywhere} a[target]{text-decoration-color:var(--faint)} .demo-ctl{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-size:0.813rem; color:var(--faint); border:1px dashed var(--rule); border-radius:7px; padding:8px 11px; margin:0 0 18px} .item{border-left:4px solid transparent; padding-left:17px; margin:0 0 6px; border-radius:0 6px 6px 0; transition:border-color .15s} .item[data-v="like"]{border-color:var(--like-hi)} .item[data-v="rewrite"]{border-color:var(--rewrite-hi)} .item[data-v="dislike"]{border-color:var(--dislike-hi)} .item[data-v="question"]{border-color:var(--question-hi)} .item.hide{display:none} .ctl{display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:7px 0 26px} .verdicts{display:flex; gap:5px; flex:none; align-self:flex-start} .verdicts button{display:inline-flex; align-items:center; gap:6px; font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-size:0.844rem; font-weight:500; color:var(--faint); background:transparent; border:1px solid var(--rule-soft); border-radius:7px; padding:6px 13px 6px 10px; cursor:pointer; transition:.13s ease} .verdicts button svg{width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round} .verdicts button:hover{color:var(--text); border-color:var(--faint)} .verdicts button[data-v="like"]:hover{color:var(--like); background:var(--like-bg); border-color:var(--like)} .verdicts button[data-v="rewrite"]:hover{color:var(--rewrite); background:var(--rewrite-bg); border-color:var(--rewrite)} .verdicts button[data-v="dislike"]:hover{color:var(--dislike); background:var(--dislike-bg); border-color:var(--dislike)} .verdicts button[data-v="question"]:hover{color:var(--question); background:var(--question-bg); border-color:var(--question)} .verdicts button.on{color:var(--on-fill); font-weight:600; border-color:transparent} .verdicts button.on svg{stroke-width:2.1} .verdicts button.on[data-v="like"]{background:var(--like); box-shadow:0 1px 7px -2px var(--like)} .verdicts button.on[data-v="rewrite"]{background:var(--rewrite); box-shadow:0 1px 7px -2px var(--rewrite)} .verdicts button.on[data-v="dislike"]{background:var(--dislike); box-shadow:0 1px 7px -2px var(--dislike)} .verdicts button.on[data-v="question"]{background:var(--question); box-shadow:0 1px 7px -2px var(--question)} .verdicts button.on:hover{filter:brightness(1.06)} .ctl textarea{width:100%; resize:none; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-size:max(16px, 1.063rem); line-height:1.5; color:var(--text); background:transparent; border:1px solid var(--rule-soft); border-radius:8px; padding:10px 12px; min-height:62px} .ctl textarea::placeholder{color:var(--faint); font-size:0.906rem} .ctl textarea:hover{border-color:var(--rule-soft)} .ctl textarea:focus{outline:none; border-color:var(--faint); background:var(--panel)} .ctl textarea.has{border-color:var(--rule); background:var(--panel)} .ctl-free textarea, .ctl-q textarea{min-height:140px; border-color:var(--rule); background:var(--panel); padding:13px 15px; line-height:1.55} .gate{position:fixed; inset:0; z-index:100; background:var(--bg); display:none; place-items:center; padding:24px} .gate.show{display:grid} .gate-card{width:100%; max-width:330px; text-align:center} .gate h2{margin:0 0 6px; font-size:1.313rem} .gate p{color:var(--muted); font-size:0.875rem; margin:0 0 22px} .gate input{width:100%; font:600 1.5rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; text-align:center; padding:15px 12px; border:1px solid var(--rule); border-radius:11px; background:var(--panel); color:var(--text)} .gate input:focus{outline:none; border-color:var(--faint)} .gate button{width:100%; margin-top:12px; font:600 0.938rem/1 -apple-system,system-ui,sans-serif; padding:14px; border:0; border-radius:11px; background:var(--accent); color:var(--bg); cursor:pointer} .gate button[disabled]{opacity:.45; cursor:default} .gate .err{margin-top:14px; font-size:0.813rem; color:var(--dislike); min-height:18px} .gate .hint{margin-top:10px; font-size:0.781rem; color:var(--faint)} .toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); opacity:0; pointer-events:none; background:var(--accent); color:var(--bg); font:500 0.844rem -apple-system,system-ui,sans-serif; padding:11px 18px; border-radius:9px; z-index:120; transition:.22s; max-width:88vw; text-align:center} .toast.show{opacity:1; transform:translate(-50%,0)} @media (max-width:900px){ body{font-size:1.125rem; line-height:1.6} .wrap{grid-template-columns:1fr; gap:0; padding:0 18px} .toc{display:none; position:static; max-height:none; padding:14px 0 8px; border-bottom:1px solid var(--rule)} .toc.open{display:block} #tocBtn{display:inline-block} .top-in{padding:8px 14px; gap:8px} .filters{display:none} .top .wide{display:none} .top .narrow{display:inline} .top button{padding:5px 9px} main{padding:20px 0 100px} h1{font-size:1.625rem} h2{font-size:1.344rem; margin:40px 0 14px} h3{font-size:1.156rem} .small{font-size:1rem} .item{padding-left:13px} .tag{white-space:normal; align-items:flex-start} .tag .meter{margin-top:3px} .verdicts{width:100%} .verdicts button{flex:1; justify-content:center; padding:9px 3px; font-size:0.813rem; gap:5px} .verdicts button svg{width:14px; height:14px} } @media print{ .top,.toc,.gate,.toast,.demo-ctl{display:none!important} .wrap{display:block; max-width:none; padding:0} .verdicts{display:none} .item{break-inside:avoid} .ctl textarea{border:0!important; background:transparent!important; padding-left:0; min-height:0} .ctl::before{font:700 9.5pt -apple-system,system-ui,sans-serif; letter-spacing:.04em; margin-right:9px; color:#000} .item[data-v="like"] .ctl::before{content:"ЛАЙК"} .item[data-v="rewrite"] .ctl::before{content:"ПЕРЕПИСАТЬ"} .item[data-v="dislike"] .ctl::before{content:"ДИЗЛАЙК"} .item[data-v="question"] .ctl::before{content:"ВОПРОС"} body{font-size:11.5pt; line-height:1.45; background:#fff; color:#000} }