/* Machine-learning field guides */
.ml-guides-section { background: var(--paper); padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 7vw, 8.5rem); }
.ml-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:3rem auto 0; max-width:var(--max); }
.ml-guide-grid article { background:var(--ink); color:var(--paper); min-height:260px; padding:1.5rem; position:relative; }
.ml-guide-grid article > span { color:var(--mint); font: .58rem var(--mono); letter-spacing:.08em; }
.ml-guide-grid h3 { font:600 clamp(1.8rem,3vw,3rem)/.92 var(--display); letter-spacing:-.07em; margin:2rem 0 .8rem; text-transform:uppercase; }
.ml-guide-grid h3 em { color:var(--orange); font-style:normal; }
.ml-guide-grid p { color:rgba(238,242,234,.67); line-height:1.65; max-width:28rem; }
.ml-guide-grid a,.guide-related-link { color:var(--mint); display:inline-flex; font-size:.8rem; gap:.5rem; margin-top:1rem; text-decoration:none; }
.ml-guide-grid a:hover,.guide-related-link:hover { text-decoration:underline; }
.machine-guide-page .lesson-hero { grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); min-height:540px; background-image:linear-gradient(rgba(238,242,234,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(238,242,234,.055) 1px,transparent 1px),radial-gradient(circle at 78% 44%,rgba(185,255,85,.12),transparent 34%); }
.machine-guide-page .lesson-hero h1 { font-size:clamp(3rem,6.3vw,6.5rem); letter-spacing:-.075em; line-height:.9; overflow-wrap:anywhere; }
.model-comparison-page .lesson-hero h1 { font-size:clamp(3rem,5.2vw,5.3rem); overflow-wrap:normal; }
@media(max-width:760px) { .model-comparison-page .lesson-hero h1 { font-size:clamp(2.8rem,11vw,4rem); } }
.machine-guide-page .lesson-hero h1 em { color:var(--mint); font-style:normal; }
.machine-guide-page .lesson-back { margin-bottom:2rem; }
.guide-hero-visual { align-self:center; background:rgba(20,28,31,.88); border:1px solid rgba(238,242,234,.22); box-shadow:12px 14px rgba(0,0,0,.2); color:var(--paper); min-height:260px; padding:1.2rem; position:relative; transform:rotate(1.5deg); }
.guide-visual-index,.guide-visual-foot { color:var(--mint); display:block; font: .56rem var(--mono); letter-spacing:.07em; }
.guide-visual-foot { bottom:1rem; color:rgba(238,242,234,.58); position:absolute; }
.guide-flow,.guide-project-visual,.guide-cnn-visual { align-items:center; display:flex; flex-wrap:wrap; gap:.65rem; justify-content:center; margin:5rem auto 3rem; }
.guide-flow span,.guide-cnn-visual span,.guide-cnn-visual b,.guide-cnn-visual strong,.guide-cnn-visual em { border:1px solid rgba(185,255,85,.5); color:var(--paper); font: .7rem var(--mono); padding:.7rem; }
.guide-flow b,.guide-project-visual i,.guide-cnn-visual i { color:var(--orange); }
.guide-project-visual { font: .8rem var(--mono); }
.guide-project-visual span,.guide-project-visual b,.guide-project-visual strong { border:1px solid rgba(135,159,255,.55); padding:.9rem; }
.guide-content .walkthrough-body p,.guide-content .walkthrough-body li { line-height:1.8; }
.guide-content .walkthrough-body h3 { margin-top:0; }
.guide-content .walkthrough-body a { text-decoration-thickness:1px; text-underline-offset:3px; }
.guide-step-grid,.project-grid { display:grid; gap:.8rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin:2rem 0; }
.guide-step-grid article,.project-grid article { border:1px solid rgba(16,24,27,.15); padding:1.1rem; }
.guide-step-grid article > span,.project-grid article > span { color:#577b17; font:.58rem var(--mono); }
.guide-step-grid h4,.project-grid h4 { font:600 1.15rem var(--display); margin:.7rem 0; }
.project-grid p,.guide-step-grid p { font-size:.85rem; margin:0; }
.guide-code { background:var(--ink); color:var(--paper); overflow:auto; padding:1.2rem; }
.guide-code code { font:.76rem/1.65 var(--mono); white-space:pre; }
.guide-checklist { padding-left:1.3rem; }
.guide-checklist li { margin:.7rem 0; }
.guide-shape-row { align-items:center; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; margin:2rem 0; }
.guide-shape-row span { border:1px solid rgba(16,24,27,.22); padding:1rem; }
.guide-shape-row strong { display:block; margin-top:.5rem; }
.guide-shape-table { border:1px solid rgba(16,24,27,.18); margin:1.5rem 0; overflow:auto; }
.guide-shape-table > div { display:grid; gap:.8rem; grid-template-columns:1.25fr .8fr 1fr; min-width:540px; padding:.8rem; }
.guide-shape-table > div:nth-child(odd) { background:rgba(16,24,27,.05); }
.guide-shape-table code { white-space:nowrap; }
.guide-related { align-self:center; display:flex; flex-direction:column; }
.temperature-demo { background:rgba(16,24,27,.045); border:1px solid rgba(16,24,27,.15); margin:1.5rem 0; padding:1.2rem; }
.temperature-control label { display:flex; font-weight:700; justify-content:space-between; }
.temperature-control input { accent-color:#577b17; display:block; margin:1rem 0 .4rem; width:100%; }
.temperature-scale { color:#596266; display:flex; font:.62rem var(--mono); justify-content:space-between; }
.temperature-bars { list-style:none; margin:1.5rem 0; padding:0; }
.temperature-bars li { align-items:center; display:grid; gap:.7rem; grid-template-columns:7rem minmax(4rem,1fr) 3.4rem; margin:.7rem 0; }
.temperature-token,.temperature-bars output { font:.68rem var(--mono); }
.temperature-bar { background:rgba(16,24,27,.12); height:.8rem; overflow:hidden; }
.temperature-bar i { background:var(--orange); display:block; height:100%; transition:width .2s ease; width:0; }
.temperature-bars li:first-child .temperature-bar i { background:#577b17; }
.temperature-bars output { text-align:right; }
.temperature-live { font-weight:700; }
.temperature-demo-note { color:#596266; font-size:.82rem; }
@media(max-width:760px) { .ml-guide-grid { grid-template-columns:1fr; } .machine-guide-page .lesson-hero { grid-template-columns:1fr; min-height:auto; } .machine-guide-page .lesson-hero-art { min-height:300px; } .guide-step-grid,.project-grid { grid-template-columns:1fr; } .guide-shape-table>div { grid-template-columns:1fr; min-width:0; } }