*{box-sizing:border-box}body{margin:0;color:#334638;font-family:'Segoe UI',sans-serif;background:#f3ecd9}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d67851;outline-offset:4px}main{height:100svh;min-height:650px;position:relative;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%}header{position:absolute;top:28px;left:38px;right:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}header a{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-weight:700;font-size:27px}header small{display:block;font-size:10px;font-weight:500;letter-spacing:1px}#location{font-size:10px;letter-spacing:2px}.glass,header button{background:#fffdf0eb;border:1px solid #ffffffb8;box-shadow:0 10px 40px #394a3520;backdrop-filter:blur(18px)}header button{padding:11px 18px;border-radius:30px;font-size:13px}header button[aria-pressed=true]{background:#526b4c;color:white}.heading{position:absolute;top:112px;left:50%;transform:translateX(-50%);text-align:center;width:80%;pointer-events:none}.heading small{font-size:9px;letter-spacing:3px;color:#718067}h1{font-family:Georgia;font-weight:400;font-size:clamp(24px,3vw,43px);letter-spacing:-1px;margin:12px 0}.heading p{font-size:12px;margin:0;color:#748069}nav{position:absolute;top:50%;left:30px;transform:translateY(-50%);width:183px;padding:10px;border-radius:22px}.lesson{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;border-radius:13px;padding:14px 9px;text-align:left;margin:3px 0}.lesson.active{background:#526b4c;color:#fff9e9}.lesson:hover:not(.active){background:#ecebdc}.lesson .icon{width:29px;font-size:24px;text-align:center}.lesson b{font-size:12px;display:block;font-weight:600}.lesson small{font-size:9px;display:block;opacity:.65;margin-top:4px}aside{position:absolute;right:30px;top:50%;transform:translateY(-50%);border-radius:30px;padding:6px;display:flex;flex-direction:column;gap:7px}aside button{width:40px;height:40px;border:0;background:transparent;border-radius:50%;font-size:22px}aside button:hover{background:#e6e9d7}#speech{position:absolute;left:57%;top:32%;background:#fffdef;border-radius:22px 22px 22px 3px;box-shadow:0 8px 25px #33463810;padding:15px 22px;font:italic 18px Georgia;pointer-events:none}.subtitle{position:absolute;bottom:49px;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 60px));border-radius:23px;padding:20px 26px 14px}.meta{display:flex;justify-content:space-between;gap:10px;font-size:9px;text-transform:uppercase;letter-spacing:1.5px}.meta span:first-child{color:#718159;font-weight:700}.meta span:last-child{color:#b2774b}.subtitle h2{font:clamp(20px,2.3vw,31px) Georgia;margin:12px 0 6px;letter-spacing:-.5px}.subtitle h2 em{color:#b87349;font-style:normal;border-bottom:2px solid #d8af78}.subtitle p{font-size:12px;color:#7c8274;margin:0}.timeline{display:flex;gap:13px;align-items:center;border-top:1px solid #526b4c15;margin-top:15px;padding-top:12px;font-size:9px}.timeline>span{min-width:100px}.timeline>div{height:3px;background:#e4e6d8;flex:1;border-radius:5px;overflow:hidden}.timeline i{display:block;height:100%;background:#9baf7b;width:0}.timeline button{border:0;background:none;font-size:10px;white-space:nowrap}footer{position:absolute;bottom:17px;text-align:center;width:100%;font-size:8px;letter-spacing:1px;color:#737b62}#explanation{position:absolute;right:90px;top:38%;width:280px;border-radius:18px;padding:22px;z-index:4}#explanation b{font:23px Georgia}#explanation p{font-size:13px;line-height:1.65}code{display:block;background:#e9eddd;padding:12px;border-radius:9px;font-size:11px}
@media(max-width:750px){header{top:18px;left:18px;right:18px}#location{display:none}header a{font-size:21px}.heading{top:83px}h1{margin:8px 0}.heading p{font-size:11px}nav{top:auto;bottom:235px;left:50%;transform:translateX(-50%);width:auto;max-width:calc(100% - 28px);padding:5px;border-radius:18px;display:flex}.lesson{width:60px;flex-direction:column;gap:3px;padding:8px 3px;margin:0}.lesson small{display:none}.lesson b{font-size:8px;white-space:nowrap}.lesson .icon{font-size:20px}aside{top:215px;right:12px;padding:3px;gap:3px}aside button{width:30px;height:30px;font-size:18px}.subtitle{bottom:38px;width:calc(100% - 28px);padding:17px 18px;min-height:180px}.subtitle h2{font-size:22px}.meta{font-size:8px;letter-spacing:.8px}.timeline{gap:6px}.timeline>span{min-width:80px}#speech{top:29%;left:53%;font-size:13px;padding:10px 13px}#explanation{top:180px;right:51px;width:min(270px,calc(100% - 70px))}footer{font-size:7px;bottom:13px}main{min-height:700px}}