.museum-page { background: #f5f5f5; }
.museum-page .portfolio-header { height: 239px; }
.museum-page main { color: #000; }
.case-shell { position: relative; width: 1384px; height: 4433px; margin: 0 auto; overflow: hidden; border: 1px solid #c0c0c0; background: #fff; }
.case-shell::before, .case-shell::after { position: absolute; z-index: 1; width: 1px; background: #000; content: ""; }
.case-shell::before { top: 86px; left: 49px; height: 151px; }
.case-shell::after { top: 594px; left: 384px; height: 150px; }
.case-back { position: absolute; top: 40px; left: 49px; color: #757575; font-size: 16px; text-transform: uppercase; transition: color .2s ease; }
.case-back:hover, .case-back:focus-visible { color: #0637ff; outline: none; }
.case-shell h1 { position: absolute; top: 102px; left: 61px; width: 1272px; margin: 0; font-size: 48px; font-weight: 500; line-height: normal; letter-spacing: 3.84px; text-transform: uppercase; }
.case-hero { position: absolute; top: 237px; left: 49px; display: flex; }
.hero-small, .hero-large { height: 357px; border: 1px solid #000; padding: 10px; }
.hero-small { width: 336px; }
.hero-large { width: 948px; margin-left: -1px; }
.hero-small img { width: 100%; height: 335px; border: 1px solid #000; border-radius: 48px; object-fit: cover; }
.hero-animation-frame { position: relative; width: 100%; height: 335px; overflow: hidden; border: 1px solid #000; border-radius: 48px; background: #4c403e; }
.hero-animation-frame video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.case-details { position: absolute; top: 607px; left: 49px; display: flex; }
.project-links { width: 335px; }
.project-links a { display: flex; width: 219px; height: 40px; align-items: center; justify-content: space-between; border-bottom: 1px solid #000; padding: 8px; font-size: 14px; text-transform: lowercase; }
.project-links a { transition: color .2s ease, border-color .2s ease; }
.project-links a:hover, .project-links a:focus-visible { border-color: #0637ff; color: #0637ff; outline: none; }
.project-links a:hover img, .project-links a:focus-visible img { filter: invert(19%) sepia(100%) saturate(5449%) hue-rotate(232deg) brightness(97%) contrast(113%); }
.project-links a + a { margin-top: 16px; }
.project-links img { width: 13px; height: 14.16px; margin-right: 3px; transform: rotate(45deg); transition: filter .2s ease; }
.project-meta { display: flex; margin: 8px 0 0 11px; align-items: center; gap: 24px; color: #6b6b6b; font-size: 14px; line-height: 24px; white-space: nowrap; }
.project-meta i { width: 23px; height: 23px; margin: -6px; background: url("assets/home-v2/meta-dot.svg") center/contain no-repeat; }
.case-intro { position: absolute; top: 873px; left: 50%; width: 600px; margin: 0; transform: translateX(-50%); font-size: 20px; line-height: 28px; text-align: center; }
.showcase-grid { position: absolute; top: 1171px; left: -1px; display: grid; grid-template-columns: repeat(3,448px); gap: 20px; }
.showcase-grid img { width: 448px; height: 528px; object-fit: cover; }
.problem-section { position: absolute; top: 1829px; left: 50%; width: 600px; transform: translateX(-50%); text-align: center; }
.case-tabs { display: flex; align-items: center; justify-content: center; gap: 48px; }
.case-tabs button { border: 1px solid transparent; border-radius: 48px; padding: 8px 20px; color: #000; background: none; font: 400 36px "Kode Mono",monospace; text-transform: uppercase; cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.case-tabs button.active { border-color: #000; }
.case-tabs button:hover, .case-tabs button:focus-visible { border-color: #0637ff; color: #0637ff; outline: none; }
.case-tabs img { width: 78px; }
.problem-section > p { margin: 48px 0 0; font-size: 20px; line-height: 28px; }
.process-section { position: absolute; top: 2211px; left: 49px; width: 1284px; }
.process-section h2 { margin: 0; font-size: 36px; font-weight: 400; text-transform: uppercase; }
.process-carousel { display: flex; width: 961px; margin: 58px auto 0; align-items: center; justify-content: space-between; }
.process-carousel button, .screen-controls button { border: 0; padding: 0; background: none; cursor: pointer; }
.process-carousel button { border-radius: 0; }
.process-carousel button:hover, .process-carousel button:focus-visible { outline: none; }
.process-carousel button:hover img, .process-carousel button:focus-visible img { filter: invert(19%) sepia(100%) saturate(5449%) hue-rotate(232deg) brightness(97%) contrast(113%); }
.process-carousel button img { width: 42px; height: 42px; transition: filter .2s ease; }
.process-image { width: 717px; height: 371px; overflow: hidden; border-radius: 48px; }
.process-image img { width: 100%; height: 100%; object-fit: cover; }
.process-image img.is-contain { object-fit: contain; background: #999; }
.process-section h3 { margin: 24px 0 0; font-size: 20px; font-weight: 400; line-height: 28px; text-align: center; }
.process-section > p { width: 558px; margin: 24px auto 0; color: #6b6b6b; font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; }
.screens-section { position: absolute; top: 2974px; left: 49px; width: 1283px; height: 1468px; overflow: hidden; }
.screens-heading { position: absolute; top: 51px; left: 0; text-transform: uppercase; }
.screens-heading h2 { margin: 0 0 24px; font-size: 36px; font-weight: 400; }
.device-tabs { display: flex; align-items: center; gap: 24px; font-size: 24px; }
.device-tabs button { border: 1px solid transparent; border-radius: 48px; padding: 8px 20px; background: none; font: 400 24px "Kode Mono",monospace; text-transform: uppercase; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.device-tabs button.active { border-color: #000; }
.device-tabs button:hover, .device-tabs button:focus-visible { border-color: #0637ff; color: #0637ff; outline: none; }
.screens-carousel { position: absolute; top: 218px; left: 50%; display: flex; transform: translateX(-50%); align-items: center; gap: 80px; }
.screens-carousel > button { width: 42px; height: 42px; flex: 0 0 42px; border: 0; padding: 0; background: none; cursor: pointer; }
.screens-carousel > button:hover, .screens-carousel > button:focus-visible { outline: none; }
.screens-carousel > button:hover img, .screens-carousel > button:focus-visible img { filter: invert(19%) sepia(100%) saturate(5449%) hue-rotate(232deg) brightness(97%) contrast(113%); }
.screens-carousel > button img { width: 42px; height: 42px; transition: filter .2s ease; }
.screens-scroll-hint { position: absolute; top: 845px; left: 0; width: 100%; margin: 0; color: #6b6b6b; font-size: 14px; line-height: 20px; text-align: center; }
.gnm-page .case-shell { height: 4050px; }
.gnm-page .case-shell:has(.screens-section.show-desktop) { height: 4290px; }
.gnm-page .screens-section { height: 965px; }
.gnm-page .screens-scroll-hint { top: 940px; }
.gnm-page .screens-section.show-desktop { height: 1203px; }
.gnm-page .screens-section.show-desktop .screens-scroll-hint { top: 1178px; }
.alliance-page .screens-scroll-hint, .artlife-page .screens-scroll-hint { top: 1325px; }
.gnm-page .screens-content { position: relative; width: 1016px; height: 680px; overflow: hidden; }
.gnm-page .screens-section.show-desktop .screens-content { height: 920px; }
.screens-track { display: flex; gap: 28px; }
.gnm-page .screens-track { display: block; width: 100%; overflow: hidden; }
.gnm-page .screens-page { display: none; gap: 28px; }
.gnm-page .screens-page.active { display: flex; }
.screens-track img { width: 320px; height: 1133px; object-fit: cover; }
.desktop-screens-stage { position: relative; display: none; width: 1016px; height: 920px; }
.screens-section.show-desktop .screens-track { display: none; }
.screens-section.show-desktop .desktop-screens-stage { display: block; }
.desktop-screens-page { position: absolute; inset: 0; display: none; }
.desktop-screens-page.active { display: block; }
.desktop-screen-card { position: absolute; box-sizing: border-box; border: 1px solid #000; border-radius: 10px; padding: 14px; background: #fff; }
.desktop-screen-card > div { width: 100%; height: 100%; overflow: hidden; border: 1px solid #000; }
.desktop-screen-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.desktop-screen-card--short { top: 84px; left: 143px; width: 450px; }
.desktop-screen-card--tall { z-index: 1; top: 6px; left: 423px; width: 450px; }
.gnm-page .desktop-screen-card { height: auto; max-height: var(--screen-card-max-height); overflow: hidden; }
.gnm-page .desktop-screen-card--short { --screen-card-max-height: 666px; }
.gnm-page .desktop-screen-card--tall { --screen-card-max-height: 900px; }
.gnm-page .desktop-screen-card > div { box-sizing: border-box; height: auto; max-height: calc(var(--screen-card-max-height) - 30px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.gnm-page .desktop-screen-card img { width: 100%; height: auto; object-fit: contain; }
.gnm-page .mobile-screen-card { box-sizing: border-box; width: 320px; height: 680px; flex: 0 0 320px; border: 1px solid #000; padding: 7px; background: transparent; }
.gnm-page .mobile-screen-viewport { height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 6px solid #000; border-radius: 40px; background: #000; }
.gnm-page .mobile-screen-card img { display: block; width: 100%; height: auto; object-fit: initial; }
.next-project { position: relative; display: flex; width: 1384px; height: 298px; margin: 0 auto 120px; align-items: center; justify-content: center; border: 1px solid #c0c0c0; border-top: 0; background: #fff; font-size: 32px; font-weight: 500; letter-spacing: 2.56px; text-transform: uppercase; }
.next-project { transition: color .2s ease, border-color .2s ease; }
.next-project:hover, .next-project:focus-visible { border-color: #0637ff; color: #0637ff; outline: none; }
.next-project::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: transparent; content: ""; transition: background-color .2s ease; }
.next-project:hover::before, .next-project:focus-visible::before, .next-project:active::before { background: #0637ff; }

.dark-theme .museum-page { background: #040304; }
.dark-theme .museum-page main { color: #fff; }
.dark-theme .case-shell { border-color: #505050; background: #101010; }
.dark-theme .case-shell::before, .dark-theme .case-shell::after { background: #fff; }
.dark-theme .hero-small, .dark-theme .hero-large,
.dark-theme .hero-small img, .dark-theme .hero-animation-frame { border-color: #fff; }
.dark-theme .project-links a { border-color: #fff; }
.dark-theme .project-meta, .dark-theme .process-section > p, .dark-theme .screens-scroll-hint { color: #aaa; }
.dark-theme .project-links img, .dark-theme .case-tabs > img,
.dark-theme .process-carousel button img, .dark-theme .screens-carousel > button img { filter: invert(1); }
.dark-theme .case-tabs button, .dark-theme .device-tabs button { color: #fff; }
.dark-theme .case-tabs button.active, .dark-theme .device-tabs button.active { border-color: #fff; }
.dark-theme .process-carousel button:hover img, .dark-theme .process-carousel button:focus-visible img,
.dark-theme .screens-carousel > button:hover img, .dark-theme .screens-carousel > button:focus-visible img,
.dark-theme .project-links a:hover img, .dark-theme .project-links a:focus-visible img { filter: invert(19%) sepia(100%) saturate(5449%) hue-rotate(232deg) brightness(97%) contrast(113%); }
.dark-theme .next-project { border-color: #505050; background: #101010; color: #fff; }
.dark-theme .next-project:hover, .dark-theme .next-project:focus-visible { border-color: #0637ff; color: #0637ff; }

@media (max-width:760px) {
  .museum-page .portfolio-header { height: 190px; }
  .case-shell { width: calc(100% - 24px); height: auto; padding: 28px 14px 160px; }
  .case-shell::before, .case-shell::after { display: none; }
  .case-back, .case-shell h1, .case-hero, .case-details, .case-intro, .showcase-grid, .problem-section, .process-section, .screens-section { position: static; transform: none; }
  .case-back { display: block; margin-bottom: 48px; }
  .case-shell h1 { width: auto; margin-bottom: 36px; font-size: 28px; letter-spacing: 2px; }
  .case-hero { display: block; }
  .hero-small, .hero-large { width: 100%; }
  .hero-large { display: none; }
  .case-details { display: block; margin-top: 18px; }
  .project-links { width: 100%; }
  .project-meta { flex-wrap: wrap; margin: 30px 0 0; gap: 12px; white-space: normal; }
  .case-intro { width: auto; margin: 120px 0; font-size: 16px; line-height: 24px; }
  .case-intro br { display: none; }
  .showcase-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .showcase-grid img { width: 100%; height: 110vw; max-height: 528px; }
  .problem-section { width: auto; margin: 120px 0; }
  .case-tabs { gap: 18px; }
  .case-tabs button { font-size: 24px; }
  .case-tabs img { width: 48px; }
  .problem-section > p { font-size: 16px; line-height: 24px; }
  .process-section { width: auto; }
  .process-section h2 { font-size: 28px; }
  .process-section h3 { font-size: 16px; line-height: 24px; }
  .process-carousel { width: 100%; margin-top: 36px; gap: 10px; }
  .process-carousel button img { width: 28px; height: 28px; }
  .process-image { width: calc(100% - 76px); height: 52vw; border-radius: 28px; }
  .process-section > p { width: auto; font-size: 12px; line-height: 18px; }
  .screens-section { width: 100%; height: auto; margin-top: 130px; border: 0; }
  .screens-heading, .screens-carousel { position: static; transform: none; }
  .screens-scroll-hint { position: static; width: auto; margin: 40px 0 0; font-size: 12px; line-height: 18px; }
  .screens-heading { margin-bottom: 36px; }
  .device-tabs { gap: 10px; }
  .device-tabs button { padding: 6px 12px; font-size: 17px; }
  .screens-carousel { gap: 10px; overflow: hidden; }
  .screens-carousel > button { width: 28px; height: 28px; flex-basis: 28px; }
  .screens-carousel > button img { width: 28px; height: 28px; }
  .gnm-page .screens-content { width: calc(100% - 76px); overflow-x: auto; }
  .screens-track { width: calc(100% - 76px); gap: 12px; overflow-x: auto; }
  .gnm-page .screens-track { width: 1016px; }
  .gnm-page .screens-page { gap: 12px; }
  .screens-track img { width: 78vw; height: auto; flex: 0 0 78vw; }
  .gnm-page .screens-carousel { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
  .gnm-page .screens-content { width: 100%; height: auto; overflow: visible; }
  .gnm-page .case-shell, .gnm-page .case-shell:has(.screens-section.show-desktop) { height: auto; }
  .gnm-page .screens-section, .gnm-page .screens-section.show-desktop { height: auto; }
  .gnm-page .screens-section.show-desktop .screens-content { height: auto; }
  .gnm-page .screens-track { width: 100%; overflow-x: auto; }
  .gnm-page .mobile-screen-card { width: 78vw; height: min(113.33vw, 393px); flex-basis: 78vw; }
  .gnm-page .mobile-screen-card img { width: 100%; height: auto; }
  .gnm-page .desktop-screens-stage { position: static; width: 100%; height: auto; }
  .gnm-page .desktop-screens-page.active { position: static; display: flex; flex-direction: column; gap: 16px; }
  .gnm-page .desktop-screen-card { --screen-card-max-height: min(100vw, 520px); position: static; width: 100%; }
  .next-project { width: calc(100% - 24px); height: 180px; font-size: 24px; }
}