:root{
--sea:#46707C; --sea-deep:#345258; --ink:#2B3E43; --ink-soft:#5C7178;
--page:#FBF8F1; --page-edge:#F0EADA; --cream:#F0E8D5;
--gold:#B8965A; --line:#E3DCC9;
}
html{scroll-behavior:smooth}
body{
margin:0; color:var(--ink);
font-family:Georgia,'Times New Roman',serif;
font-size:19px; line-height:1.8;
background-color:var(--sea);
background-image:
radial-gradient(ellipse 55% 38% at 15% 10%, rgba(240,233,214,.30), transparent 70%),
radial-gradient(ellipse 48% 32% at 85% 25%, rgba(255,255,255,.20), transparent 70%),
radial-gradient(ellipse 65% 42% at 50% 85%, rgba(228,236,232,.15), transparent 70%),
radial-gradient(ellipse 45% 30% at 5% 60%, rgba(43,69,75,.5), transparent 72%),
linear-gradient(165deg,#54808C 0%, #46707C 45%, #3B6069 100%);
background-attachment:fixed;
}
/* ── Кнопка меню и выдвижная панель ── */
.menu-btn{
position:fixed; top:18px; left:18px; z-index:60;
width:48px; height:48px; border-radius:50%; border:1px solid rgba(240,232,213,.5);
background:rgba(52,82,88,.88); color:var(--cream); cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 20px rgba(20,40,45,.35);
}
.menu-btn:hover{background:var(--sea-deep)}
.menu-btn svg{display:block}
.drawer{
position:fixed; top:0; left:0; bottom:0; z-index:70;
width:330px; max-width:88vw; box-sizing:border-box;
background:linear-gradient(170deg,#3A5B64,#2E484F);
color:var(--cream); padding:28px 26px 40px; overflow-y:auto;
transform:translateX(-102%); transition:transform .3s ease;
box-shadow:24px 0 60px rgba(20,40,45,.4);
}
.drawer.open{transform:translateX(0)}
.drawer .close{
position:absolute; top:16px; right:16px; width:36px; height:36px;
border:none; border-radius:50%; background:rgba(240,232,213,.12);
color:var(--cream); font-size:20px; line-height:1; cursor:pointer;
}
.drawer .brand{font-size:17px; letter-spacing:.2em; text-transform:uppercase; margin:6px 0 2px}
.drawer .sub{font-family:-apple-system,'Segoe UI',sans-serif; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(240,232,213,.6); padding-bottom:18px; border-bottom:1px solid rgba(240,232,213,.25); margin-bottom:10px}
.nav-group{display:block; font-family:-apple-system,'Segoe UI',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:20px 0 4px; text-decoration:none}
a.nav-group:hover{color:#E8CF9E}
.nav-item{
display:block; font-family:-apple-system,'Segoe UI',sans-serif; font-size:15px; line-height:1.45;
color:rgba(240,232,213,.92); text-decoration:none; padding:7px 0 7px 14px;
border-left:2px solid rgba(240,232,213,.2);
}
.nav-item:hover{color:#fff; border-left-color:var(--gold)}
.nav-item.soon{color:rgba(240,232,213,.45); cursor:default; font-style:italic}
.overlay{position:fixed; inset:0; z-index:65; background:rgba(20,35,40,.45); opacity:0; pointer-events:none; transition:opacity .3s}
.overlay.show{opacity:1; pointer-events:auto}
/* ── Небесная шапка книги ── */
.sky-head{color:var(--cream); text-align:center; padding:64px 24px 44px}
.sky-head .over{font-family:-apple-system,'Segoe UI',sans-serif; font-size:12px; letter-spacing:.35em; text-transform:lowercase; color:rgba(240,232,213,.75)}
.sky-head .brand{font-size:34px; letter-spacing:.24em; text-transform:uppercase; margin-top:6px}
.sky-head .crumbs{font-family:-apple-system,'Segoe UI',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(240,232,213,.7); margin-top:24px}
/* ── Колонка листов ── */
.sheets{max-width:780px; margin:0 auto 72px; padding:0 12px; display:flex; flex-direction:column; gap:34px}
.sheet{
background:var(--page); border-radius:14px;
box-shadow:0 22px 60px rgba(20,40,45,.32), 0 3px 12px rgba(20,40,45,.18);
padding:52px 76px 56px; position:relative;
}
.sheet .tab{
position:absolute; top:-14px; left:50%; transform:translateX(-50%);
background:var(--sea-deep); color:var(--cream); white-space:nowrap;
font-family:-apple-system,'Segoe UI',sans-serif; font-size:11px; font-weight:600;
letter-spacing:.26em; text-transform:uppercase;
border-radius:999px; padding:7px 22px; border:1px solid rgba(240,232,213,.35);
}
.sheet .tab b{color:var(--gold); font-weight:700; margin-right:10px}
/* Титульные листы глав */
.chapter-head{text-align:center; scroll-margin-top:30px;
background:linear-gradient(180deg, #FBF8F1 0%, #F4EEDF 100%);
border:1px solid rgba(200,169,107,.45);
}
.chapter-head .kicker{font-family:-apple-system,'Segoe UI',sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:600}
.chapter-head h1{font-weight:400; font-size:37px; line-height:1.25; margin:16px 0 0; color:var(--sea-deep)}
.chapter-head .orn{color:var(--gold); font-size:18px; letter-spacing:.6em; margin-top:22px}
.chapter-head .lede{font-style:italic; color:var(--ink-soft); max-width:480px; margin:18px auto 0; font-size:18px}
.chapter-head .intro{text-align:left; margin-top:38px; padding-top:34px; border-top:1px solid var(--line)}
.kicker-line{font-family:-apple-system,'Segoe UI',sans-serif; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:700; text-align:center; margin-bottom:10px}
p{margin:0 0 24px}
p:last-child{margin-bottom:0}
/* Правка Андрея 07.09: абзац оформляется отступом первой строки, а не пробелом */
.sheet > p, .story > p{margin:0; text-indent:1.6em}
.sheet > h1 + p, .sheet > h2 + p, .sheet > h3 + p,
.sheet > p.drop, .sheet > .kicker-line + p,
.story > .who + p, .story > p:first-child{text-indent:0}
.sheet > p:last-child, .story > p:last-child{margin-bottom:0}
.drop::first-letter{
font-size:74px; float:left; line-height:.82; padding:8px 14px 0 0; color:var(--sea); font-weight:400;
}
/* Правка Андрея 07.09: выделения без фонового маркера — цветом */
em{font-style:normal; color:var(--sea); font-weight:500; box-shadow:none}
.sheet{scroll-margin-top:30px}
h2{
font-weight:400; font-size:27px; color:var(--sea-deep); line-height:1.35;
margin:6px 0 6px; text-align:center;
}
.h-orn{text-align:center; color:var(--gold); letter-spacing:.5em; font-size:14px; margin-bottom:28px}
h3{font-weight:400; font-size:21.5px; color:var(--sea-deep); margin:34px 0 14px}
.sheet ul, .sheet ol{margin:0 0 24px; padding-left:26px}
.sheet li{margin-bottom:10px}
/* Определение */
.define{
margin:34px 0; padding:30px 36px; text-align:center;
border-top:2px solid var(--gold); border-bottom:2px solid var(--gold);
background:linear-gradient(180deg, rgba(200,169,107,.07), transparent 60%);
}
.define .label{font-family:-apple-system,'Segoe UI',sans-serif; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:12px}
.define p{font-size:21.5px; font-style:italic; line-height:1.65; margin:0; color:var(--sea-deep)}
/* Лесенка */
.ladder{display:flex; flex-direction:column; gap:0; margin:30px 0; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.step{padding:22px 28px; display:grid; grid-template-columns:130px 1fr; gap:18px; align-items:baseline}
.step + .step{border-top:1px solid var(--line)}
.step:nth-child(2){background:var(--page-edge)}
.step:nth-child(3){background:var(--sea-deep); color:var(--cream)}
.step b{font-weight:400; font-size:20px; letter-spacing:.02em}
.step span{font-family:-apple-system,'Segoe UI',sans-serif; font-size:15.5px; line-height:1.65; color:var(--ink-soft)}
.step:nth-child(3) span{color:rgba(240,232,213,.85)}
/* История-пример */
.story{margin:36px 0; padding:26px 30px; border-radius:12px; background:var(--page-edge); font-style:italic; color:#5A5642}
.story .who{font-family:-apple-system,'Segoe UI',sans-serif; font-style:normal; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px}
.story p{margin:0 0 14px}
.story p:last-child{margin:0}
/* Как не надо / как надо */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:32px 0; font-family:-apple-system,'Segoe UI',sans-serif; font-size:16px; line-height:1.65}
.pair>div{border-radius:12px; padding:22px 24px}
.pair .no{background:var(--page-edge); color:#8B8271}
.pair .yes{background:var(--sea-deep); color:var(--cream)}
.pair .tag{font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; display:block; margin-bottom:10px}
.pair .no .tag{color:#A79E8D}
.pair .yes .tag{color:var(--gold)}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; justify-content:center; font-family:-apple-system,'Segoe UI',sans-serif}
.chips i{font-style:normal; border:1px solid var(--gold); color:var(--sea-deep); border-radius:999px; padding:6px 18px; font-size:15px}
.example{border:1px solid var(--line); border-radius:12px; padding:22px 28px; margin-bottom:14px; background:#fff}
.example:last-child{margin-bottom:0}
.example .field{font-family:-apple-system,'Segoe UI',sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px}
.example p{margin:0; font-size:17px}
/* Практика — небесный лист */
.sheet.sky-sheet{
color:var(--cream);
background-color:var(--sea);
background-image:
radial-gradient(ellipse 60% 50% at 18% 15%, rgba(240,233,214,.28), transparent 70%),
radial-gradient(ellipse 50% 45% at 88% 85%, rgba(43,69,75,.5), transparent 75%),
linear-gradient(155deg,#527D89,#3C636D);
border:1px solid rgba(240,232,213,.35);
}
.sky-sheet .tab{background:var(--cream); color:var(--sea-deep); border:none}
.sky-sheet .tab b{color:#96742F}
.sky-sheet .label{font-family:-apple-system,'Segoe UI',sans-serif; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:14px; text-align:center}
.sky-sheet h3{font-weight:400; font-size:25px; margin:0 0 20px; color:#fff; text-align:center}
.sky-sheet ol, .sky-sheet ul{margin:0 0 26px; padding-left:22px}
.sky-sheet li{margin-bottom:12px; font-size:17.5px}
.sky-sheet .calm{border-top:1px solid rgba(240,232,213,.3); padding-top:22px; font-style:italic; color:rgba(240,232,213,.9); font-size:17.5px}
/* Задание с полем для ответа — светлая карточка на «небе» */
.task{background:var(--page); border-radius:12px; padding:20px 24px 18px; margin:0 0 14px; color:var(--ink)}
.task .q{font-size:17px; line-height:1.65; margin-bottom:12px}
.task .q b{font-weight:700; color:var(--gold); margin-right:6px}
.task textarea{
width:100%; box-sizing:border-box; display:block;
border:1px solid var(--line); border-radius:8px; padding:10px 14px;
font-family:Georgia,'Times New Roman',serif; font-size:16px; line-height:1.6;
color:var(--ink); background:#fff; resize:vertical; min-height:60px;
}
.task textarea:focus{outline:2px solid var(--gold); outline-offset:1px}
.task textarea::placeholder{color:#A9A18D; font-style:italic}
.practice-actions{text-align:center; margin:24px 0 8px}
.copy-btn{
font-family:-apple-system,'Segoe UI',sans-serif; font-size:13px; font-weight:600;
letter-spacing:.12em; text-transform:uppercase; color:var(--sea-deep);
background:var(--cream); border:none; border-radius:999px; padding:13px 30px; cursor:pointer;
box-shadow:0 4px 14px rgba(20,40,45,.25);
}
.copy-btn:hover{background:#fff}
.copy-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.practice-hint{font-family:-apple-system,'Segoe UI',sans-serif; text-align:center; font-size:13px; color:rgba(240,232,213,.75); margin-top:10px}
.sky-sheet em{box-shadow:none; color:var(--sea-deep); font-weight:600}
/* Пронумерованный пункт структурного перечня */
.n-item{margin:24px 0; padding:24px 28px; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px; background:#fff}
.n-item .n-tag{font-family:-apple-system,'Segoe UI',sans-serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:6px}
.n-item .n-title{font-size:20.5px; color:var(--sea-deep); margin:0 0 12px; font-weight:400; line-height:1.4}
.n-item p{font-size:17px; margin-bottom:14px}
.n-item p:last-child{margin-bottom:0}
.n-item .pair{margin:18px 0 0}
.n-item ul,.n-item ol{margin-bottom:0}
/* Показ по одной главе */
section.chapter{display:none}
section.chapter.active{display:flex; flex-direction:column; gap:34px}
/* Отметка «пройдено» в меню */
.nav-group .check{color:#9FCDAB; margin-left:8px; display:none; letter-spacing:0}
.nav-group.read .check{display:inline}
/* Тост «глава пройдена» */
.toast{
position:fixed; bottom:26px; left:50%; z-index:80;
transform:translateX(-50%) translateY(90px); opacity:0;
background:var(--sea-deep); color:var(--cream);
font-family:-apple-system,'Segoe UI',sans-serif; font-size:14px; letter-spacing:.06em;
padding:12px 28px; border-radius:999px; border:1px solid rgba(240,232,213,.4);
box-shadow:0 10px 30px rgba(20,40,45,.4);
transition:transform .35s ease, opacity .35s ease; pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}
/* Кликабельный переход к следующей главе */
a.next-link{display:block; text-align:center; text-decoration:none; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease}
a.next-link:hover{transform:translateY(-4px); box-shadow:0 30px 70px rgba(20,40,45,.4), 0 5px 16px rgba(20,40,45,.22)}
.next-link .orn{color:var(--gold); letter-spacing:.6em; font-size:16px; margin-bottom:16px}
.next-link .to{font-family:-apple-system,'Segoe UI',sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft)}
.next-link .title{font-size:23px; color:var(--sea-deep); margin-top:10px; line-height:1.4}
.next-link .go{display:inline-block; margin-top:18px; font-family:-apple-system,'Segoe UI',sans-serif; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); background:var(--sea-deep); border-radius:999px; padding:10px 26px}
.next-link:hover .go{background:var(--sea)}
.next-soon{text-align:center}
.next-soon .orn{color:var(--gold); letter-spacing:.6em; font-size:16px; margin-bottom:16px}
.next-soon .to{font-family:-apple-system,'Segoe UI',sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft)}
.next-soon .title{font-size:23px; color:var(--sea-deep); margin-top:10px}
.next-soon .note{font-style:italic; color:var(--ink-soft); margin-top:14px; font-size:17px}
/* ── Слот под схему ─────────────────────────────────────────────
Заглушка, пока иллюстрация не нарисована. Когда схема готова —
заменить содержимое .fig-slot на 
или