:root{color-scheme:light;--cream:#f5eddf;--brown:#4c3227;--gold:#c8a36a;--green:#627659}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:#3d3027;font-family:Georgia,serif}header{background:linear-gradient(100deg,#42291e,#795339,#432d23);color:#fff5dd;padding:18px 5%;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;position:sticky;top:0;z-index:5}header b{font-size:26px;font-weight:400}nav{display:flex;gap:18px;flex-wrap:wrap}nav a{color:inherit;font:14px system-ui;text-decoration:none}nav a:hover{text-decoration:underline}h1,h2,h3{font-weight:400}h2{text-align:center;font-size:clamp(32px,4vw,52px)}p{line-height:1.7}section{padding:65px max(5%,calc((100% - 1120px)/2))}.intro{text-align:center;max-width:780px;margin:0 auto 35px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:18px}.card,.lesson{background:#fffaf0;border:1px solid #d8c6a5;border-radius:14px;padding:24px;box-shadow:0 7px 24px #3c2c1910}.card h3{font-size:24px;margin:10px 0}.card p{font:14px/1.65 system-ui;color:#635646}.card button,.button{cursor:pointer;background:#684831;color:#fff8e8;border:1px solid #d5b785;border-radius:30px;padding:11px 19px;font:14px system-ui}.card button:hover,.button:hover{background:#87603d}.panel{background:#e8dcc7}.lesson{max-width:850px;margin:30px auto 0}.ref{color:#8e6d42;font:12px system-ui;letter-spacing:.12em;text-transform:uppercase}.timeline{display:flex;gap:12px;overflow-x:auto}.timeline article{background:#fffaf0;min-width:170px;padding:22px;border-top:4px solid var(--gold);border-radius:10px}.timeline small{display:block;margin-top:10px;font:13px system-ui}footer{padding:35px;text-align:center;background:#432f24;color:#f4e9d4;font:13px/1.8 system-ui}a{color:#75532f}@keyframes breath{to{transform:scale(1.07) translateY(-1%)}}@keyframes sway{to{transform:rotate(10deg) translateY(-9px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}@media(max-width:650px){header{justify-content:center}nav{justify-content:center}section{padding:48px 5%}}
.library-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:24px auto}.library-tools input,.library-tools select{font:15px system-ui;padding:12px 15px;border:1px solid #bca98c;border-radius:9px;background:#fffdf6;color:#392f24;min-width:190px}.library-tools input{min-width:min(320px,90vw)}.library-meta{font:13px system-ui;color:#756449;text-align:center;margin:10px}.study-detail{max-width:930px;margin:28px auto;background:#fffaf0;border:1px solid #d8c6a5;border-radius:15px;padding:clamp(20px,4vw,36px)}.study-detail h3{font-size:clamp(26px,3vw,38px);margin:10px 0}.study-detail h4{margin:22px 0 6px;color:#705438}.study-detail p{font:16px/1.8 system-ui}.study-detail .ref{font:12px system-ui}.study-detail a{font-weight:600}.study-detail button{margin-top:12px}.library-card{display:flex;flex-direction:column;justify-content:space-between}.library-card .tag{font:12px system-ui;color:#927347;text-transform:uppercase;letter-spacing:.08em}.library-card button{align-self:flex-start}.study-detail:focus{outline:3px solid #a78655;outline-offset:3px}@media(max-width:650px){.library-tools{align-items:stretch;flex-direction:column}.library-tools input,.library-tools select{width:100%}}
.timeline-list{max-width:920px;margin:30px auto;border-left:3px solid #b59b72;padding-left:22px}.timeline-event{position:relative;padding:12px 20px 22px;margin-bottom:14px;border:1px solid #d6c4a7;background:#fffaf0;border-radius:12px}.timeline-event:before{content:'';position:absolute;left:-31px;top:24px;width:13px;height:13px;background:#667e5e;border:3px solid #f5eddf;border-radius:50%}.timeline-event h3{margin:5px 0;font-size:24px}.timeline-event p{margin:8px 0}.course-progress{font:13px system-ui;color:#6c593d}.study-detail label{display:flex;align-items:center;gap:10px;font:15px system-ui;margin:22px 0}.study-detail input[type=checkbox]{width:20px;height:20px;accent-color:#627659}#course-grid button,#chapter-grid button{min-height:40px}@media(max-width:650px){.timeline-list{margin-left:8px}}