:root {
  --ink: #181621;
  --muted: #686373;
  --line: #dedbe5;
  --surface: #f6f4f8;
  --paper: #ffffff;
  --purple: #632ca6;
  --purple-dark: #42147b;
  --violet: #8c55d9;
  --mint: #7fe0c1;
  --mint-dark: #006e59;
  --orange: #ff9c4b;
  --shadow: 0 20px 60px rgba(41, 24, 64, 0.1);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.65; }
a { color: inherit; }
code, pre { font-family: var(--mono); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 16px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.topbar { position: sticky; z-index: 50; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; padding: 0 4vw; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(29,18,39,.94); color: #fff; backdrop-filter: blur(18px); }
.brand { display: inline-flex; gap: 12px; align-items: center; width: max-content; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--mint); color: #163c35; font: 900 13px/1 var(--sans); letter-spacing: -.5px; transform: rotate(-2deg); }
.brand > span:last-child { display: grid; line-height: 1.15; }
.brand strong { font-size: 14px; letter-spacing: .02em; }
.brand small { margin-top: 4px; color: #bdb2ca; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.topnav { display: flex; gap: 30px; }
.topnav a { position: relative; color: #d8d1df; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.topnav a::after { position: absolute; right: 50%; bottom: -10px; left: 50%; height: 2px; background: var(--mint); content: ""; transition: .2s; }
.topnav a:hover::after, .topnav a:focus::after { right: 0; left: 0; }
.site-chip { justify-self: end; padding: 7px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #cfc6d8; font: 10px var(--mono); }

.hero { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px,7vw,112px); align-items: center; min-height: 710px; padding: 90px max(5vw,calc((100vw - 1240px)/2)); overflow: hidden; background: #25162e; color: #fff; }
.hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 10% 20%,rgba(128,68,184,.35),transparent 32%), radial-gradient(circle at 80% 80%,rgba(95,211,183,.09),transparent 28%), linear-gradient(115deg,transparent 52%,rgba(255,255,255,.025) 52%); content: ""; }
.hero::after { position: absolute; top: 0; right: 0; width: 42%; height: 100%; opacity: .07; background-image: linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size: 38px 38px; content: ""; mask-image: linear-gradient(to left,#000,transparent); }
.hero-copy, .signal-card { position: relative; z-index: 1; }
.eyebrow, .step-kicker { color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { display: flex; gap: 10px; align-items: center; color: #aa98b9; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(127,224,193,.1); }
.hero h1 { max-width: 700px; margin: 25px 0; font-size: clamp(48px,5.7vw,82px); line-height: .99; letter-spacing: -.055em; }
.hero h1 span { color: var(--mint); font-weight: 500; }
.hero-lead { max-width: 650px; margin-bottom: 32px; color: #cfc5d5; font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; }
.button { display: inline-flex; gap: 20px; align-items: center; justify-content: center; min-width: 150px; padding: 13px 18px; border-radius: 8px; font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .2s,background .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--mint); color: #143c34; }
.button.primary:hover { background: #9ae9d0; }
.button.secondary { border: 1px solid rgba(255,255,255,.25); color: #fff; }
.hero-meta { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.hero-meta div { display: grid; padding-right: 14px; border-right: 1px solid rgba(255,255,255,.1); }
.hero-meta div:last-child { border: 0; }
.hero-meta strong { color: #fff; font-size: 13px; }
.hero-meta span { color: #8f8498; font-size: 10px; text-transform: uppercase; }

.signal-card { padding: 24px 24px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(24,14,32,.88); box-shadow: 0 45px 90px rgba(0,0,0,.35); transform: perspective(1100px) rotateY(-2deg); }
.signal-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.signal-head > div { display: grid; }
.overline { color: #95889e; font: 9px var(--mono); letter-spacing: .18em; }
.signal-head strong { margin-top: 5px; font: 600 18px var(--mono); }
.status-ok { padding: 5px 9px; border-radius: 5px; background: rgba(127,224,193,.12); color: var(--mint); font: 700 10px var(--mono); }
.trace-row { display: grid; grid-template-columns: 140px 1fr 48px; gap: 12px; align-items: center; margin-top: 17px; font-size: 10px; }
.trace-service { display: flex; gap: 7px; align-items: center; color: #cfc6d5; font-family: var(--mono); }
.trace-service i { width: 7px; height: 7px; border-radius: 2px; }
.trace-service .purple { background: #b46cff; }.trace-service .blue { background: #69a9ff; }.trace-service .mint { background: var(--mint); }
.trace-bar { height: 7px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.06); }
.trace-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--violet),#b574ed); }
.trace-row code { color: #82778a; text-align: right; }
.trace-row.nested .trace-service { padding-left: 12px; }.trace-row.nested-2 .trace-service { padding-left: 24px; }
.trace-row.nested .trace-bar b { background: #5799e9; }.trace-row.nested-2 .trace-bar b { background: var(--mint); }
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.08); }
.signal-grid div { display: grid; padding: 12px; background: #201527; }
.signal-grid span { color: #7c7185; font: 9px var(--mono); }.signal-grid strong { margin-top: 3px; color: #d8d0dc; font: 11px var(--mono); }
.pulse-line { height: 75px; margin-top: 7px; }.pulse-line svg { width: 100%; height: 100%; }.pulse-line path { fill: none; stroke: var(--mint); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(127,224,193,.5)); }

.section { width: min(1180px,90vw); margin: 0 auto; padding: 105px 0; }
.section-heading { max-width: 720px; margin-bottom: 48px; }.section-heading.compact { margin-bottom: 36px; }
.section-heading h2 { margin: 8px 0 7px; font-size: clamp(34px,4vw,52px); line-height: 1.1; letter-spacing: -.04em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 15px; }

.architecture-card { contain: layout paint; padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: #fbfafc; box-shadow: var(--shadow); }
.architecture-track { position: relative; display: flex; gap: 12px; align-items: center; padding: 58px 8px 16px; }
.architecture-track + .architecture-track { margin-top: 18px; border-top: 1px solid var(--line); }
.track-title { position: absolute; top: 0; left: 8px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; }.track-title span { margin-right: 10px; color: var(--purple); }
.node { display: flex; flex: 0 0 auto; gap: 10px; align-items: center; min-width: 145px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.node-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: #eeeaf2; color: #48404e; font: 800 10px var(--sans); }
.node-icon.aws { background: #fff1df; color: #9a4c00; }.node-icon.red { background: #fbe6e6; color: #ad2424; }.node-icon.php { background: #e6e8fa; color: #454d9c; }.node-icon.dd { background: #eee4fa; color: var(--purple); }.node-icon.cloud { background: #e1f7f0; color: var(--mint-dark); }
.node > div { display: grid; line-height: 1.2; }.node small { margin-bottom: 4px; color: #9a93a2; font: 8px var(--mono); }.node strong { font-size: 12px; }
.connector { position: relative; flex: 1 1 40px; min-width: 20px; text-align: center; }.connector i { display: block; height: 1px; background: #bdb7c4; }.connector i::after { float: right; width: 5px; height: 5px; margin-top: -2px; border-top: 1px solid #8c8494; border-right: 1px solid #8c8494; content: ""; transform: rotate(45deg); }.connector em { position: absolute; bottom: 5px; left: 50%; padding: 0 4px; background: #fbfafc; color: #99919f; font: normal 8px var(--mono); transform: translateX(-50%); white-space: nowrap; }.connector.trace i { height: 2px; background: var(--violet); }
.callout { display: grid; grid-template-columns: max-content 1fr; gap: 18px; align-items: baseline; margin-top: 22px; padding: 16px 19px; border-radius: 8px; font-size: 13px; }.callout p { margin: 0; }.callout.note { border-left: 3px solid var(--purple); background: #f4eff9; color: #584f60; }.callout.warning { grid-template-columns: 1fr; gap: 2px; margin: 0 0 22px; border-left: 3px solid var(--orange); background: #fff5e9; color: #695547; }
.datadog-ui-path { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 20px 0; padding: 13px 15px; border: 1px solid #b7bec4; border-radius: 14px; background: #eef5fb; color: #4b5660; font-size: 11px; font-weight: 800; }
.datadog-ui-path span { padding: 5px 9px; border: 1px solid #c8d2dc; border-radius: 8px; background: #fff; color: #26364a; }
.datadog-ui-path i { color: #667888; font-style: normal; }
.guided-route { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 20px; }
.guided-route > div { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 14px; border: 1px solid #c2c8c7; border-radius: 14px; background: #fffdf8; }
.guided-route b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #8661b5; border-radius: 50%; background: #eee5f8; color: #5d299a; font: 900 9px var(--mono); }
.guided-route span { display: grid; align-content: start; }
.guided-route strong { color: var(--ink); font-size: 11px; line-height: 1.4; }
.guided-route small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.guided-route code { color: var(--mint-dark); font-size: 9px; }

.prerequisites { border-top: 1px solid var(--line); }
.check-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.check-card { display: flex; gap: 13px; align-items: center; min-height: 92px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; transition: .2s; }.check-card:hover { border-color: #bca9ce; transform: translateY(-2px); }.check-card input { position: absolute; opacity: 0; }.check-card > span { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border: 1.5px solid #bcb5c4; border-radius: 6px; }.check-card input:checked + span { border-color: var(--mint-dark); background: var(--mint); }.check-card input:checked + span::after { content: "✓"; color: #155247; font-size: 13px; font-weight: 900; }.check-card > div { display: grid; }.check-card strong { font-size: 13px; }.check-card small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.info-table-wrap { margin-top: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }table { width: 100%; border-collapse: collapse; font-size: 12px; }th,td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; }tr:last-child td { border: 0; }th { background: #f3f0f5; color: #776f7d; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }td code { color: var(--purple-dark); font-size: 11px; font-weight: 700; }

.lab-section { width: 100%; padding-top: 72px; padding-right: max(5vw,calc((100vw - 1180px)/2)); padding-left: max(5vw,calc((100vw - 1180px)/2)); background: var(--surface); }
.lab-layout { display: grid; grid-template-columns: 190px 1fr; gap: 55px; align-items: start; min-width: 0; }
.lab-nav { position: sticky; top: 112px; display: grid; gap: 3px; }.lab-nav > span { margin: 0 0 12px 6px; color: #988f9e; font-size: 9px; font-weight: 800; letter-spacing: .14em; }.lab-nav a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; color: #766d7d; font-size: 11px; font-weight: 650; text-decoration: none; }.lab-nav a:hover,.lab-nav a.active { background: #e8e1ed; color: var(--purple-dark); }.lab-nav i { width: 20px; color: #a097a6; font: normal 9px var(--mono); }
.lab-steps { position: relative; min-width: 0; }.lab-steps::before { position: absolute; top: 35px; bottom: 80px; left: 24px; width: 1px; background: #d4ced9; content: ""; }.lab-step { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 28px; min-width: 0; padding-bottom: 75px; }.step-number { position: relative; z-index: 2; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #cfc7d5; border-radius: 50%; background: var(--surface); color: var(--purple); font: 800 11px var(--mono); }.step-body { min-width: 0; max-width: 825px; padding: 26px 28px; border: 1px solid #dad4de; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(44,29,54,.05); }.featured-step .step-number { border-color: var(--purple); background: var(--purple); color: #fff; box-shadow: 0 0 0 6px rgba(99,44,166,.1); }.featured-step .step-body { border-color: #c1a9d9; box-shadow: 0 14px 40px rgba(85,45,124,.1); }
.step-title { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }.step-title > div { display: grid; }.step-title span { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .13em; }.step-title h3 { margin: 3px 0 0; font-size: 21px; letter-spacing: -.02em; }.step-title .time { padding: 5px 9px; border-radius: 999px; background: #f0edf2; color: #88808e; font: 9px var(--mono); letter-spacing: 0; white-space: nowrap; }.step-body > p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }.step-body h4 { margin: 30px 0 10px; font-size: 14px; }
.code-block { margin: 16px 0; overflow: hidden; border-radius: 9px; background: #1c1820; color: #e4dce8; }.code-head { display: flex; justify-content: space-between; align-items: center; min-height: 37px; padding: 0 12px 0 15px; border-bottom: 1px solid rgba(255,255,255,.08); background: #26202b; }.code-head span { color: #988c9e; font: 9px var(--mono); text-transform: uppercase; }.copy-button { padding: 5px 9px; border: 1px solid #4f4655; border-radius: 5px; background: transparent; color: #bcb0c2; font: 9px var(--mono); cursor: pointer; }.copy-button:hover { border-color: var(--mint); color: var(--mint); }.code-block pre { max-height: 390px; margin: 0; padding: 18px; overflow: auto; font-size: 11px; line-height: 1.8; tab-size: 2; }.code-block.tall pre { max-height: 500px; }.code-block.compact-code pre { max-height: 260px; }
.checkpoint { display: flex; gap: 11px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid #ebe7ee; }.checkpoint > span { display: grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ddf7ef; color: var(--mint-dark); font-size: 11px; font-weight: 900; }.checkpoint p { margin: 0; color: #675f6c; font-size: 11px; }.query-chip { display: inline-flex; gap: 6px; align-items: center; padding: 10px 14px; border-radius: 7px; background: #ede6f4; color: #42364b; font: 11px var(--mono); }.query-chip span { color: var(--purple); }.query-chip i { color: #8b8191; font-style: normal; }

.validation-section { padding-bottom: 80px; }.validation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.validation-card { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 17px; border: 1px solid var(--line); border-radius: 10px; }.v-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: #f0e9f7; color: var(--purple); font-size: 10px; font-weight: 900; }.validation-card > div { display: grid; }.validation-card small { color: #9a929f; font-size: 8px; font-weight: 800; letter-spacing: .12em; }.validation-card strong { font-size: 14px; }.validation-card code { color: #847b89; font-size: 9px; }.validation-card > i { padding: 4px 7px; border-radius: 999px; background: #dff7ef; color: var(--mint-dark); font: normal 800 8px var(--sans); }

.trouble-list { border-top: 1px solid var(--line); }.trouble-list details { border-bottom: 1px solid var(--line); }.trouble-list summary { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; padding: 22px 4px; cursor: pointer; list-style: none; }.trouble-list summary::-webkit-details-marker { display: none; }.trouble-list summary > span { color: #a39aa8; font: 10px var(--mono); }.trouble-list summary strong { font-size: 15px; }.trouble-list summary i { color: var(--purple); font-size: 18px; font-style: normal; transition: transform .2s; }.trouble-list details[open] summary i { transform: rotate(45deg); }.trouble-list details > div { margin: 0 0 22px 45px; color: var(--muted); font-size: 13px; }.trouble-list details p { margin-top: 0; }.trouble-list pre { max-width: 750px; padding: 15px; overflow: auto; border-radius: 7px; background: #f4f1f6; color: #4a3b52; font-size: 10px; }

.security-section { padding-top: 20px; }.security-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; padding: 50px; border-radius: 18px; background: #24162d; color: #fff; }.security-card h2 { margin: 9px 0 0; font-size: 34px; line-height: 1.15; letter-spacing: -.03em; }.security-card .step-kicker { color: var(--mint); }.security-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }.security-card li { position: relative; padding-left: 24px; color: #c9bfce; font-size: 13px; }.security-card li::before { position: absolute; left: 0; color: var(--mint); content: "✓"; font-weight: 900; }.security-card code { color: #d7c1ee; font-size: 11px; }

footer { display: grid; grid-template-columns: 1fr auto auto; gap: 40px; align-items: center; margin-top: 40px; padding: 35px max(5vw,calc((100vw - 1180px)/2)); background: #161019; color: #bfb5c4; }.footer-brand .brand-mark { width: 32px; height: 32px; }.footer-brand strong { color: #fff; }footer p { font-size: 10px; }footer > a { color: var(--mint); font-size: 11px; text-decoration: none; }.toast { position: fixed; z-index: 80; right: 24px; bottom: 24px; padding: 10px 16px; border-radius: 7px; background: var(--mint); color: #124139; font-size: 11px; font-weight: 800; opacity: 0; transform: translateY(12px); transition: .2s; pointer-events: none; }.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 1fr auto; }.topnav,.site-chip { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 75px; }.hero-copy { max-width: 780px; }.signal-card { width: min(620px,100%); transform: none; }
  .architecture-card { overflow-x: auto; }.architecture-track { min-width: 990px; }
  .lab-layout { grid-template-columns: 1fr; }.lab-nav { display: none; }
}

@media (max-width: 720px) {
  .topbar { min-height: 66px; padding: 0 20px; }.brand small { display: none; }
  .hero { min-height: auto; padding: 65px 5vw; }.eyebrow { flex-wrap: wrap; font-size: 9px; letter-spacing: .1em; }.hero h1 { font-size: 48px; }.hero-lead { font-size: 15px; }.hero-meta { grid-template-columns: 1fr 1fr; gap: 18px; }.hero-meta div { border: 0; }
  .signal-card { padding: 18px 15px 8px; }.trace-row { grid-template-columns: 115px 1fr 40px; }.signal-grid { grid-template-columns: 1fr; }
  .section { width: 90vw; padding: 75px 0; }.section-heading h2 { font-size: 38px; }
  .architecture-card { padding: 22px; overflow: hidden; }.architecture-track { display: grid; min-width: 0; padding: 46px 0 12px; }.architecture-track .node { width: 100%; }.architecture-track .connector { display: none; }.track-title { left: 0; }
  .check-grid,.validation-grid { grid-template-columns: 1fr; }.info-table-wrap { overflow-x: auto; }table { min-width: 680px; }
  .lab-section { width: 100%; padding-right: 5vw; padding-left: 5vw; }.lab-step { grid-template-columns: 36px 1fr; gap: 12px; }.lab-steps::before { left: 18px; }.step-number { width: 36px; height: 36px; }.step-body { padding: 20px 16px; }.step-title { gap: 8px; }.step-title h3 { font-size: 18px; }.callout { grid-template-columns: 1fr; gap: 3px; }.code-block pre { font-size: 10px; }
  .security-card { grid-template-columns: 1fr; gap: 25px; padding: 32px 24px; }footer { grid-template-columns: 1fr; gap: 12px; }footer p { margin: 0; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Warm learning UI — inspired by the supplied visual direction. */
:root {
  --ink: #172239;
  --muted: #626a72;
  --line: #b9c0c1;
  --surface: #f8f5eb;
  --paper: #fffdf7;
  --purple: #315b9a;
  --purple-dark: #173d70;
  --mint: #a8dfc7;
  --mint-dark: #1f7658;
  --orange: #f39b78;
  --yellow: #f3cf70;
  --sky: #dceef9;
  --shadow: 0 22px 45px rgba(30, 48, 58, .10);
  --sans: "Avenir Next", "Noto Sans Thai", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background:
    radial-gradient(circle at 5% 8%, rgba(185, 226, 205, .38) 0 10%, transparent 10.2%),
    radial-gradient(circle at 96% 20%, rgba(249, 221, 145, .35) 0 8%, transparent 8.2%),
    radial-gradient(circle, rgba(37, 65, 65, .09) 1px, transparent 1.2px),
    var(--surface);
  background-attachment: fixed;
  background-position: 0 0, 0 0, 0 0;
  background-size: auto, auto, 22px 22px, auto;
}

.topbar {
  min-height: 72px;
  padding: 0 max(4vw, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(92, 104, 107, .2);
  background: rgba(255, 253, 247, .88);
  color: var(--ink);
  box-shadow: 0 8px 30px rgba(46, 61, 61, .05);
}
.brand-mark {
  border: 1px solid #7aa995;
  border-radius: 50%;
  background: var(--mint);
  color: #174c3c;
  box-shadow: 3px 3px 0 #34795f;
}
.brand small { color: #777f80; }
.topnav a { color: var(--ink); }
.topnav a::after { background: var(--mint-dark); }
.site-chip { border-color: #c0c6c4; background: #fff; color: #596364; }

.lab-section {
  width: 100%;
  padding-top: 48px;
  padding-bottom: 110px;
  background: transparent;
}

.lab-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(1180px, 100%);
  min-height: 540px;
  margin: 0 auto 92px;
  overflow: hidden;
  border: 1.5px solid #aeb9ba;
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 28px 65px rgba(36, 54, 61, .13);
}

.intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 6vw, 76px);
}
.intro-badge {
  align-self: flex-start;
  padding: 8px 13px;
  border: 1px solid #d3aa4c;
  border-radius: 999px;
  background: #ffe391;
  color: #664b13;
  font-size: 11px;
  font-weight: 800;
  transform: rotate(-2deg);
}
.intro-copy h1 {
  margin: 24px 0 20px;
  color: var(--ink);
  font-size: clamp(50px, 6vw, 78px);
  line-height: .96;
  letter-spacing: -.06em;
}
.intro-copy h1 span { color: var(--mint-dark); }
.intro-copy > p { max-width: 530px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.intro-actions { display: flex; gap: 18px; align-items: center; margin-top: 30px; }
.button { border-radius: 999px; }
.button.primary {
  border: 1px solid #145941;
  background: var(--mint-dark);
  color: #fff;
  box-shadow: 0 7px 0 #12503c, 0 13px 24px rgba(31, 118, 88, .18);
}
.button.primary:hover { background: #2b8666; transform: translateY(-2px); }
.intro-platform { color: #71797a; font-size: 10px; font-weight: 700; letter-spacing: .03em; }

.intro-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  border-left: 1.5px solid #aeb9ba;
  background: #eef7fd;
}
.intro-visual::before {
  position: absolute;
  width: 410px;
  height: 280px;
  border-radius: 48% 52% 43% 57% / 53% 42% 58% 47%;
  background: #cbe7f7;
  content: "";
  transform: rotate(-5deg);
}
.intro-visual::after {
  position: absolute;
  top: 76px;
  right: 70px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffdf83;
  box-shadow: 0 0 0 1px rgba(141, 103, 22, .08);
  content: "";
}
.visual-sticker { position: absolute; z-index: 3; padding: 9px 15px; border: 1px solid #b5bdbe; border-radius: 999px; background: #fffdf8; color: var(--ink); font-size: 10px; font-weight: 800; box-shadow: 0 5px 12px rgba(32, 45, 47, .07); }
.sticker-top { top: 62px; left: 55px; border-color: #d8af50; background: #ffe18a; transform: rotate(-4deg); }
.sticker-side { top: 30px; right: 30px; transform: rotate(3deg); }
.visual-orbit { position: absolute; z-index: 1; width: 430px; height: 330px; border: 1px dashed rgba(50, 87, 96, .24); border-radius: 50%; transform: rotate(-8deg); }
.visual-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.visual-orbit i:nth-child(1) { top: 18%; left: 5%; }.visual-orbit i:nth-child(2) { right: 7%; bottom: 20%; background: var(--mint-dark); }.visual-orbit i:nth-child(3) { bottom: 0; left: 46%; background: #6a85ad; }
.lab-illustration { position: relative; z-index: 2; width: min(94%, 610px); height: auto; margin-top: 20px; overflow: visible; font-family: var(--sans); }
.illustration-route { fill: none; stroke: #172239; stroke-width: 2.5; stroke-dasharray: 7 9; stroke-linecap: round; }
.route-dot { fill: #f39b78; stroke: #172239; stroke-width: 2; }
.route-dot-two { fill: #a8dfc7; }
.illustration-card rect, .laptop > rect:first-child, .floating-check rect { stroke: #172239; stroke-width: 2.5; filter: drop-shadow(6px 7px 0 rgba(23,34,57,.12)); }
.card-symbol { fill: #713722; font-size: 14px; font-weight: 900; }
.php-symbol { fill: #414b91; font-size: 9px; }.dd-symbol { fill: #17523e; font-size: 11px; }
.card-label { fill: #7b8182; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.card-name { fill: #172239; font-size: 13px; font-weight: 900; }
.face-line, .body-line, .trace-line, .check-line, .note-line, .sun-rays, .spark-lines { stroke: #172239; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.body-shape, .laptop > rect, .laptop-base, .floating-check rect { stroke: #172239; stroke-width: 2.5; stroke-linejoin: round; }
.note-line { stroke-width: 2; opacity: .55; }.check-line { stroke: #176347; stroke-width: 3.5; }.sun-rays { fill: none; stroke-width: 3; }.spark-lines { fill: none; stroke-width: 2.5; }
.trace-line { stroke: #315b9a; stroke-width: 4; }
.lab-heading { position: relative; }
.lab-heading::after { position: absolute; top: 15px; right: 5%; width: 92px; height: 20px; border-top: 3px solid var(--orange); border-radius: 50%; content: ""; transform: rotate(-5deg); }
.step-body::after { position: absolute; top: 18px; right: 28px; width: 13px; height: 13px; border: 2px solid rgba(31,118,88,.18); border-radius: 50%; content: ""; }
.step-body { position: relative; overflow: hidden; }
.step-body > * { position: relative; z-index: 1; }
.step-body::before { position: absolute; right: -36px; bottom: -52px; width: 130px; height: 130px; border-radius: 44% 56% 62% 38%; background: rgba(220,238,249,.34); content: ""; transform: rotate(18deg); }
.stack-illustration { position: relative; z-index: 2; display: flex; align-items: center; width: 88%; margin-top: 22px; }
.stack-node { position: relative; display: flex; flex: 1; gap: 10px; align-items: center; min-width: 0; padding: 15px 12px; border: 1.5px solid var(--ink); border-radius: 16px; background: #fffdf7; box-shadow: 6px 7px 0 rgba(23, 34, 57, .12); transform: rotate(-2deg); }
.stack-node > span { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #ffd0c1; color: #74341f; font-size: 11px; font-weight: 900; }
.stack-node > div { display: grid; min-width: 0; }
.stack-node small { color: #778083; font: 8px var(--mono); }
.stack-node strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; }
.php-node { transform: translateY(28px) rotate(2deg); }
.php-node > span { background: #d9dcfa; color: #404a91; font-size: 9px; }
.agent-node { transform: rotate(2deg); }
.agent-node > span { background: var(--mint); color: #16513e; }
.stack-arrow { position: relative; z-index: 3; flex: 0 0 28px; color: #51656b; font-size: 19px; font-weight: 900; text-align: center; }
.trace-sketch { position: absolute; z-index: 2; right: 12%; bottom: 104px; display: grid; gap: 6px; width: 76%; padding: 12px; border: 1px solid rgba(23,34,57,.35); border-radius: 13px; background: rgba(255,255,255,.85); transform: rotate(-1deg); }
.trace-sketch span { width: var(--w); height: 6px; border-radius: 4px; background: var(--mint-dark); }
.trace-sketch span:nth-child(2) { background: #779fd1; }.trace-sketch span:nth-child(3) { background: var(--orange); }
.visual-note { position: absolute; z-index: 4; right: 40px; bottom: 26px; display: flex; gap: 11px; align-items: center; padding: 14px 18px; border: 1px solid #b5bdbe; border-radius: 18px; background: #fffdf8; box-shadow: 0 10px 24px rgba(36, 48, 54, .12); }
.visual-note > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: #18533f; font-weight: 900; }
.visual-note > div { display: grid; }.visual-note strong { font-size: 12px; }.visual-note small { color: #747d7e; font-size: 9px; }

.lab-heading { width: min(1180px, 100%); margin: 0 auto 48px; }
.step-kicker { color: var(--mint-dark); }
.section-heading h2 { color: var(--ink); }
.lab-layout { width: min(1180px, 100%); margin: 0 auto; grid-template-columns: 210px 1fr; gap: 44px; }
.lab-nav { top: 96px; gap: 5px; padding: 16px; border: 1px solid #b9c1c0; border-radius: 18px; background: rgba(255, 253, 247, .92); box-shadow: 0 10px 25px rgba(43, 57, 58, .07); }
.lab-nav > span { color: #727b7b; }
.lab-nav a { border: 1px solid transparent; border-radius: 10px; color: #626c6d; }
.lab-nav a:hover, .lab-nav a.active { border-color: #9dc9b7; background: #dff2e9; color: #18583f; }
.lab-steps::before { left: 25px; background: #a8b5b0; }
.lab-step { gap: 24px; padding-bottom: 58px; }
.step-number { border: 1.5px solid var(--ink); background: #ffe393; color: var(--ink); box-shadow: 4px 4px 0 rgba(23, 34, 57, .13); }
.step-body { max-width: none; padding: 30px; border: 1.5px solid #b5bebc; border-radius: 22px; background: var(--paper); box-shadow: 0 14px 34px rgba(35, 52, 54, .07); }
.lab-step:nth-child(even) .step-number { background: #ceeaf8; }
.featured-step .step-number { border-color: var(--ink); background: var(--mint); color: var(--ink); box-shadow: 4px 4px 0 #5e9a80; }
.featured-step .step-body { border-color: #7eaa98; box-shadow: 0 16px 38px rgba(33, 93, 70, .12); }
.step-title span { color: var(--mint-dark); }
.step-title h3 { color: var(--ink); font-size: 23px; }
.step-title .time { border: 1px solid #d0b15e; background: #ffecb4; color: #644f1c; }
.step-body > p { color: var(--muted); }
.code-block { border: 1.5px solid #101b27; border-radius: 14px; background: #1c2936; color: #eaf0f1; box-shadow: 0 7px 0 rgba(23, 34, 57, .1); }
.code-head { background: #293847; }
.code-head span { color: #aec1c6; }
.copy-button { border-color: #687d84; border-radius: 999px; color: #d3e0e2; }
.copy-button:hover { border-color: var(--mint); background: rgba(168,223,199,.1); color: var(--mint); }
.callout.warning { border: 1px solid #dfbd6e; border-left: 5px solid #d98b58; border-radius: 14px; background: #fff2cc; color: #574820; }
.checkpoint { border-top-color: #dce1de; }
.checkpoint > span { background: var(--mint); color: #17533d; }
.query-chip { border: 1px solid #a8b5b2; border-radius: 999px; background: #dff2e9; }
.query-chip span { color: var(--mint-dark); }

footer { margin-top: 0; border-top: 1px solid #294d3f; background: #1d5d47; color: #dceee7; }
.footer-brand .brand-mark { border-color: #b4decf; background: #d7efe5; box-shadow: none; }
.footer-brand strong { color: #fff; }
footer > a { color: #fff2ad; }
.toast { border: 1px solid #13543e; border-radius: 999px; background: var(--mint-dark); color: #fff; }

@media (max-width: 1050px) {
  .lab-intro { grid-template-columns: 1fr; }
  .intro-visual { min-height: 480px; border-top: 1.5px solid #aeb9ba; border-left: 0; }
  .lab-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .lab-section { padding-top: 22px; }
  .lab-intro { min-height: auto; margin-bottom: 66px; border-radius: 22px; }
  .intro-copy { padding: 36px 24px 40px; }
  .intro-copy h1 { font-size: 52px; }
  .intro-copy > p { font-size: 14px; }
  .intro-actions { align-items: flex-start; flex-direction: column; }
  .intro-visual { min-height: 390px; }
  .sticker-top { top: 38px; left: 24px; }
  .sticker-side { top: 20px; right: 16px; }
  .stack-illustration { width: 92%; }
  .lab-illustration { width: 106%; margin-top: 42px; transform: none; }
  .lab-heading::after { display: none; }
  .guided-route { grid-template-columns: 1fr; }
  .stack-node { display: grid; justify-items: center; gap: 6px; padding: 11px 7px; text-align: center; }
  .stack-node > span { flex-basis: 32px; width: 32px; height: 32px; }
  .stack-node small { display: none; }
  .stack-node strong { font-size: 10px; }
  .stack-arrow { flex-basis: 18px; font-size: 15px; }
  .trace-sketch { bottom: 86px; }
  .visual-note { right: 18px; bottom: 18px; }
  .lab-heading { margin-bottom: 34px; }
  .lab-heading h2 { font-size: 34px; }
  .lab-step { grid-template-columns: 34px 1fr; gap: 10px; }
  .lab-steps::before { left: 17px; }
  .step-number { width: 34px; height: 34px; box-shadow: 3px 3px 0 rgba(23,34,57,.13); }
  .step-body { padding: 21px 15px; border-radius: 17px; }
  .step-title h3 { font-size: 18px; }
}