:root{
  --bg:#ffffff;
  --bg-soft:#f6f8fc;
  --text:#121826;
  --muted:#5f6b7b;
  --line:#e5eaf3;
  --blue:#2154d9;
  --blue-dark:#153997;
  --red:#d1303d;
  --green:#1f9a5f;
  --ink:#0f172a;
  --shadow:0 16px 40px rgba(15,23,42,.09);
  --hero-shadow:0 24px 58px rgba(15,23,42,.11);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:none}

.container{
  width:min(1320px, calc(100vw - 190px));
  margin:0 auto;
}
.container.narrow{
  width:min(1040px, calc(100vw - 190px));
  margin:0 auto;
}

.side-nav{
  position:fixed;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:7px;
  width:122px;
  padding:12px 10px;
  background:rgba(255,255,255,.91);
  border:1px solid rgba(229,234,243,.96);
  border-radius:18px;
  box-shadow:0 16px 36px rgba(15,23,42,.11);
  backdrop-filter:blur(14px);
}
.side-nav a{
  display:block;
  padding:7px 9px;
  border-radius:11px;
  color:#253043;
  font-size:12.5px;
  font-weight:760;
  text-align:center;
}
.side-nav a:hover{background:#eef3ff;color:var(--blue)}
.side-nav .brand{
  font-size:15.5px;
  font-weight:900;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding-bottom:10px;
  margin-bottom:2px;
}

.hero{
  position:relative;
  overflow:hidden;
  padding:32px 0 46px;
  background:
    radial-gradient(circle at 12% 15%, rgba(33,84,217,.15), transparent 29%),
    radial-gradient(circle at 84% 12%, rgba(209,48,61,.09), transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute;
  inset:auto auto 0 0;
  width:100%;
  height:170px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(33,84,217,.03));
  pointer-events:none;
}
.hero .container{position:relative;z-index:1;text-align:center}
.hero h1{
  margin:0;
  font-size:76px;
  line-height:1;
  letter-spacing:-0.06em;
  font-weight:920;
  color:var(--ink);
}
.hero h2{
  max-width:980px;
  margin:12px auto 14px;
  font-size:30px;
  line-height:1.28;
  letter-spacing:-.03em;
  font-weight:760;
  color:var(--ink);
}
.authors{
  max-width:1050px;
  margin:12px auto 4px;
  font-size:16.5px;
}
.affiliation,.status{margin:3px auto;color:var(--muted);font-size:15.5px}
.button-row{
  margin:18px 0 19px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}
.button-row a{
  min-width:96px;
  padding:10px 19px;
  border-radius:999px;
  color:#fff;
  font-weight:820;
  box-shadow:0 10px 24px rgba(15,23,42,.14);
  transition:transform .18s ease,filter .18s ease;
}
.button-row a:nth-child(1){background:var(--blue)}
.button-row a:nth-child(2){background:#141c2a}
.button-row a:nth-child(3){background:var(--red)}
.button-row a:nth-child(4){background:#344155}
.button-row a:hover{transform:translateY(-1px);filter:brightness(.97)}

.hero-card{
  margin:15px auto 0;
  padding:21px;
  border-radius:26px;
  border:1px solid #e7edf8;
  background:rgba(255,255,255,.94);
  box-shadow:var(--hero-shadow);
}
.hero-card-head{
  max-width:1040px;
  margin:0 auto 17px;
}
.hero-card h3{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.hero-card p{
  margin:0;
  color:var(--muted);
  font-size:16.5px;
}

.metrics-strip{padding:28px 0 34px;background:#fff}
.metrics-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.metric-card{
  padding:23px 14px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
}
.metric-value{font-size:42px;line-height:1;font-weight:920;color:var(--blue)}
.metric-label{margin-top:10px;color:var(--muted);font-size:15px}

.section{padding:64px 0}
.section.light{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section h2{
  margin:0 0 22px;
  text-align:center;
  font-size:38px;
  line-height:1.15;
  letter-spacing:-.035em;
  color:var(--ink);
}
.section .lead,.section-intro{
  max-width:1050px;
  margin:0 auto 27px;
  text-align:center;
  color:var(--muted);
  font-size:18px;
}

.framework-grid,.results-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:21px;
}
.framework-card,.result-card,.comparison-card,.figure-card{
  border:1px solid var(--line);
  border-radius:23px;
  background:#fff;
  box-shadow:var(--shadow);
}
.framework-card,.result-card{padding:27px}
.step-index{
  width:43px;height:43px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-weight:900;margin-bottom:16px;
}
.framework-card h3,.result-card h3{margin:0 0 10px;font-size:22px;line-height:1.25}
.framework-card p,.result-card p{margin:0;color:var(--muted);font-size:16.2px}
.figure-card{margin-top:26px;padding:17px}
.figure-card img{width:100%;display:block;border-radius:16px}
.caption{margin:10px 4px 0;text-align:center;color:var(--muted);font-size:14.5px}

.comparison-card{margin:26px 0;padding:21px}
.comparison-card h3{margin:0 0 18px;text-align:center;font-size:26px;line-height:1.2}
.pair-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.aloha-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  max-width:1080px;
  margin:0 auto;
}

.video-panel{
  border:1px solid var(--line);
  border-radius:19px;
  background:#fbfcff;
  padding:10px;
  overflow:hidden;
}
.video-panel video{
  display:block;
  width:100%;
  background:#000;
  border-radius:14px;
  object-fit:contain;
}
.hero-grid .video-panel video{
  aspect-ratio:16/9;
}
.pair-grid .video-panel video{
  aspect-ratio:16/9;
}
.aloha-stack .video-panel video{
  aspect-ratio:24/9;
}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 0 10px;
  padding:6px 13px;
  border-radius:999px;
  color:#fff;
  font-size:13.2px;
  font-weight:860;
}
.pill.baseline{background:var(--red)}
.pill.ours{background:var(--green)}

pre{
  overflow:auto;margin:0;padding:22px;border-radius:18px;
  background:#101827;color:#f8fafc;border:1px solid #1e293b;
  font-size:14px;line-height:1.55;
}
code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace}

footer{padding:28px 0;background:#101827;color:#d8e0ec}
.footer-inner{display:flex;justify-content:space-between;gap:18px;font-size:14px}

@media (max-width: 1450px){
  .side-nav{display:none}
  .container{width:min(1320px,94vw)}
  .container.narrow{width:min(1040px,94vw)}
}
@media (max-width: 1180px){
  .hero-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 980px){
  .hero h1{font-size:60px}
  .hero h2{font-size:24px}
  .metrics-grid,.framework-grid,.results-grid{grid-template-columns:repeat(2,1fr)}
  .pair-grid{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .container,.container.narrow{width:94vw}
  .hero{padding:34px 0 36px}
  .hero h1{font-size:46px}
  .hero h2{font-size:20px}
  .metrics-grid,.framework-grid,.results-grid,.hero-grid{grid-template-columns:1fr}
  .aloha-stack .video-panel video{aspect-ratio:16/9}
  .section{padding:48px 0}
  .section h2{font-size:31px}
  .section .lead,.section-intro{font-size:16px}
  .footer-inner{flex-direction:column;text-align:center}
}