:root{
  --bg:#0e0f13; --ink:#e8eaf1; --muted:#9aa1b2; --panel:#151724; --stroke:#24263a;
  --a:#69f0ae; --b:#7c4dff; --c:#ff5ea1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial}

.site-header{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:auto 1fr auto auto;gap:.75rem;align-items:center;padding:.75rem 1rem;background:linear-gradient(180deg,rgba(10,10,16,.8),rgba(10,10,16,.4));backdrop-filter:blur(8px);border-bottom:1px solid var(--stroke)}
.brand{font-weight:800;letter-spacing:.08em}
.lang-menu{display:flex;gap:.25rem;justify-content:center}
.pill{display:inline-block;padding:.35rem .6rem;border:1px solid var(--stroke);border-radius:999px;color:var(--ink);text-decoration:none;opacity:.85}
.pill:hover{opacity:1}
.info-box{width:28px;height:28px;display:grid;place-content:center;border:1px solid var(--stroke);border-radius:8px;opacity:.8}
.info-box:hover{opacity:1}

/* Table */
.table-wrap{overflow:auto;border:1px solid var(--stroke);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01))}
.table{display:grid;grid-template-rows:auto 1fr}
.thead .row, .tbody .row{display:grid;align-items:stretch;grid-auto-rows:auto}


/* Responsive columns: we'll set a CSS grid with as many columns as df has */
.thead .row, .tbody .row{grid-template-columns:minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(160px, 1.5fr) minmax(160px, 1.5fr) minmax(160px, 1.5fr);}

.cell{padding:.6rem .75rem;border-bottom:1px solid rgba(255,255,255,.04);text-align:center}
.head{position:sticky;top:0;background:rgba(15,16,24,.85);backdrop-filter:blur(6px);font-weight:700}
.tbody .row:last-child .cell{border-bottom:none}



/* Borderless look */
.table .cell{border-left:none;border-right:none}

/* Increasing text size from left (less) to right (more) */
.tbody .row .cell:nth-child(1){font-size:.95rem;opacity:.9}
.tbody .row .cell:nth-child(2){font-size:1rem}
.tbody .row .cell:nth-child(3){font-size:1.05rem}
.tbody .row .cell:nth-child(4){font-size:1.1rem}
.tbody .row .cell:nth-child(5){font-size:1.15rem}
.tbody .row .cell:nth-child(6){font-size:1.2rem}

/* Subtle links (Fields & Scope) */
.soft-link{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.15)}
.soft-link:hover{border-bottom-color:rgba(255,255,255,.35)}



/* Standards link */
.std-link{color:var(--a);font-weight:700;text-decoration:none}
.std-link:hover{filter:brightness(1.15)}

/* Apps button */
.app-btn{display:inline-block;padding:.4rem .7rem;border-radius:999px;background:linear-gradient(135deg,var(--a),var(--c));color:#0b0b0f;text-decoration:none;font-weight:800}

/* "..." expandable details */
details.more summary{cursor:pointer;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more .more-body{margin-top:.4rem;padding:.5rem;border:1px dashed var(--stroke);border-radius:8px;background:rgba(255,255,255,.03)}



/* Mobile */
@media (max-width: 800px){
  .thead .row, .tbody .row{grid-template-columns: repeat(3, minmax(120px,1fr)) repeat(auto-fit, minmax(160px,1.2fr));}
  .cell{padding:.5rem .6rem}
}