:root{
    --navy:#0d1b2a;
    --navy2:#1b263b;
    --slate:#415a77;
    --mist:#778da9;
    --paper:#f6f8fb;
    --white:#ffffff;
    --ink:#1a2332;
    --line:#d7dee8;
    --cyan:#0fb5c9;
    --green:#2e9e5b;
    --orange:#e08a1e;
    --red:#d1495b;
    --shadow:0 2px 10px rgba(13,27,42,.08);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.65;
    font-size:16px;
  }
  header.site{
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 60%,var(--slate) 100%);
    color:#fff;
    padding:48px 24px 40px;
    text-align:center;
  }
  header.site h1{
    margin:0 0 10px;
    font-size:2.1rem;
    letter-spacing:.5px;
  }
  header.site p.sub{
    margin:0 auto;
    max-width:760px;
    color:#c9d6e5;
    font-size:1.02rem;
  }
  header.site .isotope{
    display:inline-block;
    margin-top:18px;
    padding:6px 16px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:20px;
    font-size:.85rem;
    letter-spacing:1px;
    color:#8fe3ee;
  }

  /* NAV */
  nav.topnav{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(13,27,42,.97);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  nav.topnav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:2px;
  }
  nav.topnav a{
    display:block;
    color:#c9d6e5;
    text-decoration:none;
    padding:14px 16px;
    font-size:.9rem;
    font-weight:500;
    border-bottom:3px solid transparent;
    transition:.2s;
    white-space:nowrap;
  }
  nav.topnav a:hover{
    color:#fff;
    background:rgba(15,181,201,.12);
    border-bottom-color:var(--cyan);
  }

  /* LAYOUT */
  .wrap{
    display:flex;
    max-width:1180px;
    margin:0 auto;
    align-items:flex-start;
  }
  aside.sidebar{
    position:sticky;
    top:56px;
    align-self:flex-start;
    width:220px;
    flex:0 0 220px;
    padding:28px 16px;
    font-size:.9rem;
  }
  aside.sidebar h4{
    margin:0 0 12px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:.72rem;
    color:var(--mist);
  }
  aside.sidebar ol{
    list-style:none;
    margin:0;
    padding:0;
    border-left:2px solid var(--line);
  }
  aside.sidebar li a{
    display:block;
    padding:8px 14px;
    color:var(--slate);
    text-decoration:none;
    border-left:2px solid transparent;
    margin-left:-2px;
    transition:.2s;
  }
  aside.sidebar li a:hover{
    color:var(--navy);
    border-left-color:var(--cyan);
    background:#eef3f9;
  }
  main{
    flex:1 1 auto;
    min-width:0;
    padding:28px 32px 60px;
  }

  section{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:12px;
    padding:30px 34px;
    margin-bottom:30px;
    box-shadow:var(--shadow);
    scroll-margin-top:70px;
  }
  section > h2{
    margin:0 0 6px;
    font-size:1.55rem;
    color:var(--navy);
    display:flex;
    align-items:center;
    gap:12px;
  }
  section > h2 .num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;height:34px;
    background:var(--navy);
    color:#fff;
    border-radius:8px;
    font-size:1rem;
    flex:0 0 auto;
  }
  section .lead{
    color:var(--slate);
    margin:0 0 22px;
    font-size:1.02rem;
  }
  h3{
    color:var(--navy2);
    margin:26px 0 10px;
    font-size:1.15rem;
    border-bottom:2px solid var(--line);
    padding-bottom:6px;
  }
  h4{
    color:var(--slate);
    margin:18px 0 8px;
    font-size:1rem;
  }
  article{
    margin:14px 0;
  }
  ul.clean li,ol.clean li{margin:5px 0;}

  /* BADGES */
  .badge{
    display:inline-block;
    padding:3px 11px;
    border-radius:14px;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.4px;
    vertical-align:middle;
  }
  .badge.validated{background:#e2f5ea;color:var(--green);border:1px solid #b4e2c6;}
  .badge.experimental{background:#fdf0dc;color:var(--orange);border:1px solid #f2d5a4;}
  .badge.controversial{background:#fbe2e6;color:var(--red);border:1px solid #f0bcc4;}
  .badge.theoretical{background:#e6eefb;color:#3a67c4;border:1px solid #bcd0f0;}

  .banner{
    border-radius:10px;
    padding:14px 18px;
    margin:18px 0;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .banner.exp{background:#fdf0dc;border:1px solid #f2d5a4;color:#a45e0c;}
  .banner.val{background:#e2f5ea;border:1px solid #b4e2c6;color:#1c6e3d;}

  /* SUBCARDS */
  .subcard{
    border:1px solid var(--line);
    border-left:4px solid var(--cyan);
    border-radius:8px;
    padding:16px 20px;
    margin:16px 0;
    background:#fbfcfe;
  }
  .subcard.val{border-left-color:var(--green);}
  .subcard.exp{border-left-color:var(--orange);}
  .subcard.contro{border-left-color:var(--red);}
  .subcard h4{margin-top:0;}

  /* EQUATIONS */
  .eq{
    font-family:"Cambria Math","Times New Roman",Georgia,serif;
    background:var(--navy);
    color:#eaf3ff;
    padding:12px 18px;
    border-radius:8px;
    margin:14px 0;
    font-size:1.08rem;
    overflow-x:auto;
    letter-spacing:.3px;
  }
  .eq .g{color:#8fe3ee;}
  .eq small{color:#9db4cf;font-size:.8rem;display:block;margin-top:4px;font-family:inherit;}

  /* TABLE */
  .tablewrap{overflow-x:auto;margin:18px 0;}
  table{
    border-collapse:collapse;
    width:100%;
    min-width:720px;
    font-size:.9rem;
  }
  th,td{
    text-align:left;
    padding:10px 12px;
    border:1px solid var(--line);
    vertical-align:top;
  }
  thead th{
    background:var(--navy);
    color:#fff;
    font-weight:600;
    position:sticky;
    top:0;
  }
  tbody tr:nth-child(odd){background:#f2f6fb;}
  tbody tr:hover{background:#e6eefb;}

  /* PROPERTY GRID */
  .propgrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    margin:16px 0;
  }
  .prop{
    background:#f2f6fb;
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px 16px;
  }
  .prop .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:var(--mist);}
  .prop .v{font-size:1.05rem;font-weight:700;color:var(--navy);}
  .prop .d{font-size:.82rem;color:var(--slate);}

  footer.site{
    background:var(--navy);
    color:#c9d6e5;
    padding:34px 24px;
    font-size:.85rem;
  }
  footer.site .inner{max-width:1000px;margin:0 auto;}
  footer.site h4{color:#fff;margin:0 0 8px;}
  footer.site .disc{
    border:1px solid rgba(255,255,255,.15);
    border-radius:8px;
    padding:14px 18px;
    background:rgba(255,255,255,.04);
    margin-bottom:16px;
  }
  a.inlink{color:var(--slate);}

  @media(max-width:880px){
    aside.sidebar{display:none;}
    main{padding:22px 16px 50px;}
    section{padding:22px 18px;}
    header.site h1{font-size:1.6rem;}
  }