/* /blog/realgram-okosystem-vpn-spill-token/: components on top of essay.css (3D scene: realgram-scene.js) */
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.essay section{padding:16vh 0}
.essay section.hero{padding:100px 0 60px}
.kicker{margin:0 0 1rem;color:var(--accent);font-size:.92rem;font-weight:500}
.three{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:34rem}
.three li{padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,250,240,.03)}
.three b{display:block;font-weight:700;margin-bottom:4px}
.three span{color:var(--muted);font-size:.86rem;line-height:1.4}
.loop{list-style:none;margin:1.4rem 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.loop li{display:flex;align-items:center;gap:8px;font-size:.95rem}
.loop li span{padding:9px 14px;border:1px solid var(--line);border-radius:999px}
.loop li:last-child span{border-color:var(--accent);color:var(--ink)}
.loop li:not(:last-child)::after{content:"";width:14px;height:1px;background:var(--accent)}
.chart{display:block;width:100%;height:auto;margin:1.2rem 0 .3rem}
.ladder{list-style:none;margin:1.6rem 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:8px}
.ladder li{display:flex;flex-direction:column;justify-content:flex-end;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,250,240,.03)}
.ladder li:nth-child(1){min-height:90px}.ladder li:nth-child(2){min-height:120px}.ladder li:nth-child(3){min-height:150px}
.ladder li:nth-child(4){min-height:180px;border-color:var(--accent);background:rgba(244,122,42,.1)}
.ladder b{font-weight:700}
.ladder span{color:var(--muted);font-size:.85rem}
.arch{list-style:none;margin:1.4rem 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.arch li{padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,250,240,.03)}
.essay .arch li p{margin:0;font-size:.92rem;line-height:1.5;color:var(--muted)}
.callout{margin:1.4rem 0;padding:18px 20px;border-left:2px solid var(--accent);background:rgba(244,122,42,.06);border-radius:0 12px 12px 0}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1.4rem 0}
.vs div{padding:16px;border:1px solid var(--line);border-radius:14px}
.vs div:last-child{border-color:var(--accent)}
.vs small{display:block;margin-bottom:6px;color:var(--muted);font-size:.8rem;font-weight:500}
.vs b{display:block;font-size:1.1rem}
.status{list-style:none;margin:1.4rem 0;padding:0;border-top:1px solid var(--line)}
.status li{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.status em{font-style:normal;color:var(--accent);font-size:.88rem;font-weight:500}
.status span{font-size:1rem;line-height:1.5}
.related{list-style:none;margin:1rem 0 0;padding:0;border-top:1px solid var(--line)}
.essay .related a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500}
.essay .related a:hover{color:var(--accent)}
@media (max-width:820px){
  .three,.arch,.vs{grid-template-columns:1fr}
  .ladder{grid-template-columns:repeat(2,1fr)}
  .status li{grid-template-columns:1fr;gap:4px}
}