:root{
  color-scheme:only light;
  --bg:#ffffff; --panel:#f5f7fa; --ink:#1a2026; --muted:#5a6672;
  --line:#dde3ea; --accent:#1c5fd6; --accent-dim:#7fa3dd;
  --c-u1:#0f766e;     /* U(1)_Y indicator */
  --c-su2:#15803d;    /* SU(2)_L cycle */
  --c-su3:#b91c1c;    /* SU(3)_c high-curl */
  --c-disent:#ea580c; /* disentanglers */
  --c-grav:#7c3aed;   /* graviton/faces */
  --maxw:780px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:#ffffff}
body{
  margin:0; background:#ffffff; color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
header{
  border-bottom:1px solid var(--line); background:var(--panel);
  position:sticky; top:0; z-index:10;
}
.bar{
  max-width:var(--maxw); margin:0 auto; padding:14px 20px 0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
}
.brand{font-weight:700; font-size:17px; color:var(--ink); margin-right:auto}
.brand a{color:var(--ink)}
.brand a:hover{text-decoration:none}
nav{display:flex; flex-wrap:wrap; gap:4px 16px}
nav a{
  font-size:14px; color:var(--muted); padding:6px 2px;
  border-bottom:2px solid transparent; white-space:nowrap;
}
nav a:hover{color:var(--ink); text-decoration:none}
nav a.active{color:var(--ink); border-bottom-color:var(--accent)}
main{max-width:var(--maxw); margin:0 auto; padding:36px 20px 80px}
h1{font-size:30px; line-height:1.25; margin:0 0 6px}
.sub{color:var(--muted); font-size:16px; margin:0 0 30px}
h2{
  font-size:21px; margin:40px 0 12px; padding-bottom:6px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:140px;
}
h3{font-size:17px; margin:26px 0 8px; color:var(--ink); scroll-margin-top:140px}
p{margin:12px 0}
ul,ol{margin:12px 0; padding-left:22px}
li{margin:6px 0}
strong{color:#000}
em{color:var(--ink)}
.cta{
  display:inline-block; margin:8px 8px 8px 0; padding:12px 22px;
  background:var(--accent); color:#fff; font-weight:600;
  border-radius:6px; min-height:44px; line-height:1.5;
}
.cta:hover{background:#1750b8; text-decoration:none}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:20px 0}
table{border-collapse:collapse; width:100%; min-width:440px; font-size:14px}
th,td{border:1px solid var(--line); padding:8px 10px; text-align:left}
th{background:var(--panel); color:var(--ink)}
td{color:var(--muted)}
td:first-child{color:var(--ink)}
footer{
  border-top:1px solid var(--line); color:var(--muted); font-size:13px;
  max-width:var(--maxw); margin:0 auto; padding:24px 20px 50px;
}
mjx-container{overflow-x:auto; overflow-y:hidden; max-width:100%}

pre{
  margin:20px 0;
  padding:14px 16px;
  background:#f5f7fa;
  border:1px solid var(--line);
  border-radius:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  font:13.5px/1.55 ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  color:var(--ink);
}
pre code{background:transparent; padding:0; font:inherit; color:inherit}
p code{
  font:13.5px/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:var(--panel); padding:1px 5px; border-radius:3px;
}

.pdf-link{
  font-size:13px; padding:6px 12px; margin-left:14px;
  background:var(--accent); color:#fff; border-radius:4px;
  white-space:nowrap; align-self:center;
}
.pdf-link:hover{background:#1750b8; text-decoration:none}

/* ---------- search ---------- */
.search-wrap{
  max-width:var(--maxw); margin:0 auto; padding:10px 20px 12px;
  position:relative;
}
.search-input{
  width:100%; padding:9px 12px 9px 34px;
  font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
  color:var(--ink); background:#fff
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%235a6672" stroke-width="1.8"><circle cx="9" cy="9" r="6"/><line x1="13.5" y1="13.5" x2="18" y2="18" stroke-linecap="round"/></svg>')
    no-repeat 9px center;
  background-size:16px 16px;
  border:1px solid var(--line); border-radius:6px;
  -webkit-appearance:none; appearance:none;
}
.search-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(28,95,214,.10)}
.search-input::-webkit-search-cancel-button{appearance:none}
.search-results{
  position:absolute; left:20px; right:20px; top:calc(100% - 2px);
  background:#fff; border:1px solid var(--line); border-radius:6px;
  box-shadow:0 8px 22px rgba(16,24,40,.08);
  max-height:360px; overflow-y:auto;
  display:none; z-index:30;
}
.search-results.open{display:block}
.sr-hit{
  display:flex; gap:8px; align-items:baseline;
  padding:9px 12px; font-size:14px; line-height:1.4;
  border-bottom:1px solid var(--line); color:var(--ink);
}
.sr-hit:last-child{border-bottom:none}
.sr-hit:hover{background:var(--panel); text-decoration:none}
.sr-page{font-weight:600; flex:0 0 auto}
.sr-sep{color:var(--muted); flex:0 0 auto}
.sr-section{color:var(--muted); flex:1; min-width:0;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sr-section.sr-muted{font-style:italic; color:#9aa3ad}
.sr-empty{padding:12px; color:var(--muted); font-size:14px}

/* ---------- structure page ---------- */
.diagram-wrap{
  margin:24px 0 8px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
}
.diagram-wrap svg{
  display:block; width:100%; height:auto;
  max-width:600px; margin:0 auto;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.diagram-caption{
  font-size:13px; color:var(--muted); margin:8px 8px 4px;
  text-align:center;
}
.figure-note{
  margin:10px 4px 6px;
  text-align:center;
  font-size:14.5px; color:var(--muted);
}
.rotate-hint{
  display:inline-block; margin-left:8px; padding:2px 8px;
  font-size:12px; color:var(--muted);
  background:#fff; border:1px solid var(--line); border-radius:99px;
  white-space:nowrap;
}
.rotate-hint::before{
  content:""; display:inline-block; width:10px; height:10px;
  margin-right:5px; vertical-align:-1px;
  background:no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235a6672" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><polyline points="3 4 3 9 8 9"/></svg>');
}
.legend{
  display:grid; grid-template-columns:1fr; gap:14px;
  margin:24px 0 8px;
}
@media(min-width:680px){
  .legend{grid-template-columns:1fr 1fr}
}
.legend-item{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; background:#fff;
}
.legend-swatch{
  flex:0 0 38px; height:38px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line);
}
.legend-swatch svg{display:block; width:32px; height:32px; max-width:none}
.legend-body{flex:1; min-width:0}
.legend-title{font-weight:600; font-size:14.5px; color:var(--ink); margin:0 0 4px}
.legend-text{font-size:13.5px; color:var(--muted); margin:0; line-height:1.5}
.legend-text code{
  font-size:12.5px; color:var(--ink);
  background:var(--panel); padding:1px 5px; border-radius:3px;
}

/* SVG element classes */
.svg-face          { fill:var(--c-grav); fill-opacity:0.07; stroke:none }
.svg-edge          { stroke:var(--ink); stroke-width:1.6; stroke-opacity:0.55; fill:none }
.svg-vertex        { fill:var(--ink); stroke:#fff; stroke-width:1.4 }
.svg-vlabel        { font:500 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
                     fill:var(--muted) }
.svg-body-diag     { stroke:var(--c-u1); stroke-width:2.4; fill:none }
.svg-disent        { stroke:var(--c-disent); stroke-width:1.8; stroke-dasharray:6 4; fill:none }
.svg-su2-cycle     { stroke:var(--c-su2); stroke-width:2.6; fill:none; stroke-linejoin:round }
.svg-mera-conv     { stroke:var(--accent); stroke-width:1; stroke-opacity:0.35;
                     stroke-dasharray:2 4; fill:none }
.svg-output        { fill:#fff; stroke:var(--ink); stroke-width:2 }
.svg-output-core   { fill:var(--ink) }
.svg-axis          { stroke:var(--muted); stroke-width:1.6; fill:none; stroke-linecap:round }
.svg-axis-label    { font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
                     fill:var(--ink); text-anchor:middle }
.svg-axis-origin   { fill:var(--muted); stroke:none }

@media(max-width:600px){
  body{font-size:16px}
  h1{font-size:25px}
  h2{font-size:19px}
  main{padding:26px 16px 60px}
  .bar{padding:12px 16px 0; gap:6px 12px}
  .brand{font-size:16px; width:100%; margin-bottom:4px}
  nav{gap:2px 14px}
  nav a{font-size:13.5px}
  .cta{display:block; text-align:center; margin:10px 0}
  .pdf-link{font-size:12px; padding:5px 10px; margin-left:0}
  .search-wrap{padding:8px 16px 10px}
  .search-results{left:16px; right:16px}
}