:root{
  --fg:#161616; --muted:#6b7280; --border:#e5e7eb; --bg:#ffffff;
  --link:#0d6efd; --chip:#f8fafc; --chip-border:#e5e7eb; --container:1080px;
}
html{ overflow-x:hidden; }
html,body{ background:#fff; color:var(--fg); margin:0; padding:0; }
body{
  overflow-x:hidden;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans TC","Helvetica Neue",Arial,sans-serif;
  line-height:1.75;
}
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }
.muted{ color:var(--muted); }
.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }


header{ padding:120px 0 12px; text-align:center; }
header h1{
  font-size:clamp(1.6rem,2.6vw,2.4rem);
  line-height:1.3; margin:.25rem 0 .35rem; font-weight:800;
}
.venue{ font-size:1.55rem; color:var(--muted); margin-bottom:.25rem; }


header .authors{
  margin: 4px 0;
  line-height: 1.4;
  font-size: 1.05rem;
}
header .authors a{ text-decoration:none; }
header .authors .author{ white-space:nowrap; }
header .authors sup{ font-size:.7em; line-height:0; vertical-align:super; }
header .affil{
  margin: 2px 0 4px;
  color: var(--muted);
  font-size: 1.0rem;
}
header .equal-note{
  margin: 2px 0 0;
  font-size: .95rem;
  text-align: center;
  color: var(--muted);
}


.resource-links{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:18px 0 22px;
}
.resource-links a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 22px; font-size:.95rem; font-weight:500;
  border:2px solid var(--link); border-radius:30px;
  color:var(--link); background:transparent; white-space:nowrap;
  transition: background-color .25s, color .25s, transform .25s, box-shadow .25s;
  text-decoration:none;
}
.resource-links a:hover{
  background:var(--link); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(13,110,253,.25);
  text-decoration:none;
}
.resource-links a svg{ width:18px; height:18px; fill:currentColor; flex-shrink:0; }


.hero-figure{ margin:10px auto 14px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.hero-figure--bleed {
  box-sizing: border-box;
  width: min(1400px, 100vw);
  margin: 12px 0 14px;
  margin-left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.tagline{ color:#444; max-width:900px; margin:12px auto 0; text-align:center; }


section{ padding:28px 0; }
section h2{ text-align:center; font-size:clamp(1.35rem,2.1vw,1.6rem); font-weight:800; margin:0 0 12px; }
.content{ max-width:920px; margin:0 auto; font-size:1.02rem; line-height:1.85; text-align:justify; }


.method-image-container,.results-image-container{
  display:inline-block; border:1px solid #e0e0e0; border-radius:12px; padding:1rem; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.08); margin:.75rem 0;
}
.method-image-container img,.results-image-container img{ border-radius:8px; }
.img-caption{ margin-top:.8rem; font-size:.95rem; color:#666; line-height:1.6; text-align:center; }


.table-wrapper{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1rem 0;
  scrollbar-width:thin; scrollbar-color:#c4c4c4 transparent;
}
.table-wrapper::-webkit-scrollbar{ height:6px; }
.table-wrapper::-webkit-scrollbar-track{ background:transparent; }
.table-wrapper::-webkit-scrollbar-thumb{ background:#c4c4c4; border-radius:3px; }


.math-scroll{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:#c4c4c4 transparent;
}
.math-scroll::-webkit-scrollbar{ height:6px; }
.math-scroll::-webkit-scrollbar-track{ background:transparent; }
.math-scroll::-webkit-scrollbar-thumb{ background:#c4c4c4; border-radius:3px; }
.content table{ border-collapse:collapse; width:100%; border-top:2px solid #666; border-bottom:2px solid #666; }
.content th,.content td{ padding:.45rem .6rem; white-space:nowrap; border-bottom:1px solid #eee; text-align:center; }
.content th:first-child,.content td:first-child{ text-align:left; }


pre{
  background:#0b1021; color:#f8f8f2; padding:14px; border-radius:8px; overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}


footer{ border-top:1px solid var(--border); color:var(--muted); font-size:.95rem; }
.footer-inner{ height:56px; display:flex; align-items:center; justify-content:space-between; }
.footer-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 0;
}

@media (max-width:768px){
  .container{ padding:0 16px; }
  .content{ font-size:1rem; line-height:1.8; }
  .footer-inner{ height:auto; padding:12px 0; flex-direction:column; gap:.5rem; }
  header{ padding:72px 0 10px; }
  header h1{ font-size:1.45rem; line-height:1.3; }
  .venue{ font-size:1.15rem; }
  header .authors{ font-size:.95rem; }
  header .affil{ font-size:.88rem; }
  .hero-figure--bleed{ width:100%; margin-left:0; transform:none; border-radius:8px; }
  .method-figure--bleed{ width:100%; margin-left:0; transform:none; }
  section h2{ font-size:1.25rem; }
  .audio-grid.two-col{ grid-template-columns:1fr; }
  .morph-steps{ grid-template-columns: 1fr; }
  .audio-title{ font-size:.9rem; }
  .step-title{ font-size:.88rem; }
  .resource-links{ gap:10px; }
  .resource-links a{ padding:8px 16px; font-size:.88rem; }
  pre{ font-size:.8rem; padding:10px; }
}


mjx-container{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.content mjx-container[jax="CHTML"][display="true"]{ overflow-x:auto; max-width:100%; display:block!important; }
.content mjx-container{ line-height:0!important; }


#abstract{
  background: #f6f7fb;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
  margin-top: 32px;
}
@media (min-width: 992px){
  #abstract { margin-top: 48px; }
}


#results{
  background: #f6f7fb;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
  margin-top: 32px;
}
@media (min-width: 992px){
  #results { margin-top: 48px; }
}


.figure-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  justify-items:center;
  align-items:start;
}
@media (max-width: 992px){
  .figure-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .figure-grid{ grid-template-columns: 1fr; }
}


#method .content p + .method-image-container,
#method .content .method-image-container + p{ margin-top: .75rem; }


#method .content mjx-container[jax="CHTML"][display="true"]{
  display: block !important;
  margin: .35rem auto;
  text-align: center;
}
#method .content p + mjx-container,
#method .content mjx-container + p { margin-top: .4rem; }


.audio-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  justify-items: stretch;
  align-items: start;
  margin-top: .5rem;
}
@media (max-width: 992px){
  .audio-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .audio-grid{ grid-template-columns: 1fr; }
}

.audio-card{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  padding: 12px;
}

.audio-title{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-weight:600; margin:0 0 .25rem;
}
.audio-meta{
  color: var(--muted); font-size:.92rem; margin:.1rem 0 .5rem;
}

.audio-chip{
  display:inline-block; padding:.2rem .55rem; border:1px solid var(--chip-border);
  border-radius:999px; background:var(--chip); font-size:.85rem; line-height:1;
  text-decoration:none; white-space:nowrap;
}
.audio-actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }

.morph-row{ margin-top:.75rem; }
.morph-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem;
}
.morph-steps{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:10px;
}
@media (max-width: 992px){
  .morph-steps{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .morph-steps{ grid-template-columns: 1fr; }
}

.step-card{
  border:1px solid var(--border); border-radius:10px; padding:.6rem;
  background:#fff;
}
.step-title{ font-weight:600; font-size:.95rem; margin:0 0 .25rem; text-align:left; }
.step-meta{ color:var(--muted); font-size:.88rem; margin:.15rem 0 .35rem; }
.step-actions{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }

audio{ width:100%; height:32px; }


.audio-grid.two-col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.audio-card, .step-card{ width: 100%; min-width: 0; box-sizing: border-box; }

.audio-title{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-width:0; }
.audio-title > *{ min-width:0; }
.audio-title strong, .audio-title span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
audio{ width:100%; min-width:0; height:32px; }

hr.section-sep{
  border:0;
  height:3px;
  background: linear-gradient(to right, transparent, #d1d5db, transparent);
  margin: 1.25rem 0 1rem;
}


.method-figure {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  margin: .5rem 0 1rem;
}
.method-figure--bleed {
  box-sizing: border-box;
  width: min(800px, 100vw);
  margin-left: 50%;
  transform: translateX(-50%);
}
.method-figure > img { display:block; width:100%; height:auto; }


.img-caption.overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .6rem .9rem;
  color: #fff; font-weight: 600; font-size: .98rem; text-align: left;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.8) 100%);
}
@media (max-width: 600px){
  .img-caption.overlay{ font-size: 1.02rem; }
}


.audio-card.is-highlight{
  border: 2px solid #2563eb;
  background: linear-gradient(145deg, rgba(37,99,235,.04), rgba(37,99,235,.01));
  box-shadow: 0 0 16px rgba(37,99,235,.10);
}
.ours-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .55rem; border-radius:999px;
  background:#2563eb; color:#fff; font-size:.78rem; font-weight:700;
  line-height:1; white-space:nowrap; vertical-align:middle;
}


.recon-pair{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap:12px; margin-top:.75rem;
}
.recon-pair .audio-card{ display:flex; flex-direction:column; }
.recon-pair .audio-card audio{ margin-top:auto; }
@media (max-width:600px){
  .recon-pair{ grid-template-columns:1fr; }
}


.demo-group{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  padding:1.25rem;
  margin-top:1rem;
}
.demo-group-title{
  font-size:1.05rem; font-weight:700; margin:0 0 .75rem; text-align:center;
  color:var(--fg);
}


.recon-group{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  padding:1rem;
  margin-top:.75rem;
}
.recon-group-title{
  font-size:.98rem; font-weight:700; margin:0 0 .5rem;
}