
/* Never Leave The Playground — CSS
   Version: v5 (full-site bundle) */
:root{ --nlp-accent:#2563eb; --nlp-accent-dark:#1e40af; --nlp-ink:#111827; --nlp-muted:#6b7280; --nlp-ring:#60a5fa; }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:#fff; color:var(--nlp-ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji"; }
a{ color:inherit; text-underline-offset:2px } a:hover{ text-decoration-thickness:from-font }
a:focus-visible{ outline:2px solid var(--nlp-ring); outline-offset:2px; border-radius:.375rem }
img{ max-width:100%; height:auto; display:block }
.nlp-copy p{ line-height:1.7; margin:.6rem 0; color:#374151 }
.card{ border:1px solid #e5e7eb; border-radius:1rem; padding:1rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04) }
.card:hover{ box-shadow:0 6px 22px rgba(0,0,0,.07) }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.25rem; border-radius:9999px; background:var(--nlp-accent);
      color:#fff; font-weight:600; transition:background .2s ease, transform .08s ease-in-out }
.btn:hover{ background:var(--nlp-accent-dark) } .btn:active{ transform:translateY(1px) }
.video-frame{ border-radius:1rem; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.08) }
.aspect-video{ aspect-ratio:16/9 }
.aspect-9x16{ position:relative; width:100%; padding-top:177.78% } .aspect-9x16>*{ position:absolute; inset:0; width:100%; height:100% }
.block{ display:block } .hidden{ display:none } .flex{ display:flex } .inline-flex{ display:inline-flex }
.flex-col{ flex-direction:column } .flex-wrap{ flex-wrap:wrap } .items-center{ align-items:center } .justify-between{ justify-content:space-between }
.grid{ display:grid } .max-w-7xl{ max-width:80rem } .max-w-3xl{ max-width:48rem }
.px-3{ padding-left:.75rem; padding-right:.75rem } .py-2{ padding-top:.5rem; padding-bottom:.5rem }
.px-4{ padding-left:1rem; padding-right:1rem } .py-4{ padding-top:1rem; padding-bottom:1rem } .py-6{ padding-top:1.5rem; padding-bottom:1.5rem }
.py-10{ padding-top:2.5rem; padding-bottom:2.5rem } .py-12{ padding-top:3rem; padding-bottom:3rem } .pb-4{ padding-bottom:1rem }
.mx-auto{ margin-left:auto; margin-right:auto } .mt-2{ margin-top:.5rem } .mt-3{ margin-top:.75rem } .mt-4{ margin-top:1rem }
.mt-6{ margin-top:1.5rem } .mt-16{ margin-top:4rem } .mb-2{ margin-bottom:.5rem } .mb-3{ margin-bottom:.75rem } .mb-4{ margin-bottom:1rem } .mb-8{ margin-bottom:2rem }
.my-8{ margin-top:2rem; margin-bottom:2rem } .my-10{ margin-top:2.5rem; margin-bottom:2.5rem } .my-12{ margin-top:3rem; margin-bottom:3rem }
.gap-2{ gap:.5rem } .gap-3{ gap:.75rem } .gap-4{ gap:1rem } .gap-6{ gap:1.5rem } .gap-8{ gap:2rem }
.border{ border:1px solid #e5e7eb } .border-b{ border-bottom:1px solid #e5e7eb } .border-t{ border-top:1px solid #e5e7eb }
.bg-white{ background:#fff } .rounded{ border-radius:.375rem } .rounded-xl{ border-radius:.75rem }
.sticky{ position:sticky } .top-0{ top:0 } .z-40{ z-index:40 }
.text-xs{ font-size:.75rem; line-height:1rem } .text-sm{ font-size:.875rem; line-height:1.25rem } .text-xl{ font-size:1.25rem; line-height:1.75rem }
.text-2xl{ font-size:1.5rem; line-height:2rem } .text-3xl{ font-size:1.875rem; line-height:2.25rem } .text-4xl{ font-size:2.25rem; line-height:2.5rem }
.font-medium{ font-weight:500 } .font-semibold{ font-weight:600 } .font-bold{ font-weight:700 } .font-extrabold{ font-weight:800 }
.text-gray-500{ color:#6b7280 } .text-gray-600{ color:#4b5563 } .text-gray-700{ color:#374151 } .text-gray-900{ color:#111827 }
.underline{ text-decoration:underline } .no-underline{ text-decoration:none }
.list-disc{ list-style-type:disc } .pl-4{ padding-left:1rem } .space-y-1>:not([hidden])~:not([hidden]){ margin-top:.25rem }
.hover\:bg-gray-50:hover{ background:#f9fafb } .hover\:underline:hover{ text-decoration:underline } .hover\:no-underline:hover{ text-decoration:none }
@media (min-width:768px){
  .md\:flex{ display:flex } .md\:hidden{ display:none } .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)) } .md\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .md\:items-center{ align-items:center } .md\:justify-between{ justify-content:space-between }
  .md\:text-4xl{ font-size:2.25rem; line-height:2.5rem }
}
