.doc { max-width: 760px; margin: 0 auto; padding: 120px 20px 90px; }
.doc h1 { margin: 12px 0 18px; font: 400 clamp(2.1rem, 1.5rem + 2vw, 2.9rem)/1.08 var(--serif); letter-spacing: -.02em; }
.doc h2 { margin: 36px 0 10px; font: 400 1.45rem/1.2 var(--serif); }
.doc p, .doc li { color: var(--text-2); } .doc li { margin: 6px 0; } .doc b { color: var(--text); }
.doc a { color: var(--copper-2); }
.lede { font-size: 1.12rem; } .meta { display: flex; gap: 12px; color: var(--text-3); font: 12px var(--mono, monospace); text-transform: uppercase; letter-spacing: .08em; }
.t { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: 14px; } .t th, .t td { padding: 9px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; } .t th { color: var(--text-3); font-weight: 500; }
.calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; } .calc div { padding: 14px; border-radius: 14px; background: rgba(255, 236, 222, .04); box-shadow: inset 0 0 0 1px var(--line); }
.calc span { display: block; color: var(--text-3); font-size: 12px; } .calc b { font: 500 1.35rem var(--mono, monospace); }
.note { padding: 12px 14px; border-radius: 12px; background: rgba(200, 87, 46, .12); color: var(--copper-2) !important; }
.try { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 44px 0 18px; padding: 18px; border-radius: 16px; background: rgba(200, 87, 46, .1); box-shadow: inset 0 0 0 1px rgba(226, 122, 80, .3); }
.try b { display: block; color: var(--text); } .try span { color: var(--text-2); font-size: 14px; } .try .btn { color: #fff; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 30px; } .pager a { color: var(--text-2); text-decoration: none; } .pager a:hover { color: var(--text); }
.fine { font-size: 12.5px; color: var(--text-3) !important; }
.lessons { display: grid; gap: 12px; margin-top: 26px; padding: 0; list-style: none; }
.lessons a { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: rgba(255, 236, 222, .03); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; }
.lessons a:hover { background: rgba(255, 236, 222, .06); } .lessons .n { font: 400 1.6rem var(--serif); color: var(--copper-2); } .lessons small { display: block; color: var(--text-3); }
@media (max-width: 560px) { .calc { grid-template-columns: 1fr; } .lessons a { grid-template-columns: 40px 1fr; } .lessons a > span:last-child { display: none; } .t { font-size: 13px; } }