body.home { --paper:#05060a; --ink:#f5f4f2; --gray:#ffffff80; --rule:#ffffff1f; --gold:#f5d9a0; background:#05060a; color:var(--ink); color-scheme:dark } .home .v-wrap,.home .site-header .wrap,.home footer .wrap { width:calc(100% - 96px); max-width:1280px; margin-inline:auto; padding-inline:0 } .home main { position:relative; isolation:isolate; overflow-x:clip } .home .site-header { position:fixed; inset:0 0 auto; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid transparent } .home .nav-links.open { background:#05060a } .home .m-tile { fill:var(--ink) } .home .m-bar { fill:var(--paper) } .home h1,.home h2,.home h3 { font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 60; letter-spacing:-.02em } .home h1 { font-size:clamp(48px,6.4vw,96px); line-height:1.02; margin:0 0 24px } .v-hero { min-height:63vh; padding-top:150px; padding-bottom:24px; position:relative } .hero-lede { font-size:17px; color:#fff9; margin:0 0 10px } .search { position:relative; display:flex; align-items:center; max-width:620px; border-bottom:1px solid #ffffff80; margin-top:28px } .search:after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 300ms } .search:focus-within:after { transform:scaleX(1) } .search input { width:100%; border:0; outline:0; border-radius:0; background:none; color:white; font:16px var(--sans); padding:13px 0 } .search input::placeholder { color:#ffffff80 } .search svg { flex-shrink:0; margin-left:12px } .mono-label { font:11px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#ffffff80 } .match-hint { min-height:22px; margin-top:9px } .light-field { position:fixed; inset:0; width:100%; height:100vh; pointer-events:none; z-index:-1 } .field { position:relative; min-height:760px; height:100vh } .field-heading { padding-top:55px; pointer-events:none; position:relative; z-index:2 } .field-heading p { margin:0 0 22px } .field h2 { font-size:64px; line-height:1.02; margin:0 } .field h2 span { display:block } .field h2 span+span { color:var(--gold) } .field-stats { position:absolute; bottom:48px; left:0; right:0; display:grid; grid-template-columns:repeat(4,1fr); margin-block:0 } .field-stats>div { padding:0 32px } .field-stats>div:first-child { padding-left:0 } .field-stats>div+div { border-left:1px solid var(--rule) } .field-stats dt { font:300 44px/1.2 var(--sans); font-variant-numeric:tabular-nums; color:#f5e6c7 } .field-stats dd { margin:10px 0 0 } .nodes { list-style:none; margin:0; padding:30px 48px; display:flex; flex-wrap:wrap; gap:24px } .node { display:inline-flex; align-items:center; gap:10px; font:13px/1.3 var(--sans); color:#ffffffcc; white-space:nowrap; padding:10px 0; position:relative; outline:none } .dot { display:block; position:relative; width:7px; height:7px; flex:none; border-radius:50%; background:var(--node-color); opacity:var(--dot-opacity,1) } .node[data-status=free-tier] { --node-color:#f5d9a0 } .node[data-status=trial-only] { --node-color:#c98a3a; --dot-opacity:.6 } .node[data-status=no-free-tier],.node[data-status=retired] { --node-color:#6b7280; --dot-opacity:.35 } .node[data-status=free-tier] .dot:before,.node[data-status=trial-only] .dot:before { content:""; position:absolute; inset:-20px; background:radial-gradient(circle,var(--node-color) 0,transparent 64%); opacity:.42; pointer-events:none } .node:focus-visible .dot:after { content:""; position:absolute; inset:-6px; border:1px solid var(--gold); border-radius:50% } .js .nodes { position:absolute; inset:0; padding:0; display:block } .js .nodes>li { position:absolute; left:0; top:0; transition:opacity 250ms } .js .node { transform:translate(-3.5px,-50%) } .js .nodes>li.label-left .node { flex-direction:row-reverse; transform:translate(calc(-100% + 3.5px),-50%) } .nodes>li.dim { opacity:.35 } .nodes>li.filtered { opacity:.15 } .nodes>li.active { z-index:8!important; opacity:1 } .hud { display:none } .js .hud { display:block; position:absolute; left:54px; top:22px; width:400px; max-width:calc(100vw - 80px); visibility:hidden; opacity:0; transition:opacity 180ms,visibility 180ms,transform 200ms; text-shadow:0 0 12px rgba(0,0,0,.9); font:12px/1.65 var(--mono); pointer-events:none } .js li.active .hud { visibility:visible; opacity:1; pointer-events:none } .hud-line { display:flex; gap:18px; margin:3px 0; transition:opacity 180ms,transform 180ms } .hud-label { color:#ffffffad; text-transform:uppercase; flex:0 0 108px } .hud-value { color:#ffffffeb; overflow-wrap:anywhere } .hud-name { font:600 15px/1.6 var(--sans); text-transform:uppercase; margin-bottom:8px } .card-value .hud-value { color:#a3a9b3 } .leader { position:absolute; left:-51px; top:-18px; width:48px; height:1px; background:#f5d9a0b3; transform:rotate(25deg) scaleX(0); transform-origin:left; transition:transform 180ms } .active .leader { transform:rotate(25deg) scaleX(1) } .hud.flip { left:auto; right:54px } .hud.flip .leader { left:auto; right:-51px; transform-origin:right; transform:rotate(-25deg) scaleX(0) } .active .hud.flip .leader { transform:rotate(-25deg) scaleX(1) } .hud.up { top:auto; bottom:30px } .editorial { padding-block:140px } .home .editorial h2 { font-size:clamp(40px,4.2vw,60px); line-height:1.05; margin:0 0 48px } .week-grid { display:grid; grid-template-columns:repeat(3,1fr); row-gap:40px } .week-entry { padding:0 32px 12px; border-left:1px solid var(--rule) } .week-entry:nth-child(3n+1) { padding-left:0; border-left:0 } .week-entry:nth-child(n+4) { border-top:1px solid var(--rule); padding-top:32px } .week-entry .mono-label { display:flex; gap:16px } .negative { color:#e5402b } .home .week-entry h3 { font-size:22px; line-height:1.25; margin:18px 0 0 } .editorial-link { margin-top:38px } .week-empty { max-width:65ch; color:#fff9 } .method { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; border-top:1px solid var(--rule) } .method h2 { grid-column:1/6 } .method>div { grid-column:7/13 } .method p { font:17px/1.6 var(--sans); color:#ffffff9e; margin:0 0 24px } .close { position:relative; min-height:700px; padding-top:120px; padding-bottom:240px } .close h2 { font-size:clamp(56px,6.4vw,92px); line-height:1.05; margin:24px 0 } .close p:not(.mono-label) { color:#fff9; font-size:17px } .home .nl { display:flex; gap:32px; max-width:650px; margin:40px 0 0 } .home .nl input { min-width:0; flex:1; background:none; border:0; border-bottom:1px solid #ffffff80; border-radius:0; padding:14px 0; font:16px var(--sans); color:white; box-shadow:none } .home footer { position:relative; background:#05060a; border-top:1px solid var(--rule) } .home footer p,.home footer a,.home footer .fine { color:#ffffff80 } .home footer .foot-h { color:#ffffffb3 } .plain-index { display:none } .fx-static .plain-index,.fx-fallback .plain-index { display:block; padding-block:50px } .plain-index ol { list-style:none; padding:0 } .plain-index li { padding:18px 0; border-top:1px solid var(--rule); font:12px/1.8 var(--mono); color:#ffffffb3 } .js:not(.fx-static):not(.fx-fallback) .field:not(.entered) .node { opacity:0 } .js:not(.fx-static):not(.fx-fallback) .field h2 span { opacity:0; filter:blur(8px); transform:translateY(12px); transition:opacity 700ms,filter 700ms,transform 700ms cubic-bezier(.16,1,.3,1) } .js .field.titled h2 span { opacity:1!important; filter:none!important; transform:none!important } .field.titled h2 span+span { transition-delay:140ms!important } .js .week-entry.waiting { opacity:0; transform:translateY(12px) } .week-entry { transition:opacity 600ms,transform 600ms } .fx-fallback .field,.fx-fallback .close { background:repeating-linear-gradient(165deg,transparent 0 56px,#7f93b80a 57px,transparent 59px),radial-gradient(ellipse at 25% 55%,#a17b3826,transparent 42%),radial-gradient(ellipse at 80% 65%,#7f93b826,transparent 50%) } @media(max-width:1100px) and (min-width:761px) { .node { font-size:11px } .field h2 { font-size:58px } .v-hero { padding-top:130px } .field-stats>div { padding-inline:20px } .field-stats dd { font-size:10px } } @media(max-width:760px),(pointer:coarse) { .home .v-wrap,.home .site-header .wrap,.home footer .wrap { width:calc(100% - 40px) } .v-hero { padding-top:120px; min-height:620px } .home h1 { font-size:48px } .hero-lede { max-width:34ch } .search { margin-top:32px } .field { height:2400px; min-height:2400px } .field-heading { padding-top:84px } .field h2 { font-size:44px } .field-stats { grid-template-columns:1fr 1fr; gap:30px 0; bottom:30px } .field-stats>div { padding:0 18px } .field-stats>div:nth-child(3) { border:0; padding-left:0 } .field-stats dt { font-size:38px } .field-stats dd { font-size:9px } .node { font-size:12px; max-width:175px; white-space:normal } .js .hud,.js .hud.flip,.js .hud.up { position:fixed; left:0; right:0; top:auto; bottom:0; width:100%; max-width:none; padding:60px 24px 28px; background:linear-gradient(transparent,rgba(5,6,10,.97) 30%); transform:translateY(12px); z-index:50 } .js li.active .hud { transform:none } .js .nodes>li.active { z-index:50!important } .hud .leader { display:none } .hud-line { gap:12px } .hud-label { flex-basis:105px; font-size:10px } .hud-value { font-size:11px } .hud-name .hud-value { font-size:15px } .editorial { padding-block:90px } .week-grid { grid-template-columns:1fr } .week-entry,.week-entry:nth-child(n) { padding:24px 0; border-left:0; border-top:1px solid var(--rule) } .week-grid { row-gap:0 } .method { display:block } .method h2 { margin-bottom:36px!important } .close { padding-top:80px; min-height:650px } .home .nl { gap:22px } .home .nl input { font-size:14px } .home .nav { gap:10px } .home .nav-right { gap:8px } } @media(prefers-reduced-motion:reduce) { .home *, .home *:before,.home *:after { animation:none!important; transition:none!important } .week-entry { opacity:1!important; transform:none!important } } .fx-static .close { background:radial-gradient(ellipse at 60% 80%,#7f93b816,transparent 45%) } .js:not(.fx-static):not(.fx-fallback) .node.lit .dot:before { animation:node-halo 650ms ease-out both } @keyframes node-halo { 0% { opacity:.8; transform:scale(.3) } 55% { opacity:.65; transform:scale(1.5) } 100% { opacity:.42; transform:scale(1) } } .home .nl input:focus { outline:none; border-bottom-color:var(--gold) }  .js .nodes>li.occluded { opacity:0; pointer-events:none; transition:opacity 160ms } .node,.field-heading,.field-stats { text-shadow:0 0 12px rgba(0,0,0,.9) } .v-hero { min-height:56vh; padding-top:130px; padding-bottom:0 } @media(min-width:761px) { .field-heading { padding-top:84px } .field-heading h2 { font-size:58px } } @media(max-width:760px),(pointer:coarse) { .v-hero { min-height:600px; padding-top:120px } } .light-field {  background:radial-gradient(ellipse at 50% 55%,#182638cc,transparent 65%),radial-gradient(ellipse at 24% 63%,#b58c4228,transparent 34%),radial-gradient(ellipse at 79% 72%,#b58c4220,transparent 32%),radial-gradient(circle at 19% 87%,#b58c4238,transparent 1.5%),radial-gradient(circle at 72% 81%,#7f93b830,transparent 2%),radial-gradient(circle at 89% 90%,#b58c4230,transparent 1.2%) } @media(max-width:760px){.v-hero{min-height:0;padding-bottom:0}.field-heading{padding-top:32px}}  @media(min-width:761px) and (pointer:fine) { .js .hud:before { content:""; position:absolute; inset:-44px -72px -40px -64px; z-index:-1; background:rgba(4,5,9,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 72px),transparent),linear-gradient(180deg,transparent,#000 44px,#000 calc(100% - 40px),transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 72px),transparent),linear-gradient(180deg,transparent,#000 44px,#000 calc(100% - 40px),transparent); mask-composite:intersect; pointer-events:none } .js .hud{isolation:isolate} }