@font-face{font-family:Chivo;src:url(/assets/chivo.woff2) format("woff2");font-display:swap}@font-face{font-family:"IBM Plex Sans";src:url(/assets/ibmplexsans.woff2) format("woff2");font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/ibmplexmono.woff2) format("woff2");font-display:swap}

.ss-treemap-2026 {
  --ss-primary: #C98A34;
  --ss-primary-hover: #B47725;
  --ss-secondary: #8A7051;
  --ss-accent: #86A8C8;
  --ss-bg: #F4EEE4;
  --ss-bg-alt: #EADBC8;
  --ss-card: #FFF9F0;
  --ss-panel: #D9D1C4;
  --ss-text: #2F261E;
  --ss-text-dim: #6B5846;
  --ss-border: #B7926A;
  --ss-display: 'Chivo', sans-serif;
  --ss-body: 'IBM Plex Sans', sans-serif;
  --ss-mono: 'IBM Plex Mono', monospace;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(201, 138, 52, 0.16), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(134, 168, 200, 0.18), transparent 24%),
    linear-gradient(180deg, #F7F1E8 0%, #EFE4D4 56%, #E7D6BF 100%);
  color: var(--ss-text);
  font-family: var(--ss-body);
  padding: 78px 24px 58px;
}

.ss-treemap-2026,
.ss-treemap-2026 * {
  box-sizing: border-box;
}

.ss-treemap-2026__shell {
  max-width: 1220px;
  margin: 0 auto;
}

.ss-treemap-2026__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(183, 146, 106, 0.55);
  border-radius: 999px;
  background: rgba(255, 249, 240, 0.78);
  box-shadow: 0 8px 18px rgba(74, 54, 29, 0.08);
  font: 600 13px/1 var(--ss-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ss-treemap-2026__eyebrow i {
  color: var(--ss-primary);
}

.ss-treemap-2026__grid {
  display: grid;
  grid-template-columns: minmax(0, 510px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-top: 24px;
}

.ss-treemap-2026__content {
  position: relative;
  z-index: 2;
}

.ss-treemap-2026 h1 {
  margin: 18px 0 18px;
  font-family: var(--ss-display);
  font-size: clamp(2.9rem, 6vw, 4.8rem);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.04em;
  max-width: 500px;
}

.ss-treemap-2026__lead {
  max-width: 470px;
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.72;
  color: var(--ss-text-dim);
}

.ss-treemap-2026__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.ss-treemap-2026__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid var(--ss-border);
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.ss-treemap-2026__btn:hover {
  transform: translateY(-2px);
}

.ss-treemap-2026__btn--primary {
  background: linear-gradient(180deg, #D89A46 0%, #C98A34 100%);
  color: #FFF9F0;
  box-shadow: 0 16px 28px rgba(180, 119, 37, 0.24);
}

.ss-treemap-2026__btn--secondary {
  background: rgba(255, 249, 240, 0.82);
  color: var(--ss-text);
}

.ss-treemap-2026__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 500px;
}

.ss-treemap-2026__fact {
  padding: 14px 16px;
  border: 1px solid rgba(183, 146, 106, 0.42);
  border-radius: 14px;
  background: rgba(255, 249, 240, 0.76);
  box-shadow: 0 10px 18px rgba(74, 54, 29, 0.06);
}

.ss-treemap-2026__fact strong {
  display: block;
  margin-bottom: 5px;
  font: 800 18px/1 var(--ss-display);
}

.ss-treemap-2026__fact span {
  display: block;
  color: var(--ss-text-dim);
  font-size: 13px;
  line-height: 1.45;
}

.ss-treemap-2026__visual {
  position: relative;
  min-height: 620px;
}

.ss-treemap-2026__window {
  position: relative;
  width: min(100%, 690px);
  margin: 0 auto;
  border: 1px solid rgba(134, 112, 81, 0.32);
  border-radius: 18px;
  overflow: hidden;
  background: #F8F4ED;
  box-shadow: 0 22px 60px rgba(74, 54, 29, 0.18);
}

.ss-treemap-2026__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 14px;
  background: linear-gradient(180deg, #E3E1DC 0%, #D2D1CC 100%);
  border-bottom: 1px solid #BCB6AD;
  font: 600 12px/1 var(--ss-body);
}

.ss-treemap-2026__titlemeta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-treemap-2026__appdot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(180deg, #D69942 0%, #BC7F2E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ss-treemap-2026__windowcontrols {
  display: flex;
  gap: 8px;
  color: #65594E;
}

.ss-treemap-2026__menubar,
.ss-treemap-2026__toolbar,
.ss-treemap-2026__filterbar,
.ss-treemap-2026__statusbar {
  display: flex;
  align-items: center;
}

.ss-treemap-2026__menubar {
  gap: 18px;
  padding: 8px 14px;
  background: #EFEAE3;
  border-bottom: 1px solid #D1C7BA;
  font-size: 12px;
}

.ss-treemap-2026__toolbar {
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #F9F6F1 0%, #EEE4D6 100%);
  border-bottom: 1px solid #D1C1AB;
}

.ss-treemap-2026__toolset {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ss-treemap-2026__tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(183, 146, 106, 0.6);
  border-radius: 10px;
  background: #FFF7EB;
  color: #5D4A38;
  font-size: 12px;
}

.ss-treemap-2026__filterbar {
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #F7F1E7;
  border-bottom: 1px solid #D6C7B2;
  font: 500 12px/1.4 var(--ss-mono);
}

.ss-treemap-2026__filter {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #C6B198;
  border-radius: 10px;
  background: rgba(255, 252, 247, 0.96);
  color: #6C583F;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ss-treemap-2026__scan {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(134, 168, 200, 0.17);
  color: #3F5C79;
}

.ss-treemap-2026__canvas {
  position: relative;
  min-height: 430px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255, 249, 240, 0.82) 0%, rgba(244, 234, 220, 0.92) 100%);
}

.ss-treemap-2026__treemap {
  position: relative;
  height: 100%;
  min-height: 378px;
  border: 2px solid #C98A34;
  border-radius: 12px;
  background: #D9B98F;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 249, 240, 0.55);
}

.ss-treemap-2026__strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 14px;
  background: linear-gradient(90deg, #CB8A2F 0%, #D89A46 34%, #C98A34 70%, #B7792A 100%);
}

.ss-treemap-2026__panelstack {
  position: absolute;
  inset: 18px 22px 18px 18px;
}

.ss-treemap-2026__panel {
  position: absolute;
  border: 1px solid rgba(86, 61, 32, 0.28);
  background: #C7A27C;
  box-shadow: 0 14px 28px rgba(42, 32, 21, 0.18);
}

.ss-treemap-2026__panel--back {
  inset: 54px 110px 40px 54px;
  transform: perspective(1200px) rotateX(14deg) rotateY(-16deg);
}

.ss-treemap-2026__panel--mid {
  inset: 30px 170px 84px 78px;
  transform: perspective(1200px) rotateX(13deg) rotateY(-15deg);
  background: #B79370;
}

.ss-treemap-2026__panel--front {
  inset: 10px 220px 136px 122px;
  transform: perspective(1200px) rotateX(12deg) rotateY(-14deg);
  background: #9A7D5F;
}

.ss-treemap-2026__panelgrid,
.ss-treemap-2026__basegrid {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 3px;
  padding: 3px;
}

.ss-treemap-2026__basegrid {
  position: absolute;
  inset: 18px 18px 18px 18px;
  grid-template-columns: 1.25fr 0.95fr 1.15fr 0.7fr;
  grid-template-rows: 1.1fr 0.9fr 0.65fr;
}

.ss-treemap-2026__panelgrid {
  grid-template-columns: 1.1fr 0.8fr 0.65fr;
  grid-template-rows: 0.8fr 1fr 0.75fr;
}

.ss-treemap-2026__node {
  position: relative;
  border: 1px solid rgba(76, 54, 27, 0.22);
  background: #DFC099;
  min-height: 0;
  overflow: hidden;
}

.ss-treemap-2026__node--warm {
  background: #C7A27C;
}

.ss-treemap-2026__node--soft {
  background: #E6C9A5;
}

.ss-treemap-2026__node--deep {
  background: #A78664;
  color: #FFF8EE;
}

.ss-treemap-2026__node--blue {
  background: #86A8C8;
  color: #F5F9FE;
}

.ss-treemap-2026__node span {
  position: absolute;
  left: 8px;
  top: 7px;
  right: 8px;
  font: 500 10px/1.25 var(--ss-mono);
  opacity: 0.96;
}

.ss-treemap-2026__statusbar {
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #EEE7DD;
  border-top: 1px solid #D4C7B4;
  font: 500 11px/1 var(--ss-mono);
  color: #665647;
}

.ss-treemap-2026__floatnote {
  position: absolute;
  right: 16px;
  bottom: -18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 12px 14px;
  border: 1px solid rgba(183, 146, 106, 0.55);
  border-radius: 14px;
  background: rgba(255, 249, 240, 0.92);
  box-shadow: 0 18px 36px rgba(74, 54, 29, 0.15);
  color: var(--ss-text);
  font-size: 13px;
  line-height: 1.5;
}

.ss-treemap-2026__floatnote i {
  color: var(--ss-primary);
}

@media (max-width: 980px) {
  .ss-treemap-2026__grid {
    grid-template-columns: 1fr;
  }

  .ss-treemap-2026__content {
    text-align: center;
  }

  .ss-treemap-2026 h1,
  .ss-treemap-2026__lead {
    max-width: none;
  }

  .ss-treemap-2026__cta {
    justify-content: center;
  }

  .ss-treemap-2026__facts {
    max-width: 620px;
    margin: 0 auto;
  }

  .ss-treemap-2026__visual {
    min-height: 580px;
    padding-bottom: 40px;
  }
}

@media (max-width: 640px) {
  .ss-treemap-2026 {
    padding: 64px 16px 44px;
  }

  .ss-treemap-2026__facts {
    grid-template-columns: 1fr;
  }

  .ss-treemap-2026__window {
    border-radius: 16px;
  }

  .ss-treemap-2026__visual {
    min-height: 500px;
  }

  .ss-treemap-2026__canvas {
    padding: 14px;
  }

  .ss-treemap-2026__treemap {
    min-height: 310px;
  }

  .ss-treemap-2026__panel--back {
    inset: 40px 84px 36px 32px;
  }

  .ss-treemap-2026__panel--mid {
    inset: 22px 132px 74px 50px;
  }

  .ss-treemap-2026__panel--front {
    inset: 8px 174px 114px 90px;
  }

  .ss-treemap-2026__floatnote {
    position: static;
    margin: 16px auto 0;
  }

  .ss-treemap-2026__toolbar,
  .ss-treemap-2026__filterbar,
  .ss-treemap-2026__statusbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#2f261e;background:#f4eee4;font:16px/1.65 'IBM Plex Sans', 'Segoe UI',Arial,sans-serif;overflow-wrap:break-word}a{color:#98611b}a:hover{text-decoration:none}img{max-width:100%;height:auto}button{font:inherit} .wrap{max-width:1180px;margin:auto;padding:0 24px} .topbar{background:#fff9f0;border-bottom:1px solid #dfcbb0;position:relative;z-index:2} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#30261f;font-size:21px;font-weight:800}.brand img{width:51px;height:51px;object-fit:contain}.nav-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.nav-links a{text-decoration:none;font-size:14px;color:#493b2a;font-weight:700}.nav-links a:hover{color:#b47725}.nav-toggle{display:none;border:1px solid #cdb99d;background:#fff7ed;border-radius:8px;padding:8px 12px}.section{padding:58px 0}.section.alt{background:#eadbc8}.eyebrow{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:#976522}.section h2,.article h2{line-height:1.22;font-size:clamp(24px,3vw,34px);margin:0 0 17px}.intro{max-width:800px;color:#685846;margin-top:0}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:#fff9f0;border:1px solid #dfc9a8;border-radius:16px;padding:22px;box-shadow:0 7px 24px #452e0c0c}.card h3{font-size:20px;line-height:1.3;margin:8px 0 10px}.card p{font-size:14px;color:#6b5846}.card a.titlelink{color:#372b20;text-decoration:none}.card a.titlelink:hover{color:#98611b}.tag{display:inline-block;font-size:11px;background:#eadbc8;color:#69491f;border-radius:100px;padding:4px 10px;font-weight:700;letter-spacing:.03em}.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;padding:13px 20px;cursor:pointer;border:1px solid #a66f22;border-radius:11px;color:white!important;text-decoration:none!important;font-weight:800;background:#c98a34;box-shadow:0 5px 0 #9a6724}.btn:hover{background:#b47725}.btn.secondary{color:#644b29!important;background:#fff9f0;border-color:#cdb99d;box-shadow:none}.win-ico{display:inline-block;width:19px;height:19px;flex-shrink:0;fill:currentColor}.btn-strip{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.pill-list{display:flex;gap:8px;flex-wrap:wrap}.pill-list a{border-radius:20px;background:#fff9f0;border:1px solid #ddc9aa;padding:5px 12px;color:#645039;font-size:13px;text-decoration:none}.pill-list a:hover{border-color:#a7793f}.step-list{counter-reset:steps;display:grid;gap:12px;padding:0;list-style:none}.step-list li{counter-increment:steps;background:#fff9f0;border:1px solid #e4cdb1;border-radius:12px;padding:14px 18px 14px 62px;position:relative}.step-list li:before{content:counter(steps);position:absolute;left:16px;top:13px;background:#ba7e2d;color:white;border-radius:100%;width:31px;height:31px;display:grid;place-items:center;font-weight:800}.notice{padding:18px 21px;border:1px solid #d2b07b;background:#fff7e8;border-radius:13px;margin:16px 0}.notice strong{display:block;margin-bottom:5px}.answer{font-size:18px;border-left:5px solid #c98a34;background:#fff9f0;padding:17px 20px;margin-bottom:22px;border-radius:0 9px 9px 0}.breadcrumbs{font-size:12px;color:#6f5c42;margin:22px 0}.breadcrumbs a{color:inherit}.article-wrap{max-width:850px;margin:0 auto;padding:0 20px 68px}.article{background:#fffdf8;border:1px solid #e0cbb0;border-radius:18px;padding:clamp(22px,4vw,44px)}.article h1{font-size:clamp(28px,4vw,46px);line-height:1.16;margin:12px 0 22px}.article h2{font-size:26px;margin:31px 0 12px}.article h3{font-size:19px}.article p,.article li{color:#544433}.article code{font-family:Consolas,monospace;background:#f0e8dd;padding:2px 5px;border-radius:3px}.article ul{padding-left:24px}.article .source-list{font-size:14px}.faq details{background:#fff9f0;border:1px solid #dfcbb1;border-radius:10px;margin:9px 0;padding:16px 18px}.faq summary{cursor:pointer;font-weight:800}.faq p{margin:12px 0 0}.subhero{padding:68px 0;background:radial-gradient(ellipse at 70% 15%,#e6d3b9 0,transparent 55%),#f4eee4}.subhero h1{font-size:clamp(35px,5vw,58px);max-width:950px;line-height:1.1;margin:10px 0 18px}.subhero p{max-width:820px;color:#67543e}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.mini-stat{padding:20px;border-radius:14px;background:#fff9f0;border:1px solid #e1c9aa}.mini-stat strong{font-size:25px;display:block}.footer{background:#302921;color:#f0dfc7;padding:48px 0 32px}.footer a{color:#f2d69b;text-decoration:none}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}.footer p{font-size:13px;color:#dcc9b0}.footer-nav{display:grid;gap:8px;font-size:13px}.footer-bottom{border-top:1px solid #625542;margin-top:32px;padding-top:18px;font-size:12px;color:#ddc9a9}.guide-search{padding:15px 18px;width:min(100%,530px);background:#fffdf9;border:1px solid #c7a476;border-radius:9px;font-size:16px;margin-bottom:22px}.hero-spacesniffer__btn{cursor:pointer}.hero-spacesniffer__btn--primary{border:0}.hero-spacesniffer__btn .win-ico{width:20px;height:20px}.table-scroll{overflow:auto;max-width:100%}table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:10px 12px;text-align:left;border-bottom:1px solid #e1c8a4}th{background:#eadbc8}code{overflow-wrap:anywhere} .ss-treemap-2026__window{max-width:100%} .ss-treemap-2026__grid{min-width:0} .ss-treemap-2026__visual{min-width:0} .ss-treemap-2026__content{min-width:0}
@media(max-width:850px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-grid{grid-template-columns:1fr 1fr}.nav-toggle{display:inline-block}.nav-links{display:none;position:absolute;left:0;right:0;top:77px;background:#fff9f0;box-shadow:0 8px 15px #2d24161a;border-bottom:1px solid #dfc9a8;padding:18px 24px;flex-direction:column;align-items:flex-start}.nav-links.open{display:flex}}
@media(max-width:580px){.wrap{padding:0 16px}.cards,.feature-grid,.footer-grid{grid-template-columns:1fr}.section{padding:40px 0}.article-wrap{padding:0 12px 45px}.article{padding:22px}.subhero{padding:42px 0}.hero-spacesniffer{overflow:hidden}.hero-spacesniffer__grid{display:block}.hero-spacesniffer__visual{margin-top:20px}.hero-spacesniffer__shell{padding-left:14px!important;padding-right:14px!important}.hero-spacesniffer__btn{max-width:100%} .ss-treemap-2026__facts{display:flex;flex-wrap:wrap} .ss-treemap-2026__window{min-width:0} .ss-treemap-2026__treemap{max-width:100%;overflow:hidden} }