:root {
  --ink: #14233a;
  --muted: #5d6c82;
  --line: #dce4ef;
  --paper: #f7f9fc;
  --card: #ffffff;
  --navy: #102849;
  --blue: #1769e0;
  --cyan: #11a9c7;
  --mint: #27b68b;
  --gold: #edb948;
  --coral: #f56c61;
  --shadow: 0 18px 46px rgba(30, 57, 90, .12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.course-home { min-height: 100vh; padding: clamp(2.5rem, 10vw, 9rem); display: grid; align-content: center; background: radial-gradient(circle at 90% 15%, #b9e9ff 0, transparent 27rem), var(--paper); }
.course-home h1 { margin: .25rem 0 1rem; font-size: clamp(3rem, 8vw, 6.5rem); letter-spacing: -.075em; color: var(--navy); }
.course-home p:not(.eyebrow) { max-width: 42rem; color: var(--muted); font-size: 1.2rem; line-height: 1.7; }
.eyebrow { margin: 0; font-weight: 800; font-size: .76rem; letter-spacing: .14em; color: var(--blue); }
.primary-button, .outline-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; width: max-content; border-radius: .7rem; padding: .8rem 1.05rem; border: 1px solid var(--blue); text-decoration: none; font-weight: 750; }
.primary-button { margin-top: 1.2rem; color: white; background: var(--blue); box-shadow: 0 9px 18px rgba(23, 105, 224, .23); }
.outline-button { color: var(--blue); background: white; }

.topbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem; padding: .7rem clamp(1rem, 3vw, 3rem); background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: .72rem; text-decoration: none; font-weight: 850; color: var(--navy); letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .62rem; color: white; background: var(--blue); font-size: .85rem; }
.lesson-crumb { color: var(--muted); font-size: .87rem; }
.progress-label { font-weight: 750; color: var(--blue); font-size: .83rem; white-space: nowrap; }

.page-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.lesson-nav { position: sticky; top: 4rem; height: calc(100vh - 4rem); overflow-y: auto; padding: 2.4rem 1.1rem 2rem clamp(1rem, 3vw, 3rem); border-right: 1px solid var(--line); }
.lesson-nav h2 { margin: 0 0 .8rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.lesson-nav ol { margin: 0; padding: 0; list-style: none; }
.lesson-nav a { display: block; padding: .55rem .6rem; color: var(--muted); text-decoration: none; border-radius: .45rem; font-size: .89rem; line-height: 1.3; }
.lesson-nav a:hover, .lesson-nav a.active { color: var(--blue); background: #eaf2ff; font-weight: 700; }
.lesson-main { min-width: 0; }

.hero { position: relative; display: grid; align-content: end; min-height: min(620px, 78vh); padding: clamp(2rem, 6vw, 5.4rem); overflow: hidden; color: white; background: #0a1f3a; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(5,20,39,.97) 0%, rgba(9,28,52,.82) 46%, rgba(7,21,42,.31) 100%), url("https://images.unsplash.com/photo-1695668548342-c0c1ad479aee?auto=format&fit=crop&w=1800&q=85") center/cover; }
.hero::after { content: ""; position: absolute; z-index: -1; width: 34rem; height: 34rem; border-radius: 50%; right: -13rem; bottom: -18rem; background: rgba(17,169,199,.34); filter: blur(9px); }
.hero-content { max-width: 50rem; }
.hero .eyebrow { color: #75dbf0; }
.hero h1 { margin: .5rem 0 1rem; max-width: 13ch; font-size: clamp(2.75rem, 6vw, 5.8rem); letter-spacing: -.075em; line-height: .94; }
.hero p { max-width: 45rem; margin: 0; color: #d8e4f4; font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.65; }
.hero-credit { position: absolute; right: 1.2rem; bottom: 1rem; margin: 0; color: #d5e0ef; font-size: .7rem; }
.hero-credit a { color: inherit; }

.article { max-width: 1000px; padding: clamp(2.3rem, 6vw, 5.2rem); }
.section { margin: 0 0 6rem; scroll-margin-top: 5.5rem; }
.section h2 { margin: .35rem 0 1rem; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -.055em; color: var(--navy); }
.section h3 { margin: 2.1rem 0 .65rem; font-size: 1.2rem; color: var(--navy); }
.lead { max-width: 48rem; font-size: 1.12rem; line-height: 1.75; color: var(--muted); }
.body-copy { color: var(--muted); line-height: 1.72; }
.body-copy strong { color: var(--ink); }
.callout { display: grid; grid-template-columns: auto 1fr; gap: 1rem; max-width: 55rem; margin: 1.8rem 0; padding: 1.15rem 1.25rem; border: 1px solid #b9d6ff; border-radius: .85rem; background: #edf5ff; color: #25466c; line-height: 1.55; }
.callout-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 800; }

.diagram-card { margin: 2.2rem 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); box-shadow: var(--shadow); }
.diagram-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.diagram-header h3 { margin: 0; font-size: 1rem; }
.diagram-header p { margin: .25rem 0 0; color: var(--muted); font-size: .87rem; }
.canvas-wrap { padding: clamp(.5rem, 2vw, 1.5rem); background: linear-gradient(180deg, #fbfdff, #f1f7ff); }
canvas { display: block; width: 100%; height: auto; max-height: 480px; border-radius: .75rem; }
.canvas-caption { margin: 0; padding: 1rem 1.4rem 1.25rem; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.diagram-controls { display: flex; gap: .6rem; flex-wrap: wrap; padding: 0 1.4rem 1.2rem; }
.control-button { padding: .58rem .8rem; border: 1px solid #b9cce7; border-radius: .55rem; color: #215486; background: #fff; font-weight: 700; font-size: .85rem; }
.control-button:hover, .control-button.active { color: #fff; border-color: var(--blue); background: var(--blue); }
.simulation-badge { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; padding: .48rem .7rem; border: 1px solid #b8dce7; border-radius: 999px; color: #167b90; background: #eefbfe; font-size: .75rem; font-weight: 800; }
.orbit-canvas-wrap { background: #071a31; }
.orbit-canvas { max-height: none; }
.orbit-controls { align-items: center; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.orbit-controls .control-button { display: inline-flex; align-items: center; gap: .45rem; }
.orbit-pause { margin-left: auto; }
.orbit-readout { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin: 0 1.4rem 1.1rem; overflow: hidden; border: 1px solid var(--line); border-radius: .75rem; background: var(--line); }
.orbit-metric { min-width: 0; padding: .85rem .8rem; background: #f8fbff; }
.orbit-metric span, .orbit-metric small { display: block; }
.orbit-metric span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.orbit-metric strong { display: block; margin: .35rem 0 .2rem; color: var(--navy); font-size: 1.08rem; letter-spacing: -.02em; }
.orbit-metric small { color: #7a899c; font-size: .73rem; line-height: 1.4; }
.orbit-metric.escape-metric strong { color: #a66e08; }
.orbit-speed-callout code { padding: .12rem .32rem; border-radius: .3rem; color: #173f68; background: rgba(255,255,255,.68); font-weight: 800; }
@media (max-width: 1100px) { .orbit-readout { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.orbit-concepts .number i { margin-right: .25rem; }
.orbit-table td:nth-child(2) { min-width: 12rem; }
.latency-warning { border-color: #f0d49a; background: #fff8e8; color: #654c1c; }
.latency-warning .callout-icon { background: #c28718; }
.http-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98) 0%, rgba(8,27,50,.87) 48%, rgba(5,20,39,.38) 100%), url("https://images.unsplash.com/photo-1649451844952-5a6a1b221f7a?auto=format&fit=crop&w=1800&q=85") center/cover; }
.http-flow-canvas, .tls-canvas, .version-canvas { max-height: none; }
.http-message-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 1rem; }
.http-message-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .9rem; background: #0c203b; box-shadow: 0 12px 28px rgba(20,47,80,.12); }
.message-card-head { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; color: #dce9f7; border-bottom: 1px solid #294360; font-size: .8rem; }
.message-card-head span { color: #8fb4d5; }.message-card-head i { margin-right: .35rem; }.message-card-head strong { color: #fff; }
.http-message-card pre { min-height: 16.8rem; margin: 0; padding: 1.1rem; overflow-x: auto; color: #d8e8f7; font: 600 .78rem/1.85 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.http-message-card code { font: inherit; }.http-message-card mark { display: inline; padding: .1rem .2rem; border-radius: .2rem; color: inherit; background: transparent; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.http-message-card .line-start { color: #8edff0; background: rgba(17,169,199,.12); }.http-message-card .line-header { color: #b9cdeb; }.http-message-card .line-body { color: #f5d17a; background: rgba(237,185,72,.09); }
.response-message .line-start { color: #73e2c7; background: rgba(47,191,159,.12); }
.message-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; margin: 0 0 2rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .7rem; color: var(--muted); background: #fff; font-size: .78rem; }
.message-legend span { display: inline-flex; align-items: center; gap: .35rem; }.legend-swatch { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; }.legend-swatch.start { background: var(--cyan); }.legend-swatch.header { background: #8ba8cb; }.legend-swatch.body { background: var(--gold); }
.concept-grid.status-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }.status-preview .status-1xx { color: #6b7f96; }.status-preview .status-2xx { color: #188c75; }.status-preview .status-3xx { color: #a66e08; }.status-preview .status-4xx { color: #c85248; }.status-preview .status-5xx { color: #9a3e8e; }
.concept-grid.security-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }.security-pillars .number i { margin-right: .3rem; }
.tls-canvas-wrap { background: #071a31; }.tls-controls .control-button { display: inline-flex; align-items: center; gap: .4rem; }
.http-timeline { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin: 2rem 0; }
.http-timeline::before { content: ""; position: absolute; top: 1.1rem; left: 4%; right: 4%; height: 2px; background: linear-gradient(90deg, #9ab0ca, var(--blue), var(--cyan)); }
.http-timeline article { position: relative; padding: 3.05rem .95rem 1rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; }
.http-timeline article::before { content: ""; position: absolute; z-index: 1; top: .75rem; left: calc(50% - .42rem); width: .84rem; height: .84rem; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #9dbbe4; }
.http-timeline article > span { display: block; color: var(--blue); font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-align: center; }
.http-timeline h3 { margin: .28rem 0 .45rem; font-size: 1rem; text-align: center; }.http-timeline p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.5; }
.version-controls .control-button { display: inline-flex; align-items: center; gap: .4rem; }.version-table td:nth-child(2) { min-width: 9rem; }
.single-study-link { margin-top: 1.6rem; }
.udp-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98) 0%, rgba(8,27,50,.86) 48%, rgba(5,20,39,.38) 100%), url("https://upload.wikimedia.org/wikipedia/commons/e/e5/Network_switches.jpg") center/cover; }
.transport-handshake-canvas, .multicast-canvas { max-height: none; }
.transport-mode-controls .control-button, .distribution-controls .control-button { display: inline-flex; align-items: center; gap: .4rem; }
.transport-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.transport-choice-card { position: relative; overflow: hidden; padding: 1.45rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; box-shadow: 0 12px 28px rgba(30,57,90,.08); }
.transport-choice-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--blue); }
.transport-choice-card.udp-choice::before { background: var(--cyan); }
.transport-choice-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.1rem; border-radius: .82rem; color: #fff; background: linear-gradient(135deg, #165ab9, var(--blue)); font-size: 1.15rem; }
.udp-choice .transport-choice-icon { background: linear-gradient(135deg, #12899f, var(--cyan)); }
.transport-choice-card h3 { margin: .4rem 0 .65rem; font-size: 1.25rem; }
.transport-choice-card > p:not(.eyebrow), .transport-choice-card li { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.transport-choice-card ul { display: grid; gap: .45rem; margin: 1rem 0 0; padding-left: 1.15rem; }
.transport-choice-card li strong { color: var(--navy); }
.multicast-concepts .number i { margin-right: .3rem; }
.protocol-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.protocol-map-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: .9rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.protocol-map-card.udp-path { border-left-color: var(--cyan); }.protocol-map-card.mixed-path { border-left-color: var(--gold); }
.protocol-map-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .72rem; color: var(--blue); background: #eaf3ff; }
.udp-path .protocol-map-icon { color: #11859b; background: #e4f8fb; }.mixed-path .protocol-map-icon { color: #9b6b0b; background: #fff5dd; }
.protocol-map-card h3 { margin: .05rem 0 .4rem; font-size: 1.05rem; }.protocol-map-card p { margin: 0 0 .8rem; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.protocol-layer-line { display: inline-flex; padding: .38rem .55rem; border-radius: .45rem; color: #35516f; background: #eef3f8; font: 750 .73rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.hls-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98) 0%, rgba(8,27,50,.87) 48%, rgba(5,20,39,.4) 100%), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Television_News_Control_Room.png?width=1800") center/cover; }
.hls-pipeline-canvas, .hls-abr-canvas { max-height: none; }
.hls-canvas-wrap { background: linear-gradient(180deg, #fbfdff, #edf6ff); }
.hls-pipeline-controls .control-button, .hls-network-controls .control-button { display: inline-flex; align-items: center; gap: .4rem; }
.hls-foundations .number i { margin-right: .3rem; }
.manifest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.manifest-card { min-width: 0; overflow: hidden; border: 1px solid #243d5c; border-radius: .95rem; background: #0b1f39; box-shadow: 0 15px 32px rgba(13,34,60,.16); }
.manifest-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1rem; color: #dce9f7; border-bottom: 1px solid #294360; font-size: .8rem; font-weight: 800; }
.manifest-head span i { margin-right: .4rem; color: #66d4e8; }.manifest-head > code { padding: .25rem .4rem; border-radius: .35rem; color: #9ee5f1; background: #132d4b; font-size: .72rem; }
.manifest-card pre { min-height: 21rem; margin: 0; padding: 1.15rem; overflow-x: auto; color: #d9e7f6; font: 650 .76rem/1.72 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.manifest-card pre code { font: inherit; }.manifest-card > p { min-height: 5.8rem; margin: 0; padding: 1rem 1.1rem; color: #aec2da; border-top: 1px solid #294360; font-size: .82rem; line-height: 1.55; }.manifest-card > p strong { color: #fff; }
.hls-relationship { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1.25fr; align-items: center; gap: .8rem; margin: 1.8rem 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: .95rem; background: #fff; }
.relationship-master { display: grid; justify-items: center; gap: .35rem; padding: 1rem; border-radius: .75rem; color: var(--blue); background: #edf4ff; }.relationship-master i { font-size: 1.35rem; }.relationship-master span { color: var(--muted); font-size: .72rem; }
.relationship-arrow { color: #9daec1; }
.relationship-variants, .relationship-segments { display: grid; gap: .4rem; }.relationship-variants span, .relationship-segments span { padding: .55rem .65rem; border-radius: .5rem; color: #35516f; background: #eef3f8; font: 750 .73rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.relationship-variants span { border-left: 3px solid var(--cyan); }.relationship-segments span { border-left: 3px solid var(--gold); }
.hls-latency-table td:nth-child(2), .hls-latency-table td:nth-child(3) { min-width: 15rem; }
.browser-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.browser-path-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: .95rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.browser-path-card > span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .8rem; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-size: 1.25rem; }.browser-path-card.mse-path > span { background: linear-gradient(135deg, #d39909, var(--gold)); }
.browser-path-card h3 { margin: .35rem 0 .5rem; font-size: 1.15rem; }.browser-path-card p:not(.eyebrow) { margin: 0 0 .8rem; color: var(--muted); font-size: .88rem; line-height: 1.55; }.browser-path-card div > code { display: block; overflow-x: auto; padding: .65rem .7rem; border-radius: .5rem; color: #bfe7ff; background: #102849; font: 700 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.implementation-note { margin: 1.8rem 0; padding: 1.3rem 1.4rem; border: 1px solid #b9d6ff; border-radius: .9rem; background: #edf5ff; }.implementation-note h3 { margin: 0 0 .85rem; font-size: 1.1rem; }.implementation-note h3 i { margin-right: .4rem; color: var(--blue); }.implementation-note ul { display: grid; gap: .55rem; margin: 0; padding-left: 1.2rem; }.implementation-note li { color: #45627f; font-size: .9rem; line-height: 1.55; }.implementation-note strong { color: var(--navy); }
.hls-not-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin: 1.8rem 0; }.hls-not-grid article { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; }.hls-not-grid article > i { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; border-radius: .7rem; color: var(--blue); background: #eaf3ff; }.hls-not-grid h3 { margin: .05rem 0 .35rem; font-size: 1rem; }.hls-not-grid p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }

.concept-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin: 1.8rem 0; }
.concept-card { padding: 1.3rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }
.concept-card .number { color: var(--blue); font-weight: 850; font-size: .78rem; letter-spacing: .08em; }
.concept-card h3 { margin: .35rem 0 .4rem; font-size: 1.1rem; }
.concept-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.flow-list { display: grid; gap: .7rem; padding: 0; list-style: none; counter-reset: flow; }
.flow-list li { position: relative; padding: 1rem 1rem 1rem 3.35rem; border-left: 3px solid #9ed7e6; background: #fff; border-radius: .35rem .7rem .7rem .35rem; color: var(--muted); line-height: 1.55; }
.flow-list li::before { content: counter(flow); counter-increment: flow; position: absolute; display: grid; place-items: center; left: .85rem; top: 1rem; width: 1.55rem; height: 1.55rem; border-radius: 50%; color: #fff; background: var(--cyan); font-weight: 800; font-size: .78rem; }
.flow-list strong { color: var(--ink); }

.comparison { width: 100%; margin: 1.8rem 0; border-collapse: collapse; overflow: hidden; border: 1px solid var(--line); border-radius: .9rem; background: white; font-size: .91rem; }
.comparison th, .comparison td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.45; }
.comparison tr:last-child td { border-bottom: 0; }
.comparison th { color: #284668; background: #edf4fc; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.comparison td:first-child { color: var(--navy); font-weight: 800; }
.layer-key { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.3rem 0 0; color: var(--muted); font-size: .83rem; }
.key-dot { display: inline-block; width: .72rem; height: .72rem; margin-right: .3rem; border-radius: 50%; vertical-align: -0.05em; }
.knowledge-check { padding: 1.6rem; border-radius: 1rem; background: var(--navy); color: #fff; }
.knowledge-check h2 { color: #fff; font-size: 1.55rem; }
.knowledge-check p { color: #cedcf0; line-height: 1.55; }
.answer { display: none; margin-top: 1rem; padding: .8rem 1rem; border-left: 3px solid var(--gold); background: rgba(255,255,255,.1); color: #fff; line-height: 1.55; }
.answer.is-visible { display: block; }
.knowledge-check .control-button { color: #fff; border-color: #7695b9; background: transparent; }
.knowledge-check .control-button:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.resource-card { padding: 1.35rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }
.resource-card h3 { margin: 0 0 .35rem; color: var(--navy); font-size: 1.05rem; }
.resource-card p { margin: 0 0 .85rem; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.resource-card ul { display: grid; gap: .6rem; margin: 0; padding-left: 1.1rem; }
.resource-card li { padding-left: .1rem; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.resource-card a { color: var(--blue); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.media-gallery { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin: 1.8rem 0; }
.media-card { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .9rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.08); }
.media-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e7edf5; }
.media-card figcaption { padding: 1rem 1.1rem 1.1rem; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.media-card figcaption strong { display: block; margin-bottom: .25rem; color: var(--navy); font-size: .98rem; }
.media-card figcaption a { color: var(--blue); font-weight: 700; }
.explore-grid { display: grid; gap: .72rem; margin: 1.4rem 0; }
.explore-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid #cfdced; border-radius: .8rem; color: var(--navy); background: #fff; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.explore-link:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 10px 22px rgba(23,105,224,.1); }
.explore-link > i { color: #91a0b5; font-size: .85rem; }.explore-link strong, .explore-link small { display: block; }.explore-link strong { font-size: .96rem; }.explore-link small { margin-top: .2rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.explore-icon { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: .68rem; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-size: 1.05rem; }
.lesson-footer { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.site-footer { padding: 28px 30px 24px; background: #fff; border-top: 1px solid #e2e7f0; transition: margin-left .24s ease; }
.footer-credit { max-width: 1120px; margin: 0 auto; padding-top: 12px; border-top: 1px solid #e7eaf2; color: #59647b; font-size: 14px; font-weight: 700; line-height: 1.6; }
.footer-credit a { color: #245b9f; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.footer-credit a:hover { color: var(--blue); }
.license-icons { display: inline-flex; align-items: center; gap: .2em; margin-left: .2em; vertical-align: text-bottom; }
.license-icons img { width: 1em; height: 1em; max-width: 1em; max-height: 1em; }

/* Infraestrutura e Cloud */
.infrastructure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.infrastructure-grid article { min-width: 0; padding: 1.35rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.infrastructure-grid article > i { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .8rem; border-radius: .75rem; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-size: 1.2rem; }
.infrastructure-grid h3 { margin: 0 0 .45rem; font-size: 1.05rem; color: var(--navy); }
.infrastructure-grid p { margin: 0; color: var(--muted); line-height: 1.62; }
.infrastructure-steps { display: grid; gap: .8rem; margin: 1.8rem 0; padding: 0; list-style: none; counter-reset: infrastructure-step; }
.infrastructure-steps li { position: relative; padding: 1rem 1.1rem 1rem 4rem; border: 1px solid #cbdbee; border-radius: .8rem; background: #fff; color: var(--muted); line-height: 1.6; }
.infrastructure-steps li::before { position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 900; content: counter(infrastructure-step); counter-increment: infrastructure-step; }
.infrastructure-steps strong { color: var(--navy); }
.infra-command { margin: 1.5rem 0; padding: 1.15rem 1.25rem; overflow-x: auto; border-radius: .8rem; color: #d7efff; background: #102849; font: 650 .9rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
@media (max-width: 850px) { .infrastructure-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .infrastructure-grid { grid-template-columns: 1fr; } }

/* Escala de leitura ampliada: títulos preservados, textos e laboratórios maiores. */
.web-navigation-ready .article { max-width: 1280px; }
.article { max-width: 1280px; padding: clamp(2.6rem, 5vw, 5.2rem); }
.section { margin-bottom: 7rem; }
.lead { max-width: 56rem; }
.article .section p:not(.eyebrow) { font-size: 1.04rem; line-height: 1.7; }
.article .section p.lead { max-width: 56rem; font-size: 1.22rem; line-height: 1.78; }
.article .section li { font-size: 1rem; line-height: 1.62; }
.body-copy { max-width: 58rem; font-size: 1.04rem; line-height: 1.78; }
.callout { max-width: 64rem; padding: 1.4rem 1.55rem; font-size: 1.02rem; line-height: 1.68; }
.callout-icon { width: 2.3rem; height: 2.3rem; }
.concept-grid, .resources, .media-gallery, .transport-choice-grid, .protocol-map, .manifest-grid, .browser-path-grid { gap: 1.25rem; }
.concept-card, .resource-card, .transport-choice-card { padding: 1.6rem; }
.protocol-map-card, .browser-path-card { padding: 1.45rem; }
.flow-list { gap: .85rem; }.flow-list li { padding: 1.15rem 1.2rem 1.15rem 3.65rem; }.flow-list li::before { top: 1.15rem; }
.comparison { font-size: 1rem; }.comparison th, .comparison td { padding: 1.05rem 1.15rem; line-height: 1.58; }.comparison th { font-size: .82rem; }
.resource-card p, .resource-card li { font-size: 1rem; }
.diagram-card { width: calc(100% + 3rem); margin: 2.6rem -1.5rem; border-radius: 1.1rem; }
.diagram-header { padding: 1.45rem 1.65rem; }.diagram-header p { font-size: .95rem; line-height: 1.55; }
.canvas-wrap { padding: clamp(1rem, 2.5vw, 2rem); }
.diagram-card canvas { max-height: none; }
.diagram-controls { gap: .75rem; padding: 0 1.65rem 1.4rem; }
.control-button { padding: .68rem .92rem; font-size: .92rem; }
.canvas-caption { padding: 1.2rem 1.65rem 1.4rem; font-size: 1rem; line-height: 1.68; }
.knowledge-check { padding: 2rem; }.knowledge-check p { font-size: 1.04rem; }
.explore-link { padding: 1.15rem 1.25rem; }.explore-link small { font-size: .9rem; }
.media-card figcaption { padding: 1.2rem 1.3rem 1.3rem; font-size: .98rem; }
.lesson-footer { padding-top: 2rem; }

/* Navegação compartilhada: segue o padrão visual de laboratórios didáticos, mas é própria desta trilha. */
.web-sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 340px; overflow: hidden; color: #d4dced; background: #202840; border-right: 1px solid #39425f; box-shadow: 8px 0 30px rgba(24,31,53,.14); transition: width .24s ease, transform .24s ease; }
.web-sidebar-head { display: flex; align-items: center; height: 76px; padding: 12px 15px; border-bottom: 1px solid #3a435f; }
.web-brand { display: flex; align-items: center; min-width: 0; gap: 12px; color: #fff; text-decoration: none; }
.web-brand-mark { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; color: #54d6f2; background: #101c38; border: 1px solid #4377ba; font-size: 23px; }
.web-brand-name { min-width: 190px; font-size: 18px; font-weight: 850; letter-spacing: -.03em; white-space: nowrap; }
.web-sidebar-toggle { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; margin-left: auto; border: 1px solid #7770ef; border-radius: 9px; color: #fff; background: #4e46e5; font-size: 25px; line-height: 1; cursor: pointer; }
.web-sidebar-toggle:hover { background: #655df1; }
.web-sidebar-scroll { height: calc(100vh - 76px); padding: 18px 14px 28px; overflow-y: auto; overflow-x: hidden; }
.web-menu-group { margin-bottom: 18px; }.web-menu-group h2 { margin: 0; padding: 5px 8px 8px; color: #9ba6c0; font: 800 11px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .075em; white-space: nowrap; }
.web-menu-link, .web-menu-branch summary { display: flex; align-items: flex-start; min-height: 48px; gap: 12px; margin: 4px 0; padding: 8px 9px; border-radius: 9px; color: #d1d8e8; text-decoration: none; font-size: 14.5px; font-weight: 760; line-height: 1.3; white-space: normal; }
.web-menu-link:hover, .web-menu-branch summary:hover { color: #fff; background: #313a55; }.web-menu-link.active { color: #fff; background: #5148db; }.web-menu-link.is-planned { color: #c4ccdc; cursor: default; }.web-menu-link.is-planned:hover { background: transparent; }
.web-menu-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; color: #c9d2e7; background: #39435f; font-size: 14px; font-weight: 800; }.web-menu-link.active .web-menu-icon { color: #fff; background: rgba(255,255,255,.18); }
.web-menu-label { flex: 1 1 auto; min-width: 0; padding-top: 5px; overflow: visible; white-space: normal; overflow-wrap: anywhere; }.web-soon { flex: 0 0 auto; align-self: center; margin-left: .25rem; color: #8f9ab5; font-size: 10px; font-weight: 700; }.web-menu-branch { margin: 4px 0; }.web-menu-branch summary { list-style: none; cursor: pointer; }.web-menu-branch summary::-webkit-details-marker { display: none; }.web-branch-arrow { flex: 0 0 auto; margin-left: auto; color: #a9b4cb; font-size: 22px; transition: transform .2s; }.web-menu-branch[open] .web-branch-arrow { transform: rotate(180deg); }.web-submenu { display: grid; gap: 3px; margin: 3px 0 7px 23px; padding: 5px 0 5px 17px; border-left: 1px solid #46516d; }.web-submenu-item { color: #aeb8ce; font-size: 13px; font-weight: 700; line-height: 1.5; }
.web-topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: flex-end; min-height: 76px; padding: 12px 30px; background: rgba(247,249,252,.94); border-bottom: 1px solid #dfe4ef; backdrop-filter: blur(14px); }.web-topbar-actions { display: flex; align-items: center; gap: 10px; }.web-topbar-action { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 14px; border: 1px solid #cfd7e4; border-radius: 9px; color: #34425a; background: #fff; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }.web-topbar-action:hover { color: var(--blue); border-color: var(--blue); background: #edf4ff; }.web-mobile-trigger { display: none; }
.web-navigation-ready .course-home, .web-navigation-ready .site-header, .web-navigation-ready .lesson-main, .web-navigation-ready .site-footer { margin-left: 340px; }.web-navigation-ready .lesson-main { min-width: 0; }.web-navigation-ready .page-grid { display: block; max-width: none; margin: 0; }.web-navigation-ready .lesson-nav, .web-navigation-ready .topbar { display: none; }.web-navigation-ready .article { max-width: 1280px; margin: 0 auto; }.web-navigation-ready .hero { min-height: min(620px, 78vh); }
.web-navigation-ready.web-sidebar-collapsed .web-sidebar { width: 76px; }.web-navigation-ready.web-sidebar-collapsed .course-home, .web-navigation-ready.web-sidebar-collapsed .site-header, .web-navigation-ready.web-sidebar-collapsed .lesson-main, .web-navigation-ready.web-sidebar-collapsed .site-footer { margin-left: 76px; }.web-navigation-ready.web-sidebar-collapsed .web-brand-name, .web-navigation-ready.web-sidebar-collapsed .web-menu-group h2, .web-navigation-ready.web-sidebar-collapsed .web-menu-label, .web-navigation-ready.web-sidebar-collapsed .web-soon, .web-navigation-ready.web-sidebar-collapsed .web-branch-arrow { opacity: 0; pointer-events: none; }.web-navigation-ready.web-sidebar-collapsed .web-menu-label { flex-basis: 0; width: 0; padding-top: 0; overflow: hidden; white-space: nowrap; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar-head { padding: 12px 15px; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar-toggle { display: none; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar-scroll { padding: 18px 14px; }.web-navigation-ready.web-sidebar-collapsed .web-menu-link, .web-navigation-ready.web-sidebar-collapsed .web-menu-branch summary { align-items: center; gap: 0; }.web-navigation-ready.web-sidebar-collapsed .web-menu-branch[open] .web-submenu { display: none; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover { width: 340px; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-sidebar-toggle { display: grid; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-brand-name, .web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-menu-group h2, .web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-menu-label, .web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-soon, .web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-branch-arrow { opacity: 1; pointer-events: auto; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-menu-label { flex-basis: auto; width: auto; padding-top: 5px; overflow: visible; white-space: normal; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-menu-link, .web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-menu-branch summary { align-items: flex-start; gap: 12px; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-menu-branch[open] .web-submenu { display: grid; }
.web-sidebar-backdrop { display: none; }

/* Títulos extensos permanecem totalmente visíveis quando o menu está aberto. */
.web-menu-label { display: block; max-width: none; max-height: none; text-overflow: clip; -webkit-line-clamp: unset; }
.web-menu-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 3px; }
.web-menu-copy .web-menu-label { width: auto; padding-top: 3px; overflow: visible; white-space: normal; overflow-wrap: break-word; }
.web-menu-copy .web-soon { justify-self: start; align-self: auto; margin: 0; padding: 2px 7px; border-radius: 999px; background: #303a55; line-height: 1.3; }
.web-navigation-ready.web-sidebar-collapsed .web-menu-copy { flex: 0 0 0; width: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover .web-menu-copy { flex: 1 1 auto; width: auto; overflow: visible; opacity: 1; pointer-events: auto; }

@media (min-width: 901px) {
  .web-sidebar { width: 370px; }
  .web-navigation-ready .course-home, .web-navigation-ready .site-header, .web-navigation-ready .lesson-main, .web-navigation-ready .site-footer { margin-left: 370px; }
  .web-navigation-ready.web-sidebar-collapsed .course-home, .web-navigation-ready.web-sidebar-collapsed .site-header, .web-navigation-ready.web-sidebar-collapsed .lesson-main, .web-navigation-ready.web-sidebar-collapsed .site-footer { margin-left: 76px; }
  .web-navigation-ready.web-sidebar-collapsed .web-sidebar { width: 76px; }
  .web-navigation-ready.web-sidebar-collapsed .web-sidebar:hover { width: 370px; }
}

@media (max-width: 800px) { .page-grid { display: block; } .lesson-nav { position: static; height: auto; padding: 1rem; border-right: 0; border-bottom: 1px solid var(--line); } .lesson-nav ol { display: flex; gap: .3rem; overflow-x: auto; } .lesson-nav a { white-space: nowrap; } .lesson-nav h2 { display: none; } .article { padding: 2.5rem 1.15rem; } .section { margin-bottom: 5.5rem; }.diagram-card { width: 100%; margin: 2.2rem 0; }.hero { min-height: 540px; padding: 2rem 1.2rem; } .concept-grid, .resources, .media-gallery, .http-message-pair, .concept-grid.security-pillars, .concept-grid.status-preview, .transport-choice-grid, .protocol-map, .manifest-grid, .browser-path-grid, .hls-not-grid { grid-template-columns: 1fr; }.hls-relationship { grid-template-columns: 1fr; justify-items: stretch; }.relationship-arrow { justify-self: center; transform: rotate(90deg); }.manifest-card pre { min-height: 0; }.http-timeline { grid-template-columns: 1fr; }.http-timeline::before { top: 1rem; bottom: 1rem; left: 1.35rem; right: auto; width: 2px; height: auto; }.http-timeline article { padding: 1rem 1rem 1rem 3.2rem; }.http-timeline article::before { top: 1.15rem; left: .94rem; }.http-timeline article > span, .http-timeline h3 { text-align: left; }.orbit-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }.orbit-pause { margin-left: 0; }.simulation-badge { display: none; }.topbar .lesson-crumb { display: none; } .comparison { display: block; overflow-x: auto; white-space: normal; } }
@media (max-width: 900px) { .web-sidebar, .web-navigation-ready.web-sidebar-collapsed .web-sidebar { width: min(340px, 88vw); transform: translateX(-104%); }.web-sidebar.mobile-open { transform: none; }.web-sidebar-toggle { display: none; }.web-sidebar-backdrop.visible { position: fixed; z-index: 29; inset: 0; display: block; background: rgba(15, 25,43,.54); }.web-navigation-ready .course-home, .web-navigation-ready .site-header, .web-navigation-ready .lesson-main, .web-navigation-ready .site-footer, .web-navigation-ready.web-sidebar-collapsed .course-home, .web-navigation-ready.web-sidebar-collapsed .site-header, .web-navigation-ready.web-sidebar-collapsed .lesson-main, .web-navigation-ready.web-sidebar-collapsed .site-footer { margin-left: 0; }.web-topbar { min-height: 64px; padding: 10px 16px; }.web-mobile-trigger { position: fixed; z-index: 22; left: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #cbd5e2; border-radius: 9px; color: var(--navy); background: #fff; box-shadow: 0 7px 18px rgba(25,42,68,.12); cursor: pointer; }.web-topbar-actions { margin-left: 52px; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar.mobile-open .web-brand-name, .web-navigation-ready.web-sidebar-collapsed .web-sidebar.mobile-open .web-menu-group h2, .web-navigation-ready.web-sidebar-collapsed .web-sidebar.mobile-open .web-menu-label, .web-navigation-ready.web-sidebar-collapsed .web-sidebar.mobile-open .web-soon, .web-navigation-ready.web-sidebar-collapsed .web-sidebar.mobile-open .web-branch-arrow { opacity: 1; pointer-events: auto; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar.mobile-open .web-menu-label { flex-basis: auto; width: auto; padding-top: 5px; overflow: visible; white-space: normal; }.web-navigation-ready.web-sidebar-collapsed .web-sidebar.mobile-open .web-menu-link, .web-navigation-ready.web-sidebar-collapsed .web-sidebar.mobile-open .web-menu-branch summary { align-items: flex-start; gap: 12px; } }
@media (max-width: 900px) { .web-sidebar, .web-navigation-ready.web-sidebar-collapsed .web-sidebar { width: min(370px, 92vw); }.web-navigation-ready.web-sidebar-collapsed .web-sidebar.mobile-open .web-menu-copy { flex: 1 1 auto; width: auto; overflow: visible; opacity: 1; pointer-events: auto; } }
@media (max-width: 560px) { body { overflow-x: hidden; }.web-topbar-action { justify-content: center; width: 40px; min-height: 40px; padding: 0; }.web-topbar-action span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }.web-topbar-actions { gap: 7px; }.web-navigation-ready .hero { padding-bottom: 4.5rem; }.hero-credit { right: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); text-align: right; }.orbit-readout { grid-template-columns: 1fr; }.orbit-controls .control-button { flex: 1 1 100%; justify-content: center; } }
@media (max-width: 800px) { .diagram-card .canvas-wrap { overflow-x: auto; }.http-flow-canvas, .tls-canvas, .version-canvas, .orbit-canvas, .transport-handshake-canvas, .multicast-canvas, .hls-pipeline-canvas, .hls-abr-canvas { min-width: 720px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Páginas complementares de Fundamentos da Web. */
.realtime-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.84) 52%, rgba(5,20,39,.3)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Internet_of_Things.jpg?width=1800") center/cover; }
.client-server-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.86) 52%, rgba(5,20,39,.32)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Servers_in_a_Rack.jpg?width=1800") center/cover; }
.messages-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.86) 52%, rgba(5,20,39,.32)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Server_Rack_with_Spaghetti-Like_Mass_of_Network_Cables.jpg?width=1800") center/cover; }
.state-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.86) 52%, rgba(5,20,39,.32)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Datacenter_Rack.jpg?width=1800") center/cover; }
.dns-hosting-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.84) 52%, rgba(5,20,39,.3)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Rear_of_rack_at_NERSC_data_center.jpg?width=1800") center/cover; }
.web-foundation-canvas { max-height: none; }
.protocol-strip { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.2rem 0 2rem; }
.protocol-strip span { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border: 1px solid #cbd9e9; border-radius: 999px; color: #35516f; background: #fff; font-size: .88rem; font-weight: 800; }
.protocol-strip i { color: var(--blue); }
.code-window { margin: 1.7rem 0; overflow: hidden; border: 1px solid #294360; border-radius: .95rem; background: #0b1f39; box-shadow: 0 15px 32px rgba(13,34,60,.14); }
.code-window-head { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; color: #b9cde3; border-bottom: 1px solid #294360; font-size: .82rem; font-weight: 800; }
.code-window-head i { margin-right: .4rem; color: #65d5eb; }
.code-window pre { margin: 0; padding: 1.2rem; overflow-x: auto; color: #d9e7f6; font: 650 .88rem/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; }
.code-window .code-method { color: #72dfc5; }.code-window .code-field { color: #8edff0; }.code-window .code-value { color: #f3cf76; }.code-window .code-comment { color: #8da4bd; }
.decision-grid, .record-grid, .responsibility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 2rem 0; }
.decision-card, .record-card, .responsibility-card { min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: .95rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.decision-card > i, .record-card > i, .responsibility-card > i { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .9rem; border-radius: .75rem; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.decision-card h3, .record-card h3, .responsibility-card h3 { margin: .25rem 0 .5rem; font-size: 1.12rem; }
.decision-card p, .record-card p, .responsibility-card p { margin: 0; color: var(--muted); line-height: 1.62; }
.topic-tree { display: grid; gap: .65rem; margin: 1.4rem 0; }
.topic-tree div { display: grid; grid-template-columns: minmax(11rem, .8fr) 1.5fr; gap: 1rem; padding: .9rem 1rem; border-left: 4px solid var(--cyan); border-radius: .4rem .75rem .75rem .4rem; background: #fff; }
.topic-tree code { color: var(--blue); font-weight: 850; }.topic-tree span { color: var(--muted); line-height: 1.55; }
.mqtt-stage-controls { align-items: center; }
.mqtt-stage-controls .control-button { display: inline-flex; align-items: center; gap: .45rem; }
.mqtt-stage-controls .mqtt-play-control { margin-left: auto; color: #fff; border-color: #16886f; background: #16886f; }
.mqtt-stage-controls .mqtt-play-control:hover { border-color: #0f6e5a; background: #0f6e5a; }
.mqtt-stage-controls .mqtt-reset-control { color: #596b80; border-color: #cbd5e2; background: #f7f9fc; }
.mqtt-stage-controls .mqtt-reset-control:hover { color: #fff; border-color: #596b80; background: #596b80; }
.mqtt-cycle { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; margin: 2rem 0; }
.mqtt-cycle::before { position: absolute; z-index: 0; top: 1.65rem; right: 8%; left: 8%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--mint)); content: ""; }
.mqtt-cycle article { position: relative; z-index: 1; min-width: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; box-shadow: 0 9px 22px rgba(30,57,90,.06); }
.mqtt-cycle-icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; margin-bottom: .9rem; border: 5px solid #f7f9fc; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 0 0 1px #cbd9e9; }
.mqtt-cycle article > div > strong { color: var(--blue); font: 850 .76rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.mqtt-cycle h3 { margin: .3rem 0 .45rem; font-size: 1.02rem; }
.mqtt-cycle p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.58; }
.mqtt-cycle code { color: #245b90; font-size: .82em; overflow-wrap: anywhere; }
.mqtt-decoupling-callout { margin: 1.6rem 0 2rem; }
.message-anatomy { display: grid; gap: .55rem; margin: 1.5rem 0; }
.message-part { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .75rem; background: #fff; }
.message-part strong { color: var(--navy); }.message-part span { color: var(--muted); line-height: 1.58; }
.status-ribbon { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; margin: 1.8rem 0; border: 1px solid var(--line); border-radius: .9rem; }
.status-ribbon div { padding: 1.1rem .85rem; background: #fff; border-right: 1px solid var(--line); }.status-ribbon div:last-child { border-right: 0; }
.status-ribbon strong { display: block; margin-bottom: .3rem; font-size: 1.2rem; }.status-ribbon span { color: var(--muted); font-size: .83rem; line-height: 1.4; }
.status-ribbon div:nth-child(1) strong { color: #607892; }.status-ribbon div:nth-child(2) strong { color: #16886f; }.status-ribbon div:nth-child(3) strong { color: #a66e08; }.status-ribbon div:nth-child(4) strong { color: #ca5146; }.status-ribbon div:nth-child(5) strong { color: #983f8c; }
.cookie-attributes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0; }
.cookie-attributes code { padding: .55rem .7rem; border: 1px solid #c6d6e9; border-radius: .55rem; color: #234f7c; background: #eef5ff; font-weight: 800; }
@media (max-width: 900px) {
  .decision-grid, .record-grid, .responsibility-grid { grid-template-columns: 1fr; }
  .mqtt-cycle { grid-template-columns: 1fr 1fr; }
  .mqtt-cycle::before { display: none; }
  .mqtt-stage-controls .mqtt-play-control { margin-left: 0; }
  .status-ribbon { grid-template-columns: 1fr 1fr; }
  .status-ribbon div { border-bottom: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .mqtt-cycle { grid-template-columns: 1fr; }
  .topic-tree div, .message-part { grid-template-columns: 1fr; gap: .35rem; }
  .status-ribbon { grid-template-columns: 1fr; }
  .lesson-footer { align-items: stretch; flex-direction: column; }
  .lesson-footer .primary-button, .lesson-footer .outline-button { width: 100%; text-align: center; }
}
@media (max-width: 800px) {
  .web-foundation-canvas { min-width: 720px; }
}

/* HTML, DOM e pipeline de renderização. */
.dom-render-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.88) 50%, rgba(5,20,39,.38)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/First_HTML_example.png?width=1800") center/cover; }
.dom-tree-canvas, .render-pipeline-canvas, .resource-discovery-canvas, .browser-cache-canvas { max-height: none; }
.dom-canvas-wrap { background: linear-gradient(180deg, #f9fcff, #edf5ff); }
.dom-lab-controls, .render-stage-controls, .resource-stage-controls, .cache-scenario-controls { align-items: center; }
.dom-lab-controls .control-button, .render-stage-controls .control-button, .resource-stage-controls .control-button, .cache-scenario-controls .control-button { display: inline-flex; align-items: center; gap: .45rem; }
.dom-step-counter { margin-left: auto; padding: .55rem .72rem; border-radius: 999px; color: #42617f; background: #edf3fa; font-size: .84rem; font-weight: 800; }
.resource-code-window pre { font-size: .94rem; }
.resource-initiator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.resource-initiator-grid article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; min-width: 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: .95rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.resource-initiator-grid article > span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .8rem; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.resource-initiator-grid h3 { margin: .25rem 0 .45rem; font-size: 1.12rem; }
.resource-initiator-grid article p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.resource-initiator-grid code { color: #245b90; font-size: .88em; overflow-wrap: anywhere; }
.origin-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.origin-facts article { min-width: 0; padding: 1.45rem; border: 1px solid var(--line); border-top: 4px solid var(--cyan); border-radius: .9rem; background: #fff; }
.origin-facts article > i { margin-bottom: .8rem; color: var(--blue); font-size: 1.45rem; }
.origin-facts h3 { margin: 0 0 .55rem; font-size: 1.1rem; }
.origin-facts p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.origin-facts code { color: #245b90; font-size: .86em; overflow-wrap: anywhere; }
.cache-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.cache-rule-grid article { min-width: 0; padding: 1.35rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; box-shadow: 0 9px 22px rgba(30,57,90,.05); }
.cache-rule-grid article > code { display: block; margin: 0 0 .9rem; padding: .6rem .7rem; overflow-x: auto; border-radius: .55rem; color: #bfe9f2; background: #102849; font: 750 .79rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.cache-rule-grid h3 { margin: 0 0 .45rem; font-size: 1.05rem; }
.cache-rule-grid p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.63; }
.cache-layers { display: grid; gap: .85rem; margin: 2rem 0; }
.cache-layers article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; }
.cache-layers article > span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: #fff; background: var(--blue); }
.cache-layers article:nth-child(2) > span { background: var(--mint); }.cache-layers article:nth-child(3) > span { background: var(--cyan); }
.cache-layers h3 { margin: 0 0 .35rem; font-size: 1.08rem; }
.cache-layers p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.62; }
.cache-layers code { color: #245b90; font-size: .86em; }
.dom-node-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.dom-node-grid article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: .95rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.dom-node-symbol { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .8rem; color: #fff; background: var(--blue); }
.dom-node-symbol.doctype-node { background: #8259c8; }.dom-node-symbol.element-node { background: var(--mint); }.dom-node-symbol.text-node { color: #5d4510; background: var(--gold); }
.dom-node-grid h3 { margin: .25rem 0 .45rem; font-size: 1.12rem; }
.dom-node-grid article p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.62; }
.dom-node-grid code { color: #245b90; font-size: .88em; }
.dom-source-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin: 2rem 0; }
.dom-source-compare .code-window { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.dom-source-compare .code-window pre { flex: 1 1 auto; min-height: 17rem; }
.dom-source-compare .code-window > p { min-height: 6.8rem; margin: 0; padding: 1rem 1.15rem; color: #b3c9df; border-top: 1px solid #294360; font-size: .9rem; line-height: 1.62; }
.render-stage-table td:nth-child(2), .render-stage-table td:nth-child(3) { min-width: 17rem; }
.script-behavior-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.script-behavior-grid article { position: relative; min-width: 0; padding: 1.45rem; overflow: hidden; border: 1px solid var(--line); border-radius: .95rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.script-behavior-grid article::before { position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--blue), var(--cyan)); content: ""; }
.script-behavior-grid article > span { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .9rem; border-radius: .75rem; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.script-behavior-grid h3 { margin: .28rem 0 .55rem; font-size: 1.15rem; }
.script-behavior-grid article > p:not(.eyebrow) { margin: 0 0 1rem; color: var(--muted); font-size: .94rem; line-height: 1.62; }
.script-behavior-grid article > code { display: block; overflow-x: auto; padding: .7rem .8rem; border-radius: .55rem; color: #bfe9f2; background: #102849; font: 700 .77rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.browser-event-line { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .85rem; margin: 2rem 0 1.2rem; }
.browser-event-line article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; }
.browser-event-line article > span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 850; }
.browser-event-line strong, .browser-event-line small { display: block; }.browser-event-line strong { color: var(--navy); }.browser-event-line small { margin-top: .22rem; color: var(--muted); line-height: 1.45; }
.browser-event-line > i { color: #9bacc0; }
.dom-live-lab { display: grid; grid-template-columns: .8fr 1fr 1.25fr; gap: 1rem; margin: 2rem 0; }
.dom-live-controls, .dom-live-preview, .dom-live-snapshot { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .95rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.dom-live-controls { padding: 1.3rem; }.dom-live-controls h3 { margin: .3rem 0 1rem; }
.dom-live-controls .control-button { display: flex; align-items: center; gap: .48rem; width: 100%; margin: .55rem 0; text-align: left; }
.dom-mutation-log { margin-top: 1.1rem; padding: .9rem; border-left: 4px solid var(--cyan); border-radius: .4rem .65rem .65rem .4rem; background: #edf8fb; }
.dom-mutation-log strong, .dom-mutation-log span { display: block; }.dom-mutation-log strong { color: #176278; font-size: .88rem; }.dom-mutation-log span { margin-top: .3rem; color: #55758a; font-size: .8rem; line-height: 1.45; }
.dom-browser-bar { display: flex; align-items: center; gap: .35rem; min-height: 3rem; padding: .75rem .9rem; color: #d9e7f6; background: #102849; }
.dom-browser-bar > span { width: .65rem; height: .65rem; border-radius: 50%; background: #f56c61; }.dom-browser-bar > span:nth-child(2) { background: #edb948; }.dom-browser-bar > span:nth-child(3) { background: #27b68b; }
.dom-browser-bar strong { margin-left: .45rem; font-size: .8rem; }
.dom-preview-page { min-height: 22rem; padding: 1.5rem; background: linear-gradient(145deg, #f8fbff, #edf5ff); }
.dom-preview-page h3 { margin: 0 0 1rem; font-size: 1.4rem; }
.dom-preview-page ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.dom-preview-page li { padding: .8rem .9rem; border: 1px solid #cddbea; border-radius: .65rem; color: #34516f; background: #fff; transition: color .2s, border-color .2s, background .2s, transform .2s; }
.dom-preview-page li.is-featured { color: #654c1c; border-color: #e5ba58; background: #fff6df; transform: translateX(.35rem); }
.dom-live-snapshot { color: #d9e7f6; background: #0b1f39; border-color: #294360; }
.dom-live-snapshot pre { min-height: 22rem; margin: 0; padding: 1.1rem; overflow: auto; color: #9fe1ee; font: 650 .8rem/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.dom-live-snapshot code { font: inherit; }

@media (max-width: 1050px) {
  .dom-live-lab { grid-template-columns: 1fr 1fr; }
  .dom-live-snapshot { grid-column: 1 / -1; }
  .origin-facts, .cache-rule-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .dom-tree-canvas, .render-pipeline-canvas, .resource-discovery-canvas, .browser-cache-canvas { min-width: 900px; }
  .dom-node-grid, .dom-source-compare, .script-behavior-grid, .dom-live-lab, .resource-initiator-grid, .origin-facts, .cache-rule-grid { grid-template-columns: 1fr; }
  .dom-live-snapshot { grid-column: auto; }
  .browser-event-line { grid-template-columns: 1fr; }
  .browser-event-line > i { justify-self: center; transform: rotate(90deg); }
  .dom-step-counter { width: 100%; margin-left: 0; text-align: center; }
}

/* História da Internet, padrões Web e arquiteturas de navegação. */
.internet-history-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.88) 51%, rgba(5,20,39,.35)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Arpanet%20logical%20map%2C%20march%201977.png?width=1800") center/cover; }
.www-history-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.86) 51%, rgba(5,20,39,.28)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/First%20Web%20Server.jpg?width=1800") center/cover; }
.web-generations-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.88) 52%, rgba(5,20,39,.32)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/NCSA%20Mosaic%20Browser%20Screenshot.png?width=1800") center/cover; }
.mpa-spa-pwa-hero::before { background: linear-gradient(90deg, rgba(5,18,37,.98), rgba(8,27,50,.88) 52%, rgba(5,20,39,.34)), url("https://commons.wikimedia.org/wiki/Special:Redirect/file/From%20WebApp%20to%20PWA.png?width=1800") center/cover; }
.history-timeline-canvas, .www-stack-canvas, .web-generation-canvas, .web-milestones-canvas, .navigation-architecture-canvas, .pwa-offline-canvas { max-height: none; }
.history-canvas-wrap { background: linear-gradient(180deg, #f9fcff, #edf5ff); }
.history-year-controls, .www-stage-controls, .generation-controls, .navigation-mode-controls, .pwa-network-controls { align-items: center; }
.history-year-controls .control-button, .www-stage-controls .control-button, .generation-controls .control-button, .navigation-mode-controls .control-button, .pwa-network-controls .control-button { display: inline-flex; align-items: center; gap: .45rem; }

.history-layer-stack { position: relative; display: grid; gap: .85rem; max-width: 55rem; margin: 2rem 0; }
.history-layer-stack::before { position: absolute; top: 1.5rem; bottom: 1.5rem; left: 2rem; width: 3px; background: linear-gradient(var(--blue), var(--cyan), var(--mint)); content: ""; }
.history-layer-stack article { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; min-width: 0; margin-left: 4rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; box-shadow: 0 9px 22px rgba(30,57,90,.05); }
.history-layer-stack article > span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .8rem; color: #fff; background: var(--blue); }
.history-layer-stack article:nth-child(2) > span { background: var(--cyan); }.history-layer-stack article:nth-child(3) > span { background: var(--mint); }
.history-layer-stack h3 { margin: .2rem 0 .35rem; font-size: 1.1rem; }.history-layer-stack p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.6; }
.history-concept-grid, .history-problem-grid, .open-standard-grid, .web-pillar-grid, .architecture-definition-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.history-concept-grid article, .history-problem-grid article, .open-standard-grid article, .web-pillar-grid article, .architecture-definition-grid article { min-width: 0; padding: 1.45rem; border: 1px solid var(--line); border-radius: .95rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.history-concept-grid article > span, .web-pillar-grid article > span, .architecture-definition-grid article > span { display: grid; place-items: center; width: 3.2rem; min-width: 3.2rem; height: 3.2rem; margin-bottom: .85rem; border-radius: .8rem; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-weight: 900; }
.history-problem-grid article > i, .open-standard-grid article > i { margin-bottom: .8rem; color: var(--blue); font-size: 1.5rem; }
.history-concept-grid h3, .history-problem-grid h3, .open-standard-grid h3, .web-pillar-grid h3, .architecture-definition-grid h3 { margin: .2rem 0 .5rem; font-size: 1.1rem; }
.history-concept-grid p, .history-problem-grid p, .open-standard-grid p, .web-pillar-grid p, .architecture-definition-grid p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.64; }
.web-pillar-grid code { display: block; margin-top: .9rem; padding: .65rem .7rem; overflow-x: auto; border-radius: .55rem; color: #bfe9f2; background: #102849; font: 700 .76rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.history-media-gallery { align-items: stretch; }.history-evidence-card { padding: 1.6rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }
.history-evidence-card > i { margin-bottom: 1rem; color: var(--blue); font-size: 1.7rem; }.history-evidence-card h3 { margin: .3rem 0 .65rem; }.history-evidence-card > p:not(.eyebrow), .history-evidence-card li { color: var(--muted); line-height: 1.65; }.history-evidence-card ul { display: grid; gap: .45rem; padding-left: 1.15rem; }

.historical-timeline { position: relative; display: grid; gap: 1rem; margin: 2rem 0; }
.historical-timeline::before { position: absolute; top: 1rem; bottom: 1rem; left: 3.2rem; width: 3px; background: linear-gradient(var(--blue), var(--cyan), var(--mint)); content: ""; }
.historical-timeline article { position: relative; display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; }
.historical-timeline article > span { z-index: 1; display: grid; place-items: center; width: 6.5rem; min-height: 3.2rem; border: 6px solid var(--paper); border-radius: 999px; color: #fff; background: var(--blue); font-weight: 900; }
.historical-timeline article > div { padding: 1.15rem 1.3rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; }
.historical-timeline h3 { margin: 0 0 .35rem; font-size: 1.08rem; }.historical-timeline p { margin: 0; color: var(--muted); line-height: 1.62; }
.standards-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr) auto); align-items: center; gap: .65rem; margin: 2rem 0; }
.standards-loop article { min-width: 0; min-height: 13rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }
.standards-loop article > span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .75rem; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 850; }
.standards-loop h3 { margin: 0 0 .45rem; font-size: 1rem; }.standards-loop p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.56; }.standards-loop > i { color: #9bacc0; }
.html-version-table td:nth-child(3), .html-version-table td:nth-child(4) { min-width: 17rem; }

.generation-axis { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: .8rem; margin: 2rem 0; }
.generation-axis article { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; min-width: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }
.generation-axis article > span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .75rem; color: #fff; background: var(--blue); font-weight: 900; }.generation-axis article:nth-of-type(2) > span { background: var(--cyan); }.generation-axis article:nth-of-type(3) > span { background: var(--purple, #8259c8); }.generation-axis article:nth-of-type(4) > span { background: linear-gradient(135deg, #8259c8, var(--coral)); }
.generation-axis h3 { margin: 0 0 .3rem; font-size: 1rem; }.generation-axis p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.52; }.generation-axis > i { color: #9aabc0; }
.milestone-story-card { border-top: 5px solid var(--blue); }
.milestone-controls { justify-content: center; }
.milestone-controls .control-button { display: inline-flex; align-items: center; gap: .48rem; }
.era-site-showcase { margin: 2.5rem 0 .5rem; padding: 1.55rem; overflow: hidden; border: 1px solid #cbdbee; border-radius: 1.15rem; background: linear-gradient(145deg, #f8fbff, #edf5ff); box-shadow: 0 16px 38px rgba(30,57,90,.08); }
.era-site-showcase.web2-showcase { background: linear-gradient(145deg, #f7fffd, #e9f8f3); }
.era-site-showcase.web3-showcase { background: linear-gradient(145deg, #fcfaff, #f0ebfb); }
.era-site-showcase.web4-showcase { background: linear-gradient(145deg, #fffaf7, #f5effd); }
.era-site-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.era-site-heading > div { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.era-site-heading > p { max-width: 32rem; margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.58; text-align: right; }
.era-site-heading .era-number { display: grid; place-items: center; width: 4rem; min-width: 4rem; height: 4rem; border-radius: 1rem; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-weight: 950; font-size: 1.15rem; box-shadow: 0 10px 22px rgba(23,105,224,.2); }
.web2-showcase .era-number { background: linear-gradient(135deg, var(--cyan), var(--mint)); }
.web3-showcase .era-number, .web4-showcase .era-number { background: linear-gradient(135deg, #8259c8, var(--coral)); }
.era-site-heading .eyebrow { margin: 0 0 .2rem; }
.era-site-heading h3 { margin: 0; font-size: 1.2rem; line-height: 1.35; }
.era-site-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.site-era-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: #fff; box-shadow: 0 12px 26px rgba(30,57,90,.09); }
.site-era-image { position: relative; display: block; height: 22rem; overflow: hidden; border-bottom: 1px solid var(--line); background: #dfeaf5; }
.site-era-image::after { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; color: #fff; background: rgba(7,26,49,.82); font: 900 .85rem/1 "Font Awesome 6 Free"; content: "\f35d"; box-shadow: 0 6px 14px rgba(7,26,49,.22); }
.site-era-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .35s ease; }
.site-era-image:hover img, .site-era-image:focus-visible img { transform: scale(1.025); }
.site-era-image-tall img { object-position: top center; }
.site-era-image-contain { padding: 1rem; background: #fff; }
.site-era-image-contain img { object-fit: contain; object-position: center; }
.site-era-card figcaption { display: grid; gap: .28rem; padding: 1.05rem 1.15rem 1.15rem; }
.site-era-card figcaption > span { color: var(--blue); font-size: .76rem; font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }
.web2-showcase .site-era-card figcaption > span { color: #16886f; }
.web3-showcase .site-era-card figcaption > span, .web4-showcase .site-era-card figcaption > span { color: #7047b6; }
.site-era-card figcaption > strong { color: var(--navy); font-size: 1rem; line-height: 1.42; }
.site-era-card figcaption > small { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.site-birth-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1.15rem; }
.site-birth-strip > a { position: relative; display: grid; gap: .25rem; min-width: 0; padding: 1rem 1rem 1rem 1.15rem; overflow: hidden; border: 1px solid var(--line); border-radius: .8rem; color: inherit; background: rgba(255,255,255,.92); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.site-birth-strip > a::before { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--blue); content: ""; }
.web2-showcase .site-birth-strip > a::before { background: var(--mint); }
.web3-showcase .site-birth-strip > a::before, .web4-showcase .site-birth-strip > a::before { background: #8259c8; }
.site-birth-strip > a:hover, .site-birth-strip > a:focus-visible { transform: translateY(-3px); border-color: #8eb6ed; box-shadow: 0 9px 18px rgba(30,57,90,.11); }
.site-birth-strip time { color: var(--blue); font: 900 .75rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; }
.web2-showcase .site-birth-strip time { color: #16886f; }
.web3-showcase .site-birth-strip time, .web4-showcase .site-birth-strip time { color: #7047b6; }
.site-birth-strip strong { color: var(--navy); font-size: .95rem; }
.site-birth-strip span { color: var(--muted); font-size: .78rem; line-height: 1.43; }
.era-feature-grid, .spa-anatomy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.era-feature-grid article, .spa-anatomy-grid article { min-width: 0; padding: 1.35rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }
.era-feature-grid article > i, .spa-anatomy-grid article > i { margin-bottom: .75rem; color: var(--blue); font-size: 1.4rem; }.era-feature-grid h3, .spa-anatomy-grid h3 { margin: 0 0 .45rem; font-size: 1.08rem; }.era-feature-grid p, .spa-anatomy-grid p { margin: 0; color: var(--muted); line-height: 1.62; }
.participation-loop { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto; align-items: center; gap: .7rem; margin: 2rem 0; }
.participation-loop article { min-width: 0; min-height: 12rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }
.participation-loop article > span { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .75rem; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }.participation-loop h3 { margin: 0 0 .4rem; font-size: 1.05rem; }.participation-loop p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }.participation-loop > i { color: #9aabc0; }
.web3-meaning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 2rem 0; }
.web3-meaning-grid > article { min-width: 0; padding: 1.55rem; border: 1px solid var(--line); border-top: 5px solid var(--blue); border-radius: .95rem; background: #fff; box-shadow: 0 10px 24px rgba(30,57,90,.06); }.web3-meaning-grid > article.decentral-card { border-top-color: #8259c8; }
.web3-meaning-grid article > span { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: .9rem; border-radius: .8rem; color: #fff; background: var(--blue); }.web3-meaning-grid .decentral-card > span { background: #8259c8; }
.web3-meaning-grid h3 { margin: .3rem 0 .65rem; font-size: 1.18rem; }.web3-meaning-grid p:not(.eyebrow), .web3-meaning-grid li { color: var(--muted); line-height: 1.64; }.web3-meaning-grid ul { display: grid; gap: .4rem; padding-left: 1.15rem; }
.web4-feature-grid article { border-top: 4px solid #8259c8; }.web4-feature-grid article:nth-child(2) { border-top-color: var(--cyan); }.web4-feature-grid article:nth-child(3) { border-top-color: var(--mint); }.web4-feature-grid article:nth-child(4) { border-top-color: var(--coral); }
.web4-risk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.web4-risk-grid article { min-width: 0; padding: 1.3rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; box-shadow: 0 9px 22px rgba(30,57,90,.05); }
.web4-risk-grid article > i { margin-bottom: .75rem; color: #8259c8; font-size: 1.4rem; }.web4-risk-grid article:nth-child(3n+2) > i { color: var(--cyan); }.web4-risk-grid article:nth-child(3n+3) > i { color: var(--coral); }
.web4-risk-grid h3 { margin: 0 0 .45rem; font-size: 1.05rem; }.web4-risk-grid p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.web4-delegation-table td:nth-child(2), .web4-delegation-table td:nth-child(3) { min-width: 18rem; }
.generation-comparison-table td:not(:first-child) { min-width: 14rem; }

.architecture-definition-grid article { position: relative; padding-top: 1.6rem; overflow: hidden; }.architecture-definition-grid article::before { position: absolute; inset: 0 0 auto; height: 5px; background: var(--blue); content: ""; }.architecture-definition-grid article:nth-child(2)::before { background: var(--cyan); }.architecture-definition-grid article:nth-child(3)::before { background: var(--mint); }
.architecture-definition-grid article > span { width: 3.8rem; background: var(--blue); }.architecture-definition-grid article:nth-child(2) > span { background: var(--cyan); }.architecture-definition-grid article:nth-child(3) > span { background: var(--mint); }
.architecture-equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; margin: 2rem 0; padding: 1.3rem; border: 1px solid #b9d6ff; border-radius: .9rem; background: #edf5ff; }
.architecture-equation span { padding: .7rem .9rem; border-radius: .65rem; color: #fff; background: var(--blue); font-weight: 850; }.architecture-equation span:nth-of-type(2) { background: var(--cyan); }.architecture-equation span:nth-of-type(3) { background: var(--mint); }.architecture-equation strong { color: #54708d; }
.request-story { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 2rem 0; }
.request-story article { min-width: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }.request-story article > span { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; margin-bottom: .75rem; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 850; }.request-story h3 { margin: 0 0 .4rem; font-size: 1rem; }.request-story p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.58; }
.pros-cons-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }.pros-cons-grid article { min-width: 0; padding: 1.4rem; border: 1px solid var(--line); border-top: 4px solid var(--mint); border-radius: .9rem; background: #fff; }.pros-cons-grid article.attention { border-top-color: var(--gold); }.pros-cons-grid h3 { margin: 0 0 .8rem; font-size: 1.08rem; }.pros-cons-grid .positive h3 i { color: var(--mint); }.pros-cons-grid .attention h3 i { color: #b27a0b; }.pros-cons-grid ul { display: grid; gap: .5rem; margin: 0; padding-left: 1.2rem; color: var(--muted); line-height: 1.55; }
.pwa-capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }.pwa-capability-grid article { min-width: 0; padding: 1.35rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }.pwa-capability-grid article > span { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: .8rem; border-radius: .75rem; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }.pwa-capability-grid h3 { margin: 0 0 .45rem; font-size: 1.05rem; }.pwa-capability-grid p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.decision-question-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }.decision-question-list article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; min-width: 0; padding: 1.3rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }.decision-question-list article > span { color: var(--blue); font: 900 1.2rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }.decision-question-list h3 { margin: 0 0 .45rem; font-size: 1.05rem; }.decision-question-list p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.58; }

@media (max-width: 1050px) {
  .standards-loop { grid-template-columns: 1fr 1fr; }
  .standards-loop > i { display: none; }
  .request-story { grid-template-columns: 1fr 1fr; }
  .pwa-capability-grid { grid-template-columns: 1fr 1fr; }
  .generation-axis { grid-template-columns: 1fr 1fr; }
  .generation-axis > i { display: none; }
  .web4-risk-grid { grid-template-columns: 1fr 1fr; }
  .site-birth-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .history-timeline-canvas, .www-stack-canvas, .web-generation-canvas, .web-milestones-canvas, .navigation-architecture-canvas, .pwa-offline-canvas { min-width: 900px; }
  .history-concept-grid, .history-problem-grid, .open-standard-grid, .web-pillar-grid, .architecture-definition-grid, .era-feature-grid, .spa-anatomy-grid, .web3-meaning-grid, .pros-cons-grid, .pwa-capability-grid, .decision-question-list, .web4-risk-grid { grid-template-columns: 1fr; }
  .generation-axis, .participation-loop { grid-template-columns: 1fr; }
  .generation-axis > i, .participation-loop > i { justify-self: center; transform: rotate(90deg); }
  .standards-loop, .request-story { grid-template-columns: 1fr; }
  .historical-timeline article { grid-template-columns: 5.5rem 1fr; }.historical-timeline article > span { width: 5.5rem; }.historical-timeline::before { left: 2.7rem; }
  .era-site-heading { align-items: flex-start; flex-direction: column; }.era-site-heading > p { max-width: none; text-align: left; }
  .era-site-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .history-layer-stack::before { left: 1.45rem; }.history-layer-stack article { grid-template-columns: 1fr; margin-left: 3rem; }.history-layer-stack article > span { width: 2.7rem; height: 2.7rem; }
  .historical-timeline::before { left: 1.25rem; }.historical-timeline article { grid-template-columns: 1fr; padding-left: 2.8rem; }.historical-timeline article > span { position: relative; width: max-content; min-height: 2.5rem; padding: 0 .8rem; border-width: 4px; }.historical-timeline article > span::before { position: absolute; top: 50%; left: -1.75rem; width: 1rem; height: 1rem; border: 4px solid var(--paper); border-radius: 50%; background: var(--blue); content: ""; transform: translateY(-50%); }
  .era-site-showcase { padding: 1rem; }.era-site-heading > div { align-items: flex-start; }.era-site-heading .era-number { width: 3.2rem; min-width: 3.2rem; height: 3.2rem; }.site-era-image { height: 17rem; }.site-birth-strip { grid-template-columns: 1fr; }
}

/* Atividades: projeto integrador em cinco entregas progressivas. */
.activities-hero::before {
  background:
    radial-gradient(circle at 78% 25%, rgba(45, 212, 191, .34), transparent 21rem),
    radial-gradient(circle at 62% 90%, rgba(65, 132, 247, .28), transparent 24rem),
    linear-gradient(120deg, rgba(5, 18, 37, .99), rgba(9, 39, 73, .95) 58%, rgba(10, 67, 91, .88));
}
.activities-hero::after {
  position: absolute;
  right: clamp(2rem, 8vw, 8rem);
  bottom: -4.5rem;
  width: clamp(15rem, 28vw, 26rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 2.4rem, rgba(255, 255, 255, .075) 2.45rem 2.52rem);
  content: "";
}

.activity-roadmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr);
  align-items: stretch;
  gap: .65rem;
  margin: 2.2rem 0;
}
.activity-roadmap > a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: center;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  color: inherit;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 57, 90, .06);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.activity-roadmap > a:hover,
.activity-roadmap > a:focus-visible { transform: translateY(-3px); border-color: #8eb6ed; box-shadow: 0 14px 28px rgba(30, 57, 90, .11); }
.activity-roadmap > a > span,
.activity-stage-header > span,
.cloud-delivery-flow article > span,
.presentation-story li > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .75rem;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(23, 105, 224, .2);
}
.activity-roadmap strong,
.activity-roadmap small { display: block; }
.activity-roadmap strong { color: var(--navy); font-size: .98rem; }
.activity-roadmap small { margin-top: .2rem; color: var(--muted); font-size: .73rem; line-height: 1.4; }
.activity-roadmap > i { align-self: center; color: #9aabc0; }

.activity-stage { scroll-margin-top: 2rem; }
.activity-stage + .activity-stage { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--line); }
.activity-stage-header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.15rem; align-items: center; margin-bottom: 1.1rem; }
.activity-stage-header > span { width: 4rem; height: 4rem; border-radius: 1rem; font-size: 1.35rem; }
.activity-stage-header .eyebrow { margin: 0 0 .25rem; }
.activity-stage-header h2 { margin: 0; }
.activity-required { border-color: #9bc9ff; background: linear-gradient(135deg, #f1f7ff, #eefbfa); }

.activity-deliverables-grid,
.framework-choice-grid,
.security-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  margin: 2rem 0;
}
.activity-deliverables-grid article,
.framework-choice-grid article,
.security-check-grid article {
  min-width: 0;
  padding: 1.45rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 57, 90, .06);
}
.activity-deliverables-grid article > span,
.framework-choice-grid article > i,
.security-check-grid article > i {
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  margin-bottom: .85rem;
  border-radius: .8rem;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  font-size: 1.35rem;
}
.activity-deliverables-grid article:nth-child(3n+2) > span,
.security-check-grid article:nth-child(3n+2) > i { background: linear-gradient(135deg, var(--cyan), var(--mint)); }
.activity-deliverables-grid article:nth-child(3n+3) > span,
.security-check-grid article:nth-child(3n+3) > i { background: linear-gradient(135deg, #8259c8, var(--coral)); }
.activity-deliverables-grid h3,
.framework-choice-grid h3,
.security-check-grid h3 { margin: 0 0 .55rem; font-size: 1.08rem; }
.activity-deliverables-grid ul { display: grid; gap: .38rem; margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.framework-choice-grid p,
.security-check-grid p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.62; }
.framework-choice-grid article > i { color: #fff; }
.framework-choice-grid article:nth-child(2) > i { background: linear-gradient(135deg, #25a466, #42d392); }
.framework-choice-grid article:nth-child(3) > i { background: linear-gradient(135deg, #1688c9, #61dafb); }

.activity-acceptance {
  display: grid;
  grid-template-columns: minmax(12rem, .3fr) 1fr;
  gap: 1.2rem;
  align-items: center;
  margin: 2rem 0 .5rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid #a7dfce;
  border-left: 6px solid var(--mint);
  border-radius: .95rem;
  background: #f1fbf7;
}
.activity-acceptance h3 { margin: 0; color: #156c59; font-size: 1.05rem; }
.activity-acceptance h3 i { margin-right: .45rem; }
.activity-acceptance p { margin: 0; color: #3e645b; line-height: 1.62; }

.activity-architecture-flow,
.cloud-delivery-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .85fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  margin: 2.2rem 0;
  padding: 1.4rem;
  border: 1px solid #cbdbee;
  border-radius: 1.1rem;
  background: linear-gradient(145deg, #f8fbff, #edf5ff);
  overflow-x: auto;
}
.activity-architecture-flow article,
.cloud-delivery-flow article {
  display: grid;
  justify-items: center;
  min-width: 10rem;
  min-height: 9rem;
  padding: 1.2rem .9rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 9px 20px rgba(30, 57, 90, .06);
}
.activity-architecture-flow article > i { margin-bottom: .75rem; color: var(--blue); font-size: 2rem; }
.activity-architecture-flow article > strong,
.cloud-delivery-flow article > strong { color: var(--navy); }
.activity-architecture-flow article > span,
.cloud-delivery-flow article > small { margin-top: .4rem; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.activity-architecture-flow > i,
.cloud-delivery-flow > i { color: #8fa4bc; }
.activity-architecture-flow > .fa-box { font-size: 1.3rem; }

.activity-two-columns,
.slice-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 2rem 0;
}
.activity-two-columns > article,
.slice-comparison > article {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 57, 90, .06);
}
.activity-two-columns h3,
.slice-comparison h3 { margin: 0 0 .8rem; }
.activity-two-columns ul { display: grid; gap: .52rem; margin: 0; padding-left: 1.2rem; color: var(--muted); line-height: 1.58; }
.slice-comparison { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.slice-comparison > i { align-self: center; color: #8fa4bc; }
.slice-comparison code { display: block; margin: .45rem 0; padding: .65rem .75rem; border-radius: .55rem; color: #cbeeff; background: #102849; }
.slice-comparison article > p:last-child { margin-bottom: 0; color: var(--muted); line-height: 1.58; }

.activity-code-tree {
  margin: 1.4rem 0 2rem;
  padding: 1.55rem;
  overflow-x: auto;
  border: 1px solid #27476d;
  border-radius: 1rem;
  color: #cdefff;
  background: linear-gradient(145deg, #0a1e37, #102f50);
  box-shadow: 0 14px 30px rgba(7, 26, 49, .16);
}
.activity-code-tree code { font: 600 .9rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }

.cloud-delivery-flow { grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr); }
.cloud-delivery-flow article { min-width: 8.5rem; min-height: 8.4rem; }
.cloud-delivery-flow article > span { width: 2.4rem; height: 2.4rem; margin-bottom: .65rem; border-radius: 50%; }

.presentation-story {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}
.presentation-story li {
  min-width: 0;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 57, 90, .06);
}
.presentation-story li > span { width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; border-radius: 50%; }
.presentation-story h3 { margin: 0 0 .45rem; font-size: 1rem; }
.presentation-story p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.activity-research-table th:first-child,
.activity-rubric th:first-child { min-width: 11rem; }
.activity-research-table td,
.activity-rubric td { min-width: 14rem; }
.activity-research-table td:first-child,
.activity-rubric td:first-child { min-width: 11rem; }

@media (max-width: 1180px) {
  .activity-roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-roadmap > i { display: none; }
  .presentation-story { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cloud-delivery-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cloud-delivery-flow > i { display: none; }
}
@media (max-width: 850px) {
  .activity-deliverables-grid,
  .framework-choice-grid,
  .security-check-grid { grid-template-columns: 1fr 1fr; }
  .activity-architecture-flow { grid-template-columns: 1fr; }
  .activity-architecture-flow > i { justify-self: center; transform: rotate(90deg); }
  .activity-architecture-flow > .fa-box { transform: none; }
  .activity-acceptance { grid-template-columns: 1fr; gap: .6rem; }
  .presentation-story { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .activity-roadmap,
  .activity-deliverables-grid,
  .framework-choice-grid,
  .security-check-grid,
  .activity-two-columns,
  .presentation-story,
  .cloud-delivery-flow { grid-template-columns: 1fr; }
  .activity-stage-header { align-items: start; }
  .activity-stage-header > span { width: 3.2rem; height: 3.2rem; }
  .slice-comparison { grid-template-columns: 1fr; }
  .slice-comparison > i { justify-self: center; transform: rotate(90deg); }
}

/* Gerações da Web: feeds, recomendação, Big Data, ciência de dados e IoT. */
.recommendation-feed-canvas,
.iot-journey-canvas { max-height: none; }
.feed-objective-controls .control-button,
.iot-scenario-controls .control-button { display: inline-flex; align-items: center; gap: .48rem; }

.feed-evolution-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr) auto) minmax(0, 1fr);
  align-items: stretch;
  gap: .8rem;
  margin: 2rem 0;
}
.feed-evolution-strip > article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: .95rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30,57,90,.06);
}
.feed-evolution-strip > article > span,
.ranking-funnel li > span,
.iot-path-grid article > span {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: .72rem;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  font-weight: 900;
}
.feed-evolution-strip h3 { margin: 0 0 .42rem; font-size: 1.04rem; }
.feed-evolution-strip p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.58; }
.feed-evolution-strip > i { align-self: center; color: #93a7bd; }

.ranking-funnel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}
.ranking-funnel li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  min-width: 0;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: .95rem;
  background: #fff;
  box-shadow: 0 9px 22px rgba(30,57,90,.05);
}
.ranking-funnel strong { color: var(--navy); font-size: 1rem; }
.ranking-funnel p { margin: .35rem 0 0; color: var(--muted); font-size: .9rem !important; line-height: 1.58 !important; }

.recommendation-method-grid,
.data-role-grid,
.iot-distinction-grid,
.edge-cloud-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 2rem 0;
}
.recommendation-method-grid article,
.data-role-grid article,
.iot-distinction-grid article,
.edge-cloud-grid article {
  min-width: 0;
  padding: 1.45rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30,57,90,.06);
}
.recommendation-method-grid article > i,
.edge-cloud-grid article > i,
.iot-distinction-grid article > span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: .8rem;
  border-radius: .78rem;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  font-size: 1.3rem;
}
.recommendation-method-grid article:nth-child(2) > i,
.edge-cloud-grid article:nth-child(2) > i,
.iot-distinction-grid article:nth-child(2) > span { background: linear-gradient(135deg, var(--cyan), var(--mint)); }
.recommendation-method-grid article:nth-child(3) > i { background: linear-gradient(135deg, #8259c8, var(--coral)); }
.recommendation-method-grid article:nth-child(4) > i { background: linear-gradient(135deg, var(--gold), var(--coral)); }
.recommendation-method-grid h3,
.data-role-grid h3,
.iot-distinction-grid h3,
.edge-cloud-grid h3 { margin: .2rem 0 .5rem; font-size: 1.08rem; }
.recommendation-method-grid p,
.data-role-grid p:not(.eyebrow),
.iot-distinction-grid p:not(.eyebrow),
.edge-cloud-grid p { margin: 0; color: var(--muted); line-height: 1.64; }

.algorithm-consequence-grid,
.big-data-dimensions,
.iot-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.algorithm-consequence-grid article,
.big-data-dimensions article,
.iot-path-grid article {
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: .95rem;
  background: #fff;
  box-shadow: 0 9px 22px rgba(30,57,90,.05);
}
.algorithm-consequence-grid article { border-top: 4px solid var(--blue); }
.algorithm-consequence-grid article:nth-child(3n+2) { border-top-color: var(--cyan); }
.algorithm-consequence-grid article:nth-child(3n+3) { border-top-color: var(--coral); }
.algorithm-consequence-grid article > i { margin-bottom: .7rem; color: var(--blue); font-size: 1.35rem; }
.algorithm-consequence-grid article:nth-child(3n+2) > i { color: var(--cyan); }
.algorithm-consequence-grid article:nth-child(3n+3) > i { color: var(--coral); }
.algorithm-consequence-grid h3,
.big-data-dimensions h3,
.iot-path-grid h3 { margin: 0 0 .45rem; font-size: 1.03rem; }
.algorithm-consequence-grid p,
.big-data-dimensions p,
.iot-path-grid p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }

.big-data-dimensions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.big-data-dimensions article > span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: .8rem;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 1.2rem;
  font-weight: 950;
}
.big-data-dimensions article:nth-child(2) > span { background: var(--cyan); }
.big-data-dimensions article:nth-child(3) > span { background: var(--mint); }
.big-data-dimensions article:nth-child(4) > span { background: #8259c8; }

.data-intelligence-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr) auto) minmax(0, 1fr);
  align-items: stretch;
  gap: .6rem;
  margin: 2.2rem 0;
  padding: 1.35rem;
  border: 1px solid #cbdbee;
  border-radius: 1.1rem;
  background: linear-gradient(145deg, #f8fbff, #edf5ff);
}
.data-intelligence-pipeline article {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 1rem .7rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: #fff;
  text-align: center;
}
.data-intelligence-pipeline article > i { margin-bottom: .6rem; color: var(--blue); font-size: 1.5rem; }
.data-intelligence-pipeline article > small { margin-top: .35rem; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.data-intelligence-pipeline > i { align-self: center; color: #91a6bc; }
.data-role-grid article { border-top: 5px solid var(--blue); }
.data-role-grid article:nth-child(2) { border-top-color: var(--cyan); }
.data-role-grid article:nth-child(3) { border-top-color: var(--mint); }
.data-role-grid article:nth-child(4) { border-top-color: #8259c8; }

.data-science-cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin: 1.5rem 0 2rem;
  padding: 1.3rem;
  border: 1px solid #cbdbee;
  border-radius: 1rem;
  background: #edf5ff;
}
.data-science-cycle span { padding: .65rem .82rem; border-radius: .65rem; color: #fff; background: var(--blue); font-size: .86rem; font-weight: 850; }
.data-science-cycle span:nth-of-type(3n+2) { background: var(--cyan); }
.data-science-cycle span:nth-of-type(3n+3) { background: var(--mint); }
.data-science-cycle i { color: #8298af; }

.iot-distinction-grid > article { position: relative; overflow: hidden; }
.iot-distinction-grid > article::before { position: absolute; inset: 0 0 auto; height: 5px; background: var(--blue); content: ""; }
.iot-distinction-grid > article:nth-child(2)::before { background: var(--mint); }
.iot-path-grid article > span { margin-bottom: .75rem; }
.iot-protocol-table td:nth-child(2),
.iot-protocol-table td:nth-child(3) { min-width: 16rem; }
.iot-protocol-table a { color: var(--blue); font-weight: 800; }

@media (max-width: 1100px) {
  .feed-evolution-strip { grid-template-columns: 1fr; }
  .feed-evolution-strip > i { justify-self: center; transform: rotate(90deg); }
  .big-data-dimensions { grid-template-columns: 1fr 1fr; }
  .data-intelligence-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .data-intelligence-pipeline > i { display: none; }
}
@media (max-width: 800px) {
  .recommendation-feed-canvas,
  .iot-journey-canvas { min-width: 900px; }
  .ranking-funnel,
  .algorithm-consequence-grid,
  .iot-path-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ranking-funnel,
  .recommendation-method-grid,
  .algorithm-consequence-grid,
  .big-data-dimensions,
  .data-role-grid,
  .iot-distinction-grid,
  .iot-path-grid,
  .edge-cloud-grid,
  .data-intelligence-pipeline { grid-template-columns: 1fr; }
  .data-science-cycle { align-items: stretch; flex-direction: column; }
  .data-science-cycle span { width: 100%; text-align: center; }
  .data-science-cycle i { align-self: center; transform: rotate(90deg); }
}

/* Evolução da pilha Web: navegador, servidor, backend, HTML/XHTML e AJAX. */
.web-runtime-layers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.web-runtime-layers article {
  position: relative;
  min-width: 0;
  padding: 1.45rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 5px solid var(--blue);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30,57,90,.06);
}
.web-runtime-layers article:nth-child(2) { border-top-color: var(--cyan); }
.web-runtime-layers article:nth-child(3) { border-top-color: var(--mint); }
.web-runtime-layers article:nth-child(4) { border-top-color: #8259c8; }
.web-runtime-layers article > span {
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  margin-bottom: .8rem;
  border-radius: .8rem;
  color: #fff;
  background: var(--blue);
  font-size: 1.35rem;
}
.web-runtime-layers article:nth-child(2) > span { background: var(--cyan); }
.web-runtime-layers article:nth-child(3) > span { background: var(--mint); }
.web-runtime-layers article:nth-child(4) > span { background: #8259c8; }
.web-runtime-layers h3 { margin: .2rem 0 .5rem; font-size: 1.05rem; }
.web-runtime-layers p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.62; }

.generation-stack-table th:first-child { min-width: 10rem; }
.generation-stack-table th:not(:first-child),
.generation-stack-table td:not(:first-child) { min-width: 17rem; }
.generation-stack-table td { vertical-align: top; }

.html-family-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  margin: 2rem 0;
}
.html-family-story article {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30,57,90,.06);
}
.html-family-story article > span {
  display: inline-flex;
  margin-bottom: .75rem;
  padding: .42rem .7rem;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font: 900 .76rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.html-family-story article:nth-child(2) > span { background: #8259c8; }
.html-family-story article:nth-child(3) > span { background: var(--mint); }
.html-family-story article:nth-child(4) > span { background: var(--cyan); }
.html-family-story h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.html-family-story p { margin: 0 0 1rem; color: var(--muted); line-height: 1.64; }
.html-family-story article > code {
  display: block;
  padding: .65rem .75rem;
  overflow-x: auto;
  border-radius: .55rem;
  color: #c9edff;
  background: #102849;
  font: 700 .76rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
}
.html-family-story p code {
  display: inline;
  padding: .08rem .3rem;
  border-radius: .34rem;
  color: #234d79;
  background: #eaf2ff;
  font: 700 .82em/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.backend-request-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr);
  align-items: stretch;
  gap: .65rem;
  margin: 1.5rem 0 2rem;
  padding: 1.35rem;
  border: 1px solid #cbdbee;
  border-radius: 1.1rem;
  background: linear-gradient(145deg, #f8fbff, #edf5ff);
  overflow-x: auto;
}
.backend-request-flow article {
  display: grid;
  justify-items: center;
  min-width: 9.4rem;
  min-height: 10rem;
  padding: 1.15rem .8rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 9px 20px rgba(30,57,90,.06);
}
.backend-request-flow article > i { margin-bottom: .7rem; color: var(--blue); font-size: 1.7rem; }
.backend-request-flow article > strong { color: var(--navy); font-size: .94rem; }
.backend-request-flow article > small { margin-top: .42rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.backend-request-flow > i { align-self: center; color: #8ea3ba; }
.ajax-request-flow { background: linear-gradient(145deg, #f5fbff, #eefaf7); }
.ajax-request-flow article:nth-of-type(2) > i { color: #e7a600; }
.ajax-request-flow article:nth-of-type(3) > i { color: var(--mint); }
.ajax-request-flow article:nth-of-type(4) > i { color: #8259c8; }
.ajax-request-flow article:nth-of-type(5) > i { color: var(--cyan); }

.php-execution-card {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 1.5rem;
  align-items: center;
  margin: 1.5rem 0 2.2rem;
  padding: 1.6rem;
  border: 1px solid #cbdbee;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(30,57,90,.07);
}
.php-execution-card h3 { margin: .25rem 0 .55rem; }
.php-execution-card p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.65; }
.php-execution-card pre,
.ajax-explanation-grid pre {
  margin: 0;
  padding: 1.15rem;
  overflow-x: auto;
  border: 1px solid #27476d;
  border-radius: .8rem;
  color: #cdefff;
  background: linear-gradient(145deg, #0a1e37, #102f50);
  font: 650 .82rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.ajax-explanation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  margin: 1.5rem 0 2rem;
}
.ajax-explanation-grid article {
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30,57,90,.06);
}
.ajax-explanation-grid h3 { margin: .25rem 0 .8rem; }

@media (max-width: 1100px) {
  .web-runtime-layers { grid-template-columns: 1fr 1fr; }
  .backend-request-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .backend-request-flow > i { display: none; }
}
@media (max-width: 720px) {
  .web-runtime-layers,
  .html-family-story,
  .php-execution-card,
  .ajax-explanation-grid { grid-template-columns: 1fr; }
  .backend-request-flow { grid-template-columns: 1fr; }
  .backend-request-flow article { min-width: 0; }
  .backend-request-flow > i { display: block; justify-self: center; transform: rotate(90deg); }
}