/* A shared visual language: numbers and labels carry meaning as well as color. */
:root{--info-blue:#315e86;--info-blue-bg:#e9f1f8;--info-purple:#6b528d;--info-purple-bg:#f0ebf7;--info-amber:#865c20;--info-amber-bg:#fbf0db}
html[data-theme=dark]{--info-blue:#a5c8eb;--info-blue-bg:#233745;--info-purple:#d0b9e8;--info-purple-bg:#352b43;--info-amber:#e3c080;--info-amber-bg:#403522}
.walk-figure,.learning-demo,.book-detail-figure,.concept-figure{border-radius:20px;box-shadow:0 6px 24px #00000005}
.walk-figure{padding:30px}.walk-figure figcaption{display:flex;align-items:flex-start;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.walk-heading{min-width:0}.walk-heading>strong{font-size:21px;line-height:1.65;font-weight:600;display:block}.walk-icon{flex:0 0 44px;width:44px;height:44px;padding:10px;border-radius:12px;background:var(--tint);color:var(--accent)}.walk-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.walk-figure-tag{font-size:12px;letter-spacing:.01em;margin-bottom:5px}.walk-steps li{--node-color:var(--accent);--node-bg:var(--tint)}
.walk-steps li:nth-child(4n+2){--node-color:var(--info-blue);--node-bg:var(--info-blue-bg)}.walk-steps li:nth-child(4n+3){--node-color:var(--info-purple);--node-bg:var(--info-purple-bg)}.walk-steps li:nth-child(4n+4){--node-color:var(--info-amber);--node-bg:var(--info-amber-bg)}
.walk-marker{width:36px;height:36px;flex-basis:36px;border:0;border-radius:10px;color:var(--node-color);background:var(--node-bg);font-size:12px;font-weight:600}.walk-steps strong{color:var(--node-color);font-size:17px}.walk-steps p{color:var(--ink);line-height:1.95}
.walk-flow .walk-steps li,.walk-sequence .walk-steps li{padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:12px}.walk-flow li:not(:last-child):before,.walk-sequence li:not(:last-child):before{left:37px;top:100%;bottom:-30px}.walk-flow li:not(:last-child):after,.walk-sequence li:not(:last-child):after{left:32px;bottom:-29px}.walk-flow .walk-steps,.walk-sequence .walk-steps{gap:29px}
.walk-network li,.walk-tree li,.walk-compare li,.walk-parallel li,.walk-cycle li{border-top:3px solid var(--node-color);padding:20px}.walk-network .walk-root,.walk-tree .walk-root{font-size:16px;padding:20px;margin-bottom:32px}.walk-root:after{height:33px}.walk-network .walk-steps,.walk-tree .walk-steps{padding-top:24px;gap:18px}
.walk-stack li,.walk-nested li{border-left-color:var(--node-color);background:var(--node-bg)!important}.walk-stack .walk-marker,.walk-nested .walk-marker{border:1px solid var(--node-color)}.walk-stack .walk-steps,.walk-nested .walk-steps{gap:10px}
.concept-figure figcaption,.book-detail-figure figcaption{font-size:15px;line-height:1.7;margin-bottom:22px;color:var(--muted)}.concept-part{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.concept-part:nth-child(2){border-top:3px solid var(--info-blue)}.concept-part:first-child{border-top:3px solid var(--accent)}.concept-part:nth-child(3){border-top:3px solid var(--info-purple)}.concept-index{font-variant-numeric:tabular-nums}.concept-part p{color:var(--ink);line-height:1.85}
.rich-figure{padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);margin:30px 0}.rich-caption{display:flex;align-items:start;gap:14px;margin-bottom:24px}.rich-caption strong{font-size:20px;line-height:1.6;display:block}.rich-caption small{font-size:12px;color:var(--muted);display:block;margin:6px 0}.rich-caption .walk-icon{flex-shrink:0}
.rich-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;line-height:1.8;margin:16px 0}.rich-key{padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}.rich-key.blue{color:var(--info-blue);background:var(--info-blue-bg)}.rich-key.purple{color:var(--info-purple);background:var(--info-purple-bg)}.rich-key.amber{color:var(--info-amber);background:var(--info-amber-bg)}
.rich-note{font-size:15px;line-height:1.95;color:var(--muted);margin:20px 0 0}.rich-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.rich-card{padding:22px;border:1px solid var(--line);border-radius:13px;background:var(--paper);min-width:0}.rich-card h3{font-size:17px;line-height:1.7;margin:0 0 14px}.rich-card p{font-size:15px;line-height:1.95;margin:12px 0}.rich-card .small{font-size:12px;color:var(--muted)}
.rich-layer{margin:8px 0;padding:13px 16px;border-radius:8px;border:1px solid var(--line);font-size:14px;line-height:1.6;background:var(--surface)}.rich-layer.blue{color:var(--info-blue);background:var(--info-blue-bg)}.rich-layer.purple{color:var(--info-purple);background:var(--info-purple-bg)}.rich-layer.amber{color:var(--info-amber);background:var(--info-amber-bg)}
.rich-svg-scroll{overflow-x:auto}.rich-svg{width:100%;min-width:580px;height:auto;display:block}.rich-svg text{fill:var(--ink);font-family:inherit;font-size:15px}.rich-svg .small{font-size:12px;fill:var(--muted)}.rich-svg .heading{font-size:17px;font-weight:600}.rich-svg rect{fill:var(--paper);stroke:var(--line);stroke-width:1.4}.rich-svg .blue{fill:var(--info-blue-bg);stroke:var(--info-blue)}.rich-svg .purple{fill:var(--info-purple-bg);stroke:var(--info-purple)}.rich-svg .amber{fill:var(--info-amber-bg);stroke:var(--info-amber)}.rich-svg .green{fill:var(--tint);stroke:var(--accent)}.rich-svg line,.rich-svg path{stroke:var(--accent);fill:none;stroke-width:2}.rich-svg .arrowhead{fill:var(--accent);stroke:none}.rich-svg .lifeline{stroke:var(--line);stroke-dasharray:5 7;stroke-width:1.3}.rich-svg .reply{stroke:var(--info-blue)}.rich-svg .reply-head{fill:var(--info-blue);stroke:none}
.packet-fields{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.packet-field{padding:15px 18px;border-radius:9px;background:var(--info-blue-bg);border:1px solid var(--info-blue);color:var(--info-blue);font-size:14px;line-height:1.7}.packet-field small{display:block;font-size:11px}.packet-field.transport{background:var(--info-purple-bg);border-color:var(--info-purple);color:var(--info-purple)}.packet-field.payload{background:var(--info-amber-bg);border-color:var(--info-amber);color:var(--info-amber)}
.updated-explanation{margin:30px 0;padding:24px;border:1px solid var(--line);border-left:4px solid var(--info-blue);border-radius:12px;background:var(--surface)}.updated-explanation h3{font-size:21px;line-height:1.7;margin:0 0 12px}.updated-explanation .update-meta{font-size:11px;color:var(--muted);line-height:1.8;margin-bottom:12px}.updated-explanation .update-sources{font-size:12px;line-height:1.9;margin-top:20px}.updated-explanation .update-sources a{color:var(--accent);text-underline-offset:3px}.updated-explanation table{margin:22px 0}
.rich-band{height:10px;margin:14px 0;background:var(--line);border-radius:10px;overflow:hidden}.rich-band span{display:block;height:100%;width:var(--band);background:var(--info-blue);border-radius:10px}.rich-check-list{list-style:none;padding:0;margin:0}.rich-check-list li{padding:13px 0;font-size:15px;line-height:1.8;border-bottom:1px solid var(--line)}.rich-check-list li:last-child{border:0}.rich-check-list b{color:var(--accent)}
@media(max-width:700px){.walk-figure,.rich-figure{padding:22px 16px}.rich-caption strong,.walk-heading>strong{font-size:19px}.walk-icon{width:36px;height:36px;flex-basis:36px;padding:8px;border-radius:9px}.rich-grid{grid-template-columns:1fr}.rich-card{padding:18px}.rich-figure:has(.rich-svg) .rich-caption small:after{content:' · เลื่อนภาพด้านข้างเพื่อดูครบ ↔'}.updated-explanation{padding:20px 16px}.updated-explanation h3{font-size:19px}.packet-field{padding:11px 12px;font-size:12px}.walk-flow .walk-steps li,.walk-sequence .walk-steps li{padding:16px}.walk-flow li:not(:last-child):before,.walk-sequence li:not(:last-child):before{left:33px}.walk-flow li:not(:last-child):after,.walk-sequence li:not(:last-child):after{left:28px}}
@media(prefers-reduced-motion:reduce){.rich-figure *{transition:none!important;animation:none!important}}
.updated-explanation,.rich-card,.rich-note{overflow-wrap:anywhere}
.osi-figure{border-radius:20px;padding:28px}.osi-grid{gap:24px}.osi-tier{--tier-accent:var(--accent);--tier-bg:var(--tint);background:var(--tier-bg);min-height:65px}.osi-tier[data-osi-layer="3"]{--tier-accent:var(--info-blue);--tier-bg:var(--info-blue-bg)}.osi-tier[data-osi-layer="4"]{--tier-accent:var(--info-purple);--tier-bg:var(--info-purple-bg)}.osi-tier[data-osi-layer="5"],.osi-tier[data-osi-layer="6"],.osi-tier[data-osi-layer="7"]{--tier-accent:var(--info-amber);--tier-bg:var(--info-amber-bg)}.osi-tier-line{font-size:14px;font-weight:500}.osi-tier-th{font-size:11px}.osi-tier[aria-pressed="true"]{background:var(--tier-accent);color:var(--paper)}.osi-detail{border-radius:14px;box-shadow:inset 0 3px 0 var(--accent)}.osi-detail>p,.osi-example p{font-size:16px;color:var(--ink)}.osi-detail:has([data-osi-title]) dl{padding:15px;background:var(--surface);border-radius:9px}.osi-figure:has([data-osi-layer="3"][aria-pressed="true"]) .osi-detail{box-shadow:inset 0 3px 0 var(--info-blue)}.osi-figure:has([data-osi-layer="4"][aria-pressed="true"]) .osi-detail{box-shadow:inset 0 3px 0 var(--info-purple)}
@media(max-width:550px){.osi-figure{padding:22px 14px}.osi-tier-line{font-size:12px}.osi-tier-th{font-size:10px}.osi-tier{min-height:61px}}