/* LoRa Mesh Lab hub: white with Seeed green, deep blue for dark areas. */
body { background: #fbfdf8; }
body > main, .site-footer { position: relative; z-index: 1; }
.shell { width: min(1440px, calc(100% - 64px)); }
.hub-grid { position: fixed; inset: -48px; z-index: 0; pointer-events: none; background: linear-gradient(#86b8370b 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, #86b8370b 1px, transparent 1px) 0 0 / 48px 48px, radial-gradient(ellipse at 85% 5%, #d8f4b47a, transparent 50%), radial-gradient(ellipse at 0 80%, #d0efeb80, transparent 50%); animation: grid-travel 24s linear infinite; }
@keyframes grid-travel { to { transform: translate(48px, 48px); } }
.green { color: var(--green-dark); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #8fc31f33; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand img { width: 147px; height: auto; }
.brand-divider { width: 1px; height: 22px; background: #cdd6d2; }
.brand .sensecap-logo { width: 120px; height: auto; }
#main-nav { display: flex; gap: 10px; }
#main-nav a { padding: 9px 16px; border: 1px solid #cfd8d4; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--blue); background: white; transition: border-color .2s, background .2s; }
#main-nav a:hover { border-color: var(--green); }
#main-nav a[aria-current] { border-color: var(--green); background: var(--green-soft); }
.menu-toggle { display: none; border: 1px solid #cfd8d4; background: white; border-radius: 999px; padding: 8px 14px; font-weight: 600; color: var(--blue); }

/* Home */
.home { padding-top: 56px; }
.pill-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid #d6e6b6; background: #f6faee; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--blue); }
.home h1 { margin: 20px 0 32px; font-size: clamp(36px, 5vw, 60px); line-height: 1.08; letter-spacing: -1.5px; color: var(--blue); max-width: 1120px; }
/* Clip the oversized track without creating an inner scroll area for focused controls. */
.campaign-banner { position: relative; display: flex; align-items: center; min-height: 450px; overflow: clip; border-radius: 24px; background: #071613; color: white; box-shadow: 0 16px 40px #173d201c; isolation: isolate; }
.campaign-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg,#071613f5 0%,#071613df 27%,#07161365 55%,#07161320 100%),linear-gradient(0deg,#07161399,transparent 35%); }
.banner-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 60px; position: relative; z-index: 1; max-width: 640px; }
.banner-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #c9e58f; }
.banner-title { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.12; letter-spacing: -1.4px; }
.banner-title span { color: #b4f56e; display: block; }
.banner-slogan { font-size: 19px; font-weight: 600; color: #e2eadf; margin-bottom: 8px; }
.banner-devices { --demo-size: 220px; --demo-gap: 32px; position: absolute; z-index: -2; top: -90px; right: -96px; width: calc(var(--demo-size) * 3 + var(--demo-gap) * 2); height: calc(100% + 180px); transform: rotate(-14deg); transform-origin: 50% 0; }
.banner-track { display: flex; flex-direction: column; width: 100%; }
.banner-track.is-loop-ready { animation: demo-scroll 52s linear infinite; }
.banner-group { display: grid; flex-shrink: 0; grid-template-columns: repeat(3, var(--demo-size)); gap: var(--demo-gap); padding-bottom: var(--demo-gap); }
.demo-device { position: relative; width: var(--demo-size); }
.banner-devices .demo-device img { display: block; position: static; width: 100%; height: auto; transform: none; margin: 0; filter: drop-shadow(0 20px 22px #0008); }
.demo-device canvas { position: absolute; left: 18%; top: 56.5%; width: 71%; height: 35.4%; border-radius: 2px; }
.campaign-banner.motion-idle .banner-track { animation-play-state: paused; }
@keyframes demo-scroll { from { transform: translateY(calc(-100% / 3)); } to { transform: translateY(calc(-200% / 3)); } }
.motion-control { position: absolute; right: 18px; bottom: 16px; z-index: 3; padding: 7px 12px; color: #e1edd5; font-size: 11px; background: #071613b3; border: 1px solid #cadfba4d; border-radius: 99px; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after, .motion-paused::before, .motion-paused::after { animation-play-state: paused !important; }
.motion-paused .hub-grid { animation-play-state: paused; }

/* Sections */
.hub-section { padding-block: 72px 24px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 2px dotted #c9d4cf; }
.section-head h2, .activities h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.8px; color: var(--blue); }
.slogan { margin-top: 8px; font-size: 16px; color: var(--muted); }
.search { display: flex; align-items: center; gap: 10px; width: min(360px, 100%); padding: 0 14px; height: 46px; border: 1px solid #cfd8d4; border-radius: 12px; background: white; color: var(--muted); }
.search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px #8fc31f33; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 15px; color: var(--ink); }
.search kbd { font: 12px ui-monospace, monospace; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }

/* Filters */
.filter-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.filter-line { display: flex; align-items: center; gap: 16px; }
.filter-label { width: 72px; flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--blue); }
.tabs-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; flex: 1; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 104px; padding: 10px 10px 12px; border: 0; border-bottom: 3px solid transparent; background: none; color: #4b5b61; font-size: 13px; font-weight: 500; line-height: 1.25; text-align: center; scroll-snap-align: start; }
.tab span { max-width: 120px; }
.tab-icon { color: #3c4b50; }
.tab:hover { color: var(--blue); }
.tab[aria-pressed="true"] { color: var(--green-dark); font-weight: 700; border-bottom-color: var(--green); }
.tab[aria-pressed="true"] .tab-icon { color: var(--green-dark); }
.tabs-next { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #cfd8d4; background: white; font-size: 18px; color: var(--blue); }
.tabs-next:hover { border-color: var(--green); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.chip { padding: 7px 14px; border: 1px solid #cfd8d4; border-radius: 999px; background: white; font-size: 13px; font-weight: 500; color: var(--ink); }
.chip:hover { border-color: var(--green); }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--blue-deep); font-weight: 700; }
.view-by { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 14px; color: var(--muted); align-self: flex-start; padding-top: 6px; }
.view-by button { border: 0; background: none; padding: 2px 4px; font-weight: 600; color: var(--muted); }
.view-by button[aria-pressed="true"] { color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.result-count { margin: 22px 0 16px; font-size: 13px; color: var(--muted); }

/* Cards */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-card { display: flex; flex-direction: column; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.project-card:hover { transform: translateY(-3px); border-color: #c5dd92; box-shadow: 0 16px 36px #003a4a17; }
.card-cover { position: relative; height: 230px; background: white; border-bottom: 1px solid #eef1ee; }
.cover-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; }
.cover-button img { width: 100%; height: 100%; object-fit: contain; padding: 64px 14px 14px; }
.cover-tags { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.cover-tags span { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #ffffffeb; color: var(--blue); box-shadow: 0 2px 6px #0002; }
.cover-tags .tag-category { background: var(--green); color: var(--blue-deep); }
.card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.card-title { padding: 0; border: 0; background: none; text-align: left; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--blue); }
.card-title:hover { color: var(--green-dark); }
.card-description { font-size: 14px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #eef1ee; }
.card-meta { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.hearts { color: #d0473b; font-weight: 600; }
.view-project { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--green); background: white; color: var(--blue); font-size: 13px; font-weight: 700; }
.view-project:hover { background: var(--green); }
.fallback-cover { display: grid; place-content: center; gap: 6px; height: 100%; text-align: center; color: var(--green-dark); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; background: var(--green-soft); }
.fallback-cover span:first-child { font-size: 32px; }
.empty-state { padding: 56px 20px; text-align: center; border: 1px dashed #cfd8d4; border-radius: 16px; background: white; }
.empty-state h3 { color: var(--blue); margin-bottom: 8px; }
.empty-state p { color: var(--muted); margin-bottom: 18px; }

/* Activity sections alternate mint, blue and warm green surfaces. */
.activities { margin-top: 72px; padding-block: 72px; color: var(--ink); background: radial-gradient(ellipse at 0 0,#e8f3beaa,transparent 55%), linear-gradient(135deg,#edf7e5d9,#e0f1f3eb 60%,#eef2fbe6); border-block: 1px solid #d3e4d1; position: relative; overflow: hidden; isolation: isolate; }
.activities h2 { color: var(--blue); }
.activities::before { content: ""; position: absolute; width: 500px; height: 500px; border: 1px solid #8cb37533; border-radius: 50%; right: -120px; top: 20%; z-index: -1; box-shadow: 0 0 0 70px #89b3690c,0 0 0 140px #89b36908; animation: activity-pulse 9s ease-in-out infinite alternate; }
@keyframes activity-pulse { to { transform: scale(1.2) translateY(-20px); } }
.activities .slogan { color: #59767a; }
.featured-activity { position: relative; isolation: isolate; contain: paint; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-top: 36px; padding: 40px; border-radius: 20px; background: linear-gradient(90deg, #031f25 0%, #053f49 100%); border: 1px solid #ffffff26; color: #fff; }
.featured-copy, .featured-media { position: relative; z-index: 1; }
.featured-waves { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.campaign-banner > .featured-waves { mask-image: linear-gradient(90deg, #000 35%, #0009 62%, transparent 92%); }
.featured-activity.featured-paused .featured-shot { animation-play-state: paused; }
.featured-motion { position: absolute; right: 16px; bottom: 12px; z-index: 2; border: 1px solid #ffffff30; border-radius: 99px; padding: 6px 10px; background: #031f2580; color: #c7dada; font-size: 11px; }
.featured-label { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #b4dd63; margin-bottom: 14px; }
.featured-copy h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -.8px; }
.featured-copy .green { color: #a6d944; }
.featured-slogan { margin: 14px 0 10px; font-size: 18px; font-weight: 700; }
.featured-copy p:not(.featured-label):not(.featured-slogan) { color: #bdced0; line-height: 1.6; max-width: 440px; margin-bottom: 24px; }
.featured-media { position: relative; height: 320px; border-radius: 16px; background: radial-gradient(circle at 50% 55%, #8fc31f33, transparent 60%); }
.featured-product { position: absolute; left: 50%; top: 50%; width: auto; height: 300px; transform: translate(-50%, -50%) rotate(6deg); z-index: 1; filter: drop-shadow(0 20px 30px #0009); }
.featured-shot { position: absolute; width: 140px; height: auto; filter: drop-shadow(0 12px 20px #0008); }
.shot-a { left: 2%; top: 12%; transform: rotate(-14deg); }
.shot-b { right: 2%; bottom: 6%; transform: rotate(12deg); }
.past-title { margin: 48px 0 12px; font-size: 22px; }
.past-list { list-style: none; margin: 0; padding: 0; }
.past-list li { display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; align-items: center; padding: 24px; margin-top: 14px; border-radius: 16px; background: linear-gradient(110deg,#f5f9e9e6,#e3efdfb3); border-top: 1px solid #aac6b450; }
.past-year { font-size: 14px; color: #6d8177; font-variant-numeric: tabular-nums; }
.past-list h4 { font-size: 17px; margin-bottom: 6px; }
.past-list p { font-size: 14px; color: #59767a; line-height: 1.5; }
.past-list a { font-size: 14px; font-weight: 700; color: #648819; white-space: nowrap; }
.past-list a:hover { text-decoration: underline; }

.past-list li:nth-child(2) { background: linear-gradient(110deg,#eff5ffcc,#edf4efe6); }
.featured-shot { animation: activity-float 10s ease-in-out infinite alternate; }
.shot-b { animation-delay: -5s; }
@keyframes activity-float { to { translate: 0 -14px; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.contact-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: white; transition: border-color .2s, transform .2s; }
.contact-card:hover { border-color: var(--green); transform: translateY(-2px); }
.contact-card span:first-child { font-size: 13px; font-weight: 600; color: var(--muted); }
.contact-card strong { font-size: 16px; color: var(--blue); overflow-wrap: anywhere; }
.site-footer { margin-top: 72px; border-top: 1px solid var(--line); background: white; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 24px; font-size: 13px; color: var(--muted); }

/* Project detail dialog */
.detail-image { width: 100%; max-height: 420px; object-fit: contain; background: #f4f7f1; }
#detail-content > .fallback-cover { height: 240px; }
.dialog-body { padding: 28px 36px 36px; }
.dialog-body .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--green-dark); margin-bottom: 8px; }
.dialog-body h2 { font-size: 28px; color: var(--blue); }
.detail-meta { margin-top: 6px; font-size: 14px; color: var(--muted); }
.dialog-body h3 { margin: 26px 0 10px; font-size: 16px; color: var(--blue); }
.dialog-body p, .dialog-body li { font-size: 15px; line-height: 1.7; }
.dialog-body ol, .dialog-body ul { margin: 0; padding-left: 22px; }
.detail-resources a { color: var(--green-dark); font-weight: 600; text-decoration: underline; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 5px 12px; border-radius: 999px; background: var(--green-soft); font-size: 13px; font-weight: 600; color: var(--blue); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
#detail-like[aria-pressed="true"] { border-color: #d0473b; color: #d0473b; }
.thread { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.comment { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--green-soft); }
.comment-meta { font-size: 13px !important; color: var(--muted); }
.comment-meta strong { color: var(--blue); }
.comment-meta a { color: var(--green-dark); }
.comment-body { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-empty { color: var(--muted); }
.engagement-note, .detail-attribution { margin-top: 16px; font-size: 13px !important; color: var(--muted); }

@media (max-width: 1080px) {
  #main-nav a { padding: 8px 12px; font-size: 13px; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; gap: 6px; }
  #main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: 14px 16px 18px; background: white; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px #003a4a1a; }
  #main-nav.is-open { display: flex; }
  #main-nav a { text-align: center; padding: 12px; }
  .filter-line { flex-wrap: wrap; }
  .tabs-wrap, .chips { flex: 1 1 100%; }
  .view-by { width: 100%; padding-top: 0; }
  .featured-activity { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .brand img { width: 112px; }
  .brand { gap: 10px; }
  .brand .sensecap-logo { width: 100px; }
  .home { padding-top: 32px; }
  .shell { width: calc(100% - 32px); }
  .campaign-banner { min-height: 560px; align-items: flex-start; }
  .banner-copy { padding: 32px 26px; gap: 14px; }
  .banner-title { font-size: 38px; }
  .banner-slogan { font-size: 16px; }
  .banner-devices { --demo-size: 130px; --demo-gap: 22px; top: 230px; right: -46px; transform: rotate(-12deg); }
  .banner-track.is-loop-ready { animation-duration: 40s; }
  .campaign-banner::after { background: linear-gradient(180deg,#071613 0%,#071613ef 32%,#07161366 66%,#07161311 100%); }
  .campaign-banner > .featured-waves { mask-image: linear-gradient(180deg, #000 32%, #0008 65%, transparent 94%); }
  .contribute-callout { align-items: flex-start; flex-direction: column; }
  .section-head { flex-direction: column; align-items: stretch; }
  .search { width: 100%; }
  .filter-label { width: 100%; }
  .tab { min-width: 92px; }
  .project-grid, .contact-grid { grid-template-columns: 1fr; }
  .featured-activity { padding: 26px 22px; }
  .featured-media { height: 260px; }
  .featured-product { height: 240px; }
  .featured-shot { width: 100px; }
  .past-list li { grid-template-columns: 1fr; gap: 8px; }
  .dialog-body { padding: 22px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .header-inner { gap: 8px; }
  .brand { gap: 8px; }
  .brand img { width: 88px; }
  .brand .sensecap-logo { width: 82px; }
  .menu-toggle { padding-inline: 10px; font-size: 13px; }
}

/* Fast access to the maker's resources and public posts. */
.card-links { display: grid; gap: 8px; padding-block: 4px 10px; }
.card-links-label { font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #667868; }
.resource-links { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.resource-link { padding: 6px 9px; border: 1px solid #d8e4d1; border-radius: 7px; background: linear-gradient(135deg,#f5faee,#f1f7f4); color: #43632e; font-size: 12px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.resource-link:hover { background: #e8f3d6; border-color: #9fc967; }
.social-links .resource-link { background: #f0f6fc; border-color: #d5e3ec; color: #365e71; }
.no-links { font-size: 12px; color: #849185; }
.more-links { border: 0; background: transparent; color: var(--green-dark); font-size: 12px; text-decoration: underline; }
.detail-link-groups .resource-link { padding: 12px 16px; font-size: 14px; }
.contribute-callout { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 32px; padding: 30px; border: 1px dashed #abc97d; border-radius: 16px; background: linear-gradient(100deg,#eaf5dce6,#f6fbefc9); }
.contribute-callout h3 { font-size: 22px; color: var(--blue); }
.contribute-callout p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.learn-more { justify-content: center; background: linear-gradient(120deg,#e4f1ce,#ecf6e4); }
.submission-section { padding-top: 48px; }
.submission-panel { border: 1px solid #cbdcc1; border-radius: 18px; background: white; }
.submission-panel > summary { padding: 28px 32px; cursor: pointer; list-style: none; border-radius: 18px; background: linear-gradient(110deg, #edf6e0, #eff8f4); }
.submission-panel > summary::-webkit-details-marker { display: none; }
.submission-panel > summary h2 { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--blue); font-size: clamp(24px, 3vw, 30px); }
.submission-toggle { display: flex; align-items: center; gap: 10px; color: #527326; font-size: 14px; font-weight: 600; white-space: nowrap; }
.submission-panel .when-open { display: none; }
.submission-panel[open] .when-closed { display: none; }
.submission-panel[open] .when-open { display: inline; }
.submission-panel[open] .submission-toggle svg { transform: rotate(180deg); }
.submission-panel[open] > summary { border-radius: 18px 18px 0 0; border-bottom: 1px solid #dce8d5; }
.submission-intro { padding: 28px 32px 0; color: var(--muted); line-height: 1.6; }
.submission-panel #project-form-mount { padding-bottom: 24px; }
.submission-panel .project-form { border: 0; }
.submission-panel #form-message { margin-inline: 32px; }
@media (max-width: 640px) {
  .submission-panel > summary { padding: 22px 20px; }
  .submission-panel > summary h2 { align-items: flex-start; flex-direction: column; gap: 10px; }
  .submission-toggle { font-size: 13px; }
  .submission-intro { padding: 22px 20px 0; }
  .submission-panel #form-message { margin-inline: 20px; }
}

.banner-title .model-name { display: inline; white-space: nowrap; }
.hub-tools { display: flex; align-items: center; gap: 12px; }
.hub-tools .button { font-size: 13px; padding-inline: 16px; }
@media (max-width: 900px) { .hub-tools { flex-direction: column-reverse; align-items: flex-start; } }
@media (max-width: 640px) { .hub-tools { align-items: stretch; } .hub-tools .button { align-self: flex-start; } }