/* =========================================================================
   Claude Code · Настольная книга  —  shared design system
   Tokens + typography + chapter components + book chrome + landing
   ========================================================================= */

:root{
  --bg:    oklch(0.165 0.012 55);
  --bg-2:  oklch(0.205 0.014 52);
  --bg-3:  oklch(0.245 0.016 50);
  --bg-4:  oklch(0.285 0.018 50);
  --line:  oklch(0.345 0.018 52);
  --line-soft: oklch(0.30 0.015 52);
  --ink:   oklch(0.915 0.014 78);
  --ink-soft: oklch(0.745 0.018 72);
  --ink-mute: oklch(0.585 0.020 62);
  --clay:  oklch(0.715 0.150 42);
  --clay-dim: oklch(0.55 0.11 42);
  --amber: oklch(0.815 0.125 82);
  --amber-dim: oklch(0.62 0.10 82);
  --teal:  oklch(0.760 0.095 178);
  --teal-dim: oklch(0.58 0.075 178);

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --grot:  "Bricolage Grotesque", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --col: 39rem;
  --maxw: 1150px;

  --text-xs: 0.74rem;
  --text-sm: 0.86rem;
  --text-base: clamp(1.04rem, 1.0rem + 0.22vw, 1.18rem);
  --text-lg: clamp(1.22rem, 1.08rem + 0.55vw, 1.5rem);
  --text-xl: clamp(1.55rem, 1.25rem + 1.1vw, 2.1rem);
  --text-2xl: clamp(2.0rem, 1.5rem + 1.9vw, 2.9rem);
  --text-3xl: clamp(2.7rem, 1.9rem + 3.4vw, 4.6rem);
  --text-mega: clamp(4.5rem, 2.2rem + 10vw, 11rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:var(--text-base);
  line-height:1.74; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 60% at 78% -8%, oklch(0.24 0.045 45 / 0.55), transparent 60%),
    radial-gradient(90% 50% at 0% 0%, oklch(0.22 0.02 180 / 0.30), transparent 55%);
}
::selection{background:oklch(0.715 0.15 42 / 0.30); color:var(--ink)}

a{color:var(--clay); text-decoration:none; border-bottom:1px solid oklch(0.715 0.15 42 / 0.35); transition:border-color .2s}
a:hover{border-color:var(--clay)}

#progress{position:fixed; inset:0 0 auto 0; height:2px; z-index:60;
  background:linear-gradient(90deg, var(--clay), var(--amber)); width:0%;
  box-shadow:0 0 12px oklch(0.715 0.15 42 / 0.6);}

.page{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.2rem, 4.5vw, 3.4rem);}
.full{max-width:100%; margin:2.4rem 0;}

/* ===================== BOOK CHROME (bk-) ===================== */
.bk-topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1rem;
  padding:.7rem clamp(1.2rem,4.5vw,3.4rem); background:oklch(0.185 0.013 52 / 0.92);
  border-bottom:1px solid var(--line-soft); backdrop-filter:blur(8px);}
.bk-brand{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:.08em; color:var(--ink-soft);
  text-transform:uppercase; border:none; display:flex; align-items:center; gap:.6rem;}
.bk-brand b{color:var(--clay); font-weight:700}
.bk-brand:hover{border:none; color:var(--ink)}
.bk-pos{margin-left:auto; font-family:var(--mono); font-size:var(--text-xs); color:var(--ink-mute); letter-spacing:.04em}
.bk-toc-btn{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--bg-3); border:1px solid var(--line); border-radius:8px;
  padding:.4rem .8rem; cursor:pointer; transition:border-color .2s, background .2s}
.bk-toc-btn:hover{border-color:var(--clay); background:var(--bg-4)}

.bk-overlay{position:fixed; inset:0; z-index:70; background:oklch(0.1 0.01 50 / 0.6);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease)}
.bk-overlay.open{opacity:1; pointer-events:auto}
.bk-drawer{position:fixed; top:0; right:0; height:100%; width:min(420px, 88vw); z-index:71;
  background:var(--bg-2); border-left:1px solid var(--line); transform:translateX(102%);
  transition:transform .4s var(--ease); overflow-y:auto; padding:1.4rem 1.5rem 3rem;}
.bk-drawer.open{transform:none}
.bk-drawer h3{font-family:var(--grot); font-weight:700; font-size:1.2rem; margin:.2rem 0 1.2rem; color:var(--ink)}
.bk-drawer .x{position:absolute; top:1.1rem; right:1.2rem; background:none; border:none; color:var(--ink-mute);
  font-size:1.4rem; cursor:pointer; line-height:1; font-family:var(--mono)}
.bk-drawer .x:hover{color:var(--clay)}
.bk-part{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin:1.5rem 0 .5rem; padding-bottom:.3rem; border-bottom:1px solid var(--line-soft)}
.bk-part:first-of-type{margin-top:0}
.bk-link{display:flex; gap:.7rem; align-items:baseline; padding:.42rem 0; border:none; color:var(--ink-soft);
  font-size:.96rem; line-height:1.3}
.bk-link:hover{border:none; color:var(--ink)}
.bk-link .n{font-family:var(--mono); font-size:.72rem; color:var(--clay); min-width:1.6em}
.bk-link.active{color:var(--clay)}
.bk-link.soon{color:var(--ink-mute)}
.bk-link.soon .n{color:var(--ink-mute)}
.bk-link .badge{font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute); border:1px solid var(--line); border-radius:999px; padding:.05em .5em; margin-left:auto}

.bk-prevnext{max-width:var(--maxw); margin:0 auto; padding:2.5rem clamp(1.2rem,4.5vw,3.4rem) 5rem;
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:stretch}
.bk-pn{border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem; background:var(--bg-2); transition:border-color .2s;
  display:flex; flex-direction:column; justify-content:center; gap:.35rem}
.bk-pn:hover{border-color:var(--clay)}
.bk-pn small{font-family:var(--mono); font-size:var(--text-xs); color:var(--ink-mute); letter-spacing:.08em; text-transform:uppercase}
.bk-pn b{display:block; font-family:var(--grot); font-weight:600; font-size:1.05rem; color:var(--ink); margin-top:0; letter-spacing:-.01em}
.bk-pn.bk-next{text-align:right}
.bk-pn.disabled{opacity:.35; pointer-events:none}
@media(max-width:640px){.bk-prevnext{grid-template-columns:1fr}}

/* ===================== CHAPTER MASTHEAD ===================== */
.masthead{padding:clamp(2.5rem,7vh,5.5rem) 0 clamp(2.2rem,5vh,3.5rem); position:relative; border-bottom:1px solid var(--line-soft);}
.eyebrow{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-mute); display:flex; gap:.9rem; align-items:center; margin-bottom:clamp(1.6rem,4vh,3rem);}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--clay); box-shadow:0 0 10px var(--clay)}
.ch-num{font-family:var(--grot); font-weight:800; font-size:var(--text-mega); line-height:.8;
  color:transparent; -webkit-text-stroke:1.5px var(--line);
  letter-spacing:-.04em; margin:0 0 -.06em -.04em; user-select:none;}
h1.title{font-family:var(--grot); font-weight:800; font-size:var(--text-3xl); line-height:1.0;
  letter-spacing:-.025em; margin:.1em 0 .4em; max-width:16ch;}
h1.title em{font-style:normal; color:var(--clay)}
.dek{font-size:var(--text-lg); color:var(--ink-soft); max-width:42ch; font-weight:400; line-height:1.5;}
.dek b{color:var(--ink); font-weight:600}
.meta-row{margin-top:clamp(1.6rem,4vh,2.6rem); display:flex; flex-wrap:wrap; gap:.65rem 1.5rem;
  font-family:var(--mono); font-size:var(--text-xs); color:var(--ink-mute); letter-spacing:.04em;}
.meta-row span{display:inline-flex; gap:.5rem; align-items:center}
.meta-row b{color:var(--ink-soft); font-weight:500}
.tag{border:1px solid var(--line); border-radius:999px; padding:.18em .7em; color:var(--ink-soft)}

/* ===================== SECTIONS / TYPE ===================== */
.section{padding:clamp(2.6rem,6vh,4.6rem) 0; border-bottom:1px solid var(--line-soft);}
.s-head{margin-bottom:2rem;}
.s-kicker{font-family:var(--mono); font-size:var(--text-sm); letter-spacing:.06em; color:var(--c, var(--clay));
  display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem;}
.s-kicker .sq{width:.62em;height:.62em;border-radius:2px;background:var(--c,var(--clay)); display:inline-block}
h2{font-family:var(--grot); font-weight:700; font-size:var(--text-2xl); line-height:1.04;
  letter-spacing:-.02em; margin:0; max-width:20ch;}
h2 .lat{color:var(--ink-mute); font-weight:500; font-size:.5em; letter-spacing:0; font-family:var(--mono); display:block; margin-top:.5em}
h3{font-family:var(--grot); font-weight:600; font-size:var(--text-lg); letter-spacing:-.01em;
  margin:2.4rem 0 .9rem; color:var(--ink); max-width:30ch;}
p{max-width:var(--col); margin:1.1em 0;}
.lead{font-size:var(--text-lg); line-height:1.55; color:var(--ink); max-width:40ch; font-weight:400;}
.lead.first::first-letter{font-family:var(--grot); font-weight:800; font-size:3.3em; float:left;
  line-height:.72; padding:.04em .12em 0 0; color:var(--clay);}
strong{color:var(--ink); font-weight:600}
em.term{font-style:normal; font-family:var(--mono); font-size:.86em; color:var(--ink);
  background:var(--bg-3); border:1px solid var(--line-soft); padding:.08em .42em; border-radius:5px; white-space:nowrap;}
.muted{color:var(--ink-soft)}
ul.clean{max-width:var(--col); margin:1.2em 0; padding:0; list-style:none;}
ul.clean li{position:relative; padding-left:1.6em; margin:.7em 0;}
ul.clean li::before{content:"→"; position:absolute; left:0; color:var(--clay); font-family:var(--mono); font-size:.85em; top:.18em}

/* ===================== CODE ===================== */
figure.code{margin:2rem 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-2);
  box-shadow:0 18px 40px -28px oklch(0 0 0 / 0.8);}
figure.code .bar{display:flex; align-items:center; gap:.7rem; padding:.6rem 1rem; background:var(--bg-3);
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:var(--text-xs); color:var(--ink-mute);}
figure.code .bar .fname{color:var(--ink-soft)}
figure.code .bar .lang{margin-left:auto; color:var(--c,var(--clay)); letter-spacing:.06em; text-transform:uppercase}
figure.code .dots{display:flex; gap:.34rem}
figure.code .dots i{width:.6rem;height:.6rem;border-radius:50%;background:var(--line); display:block}
pre{margin:0; padding:1.1rem 1.2rem; overflow-x:auto; font-family:var(--mono); font-size:.83rem; line-height:1.65; color:var(--ink-soft);}
pre .k{color:var(--amber)} pre .s{color:var(--teal)} pre .c{color:var(--ink-mute); font-style:italic}
pre .d{color:var(--clay-dim)} pre .hl{color:var(--clay); font-weight:500}
figcaption{font-family:var(--mono); font-size:var(--text-xs); color:var(--ink-mute); margin-top:.7rem; max-width:var(--col)}
.tcode{font-family:var(--mono); font-size:.86em; color:var(--ink); background:var(--bg-3); padding:.05em .35em; border-radius:4px}

/* ===================== TABLES ===================== */
.tbl-wrap{margin:2rem 0; overflow-x:auto; border:1px solid var(--line); border-radius:12px;}
table{border-collapse:collapse; width:100%; font-size:.82rem; min-width:560px;}
caption{caption-side:top; text-align:left; font-family:var(--mono); font-size:var(--text-xs);
  letter-spacing:.05em; color:var(--ink-mute); padding:.9rem 1rem; background:var(--bg-3); border-bottom:1px solid var(--line);}
th,td{text-align:left; padding:.6rem .9rem; border-bottom:1px solid var(--line-soft); vertical-align:top;}
thead th{font-family:var(--mono); font-weight:500; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-mute); background:var(--bg-2);}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:oklch(0.22 0.014 52 / 0.4)}
td.f{font-family:var(--mono); color:var(--amber); white-space:nowrap; font-size:.78rem}
td.req{font-family:var(--mono); font-size:.72rem; color:var(--ink-mute)}
td.req.yes{color:var(--clay)}
table.compact{font-size:.8rem}

/* ===================== CALLOUT / TWO ===================== */
.callout{margin:2.4rem 0; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); padding:1.4rem 1.5rem;}
.callout .lbl{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--c,var(--clay)); display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem;}
.callout .lbl .sq{width:.7em;height:.7em;background:var(--c,var(--clay)); border-radius:2px}
.callout p{margin:.5em 0; max-width:62ch}
.callout strong{color:var(--ink)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:2.4rem 0;}
.two .box{border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.4rem; background:var(--bg-2);}
.two .box h4{font-family:var(--grot); font-weight:600; font-size:1.05rem; margin:.2rem 0 .6rem; color:var(--ink); letter-spacing:-.01em}
.two .box .pat{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--c,var(--clay)); margin-bottom:.5rem; display:block}
.two .box p{font-size:.95rem; margin:.4em 0; max-width:none; color:var(--ink-soft)}
@media(max-width:720px){.two{grid-template-columns:1fr}}

/* ===================== QUOTE ===================== */
.quote{margin:3rem 0; max-width:46rem;}
.quote blockquote{margin:0; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:var(--text-xl); line-height:1.34; color:var(--ink); letter-spacing:-.01em;}
.quote .mk{font-family:var(--grot); font-weight:800; color:var(--clay); font-size:2.6em; line-height:0; vertical-align:-.35em; margin-right:.12em}
.quote .by{margin-top:1.1rem; font-family:var(--mono); font-size:var(--text-sm); color:var(--ink-mute); letter-spacing:.03em; display:flex; gap:.6rem; align-items:center}
.quote .by b{color:var(--ink-soft); font-weight:500}
.quote .by .ln{width:2rem;height:1px;background:var(--line); display:inline-block}

/* ===================== PLATE / DIAGRAM ===================== */
figure.plate{margin:2.6rem 0;}
figure.plate .frame{border:1px solid var(--line); border-radius:12px; padding:.7rem; background:var(--bg-3);
  box-shadow:0 20px 50px -30px oklch(0 0 0 / 0.85);}
figure.plate img{display:block; width:100%; border-radius:7px;}
figure.plate figcaption{margin-top:.85rem;}
figure.plate .pn{color:var(--clay)}
.diagram{margin:2.8rem 0;}
.diagram svg{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:14px; background:var(--bg-2)}

/* ===================== RECAP / FOOTER ===================== */
.recap{margin:1rem 0; border:1px solid var(--clay-dim); border-radius:16px; background:
  linear-gradient(180deg, oklch(0.24 0.04 45 / 0.35), oklch(0.205 0.014 52 / 0.2)); padding:clamp(1.6rem,4vw,2.4rem);}
.recap h2{font-size:var(--text-xl); margin-bottom:1.2rem}
.recap ol{margin:0; padding:0; list-style:none; counter-reset:r; max-width:62ch}
.recap li{counter-increment:r; position:relative; padding:.7rem 0 .7rem 2.6rem; border-top:1px solid var(--line-soft); font-size:1rem; color:var(--ink-soft)}
.recap li:first-child{border-top:none}
.recap li::before{content:counter(r,decimal-leading-zero); position:absolute; left:0; top:.7rem;
  font-family:var(--mono); font-size:.8rem; color:var(--clay); font-weight:700}
.recap li b{color:var(--ink); font-weight:600}
footer.chapter-foot{padding:clamp(2.5rem,6vh,4rem) 0 1rem;}
.next{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem; font-family:var(--grot);
  font-weight:700; font-size:var(--text-xl); letter-spacing:-.01em; margin-bottom:2.5rem; color:var(--ink)}
.next .arw{color:var(--clay)}
.next small{font-family:var(--mono); font-weight:400; font-size:var(--text-xs); color:var(--ink-mute); letter-spacing:.08em; text-transform:uppercase}
.src{font-family:var(--mono); font-size:var(--text-xs); color:var(--ink-mute); line-height:2; max-width:var(--col)}
.src a{color:var(--ink-soft); border-bottom-color:var(--line)}
.src .h{display:block; color:var(--ink-mute); letter-spacing:.14em; text-transform:uppercase; margin:1.4rem 0 .5rem}

/* ===================== LANDING ===================== */
.lp-hero{padding:clamp(3rem,9vh,7rem) 0 clamp(2.5rem,6vh,4.5rem); border-bottom:1px solid var(--line-soft)}
.lp-hero .eyebrow{margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.lp-hero h1{font-family:var(--grot); font-weight:800; font-size:clamp(2.8rem,1.6rem+5vw,6rem); line-height:.98;
  letter-spacing:-.03em; margin:0 0 .35em; max-width:18ch}
.lp-hero h1 em{font-style:normal; color:var(--clay)}
.lp-hero .dek{font-size:var(--text-lg); max-width:54ch; color:var(--ink-soft)}
.lp-hero .dek b{color:var(--ink)}
.lp-cta{margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.9rem}
.lp-btn{font-family:var(--grot); font-weight:600; font-size:1rem; border-radius:10px; padding:.75rem 1.3rem;
  border:1px solid var(--clay); background:var(--clay); color:oklch(0.16 0.02 50); letter-spacing:-.01em}
.lp-btn:hover{border-color:var(--clay); background:transparent; color:var(--clay)}
.lp-btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.lp-btn.ghost:hover{border-color:var(--ink); color:var(--ink)}
.lp-stats{display:flex; flex-wrap:wrap; gap:2.2rem; margin-top:2.8rem; font-family:var(--mono)}
.lp-stat .n{font-family:var(--grot); font-weight:800; font-size:2rem; color:var(--ink); letter-spacing:-.02em; line-height:1}
.lp-stat .l{font-size:var(--text-xs); color:var(--ink-mute); letter-spacing:.06em; text-transform:uppercase; margin-top:.4rem}

.lp-section{padding:clamp(2.6rem,6vh,4.4rem) 0; border-bottom:1px solid var(--line-soft)}
.lp-part{margin:2.6rem 0}
.lp-part:first-of-type{margin-top:1.4rem}
.lp-part-head{display:flex; align-items:baseline; gap:1rem; margin-bottom:1.2rem; padding-bottom:.6rem; border-bottom:1px solid var(--line)}
.lp-part-head .pn{font-family:var(--grot); font-weight:800; font-size:1.4rem; color:var(--clay); letter-spacing:-.02em}
.lp-part-head h3{font-family:var(--grot); font-weight:700; font-size:var(--text-lg); margin:0; color:var(--ink); max-width:none}
.lp-part-head .pd{margin-left:auto; font-family:var(--mono); font-size:var(--text-xs); color:var(--ink-mute)}
.lp-chaps{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:.9rem}
.lp-chap{border:1px solid var(--line); border-radius:13px; padding:1.1rem 1.2rem; background:var(--bg-2);
  transition:border-color .2s, transform .2s var(--ease); display:block}
.lp-chap:hover{border-color:var(--clay); transform:translateY(-2px)}
.lp-chap .ct{display:flex; align-items:baseline; gap:.6rem; margin-bottom:.5rem}
.lp-chap .ct .n{font-family:var(--mono); font-size:.74rem; color:var(--clay)}
.lp-chap .ct b{font-family:var(--grot); font-weight:600; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em; line-height:1.2}
.lp-chap p{font-size:.9rem; line-height:1.5; color:var(--ink-soft); margin:0; max-width:none}
.lp-chap.soon{background:transparent}
.lp-chap.soon .ct b{color:var(--ink-soft)}
.lp-chap .badge{font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); border:1px solid var(--line); border-radius:999px; padding:.1em .55em; margin-left:auto; white-space:nowrap}
.lp-chap.ready .badge{color:var(--teal); border-color:var(--teal-dim)}

/* ===================== REVEAL ===================== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  html{scroll-behavior:auto}
  .bk-drawer,.bk-overlay{transition:none}
}