/* U2 qualitative output collage for the project hero and release examples. */
body { background: linear-gradient(145deg, #fffaf4 0%, #fff5ed 55%, #fff0e6 100%); }

.hero {
  min-height: 665px;
  padding: 0;
  display: block;
  isolation: isolate;
  border-bottom-color: #111a1d;
  background: #12191c;
}

.hero::before { display: none; }

.hero-mosaic {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 3px;
  transform: scale(1.04);
}

.hero-mosaic span {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px #ffffff16;
  filter: saturate(1.06) contrast(1.04);
}

.hero-tile--city { background-image: url("selected_image_generation/01_风景城市__007__cfg4.0_seed1967757102_ar9x16.png"); }
.hero-tile--scarf { background-image: url("assets/examples/editing/soft-scarf-result.png"); }
.hero-tile--gold-leaf { background-image: url("selected_image_generation/cfg3.5_seed1656246583_ar16x9.png"); }
.hero-tile--graphite { background-image: url("selected_image_generation/03_人物肖像__055__cfg4.0_seed13171928_ar3x4.png"); }
.hero-tile--three-d-room { background-image: url("selected_3d_understanding/13_0d4e574cdf6f48d79b1fe1337fed5097/blender_render__13_0d4e574cdf6f48d79b1fe1337fed5097.png"); }
.hero-tile--street-art { background-image: url("assets/examples/editing/street-art-background-result.png"); }
.hero-tile--video { background-image: url("assets/examples/video/014_LYA-5-keyframes.jpg"); background-position: left center; background-size: auto 100%; }
.hero-tile--butterfly { background-image: url("assets/examples/editing/butterfly-color-result.png"); }
.hero-tile--painting { background-image: url("selected_image_understanding/images/case04_MMMU_1571.jpg"); }
.hero-tile--plant { background-image: url("selected_image_understanding/images/case06_MMMU_720.jpg"); }
.hero-tile--three-d-building { background-image: url("selected_3d_understanding/02_7d22c31b7af049d69b827b4dc23a04b8/blender_render__02_7d22c31b7af049d69b827b4dc23a04b8.png"); }
.hero-tile--coast { background-image: url("selected_image_generation/01_风景城市__082__cfg4.0_seed221016654_ar16x9.png"); }
.hero-tile--phase { background-image: url("selected_image_understanding/images/case37_MMMU_Pro_1685.jpg"); }
.hero-tile--future-car { background-image: url("assets/examples/editing/future-city-car-result.png"); }
.hero-tile--flowers { background-image: url("assets/examples/editing/white-flowers-result.png"); }
.hero-tile--forest { background-image: url("assets/examples/editing/forest-watercolor-result.png"); }
.hero-tile--rainy-room { background-image: url("selected_image_generation/05_食品产品__077__cfg3.0_seed1361308449_ar16x9.png"); }
.hero-tile--watercolor { background-image: url("assets/examples/editing/watercolor-landscape-result.png"); }

.hero-scrim {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, #091013f2 0%, #10191bdc 35%, #121c1e9d 58%, #0b1418ad 100%),
    linear-gradient(0deg, #060b0b82 0%, transparent 45%);
}

.hero-inner {
  min-height: 665px;
  padding: 79px 0 65px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .64fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.hero .overline { color: #f5d7c6; }
.hero h1 { width: max-content; max-width: calc(100vw - 64px); color: #fffdf8; font-size: clamp(62px, 6.2vw, 94px); white-space: nowrap; text-shadow: 0 2px 19px #00000042; }
.hero-title { color: #fbf4eb; }
.hero-abstract { color: #d5d7d3; }
.action-dark { background: #f26f4c; box-shadow: 0 8px 18px #00000033; }
.action-light { border-color: #ffffff80; color: #fffdf8; background: #ffffff10; backdrop-filter: blur(7px); }

.hero-logo-wrap {
  position: relative;
  align-self: auto;
  justify-self: end;
  display: flex;
  width: min(460px, 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hero-logo-wrap::before { content: ""; position: absolute; z-index: -1; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd778d4 0%, #f27b5c84 43%, #e4556440 65%, transparent 72%); box-shadow: 0 0 0 22px #ffc78012, 0 0 0 54px #f26f4c0b; filter: blur(2px); }
.hero-logo { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: normal; position: static; filter: drop-shadow(0 18px 24px #0000004d); }
.hero-logo-wrap::after { display: none; }
.hero-logo-wrap p { color: #875a4b; margin: -4px 0 0; font-size: 8px; font-weight: 750; letter-spacing: .11em; text-align: center; text-transform: uppercase; }

.example-card { isolation: isolate; border-color: #ffffff45; }
.example-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("method/case.PNG");
  background-size: 385% auto;
  background-position: var(--crop-x) var(--crop-y);
  filter: saturate(1.08) contrast(1.05);
}

.example-card::after {
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  opacity: 1;
  box-shadow: none;
  background:
    linear-gradient(90deg, #071011d9 0%, #0b141399 56%, #07101139 100%),
    linear-gradient(0deg, #070d0fb5 0%, transparent 65%);
}

.example-card h4 { max-width: 174px; margin-top: 27px; }
.example-card p { max-width: 174px; color: #e1e4df; }

/* A light palette sampled from the star logo: cream, gold, orange, and coral. */
.gallery {
  background:
    radial-gradient(circle at 87% 7%, #ffd87852 0, transparent 22%),
    radial-gradient(circle at 7% 42%, #f5988550 0, transparent 24%),
    #fff7ef;
  color: #3f302f;
}

.gallery .overline { color: #b7664d; }
.gallery .overline span { background: #e96e4d; }
.gallery h2 em { color: #d65f61; }
.gallery .split-heading > p { color: #76615b; }

.case-study {
  background: #fffdf9;
  border-color: #edc7b4;
  box-shadow: 0 15px 40px #9d5f3617;
}

.case-study figure { background: #fff6e9; }
.case-label { color: #c85e48; }
.case-study h3 { color: #482f2c; }
.case-study > div > p:not(.case-label) { color: #735e58; }
.case-study li { color: #58423d; border-top-color: #edc7b4; }
.case-study li::before { color: #dc7158; }

.task-rail { border-top-color: #edc7b4; }
.task-rail:last-child { border-bottom-color: #edc7b4; }
.task-head span { color: #c96048; }
.task-head h3 { color: #49322f; }
.task-head p { color: #866d63; }
.scroll-control { color: #ba543f; border-color: #df9d82; background: #fffaf4; }
.scroll-control:hover { color: #fff; background: #e27856; border-color: #e27856; }

.example-card {
  border-color: #e3a991;
  background: #fffdf9;
  box-shadow: 0 8px 22px #9f5b3717;
}

.example-card::after {
  background: linear-gradient(0deg, #542f328f 0%, #542f3224 54%, transparent 73%);
}

.example-top { color: #653f35; text-shadow: none; }
.example-top span { padding: 4px 6px; border-radius: 3px; background: #fff9f0dc; }
.example-top span:last-child { color: #b75442; }
.example-card h4 { color: #fffdf8; text-shadow: 0 1px 7px #2f1718cc; }
.example-card p { color: #fff9f1; text-shadow: 0 1px 5px #2f1718cc; }

/* Method section: let each supplied diagram keep its own aspect ratio. */
.method { padding: 82px 0 72px; }
.method .section-heading { margin-bottom: 34px; }
.method-overview {
  margin: 0;
  padding: 11px;
  overflow: hidden;
  border: 1px solid #2e2a27;
  border-radius: 14px;
  background: #171717;
  box-shadow: 0 16px 34px #37211618;
}
.method-overview img { width: 100%; border-radius: 7px; }
.method-overview figcaption {
  margin: 0;
  padding: 13px 8px 4px;
  color: #ddd8d0;
  font-size: 12px;
  line-height: 1.55;
}
.method-overview figcaption b { color: #fff9ef; }

.method-notes {
  gap: 16px;
  padding: 30px 0 38px;
}
.method-notes article {
  min-height: 166px;
  padding: 20px 21px;
  border: 1px solid #ecd9c7;
  border-top: 3px solid #e57b59;
  border-radius: 10px;
  background: #fffdf9;
  box-shadow: 0 9px 20px #8e553012;
}
.method-notes h3 { margin: 14px 0 8px; }

.representation-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 20px;
  margin-top: 20px;
}
.representation-grid figure {
  margin: 0;
  padding: 12px;
  border: 1px solid #ecd9c7;
  border-radius: 10px;
  background: #fffdf9;
  box-shadow: 0 9px 20px #8e553012;
}
.representation-grid figcaption {
  margin: 11px 3px 2px;
  color: #6d625d;
  font-size: 12px;
  line-height: 1.55;
}
.representation-grid figcaption b { color: #3f3532; }

/* Keep later release information compact and visually aligned with the page. */
.gallery { padding-top: 82px; padding-bottom: 88px; }
.gallery-rails { margin-top: 64px; }
.results { padding: 82px 0 68px; }
.citation { padding-top: 72px; padding-bottom: 72px; }
.citation pre {
  border: 1px solid #ecd9c7;
  color: #6a453b;
  background: #fff7ee;
  box-shadow: 7px 7px 0 #f3d6bd;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.method { padding: 104px 0 112px; }
.method-intro { display: block; margin-bottom: 27px; }
.method-intro h2 { max-width: none; margin: 0; color: #20252d; font-size: clamp(42px, 4.5vw, 64px); line-height: 1; letter-spacing: -.02em; }
.method-intro h2 em { color: #df7756; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.015em; }
.method-intro > p:last-child { display: none; }

.method-figure { margin: 0; padding: 16px; border: 1px solid #ead7c7; border-radius: 15px; background: #fffdf9; box-shadow: 0 15px 34px #8f593016; }
.method-figure img { display: block; width: 100%; border-radius: 8px; }
.method-overview { overflow: visible; border-color: #e5c5b2; background: #fffdf9; box-shadow: 0 17px 38px #8f59301b; }
.method-overview img { border-radius: 6px; }
.method-figure figcaption { max-width: 1040px; margin: 16px 5px 3px; color: #715e56; font-size: 14px; line-height: 1.58; }
.method-figure figcaption b { color: #443631; }
.method-details { display: grid; gap: 62px; margin-top: 76px; }
.method-figure-heading { display: block; margin: 4px 5px 23px; }
.method-figure-heading .overline { margin: 0; }
.method-figure-heading h3 { margin: 0; color: #3f312f; font: 400 clamp(29px, 3vw, 42px)/1.03 Georgia, "Times New Roman", serif; letter-spacing: -.015em; text-align: left; }
.method-architecture-heading { margin: 3px 5px 27px; }
.method-architecture-heading h3 { max-width: 900px; color: #20252d; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(40px, 4.4vw, 68px); font-weight: 740; line-height: .94; letter-spacing: -.02em; }
.method-architecture-heading h3 em { color: #df7756; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.015em; }

.results-heading { margin-bottom: 34px; }
.results-heading h2 { font-size: clamp(42px, 5.1vw, 68px); line-height: 1; }

/* A wider, warm data chapter keeps the dark matrix in the same visual family as the project mark. */
.results {
  width: min(100% - 76px, 1640px);
  margin: 58px auto;
  padding: 76px clamp(26px, 4vw, 68px) 62px;
  border: 1px solid #efd3c1;
  border-radius: 22px;
  background:
    radial-gradient(circle at 96% 5%, #ffd37a52 0, transparent 20%),
    radial-gradient(circle at 3% 96%, #f5978460 0, transparent 25%),
    #fff8f0;
  box-shadow: 0 22px 54px #9d5f3616;
}
.results .metric-strip { border-top-color: #77564d; border-bottom-color: #77564d; }
.results .metric-strip article { border-right-color: #e4c4b2; }
.results .metric-strip span { color: #825f55; }

/* A warm dark palette sampled from the project mark: espresso, cream, coral, and rose. */
.table-scroll { border: 1px solid #5a403b; border-radius: 12px; background: #2b2221; box-shadow: 0 16px 32px #61392b21; }
.benchmark-table { min-width: 1060px; color: #f8eee5; font-size: 16px; }
.benchmark-table th { padding: 19px 18px; color: #ffe6d2; background: #432f2d; border-bottom-color: #6b4a43; font-size: 12px; letter-spacing: .075em; }
.benchmark-table td { padding: 18px; color: #f2e6dd; border-bottom-color: #493633; line-height: 1.35; }
.benchmark-table tbody tr:not(.table-group) { background: #312827; }
.benchmark-table tbody tr:not(.table-group):nth-child(odd) { background: #372d2b; }
.benchmark-table tbody tr:not(.table-group) td { transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.benchmark-table tbody tr:not(.table-group):hover td { color: #fffaf4; background: #5b3a35; box-shadow: inset 0 1px #ffb18e, inset 0 -1px #ffb18e; }
.benchmark-table .table-group td { padding: 13px 18px; color: #ffc7a8; background: #493633; border-bottom-color: #6b4a43; font-size: 11px; }
.benchmark-table td.ours { color: #fff1e6; background: #683d38; box-shadow: inset 3px 0 #f17a5b; }
.benchmark-table tbody tr:not(.table-group):hover td.ours { color: #fffaf4; background: #9a5144; box-shadow: inset 3px 0 #ffd1af, inset 0 1px #ffb18e, inset 0 -1px #ffb18e; }
.table-scroll::-webkit-scrollbar { height: 9px; width: 9px; }
.table-scroll::-webkit-scrollbar-track { background: #2b2221; }
.table-scroll::-webkit-scrollbar-thumb { border: 2px solid #2b2221; border-radius: 99px; background: #b77a65; }

.citation { display: block; padding: 62px 0; }
.resource-placeholder {
  min-height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 38px;
  border: 1px dashed #e4bda6;
  border-radius: 12px;
  background: #fff9f2;
}
.resource-placeholder .overline { margin-bottom: 12px; }
.resource-placeholder h2 { font-size: clamp(38px, 4.1vw, 56px); }

/* Individual high-resolution image-generation examples. */
.generation-showcase { margin-top: 34px; }
.generation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 26px 20px; }
.generation-example { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #e8bfa7; border-radius: 11px; background: #fffdf9; box-shadow: 0 9px 20px #985c3218; }
.generation-example img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f8efe7; border-bottom: 1px solid #f0d8c9; }
.generation-example figcaption { min-height: 136px; margin: 0; padding: 14px 15px 16px; color: #725c55; font: 14px/1.5 Georgia, "Times New Roman", serif; }
.generation-example figcaption span { display: block; margin: 0 0 7px; color: #ba6049; font: 800 10px/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

/* Supplied edit pairs are intentionally large and horizontally browsable. */
.editing-showcase { display: flex; gap: 28px; margin-top: 34px; overflow-x: auto; padding: 0 2px 15px; scroll-snap-type: x proximity; scrollbar-color: #c56c55 transparent; scrollbar-width: thin; }
.editing-showcase::-webkit-scrollbar { height: 9px; }
.editing-showcase::-webkit-scrollbar-thumb { border-radius: 99px; background: #c56c55; }
.editing-example { flex: 0 0 min(80vw, 970px); margin: 0; padding: 20px; scroll-snap-align: start; border: 1px solid #e8bfa7; border-radius: 12px; background: #fffdf9; box-shadow: 0 12px 28px #985c3216; }
.editing-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.editing-pair figure { position: relative; display: flex; align-items: center; justify-content: center; min-height: 440px; margin: 0; overflow: hidden; border-radius: 8px; background: #f6ece2; }
.editing-pair img { display: block; width: 100%; height: 500px; object-fit: contain; }
.editing-pair span { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 5px 8px; border: 1px solid #ffffff9a; border-radius: 4px; color: #fffdf8; background: #4f3027aa; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.editing-caption { max-width: 880px; margin: 20px 4px 4px; color: #765f58; text-align: left; }
.editing-caption > span { display: block; margin-bottom: 6px; color: #ba6049; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.editing-caption h4 { margin: 0 0 7px; color: #49322f; font-size: 25px; }
.editing-caption p { margin: 0; font: italic 17px/1.55 Georgia, "Times New Roman", serif; }

/* Desktop-first understanding examples: three broad cards at a glance. */
.qa-task { padding-top: 62px; padding-bottom: 66px; }
.qa-task .task-head { margin-bottom: 29px; }
.qa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.qa-example { display: grid; grid-template-columns: 1fr; min-height: 468px; overflow: hidden; min-width: 0; border: 1px solid #e8bfa7; border-radius: 13px; background: #fffdf9; box-shadow: 0 12px 28px #985c3216; }
.qa-example figure { display: flex; align-items: center; justify-content: center; min-height: 294px; margin: 0; padding: 16px; background: linear-gradient(145deg, #fff4e7, #f8e8dc); }
.qa-example img { display: block; width: 100%; height: 100%; max-height: 330px; object-fit: contain; }
.qa-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 24px 25px 28px; }
.qa-label { margin: 0 0 7px; color: #b95e48; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.qa-question { margin: 0 0 18px; color: #49322f; font: 400 17px/1.42 Georgia, "Times New Roman", serif; }
.qa-answer { margin: 0; color: #8f4036; font: 700 16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
.image-understanding-grid { display: flex; overflow-x: auto; gap: 24px; padding: 0 1px 14px; scroll-snap-type: x proximity; scrollbar-color: #c56c55 transparent; scrollbar-width: thin; }
.image-understanding-grid .qa-example { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.image-understanding-grid::-webkit-scrollbar { height: 8px; }
.image-understanding-grid::-webkit-scrollbar-thumb { border-radius: 99px; background: #c56c55; }
.three-d-grid { display: flex; overflow-x: auto; gap: 28px; padding: 0 2px 15px; scroll-snap-type: x proximity; scrollbar-color: #c56c55 transparent; scrollbar-width: thin; }
.three-d-grid::-webkit-scrollbar { height: 9px; }
.three-d-grid::-webkit-scrollbar-thumb { border-radius: 99px; background: #c56c55; }
.three-d-grid .qa-example { flex: 0 0 min(76vw, 630px); min-height: 620px; grid-template-columns: 1fr; scroll-snap-align: start; }
.three-d-grid .qa-example figure { min-height: 430px; padding: 0; background: #f4e9df; }
.three-d-grid .qa-example img { max-height: none; object-fit: cover; }
.video-task { padding-top: 62px; padding-bottom: 72px; }
.video-task .task-head { margin-bottom: 29px; }
.video-gallery { display: grid; gap: 34px; }
.video-example { display: grid; grid-template-columns: 1fr; overflow: hidden; min-width: 0; border: 1px solid #e8bfa7; border-radius: 13px; background: #fffdf9; box-shadow: 0 12px 28px #985c3216; }
.video-sheet { position: relative; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; padding: 22px 12px; border-block: 12px solid #4a3a38; background: #f4e9df; scrollbar-color: #c56c55 #f4e9df; scrollbar-width: thin; }
.video-sheet::before, .video-sheet::after { position: absolute; z-index: 2; right: 0; left: 0; height: 8px; content: ""; pointer-events: none; background: repeating-linear-gradient(90deg, #f4e9df 0 14px, transparent 14px 23px); }
.video-sheet::before { top: -10px; }
.video-sheet::after { bottom: -10px; }
.video-sheet::-webkit-scrollbar { height: 10px; }
.video-sheet::-webkit-scrollbar-track { background: #f4e9df; }
.video-sheet::-webkit-scrollbar-thumb { border: 2px solid #f4e9df; border-radius: 99px; background: #c56c55; }
.video-sheet img { position: relative; z-index: 1; display: block; width: auto; max-width: none; height: 276px; }
.video-frame-label { position: sticky; z-index: 3; top: 14px; left: 22px; display: block; width: max-content; margin: 0 0 -31px; padding: 7px 11px; border: 1px solid #f7c7a9; border-radius: 5px; background: #b94f3d; box-shadow: 0 3px 10px #482c2680; color: #fff9f1; font-size: 10px; font-weight: 850; letter-spacing: .12em; line-height: 1; }
.video-copy { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; padding: 28px 34px 12px; }
.video-qa { padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid #f0d8c9; }
.video-qa:last-child { padding-bottom: 12px; margin-bottom: 0; border-bottom: 0; }
.video-qa .qa-question { margin-bottom: 16px; }

/* Present the planned task examples as large, reviewable visual cards. */
main { display: flex; flex-direction: column; }
.hero { order: 0; }
.teaser { order: 1; }
.method { order: 2; }
.gallery { order: 3; }
.results { order: 4; }
.citation { order: 5; }

.gallery .split-heading { display: block; }
.teaser-hero { width: var(--shell); margin: 0 auto; padding: 58px 0 40px; }
.teaser-hero .figure-frame { padding: 13px; border-radius: 9px; box-shadow: 0 15px 34px #7e47241a; }
.teaser-hero figcaption { margin-top: 14px; font-size: 13px; }

.demo-intro { margin-bottom: 52px; }
.demo-intro h2 { margin: 0; color: #49322f; font-size: clamp(48px, 5.7vw, 78px); }
.demo-intro h2 em { color: #d65f61; }
.gallery .split-heading { margin-bottom: 34px; }
.gallery .split-heading h3 { margin: 0; color: #49322f; font: 400 clamp(29px, 3.4vw, 47px)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.015em; }
.task-head { margin-bottom: 30px; }
.task-head span { font-size: 26px; }
.task-head h3 { font: 400 clamp(39px, 4.25vw, 61px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }

.example-card { flex-basis: clamp(360px, 36vw, 470px); min-height: 286px; padding: 19px; }
.example-art { background-size: 320% auto; }
.example-card h4 { max-width: 265px; margin-top: 151px; font-size: 18px; line-height: 1.08; }
.example-card p { max-width: 267px; font-size: 11px; line-height: 1.45; }
.example-top { font-size: 10px; }

@media (max-width: 820px) {
  .hero, .hero-inner { min-height: 568px; }
  .hero-inner { grid-template-columns: 1fr; padding: 61px 0 42px; }
  .hero-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .method { padding: 66px 0; }
  .method-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
  .method-intro .overline, .method-intro h2, .method-intro > p:last-child { grid-column: 1; }
  .method-intro .overline { grid-row: 1; }
  .method-intro h2 { grid-row: 2; }
  .method-intro > p:last-child { grid-row: 3; }
  .method-intro h2 { max-width: 680px; }
  .method-intro > p:last-child { max-width: 650px; margin-bottom: 0; }
  .method-details { gap: 44px; margin-top: 54px; }
  .representation-grid { grid-template-columns: 1fr; }
  .gallery { padding: 76px 0 78px; }
  .gallery-rails { margin-top: 56px; }
  .results { padding: 76px 0 60px; }
  .citation { padding: 68px 0; }
  .generation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .editing-showcase { gap: 24px; }
  .qa-grid { grid-template-columns: 1fr; }
  .qa-example { grid-template-columns: minmax(230px, .88fr) minmax(0, 1.12fr); }
  .image-understanding-grid .qa-example { flex-basis: min(76vw, 500px); grid-template-columns: 1fr; }
  .example-card { flex-basis: min(70vw, 470px); }
}

@media (max-width: 540px) {
  .hero h1 { width: auto; max-width: none; font-size: clamp(50px, 13vw, 64px); white-space: normal; }
  .hero, .hero-inner { min-height: 555px; }
  .hero-inner { padding: 46px 0 39px; }
  .hero-mosaic { gap: 2px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
  .gallery { padding: 68px 0 70px; }
  .method { padding: 76px 0 82px; }
  .method-intro { margin-bottom: 27px; }
  .method-intro h2 { font-size: clamp(44px, 13vw, 58px); }
  .method-intro > p:last-child { font-size: 15px; }
  .method-figure { padding: 8px; border-radius: 10px; }
  .method-figure-heading { grid-template-columns: 1fr; gap: 9px; margin: 4px 4px 17px; }
  .method-figure-heading h3 { font-size: 27px; text-align: left; }
  .method-architecture-heading h3 { font-size: clamp(36px, 10vw, 52px); }
  .method-figure figcaption { margin: 12px 4px 2px; font-size: 13px; }
  .method-details { gap: 34px; margin-top: 43px; }
  .gallery-rails { margin-top: 48px; }
  .results { padding: 70px 0 55px; }
  .citation { padding: 64px 0; }
  .resource-placeholder { min-height: 148px; padding: 26px 22px; }
  .generation-grid { grid-template-columns: 1fr; gap: 18px; }
  .generation-example figcaption { min-height: auto; padding: 13px 14px 15px; font-size: 13px; }
  .editing-example { padding: 8px; border-radius: 9px; }
  .editing-pair { gap: 8px; }
  .editing-pair figure { min-height: 270px; }
  .editing-pair img { height: 300px; }
  .editing-pair span { top: 8px; left: 8px; padding: 4px 6px; font-size: 8px; }
  .editing-caption { margin: 13px 8px 4px; }
  .editing-caption h4 { font-size: 18px; }
  .editing-caption p { font-size: 14px; }
  .example-card { flex-basis: 86vw; min-height: 260px; padding: 16px; }
  .example-card h4 { max-width: 235px; margin-top: 132px; font-size: 17px; }
  .example-card p { max-width: 240px; }
  .qa-task { padding-top: 52px; padding-bottom: 54px; }
  .task-head { margin-bottom: 22px; }
  .task-head h3 { font-size: clamp(36px, 10vw, 46px); }
  .qa-grid { gap: 18px; }
  .qa-example, .three-d-grid .qa-example { grid-template-columns: 1fr; }
  .qa-example figure, .three-d-grid .qa-example figure { min-height: 260px; }
  .three-d-grid .qa-example { flex-basis: 86vw; min-height: 500px; }
  .qa-copy { padding: 20px 18px 21px; }
  .qa-question { margin-bottom: 18px; font-size: 16px; }
  .qa-answer { font-size: 15px; }
  .video-task { padding-top: 52px; padding-bottom: 58px; }
  .video-example { grid-template-columns: 1fr; }
  .video-sheet { padding: 18px 7px; }
  .video-sheet img { height: 180px; }
  .video-frame-label { top: 10px; left: 14px; margin-bottom: -27px; padding: 6px 8px; font-size: 9px; }
  .video-copy { padding: 20px 18px 2px; }
  .video-qa { padding-bottom: 19px; margin-bottom: 19px; }
}

@media (max-width: 820px) {
  .results { width: min(100% - 34px, 1500px); margin: 34px auto; padding: 58px 22px 48px; border-radius: 16px; }
}

@media (max-width: 540px) {
  .results { width: calc(100% - 24px); margin: 24px auto; padding: 48px 14px 40px; border-radius: 13px; }
  .benchmark-table { font-size: 15px; }
  .benchmark-table th { padding: 16px 15px; font-size: 11px; }
  .benchmark-table td { padding: 15px; }
}