:root{
  --bg: #0b1020;
  --card: rgba(255,255,255,0.06);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --border: rgba(255,255,255,0.12);
  --accent: #7c5cff;

  /* Allow a wider layout on desktop so cards don’t sit too narrow */
  --maxw: 1600px; /* was 1440px */
  --radius: 16px;
  --shadow: 0 10px 35px rgba(0,0,0,0.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --text:rgba(0,0,0,0.90);
    --muted:rgba(0,0,0,0.62);
    --border:rgba(0,0,0,0.12);
    --shadow: 0 10px 25px rgba(0,0,0,0.08);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  /* layered decorative radial gradients over the base background color */
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(124,92,255,0.25), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(34,197,94,0.14), transparent 55%),
    var(--bg);
  /* Make the decorative background fixed to the viewport and do not tile.
     This removes hard seams that can appear when the background tiles while
     scrolling. If you prefer tiled backgrounds, see the commented overlay
     example further down in this file. */
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  background-size: cover, cover, cover;
  color: var(--text);
  line-height: 1.55;
}

/* Constrain body content with comfortable side padding on small screens,
   but let it grow wider on desktop to reduce large margins */
.container{
  width:min(var(--maxw), calc(100% - 24px));
  margin: 0 auto;
}

.hero{ padding: 56px 0 26px; }
.hero .container{
  /* Match main container width so hero and cards align */
  width: min(var(--maxw), calc(100% - 24px));
}

.hero-header{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  padding: 0;
}
.hero-logo{
  max-height: 64px;
  height: auto;
  width: auto;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 8px;
}

.hero-logos-inline{
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-logo-separator{
  display: inline-block;
  width: 0;
  height: 52px;
  border-left: 2px solid #ffffff;
}
.venue{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}
h1{
  /* Slightly smaller max size so the long title can fit on one line */
  font-size: clamp(30px, 3.4vw, 40px); /* was clamp(30px, 4vw, 48px) */
  line-height: 1.08;
  margin: 0 0 14px;
}
.authors,.affils{ margin: 6px 0; color: var(--muted); }
.authors a{ color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--border); }
.authors a:hover{ border-bottom-color: rgba(124,92,255,0.8); }
.sep{ padding: 0 8px; color: var(--border); }

.cta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(124,92,255,0.18);
  color: var(--text);
  text-decoration:none;
  box-shadow: var(--shadow);
}
.btn:hover{ border-color: rgba(124,92,255,0.6); }
.btn-ghost{ background: transparent; box-shadow:none; }
.btn-small{ padding: 8px 12px; font-size: 14px; }

.btn-icon{
  height: 18px;
  width: auto;
  margin-right: 8px;
  display: inline-block;
}

.teaser{
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.teaser img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 12px;
}
.caption{ margin: 10px 2px 0; color: var(--muted); font-size: 13px; }

/* Comparison grid layout */
.comparison-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 16px;
}
@media (min-width: 860px){
  .comparison-grid{ grid-template-columns: 1fr 1fr; }
}

/* Failures card: show standalone failure cases, 4 per row on wide screens */
#failures .comparison-grid{
  grid-template-columns: 1fr 1fr; /* default on small/medium screens */
}
@media (min-width: 900px){
  #failures .comparison-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.comparison-cell{
  background: rgba(0,0,0,0.1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.comparison-pair{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 600px){
  .comparison-pair{ flex-direction: row; }
}

.video-comparison{
  flex: 1;
  position: relative;
}

.video-label{
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.5);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
}

.video-comparison video{
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  display: block;
}

/* Custom teaser progress bar (non-interactive) */
.teaser-progress{
  margin-top: 4px;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
}

.teaser-progress-bar{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #7c5cff);
  transition: width 0.08s linear;
}

.comparison-caption{
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

main{ padding: 12px 0 60px; }

/* Card layout */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin: 16px auto;        /* center cards within the full-width main area */
  max-width: var(--maxw);   /* align with container max width */
}

/* Approach card with text and figure layout */
.approach-card h2{ margin-top: 0; }
.approach-content{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.approach-text{ flex: 1 1 auto; }
.approach-text p{ margin: 10px 0; }

.approach-figure{
  margin: 0;
  text-align: center;
}
.approach-figure-media{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
}
.approach-figure img{
  width: min(100%, 960px);
  height: auto;
  border-radius: 8px;
  border: none;
  background: transparent;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.approach-figure figcaption{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* Acknowledgements logos */
.ack-logos{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}

.ack-logo{
  max-height: 60px;
  height: auto;
  width: auto;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 8px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 860px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

h2{ margin: 0 0 10px; font-size: 20px; }
p{ margin: 10px 0; }

.bullets{ margin: 0; padding-left: 18px; }
.small{ font-size: 13px; }
.muted{ color: var(--muted); }

.code-block{
  overflow:auto;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.row{ display:flex; align-items:center; gap: 10px; margin-top: 10px; }
.copy-status{ color: var(--muted); font-size: 13px; }

.video-wrap video{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}

/* If you use iframe embeds */
.iframe-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.iframe-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.media-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 860px){
  .media-grid{ grid-template-columns: 1fr 1fr 1fr; }
}
figure{ margin: 0; }
figcaption{ margin-top: 8px; font-size: 13px; color: var(--muted); }

.placeholder{
  border-radius: 14px;
  border: 1px dashed var(--border);
  aspect-ratio: 16 / 9;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
}

.footer{ margin-top: 20px; }

/* Ablations: each cell is a full-width row of four videos */
#ablations .comparison-grid{
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  #ablations .comparison-grid{ grid-template-columns: 1fr; }
}

/*
 Optional: If you want to keep a repeating decorative background (e.g. a small
 pattern image) but avoid hard boundaries between tiles while scrolling, you
 can use one of the approaches below. They are commented out by default.

1) Gradient overlay fade near page edges (works well for vertical seams):

body.repeat-soften {
  /* example repeating background image */
  background-image: url('../assets/pattern.png');
  background-repeat: repeat;
  background-attachment: local; /* allow background to scroll with content */
}

/* Apply a subtle top/bottom fade overlay using a pseudo-element */
body.repeat-soften::before{
  content: '';
  position: fixed;
  inset: 0; /* cover viewport */
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 8%, transparent 92%, var(--bg) 100%);
  mix-blend-mode: normal;
}

2) Use mask-image to fade tiled background (modern browsers):

body.repeat-mask {
  background-image: url('../assets/pattern.png');
  background-repeat: repeat;
  background-attachment: local;
  /* fade out the tiled content near the top/bottom edges of the viewport */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.06) 8%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,1));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.06) 8%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,1));
}

To enable either approach, add the class `repeat-soften` or `repeat-mask` to
the <body> element in `docs/index.html` and provide a suitable `assets/pattern.png`.
*/