.beginner-guide { max-width:930px; margin:30px 0 38px; padding:24px; border:1px solid #bcd7e5; border-radius:16px; background:linear-gradient(135deg,#f0f8fb,#fff); box-shadow:0 10px 26px rgb(18 50 74 / .06); }
.beginner-kicker { margin:0 0 7px; color:#167d8d; font-size:.8rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.beginner-guide h3 { margin:0 0 10px; color:#12324a; font-size:1.35rem; }
.beginner-guide > p { margin:0; color:#355368; }
.beginner-example,.beginner-steps { margin-top:16px; padding:16px; border-radius:10px; }
.beginner-example { background:#eaf3fa; }.beginner-steps { background:#f8fbfd; border:1px solid #dce9ef; }
.beginner-example strong,.beginner-steps strong,.beginner-check strong { color:#245b8f; }
.beginner-example p { margin:7px 0 0; }.beginner-steps ol { margin:9px 0 0; padding-left:21px; }.beginner-steps li + li { margin-top:5px; }
.beginner-check { margin-top:16px !important; padding-top:15px; border-top:1px solid #cbdde7; }
.lesson-prompt { margin-top:15px; padding:13px 15px; border:1px solid #d4e3ea; border-radius:10px; background:#fbfdfe; color:#466175; font-size:.94rem; }
.lesson-prompt summary { cursor:pointer; color:#245b8f; font-weight:800; }.lesson-prompt ol { margin:10px 0 0; padding-left:20px; }.lesson-prompt li + li { margin-top:4px; }
.zoomable-diagram { position:relative; }.zoomable-diagram img { cursor:zoom-in; }.diagram-open { display:inline-flex; min-height:42px; align-items:center; margin:12px 4px 2px; padding:0 14px; border:1px solid #245b8f; border-radius:999px; background:#f7fbfd; color:#245b8f; font:inherit; font-size:.9rem; font-weight:800; cursor:zoom-in; }.diagram-open:hover { background:#eaf3fa; }
.diagram-viewer { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#102a3d; color:#fff; }.diagram-viewer::backdrop { background:rgb(7 22 34 / .84); }.diagram-viewer-bar { display:flex; min-height:60px; align-items:center; gap:12px; padding:10px max(16px,env(safe-area-inset-left)); border-bottom:1px solid rgb(255 255 255 / .2); }.diagram-viewer-bar span { margin-right:auto; color:#c7d9e5; font-size:.88rem; }.diagram-viewer-bar button { min-height:40px; padding:0 13px; border:1px solid rgb(255 255 255 / .5); border-radius:999px; background:transparent; color:#fff; font:inherit; font-weight:800; cursor:pointer; }.diagram-viewer-canvas { width:100%; height:calc(100% - 60px); overflow:auto; padding:28px; -webkit-overflow-scrolling:touch; }.diagram-viewer-canvas img { display:block; width:max(960px,100%); max-width:none; height:auto; margin:auto; border-radius:10px; touch-action:pan-x pan-y pinch-zoom; }
@media (max-width:640px) { body { font-size:17px; line-height:1.76; }.toc .shell { gap:6px; padding:10px 0; }.toc a { padding:7px 10px; font-size:.9rem; }.chapter-label,.eyebrow { font-size:.84rem; }.chapter-tag { font-size:1.03rem; line-height:1.55; }.chapter-overview { font-size:1.06rem; line-height:1.76; } h2 { font-size:clamp(2rem,9vw,2.6rem); line-height:1.12; } h3 { font-size:1.42rem; line-height:1.32; }.callout { padding:15px; font-size:1rem; line-height:1.65; } figcaption { font-size:.94rem; line-height:1.6; }.recap { font-size:1rem; }.beginner-guide { margin:22px 0 30px; padding:18px; border-radius:14px; font-size:1rem; line-height:1.72; }.beginner-guide h3 { font-size:1.28rem; line-height:1.3; }.beginner-example,.beginner-steps { margin-top:13px; padding:14px; }.lesson-prompt { font-size:.98rem; line-height:1.68; }.diagram-open { width:calc(100% - 8px); justify-content:center; min-height:46px; margin-top:10px; font-size:.96rem; } .diagram-viewer-bar { min-height:64px; flex-wrap:wrap; padding:10px 14px; }.diagram-viewer-bar span { width:100%; order:3; font-size:.8rem; }.diagram-viewer-canvas { height:calc(100% - 92px); padding:14px; }.diagram-viewer-canvas img { width:960px; } }