/* Lecture 4: a book workbench, source paper and visibly separate generated notes. */
.visual[data-kind^="f-"]{--f-ink:#273c55;--f-blue:#3c619a;--f-teal:#237d74;background:linear-gradient(125deg,#f1f4fb,#f8f6f0);border:1px solid #d5ddeb;color:var(--f-ink);min-height:220px}
.f-label{font-size:12px;letter-spacing:.04em;line-height:1.6;border-left:3px solid #718eae;padding-left:12px;margin:0 0 18px;color:#57708d}.f-label.f-generated{border-color:#ba8b45;background:#fcf3df;padding:11px 14px;color:#80602e}
.f-card{background:#fffdf9;border:1px solid #d8e0e9;border-radius:14px;padding:20px;margin:14px 0;min-width:0;overflow-wrap:anywhere}.f-card h3{font-size:18px;line-height:1.4;margin:0 0 14px}.f-card p{font-size:15px;line-height:1.8;margin:12px 0}.f-card.f-answer{border-left:4px solid #59918d;background:#f9fffc}
.f-text{font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;max-height:470px;overflow:auto;padding:3px 8px 6px 0}.f-note{font-size:13px!important;color:#667b90;line-height:1.7!important;margin:16px 0}.f-result{font-size:15px;line-height:1.75;padding:15px 18px;background:#e7f3ef;border-left:3px solid #388c78;border-radius:0 9px 9px 0;margin:18px 0;color:#2c6255}.f-warn{background:#fff2dc;border-color:#bd9451;color:#785a29}
.visual[data-kind^="f-"] .selected{border-color:#6b8fc1!important;background:#e8effb!important;color:#284f83!important}.visual[data-kind^="f-"] button{white-space:normal;line-height:1.45}.visual[data-kind^="f-"] details{margin:22px 0 8px;border-top:1px solid #d0d9e4;padding-top:15px;font-size:14px;line-height:1.75}.visual[data-kind^="f-"] summary{cursor:pointer;color:#3a6194}.visual[data-kind^="f-"] mark{background:#ffebad;color:#3d4b57;padding:2px 1px}
.f-select{display:block;font-size:14px;color:#4c6580;margin:18px 0}.f-select select{width:100%;display:block;margin-top:9px;border:1px solid #bacbde;background:white;border-radius:9px;padding:11px;color:#304a65;font:15px/1.5 system-ui;box-sizing:border-box;min-width:0;white-space:normal}
.f-slider{display:grid;grid-template-columns:1fr 110px;gap:9px 15px;align-items:center;font-size:14px;margin:15px 0}.f-slider input[type=number]{min-width:0;width:100%;box-sizing:border-box;font:15px Consolas,monospace;padding:8px;border:1px solid #bacbde;border-radius:7px;background:white;color:#304a65}.f-slider input[type=range]{grid-column:1/-1;width:100%;accent-color:#5278af}
.f-flow{display:flex;gap:8px;align-items:stretch;margin:22px 0;flex-wrap:wrap}.f-flow>span{flex:1;min-width:110px;background:#fff;border:1px solid #d8e1ec;border-radius:12px;padding:17px 12px;font-size:15px;line-height:1.5}.f-flow>span small{display:block;font:12px Consolas,monospace;color:#889ab1;margin-bottom:10px}.f-flow>span.active{background:#e3edf9;border-color:#8eaed5;box-shadow:inset 0 3px #5f83b4}.f-flow>b{align-self:center;font-weight:400;color:#8c9eb7}
.f-page{margin:18px 0;min-width:0}.f-page img{display:block;max-width:100%;width:480px;height:auto;margin:auto;box-shadow:0 8px 26px #2a3d6020;border:1px solid #e0e4eb}.f-page figcaption,.f-figure figcaption{font-size:12px;line-height:1.6;text-align:center;margin:14px 0;color:#637996}.f-book-spread{display:grid;grid-template-columns:1.8fr 1fr;gap:22px;align-items:center}.f-margin-note{font:22px/1.8 Georgia,serif;color:#77869b;border-left:2px solid #ccd6e5;padding:25px 0 25px 22px}
.f-figure{margin:22px 0;background:white;padding:14px;border:1px solid #dce3ec;border-radius:12px}.f-figure img{width:100%;height:auto;display:block}.f-resolution{image-rendering:auto}.f-icons{display:flex;align-items:center;justify-content:center;gap:70px;min-height:200px;background:white;border:1px dashed #b7c4d7;border-radius:12px;margin:20px 0}.f-icons img{height:140px;width:auto;image-rendering:auto}
.f-vector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:20px 0}.f-vector>div{border:1px solid #d0dae8;border-radius:7px;font:13px Consolas,monospace;text-align:center;padding:12px 5px}.f-vector small{display:block;color:#778b9e;font-size:10px;margin-bottom:7px}
.f-window-list{max-height:520px;overflow:auto;padding-right:8px}.f-window-list .f-card{padding:15px;margin:9px 0}.f-window-list h3{font-size:13px;color:#7789a1;margin-bottom:7px}.f-window-list p{font-size:14px;line-height:1.9}
.f-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px;font-size:13px}.f-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}.f-compare .f-card{padding:15px}.f-compare .f-text{max-height:340px;font-size:14px}.f-proof{display:block;font-size:14px;color:#4c6580;margin-top:18px}.f-proof textarea{display:block;width:100%;min-height:100px;box-sizing:border-box;border:1px solid #bdcce0;border-radius:9px;background:white;padding:14px;font:15px/1.65 system-ui;color:#304a65;margin-top:8px;resize:vertical}
.f-pair-table{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.f-pair-table>div{background:white;border:1px solid #d1dce9;border-radius:12px;padding:17px;font-size:14px}.f-pair-table p{border-top:1px solid #d8e1ec;padding:12px 0;margin:0;font-size:14px}.f-pair-table b{display:block;margin-bottom:15px}
.f-outline-tree{background:#fff;border:1px solid #d6e0ec;border-radius:12px;padding:10px 15px}.f-outline-tree>div{padding:16px 0 16px calc((var(--level) - 1)*15px);border-bottom:1px solid #e0e6ee;display:flex;flex-wrap:wrap;gap:7px 14px;font-size:15px}.f-outline-tree>div:last-child{border:0}.f-outline-tree small{color:#8293a8;width:100%;font-size:11px}.f-outline-tree a{font-size:13px}.f-checklist{display:grid;gap:12px;margin:20px 0}.f-checklist>button{text-align:left;padding:16px;font-size:15px}
.visual[data-kind^="f-"] .resources{margin-top:24px;padding-top:20px;border-top:1px solid #d0dbe9}
@media(max-width:1050px){.f-book-spread{grid-template-columns:1fr}.f-margin-note{font-size:18px;padding:15px;margin:0}.f-compare{grid-template-columns:1fr}.f-flow>span{min-width:95px}}
@media(max-width:500px){.f-card{padding:15px}.f-vector{grid-template-columns:repeat(2,minmax(0,1fr))}.f-pair-table{grid-template-columns:1fr}.f-flow>span{flex:1 1 38%;min-width:80px}.f-flow>b{display:none}.f-text{font-size:14px}.f-slider{grid-template-columns:1fr 90px}.f-outline-tree>div{padding-left:0}.f-figure{padding:7px}.f-label{font-size:11px}}