pedroivospatial/pis-spatial-intelligence-lab

1:root {2  color-scheme: dark;3  --ink: #f7fbff;4  --muted: #aebdca;5  --subtle: #7c8d9d;6  --canvas: #050b13;7  --panel: #081521;8  --panel-strong: #0b1b2a;9  --line: rgba(190, 218, 238, 0.16);10  --line-strong: rgba(190, 218, 238, 0.28);11  --cyan: #42c4f4;12  --cyan-soft: #a7e5fb;13  --amber: #f6bd3b;14  --amber-soft: #ffe6a8;15  --green: #79d6ae;16  --radius-lg: 28px;17  --radius-md: 18px;18  --shadow: 0 30px 90px rgba(0, 0, 0, 0.35);19}20 21* { box-sizing: border-box; }22 23html { scroll-behavior: smooth; }24 25body {26  margin: 0;27  min-width: 320px;28  background:29    radial-gradient(circle at 76% 4%, rgba(34, 143, 193, 0.13), transparent 30rem),30    radial-gradient(circle at 4% 36%, rgba(246, 189, 59, 0.07), transparent 25rem),31    var(--canvas);32  color: var(--ink);33  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;34  line-height: 1.55;35}36 37body::before {38  content: "";39  position: fixed;40  inset: 0;41  pointer-events: none;42  opacity: 0.22;43  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),44    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);45  background-size: 48px 48px;46  mask-image: linear-gradient(to bottom, black, transparent 70%);47}48 49a { color: inherit; }50 51button, a { -webkit-tap-highlight-color: transparent; }52 53.skip-link {54  position: fixed;55  left: 1rem;56  top: -5rem;57  z-index: 20;58  padding: 0.75rem 1rem;59  border-radius: 0.5rem;60  background: var(--ink);61  color: var(--canvas);62}63 64.skip-link:focus { top: 1rem; }65 66.site-header,67main,68footer {69  width: min(1320px, calc(100% - 48px));70  margin-inline: auto;71}72 73.site-header {74  min-height: 96px;75  display: flex;76  align-items: center;77  justify-content: space-between;78  gap: 2rem;79  border-bottom: 1px solid var(--line);80}81 82.brand {83  display: inline-flex;84  align-items: center;85  gap: 0.9rem;86  text-decoration: none;87}88 89.brand-mark {90  width: 42px;91  height: 42px;92  display: grid;93  grid-template-columns: repeat(3, 1fr);94  gap: 3px;95  transform: skewX(-9deg);96}97 98.brand-mark i { display: block; border-radius: 3px; }99.brand-mark i:nth-child(1) { background: #f8fafc; height: 66%; align-self: end; }100.brand-mark i:nth-child(2) { background: var(--cyan); height: 100%; }101.brand-mark i:nth-child(3) { background: var(--amber); height: 45%; align-self: end; }102 103.brand strong,104.brand small { display: block; }105 106.brand strong { font-size: 0.96rem; letter-spacing: 0.02em; }107.brand small { color: var(--subtle); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }108 109.header-state {110  display: inline-flex;111  align-items: center;112  gap: 0.6rem;113  color: var(--muted);114  font-size: 0.8rem;115  letter-spacing: 0.08em;116  text-transform: uppercase;117}118 119.status-dot {120  width: 8px;121  height: 8px;122  border-radius: 999px;123  background: var(--amber);124  box-shadow: 0 0 0 5px rgba(246, 189, 59, 0.12);125}126 127.hero {128  display: grid;129  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.55fr);130  gap: clamp(3rem, 7vw, 7rem);131  align-items: end;132  padding: clamp(5.5rem, 10vw, 10rem) 0 4rem;133}134 135.eyebrow,136.scene-eyebrow {137  margin: 0 0 0.8rem;138  color: var(--cyan-soft);139  font-size: 0.72rem;140  font-weight: 700;141  letter-spacing: 0.16em;142  text-transform: uppercase;143}144 145h1, h2, h3, p { margin-top: 0; }146 147h1 {148  max-width: 970px;149  margin-bottom: 1.6rem;150  font-size: clamp(3rem, 7vw, 6.6rem);151  font-weight: 620;152  letter-spacing: -0.055em;153  line-height: 0.96;154}155 156.hero-lede {157  max-width: 730px;158  margin-bottom: 2rem;159  color: var(--muted);160  font-size: clamp(1.05rem, 1.6vw, 1.32rem);161}162 163.hero-badges {164  display: flex;165  flex-wrap: wrap;166  gap: 0.55rem;167}168 169.hero-badges span,170.manifest-state,171.precomputed-chip {172  border: 1px solid var(--line-strong);173  border-radius: 999px;174  background: rgba(12, 31, 47, 0.72);175  color: var(--cyan-soft);176  font-size: 0.74rem;177  letter-spacing: 0.05em;178}179 180.hero-badges span { padding: 0.5rem 0.78rem; }181 182.mode-card {183  display: flex;184  gap: 1.15rem;185  padding: 1.5rem;186  border-top: 1px solid var(--line-strong);187  border-bottom: 1px solid var(--line-strong);188}189 190.mode-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }191.mode-card .mode-label { margin-bottom: 0.35rem; color: var(--ink); font-weight: 700; }192 193.mode-number {194  color: var(--amber);195  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;196  font-size: 1.55rem;197  line-height: 1;198}199 200.boundary-banner {201  display: grid;202  grid-template-columns: max-content 1fr;203  gap: 1.25rem;204  align-items: center;205  margin-bottom: 1.25rem;206  padding: 1rem 1.2rem;207  border: 1px solid rgba(246, 189, 59, 0.28);208  border-radius: 14px;209  background: rgba(246, 189, 59, 0.07);210  color: var(--amber-soft);211}212 213.boundary-banner strong { font-size: 0.72rem; letter-spacing: 0.13em; }214.boundary-banner span { color: #d6c9a9; font-size: 0.88rem; }215 216.lab-shell {217  padding: clamp(1.4rem, 3vw, 2.4rem);218  border: 1px solid var(--line-strong);219  border-radius: var(--radius-lg);220  background: linear-gradient(145deg, rgba(11, 27, 42, 0.96), rgba(5, 14, 23, 0.98));221  box-shadow: var(--shadow);222}223 224.lab-header,225.metrics-heading,226.scene-intro {227  display: flex;228  align-items: end;229  justify-content: space-between;230  gap: 2rem;231}232 233.lab-header { margin-bottom: 1.6rem; }234 235.lab-header h2,236.metrics-heading h3,237.scene-intro h3,238.provenance-grid h2,239.continuity-card h2 {240  margin-bottom: 0;241  letter-spacing: -0.03em;242}243 244.lab-header h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }245.manifest-state { padding: 0.5rem 0.78rem; white-space: nowrap; }246.manifest-state.is-ready { color: var(--green); }247.manifest-state.is-error { color: #ffaaa1; border-color: rgba(255, 130, 118, 0.35); }248 249.scene-tabs {250  display: grid;251  grid-template-columns: repeat(3, 1fr);252  border-top: 1px solid var(--line);253  border-bottom: 1px solid var(--line);254}255 256.scene-tab {257  display: flex;258  align-items: center;259  gap: 0.8rem;260  min-height: 64px;261  padding: 0.75rem 1rem;262  border: 0;263  border-right: 1px solid var(--line);264  background: transparent;265  color: var(--subtle);266  cursor: pointer;267  font: inherit;268  text-align: left;269  transition: color 160ms ease, background 160ms ease;270}271 272.scene-tab:last-child { border-right: 0; }273.scene-tab span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; }274.scene-tab:hover { color: var(--ink); background: rgba(255,255,255,.025); }275.scene-tab.is-active { color: var(--ink); background: rgba(66, 196, 244, 0.075); }276.scene-tab.is-active span { color: var(--cyan); }277.scene-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }278 279.scene-intro { padding: 2rem 0 1.1rem; }280.scene-intro h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }281.scene-intro > p { max-width: 560px; margin-bottom: 0; color: var(--muted); }282 283.visual-grid {284  display: grid;285  grid-template-columns: 1fr 1fr;286  gap: 1rem;287}288 289.visual-panel {290  margin: 0;291  overflow: hidden;292  border: 1px solid var(--line);293  border-radius: var(--radius-md);294  background: #050c14;295}296 297.panel-heading {298  display: flex;299  justify-content: space-between;300  gap: 1rem;301  padding: 0.85rem 1rem;302  border-bottom: 1px solid var(--line);303}304 305.panel-heading span { color: var(--subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; }306.panel-heading strong { font-size: 0.82rem; font-weight: 650; }307.visual-panel img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }308.image-wrap { position: relative; }309.precomputed-chip { position: absolute; top: 0.9rem; right: 0.9rem; padding: 0.38rem 0.65rem; background: rgba(5, 12, 20, 0.88); color: var(--amber-soft); }310.visual-panel figcaption { padding: 0.72rem 1rem 0.85rem; color: var(--subtle); font-size: 0.76rem; }311code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }312 313.metrics {314  margin-top: 1rem;315  padding: 1.35rem;316  border: 1px solid var(--line);317  border-radius: var(--radius-md);318  background: rgba(255,255,255,.018);319}320 321.metrics-heading { margin-bottom: 1rem; }322.metrics-heading > p { max-width: 420px; margin-bottom: 0; color: var(--subtle); font-size: 0.78rem; text-align: right; }323.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); }324.metric-grid article { min-height: 112px; padding: 1rem; border-left: 1px solid var(--line); }325.metric-grid article:first-child { border-left: 0; }326.metric-grid span { display: block; margin-bottom: 0.7rem; color: var(--subtle); font-size: 0.75rem; }327.metric-grid strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.55rem, 3vw, 2.3rem); font-weight: 520; }328.score-card strong { color: var(--amber); }329.score-card small { color: var(--subtle); font-size: 0.8rem; }330 331.provenance-grid {332  display: grid;333  grid-template-columns: 1.15fr 0.85fr;334  gap: 1rem;335  margin-top: 1rem;336}337 338.provenance-grid > article,339.continuity-card {340  padding: clamp(1.5rem, 3vw, 2.3rem);341  border: 1px solid var(--line);342  border-radius: var(--radius-lg);343  background: rgba(8, 21, 33, 0.78);344}345 346.provenance-grid h2 { margin-bottom: 1.8rem; font-size: clamp(1.6rem, 2.8vw, 2.45rem); }347dl { margin: 0; }348dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }349dt { color: var(--subtle); font-size: 0.76rem; }350dd { margin: 0; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }351dd a { color: var(--cyan-soft); text-underline-offset: 3px; }352 353.privacy-card { background: linear-gradient(145deg, rgba(18, 42, 49, 0.75), rgba(8, 21, 33, 0.9)) !important; }354.privacy-card > p:not(.eyebrow) { color: var(--muted); }355.privacy-card ul { display: grid; gap: 0.7rem; padding: 0; margin: 1.5rem 0 0; list-style: none; }356.privacy-card li { display: flex; align-items: center; gap: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); color: #c8d6df; font-size: 0.86rem; }357.privacy-card li span { color: var(--green); }358 359.continuity-card {360  display: grid;361  grid-template-columns: 1fr 1fr;362  gap: 3rem;363  align-items: end;364  margin-top: 1rem;365}366 367.continuity-card > p { margin-bottom: 0; color: var(--muted); }368 369footer {370  display: flex;371  justify-content: space-between;372  gap: 2rem;373  padding: 2.4rem 0 3.5rem;374  color: var(--subtle);375  font-size: 0.78rem;376}377 378footer p { margin: 0; }379footer a { color: var(--cyan-soft); text-underline-offset: 3px; }380 381.noscript-note {382  position: fixed;383  inset: auto 1rem 1rem;384  z-index: 10;385  padding: 1rem;386  border: 1px solid var(--amber);387  background: #201806;388  color: var(--amber-soft);389}390 391@media (max-width: 920px) {392  .hero,393  .provenance-grid,394  .continuity-card { grid-template-columns: 1fr; }395  .hero { gap: 3rem; }396  .visual-grid { grid-template-columns: 1fr; }397  .metric-grid { grid-template-columns: repeat(2, 1fr); }398  .metric-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }399  .metric-grid article:nth-child(4) { border-top: 1px solid var(--line); }400}401 402@media (max-width: 680px) {403  .site-header, main, footer { width: min(100% - 28px, 1320px); }404  .site-header { min-height: 80px; }405  .header-state { display: none; }406  .hero { padding-top: 4.5rem; }407  h1 { font-size: clamp(2.75rem, 15vw, 4.2rem); }408  .boundary-banner { grid-template-columns: 1fr; gap: 0.35rem; }409  .lab-header, .metrics-heading, .scene-intro { align-items: flex-start; flex-direction: column; gap: 0.8rem; }410  .metrics-heading > p { text-align: left; }411  .scene-tabs { grid-template-columns: 1fr; }412  .scene-tab { min-height: 52px; border-right: 0; border-bottom: 1px solid var(--line); }413  .scene-tab:last-child { border-bottom: 0; }414  .metric-grid { grid-template-columns: 1fr; }415  .metric-grid article,416  .metric-grid article:nth-child(2) { border-left: 0; border-top: 1px solid var(--line); }417  .metric-grid article:first-child { border-top: 0; }418  dl > div { grid-template-columns: 1fr; gap: 0.25rem; }419  footer { flex-direction: column; gap: 0.7rem; }420}421 422@media (prefers-reduced-motion: reduce) {423  html { scroll-behavior: auto; }424  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }425}426