:root{--ink:#172033;--muted:#5b6b80;--teal:#0f766e;--blue:#2563eb;--orange:#f97316;--yellow:#facc15;--sky:#e0f2fe;--mint:#dcfce7;--cream:#fef3c7;--purple:#ede9fe;--line:#cde8e2;--paper:rgba(255,255,255,.96);--shadow:0 24px 58px rgba(15,23,42,.14)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:"Trebuchet MS","Segoe UI Rounded","Segoe UI",system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 8% 8%,rgba(250,204,21,.45),transparent 24%),radial-gradient(circle at 92% 8%,rgba(20,184,166,.28),transparent 28%),radial-gradient(circle at 14% 92%,rgba(249,115,22,.18),transparent 28%),linear-gradient(rgba(20,184,166,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,.08) 1px,transparent 1px),#fffdf6;background-size:auto,auto,auto,34px 34px,34px 34px;line-height:1.55}
input[name=page]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.wrap{width:min(1060px,100%);margin:0 auto;padding:16px}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 0 14px;backdrop-filter:blur(10px)}
.back,.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 15px;border-radius:999px;border:2px solid rgba(15,118,110,.22);background:rgba(255,255,255,.94);color:#0f766e;font-weight:900;text-decoration:none;box-shadow:0 10px 22px rgba(15,23,42,.1)}
.book{overflow:hidden;border:4px solid #fff;border-radius:34px;background:var(--paper);box-shadow:var(--shadow)}
.hero{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:center;padding:30px;background:radial-gradient(circle at 92% 18%,rgba(255,255,255,.52),transparent 20%),linear-gradient(135deg,#14b8a6 0%,#60a5fa 52%,#facc15 100%);border-bottom:4px solid #fff}
.badge{display:grid;place-items:center;min-height:132px;border-radius:30px;background:linear-gradient(145deg,#0f766e,#2563eb 54%,#f97316);color:#fff;text-align:center;font-weight:950;border:4px solid rgba(255,255,255,.68);box-shadow:0 16px 28px rgba(15,23,42,.16),inset 0 -12px 26px rgba(0,0,0,.08)}
.badge small{display:block;font-size:1.5rem;letter-spacing:1px}.badge strong{display:block;font-size:3rem;line-height:1}
h1{margin:0;font-size:clamp(2rem,5vw,3.55rem);line-height:1.05;letter-spacing:0;color:#10213a;text-shadow:0 2px 0 rgba(255,255,255,.72)}
.lead{margin:12px 0 0;max-width:780px;color:#24415e;font-size:1.1rem;font-weight:800}
.pages{padding:26px;background:linear-gradient(135deg,rgba(254,243,199,.58),transparent 45%),#fff}
.page{display:none;animation:show .25s ease}@keyframes show{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#page1:checked~.book .page-1,#page2:checked~.book .page-2,#page3:checked~.book .page-3,#page4:checked~.book .page-4{display:block}
#page1:checked~.book .dot-1,#page2:checked~.book .dot-2,#page3:checked~.book .dot-3,#page4:checked~.book .dot-4{background:var(--teal);border-color:var(--teal);color:#fff}
.lesson{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(320px,1.05fr);gap:24px;align-items:start}
.visual-card,.note-card{border:2px solid var(--line);border-radius:30px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.09)}
.visual-card{overflow:hidden;border:5px solid #fff0b8;background:linear-gradient(135deg,#fef3c7,#e0f2fe);align-self:start;padding:20px;min-height:320px;display:grid;align-content:center}
.visual-card h3{margin:0 0 12px;color:#123252;font-size:clamp(1.35rem,3vw,2rem);line-height:1.12}
.visual-card p{margin:0 0 16px;color:#526477;font-weight:800}
.flow{display:grid;gap:10px;margin-top:8px}.flow div{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.86);border:2px solid rgba(37,99,235,.13);font-weight:900}
.diagram{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.chip{display:grid;place-items:center;min-height:72px;padding:12px;border-radius:20px;background:rgba(255,255,255,.88);border:2px solid rgba(15,118,110,.16);font-weight:950;text-align:center;color:#17324a}.chip:nth-child(2){background:#e0f2fe}.chip:nth-child(3){background:#dcfce7}.chip:nth-child(4){background:#fef3c7}
.note-card{padding:24px;background:radial-gradient(circle at 100% 0,rgba(250,204,21,.34),transparent 34%),radial-gradient(circle at 0 100%,rgba(20,184,166,.15),transparent 30%),#fff}
.label{display:inline-flex;align-items:center;min-height:36px;margin-bottom:14px;padding:6px 14px;border-radius:999px;background:linear-gradient(135deg,#fef08a,#d9fbf6);color:#0f766e;font-weight:950;border:2px solid rgba(255,255,255,.8);box-shadow:0 6px 12px rgba(15,23,42,.07)}
h2{margin:0 0 14px;font-size:clamp(1.45rem,3.4vw,2.25rem);line-height:1.12;color:#17324a}.note-card p{margin:0 0 16px;color:#526477;font-size:1.04rem;font-weight:760}
.point-list,.step-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.point-list li,.step-list li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:13px;border-radius:22px;background:var(--sky);border:2px solid #bde7ff;font-weight:800;box-shadow:inset 0 -8px 0 rgba(255,255,255,.38)}
.point-list li:nth-child(2),.step-list li:nth-child(2){background:var(--mint);border-color:#bdebd0}.point-list li:nth-child(3),.step-list li:nth-child(3){background:var(--cream);border-color:#f6e3a7}.point-list li:nth-child(4),.step-list li:nth-child(4){background:var(--purple);border-color:#ddd6fe}
.num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#0f766e,#2563eb);color:#fff;font-weight:950;box-shadow:0 7px 12px rgba(15,118,110,.22)}
.mini-title{display:block;margin-bottom:4px;color:var(--ink);font-size:1.03rem;font-weight:950}.mini-desc{display:block;color:var(--muted);font-weight:720}
.table-wrap{overflow-x:auto;margin-top:18px;border-radius:18px;border:2px solid #cae5ff;background:#fff;box-shadow:0 8px 16px rgba(15,23,42,.07)}table{width:100%;min-width:520px;border-collapse:collapse;font-weight:750}th,td{padding:13px;border-bottom:2px solid #d9edf9;border-right:2px solid #d9edf9;text-align:left}th{color:#0f4c81;background:linear-gradient(135deg,#e8f5ff,#fff5cf)}tr:last-child td{border-bottom:0}th:last-child,td:last-child{border-right:0}
.callout{margin-top:18px;padding:16px;border-radius:22px;background:linear-gradient(135deg,#f1e9ff,#e8fff3);border:2px solid #d9ccff;color:#254069;font-weight:850}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}.dots{display:flex;gap:8px;align-items:center;justify-content:center}.dot{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid #b9d8d4;background:#fff;color:#1455a3;font-weight:950;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 18px;border-radius:18px;background:linear-gradient(135deg,#0f766e,#2563eb);color:#fff;font-weight:950;text-decoration:none;cursor:pointer;box-shadow:0 13px 26px rgba(15,118,110,.2)}.btn.secondary{background:#fff;color:var(--teal);border:2px solid #bfe9e4;box-shadow:none}
@media(max-width:760px){.wrap{padding:10px}.hero,.lesson{grid-template-columns:1fr}.hero,.pages,.note-card{padding:16px}.badge{min-height:96px}.badge small{font-size:1.2rem}.badge strong{font-size:2.25rem}.visual-card{min-height:0;padding:16px}.diagram{grid-template-columns:1fr 1fr}.table-wrap{overflow-x:visible}table{min-width:0;table-layout:fixed;font-size:.86rem}th,td{padding:9px 7px;word-break:break-word}.pager{flex-direction:column;align-items:stretch}.pager .btn,.pager a{width:100%}.dots{order:-1}}